:root {
    --genesis-primary: #03423a;
    --genesis-primary-light: #e6f2f0;
    --genesis-primary-dark: #022b25;
    --genesis-accent: #0a6b5d;
    --genesis-success: #059669;
    --genesis-warning: #d97706;
    --genesis-danger: #dc2626;
    --genesis-info: #0891b2;
    --genesis-white: #ffffff;
    --genesis-gray-50: #f9fafb;
    --genesis-gray-100: #f3f4f6;
    --genesis-gray-200: #e5e7eb;
    --genesis-gray-300: #d1d5db;
    --genesis-gray-400: #9ca3af;
    --genesis-gray-600: #4b5563;
    --genesis-gray-700: #374151;
    --genesis-gray-800: #1f2937;
    --genesis-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --genesis-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --genesis-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --genesis-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --genesis-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html {
    height: 100%;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--genesis-gray-50);
    color: var(--genesis-gray-800);
    line-height: 1.6;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

/* Month Navigator Styles */
.month-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, #f0f9f7 100%);
    border-radius: 12px;
    border: 1px solid var(--genesis-gray-200);
}

.month-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 8px;
    color: var(--genesis-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--genesis-shadow-sm);
}

.month-nav-btn:hover {
    background: var(--genesis-primary);
    color: var(--genesis-white);
    border-color: var(--genesis-primary);
    transform: translateY(-1px);
    box-shadow: var(--genesis-shadow);
}

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

.month-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

.month-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--genesis-primary-dark);
    text-transform: capitalize;
    line-height: 1.2;
}

.month-year-container {
    position: relative;
}

.month-year-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--genesis-gray-600);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.month-year-btn:hover {
    background: var(--genesis-white);
    color: var(--genesis-primary);
    box-shadow: var(--genesis-shadow-sm);
}

.year-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 8px;
    box-shadow: var(--genesis-shadow-lg);
    z-index: 1000;
    min-width: 80px;
    margin-top: 4px;
}

.year-option {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--genesis-gray-700);
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

.year-option:hover {
    background: var(--genesis-primary-light);
    color: var(--genesis-primary);
}

.year-option.active {
    background: var(--genesis-primary);
    color: var(--genesis-white);
    font-weight: 600;
}

.current-month-btn-container {
    text-align: center;
    margin-bottom: 12px;
}

.current-month-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--genesis-accent) 0%, var(--genesis-primary) 100%);
    color: var(--genesis-white);
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: var(--genesis-shadow-sm);
}

.current-month-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--genesis-shadow);
    color: var(--genesis-white);
}

/* Mobile Month Navigator */
.mobile-month-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px;
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, #f0f9f7 100%);
    border-radius: 10px;
    border: 1px solid var(--genesis-gray-200);
}

.mobile-month-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 6px;
    color: var(--genesis-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--genesis-shadow-sm);
}

.mobile-month-nav-btn:hover {
    background: var(--genesis-primary);
    color: var(--genesis-white);
    border-color: var(--genesis-primary);
    transform: translateY(-1px);
    box-shadow: var(--genesis-shadow);
}

.mobile-month-display {
    flex: 1;
    text-align: center;
}

.mobile-month-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--genesis-primary-dark);
    text-transform: capitalize;
    margin-bottom: 2px;
}

.mobile-year-btn {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--genesis-gray-600);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin: 0 auto;
}

.mobile-year-btn:hover {
    background: var(--genesis-white);
    color: var(--genesis-primary);
    box-shadow: var(--genesis-shadow-sm);
}

.mobile-year-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 6px;
    box-shadow: var(--genesis-shadow-lg);
    z-index: 1000;
    min-width: 70px;
    margin-top: 4px;
}

.mobile-year-option {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--genesis-gray-700);
    font-weight: 500;
    text-align: center;
    font-size: 13px;
    transition: all 0.2s ease;
}

.mobile-year-option:hover {
    background: var(--genesis-primary-light);
    color: var(--genesis-primary);
}

.mobile-year-option.active {
    background: var(--genesis-primary);
    color: var(--genesis-white);
    font-weight: 600;
}

.mobile-current-month-btn-container {
    text-align: center;
    margin-bottom: 12px;
}

.mobile-current-month-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--genesis-accent) 0%, var(--genesis-primary) 100%);
    color: var(--genesis-white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: var(--genesis-shadow-sm);
}

.mobile-current-month-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--genesis-shadow);
    color: var(--genesis-white);
}

/* Modern Comment Styles */
.comment-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: visible;
    transition: all 0.2s ease;
    position: relative;
}

.comment-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px 12px;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0;
    position: relative;
    overflow: visible;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-text {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-date {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comment-edited {
    font-size: 10px;
    color: #9ca3af;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 2px;
}

.comment-edited .fas {
    font-size: 8px;
    opacity: 0.7;
}

.badge-assignee {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.badge-internal {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.comment-actions {
    position: relative;
}

.btn-action {
    background: none;
    border: none;
    color: #9ca3af;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-action:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.comment-actions .dropdown {
    position: relative;
}

.comment-actions .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 160px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    margin-top: 4px;
    transform: translateY(0);
}

.comment-actions .dropdown-item {
    padding: 8px 16px;
    font-size: 13px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #374151;
    transition: all 0.2s ease;
}

.comment-actions .dropdown-item:hover {
    background: #f9fafb;
    color: #1f2937;
}

.comment-actions .dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.comment-content {
    padding: 16px 20px 20px;
    border-radius: 0 0 12px 12px;
}

.comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

/* Special Comment Types */
.comment-card.assignee-comment {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.comment-card.assignee-comment .author-avatar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.comment-card.internal-comment {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
    position: relative;
}


.comment-card.internal-comment .author-avatar {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.edit-comment-form {
    padding: 0 20px 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 12px;
    background: #fafbfc;
}

/* History Timeline Styles */
.history-timeline {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 0;
}

.history-timeline::-webkit-scrollbar {
    width: 6px;
}

.history-timeline::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.history-timeline::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.history-timeline::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

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

.history-item:hover {
    background: #fafbfc;
}

.history-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.history-avatar-text {
    color: white;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.history-content {
    flex: 1;
    min-width: 0;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.history-author {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}

.history-date {
    font-size: 11px;
    color: #9ca3af;
}

.history-action {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.history-field {
    font-weight: 500;
    color: #374151;
}

.history-change {
    margin-top: 4px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 12px;
    border-left: 3px solid #e2e8f0;
}

.history-change .old-value {
    color: #dc2626;
    text-decoration: line-through;
    font-weight: 500;
}

.history-change .new-value {
    color: #059669;
    font-weight: 500;
}

.history-change .fas {
    color: #6b7280;
    font-size: 10px;
}

.navbar-hero {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    padding: 0;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(3, 66, 58, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1030;
    overflow: visible;
    border: none;
}

.navbar-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.navbar-decorative-circle {
    position: absolute;
    top: -60%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: floatCircle 20s ease-in-out infinite;
}

.navbar-decorative-circle-small {
    position: absolute;
    bottom: -40%;
    left: 5%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: floatCircle 15s ease-in-out infinite reverse;
}

@keyframes floatCircle {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 20px) scale(1.05); }
}

.navbar-hero .container-fluid {
    padding: 1rem 1.5rem;
    position: relative;
    z-index: 1;
}

.navbar-brand-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

.navbar-brand-hero:hover {
    transform: translateY(-2px);
}

.brand-logo {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
}

.navbar-brand-hero:hover .brand-logo {
    transform: scale(1.05);
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.brand-subtitle {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.navbar-toggler-hero {
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.75rem;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    overflow: visible;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.navbar-toggler-hero:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.35);
}

.navbar-toggler-hero:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    outline: none;
}

@media (max-width: 991px) {
    .navbar-toggler-hero {
        display: flex;
    }
}

.toggler-icon {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--genesis-white);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.navbar-toggler-hero[aria-expanded="true"] {
    gap: 0;
}

.navbar-toggler-hero[aria-expanded="true"] .toggler-icon:nth-child(1) {
    transform: rotate(45deg) translate(0, 0);
    position: absolute;
}

.navbar-toggler-hero[aria-expanded="true"] .toggler-icon:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.navbar-toggler-hero[aria-expanded="true"] .toggler-icon:nth-child(3) {
    transform: rotate(-45deg) translate(0, 0);
    position: absolute;
}

.nav-link-hero {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.625rem 1rem !important;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 0.25rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid transparent;
}

.nav-link-hero:hover {
    color: var(--genesis-white) !important;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-link-hero.active {
    color: var(--genesis-primary) !important;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.nav-link-hero i {
    font-size: 1.05rem;
    opacity: 0.95;
}

.nav-dropdown-hero {
    position: relative;
}

.nav-dropdown-hero::before {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: transparent;
    z-index: 1000;
}

.dropdown-menu-hero {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(3, 66, 58, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(3, 66, 58, 0.25), 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    margin-top: 0.5rem;
    min-width: 280px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
}

.dropdown-menu-hero.show {
    display: block;
    animation: dropdownSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item-hero {
    color: var(--genesis-gray-700) !important;
    padding: 0.675rem 1rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 0.925rem;
    border-radius: 8px;
    margin: 0.125rem 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dropdown-item-hero:hover {
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, rgba(230, 242, 240, 0.5) 100%);
    color: var(--genesis-primary) !important;
    transform: translateX(4px);
    border-color: var(--genesis-primary-light);
}

.dropdown-item-hero.active {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    color: var(--genesis-white) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(3, 66, 58, 0.25);
}

.dropdown-item-hero i {
    opacity: 0.85;
    transition: opacity 0.25s ease;
}

.dropdown-item-hero:hover i {
    opacity: 1;
}

.dropdown-item-danger {
    color: var(--genesis-danger) !important;
}

.dropdown-item-danger:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--genesis-danger) !important;
    border-color: rgba(220, 38, 38, 0.2);
}

.nav-dropdown-hero .dropdown-toggle::after {
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}


.user-dropdown-hero {
    position: relative;
}

.user-dropdown-hero::before {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: transparent;
    z-index: 1000;
}

.user-link-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.user-link-hero:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.user-avatar-hero-wrapper {
    position: relative;
    flex-shrink: 0;
}

.user-avatar-hero-wrapper .employee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-link-hero:hover .employee-avatar {
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

.user-info-hero {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.user-name-hero {
    font-weight: 700;
    font-size: 0.925rem;
    color: var(--genesis-white);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-position-hero {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-hero .dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.8);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transition: transform 0.3s ease;
}


@media (min-width: 992px) {
    .navbar-nav.me-auto {
        margin-left: 2.5rem;
    }
}

@media (max-width: 991px) {
    .nav-dropdown-hero::before {
        display: none;
    }

    .user-dropdown-hero::before {
        display: none;
    }

    .nav-dropdown-hero .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    .user-dropdown-hero .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    .dropdown-menu-hero {
        box-shadow: none;
        border: none;
        background: var(--genesis-gray-50);
        border-radius: 8px;
        padding: 0.5rem;
        margin-top: 0.5rem;
        margin-left: 1rem;
        position: static;
        width: calc(100% - 1rem);
        display: none !important;
    }

    .nav-dropdown-hero > .dropdown-toggle[aria-expanded="true"] + .dropdown-menu-hero,
    .user-dropdown-hero > .dropdown-toggle[aria-expanded="true"] + .dropdown-menu-hero,
    .dropdown-menu-hero.show {
        display: block !important;
    }

    .navbar-hero .container-fluid {
        padding: 0.875rem 1rem;
    }

    .navbar-brand-hero {
        padding: 0;
        gap: 0.35rem;
    }

    .brand-logo {
        height: 22px;
    }

    .brand-subtitle {
        font-size: 0.55rem;
    }

    .navbar-toggler-hero {
        width: 44px;
        height: 44px;
        padding: 0.625rem;
    }

    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-radius: 12px;
        margin-top: 1rem;
        padding: 1rem;
        box-shadow: 0 8px 32px rgba(3, 66, 58, 0.2);
        border: 1px solid rgba(3, 66, 58, 0.1);
    }

    .nav-link-hero {
        color: var(--genesis-gray-700) !important;
        padding: 0.875rem 1rem !important;
        margin: 0.25rem 0;
        border-radius: 10px;
    }

    .nav-link-hero:hover {
        background: var(--genesis-primary-light);
        color: var(--genesis-primary) !important;
        border-color: var(--genesis-primary-light);
    }

    .nav-link-hero.active {
        background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
        color: var(--genesis-white) !important;
    }

    .dropdown-item-hero {
        padding: 0.75rem 1rem;
    }

    .user-link-hero {
        background: rgba(3, 66, 58, 0.08);
        border-color: rgba(3, 66, 58, 0.15);
        justify-content: center;
    }

    .user-info-hero {
        text-align: center;
        align-items: center;
    }

    .user-name-hero {
        color: var(--genesis-gray-800);
    }

    .user-position-hero {
        color: var(--genesis-gray-600);
    }

    .user-avatar-hero-wrapper .employee-avatar {
        border-color: var(--genesis-primary-light);
    }

    .user-dropdown-hero .dropdown-toggle::after {
        border-top-color: var(--genesis-gray-600);
    }
}

@media (max-width: 576px) {
    .navbar-hero .container-fluid {
        padding: 0.75rem 0.875rem;
    }

    .navbar-brand-hero {
        padding: 0;
        gap: 0.3rem;
    }

    .brand-logo {
        height: 20px;
    }

    .brand-subtitle {
        font-size: 0.5rem;
    }

    .navbar-toggler-hero {
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }

    .toggler-icon {
        width: 20px;
        height: 2px;
    }

    .user-info-hero {
        display: none !important;
    }

    .user-avatar-hero-wrapper .employee-avatar {
        width: 36px;
        height: 36px;
    }

    .navbar-decorative-circle {
        width: 250px;
        height: 250px;
    }

    .navbar-decorative-circle-small {
        width: 150px;
        height: 150px;
    }
}

/* Modern Navigation Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modern-dropdown.show {
    animation: slideDown 0.3s ease-out;
}


/* Enhanced Hamburger Animation */
.modern-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.modern-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(2) {
    opacity: 0;
}

.modern-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* Remove glass morphism effect */

/* Hover animations for nav items */
.modern-nav-link {
    overflow: visible;
}

/* Enhanced user avatar hover effect */
.user-avatar:hover,
.user-avatar-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(3, 66, 58, 0.3);
    border-color: var(--genesis-primary);
}

/* Subtle pulse animation for status indicator */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(5, 150, 105, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
    }
}

.user-status-indicator {
    animation: pulse 2s infinite;
}

.modern-toggler:hover .navbar-toggler-line {
    background: var(--genesis-accent);
}

/* Focus states for accessibility */
.modern-nav-link:focus,
.modern-dropdown-item:focus {
    outline: none;
    box-shadow: none;
}

/* Remove logo animation */

.monthly-earnings-note {
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 1rem;
    box-shadow: var(--genesis-shadow);
    overflow: hidden;
}

.monthly-earnings-note h5 {
    color: var(--genesis-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.monthly-earnings-note ul {
    list-style: none;
    padding: 0;
}

.monthly-earnings-note ul li {
    padding: 0.5rem 0;
    color: var(--genesis-gray-700);
    position: relative;
    padding-left: 1.5rem;
}

.monthly-earnings-note ul li:before {
    content: "•";
    color: var(--genesis-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.monthly-earnings-note hr {
    border-color: var(--genesis-gray-200);
}

.salary-note {
    color: var(--genesis-gray-600);
    font-size: 0.95rem;
}

.monthly-earnings-note .fw-bold {
    color: var(--genesis-primary);
    font-size: 1.25rem;
}

.main-container {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.header-section {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: var(--genesis-shadow-lg);
}

.week-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: scale(1.1);
}

.week-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.week-subtitle {
    opacity: 0.9;
    font-size: 1.1rem;
}

.current-week-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.current-week-link:hover {
    color: white;
    border-bottom-style: solid;
}

.days-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.0rem !important;
    padding: 0;
}

.day-card {
    background: var(--genesis-white);
    border-radius: 1rem;
    border: 1px solid var(--genesis-gray-200);
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 496px;
    box-shadow: var(--genesis-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Штриховка для выходных дней - используем цвет из модалки */
.day-card:has(.shift-type-weekend) {
    background: repeating-linear-gradient(
        45deg,
        var(--genesis-white),
        var(--genesis-white) 10px,
        rgba(8, 145, 178, 0.08) 10px,
        rgba(8, 145, 178, 0.08) 20px
    );
    border-color: rgba(8, 145, 178, 0.4);
}



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

.day-header {
    background: var(--genesis-gray-50);
    padding: 1rem;
    border-bottom: 2px solid var(--genesis-gray-200);
}

.day-header.today {
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, #d4e6e3 100%);
    border-bottom-color: var(--genesis-primary);
}

.day-header.past-with-fact {
    background: var(--genesis-white);
    border-bottom-color: var(--genesis-success);
}

.day-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--genesis-gray-800);
    margin: 0;
    text-transform: capitalize;
}

.day-date {
    color: var(--genesis-gray-600);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.day-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-today {
    background: var(--genesis-primary);
    color: white;
}

.badge-completed {
    background: var(--genesis-success);
    color: white;
}

.day-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.fact-info {
    background: var(--genesis-gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--genesis-gray-200);
    min-height: 350px !important;
}

.fact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--genesis-gray-200);
    font-size: 0.875rem;
}

.fact-row.duration-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.fact-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fact-label {
    font-weight: 600;
    color: var(--genesis-gray-700);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
}

.fact-label i {
    color: var(--genesis-primary);
    font-size: 0.75rem;
}

.fact-value {
    color: var(--genesis-gray-800);
    font-weight: 500;
    font-size: 0.875rem;
}

.fact-row .d-flex {
    background: var(--genesis-white);
    border-radius: 0.375rem;
    padding: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fact-row .d-flex > div {
    flex: 1 1 30%;
    text-align: center;
    border: none;
    min-width: 70px;
}

.fact-row .d-flex .fact-label {
    font-size: 0.7rem;
    color: var(--genesis-gray-600);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.fact-row .d-flex .fact-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--genesis-primary);
}

.shift-type-regular {
    color: var(--genesis-primary);
}

.shift-type-overtime {
    color: var(--genesis-warning);
}

.shift-type-weekend {
    color: var(--genesis-info);
}

/* Shared Department Badge Styles */
.department-badge, .fact-department-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.department-badge i, .fact-department-badge i {
    font-size: 0.7rem;
}

/* Department Type Variants */
.badge-dept-standard, .department-badge.standard {
    background: var(--genesis-primary-light);
    color: var(--genesis-primary);
    border-color: var(--genesis-primary);
}

.badge-dept-batch, .department-badge.batch {
    background: #fef3c7;
    color: var(--genesis-warning);
    border-color: var(--genesis-warning);
}

.badge-dept-preparation, .department-badge.preparation {
    background: #f0f9ff;
    color: var(--genesis-info);
    border-color: var(--genesis-info);
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-add-fact,
.btn-edit-fact {
    background: var(--genesis-primary);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
}

.btn-add-fact:hover,
.btn-edit-fact:hover {
    background: var(--genesis-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

.btn-danger {
    background: var(--genesis-danger);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

.empty-state {
    text-align: center;
    color: var(--genesis-gray-500);
    padding: 2rem 1rem;
}

.empty-state i {
    color: var(--genesis-gray-400);
}

.empty-state p {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: var(--genesis-shadow-xl);
}

.modal-header {
    background: var(--genesis-primary);
    color: white;
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
    border-bottom: none;
}

.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.modal-body {
    padding: 2rem;
}

.form-label {
    font-weight: 600;
    color: var(--genesis-gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control,
.form-select {
    border-radius: 0.5rem;
    border: 2px solid var(--genesis-gray-200);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 3px rgba(3, 66, 58, 0.1);
    outline: none;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--genesis-gray-200);
    background: var(--genesis-gray-50);
    border-radius: 0 0 1rem 1rem;
}

.btn-primary {
    background: var(--genesis-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--genesis-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

/* ======================================================================
   DATATABLES MODERN CORPORATE STYLING
   ====================================================================== */

/* Main DataTables wrapper */
.dataTables_wrapper {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--genesis-gray-800);
}

/* Top controls styling */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length label {
    font-weight: 500;
    color: var(--genesis-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--genesis-gray-300);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--genesis-white);
    color: var(--genesis-gray-800);
    font-weight: 500;
    min-width: 4rem;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 2px rgba(3, 66, 58, 0.1);
    outline: none;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: 500;
    color: var(--genesis-gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--genesis-gray-300);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--genesis-white);
    color: var(--genesis-gray-800);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    min-width: 200px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 2px rgba(3, 66, 58, 0.1);
    outline: none;
}

/* Table styling overrides */
table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0;
    width: 100% !important;
    margin: 0 !important;
    background: var(--genesis-white);
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}

/* Header styling */
table.dataTable thead th {
    background: var(--genesis-primary) !important;
    color: var(--genesis-white) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem !important;
    border: none !important;
    border-right: 1px solid var(--genesis-gray-200) !important;
    vertical-align: middle;
    text-align: center;
    position: relative;
    white-space: nowrap;
}

/* Remove ALL DataTables sorting icons and padding */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting_asc_disabled:before,
table.dataTable thead th.sorting_asc_disabled:after,
table.dataTable thead th.sorting_desc_disabled:before,
table.dataTable thead th.sorting_desc_disabled:after,
table.dataTable thead td.sorting:before,
table.dataTable thead td.sorting:after,
table.dataTable thead td.sorting_asc:before,
table.dataTable thead td.sorting_asc:after,
table.dataTable thead td.sorting_desc:before,
table.dataTable thead td.sorting_desc:after,
table.dataTable thead td.sorting_asc_disabled:before,
table.dataTable thead td.sorting_asc_disabled:after,
table.dataTable thead td.sorting_desc_disabled:before,
table.dataTable thead td.sorting_desc_disabled:after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Remove right padding from sortable columns */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc,
table.dataTable thead td.sorting_asc_disabled,
table.dataTable thead td.sorting_desc_disabled {
    padding-right: 8px !important;
}

/* Custom sorting icons */
table.dataTable thead th.sorting {
    cursor: pointer;
}

table.dataTable thead th.sorting:hover {
    background: var(--genesis-primary-dark) !important;
}

/* Body styling */
table.dataTable tbody td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--genesis-gray-100);
    border-right: 1px solid var(--genesis-gray-200);
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--genesis-gray-800);
    background: var(--genesis-white);
    transition: background-color 0.2s ease;
}

table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
    border-left: 1px solid var(--genesis-gray-200);
}

table.dataTable tbody tr {
    transition: all 0.2s ease;
}

table.dataTable tbody tr:hover {
    background-color: var(--genesis-primary-light) !important;
}

table.dataTable tbody tr:hover td {
    background-color: transparent !important;
}

/* Remove striping effects */
table.dataTable.table-striped tbody tr.odd {
    background-color: var(--genesis-white) !important;
}

table.dataTable.table-striped tbody tr.odd td {
    background-color: transparent !important;
}

table.dataTable.table-striped tbody tr.even {
    background-color: var(--genesis-white) !important;
}

table.dataTable.table-striped tbody tr.even td {
    background-color: transparent !important;
}

/* Bottom info and pagination */
.dataTables_wrapper .dataTables_info {
    padding-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--genesis-gray-600);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    gap: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border: 1px solid var(--genesis-gray-300);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--genesis-white);
    color: var(--genesis-gray-700);
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background: var(--genesis-primary-light);
    border-color: var(--genesis-primary);
    color: var(--genesis-primary);
}

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

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: var(--genesis-gray-100);
    border-color: var(--genesis-gray-200);
    color: var(--genesis-gray-400);
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
    font-weight: 600;
}

/* Processing indicator */
.dataTables_processing {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--genesis-primary);
    font-weight: 600;
    padding: 1rem 2rem;
}

/* Compact table layout for better data display */
table.dataTable.compact thead th,
table.dataTable.compact tbody td {
    padding: 0.5rem 0.375rem;
}

/* Button styling in tables */
table.dataTable .btn-group {
    display: flex;
    gap: 0.25rem;
}

table.dataTable .btn-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Badge styling in tables */
table.dataTable .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Empty state styling */
table.dataTable .dataTables_empty {
    padding: 3rem 1rem;
    color: var(--genesis-gray-500);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    background: var(--genesis-gray-50);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 0.75rem;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        min-width: 150px;
    }
    
    table.dataTable thead th {
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem !important;
    }
    
    table.dataTable tbody td {
        padding: 0.625rem 0.5rem;
        font-size: 0.8rem;
    }
    
    table.dataTable .btn-sm {
        padding: 0.25rem 0.375rem;
        font-size: 0.7rem;
    }
    
    .dataTables_wrapper .dataTables_paginate .page-item .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ======================================================================
   GLOBAL TABLE HOVER EFFECTS
   ====================================================================== */

/* Universal table row hover effect for all tables */
.table tbody tr:hover {
    background-color: var(--genesis-primary-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(3, 66, 58, 0.15) !important;
    transition: all 0.2s ease !important;
}

.table tbody tr:hover td {
    background-color: transparent !important;
}

/* Ensure DataTables honor the global hover effect */
table.dataTable tbody tr:hover {
    background-color: var(--genesis-primary-light) !important;
}

table.dataTable tbody tr:hover td {
    background-color: transparent !important;
}

/* ======================================================================
   UNIFIED TABLE PAGE LAYOUT SYSTEM
   ====================================================================== */

/* Main page container */
.table-page-wrapper {
    background: var(--genesis-gray-50);
    min-height: calc(100vh - 8rem);
    padding: 1rem 0;
}

.table-page-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Page header section */
.table-page-header {
    background: linear-gradient(135deg, var(--genesis-white) 0%, var(--genesis-gray-50) 100%);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(3, 66, 58, 0.08);
    border: 1px solid var(--genesis-gray-200);
}

.table-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.table-page-title-section h1 {
    color: var(--genesis-primary);
    font-weight: 700;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.table-page-subtitle {
    color: var(--genesis-gray-600);
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

.table-page-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.table-page-primary-btn {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    border: none;
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(3, 66, 58, 0.2);
}

.table-page-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(3, 66, 58, 0.3);
    color: white;
}

.table-page-secondary-btn {
    background: var(--genesis-white);
    border: 2px solid var(--genesis-primary);
    color: var(--genesis-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-page-secondary-btn:hover {
    background: var(--genesis-primary);
    color: white;
    transform: translateY(-1px);
}

/* Filters section */
.table-page-filters {
    background: var(--genesis-white);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--genesis-gray-200);
}

.table-page-filters-title {
    color: var(--genesis-gray-700);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-page-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.table-page-filter-btn {
    background: var(--genesis-primary);
    border: none;
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    height: auto;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.table-page-filter-btn:hover {
    background: var(--genesis-primary-dark);
    transform: translateY(-1px);
}

/* Filter form controls */
.table-page-filter-label {
    color: var(--genesis-gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-page-filter-input {
    border: 2px solid var(--genesis-gray-200);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--genesis-white);
    min-height: 3.5rem;
    box-sizing: border-box;
    width: 100%;
}

.table-page-filter-input:focus {
    outline: none;
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 3px rgba(3, 66, 58, 0.1);
}

.table-page-filter-select {
    border: 2px solid var(--genesis-gray-200);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--genesis-white);
    min-height: 3.5rem;
    box-sizing: border-box;
    cursor: pointer;
}

.table-page-filter-select:focus {
    outline: none;
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 3px rgba(3, 66, 58, 0.1);
}

/* Universal filter layout for table pages */
.table-filters-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-row {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.filter-group.flex-grow {
    flex: 1;
    min-width: 250px;
}

.filter-group.departments-filter {
    flex: 1;
    max-width: 100%;
}


/* Multi-select improvements */
.multi-checkbox-group {
    margin-bottom: 0;
}

.multi-checkbox-group .checkbox-list {
    max-height: 180px;
    overflow-y: auto;
    border: 2px solid var(--genesis-gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--genesis-white);
    transition: border-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.multi-checkbox-group .checkbox-list:hover {
    border-color: var(--genesis-primary);
}

/* Custom scrollbar */
.multi-checkbox-group .checkbox-list::-webkit-scrollbar {
    width: 6px;
}

.multi-checkbox-group .checkbox-list::-webkit-scrollbar-track {
    background: var(--genesis-gray-100);
    border-radius: 3px;
}

.multi-checkbox-group .checkbox-list::-webkit-scrollbar-thumb {
    background: var(--genesis-gray-400);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.multi-checkbox-group .checkbox-list::-webkit-scrollbar-thumb:hover {
    background: var(--genesis-primary);
}

/* Simple default layout - always single column */
.multi-checkbox-group .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Compact mode for modals and narrow spaces */  
.multi-checkbox-group .checkbox-list.compact {
    gap: 0.1rem;
    max-height: 120px;
    padding: 0.5rem;
    overflow-y: auto;
}

.multi-checkbox-group .checkbox-list.compact .form-check {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.05rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;  
    min-height: 2rem;
}

.multi-checkbox-group .checkbox-list.compact .form-check:hover {
    background-color: var(--genesis-gray-100);
}

.multi-checkbox-group .checkbox-list.compact .form-check-label {
    font-size: 0.875rem;
    line-height: 1.4;
    padding-left: 0.6rem;
    font-weight: 500;
    margin-bottom: 0;
    flex: 1;
}

.multi-checkbox-group .checkbox-list.compact .form-check-input {
    margin: 0;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* Override any previous complex rules */
.modal .multi-checkbox-group .checkbox-list,
.modal-dialog .multi-checkbox-group .checkbox-list {
    display: flex !important;
    flex-direction: column !important;
    columns: unset !important;
    column-count: unset !important;
}

.multi-checkbox-group .form-check {
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.multi-checkbox-group .form-check:hover {
    background-color: var(--genesis-gray-50);
}

.multi-checkbox-group .form-check-input {
    margin-top: 0.25rem;
}

.multi-checkbox-group .form-check-label {
    font-size: 0.9rem;
    cursor: pointer;
    padding-left: 0.25rem;
    line-height: 1.4;
}

.multi-checkbox-group .select-all-btn,
.multi-checkbox-group .reset-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.multi-checkbox-group .select-all-btn:hover {
    background-color: var(--genesis-primary);
    color: white;
}

.multi-checkbox-group .reset-btn:hover {
    background-color: var(--genesis-gray-500);
    color: white;
}

/* Selection counter styling */
.multi-checkbox-group .selected-count {
    font-weight: 600;
    color: var(--genesis-primary);
}

/* Compact version for modals */
.modal .multi-checkbox-group .mb-2 {
    margin-bottom: 0.5rem !important;
}

.modal .multi-checkbox-group .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal .multi-checkbox-group small {
    font-size: 0.75rem;
    width: 100%;
    margin-top: 0.25rem;
}

/* Better spacing for modal dialogs */
.modal-dialog .multi-checkbox-group {
    margin-bottom: 1rem;
}

.modal-dialog .multi-checkbox-group .checkbox-list {
    max-height: 130px;
    padding: 0.5rem;
    column-count: 1 !important;
}

.modal-dialog .multi-checkbox-group .form-check {
    padding: 0.2rem 0.4rem;
    display: flex !important;
    width: auto !important;
}

.modal-dialog .multi-checkbox-group .form-check-label {
    font-size: 0.85rem;
}

/* Fix for checkbox alignment in modals */
.modal-dialog .multi-checkbox-group .form-check-input {
    margin-top: 0.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.date-range-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-input {
    flex: 1;
    min-width: 140px;
}

.date-separator {
    color: var(--genesis-gray-400);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 0.25rem;
}

.table-page-filter-btn.full-height {
    margin-top: auto;
    align-self: stretch;
}

/* Responsive adjustments for assignments filters */
@media (max-width: 1200px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        min-width: auto;
        width: 100%;
    }
    
    .date-range-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .date-input {
        min-width: auto;
        width: 100%;
    }
    
    .date-separator {
        display: none;
    }
}

/* Table section */
.table-page-content {
    background: var(--genesis-white);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--genesis-gray-200);
}

.table-page-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--genesis-gray-100);
}

.table-page-stats-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.table-page-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--genesis-gray-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.table-page-stat-number {
    color: var(--genesis-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.table-page-stats-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Enhanced table wrapper */
.table-page-table-wrapper {
    border-radius: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--genesis-gray-200);
    background: var(--genesis-white);
}

/* Alert messages */
.table-page-alerts {
    margin-bottom: 1.5rem;
}

.table-page-alert {
    border-radius: 0.75rem;
    border: none;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.table-page-alert.success {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    color: #065f46;
    border-left: 4px solid var(--genesis-success);
}

.table-page-alert.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    color: #991b1b;
    border-left: 4px solid var(--genesis-danger);
}

.table-page-alert.info {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1e40af;
    border-left: 4px solid var(--genesis-info);
}

/* Empty state */
.table-page-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--genesis-gray-500);
}

.table-page-empty-icon {
    font-size: 3rem;
    color: var(--genesis-gray-400);
    margin-bottom: 1rem;
}

.table-page-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--genesis-gray-600);
    margin-bottom: 0.5rem;
}

.table-page-empty-text {
    font-size: 1rem;
    margin: 0;
}

/* Report page header */
.report-header {
    text-align: center;
    padding: 1rem 0;
}

.report-title {
    color: var(--genesis-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
}

/* Responsive design */
@media (max-width: 992px) {
    .table-page-container {
        padding: 0 1rem;
    }
    
    .table-page-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .table-page-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .table-page-title-section h1 {
        font-size: 1.75rem;
    }
    
    .table-page-actions {
        justify-content: stretch;
    }
    
    .table-page-primary-btn,
    .table-page-secondary-btn {
        flex: 1;
        justify-content: center;
    }
    
    .table-page-filters-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .table-page-wrapper {
        padding: 1rem 0;
    }
    
    .table-page-header {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .table-page-title-section h1 {
        font-size: 1.5rem;
    }
    
    .table-page-content,
    .table-page-filters {
        padding: 1rem;
    }
    
    .table-page-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .table-page-stats-left {
        justify-content: space-around;
    }
    
    .table-page-stats-right {
        justify-content: center;
    }
}

.btn-secondary {
    background: var(--genesis-gray-400);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--genesis-gray-600);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

.card {
    border: 1px solid var(--genesis-gray-200);
    border-radius: 0.75rem;
    box-shadow: var(--genesis-shadow);
    overflow: hidden;
}

.card-header {
    background: var(--genesis-primary);
    color: var(--genesis-white);
    border-bottom: none;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

.card-header h5,
.card-header h6 {
    margin: 0;
    color: var(--genesis-white);
}

.card-body {
    padding: 1.5rem;
}


.table {
    background-color: var(--genesis-white);
    margin-bottom: 0;
    table-layout: auto;
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
}

.table thead th {
    background-color: var(--genesis-primary) !important;
    color: var(--genesis-white) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border: none !important;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody td {
    vertical-align: middle;
    padding: 0.875rem;
    border-bottom: 1px solid var(--genesis-gray-100);
    transition: background-color 0.2s ease;
}

.table thead tr:last-child th:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

table.dataTable thead th[colspan] {
    text-align: center !important;
}

table.dataTable thead tr:first-child th[colspan]::after {
    display: none;
}

table.dataTable thead th {
    padding-right: 0 !important;
}

table.dataTable thead th::before,
table.dataTable thead th::after {
    display: none !important;
    content: none !important;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--genesis-primary-light);
    transform: none !important;
}

.table td {
    vertical-align: middle;
    padding: 0.75rem;
    border-color: var(--genesis-gray-200);
}

.table-responsive {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--genesis-gray-200);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--genesis-white);
}

.table-header-primary {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-primary-dark) 100%) !important;
}

.table .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.table-header-primary th {
    background: transparent !important;
    font-weight: 700 !important;
    padding: 1rem 0.75rem !important;
}

.table tbody tr:hover td {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--genesis-white);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--genesis-white);
}

.table-responsive .table {
    border-radius: 0;
    overflow: hidden;
}

.table td:last-child {
    white-space: nowrap;
}

.table .btn-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    min-width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge {
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 2rem;
}

.badge.bg-danger {
    background-color: var(--genesis-danger) !important;
}

.badge.bg-warning {
    background-color: var(--genesis-warning) !important;
    color: var(--genesis-dark) !important;
}

.badge.bg-primary {
    background-color: var(--genesis-primary) !important;
}

.btn-group .btn {
    margin: 0 0.25rem;
    transition: all 0.2s ease;
}

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

.btn-outline-primary:hover {
    background-color: var(--genesis-primary);
    border-color: var(--genesis-primary);
    color: white;
}

.btn-outline-warning {
    color: var(--genesis-warning);
    border-color: var(--genesis-warning);
}

.btn-outline-warning:hover {
    background-color: var(--genesis-warning);
    border-color: var(--genesis-warning);
    color: white;
}

.btn-outline-danger {
    color: var(--genesis-danger);
    border-color: var(--genesis-danger);
}

.btn-outline-danger:hover {
    background-color: var(--genesis-danger);
    border-color: var(--genesis-danger);
    color: white;
}

.alert {
    border-radius: 0.75rem;
    border: none;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--genesis-shadow-sm);
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
}

.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.alert-info {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.alert-warning {
    background-color: #fef3c7;
    color: #92400e;
}

h2 {
    color: var(--genesis-primary);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.footer {
    background-color: var(--genesis-primary) !important;
    color: white;
    margin-top: 4rem;
}

.footer .container {
    padding: 2rem 0;
    text-align: center;
}

@media (max-width: 1199px) and (min-width: 768px) {
    .days-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Improved responsive design for day cards */
@media (max-width: 992px) {
    .fact-metrics-table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        margin-top: 0.5rem;
        background: var(--genesis-gray-50);
        border-radius: 0.375rem;
        overflow: hidden;
        border: 1px solid var(--genesis-gray-200);
        width: 100%;
    }
    
    .metric-column {
        padding: 0.4rem 0.2rem;
        text-align: center;
        border-right: 1px solid var(--genesis-gray-200);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 2.5rem;
    }
    
    .metric-column:last-child {
        border-right: none;
    }
    
    .metric-header {
        font-size: 0.65rem;
        color: var(--genesis-gray-600);
        font-weight: 500;
        margin-bottom: 0.2rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1;
    }
    
    .metric-value {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--genesis-primary);
        line-height: 1;
        margin-top: auto;
    }
}

@media (max-width: 768px) {
    .days-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .header-section {
        padding: 1.5rem 1rem;
    }

    .week-navigation {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .week-title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .week-subtitle {
        font-size: 0.95rem;
    }

    .day-card {
        min-height: auto !important;
    }

    .fact-info {
        min-height: auto !important;
        padding: 0.875rem;
    }

    .fact-row {
        padding: 0.4rem 0;
        font-size: 0.8rem;
    }

    .fact-label {
        font-size: 0.75rem;
    }

    .fact-value {
        font-size: 0.8rem;
    }

    .fact-metrics-table {
        grid-template-columns: repeat(2, 1fr);
        font-size: 0.75rem;
    }

    .metric-column {
        padding: 0.35rem 0.15rem;
        min-height: 2rem;
    }

    .metric-header {
        font-size: 0.6rem;
    }

    .metric-value {
        font-size: 0.75rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .action-buttons button {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .day-header {
        padding: 0.875rem;
    }

    .day-title {
        font-size: 1rem;
    }

    .day-date {
        font-size: 0.75rem;
    }

    .day-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .table thead th {
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }

    .table tbody td {
        padding: 0.625rem 0.5rem;
    }

    .table thead th::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .fact-metrics-table {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .metric-column {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        min-height: auto;
    }
    
    .metric-header {
        margin-bottom: 0;
        font-size: 0.7rem;
    }
    
    .metric-value {
        margin-top: 0;
        font-size: 0.8rem;
    }

    .week-navigation {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .nav-btn {
        align-self: center;
    }

    .header-section {
        padding: 1.25rem 0.75rem;
    }

    .fact-row.duration-row {
        gap: 0.2rem;
    }

    .fact-label i {
        display: none;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--genesis-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--genesis-gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--genesis-gray-500);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--genesis-primary);
}

.table-danger {
    background-color: #fee2e2 !important;
}

.table-danger:hover {
    background-color: #fecaca !important;
}

.multi-checkbox-group .checkbox-list {
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--genesis-gray-200);
    border-radius: 0.5rem;
    background-color: var(--genesis-white);
}

.multi-checkbox-group .form-check {
    margin-bottom: 0.25rem;
}

.password-generator .generated-password {
    cursor: default;
    font-family: 'Courier New', monospace;
}

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

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

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

.fact-metrics-table {
    display: flex;
    gap: 0;
    margin-top: 0.5rem;
    background: var(--genesis-gray-50);
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--genesis-gray-200);
    width: 100%;
}

.metric-column {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.25rem;
    border-right: 1px solid var(--genesis-gray-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 3rem;
}

.metric-column:last-child {
    border-right: none;
}

.metric-header {
    font-size: 0.7rem;
    color: var(--genesis-gray-600);
    font-weight: 500;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.metric-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--genesis-primary);
    line-height: 1;
    margin-top: auto;
}

.metric-percent {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--genesis-gray-500);
    margin-left: 1px;
}

.day-header.shift-regular::after,
.day-header.shift-overtime::after,
.day-header.shift-weekend::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.day-header {
    position: relative;
}

.day-header.shift-regular::after {
    background: var(--genesis-primary);
}

.day-header.shift-overtime::after {
    background: var(--genesis-warning);
}

.day-header.shift-weekend::after {
    background: var(--genesis-info);
}

@media (max-width: 480px) {
    .fact-metrics-table {
        font-size: 0.85rem;
    }

    .metric-header {
        font-size: 0.65rem;
    }

    .metric-value {
        font-size: 0.85rem;
    }
}

/* ======================================================================
   GENESIS EMPLOYEE FILTER COMPONENT
   ====================================================================== */

.genesis-employee-filter {
    position: relative;
    width: 100%;
}

.genesis-filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--genesis-gray-700);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}

.genesis-filter-label i {
    color: var(--genesis-primary);
    font-size: 0.8rem;
}

.genesis-filter-wrapper {
    position: relative;
}

/* Input Container */
.genesis-filter-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--genesis-white);
    border: 2px solid var(--genesis-gray-300);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    overflow: hidden;
    min-height: 3.5rem;
    height: auto;
}

.genesis-filter-input-container:hover {
    border-color: var(--genesis-primary);
    box-shadow: 0 2px 8px rgba(3, 66, 58, 0.1);
}

.genesis-filter-input-container:focus-within {
    border-color: var(--genesis-primary);
    box-shadow: 0 0 0 3px rgba(3, 66, 58, 0.1);
}

/* Search Icon */
.genesis-filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: var(--genesis-gray-400);
    pointer-events: none;
    transition: color 0.3s ease;
}

.genesis-filter-input-container:focus-within .genesis-filter-icon {
    color: var(--genesis-primary);
}

/* Input Field */
.genesis-filter-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.875rem 0.5rem 0.875rem 0;
    font-size: 0.95rem;
    color: var(--genesis-gray-800);
    background: transparent;
    font-weight: 500;
}

.genesis-filter-input::placeholder {
    color: var(--genesis-gray-400);
    font-weight: 400;
}

/* Clear Button */
.genesis-filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--genesis-gray-100);
    color: var(--genesis-gray-500);
    border-radius: 0.5rem;
    margin: 0.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.genesis-filter-clear:hover {
    background: var(--genesis-danger);
    color: white;
    transform: scale(1.05);
}

.genesis-filter-clear i {
    font-size: 0.8rem;
}

/* Dropdown */
.genesis-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--genesis-white);
    border: 1px solid var(--genesis-gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.genesis-filter-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Header */
.genesis-filter-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--genesis-gray-100);
    background: var(--genesis-gray-50);
    color: var(--genesis-gray-700);
    font-weight: 600;
    font-size: 0.9rem;
}

.genesis-filter-dropdown-header i {
    color: var(--genesis-primary);
}

/* Dropdown Body */
.genesis-filter-dropdown-body {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

/* Dropdown Items */
.genesis-filter-dropdown-item {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.875rem 1.25rem;
    text-align: left;
    transition: all 0.2s ease;
    cursor: pointer;
    border-bottom: 1px solid var(--genesis-gray-50);
}

.genesis-filter-dropdown-item:hover {
    background: var(--genesis-primary-light);
}

.genesis-filter-dropdown-item:last-child {
    border-bottom: none;
}

/* Employee Info */
.genesis-filter-employee-info {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}



.genesis-filter-employee-details {
    flex: 1;
    min-width: 0;
}

.genesis-filter-employee-name {
    font-weight: 600;
    color: var(--genesis-gray-800);
    font-size: 0.95rem;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.genesis-filter-employee-meta {
    font-size: 0.8rem;
    color: var(--genesis-gray-500);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.genesis-filter-dropdown-item:hover .genesis-filter-employee-name {
    color: var(--genesis-primary-dark);
}

.genesis-filter-dropdown-item:hover .genesis-filter-employee-meta {
    color: var(--genesis-gray-600);
}

/* Dropdown Footer */
.genesis-filter-dropdown-footer {
    padding: 0.75rem 1.25rem;
    background: var(--genesis-gray-50);
    border-top: 1px solid var(--genesis-gray-100);
    text-align: center;
}

.genesis-filter-dropdown-footer small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    color: var(--genesis-gray-500);
    font-size: 0.8rem;
}

.genesis-filter-dropdown-footer i {
    color: var(--genesis-info);
}

/* Loading State */
.genesis-filter-dropdown.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--genesis-primary), var(--genesis-accent), var(--genesis-primary));
    background-size: 200% 100%;
    animation: filterLoading 1.5s infinite;
    z-index: 1;
}

@keyframes filterLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.genesis-filter-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--genesis-gray-500);
}

.genesis-filter-empty i {
    font-size: 2rem;
    color: var(--genesis-gray-400);
    margin-bottom: 0.5rem;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .genesis-filter-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        border-radius: 1rem 1rem 0 0;
        margin-top: 0;
    }
    
    .genesis-filter-dropdown-body {
        max-height: 50vh;
    }
    
    .genesis-filter-employee-info {
        gap: 0.75rem;
    }
    
    
}

/* Focus and Active States */
.genesis-filter-input:focus {
    outline: none;
}

.genesis-filter-clear:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

/* Animation for dropdown show/hide */
@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.genesis-filter-dropdown.show {
    animation: dropdownSlideIn 0.2s ease-out;
}

/* Backward compatibility with old class names */
.employee-filter {
    /* Keep existing styles for gradual migration */
}

.employee-filter .employee-suggestions {
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    z-index: 2147483647;
}

.employee-filter .clear-employee-btn {
    border-radius: 0.5rem;
}

.allow-overflow {
    overflow: visible !important;
}

.salary-blur {
    filter: blur(6px);
    cursor: pointer;
    transition: filter 0.2s ease;
}

.salary-blur.revealed {
    filter: none;
}

.salary-toggle {
    cursor: pointer;
    color: var(--genesis-gray-600);
}

.monthly-report-table th,
.monthly-report-table td {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.monthly-report-table {
    margin-top: 0.5rem;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--genesis-gray-600);
}

.dataTables_wrapper .dataTables_length {
    padding-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--genesis-gray-700);
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--genesis-gray-300);
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background-color: var(--genesis-white);
    color: var(--genesis-gray-800);
    min-width: 6rem;
}

.dataTables_wrapper .datatable-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
}

/* User Sidebar Styles */
.user-sidebar {
    padding: 0;
}

.sticky-sidebar {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow-y: auto;
}

.user-info-card {
    background: var(--genesis-white);
    border-radius: 16px;
    border: 1px solid var(--genesis-gray-200);
    box-shadow: var(--genesis-shadow);
    overflow: hidden;
}

.user-welcome {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.welcome-title {
    margin: 0;
    font-weight: 400;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}

.welcome-title i {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.welcome-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.user-name {
    font-weight: 500;
    color: #d8ddd4;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

/* Адаптивная типографика для длинных имен */
@media (max-width: 1399px) {
    .welcome-title {
        font-size: 1rem;
    }
    
    .user-name {
        max-width: 160px;
    }
}

@media (max-width: 1199px) {
    .welcome-title {
        font-size: 0.95rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .welcome-title i {
        margin-right: 0;
    }
    
    .user-name {
        max-width: 140px;
    }
}

@media (max-width: 991px) {
    .user-name {
        max-width: 180px;
    }
}

.earnings-section,
.report-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--genesis-gray-100);
}

.report-section:last-child {
    border-bottom: none;
}

.section-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--genesis-primary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.period-text {
    color: var(--genesis-gray-600);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
    padding: 0.75rem;
    background: var(--genesis-gray-50);
    border-radius: 8px;
}

.departments-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--genesis-gray-700);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.departments-list {
    margin-bottom: 0;
}

.department-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    background: transparent;
    border-bottom: 1px solid var(--genesis-gray-100);
    border-radius: 0;
}

.department-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.dept-name {
    font-weight: 500;
    color: var(--genesis-gray-600);
    font-size: 0.85rem;
    line-height: 1.2;
}

.dept-earnings {
    font-weight: 600;
    color: var(--genesis-primary-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.report-summary {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--genesis-gray-50);
    border-radius: 8px;
    border: 1px solid var(--genesis-gray-100);
}

.summary-item.highlight {
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, var(--genesis-white) 100%);
    border-color: var(--genesis-primary);
}

.summary-label {
    font-weight: 500;
    color: var(--genesis-gray-700);
    font-size: 0.9rem;
}

.summary-value {
    font-weight: 700;
    color: var(--genesis-primary);
    font-size: 0.95rem;
}

.summary-item.highlight .summary-value {
    font-size: 1.1rem;
    color: var(--genesis-primary-dark);
}

.no-data-message {
    text-align: center;
    color: var(--genesis-gray-500);
    font-size: 0.9rem;
    padding: 1.5rem;
    background: var(--genesis-gray-50);
    border-radius: 8px;
    border: 1px solid var(--genesis-gray-100);
}

/* Mobile Info Card Styles */
.mobile-info-card {
    background: var(--genesis-white);
    border-radius: 16px;
    border: 1px solid var(--genesis-gray-200);
    box-shadow: var(--genesis-shadow);
    overflow: hidden;
}

.mobile-welcome {
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    color: white;
    padding: 1.25rem;
    text-align: center;
}

.mobile-welcome h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-content {
    padding: 1.25rem;
}

.mobile-period {
    text-align: center;
    color: var(--genesis-gray-600);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--genesis-gray-50);
    border-radius: 8px;
    font-weight: 500;
}

.mobile-section-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--genesis-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.mobile-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.mobile-dept-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem;
    background: var(--genesis-gray-50);
    border-radius: 10px;
    border: 1px solid var(--genesis-gray-100);
    transition: all 0.3s ease;
}

.mobile-dept-card:hover {
    background: var(--genesis-primary-light);
    border-color: var(--genesis-primary);
    transform: translateY(-1px);
}

.mobile-dept-name {
    font-weight: 500;
    color: var(--genesis-gray-700);
    font-size: 0.95rem;
}

.mobile-dept-amount {
    font-weight: 700;
    color: var(--genesis-primary);
    font-size: 1rem;
}

.mobile-departments {
    margin-bottom: 1.5rem;
}

.mobile-no-data {
    text-align: center;
    color: var(--genesis-gray-500);
    font-size: 1rem;
    padding: 1.5rem;
    background: var(--genesis-gray-50);
    border-radius: 10px;
    border: 1px solid var(--genesis-gray-100);
    margin-bottom: 1.5rem;
}

.mobile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.mobile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--genesis-gray-50);
    border-radius: 10px;
    border: 1px solid var(--genesis-gray-100);
    text-align: center;
}

.mobile-stat.highlight {
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, var(--genesis-white) 100%);
    border-color: var(--genesis-primary);
}

.mobile-stat.total-highlight {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, var(--genesis-white) 100%);
    border-color: var(--genesis-success);
}

.mobile-total-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--genesis-gray-200);
}

.mobile-premium-section {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.05) 0%, var(--genesis-white) 100%);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.mobile-stat-label {
    font-weight: 500;
    color: var(--genesis-gray-700);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.mobile-stat-value {
    font-weight: 700;
    color: var(--genesis-primary);
    font-size: 1.1rem;
}

.mobile-stat.highlight .mobile-stat-value {
    font-size: 1.25rem;
    color: var(--genesis-primary-dark);
}

/* Красивое оформление Итого в сайдбаре */
.total-section.highlight {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, var(--genesis-white) 100%);
    border: 2px solid var(--genesis-primary);
    border-radius: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.total-section.highlight:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(3, 66, 58, 0.2);
}

.total-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--genesis-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-amount-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
}

.total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--genesis-primary-dark);
    transition: all 0.4s ease;
    position: relative;
}

.total-amount.hidden {
    filter: blur(8px);
    background: repeating-linear-gradient(
        90deg,
        rgba(3, 66, 58, 0.2) 0px,
        rgba(3, 66, 58, 0.2) 2px,
        transparent 2px,
        transparent 4px
    );
    color: transparent;
    text-shadow: 0 0 12px rgba(3, 66, 58, 0.5);
    user-select: none;
}

.total-amount.hidden::before {
    content: '●●●●●●●';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--genesis-primary-dark);
    letter-spacing: 3px;
    font-size: 1rem;
    filter: none;
}

.total-amount-container::after {
    content: '';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 15;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.total-amount-container:has(.total-amount.hidden)::after {
    content: '\f023';
    color: var(--genesis-warning);
    border: 3px solid var(--genesis-warning);
    animation: lockAppear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), lockPulse 2s ease-in-out 0.6s infinite;
    opacity: 1;
}

.total-amount-container.unlocked::after {
    content: '\f09c';
    color: var(--genesis-success);
    border: 3px solid var(--genesis-success);
    animation: unlockFall 1.0s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 1;
}

@keyframes lockAppear {
    0% {
        transform: translate(-50%, -150%) scale(0.3) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -30%) scale(1.3) rotate(10deg);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -60%) scale(0.9) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.8;
    }
}

@keyframes lockPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

@keyframes unlockFall {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.2);
        opacity: 1;
        filter: brightness(1.2);
    }
    20% {
        transform: translate(-50%, -30%) rotate(15deg) scale(1.1);
        opacity: 1;
        filter: brightness(1.1);
    }
    40% {
        transform: translate(-50%, 10%) rotate(45deg) scale(1.0);
        opacity: 0.9;
        filter: brightness(1.0);
    }
    60% {
        transform: translate(-50%, 80%) rotate(90deg) scale(0.8);
        opacity: 0.7;
        filter: brightness(0.9);
    }
    80% {
        transform: translate(-50%, 180%) rotate(150deg) scale(0.5);
        opacity: 0.4;
        filter: brightness(0.7) blur(1px);
    }
    100% {
        transform: translate(-50%, 300%) rotate(270deg) scale(0.2);
        opacity: 0;
        filter: brightness(0.5) blur(2px);
    }
}

.amount-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    color: var(--genesis-primary);
    transition: all 0.3s ease;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.total-section.highlight:hover .amount-toggle-icon {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.total-amount-container.revealed .amount-toggle-icon i::before {
    content: '\f06e';
}

/* Красивое оформление модального окна удаления */
[id*="deleteFactModal"] .modal-dialog {
    max-width: 450px;
    margin: auto;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 3rem);
}

[id*="deleteFactModal"] .modal-content {
    width: 100%;
}

[id*="deleteFactModal"] .modal-header {
    background: linear-gradient(135deg, var(--genesis-danger) 0%, #b91c1c 100%);
    color: white;
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
    border-bottom: none;
}

[id*="deleteFactModal"] .modal-title {
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}

[id*="deleteFactModal"] .modal-title::before {
    content: '⚠️';
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

[id*="deleteFactModal"] .modal-body {
    padding: 2rem;
    text-align: center;
    background: var(--genesis-gray-50);
}

[id*="deleteFactModal"] .modal-body p {
    font-size: 1.1rem;
    color: var(--genesis-gray-700);
    margin: 0;
    font-weight: 500;
}

[id*="deleteFactModal"] .modal-footer {
    padding: 1.5rem;
    background: var(--genesis-white);
    border-top: 1px solid var(--genesis-gray-200);
    border-radius: 0 0 1rem 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

[id*="deleteFactModal"] .modal-footer .btn {
    flex: 1;
    max-width: 140px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    text-align: center;
}

[id*="deleteFactModal"] .modal-footer .btn-secondary {
    background: var(--genesis-gray-400);
    border: none;
    color: white;
}

[id*="deleteFactModal"] .modal-footer .btn-secondary:hover {
    background: var(--genesis-gray-600);
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

[id*="deleteFactModal"] .modal-footer .btn-danger {
    background: var(--genesis-danger);
    border: none;
}

[id*="deleteFactModal"] .modal-footer .btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

/* Универсальные стили для всех модальных окон удаления */
.delete-confirmation-modal .modal-dialog {
    max-width: 450px;
    margin: auto;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 3rem);
}

.delete-confirmation-modal .modal-content {
    width: 100%;
}

.delete-confirmation-modal .modal-header {
    background: linear-gradient(135deg, var(--genesis-danger) 0%, #b91c1c 100%);
    color: white;
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
    border-bottom: none;
}

.delete-confirmation-modal .modal-title {
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}

.delete-confirmation-modal .modal-title::before {
    content: '⚠️';
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.delete-confirmation-modal .modal-body {
    padding: 2rem;
    text-align: center;
    background: var(--genesis-gray-50);
}

.delete-confirmation-modal .modal-body p {
    font-size: 1.1rem;
    color: var(--genesis-gray-700);
    margin: 0;
    font-weight: 500;
}

.delete-confirmation-modal .modal-footer {
    padding: 1.5rem;
    background: var(--genesis-white);
    border-top: 1px solid var(--genesis-gray-200);
    border-radius: 0 0 1rem 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.delete-confirmation-modal .modal-footer .btn {
    flex: 1;
    max-width: 140px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    text-align: center;
}

.delete-confirmation-modal .modal-footer .btn-secondary {
    background: var(--genesis-gray-400);
    border: none;
    color: white;
}

.delete-confirmation-modal .modal-footer .btn-secondary:hover {
    background: var(--genesis-gray-600);
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

.delete-confirmation-modal .modal-footer .btn-danger {
    background: var(--genesis-danger);
    border: none;
}

.delete-confirmation-modal .modal-footer .btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: var(--genesis-shadow-md);
}

/* ======================================================================
   TOAST NOTIFICATION SYSTEM
   ====================================================================== */

/* Toast Container */
.toast-container {
    z-index: 11000;
}

/* Genesis Toast Base Styles */
.genesis-toast {
    min-width: 320px;
    max-width: 400px;
    margin-bottom: 0.75rem;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Toast Header */
.genesis-toast .toast-header {
    border-bottom: none;
    padding: 1rem 1rem 0.5rem 1rem;
    background: transparent;
    align-items: center;
}

.genesis-toast .toast-header strong {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Toast Body */
.genesis-toast .toast-body {
    padding: 0.5rem 1rem 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
}

/* Toast Icons */
.genesis-toast-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.75rem;
    font-size: 0.8rem;
}

/* Success Toast */
.genesis-toast-success {
    background: linear-gradient(135deg, var(--genesis-success) 0%, #047857 100%);
    color: white;
}

.genesis-toast-success .toast-header {
    color: white;
}

.genesis-toast-success .genesis-toast-icon.success {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.genesis-toast-success .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Error Toast */
.genesis-toast-error {
    background: linear-gradient(135deg, var(--genesis-danger) 0%, #b91c1c 100%);
    color: white;
}

.genesis-toast-error .toast-header {
    color: white;
}

.genesis-toast-error .genesis-toast-icon.error {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.genesis-toast-error .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Warning Toast */
.genesis-toast-warning {
    background: linear-gradient(135deg, var(--genesis-warning) 0%, #c2410c 100%);
    color: white;
}

.genesis-toast-warning .toast-header {
    color: white;
}

.genesis-toast-warning .genesis-toast-icon.warning {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.genesis-toast-warning .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Info Toast */
.genesis-toast-info {
    background: linear-gradient(135deg, var(--genesis-info) 0%, #0369a1 100%);
    color: white;
}

.genesis-toast-info .toast-header {
    color: white;
}

.genesis-toast-info .genesis-toast-icon.info {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.genesis-toast-info .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Toast Smooth Transitions */
.genesis-toast {
    transition: all 0.3s ease-out;
}

/* Responsive Toast */
@media (max-width: 576px) {
    .toast-container {
        width: 100%;
        padding: 1rem !important;
    }
    
    .genesis-toast {
        min-width: auto;
        width: 100%;
        max-width: none;
    }
}

/* Detailed Metrics Styles for Sidebar */
.detailed-metrics {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--genesis-gray-200);
}

.metrics-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--genesis-gray-700);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.metrics-compact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.metrics-compact-item {
    background: var(--genesis-gray-50);
    border: 1px solid var(--genesis-gray-100);
    border-radius: 6px;
    padding: 0.4rem 0.25rem;
    font-size: 0.7rem;
    text-align: center;
}

.metrics-compact-label {
    color: var(--genesis-gray-600);
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metrics-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

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

.metrics-compact-sub {
    font-size: 0.6rem;
    color: var(--genesis-gray-500);
}

.metrics-compact-value {
    font-weight: 700;
    color: var(--genesis-primary-dark);
    font-size: 0.75rem;
}

.metrics-vdt-item {
    text-align: center;
}

.metrics-vdt-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--genesis-primary-dark);
    margin-top: 0.2rem;
}

.premium-section {
    background: var(--genesis-primary-light);
    border: 1px solid var(--genesis-primary);
    border-radius: 6px;
    padding: 0.5rem;
}

.premium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

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

.premium-label {
    color: var(--genesis-gray-700);
    font-weight: 500;
}

.premium-value {
    font-weight: 700;
    color: var(--genesis-primary-dark);
}

/* Mobile Detailed Metrics */
.mobile-detailed-metrics {
    margin-top: 1.5rem;
}

.mobile-metrics-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--genesis-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.mobile-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-metric-group {
    background: var(--genesis-gray-50);
    border: 1px solid var(--genesis-gray-100);
    border-radius: 10px;
    padding: 0.875rem;
    text-align: center;
}

.mobile-metric-group.single {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-metric-title {
    font-weight: 700;
    color: var(--genesis-primary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-metric-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.mobile-metric-item span {
    color: var(--genesis-gray-600);
}

.mobile-metric-item strong {
    color: var(--genesis-primary);
    font-weight: 700;
}

.mobile-metric-single-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--genesis-primary);
}

.mobile-premium-section {
    background: var(--genesis-primary-light);
    border: 1px solid var(--genesis-primary);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.mobile-premium-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mobile-premium-item:last-child {
    margin-bottom: 0;
}

.mobile-premium-label {
    font-size: 0.9rem;
    color: var(--genesis-gray-700);
    font-weight: 500;
}

.mobile-premium-value {
    font-weight: 700;
    color: var(--genesis-primary-dark);
    font-size: 1rem;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    .mobile-dept-grid {
        grid-template-columns: 1fr;
    }
    
    .mobile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .mobile-stat {
        padding: 0.75rem;
    }
    
    .mobile-stat-value {
        font-size: 1rem;
    }
    
    .mobile-stat.highlight .mobile-stat-value {
        font-size: 1.1rem;
    }
    
    .mobile-content {
        padding: 1rem;
    }
    
    .mobile-welcome {
        padding: 1rem;
    }
    
    .mobile-welcome h5 {
        font-size: 1rem;
    }
    
    .mobile-metrics-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .mobile-metric-group {
        padding: 0.75rem;
    }
    
    .mobile-premium-section {
        padding: 0.875rem;
    }
    
    .metrics-compact-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .metrics-compact-item {
        padding: 0.5rem;
    }
    
    .metrics-vdt-item {
        grid-column: span 1;
    }
}

@media (max-width: 576px) {
    .mobile-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design for Sidebar */
@media (max-width: 991px) {
    .user-sidebar {
        display: none;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .user-info-card {
        font-size: 0.8rem;
    }
    
    .welcome-title {
        font-size: 0.95rem;
    }
    
    .section-header,
    .departments-header,
    .metrics-header {
        font-size: 0.75rem;
    }
    
    .dept-name,
    .summary-label {
        font-size: 0.75rem;
    }
    
    .dept-earnings,
    .summary-value {
        font-size: 0.8rem;
    }
    
    .period-text {
        font-size: 0.75rem;
        padding: 0.45rem;
    }
    
    .department-item,
    .summary-item {
        padding: 0.45rem;
    }
    
    .earnings-section,
    .report-section {
        padding: 0.875rem;
    }
    
    .metrics-compact-item {
        padding: 0.4rem;
        font-size: 0.7rem;
    }
    
    .metrics-compact-label {
        font-size: 0.65rem;
    }
    
    .metrics-compact-value {
        font-size: 0.7rem;
    }
    
    .metrics-compact-sub {
        font-size: 0.6rem;
    }
    
    .metrics-vdt-value {
        font-size: 0.9rem;
    }
    
    .premium-section {
        padding: 0.4rem;
    }
    
    .premium-row {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
}

/* New Navigation Styles */
.nav-link {
    color: var(--genesis-gray-700) !important;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    margin: 0 0.25rem;
}

.nav-link:hover {
    color: var(--genesis-primary) !important;
    background: var(--genesis-primary-light);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--genesis-white) !important;
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
    box-shadow: var(--genesis-shadow-md);
}

/* Dropdown toggle arrows */
.dropdown-toggle::after {
    content: '\f0d7' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    border: none !important;
    vertical-align: 0 !important;
    margin-left: 0.5rem !important;
    transition: transform 0.3s ease !important;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
}

/* Active dropdown indicator */
.nav-link.dropdown-toggle.active::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: var(--genesis-white);
    border-radius: 1px;
}

/* Enhanced Dropdown styles */
.dropdown-menu {
    border: none;
    box-shadow: var(--genesis-shadow-lg);
    border-radius: 0.75rem;
    padding: 0.5rem;
    background: var(--genesis-white);
    min-width: 220px;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: var(--genesis-gray-700);
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover {
    color: var(--genesis-primary);
    background: var(--genesis-primary-light);
    transform: translateX(4px);
}

.dropdown-item.active {
    color: var(--genesis-white);
    background: linear-gradient(135deg, var(--genesis-primary) 0%, var(--genesis-accent) 100%);
}

.dropdown-divider {
    border-color: var(--genesis-gray-200);
    margin: 0.5rem 0;
}

/* User dropdown styles */
.user-dropdown .dropdown-menu {
    min-width: 200px;
}

.user-dropdown-link {
    color: var(--genesis-gray-700) !important;
    font-weight: 500;
    padding: 0.7rem 1rem !important;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(3, 66, 58, 0.05);
    border: 1px solid rgba(3, 66, 58, 0.1);
    margin: 0;
    min-height: 64px;
}

.user-dropdown-link:hover {
    color: var(--genesis-primary) !important;
    background: rgba(3, 66, 58, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 66, 58, 0.15);
}

.user-avatar-container {
    position: relative;
    flex-shrink: 0;
}

/* Universal avatar styles - used by _EmployeeAvatar.cshtml */
.user-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--genesis-primary-light);
    object-fit: cover;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--genesis-primary);
    color: var(--genesis-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--genesis-primary-light);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Size variations */
.user-avatar.size-sm,
.user-avatar-placeholder.size-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.75rem;
}

.user-avatar.size-xs,
.user-avatar-placeholder.size-xs {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 0.9rem;
}

.user-avatar.size-lg,
.user-avatar-placeholder.size-lg {
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
    font-size: 2.5rem;
}

/* Role variations */
.user-avatar.role-worker,
.user-avatar-placeholder.role-worker {
    border-color: var(--genesis-accent) !important;
}

.user-avatar.role-manager,
.user-avatar-placeholder.role-manager {
    border-color: var(--genesis-primary) !important;
}

.user-avatar.role-admin,
.user-avatar-placeholder.role-admin {
    border-color: var(--genesis-info) !important;
}

.user-avatar-placeholder.role-worker {
    background: var(--genesis-accent) !important;
}

.user-avatar-placeholder.role-manager {
    background: var(--genesis-primary) !important;
}

.user-avatar-placeholder.role-admin {
    background: var(--genesis-info) !important;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    max-width: 200px;
    flex: 1;
    padding-top: 0.1rem;
}

.user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    max-height: 2.6rem; /* примерно 2 строки */
    overflow: hidden;
}

.user-position {
    font-size: 0.75rem;
    color: var(--genesis-gray-500);
    font-weight: 400;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    margin-top: 2px;
    white-space: normal;
    overflow-wrap: break-word;
    max-height: 2.6rem; /* примерно 2 строки */
    overflow: hidden;
}

/* Responsive adjustments for user info */
@media (max-width: 1400px) {
    .user-info {
        max-width: 180px;
    }
    
    .user-name {
        font-size: 0.85rem;
        max-height: 2.4rem;
    }
    
    .user-position {
        font-size: 0.7rem;
        max-height: 2.4rem;
    }
}

@media (max-width: 1200px) {
    .user-info {
        max-width: 160px;
    }
    
    .user-name {
        font-size: 0.8rem;
        max-height: 2.2rem;
    }
    
    .user-position {
        font-size: 0.65rem;
        max-height: 2.2rem;
    }
}

@media (max-width: 1024px) {
    .user-info {
        max-width: 140px;
    }
    
    .user-name {
        font-size: 0.75rem;
        max-height: 2.0rem;
    }
    
    .user-position {
        font-size: 0.6rem;
        max-height: 2.0rem;
    }
    
    .user-dropdown-link {
        min-height: 60px;
    }
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .navbar-nav {
        text-align: center;
        padding-top: 1rem;
    }
    
    .nav-item {
        margin: 0.25rem 0;
    }
    
    .nav-link {
        justify-content: center;
        padding: 0.75rem 1rem !important;
        margin: 0 0.5rem;
        border-radius: 0.5rem;
    }
    
    .dropdown-menu {
        text-align: center;
        margin-top: 0.5rem;
        position: static !important;
        display: block;
        float: none;
        width: auto;
        background-color: rgba(3, 66, 58, 0.05);
        border-radius: 0.5rem;
        box-shadow: none;
        border: 1px solid rgba(3, 66, 58, 0.1);
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .dropdown-item {
        justify-content: center;
        text-align: center;
        padding: 0.6rem 1rem;
    }
    
    .user-info {
        display: none;
    }
    
    .user-dropdown-link {
        padding: 0.5rem !important;
        min-width: 48px;
        justify-content: center;
        margin: 0 auto;
    }
}

.app-footer {
    margin-top: auto;
    padding: 1.5rem 0;
    border-top: 1px solid var(--genesis-gray-200);
    background-color: var(--genesis-white);
    flex-shrink: 0;
}

.app-footer .text-muted {
    font-size: 0.875rem;
    color: var(--genesis-gray-600);
}

.app-footer [title] {
    cursor: help;
    text-decoration: underline dotted;
}

/* App version tooltip styling */
.app-version-tooltip .tooltip-inner {
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.25;
    padding: 0.5rem 0.65rem;
    white-space: normal;
    min-width: 180px;
}

.app-version-tooltip .version-number {
    font-weight: 700;
    margin-bottom: 2px;
}

.app-version-tooltip .version-meta {
    font-weight: 600;
}

.app-version-tooltip .version-build {
    color: rgba(255, 255, 255, 0.85);
}

.app-version {
    cursor: pointer;
}

.copy-toast {
    position: absolute;
    z-index: 1060;
    background: #022b25;
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.copy-toast.show {
    opacity: 1;
    transform: translate(-50%, -12px);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.role-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.role-badge-compact {
  padding: 4px 8px;
  font-size: 0.85rem;
  gap: 6px;
}

.role-badge-icon {
  font-size: 0.9em;
}

.role-badge-emoji {
  font-size: 1.05em;
  line-height: 1;
}

.role-style-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #f9fafb;
}

.role-badge-preview {
  box-shadow: none;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}

#chat-unread-badge {
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    vertical-align: middle;
}

.chat-notification-toast {
    background: var(--genesis-white);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--genesis-gray-200);
    padding: 14px 16px;
    cursor: pointer;
    pointer-events: auto;
    min-width: 300px;
    max-width: 380px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
    animation: toastSlideIn 0.3s ease;
}

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

.chat-notification-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.chat-notification-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chat-notification-toast .toast-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--genesis-primary-light) 0%, #d1e8e4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--genesis-primary);
    font-size: 1rem;
    border: 2px solid var(--genesis-white);
    box-shadow: 0 2px 8px rgba(3, 66, 58, 0.15);
}

.chat-notification-toast .toast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-notification-toast .toast-body {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.chat-notification-toast .toast-sender {
    font-weight: 600;
    color: var(--genesis-gray-800);
    font-size: 0.95rem;
    margin-bottom: 3px;
    line-height: 1.3;
}

.chat-notification-toast .toast-preview {
    color: var(--genesis-gray-600);
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-notification-toast .toast-close {
    flex-shrink: 0;
    align-self: flex-start;
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--genesis-gray-400);
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -4px -4px 0 0;
}

.chat-notification-toast .toast-close:hover {
    color: var(--genesis-gray-600);
    background: var(--genesis-gray-100);
}