/* _content/MajestyPortal/Components/Layout/Theme.razor.rz.scp.css */
/* ====== Floating Action Button for Theme Chooser ====== */
.theme-chooser-button[b-0rgp4snn5y] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-popover);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .theme-chooser-button:hover[b-0rgp4snn5y] {
        transform: translateY(-4px) scale(1.1);
        box-shadow: var(--shadow-xl);
        filter: brightness(1.1);
    }

    .theme-chooser-button i[b-0rgp4snn5y] {
        font-size: 1.5rem;
        transition: transform 0.3s ease;
    }

    .theme-chooser-button:hover i[b-0rgp4snn5y] {
        transform: rotate(15deg);
    }

/* ====== Theme Selector Modal Styles (extracted and scoped) ====== */

/* Modal Overlay */
.theme-modal-overlay[b-0rgp4snn5y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg, rgba(67, 51, 39, 0.45));
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--spacing-4);
}

.theme-modal-visible[b-0rgp4snn5y] {
    opacity: 1;
    visibility: visible;
}

/* Modal Content Container */
.theme-modal-content[b-0rgp4snn5y] {
    background: var(--content-bg);
    border-radius: var(--border-radius-xl, 1rem);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-divider);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.theme-modal-visible .theme-modal-content[b-0rgp4snn5y] {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.theme-modal-header[b-0rgp4snn5y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5, 1.25rem);
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    position: relative;
}

    .theme-modal-header[b-0rgp4snn5y]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.theme-header-main[b-0rgp4snn5y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    flex: 1;
}

.theme-modal-icon[b-0rgp4snn5y] {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-lg, 0.75rem);
    background: var(--primary-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.theme-title-section[b-0rgp4snn5y] {
    flex: 1;
}

.theme-modal-title[b-0rgp4snn5y] {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1, 0.25rem) 0;
    line-height: 1.2;
}

.theme-modal-subtitle[b-0rgp4snn5y] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    margin: 0;
}

.theme-modal-close[b-0rgp4snn5y] {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md, 0.5rem);
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition, all 0.25s ease);
    font-size: 1.25rem;
}

    .theme-modal-close:hover[b-0rgp4snn5y] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
        transform: scale(1.05);
    }

/* Modal Body */
.theme-modal-body[b-0rgp4snn5y] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-5, 1.25rem);
    background: var(--body-bg);
}

/* Theme Categories */
.theme-categories[b-0rgp4snn5y] {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-5, 1.25rem);
    padding-bottom: var(--spacing-4, 1rem);
    border-bottom: 1px solid var(--border-divider);
}

.theme-category-btn[b-0rgp4snn5y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-pill, 9999px);
    background: var(--content-bg);
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: var(--hover-transition, all 0.25s ease);
    white-space: nowrap;
}

    .theme-category-btn:hover[b-0rgp4snn5y] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }

    .theme-category-btn.active[b-0rgp4snn5y] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .theme-category-btn i[b-0rgp4snn5y] {
        font-size: var(--font-size-sm, 0.875rem);
    }

/* Theme Grid */
.theme-grid[b-0rgp4snn5y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4, 1rem);
}

/* Theme Card */
.theme-card[b-0rgp4snn5y] {
    background: var(--content-bg);
    border: 2px solid var(--border-divider);
    border-radius: var(--border-radius-lg, 0.75rem);
    overflow: hidden;
    cursor: pointer;
    transition: var(--card-transition, all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
    position: relative;
}

    .theme-card:hover[b-0rgp4snn5y] {
        border-color: var(--primary);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .theme-card.active[b-0rgp4snn5y] {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px var(--primary-light);
    }

/* Theme Preview */
.theme-preview[b-0rgp4snn5y] {
    height: 140px;
    padding: var(--spacing-3, 0.75rem);
    background: var(--preview-bg, #f8f5f0);
    position: relative;
    overflow: hidden;
}

.theme-preview-header[b-0rgp4snn5y] {
    height: 20px;
    display: flex;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

.theme-preview-nav[b-0rgp4snn5y] {
    width: 40px;
    height: 100%;
    background: var(--preview-secondary, #eeb936);
    border-radius: var(--border-radius-sm, 0.25rem);
    opacity: 0.6;
}

.theme-preview-brand[b-0rgp4snn5y] {
    flex: 1;
    height: 100%;
    background: var(--preview-primary, #b73c36);
    border-radius: var(--border-radius-sm, 0.25rem);
}

.theme-preview-body[b-0rgp4snn5y] {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
    height: calc(100% - 28px);
}

.theme-preview-sidebar[b-0rgp4snn5y] {
    width: 50px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm, 0.25rem);
}

.theme-preview-content[b-0rgp4snn5y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.theme-preview-card[b-0rgp4snn5y] {
    flex: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-sm, 0.25rem);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-card.dark .theme-preview-card[b-0rgp4snn5y] {
    background: rgba(255, 255, 255, 0.1);
}

/* Theme Info */
.theme-info[b-0rgp4snn5y] {
    padding: var(--spacing-3, 0.75rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-name[b-0rgp4snn5y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary);
}

    .theme-name i[b-0rgp4snn5y] {
        color: var(--primary);
    }

/* Theme Badges */
.theme-badges[b-0rgp4snn5y] {
    display: flex;
    gap: var(--spacing-1, 0.25rem);
}

.theme-badge[b-0rgp4snn5y] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
    padding: 2px var(--spacing-2, 0.5rem);
    border-radius: var(--border-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .theme-badge i[b-0rgp4snn5y] {
        font-size: 10px;
    }

.theme-badge-active[b-0rgp4snn5y] {
    background: var(--success-light);
    color: var(--success);
}

.theme-badge-light[b-0rgp4snn5y] {
    background: var(--warning-light);
    color: var(--warning);
}

.theme-badge-dark[b-0rgp4snn5y] {
    background: var(--info-light);
    color: var(--info);
}

/* Modal Footer */
.theme-modal-footer[b-0rgp4snn5y] {
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
}

.theme-footer-info[b-0rgp4snn5y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
}

.theme-footer-text[b-0rgp4snn5y] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
}

    .theme-footer-text i[b-0rgp4snn5y] {
        color: var(--primary);
    }

.theme-footer-actions[b-0rgp4snn5y] {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
}

/* Theme Buttons */
.theme-btn[b-0rgp4snn5y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition, all 0.25s ease);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

    .theme-btn:hover:not(:disabled)[b-0rgp4snn5y] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.theme-btn-secondary[b-0rgp4snn5y] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .theme-btn-secondary:hover:not(:disabled)[b-0rgp4snn5y] {
        background: var(--border-divider);
        border-color: var(--border-color);
    }

/* Scrollbar Styling */
.theme-modal-body[b-0rgp4snn5y]::-webkit-scrollbar {
    width: 8px;
}

.theme-modal-body[b-0rgp4snn5y]::-webkit-scrollbar-track {
    background: var(--subtle-bg);
    border-radius: 4px;
}

.theme-modal-body[b-0rgp4snn5y]::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb, #d9d9d9);
    border-radius: 4px;
}

    .theme-modal-body[b-0rgp4snn5y]::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover, #b0b0b0);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .theme-modal-overlay[b-0rgp4snn5y] {
        padding: var(--spacing-2, 0.5rem);
    }

    .theme-modal-content[b-0rgp4snn5y] {
        max-height: 90vh;
    }

    .theme-categories[b-0rgp4snn5y] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-3, 0.75rem);
    }

    .theme-grid[b-0rgp4snn5y] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--spacing-3, 0.75rem);
    }

    .theme-modal-footer[b-0rgp4snn5y] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .theme-modal-overlay[b-0rgp4snn5y] {
        padding: 0;
    }

    .theme-modal-content[b-0rgp4snn5y] {
        border-radius: 0;
        max-height: 100vh;
        max-width: 100%;
    }

    .theme-grid[b-0rgp4snn5y] {
        grid-template-columns: 1fr;
    }
}
/* _content/MajestyPortal/Components/Pages/Admin/Programming.razor.rz.scp.css */
/* Main Task Manager Container */
.task-manager[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header Styles */
.task-manager-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.task-manager-branding[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-icon[b-f36wpdqt0o] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 1.5rem;
}

.brand-info h1[b-f36wpdqt0o] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.brand-info p[b-f36wpdqt0o] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.task-manager-actions[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* View Selector */
.view-selector[b-f36wpdqt0o] {
    display: flex;
    background: var(--subtle-bg);
    border-radius: 8px;
    padding: 0.25rem;
    margin-right: 0.5rem;
    border: 1px solid var(--border-color);
}

    .view-selector button[b-f36wpdqt0o] {
        border: none;
        background: none;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.875rem;
    }

        .view-selector button:hover[b-f36wpdqt0o] {
            color: var(--text-primary);
        }

        .view-selector button.active[b-f36wpdqt0o] {
            background: var(--content-bg);
            color: var(--primary-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

.action-button[b-f36wpdqt0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .action-button i[b-f36wpdqt0o] {
        font-size: 1rem;
    }

    .action-button.primary[b-f36wpdqt0o] {
        background-color: var(--primary-color);
        color: white;
    }

        .action-button.primary:hover[b-f36wpdqt0o] {
            background-color: var(--primary-hover);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

    .action-button.secondary[b-f36wpdqt0o] {
        background-color: var(--content-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

        .action-button.secondary:hover[b-f36wpdqt0o] {
            background-color: var(--subtle-bg);
            border-color: var(--border-color);
        }

    .action-button.danger[b-f36wpdqt0o] {
        background-color: var(--danger);
        color: white;
    }

        .action-button.danger:hover[b-f36wpdqt0o] {
            background-color: var(--danger-hover);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

    .action-button:disabled[b-f36wpdqt0o] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none !important;
    }

/* Main Content Area */
.task-manager-content[b-f36wpdqt0o] {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 5rem);
}

/* Filters Sidebar */
.task-filters[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-container[b-f36wpdqt0o] {
    margin-bottom: 1rem;
}

.search-input[b-f36wpdqt0o] {
    position: relative;
}

    .search-input i[b-f36wpdqt0o] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .search-input input[b-f36wpdqt0o] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

        .search-input input:focus[b-f36wpdqt0o] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

.clear-search[b-f36wpdqt0o] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .clear-search:hover[b-f36wpdqt0o] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

.filter-section[b-f36wpdqt0o] {
    margin-bottom: 1.5rem;
}

    .filter-section h2[b-f36wpdqt0o] {
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        margin: 0 0 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }

.filter-list[b-f36wpdqt0o] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

    .filter-list li[b-f36wpdqt0o] {
        display: flex;
        align-items: center;
        padding: 0.625rem 0.875rem;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

        .filter-list li:hover[b-f36wpdqt0o] {
            background-color: var(--subtle-bg);
            color: var(--text-primary);
        }

        .filter-list li.active[b-f36wpdqt0o] {
            background-color: var(--primary-light);
            color: var(--primary-color);
            font-weight: 500;
        }

.filter-icon[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.75rem;
    border-radius: 8px;
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.filter-list li.active .filter-icon[b-f36wpdqt0o] {
    background-color: var(--primary-color);
    color: white;
}

.filter-icon.status-planned[b-f36wpdqt0o] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.filter-icon.status-in-progress[b-f36wpdqt0o] {
    background-color: var(--info-light);
    color: var(--info);
}

.filter-icon.status-completed[b-f36wpdqt0o] {
    background-color: var(--success-bg);
    color: var(--success);
}

.filter-icon.priority-low[b-f36wpdqt0o] {
    background-color: var(--success-bg);
    color: var(--success);
}

.filter-icon.priority-medium[b-f36wpdqt0o] {
    background-color: var(--info-light);
    color: var(--info);
}

.filter-icon.priority-high[b-f36wpdqt0o] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.filter-icon.priority-critical[b-f36wpdqt0o] {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.filter-name[b-f36wpdqt0o] {
    flex: 1;
}

.filter-count[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--subtle-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}

.filter-list li.active .filter-count[b-f36wpdqt0o] {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
}

.filter-actions[b-f36wpdqt0o] {
    margin-top: auto;
    padding-top: 1rem;
}

/* Task Display Area */
.task-display[b-f36wpdqt0o] {
    background-color: var(--subtle-bg);
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.view-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.view-title[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .view-title h2[b-f36wpdqt0o] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .view-title h2 i[b-f36wpdqt0o] {
            color: var(--primary-color);
        }

.results-count[b-f36wpdqt0o] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    padding: 0.25rem 0.625rem;
    background-color: var(--subtle-bg);
    border-radius: 1rem;
}

.view-options[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .view-options select[b-f36wpdqt0o] {
        padding: 0.5rem 2rem 0.5rem 1rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 0.75rem;
        transition: all 0.2s ease;
    }

        .view-options select:focus[b-f36wpdqt0o] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

/* Task List View */
.task-list[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-card[b-f36wpdqt0o] {
    display: flex;
    background-color: var(--content-bg);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

    .task-card:hover[b-f36wpdqt0o] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.task-priority[b-f36wpdqt0o] {
    width: 6px;
    flex-shrink: 0;
}

    .task-priority.priority-low[b-f36wpdqt0o] {
        background-color: var(--success);
    }

    .task-priority.priority-medium[b-f36wpdqt0o] {
        background-color: var(--info);
    }

    .task-priority.priority-high[b-f36wpdqt0o] {
        background-color: var(--warning);
    }

    .task-priority.priority-critical[b-f36wpdqt0o] {
        background-color: var(--danger);
    }

.task-content[b-f36wpdqt0o] {
    flex: 1;
    padding: 1rem;
    min-width: 0;
}

.task-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.task-category[b-f36wpdqt0o] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background-color: var(--subtle-bg);
    border-radius: 6px;
}

    .task-category i[b-f36wpdqt0o] {
        font-size: 0.75rem;
        color: var(--primary-color);
    }

.task-status[b-f36wpdqt0o] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

    .task-status.status-planned[b-f36wpdqt0o] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .task-status.status-in-progress[b-f36wpdqt0o] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .task-status.status-completed[b-f36wpdqt0o] {
        background-color: var(--success-bg);
        color: var(--success);
    }

.task-title[b-f36wpdqt0o] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.task-description[b-f36wpdqt0o] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-progress[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-bar[b-f36wpdqt0o] {
    flex: 1;
    height: 0.375rem;
    background-color: var(--border-light);
    border-radius: 1rem;
    overflow: hidden;
}

.progress-fill[b-f36wpdqt0o] {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 1rem;
}

.progress-text[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 2.5rem;
    text-align: right;
}

.task-info[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.task-assignee[b-f36wpdqt0o], .task-due-date[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .task-due-date.overdue[b-f36wpdqt0o] {
        color: var(--danger);
        font-weight: 500;
    }

    .task-due-date.due-soon[b-f36wpdqt0o] {
        color: var(--warning);
        font-weight: 500;
    }

.task-actions[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background-color: var(--subtle-bg);
    border-left: 1px solid var(--border-light);
}

.task-action[b-f36wpdqt0o] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .task-action:hover[b-f36wpdqt0o] {
        background-color: var(--primary-light);
        color: var(--primary-color);
    }

    .task-action:last-child[b-f36wpdqt0o] {
        margin-bottom: 0;
    }

/* Board View */
.task-board[b-f36wpdqt0o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    height: 100%;
    max-height: calc(100vh - 12rem);
}

.board-column[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    background-color: var(--content-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    height: fit-content;
    max-height: 100%;
}

.column-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--content-bg);
}

    .column-header h3[b-f36wpdqt0o] {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.status-dot[b-f36wpdqt0o] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

    .status-dot.status-planned[b-f36wpdqt0o] {
        background-color: var(--warning);
    }

    .status-dot.status-in-progress[b-f36wpdqt0o] {
        background-color: var(--info);
    }

    .status-dot.status-completed[b-f36wpdqt0o] {
        background-color: var(--success);
    }

.column-count[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--subtle-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}

.column-tasks[b-f36wpdqt0o] {
    padding: 0.75rem;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}

.empty-column[b-f36wpdqt0o] {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.board-task[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-radius: 8px;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-left: 3px solid transparent;
    position: relative;
}

    .board-task:last-child[b-f36wpdqt0o] {
        margin-bottom: 0;
    }

    .board-task:hover[b-f36wpdqt0o] {
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .board-task.priority-low[b-f36wpdqt0o] {
        border-left-color: var(--success);
    }

    .board-task.priority-medium[b-f36wpdqt0o] {
        border-left-color: var(--info);
    }

    .board-task.priority-high[b-f36wpdqt0o] {
        border-left-color: var(--warning);
    }

    .board-task.priority-critical[b-f36wpdqt0o] {
        border-left-color: var(--danger);
    }

.board-task-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.board-task-title[b-f36wpdqt0o] {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.board-task-desc[b-f36wpdqt0o] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-task-footer[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.task-progress-sm[b-f36wpdqt0o] {
    width: 100%;
    height: 0.25rem;
    background-color: var(--border-light);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.task-meta-icons[b-f36wpdqt0o] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.meta-icon[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

    .meta-icon .count[b-f36wpdqt0o] {
        font-size: 0.6875rem;
    }

.due-date[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

    .due-date.overdue[b-f36wpdqt0o] {
        color: var(--danger);
        font-weight: 500;
    }

    .due-date.due-soon[b-f36wpdqt0o] {
        color: var(--warning);
        font-weight: 500;
    }

/* Timeline View */
.task-timeline[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.timeline-flow[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0.5rem 2rem;
}

.timeline-section[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-header[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.timeline-status[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--content-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    font-size: 0.9375rem;
}

    .timeline-status i[b-f36wpdqt0o] {
        font-size: 1.125rem;
    }

    .timeline-status.status-planned[b-f36wpdqt0o] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .timeline-status.status-in-progress[b-f36wpdqt0o] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .timeline-status.status-completed[b-f36wpdqt0o] {
        background-color: var(--success-bg);
        color: var(--success);
    }

.status-count[b-f36wpdqt0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.timeline-connector[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    position: relative;
    height: 2rem;
}

    .timeline-connector[b-f36wpdqt0o]:before {
        content: '';
        position: absolute;
        top: 0;
        width: 2px;
        height: 100%;
        background-color: var(--border-color);
        z-index: 1;
    }

    .timeline-connector i[b-f36wpdqt0o] {
        position: relative;
        background-color: var(--subtle-bg);
        border-radius: 50%;
        padding: 0.25rem;
        z-index: 2;
        margin-top: 0.5rem;
    }

.timeline-tasks[b-f36wpdqt0o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 0 1rem;
}

.timeline-task[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    border-top: 4px solid transparent;
}

    .timeline-task:hover[b-f36wpdqt0o] {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .timeline-task.priority-low[b-f36wpdqt0o] {
        border-top-color: var(--success);
    }

    .timeline-task.priority-medium[b-f36wpdqt0o] {
        border-top-color: var(--info);
    }

    .timeline-task.priority-high[b-f36wpdqt0o] {
        border-top-color: var(--warning);
    }

    .timeline-task.priority-critical[b-f36wpdqt0o] {
        border-top-color: var(--danger);
    }

.timeline-task-header[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.task-priority-badge[b-f36wpdqt0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

    .task-priority-badge.priority-low[b-f36wpdqt0o] {
        background-color: var(--success-bg);
        color: var(--success);
    }

    .task-priority-badge.priority-medium[b-f36wpdqt0o] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .task-priority-badge.priority-high[b-f36wpdqt0o] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .task-priority-badge.priority-critical[b-f36wpdqt0o] {
        background-color: var(--danger-bg);
        color: var(--danger);
    }

.timeline-task-title[b-f36wpdqt0o] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.timeline-task-desc[b-f36wpdqt0o] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-task-footer[b-f36wpdqt0o] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.timeline-task-meta[b-f36wpdqt0o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-item[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--subtle-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

    .meta-item.due-date.overdue[b-f36wpdqt0o] {
        color: var(--danger);
        background-color: var(--danger-bg);
    }

    .meta-item.due-date.due-soon[b-f36wpdqt0o] {
        color: var(--warning);
        background-color: var(--warning-light);
    }

/* Empty State & Loading */
.empty-state[b-f36wpdqt0o], .loading-state[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    height: 100%;
    min-height: 300px;
}

.empty-illustration[b-f36wpdqt0o] {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.empty-state h3[b-f36wpdqt0o] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p[b-f36wpdqt0o] {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 350px;
}

.empty-actions[b-f36wpdqt0o] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.loading-spinner[b-f36wpdqt0o] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(0, 168, 132, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin-b-f36wpdqt0o 1s linear infinite;
    margin-bottom: 1.5rem;
}

    .loading-spinner.sm[b-f36wpdqt0o] {
        width: 1.5rem;
        height: 1.5rem;
        border-width: 0.125rem;
        margin-bottom: 0.75rem;
    }

@keyframes spin-b-f36wpdqt0o {
    to {
        transform: rotate(360deg);
    }
}

.loading-state p[b-f36wpdqt0o] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/* Modal Dialogs */
.modal-overlay[b-f36wpdqt0o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.modal-dialog[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-radius: 12px;
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: modal-in-b-f36wpdqt0o 0.25s ease;
    position: relative;
    z-index: 1001; /* Ensure dialog is above overlay */
    pointer-events: auto !important;
}

    .modal-dialog.large[b-f36wpdqt0o] {
        max-width: 900px;
    }

@keyframes modal-in-b-f36wpdqt0o {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.modal-title[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.priority-indicator[b-f36wpdqt0o] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

    .priority-indicator.priority-low[b-f36wpdqt0o] {
        background-color: var(--success);
    }

    .priority-indicator.priority-medium[b-f36wpdqt0o] {
        background-color: var(--info);
    }

    .priority-indicator.priority-high[b-f36wpdqt0o] {
        background-color: var(--warning);
    }

    .priority-indicator.priority-critical[b-f36wpdqt0o] {
        background-color: var(--danger);
    }

.modal-title h2[b-f36wpdqt0o] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close[b-f36wpdqt0o] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .modal-close:hover[b-f36wpdqt0o] {
        background-color: var(--subtle-bg);
        color: var(--danger);
    }

.modal-body[b-f36wpdqt0o] {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 9.5rem);
}

.modal-footer[b-f36wpdqt0o] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--content-bg);
    flex-wrap: wrap;
}

/* Task Details Dialog */
.task-status-timeline[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    overflow-x: auto;
}

    .task-status-timeline[b-f36wpdqt0o]::before {
        content: '';
        position: absolute;
        left: 2.25rem;
        right: 2.25rem;
        top: 1.125rem;
        height: 2px;
        background-color: var(--border-color);
        z-index: 0;
    }

.timeline-step[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    position: relative;
    cursor: pointer;
    z-index: 1;
    min-width: 60px;
}

.step-indicator[b-f36wpdqt0o] {
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--content-bg);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.timeline-step.active .step-indicator[b-f36wpdqt0o] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.timeline-step.completed .step-indicator[b-f36wpdqt0o] {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}

.step-label[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-step.active .step-label[b-f36wpdqt0o] {
    color: var(--primary-color);
    font-weight: 600;
}

.timeline-step.completed .step-label[b-f36wpdqt0o] {
    color: var(--success);
    font-weight: 500;
}

.timeline-step.completed ~ .timeline-step .step-indicator[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.task-details-grid[b-f36wpdqt0o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
}

.detail-column[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section[b-f36wpdqt0o] {
    background-color: var(--subtle-bg);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--border-light);
}

    .detail-section h3[b-f36wpdqt0o] {
        margin: 0 0 1rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .detail-section h3 i[b-f36wpdqt0o] {
            color: var(--primary-color);
        }

.task-full-description[b-f36wpdqt0o], .task-notes[b-f36wpdqt0o] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.empty-info[b-f36wpdqt0o] {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.875rem;
    margin: 0;
}

.detail-list[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-item[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-label[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value[b-f36wpdqt0o] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .detail-value i[b-f36wpdqt0o] {
        color: var(--text-secondary);
    }

.status-badge[b-f36wpdqt0o], .priority-badge[b-f36wpdqt0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

    .status-badge.status-planned[b-f36wpdqt0o] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .status-badge.status-in-progress[b-f36wpdqt0o] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .status-badge.status-completed[b-f36wpdqt0o] {
        background-color: var(--success-bg);
        color: var(--success);
    }

    .priority-badge.priority-low[b-f36wpdqt0o] {
        background-color: var(--success-bg);
        color: var(--success);
    }

    .priority-badge.priority-medium[b-f36wpdqt0o] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .priority-badge.priority-high[b-f36wpdqt0o] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .priority-badge.priority-critical[b-f36wpdqt0o] {
        background-color: var(--danger-bg);
        color: var(--danger);
    }

.progress-indicator[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.date-info[b-f36wpdqt0o], .user-info[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

    .date-info:last-child[b-f36wpdqt0o], .user-info:last-child[b-f36wpdqt0o] {
        margin-bottom: 0;
    }

/* Comments Section */
.comments-container[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comments-list[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-item[b-f36wpdqt0o] {
    background-color: var(--content-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-light);
}

.comment-header[b-f36wpdqt0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comment-author[b-f36wpdqt0o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.comment-date[b-f36wpdqt0o] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.comment-content[b-f36wpdqt0o] {
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.comment-form[b-f36wpdqt0o] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.comment-input[b-f36wpdqt0o] {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    padding: 0.75rem 1rem;
    resize: vertical;
    min-height: 6rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .comment-input:focus[b-f36wpdqt0o] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

/* Edit Form */
.form-grid[b-f36wpdqt0o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-section[b-f36wpdqt0o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .form-section.full[b-f36wpdqt0o] {
        grid-column: span 2;
    }

    .form-section label[b-f36wpdqt0o] {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

.required[b-f36wpdqt0o] {
    color: var(--danger);
}

.form-section input[b-f36wpdqt0o],
.form-section select[b-f36wpdqt0o],
.form-section textarea[b-f36wpdqt0o] {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.2s ease;
}

    .form-section input:focus[b-f36wpdqt0o],
    .form-section select:focus[b-f36wpdqt0o],
    .form-section textarea:focus[b-f36wpdqt0o] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

.form-section textarea[b-f36wpdqt0o] {
    resize: vertical;
}

.form-section input[type="date"][b-f36wpdqt0o] {
    cursor: pointer;
}

/* Fixed Slider Component */
.single-slider-container[b-f36wpdqt0o] {
    position: relative;
    height: 2rem;
    padding: 0.75rem 0;
}

.slider-track[b-f36wpdqt0o] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.375rem;
    background-color: var(--border-light);
    border-radius: 0.375rem;
    transform: translateY(-50%);
}

.slider-fill[b-f36wpdqt0o] {
    position: absolute;
    height: 100%;
    width: 0;
    background-color: var(--primary-color);
    border-radius: 0.375rem;
}

.slider-input[b-f36wpdqt0o] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    background: transparent;
    z-index: 5;
}

    .slider-input[b-f36wpdqt0o]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background-color: var(--primary-color);
        cursor: pointer;
        border: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 10;
    }

    .slider-input[b-f36wpdqt0o]::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background-color: var(--primary-color);
        cursor: pointer;
        border: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .slider-input:focus[b-f36wpdqt0o] {
        outline: none;
    }

.has-error[b-f36wpdqt0o] {
    border-color: var(--danger) !important;
}

.field-error[b-f36wpdqt0o] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Delete Confirmation */
.confirmation-message[b-f36wpdqt0o] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--text-primary);
}

    .confirmation-message i[b-f36wpdqt0o] {
        font-size: 1.5rem;
        color: var(--danger);
        margin-top: 0.25rem;
    }

.message-content p[b-f36wpdqt0o] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

    .message-content p:last-child[b-f36wpdqt0o] {
        margin-bottom: 0;
    }

/* Toast Notification */
.toast-notification[b-f36wpdqt0o] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100; /* Higher than modal */
    max-width: 350px;
    width: calc(100% - 3rem);
    animation: toast-in-b-f36wpdqt0o 0.3s ease;
}

@keyframes toast-in-b-f36wpdqt0o {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-notification.success[b-f36wpdqt0o] {
    border-left: 4px solid var(--success);
}

.toast-notification.error[b-f36wpdqt0o] {
    border-left: 4px solid var(--danger);
}

.toast-notification.warning[b-f36wpdqt0o] {
    border-left: 4px solid var(--warning);
}

.toast-notification.info[b-f36wpdqt0o] {
    border-left: 4px solid var(--info);
}

.toast-icon[b-f36wpdqt0o] {
    font-size: 1.25rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
}

.toast-notification.success .toast-icon[b-f36wpdqt0o] {
    color: var(--success);
}

.toast-notification.error .toast-icon[b-f36wpdqt0o] {
    color: var(--danger);
}

.toast-notification.warning .toast-icon[b-f36wpdqt0o] {
    color: var(--warning);
}

.toast-notification.info .toast-icon[b-f36wpdqt0o] {
    color: var(--info);
}

.toast-content[b-f36wpdqt0o] {
    flex: 1;
    min-width: 0;
}

    .toast-content h4[b-f36wpdqt0o] {
        margin: 0 0 0.25rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .toast-content p[b-f36wpdqt0o] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.toast-close[b-f36wpdqt0o] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
}

    .toast-close:hover[b-f36wpdqt0o] {
        background-color: var(--subtle-bg);
        color: var(--danger);
    }

/* Responsive Styles */
@media (max-width: 1200px) {
    .task-details-grid[b-f36wpdqt0o] {
        grid-template-columns: 1fr;
    }

    .timeline-tasks[b-f36wpdqt0o] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .view-selector button span[b-f36wpdqt0o] {
        display: none;
    }

    .view-selector button i[b-f36wpdqt0o] {
        font-size: 1.125rem;
    }

    .task-board[b-f36wpdqt0o] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .task-manager-content[b-f36wpdqt0o] {
        grid-template-columns: 1fr;
    }

    .task-filters[b-f36wpdqt0o] {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 900;
    }

        .task-filters.visible[b-f36wpdqt0o] {
            display: flex;
        }

    .form-grid[b-f36wpdqt0o] {
        grid-template-columns: 1fr;
    }

    .form-section.full[b-f36wpdqt0o] {
        grid-column: span 1;
    }

    .task-board[b-f36wpdqt0o] {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .board-column[b-f36wpdqt0o] {
        max-height: none;
    }

    .column-tasks[b-f36wpdqt0o] {
        max-height: 400px;
    }

    .task-manager-header[b-f36wpdqt0o] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .task-manager-branding[b-f36wpdqt0o] {
        width: 100%;
        justify-content: center;
    }

    .task-manager-actions[b-f36wpdqt0o] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .timeline-tasks[b-f36wpdqt0o] {
        grid-template-columns: 1fr;
        padding: 0 0.5rem;
    }

    .view-header[b-f36wpdqt0o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .task-display[b-f36wpdqt0o] {
        padding: 1rem;
    }

    .modal-header[b-f36wpdqt0o], .modal-footer[b-f36wpdqt0o] {
        padding: 1rem;
    }

    .modal-body[b-f36wpdqt0o] {
        padding: 1rem;
    }

    .task-status-timeline[b-f36wpdqt0o] {
        padding: 0 0.5rem 1rem;
    }

    .detail-section[b-f36wpdqt0o] {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .task-manager-header[b-f36wpdqt0o] {
        padding: 0.75rem;
    }

    .brand-icon[b-f36wpdqt0o] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .brand-info h1[b-f36wpdqt0o] {
        font-size: 1.25rem;
    }

    .brand-info p[b-f36wpdqt0o] {
        font-size: 0.75rem;
    }

    .action-button[b-f36wpdqt0o] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

        .action-button span[b-f36wpdqt0o] {
            display: none;
        }

        .action-button i[b-f36wpdqt0o] {
            margin: 0;
            font-size: 1rem;
        }

    .task-card[b-f36wpdqt0o] {
        flex-direction: column;
    }

    .task-priority[b-f36wpdqt0o] {
        width: 100%;
        height: 4px;
    }

    .task-actions[b-f36wpdqt0o] {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding: 0.5rem;
        justify-content: flex-end;
    }

    .task-action[b-f36wpdqt0o] {
        margin-bottom: 0;
        margin-left: 0.5rem;
    }

    .task-title[b-f36wpdqt0o] {
        font-size: 0.9375rem;
    }

    .timeline-status[b-f36wpdqt0o] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .modal-title h2[b-f36wpdqt0o] {
        font-size: 1.125rem;
    }

    .modal-close[b-f36wpdqt0o] {
        width: 2rem;
        height: 2rem;
    }

    .modal-footer[b-f36wpdqt0o] {
        justify-content: center;
    }

        .modal-footer .action-button[b-f36wpdqt0o] {
            flex: 1;
        }

            .modal-footer .action-button span[b-f36wpdqt0o] {
                display: inline;
            }

    .comment-form[b-f36wpdqt0o] {
        flex-direction: column;
    }

        .comment-form .action-button[b-f36wpdqt0o] {
            width: 100%;
        }

            .comment-form .action-button span[b-f36wpdqt0o] {
                display: inline;
            }

    .task-display[b-f36wpdqt0o] {
        padding: 0.75rem;
    }
}

@media (max-width: 400px) {
    .view-selector button[b-f36wpdqt0o] {
        padding: 0.5rem;
    }

    .task-manager-branding[b-f36wpdqt0o] {
        gap: 0.5rem;
    }

    .brand-icon[b-f36wpdqt0o] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .brand-info h1[b-f36wpdqt0o] {
        font-size: 1.125rem;
    }

    .brand-info p[b-f36wpdqt0o] {
        display: none;
    }

    .timeline-task-header[b-f36wpdqt0o] {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-priority-badge[b-f36wpdqt0o] {
        margin-bottom: 0.5rem;
    }

    .detail-section h3[b-f36wpdqt0o] {
        font-size: 0.9375rem;
    }

    .step-indicator[b-f36wpdqt0o] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .step-label[b-f36wpdqt0o] {
        font-size: 0.6875rem;
        max-width: 70px;
    }

    .task-status-timeline[b-f36wpdqt0o]::before {
        left: 1.5rem;
        right: 1.5rem;
        top: 0.875rem;
    }

    .timeline-step[b-f36wpdqt0o] {
        min-width: 50px;
    }

    .task-display[b-f36wpdqt0o] {
        padding: 0.5rem;
    }

    .toast-notification[b-f36wpdqt0o] {
        padding: 0.75rem;
        max-width: calc(100% - 1rem);
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* Dark Mode Adjustments */
.theme-dark .task-card[b-f36wpdqt0o],
.theme-dark .board-task[b-f36wpdqt0o],
.theme-dark .comment-item[b-f36wpdqt0o],
.theme-dark .timeline-task[b-f36wpdqt0o] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-dark .modal-dialog[b-f36wpdqt0o],
.theme-dark .toast-notification[b-f36wpdqt0o] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile Filter Toggle Button */
.filter-toggle[b-f36wpdqt0o] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 950;
    border: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .filter-toggle[b-f36wpdqt0o] {
        display: flex;
    }
}

@media (max-width: 400px) {
    .filter-toggle[b-f36wpdqt0o] {
        width: 3rem;
        height: 3rem;
        bottom: 1rem;
        right: 1rem;
        font-size: 1rem;
    }
}

/* Touch-friendly adjustments */
@media (pointer: coarse) {
    .task-action[b-f36wpdqt0o],
    .filter-icon[b-f36wpdqt0o],
    .filter-list li[b-f36wpdqt0o],
    .modal-close[b-f36wpdqt0o],
    .toast-close[b-f36wpdqt0o],
    .action-button[b-f36wpdqt0o] {
        min-height: 44px;
        min-width: 44px;
    }

    .timeline-step[b-f36wpdqt0o],
    .step-indicator[b-f36wpdqt0o] {
        min-height: 44px;
    }

    input[b-f36wpdqt0o],
    select[b-f36wpdqt0o],
    textarea[b-f36wpdqt0o],
    button[b-f36wpdqt0o] {
        font-size: 16px !important;
    }

    .task-info[b-f36wpdqt0o],
    .board-task-footer[b-f36wpdqt0o],
    .meta-item[b-f36wpdqt0o] {
        padding: 0.375rem 0;
    }
}
/* _content/MajestyPortal/Components/Pages/Clockings/ClockingMain.razor.rz.scp.css */
/* ====== JTime Clocking System Styles ====== */

/* Main Container */
.jt-container[b-5phnent7gp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--body-bg);
    overflow: hidden;
    position: relative;
}

/* Header Section */
.jt-header[b-5phnent7gp] {
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-divider);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    position: relative;
    animation: slide-in-top-b-5phnent7gp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .jt-header[b-5phnent7gp]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        opacity: 0.8;
    }

.jt-header-content[b-5phnent7gp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.jt-header-title[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .jt-header-title i[b-5phnent7gp] {
        font-size: 1.5rem;
        color: var(--primary);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: var(--border-radius-lg);
        box-shadow: 0 4px 12px -2px rgba(var(--primary-rgb), 0.2);
    }

    .jt-header-title h1[b-5phnent7gp] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .jt-header-title p[b-5phnent7gp] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

.jt-header-actions[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Main Content Area */
.jt-main-content[b-5phnent7gp] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background-color: var(--body-bg);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Search and Filter Section */
.jt-search-filters[b-5phnent7gp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    position: relative;
    animation: slide-in-top-b-5phnent7gp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.jt-search-container[b-5phnent7gp] {
    flex: 1;
    min-width: 280px;
    max-width: 480px;
}

.jt-search-bar[b-5phnent7gp] {
    position: relative;
    width: 100%;
}

    .jt-search-bar input[b-5phnent7gp] {
        width: 100%;
        padding: 0.625rem 1rem 0.625rem 2.5rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: var(--hover-transition);
        box-shadow: var(--shadow-sm);
    }

        .jt-search-bar input:focus[b-5phnent7gp] {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--shadow-focus);
        }

    .jt-search-bar i[b-5phnent7gp] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
        transition: var(--animation-timing);
        pointer-events: none;
    }

    .jt-search-bar input:focus + i[b-5phnent7gp] {
        color: var(--primary);
    }

.jt-clear-search[b-5phnent7gp] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: var(--hover-transition);
    font-size: 0.75rem;
}

    .jt-clear-search:hover[b-5phnent7gp] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

.jt-filters-container[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.jt-date-filters[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jt-date-range[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .jt-date-range input[b-5phnent7gp] {
        width: 140px;
        padding: 0.5rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
    }

        .jt-date-range input:focus[b-5phnent7gp] {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--shadow-focus);
        }

.jt-date-separator[b-5phnent7gp] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Card Component */
.jt-card[b-5phnent7gp] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    animation: fade-in-b-5phnent7gp 0.4s ease-out both;
}

    .jt-card:hover[b-5phnent7gp] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.jt-card-header[b-5phnent7gp] {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .jt-card-header h3[b-5phnent7gp] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .jt-card-header h3 i[b-5phnent7gp] {
            color: var(--primary);
            font-size: 1.125rem;
        }

.jt-card-body[b-5phnent7gp] {
    padding: 1.25rem;
}

/* Not Clocked In Card */
.jt-not-clocked-in[b-5phnent7gp] {
    border-left: 3px solid var(--warning);
    background-color: rgba(var(--warning-rgb), 0.03);
}

    .jt-not-clocked-in .jt-card-header[b-5phnent7gp] {
        background-color: rgba(var(--warning-rgb), 0.08);
    }

        .jt-not-clocked-in .jt-card-header h3 i[b-5phnent7gp] {
            color: var(--warning);
        }

/* Employee Details Card */
.jt-employee-details[b-5phnent7gp] {
    border-left: 3px solid var(--primary);
}

.jt-employee-header[b-5phnent7gp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
}

.jt-employee-info h3[b-5phnent7gp] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.jt-employee-meta[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jt-meta-item[b-5phnent7gp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

    .jt-meta-item i[b-5phnent7gp] {
        color: var(--primary);
        font-size: 0.875rem;
    }

.jt-employee-actions[b-5phnent7gp] {
    display: flex;
    gap: 0.625rem;
}

/* Employee Name in Table */
.jt-employee-name[b-5phnent7gp] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Table Styles */
.jt-table-responsive[b-5phnent7gp] {
    width: 100%;
    overflow-x: auto;
    max-height: calc(100vh - 320px);
    margin-bottom: 1rem;
}

.jt-table[b-5phnent7gp] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
    background-color: var(--content-bg);
    font-size: 0.875rem;
}

    .jt-table th[b-5phnent7gp] {
        text-align: left;
        font-weight: 600;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-size: 0.8125rem;
        letter-spacing: 0.02em;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--bs-table-border-color);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .jt-table td[b-5phnent7gp] {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--bs-table-border-color);
        color: var(--text-secondary);
        vertical-align: middle;
    }

.jt-table-striped tbody tr:nth-of-type(odd)[b-5phnent7gp] {
    background-color: var(--bs-table-striped-bg);
}

.jt-table-hover tbody tr:hover[b-5phnent7gp] {
    background-color: var(--bs-table-hover-bg);
}

.jt-inactive-row[b-5phnent7gp] {
    background-color: rgba(0, 0, 0, 0.03);
}

.theme-dark .jt-inactive-row[b-5phnent7gp] {
    background-color: rgba(255, 255, 255, 0.03);
}

.jt-inactive-row td[b-5phnent7gp] {
    opacity: 0.7;
}

/* Status & Category Badges */
.jt-status-badge[b-5phnent7gp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.jt-status-success[b-5phnent7gp] {
    background-color: var(--success-bg);
    color: var(--success);
}

.jt-status-warning[b-5phnent7gp] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.jt-status-danger[b-5phnent7gp] {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.jt-status-info[b-5phnent7gp] {
    background-color: var(--info-light);
    color: var(--info);
}

.jt-category-badge[b-5phnent7gp] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.jt-category-normal[b-5phnent7gp] {
    background-color: var(--primary-light);
    color: var(--primary);
}

.jt-category-worked[b-5phnent7gp] {
    background-color: var(--success-bg);
    color: var(--success);
}

.jt-category-overtime[b-5phnent7gp] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.jt-category-leave[b-5phnent7gp] {
    background-color: var(--info-light);
    color: var(--info);
}

.jt-category-callout[b-5phnent7gp] {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.jt-category-other[b-5phnent7gp] {
    background-color: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
}

.jt-adjustment-badge[b-5phnent7gp] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

/* Pagination */
.jt-pagination[b-5phnent7gp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Tab System */
.jt-tabs[b-5phnent7gp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.jt-tab-buttons[b-5phnent7gp] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-divider);
    overflow-x: auto;
    padding-bottom: 0.25rem;
    position: relative;
}

    .jt-tab-buttons[b-5phnent7gp]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
        opacity: 0.5;
    }

.jt-tab-button[b-5phnent7gp] {
    background: none;
    border: none;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    .jt-tab-button:hover[b-5phnent7gp] {
        color: var(--primary);
        background-color: var(--primary-light);
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }

    .jt-tab-button.jt-active[b-5phnent7gp] {
        color: var(--primary);
        border-bottom-color: var(--primary);
        font-weight: 600;
    }

        .jt-tab-button.jt-active:hover[b-5phnent7gp] {
            background-color: var(--primary-light);
        }

    .jt-tab-button i[b-5phnent7gp] {
        font-size: 0.875rem;
    }

.jt-tab-content[b-5phnent7gp] {
    width: 100%;
}

.jt-tab-pane[b-5phnent7gp] {
    animation: fade-in-b-5phnent7gp 0.3s ease both;
}

/* Loading State */
.jt-loading-state[b-5phnent7gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    text-align: center;
}

.jt-loading-spinner[b-5phnent7gp] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.2rem solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-5phnent7gp 1s infinite cubic-bezier(0.41, 0.26, 0.54, 0.94);
    margin-bottom: 1.25rem;
}

.jt-loading-state p[b-5phnent7gp] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Empty State */
.jt-empty-state[b-5phnent7gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    text-align: center;
}

    .jt-empty-state > i[b-5phnent7gp] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .jt-empty-state h4[b-5phnent7gp] {
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .jt-empty-state p[b-5phnent7gp] {
        margin: 0 0 1.5rem;
        color: var(--text-secondary);
        max-width: 350px;
        font-size: 0.9375rem;
    }

/* Animations */
@keyframes fade-in-b-5phnent7gp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-in-top-b-5phnent7gp {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spin-b-5phnent7gp {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .jt-header-content[b-5phnent7gp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jt-header-actions[b-5phnent7gp] {
        margin-top: 1rem;
        align-self: flex-end;
    }

    .jt-search-filters[b-5phnent7gp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jt-search-container[b-5phnent7gp] {
        width: 100%;
        max-width: none;
    }

    .jt-filters-container[b-5phnent7gp] {
        width: 100%;
        margin-top: 0.75rem;
        justify-content: space-between;
    }

    .jt-date-range[b-5phnent7gp] {
        flex-grow: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .jt-header[b-5phnent7gp] {
        padding: 1rem;
    }

    .jt-main-content[b-5phnent7gp] {
        padding: 1rem;
    }

    .jt-search-filters[b-5phnent7gp] {
        padding: 0.75rem;
    }

    .jt-employee-header[b-5phnent7gp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jt-employee-actions[b-5phnent7gp] {
        align-self: flex-end;
    }

    .jt-tab-buttons[b-5phnent7gp] {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .jt-tab-button[b-5phnent7gp] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 576px) {
    .jt-header-title[b-5phnent7gp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jt-card-header[b-5phnent7gp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .jt-table[b-5phnent7gp] {
        font-size: 0.75rem;
    }

        .jt-table th[b-5phnent7gp] {
            padding: 0.625rem 0.5rem;
            font-size: 0.6875rem;
        }

        .jt-table td[b-5phnent7gp] {
            padding: 0.625rem 0.5rem;
        }

    .jt-date-range[b-5phnent7gp] {
        justify-content: flex-start;
        width: 100%;
    }

        .jt-date-range input[b-5phnent7gp] {
            flex: 1;
        }
}
.jt-tab-content[b-5phnent7gp] {
    overflow: auto;
    height: calc(-450px + 100vh);
}
/* _content/MajestyPortal/Components/Pages/Clockings/EmployeeTimesheetView.razor.rz.scp.css */
/* ====== Employee Timesheet Styles ====== */

.jt-timesheet[b-8klcnx64gs] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
    animation: fade-in-b-8klcnx64gs 0.6s ease both;
}

/* Timesheet Header */
.jt-timesheet-header[b-8klcnx64gs] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-light);
    border-bottom: 1px solid var(--border-divider);
    position: relative;
    flex-wrap: wrap;
    gap: 1rem;
}

    .jt-timesheet-header[b-8klcnx64gs]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 60%;
        background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.05));
        pointer-events: none;
    }

.jt-timesheet-title[b-8klcnx64gs] {
    flex: 1;
    min-width: 250px;
}

    .jt-timesheet-title h3[b-8klcnx64gs] {
        margin: 0;
        font-size: 1.5rem;
        color: var(--primary);
        font-weight: 700;
    }

.jt-timesheet-period[b-8klcnx64gs] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
}

.jt-timesheet-stats[b-8klcnx64gs] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    z-index: 1;
}

.jt-stat-card[b-8klcnx64gs] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: all 0.3s ease;
    border-left: 3px solid var(--primary);
    min-width: 140px;
}

    .jt-stat-card:hover[b-8klcnx64gs] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.jt-stat-overtime[b-8klcnx64gs] {
    border-left-color: var(--warning);
}

.jt-stat-warning[b-8klcnx64gs] {
    border-left-color: var(--danger);
}

.jt-stat-success[b-8klcnx64gs] {
    border-left-color: var(--success);
}

.jt-stat-icon[b-8klcnx64gs] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.jt-stat-overtime .jt-stat-icon[b-8klcnx64gs] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.jt-stat-warning .jt-stat-icon[b-8klcnx64gs] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.jt-stat-success .jt-stat-icon[b-8klcnx64gs] {
    background-color: var(--success-light);
    color: var(--success);
}

.jt-stat-content[b-8klcnx64gs] {
    display: flex;
    flex-direction: column;
}

.jt-stat-value[b-8klcnx64gs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.jt-stat-label[b-8klcnx64gs] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

/* Timesheet Filters */
.jt-timesheet-filters[b-8klcnx64gs] {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
}

.jt-timesheet-period-select[b-8klcnx64gs] {
    flex: 1;
    max-width: 200px;
}

/* Timesheet Content */
.jt-timesheet-content[b-8klcnx64gs] {
    padding: 1.25rem;
    background-color: var(--content-bg);
    flex: 1;
}

.jt-timesheet-table-container[b-8klcnx64gs] {
    overflow-x: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
}

.jt-timesheet-table[b-8klcnx64gs] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .jt-timesheet-table th[b-8klcnx64gs] {
        text-align: left;
        font-weight: 600;
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
        color: var(--text-primary);
    }

    .jt-timesheet-table td[b-8klcnx64gs] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-divider);
        transition: all 0.2s ease;
        color: var(--text-secondary);
    }

    .jt-timesheet-table tr:last-child td[b-8klcnx64gs] {
        border-bottom: none;
    }

    .jt-timesheet-table tr:hover td[b-8klcnx64gs] {
        background-color: var(--bs-table-hover-bg);
    }

/* Date Cell */
.jt-date[b-8klcnx64gs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary);
    margin-right: 0.5rem;
}

.jt-date-day[b-8klcnx64gs] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.jt-date-weekday[b-8klcnx64gs] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Shift Cell */
.jt-shift-time[b-8klcnx64gs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

    .jt-shift-time i[b-8klcnx64gs] {
        color: var(--primary);
        font-size: 0.75rem;
    }

.jt-weekend[b-8klcnx64gs] {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--info-light);
    color: var(--info);
    font-size: 0.75rem;
    font-weight: 500;
}

.jt-holiday[b-8klcnx64gs] {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--danger-light);
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Clocking Cell */
.jt-clocking[b-8klcnx64gs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.jt-clocking-time[b-8klcnx64gs] {
    font-weight: 600;
    color: var(--text-primary);
}

.jt-late-indicator[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--danger);
    font-size: 0.75rem;
    animation: pulse-danger-b-8klcnx64gs 2s infinite;
}

.jt-early-indicator[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--success);
    font-size: 0.75rem;
}

.jt-left-early-indicator[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--warning);
    font-size: 0.75rem;
}

.jt-missing[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--danger);
    font-size: 0.875rem;
}

.jt-adjustment-note[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--info);
    font-size: 0.875rem;
}

/* Time Values */
.jt-time-value[b-8klcnx64gs] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.jt-time-adjusted[b-8klcnx64gs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--info);
}

    .jt-time-adjusted i[b-8klcnx64gs] {
        font-size: 0.75rem;
    }

.jt-overtime-value[b-8klcnx64gs] {
    font-weight: 600;
    color: var(--warning);
}

/* Status Badges */
.jt-status-badge[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.jt-status-success[b-8klcnx64gs] {
    background-color: var(--success-bg);
    color: var(--success);
}

.jt-status-warning[b-8klcnx64gs] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.jt-status-danger[b-8klcnx64gs] {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.jt-status-adjusted[b-8klcnx64gs] {
    background-color: var(--info-light);
    color: var(--info);
}

.jt-status-weekend[b-8klcnx64gs] {
    background-color: rgba(var(--info-rgb), 0.1);
    color: var(--info);
}

.jt-status-holiday[b-8klcnx64gs] {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.jt-status-partial[b-8klcnx64gs] {
    background-color: rgba(var(--warning-rgb), 0.1);
    color: var(--warning);
}

.jt-status-future[b-8klcnx64gs] {
    background-color: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
}

.jt-status-today[b-8klcnx64gs] {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    animation: pulse-primary-b-8klcnx64gs 2s infinite;
}

/* Adjustment List */
.jt-adjustment-list[b-8klcnx64gs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.jt-adjustment-item[b-8klcnx64gs] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: help;
}

.jt-adjustment-time[b-8klcnx64gs] {
    font-weight: 600;
}

/* Row Styles */
.jt-ts-row-today td:first-child[b-8klcnx64gs] {
    position: relative;
}

    .jt-ts-row-today td:first-child[b-8klcnx64gs]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--primary);
    }

.jt-ts-row-weekend[b-8klcnx64gs] {
    background-color: rgba(var(--info-rgb), 0.02);
}

.jt-ts-row-holiday[b-8klcnx64gs] {
    background-color: rgba(var(--danger-rgb), 0.02);
}

.jt-ts-row-late[b-8klcnx64gs] {
    background-color: rgba(var(--warning-rgb), 0.02);
}

.jt-ts-row-adjusted[b-8klcnx64gs] {
    background-color: rgba(var(--info-rgb), 0.02);
}

.jt-ts-row-missing[b-8klcnx64gs] {
    background-color: rgba(var(--danger-rgb), 0.02);
}

/* Timesheet Footer */
.jt-timesheet-footer[b-8klcnx64gs] {
    padding: 1.5rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
}

.jt-timesheet-summary[b-8klcnx64gs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.jt-summary-section[b-8klcnx64gs] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
}

    .jt-summary-section h4[b-8klcnx64gs] {
        margin: 0 0 1rem 0;
        color: var(--text-primary);
        font-size: 1.125rem;
        font-weight: 600;
        position: relative;
        padding-bottom: 0.5rem;
    }

        .jt-summary-section h4[b-8klcnx64gs]::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 3rem;
            height: 2px;
            background-color: var(--primary);
            border-radius: 2px;
        }

.jt-summary-grid[b-8klcnx64gs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.jt-summary-item[b-8klcnx64gs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.jt-summary-label[b-8klcnx64gs] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.jt-summary-value[b-8klcnx64gs] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.jt-summary-total[b-8klcnx64gs] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-divider);
    grid-column: span 2;
}

    .jt-summary-total .jt-summary-value[b-8klcnx64gs] {
        color: var(--primary);
        font-size: 1.25rem;
    }

/* Animations */
@keyframes pulse-primary-b-8klcnx64gs {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-8klcnx64gs {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-warning-b-8klcnx64gs {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0);
    }
}

@keyframes fade-in-b-8klcnx64gs {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .jt-timesheet-header[b-8klcnx64gs] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jt-timesheet-stats[b-8klcnx64gs] {
        width: 100%;
        justify-content: space-between;
    }

    .jt-stat-card[b-8klcnx64gs] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .jt-timesheet-table th[b-8klcnx64gs],
    .jt-timesheet-table td[b-8klcnx64gs] {
        padding: 0.625rem 0.75rem;
    }

    .jt-timesheet-summary[b-8klcnx64gs] {
        grid-template-columns: 1fr;
    }

    .jt-summary-grid[b-8klcnx64gs] {
        grid-template-columns: 1fr;
    }

    .jt-summary-total[b-8klcnx64gs] {
        grid-column: span 1;
    }

    .jt-timesheet-stats[b-8klcnx64gs] {
        flex-wrap: wrap;
    }

    .jt-stat-card[b-8klcnx64gs] {
        flex: 1;
        min-width: 100px;
    }
}

@media (max-width: 576px) {
    .jt-timesheet-header[b-8klcnx64gs] {
        padding: 1rem;
    }

    .jt-timesheet-title h3[b-8klcnx64gs] {
        font-size: 1.25rem;
    }

    .jt-timesheet-stats[b-8klcnx64gs] {
        gap: 0.5rem;
    }

    .jt-stat-card[b-8klcnx64gs] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .jt-stat-icon[b-8klcnx64gs] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .jt-stat-value[b-8klcnx64gs] {
        font-size: 1rem;
    }

    .jt-date[b-8klcnx64gs] {
        width: 2rem;
        height: 2rem;
    }

    .jt-date-day[b-8klcnx64gs] {
        font-size: 0.875rem;
    }

    .jt-date-weekday[b-8klcnx64gs] {
        font-size: 0.625rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Analyzer/AnalyzerDashboard.razor.rz.scp.css */
/* CSS Variables */


/* Base Dashboard Structure */
.analyzer-dashboard[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem;
    background-color: var(--body-bg);
    font-family: 'Inter', sans-serif;
    position: relative;
    min-height: calc(100vh - 60px);
    transition: all 0.3s ease;
    animation: fade-in-b-h17bhulyln 0.6s ease-out;
}

@keyframes fade-in-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Styling */
.analyzer-dashboard-header[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
    gap: 1rem;
    animation: slide-down-b-h17bhulyln 0.5s ease-out;
}

@keyframes slide-down-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analyzer-dashboard-title h1[b-h17bhulyln] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    background: var(--live-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

    .analyzer-dashboard-title h1[b-h17bhulyln]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: var(--primary-gradient);
        border-radius: 2px;
        transform: scaleX(0.6);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

.analyzer-dashboard-title:hover h1[b-h17bhulyln]::after {
    transform: scaleX(1);
}

.analyzer-dashboard-subtitle[b-h17bhulyln] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.85;
    transition: var(--hover-transition);
}

.analyzer-dashboard-title:hover .analyzer-dashboard-subtitle[b-h17bhulyln] {
    opacity: 1;
}

.analyzer-dashboard-actions[b-h17bhulyln] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Device Selector */
.analyzer-device-selector[b-h17bhulyln] {
    flex-grow: 1;
    max-width: 300px;
    margin-top: 0.5rem;
}

.analyzer-device-dropdown[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.analyzer-device-select[b-h17bhulyln] {
    flex-grow: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--content-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
    transition: var(--hover-transition);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

    .analyzer-device-select:focus[b-h17bhulyln] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .analyzer-device-select:hover[b-h17bhulyln] {
        border-color: var(--primary-color);
    }

.analyzer-device-status[b-h17bhulyln] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    right: 0.75rem;
    pointer-events: none;
}

/* Filter Dropdown */
.analyzer-filter-dropdown[b-h17bhulyln] {
    position: relative;
}

.analyzer-filter-button[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

    .analyzer-filter-button:hover[b-h17bhulyln] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    }

.analyzer-filter-badge[b-h17bhulyln] {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--danger);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.analyzer-filter-panel[b-h17bhulyln] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 300px;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: dropdown-appear-b-h17bhulyln 0.3s ease-out;
    border: 1px solid var(--border-color);
}

@keyframes dropdown-appear-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analyzer-filter-panel-header[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

    .analyzer-filter-panel-header h3[b-h17bhulyln] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.analyzer-filter-close[b-h17bhulyln] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--hover-transition);
}

    .analyzer-filter-close:hover[b-h17bhulyln] {
        background-color: var(--nav-hover);
        color: var(--text-primary);
    }

.analyzer-filter-panel-body[b-h17bhulyln] {
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
}

.analyzer-filter-group[b-h17bhulyln] {
    margin-bottom: 1.25rem;
}

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

.analyzer-filter-options[b-h17bhulyln] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.analyzer-filter-checkbox[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .analyzer-filter-checkbox input[type="checkbox"][b-h17bhulyln] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .analyzer-filter-checkbox label[b-h17bhulyln] {
        font-weight: 400;
        font-size: 0.85rem;
        cursor: pointer;
        margin-bottom: 0;
    }

.analyzer-filter-status-options[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.analyzer-date-range[b-h17bhulyln] {
    display: flex;
    gap: 1rem;
}

.analyzer-date-field[b-h17bhulyln] {
    flex: 1;
}

    .analyzer-date-field label[b-h17bhulyln] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

.analyzer-date-input[b-h17bhulyln] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--hover-transition);
}

    .analyzer-date-input:focus[b-h17bhulyln] {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
    }

.analyzer-select-container[b-h17bhulyln] {
    position: relative;
}

    .analyzer-select-container[b-h17bhulyln]::after {
        content: '\f0d7';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--text-secondary);
    }

.analyzer-select[b-h17bhulyln] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--hover-transition);
    cursor: pointer;
}

    .analyzer-select:focus[b-h17bhulyln] {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
    }

.analyzer-search-input[b-h17bhulyln] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--hover-transition);
}

    .analyzer-search-input:focus[b-h17bhulyln] {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
    }

.analyzer-filter-actions[b-h17bhulyln] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.analyzer-filter-reset[b-h17bhulyln] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--hover-transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .analyzer-filter-reset:hover[b-h17bhulyln] {
        background-color: var(--nav-hover);
        color: var(--text-primary);
    }

.analyzer-filter-apply[b-h17bhulyln] {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
}

    .analyzer-filter-apply:hover[b-h17bhulyln] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.3);
    }

/* Connection Status */
.analyzer-connection-status[b-h17bhulyln] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: var(--hover-transition);
    transform-origin: center;
}

.analyzer-persistent-status[b-h17bhulyln] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
}

    .analyzer-persistent-status.online[b-h17bhulyln] {
        background-color: var(--scale-online);
        box-shadow: 0 0 5px rgba(var(--success-rgb), 0.5);
    }

    .analyzer-persistent-status.offline[b-h17bhulyln] {
        background-color: var(--scale-offline);
        box-shadow: 0 0 5px rgba(var(--danger-rgb), 0.5);
    }

.analyzer-status-connected[b-h17bhulyln] {
    background-color: var(--scale-online-bg);
    color: var(--scale-online);
    border: 1px solid rgba(var(--success-rgb), 0.3);
    box-shadow: 0 0 0 rgba(var(--success-rgb), 0.4);
    animation: pulse-success-b-h17bhulyln 2s infinite;
}

@keyframes pulse-success-b-h17bhulyln {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

.analyzer-status-disconnected[b-h17bhulyln] {
    background-color: var(--scale-offline-bg);
    color: var(--scale-offline);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    animation: pulse-danger-b-h17bhulyln 2s infinite;
}

@keyframes pulse-danger-b-h17bhulyln {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--danger-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
    }
}

.analyzer-last-update[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: var(--hover-transition);
    background-color: var(--content-bg);
    padding: 0.375rem 0.75rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

    .analyzer-last-update:hover[b-h17bhulyln] {
        color: var(--text-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.analyzer-activity-indicator[b-h17bhulyln] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: var(--hover-transition);
    flex-shrink: 0;
}

    .analyzer-activity-indicator.analyzer-activity-active[b-h17bhulyln] {
        background-color: var(--success);
        box-shadow: 0 0 0 4px rgba(var(--success-rgb), 0.2);
        animation: scale-pulse-b-h17bhulyln 1.5s infinite;
    }

@keyframes scale-pulse-b-h17bhulyln {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

.analyzer-refresh-button[b-h17bhulyln] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
    background: var(--primary-gradient);
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .analyzer-refresh-button:hover[b-h17bhulyln] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
    }

    .analyzer-refresh-button:active[b-h17bhulyln] {
        transform: translateY(0) scale(0.98);
    }

    .analyzer-refresh-button i[b-h17bhulyln] {
        transition: transform 0.3s ease;
    }

    .analyzer-refresh-button:hover i[b-h17bhulyln] {
        transform: rotate(180deg);
    }

/* Status Tabs */
.analyzer-status-tabs[b-h17bhulyln] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    animation: fade-in-b-h17bhulyln 0.6s ease-out;
}

.analyzer-status-tab[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    flex: 1;
    cursor: pointer;
    transition: var(--card-transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .analyzer-status-tab[b-h17bhulyln]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
        opacity: 0;
        transition: var(--hover-transition);
    }

    .analyzer-status-tab:hover[b-h17bhulyln] {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

        .analyzer-status-tab:hover[b-h17bhulyln]::before {
            opacity: 1;
        }

    .analyzer-status-tab.active[b-h17bhulyln] {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-color), 0 5px 10px rgba(0, 0, 0, 0.1);
    }

        .analyzer-status-tab.active[b-h17bhulyln]::before {
            opacity: 1;
        }

.analyzer-status-icon[b-h17bhulyln] {
    position: relative;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.analyzer-status-count[b-h17bhulyln] {
    position: absolute;
    top: -9px;
    right: -34px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 4px;
}

.analyzer-status-label[b-h17bhulyln] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Main Dashboard Content */
.analyzer-dashboard-main[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: slide-up-b-h17bhulyln 0.7s ease-out;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

@keyframes slide-up-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analyzer-samples-panel[b-h17bhulyln] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.analyzer-panel-header[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--table-header-bg);
}

    .analyzer-panel-header h2[b-h17bhulyln] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.analyzer-panel-controls[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.analyzer-search-bar[b-h17bhulyln] {
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 280px;
    transition: var(--hover-transition);
    position: relative;
}

    .analyzer-search-bar:focus-within[b-h17bhulyln] {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
        width: 320px;
    }

    .analyzer-search-bar i[b-h17bhulyln] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }

    .analyzer-search-bar input[b-h17bhulyln] {
        background-color: transparent;
        border: none;
        color: var(--text-primary);
        flex-grow: 1;
        font-size: 0.9rem;
        outline: none;
    }

        .analyzer-search-bar input[b-h17bhulyln]::placeholder {
            color: var(--text-secondary);
        }

.analyzer-search-clear[b-h17bhulyln] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .analyzer-search-clear:hover[b-h17bhulyln] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }

/* Loading State */
.analyzer-loading[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--text-secondary);
}

.analyzer-spinner[b-h17bhulyln] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin-b-h17bhulyln 1s ease-in-out infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-h17bhulyln {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.analyzer-empty-state[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
    text-align: center;
}

    .analyzer-empty-state i[b-h17bhulyln] {
    }

    .analyzer-empty-state h3[b-h17bhulyln] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.5rem 0;
    }

    .analyzer-empty-state p[b-h17bhulyln] {
        font-size: 0.95rem;
        margin: 0 0 1rem 0;
        max-width: 300px;
    }

.analyzer-reset-button[b-h17bhulyln] {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .analyzer-reset-button:hover[b-h17bhulyln] {
        background-color: var(--primary-color);
        color: white;
    }

/* Table View */
.analyzer-table-container[b-h17bhulyln] {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    border-radius: 0 0 0.75rem 0.75rem;
}

.analyzer-table[b-h17bhulyln] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

    .analyzer-table th[b-h17bhulyln] {
        top: 0;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-weight: 600;
        padding: 0.875rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
        z-index: 1;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .analyzer-table th:hover[b-h17bhulyln] {
            background-color: var(--nav-hover);
        }

        .analyzer-table th i[b-h17bhulyln] {
            margin-left: 0.25rem;
            opacity: 0.7;
        }

    .analyzer-table td[b-h17bhulyln] {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--border-light);
        color: var(--text-primary);
    }

    .analyzer-table tr[b-h17bhulyln] {
        transition: var(--hover-transition);
        cursor: pointer;
    }

        .analyzer-table tr:hover[b-h17bhulyln] {
            background-color: var(--nav-hover);
        }

        .analyzer-table tr.selected[b-h17bhulyln] {
            background-color: var(--primary-light);
        }

.status-column[b-h17bhulyln] {
    width: 100px;
}

.analyzer-sample-status-cell[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.analyzer-sample-label-cell[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.analyzer-sample-primary[b-h17bhulyln] {
    font-weight: 600;
    color: var(--text-primary);
}

.analyzer-sample-secondary[b-h17bhulyln] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.analyzer-sample-id[b-h17bhulyln], .analyzer-sample-number[b-h17bhulyln] {
    white-space: nowrap;
}

.analyzer-product-type[b-h17bhulyln] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.analyzer-device-info[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.analyzer-device-type[b-h17bhulyln] {
    font-weight: 600;
}

.analyzer-device-name[b-h17bhulyln] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.analyzer-sample-date[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.analyzer-date-value[b-h17bhulyln] {
    font-weight: 500;
}

.analyzer-time-value[b-h17bhulyln] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.analyzer-table-custom-fields[b-h17bhulyln] {
    max-width: 250px;
}

.analyzer-table-field-list[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.analyzer-table-field[b-h17bhulyln] {
    display: flex;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analyzer-field-name[b-h17bhulyln] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.analyzer-field-value[b-h17bhulyln] {
    color: var(--text-primary);
}

.analyzer-more-table-fields[b-h17bhulyln] {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 0.25rem;
}

.analyzer-no-fields[b-h17bhulyln] {
    color: var(--text-muted);
}

.analyzer-table-actions[b-h17bhulyln] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.analyzer-action-button[b-h17bhulyln] {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .analyzer-action-button:hover[b-h17bhulyln] {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

.analyzer-sample-status-button[b-h17bhulyln] {
    background-color: var(--scale-online-bg);
    color: var(--scale-online);
}

    .analyzer-sample-status-button:hover[b-h17bhulyln] {
        background-color: var(--scale-online);
    }

.analyzer-expanded-row[b-h17bhulyln] {
    background-color: var(--subtle-bg);
}

    .analyzer-expanded-row td[b-h17bhulyln] {
        padding: 0;
    }

.analyzer-expanded-content[b-h17bhulyln] {
    padding: 1.25rem;
    animation: fade-slide-down-b-h17bhulyln 0.3s ease-out;
}

@keyframes fade-slide-down-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analyzer-expanded-grid[b-h17bhulyln] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.analyzer-expanded-section[b-h17bhulyln] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .analyzer-expanded-section h4[b-h17bhulyln] {
        margin: 0;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
        background-color: var(--subtle-bg);
        border-bottom: 1px solid var(--border-light);
    }

.analyzer-results-container[b-h17bhulyln] {
    padding: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.analyzer-results-table[b-h17bhulyln] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .analyzer-results-table th[b-h17bhulyln] {
        top: 0;
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        font-weight: 600;
        padding: 0.5rem;
        text-align: left;
        border-bottom: 1px solid var(--border-light);
        white-space: nowrap;
        z-index: 1;
    }

    .analyzer-results-table td[b-h17bhulyln] {
        padding: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    .analyzer-results-table tr:hover[b-h17bhulyln] {
        background-color: var(--nav-hover);
    }

    .analyzer-results-table tr.out-of-spec[b-h17bhulyln] {
        background-color: rgba(var(--danger-rgb), 0.05);
    }

        .analyzer-results-table tr.out-of-spec:hover[b-h17bhulyln] {
            background-color: rgba(var(--danger-rgb), 0.1);
        }

.positive-value[b-h17bhulyln] {
    color: var(--positive-value);
    font-weight: 600;
}

.negative-value[b-h17bhulyln] {
    color: var(--negative-value);
    font-weight: 600;
}

.analyzer-all-fields-grid[b-h17bhulyln] {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.analyzer-all-field-item[b-h17bhulyln] {
    display: flex;
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.analyzer-all-field-name[b-h17bhulyln] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.analyzer-all-field-value[b-h17bhulyln] {
    color: var(--text-primary);
}

.analyzer-combined-container[b-h17bhulyln] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.analyzer-comment-item[b-h17bhulyln] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.analyzer-comment-header[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.8rem;
}

.analyzer-comment-type[b-h17bhulyln] {
    font-weight: 600;
    color: var(--text-primary);
}

.analyzer-comment-time[b-h17bhulyln] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.analyzer-comment-body[b-h17bhulyln] {
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.analyzer-no-content[b-h17bhulyln] {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.analyzer-expanded-actions[b-h17bhulyln] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.analyzer-expanded-view-details[b-h17bhulyln], .analyzer-expanded-close[b-h17bhulyln] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .analyzer-expanded-view-details:hover[b-h17bhulyln] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .analyzer-expanded-close:hover[b-h17bhulyln] {
        background-color: var(--danger);
        color: white;
        border-color: var(--danger);
        transform: translateY(-2px);
    }

/* Pagination Controls */
.analyzer-pagination[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--content-bg);
}

.analyzer-pagination-info[b-h17bhulyln] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.analyzer-pagination-controls[b-h17bhulyln] {
    display: flex;
    gap: 0.5rem;
}

.analyzer-page-button[b-h17bhulyln] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
    background-color: var(--content-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .analyzer-page-button:hover:not(:disabled)[b-h17bhulyln] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .analyzer-page-button:disabled[b-h17bhulyln] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .analyzer-page-button.active[b-h17bhulyln] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
    }

/* Detail Modal */
.analyzer-detail-modal[b-h17bhulyln] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in-b-h17bhulyln 0.3s ease-out;
}

.analyzer-modal-content[b-h17bhulyln] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    width: 92%;
    max-width: 1300px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: modal-zoom-b-h17bhulyln 0.3s ease-out;
    overflow: hidden;
}

@keyframes modal-zoom-b-h17bhulyln {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.analyzer-modal-header[b-h17bhulyln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--subtle-bg);
}

.analyzer-modal-title[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .analyzer-modal-title h2[b-h17bhulyln] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.analyzer-detail-status[b-h17bhulyln] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.status-pending[b-h17bhulyln] {
    background-color: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
}

.status-linked[b-h17bhulyln] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.status-discarded[b-h17bhulyln] {
    background-color: rgba(var(--danger-rgb), 0.15);
    color: var(--danger);
}

.status-dot[b-h17bhulyln] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.analyzer-modal-close[b-h17bhulyln] {
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.25rem;
}

    .analyzer-modal-close:hover[b-h17bhulyln] {
        background-color: var(--nav-hover);
        color: var(--text-primary);
        transform: scale(1.1);
    }

.analyzer-modal-body[b-h17bhulyln] {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    max-height: calc(90vh - 90px);
}

.analyzer-detail-grid[b-h17bhulyln] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
}

.analyzer-detail-sidebar[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analyzer-detail-device-section[b-h17bhulyln],
.analyzer-detail-sample-section[b-h17bhulyln],
.analyzer-detail-status-actions[b-h17bhulyln] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .analyzer-detail-device-section h3[b-h17bhulyln],
    .analyzer-detail-sample-section h3[b-h17bhulyln],
    .analyzer-detail-status-actions h3[b-h17bhulyln] {
        margin: 0;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        background-color: var(--subtle-bg);
        border-bottom: 1px solid var(--border-light);
    }

.analyzer-detail-device-info[b-h17bhulyln],
.analyzer-detail-sample-info[b-h17bhulyln] {
    padding: 1rem;
}

.analyzer-detail-row[b-h17bhulyln] {
    display: flex;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

    .analyzer-detail-row:last-child[b-h17bhulyln] {
        margin-bottom: 0;
    }

.analyzer-detail-label[b-h17bhulyln] {
    width: 40%;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.analyzer-detail-value[b-h17bhulyln] {
    width: 60%;
    color: var(--text-primary);
    font-size: 0.9rem;
    word-break: break-word;
}

.analyzer-status-buttons[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.analyzer-status-button[b-h17bhulyln] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .analyzer-status-button:hover[b-h17bhulyln] {
        background-color: var(--nav-hover);
        color: var(--text-primary);
        transform: translateY(-2px);
    }

    .analyzer-status-button.active[b-h17bhulyln] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.1);
    }

    .analyzer-status-button i[b-h17bhulyln] {
        font-size: 1rem;
    }

.analyzer-detail-content[b-h17bhulyln] {
    flex-grow: 1;
}

.analyzer-detail-tabs[b-h17bhulyln] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.analyzer-tabs-header[b-h17bhulyln] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--subtle-bg);
}

    .analyzer-tabs-header button[b-h17bhulyln] {
        flex: 1;
        background-color: transparent;
        border: none;
        padding: 1rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: var(--hover-transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        position: relative;
    }

        .analyzer-tabs-header button:hover[b-h17bhulyln] {
            color: var(--text-primary);
            background-color: var(--nav-hover);
        }

        .analyzer-tabs-header button.active[b-h17bhulyln] {
            color: var(--primary-color);
            background-color: var(--primary-light);
        }

            .analyzer-tabs-header button.active[b-h17bhulyln]::after {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: var(--primary-color);
            }

.analyzer-tabs-content[b-h17bhulyln] {
    padding: 1.25rem;
    overflow-y: auto;
    flex-grow: 1;
}

.analyzer-tab-pane[b-h17bhulyln] {
    animation: fade-in-b-h17bhulyln 0.3s ease-out;
}

/* Combined View Tab */
.analyzer-combined-view[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analyzer-combined-section[b-h17bhulyln] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .analyzer-combined-section h3[b-h17bhulyln] {
        margin: 0;
        padding: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        background-color: var(--subtle-bg);
        border-bottom: 1px solid var(--border-light);
    }

/* Custom Fields Tab */
.analyzer-custom-fields-detail h3[b-h17bhulyln] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.analyzer-custom-fields-grid[b-h17bhulyln] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.analyzer-custom-field-item[b-h17bhulyln] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
}

    .analyzer-custom-field-item:hover[b-h17bhulyln] {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

.analyzer-custom-field-name[b-h17bhulyln] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.analyzer-custom-field-value[b-h17bhulyln] {
    font-size: 1rem;
    color: var(--text-primary);
    word-break: break-word;
}

.analyzer-no-custom-fields-message[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
    text-align: center;
}

    .analyzer-no-custom-fields-message i[b-h17bhulyln] {
        font-size: 2.5rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        opacity: 0.7;
    }

    .analyzer-no-custom-fields-message p[b-h17bhulyln] {
        font-size: 1rem;
        margin: 0;
    }

/* Results Tab */
.analyzer-results-summary[b-h17bhulyln] {
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
}

.analyzer-results-header[b-h17bhulyln] {
    margin-bottom: 1rem;
}

    .analyzer-results-header h3[b-h17bhulyln] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.analyzer-summary-stats[b-h17bhulyln] {
    display: flex;
    gap: 2rem;
}

.analyzer-summary-stat[b-h17bhulyln] {
    text-align: center;
}

    .analyzer-summary-stat.out-of-spec .stat-value[b-h17bhulyln] {
        color: var(--danger);
    }

.stat-value[b-h17bhulyln] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-label[b-h17bhulyln] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.analyzer-results-table-container[b-h17bhulyln] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.analyzer-badge[b-h17bhulyln] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.analyzer-badge-success[b-h17bhulyln] {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.analyzer-badge-danger[b-h17bhulyln] {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.analyzer-badge-warning[b-h17bhulyln] {
    background-color: rgba(var(--warning-rgb), 0.1);
    color: var(--warning);
}

/* Comments Tab */
.analyzer-comments-detail h3[b-h17bhulyln] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.analyzer-comments-container[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analyzer-no-comments-message[b-h17bhulyln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
    text-align: center;
}

    .analyzer-no-comments-message i[b-h17bhulyln] {
        font-size: 2.5rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        opacity: 0.7;
    }

    .analyzer-no-comments-message p[b-h17bhulyln] {
        font-size: 1rem;
        margin: 0;
    }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .analyzer-detail-grid[b-h17bhulyln] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .analyzer-detail-sidebar[b-h17bhulyln] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .analyzer-expanded-grid[b-h17bhulyln] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .analyzer-dashboard-header[b-h17bhulyln] {
        flex-direction: column;
        align-items: flex-start;
    }

    .analyzer-dashboard-actions[b-h17bhulyln] {
        width: 100%;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .analyzer-search-bar[b-h17bhulyln] {
        width: 200px;
    }

    .analyzer-detail-sidebar[b-h17bhulyln] {
        grid-template-columns: 1fr;
    }

    .analyzer-status-tabs[b-h17bhulyln] {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .analyzer-status-tab[b-h17bhulyln] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .analyzer-summary-stats[b-h17bhulyln] {
        flex-direction: column;
        gap: 1rem;
    }

    .analyzer-custom-fields-grid[b-h17bhulyln] {
        grid-template-columns: 1fr;
    }
}

/* Animation for row transitions */
.analyzer-table tbody tr[b-h17bhulyln] {
    animation: row-appear-b-h17bhulyln 0.3s ease-out;
}

@keyframes row-appear-b-h17bhulyln {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceAppsTab.razor.rz.scp.css */
/* ====== Installed Applications - Compact Professional Style ====== */

.device-tab-container[b-rdgywnqnw5] {
    padding: 0;
    margin: 0;
    font-family: var(--font-primary);
}

/* Header Styling */
.device-tab-header[b-rdgywnqnw5] {
    margin-bottom: 1.25rem;
}

    .device-tab-header h3[b-rdgywnqnw5] {
        margin: 0 0 0.25rem 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .device-tab-header p[b-rdgywnqnw5] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9375rem;
    }

/* Action Bar */
.device-tab-actions[b-rdgywnqnw5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem;
    background-color: var(--content-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Search Box */
.device-search-box[b-rdgywnqnw5] {
    position: relative;
    min-width: 200px;
    flex: 1;
}

    .device-search-box i[b-rdgywnqnw5] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .device-search-box input[b-rdgywnqnw5] {
        width: 100%;
        padding: 0.625rem 0.625rem 0.625rem 2.25rem;
        border-radius: 0.375rem;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
    }

        .device-search-box input:focus[b-rdgywnqnw5] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
        }

.device-clear-search[b-rdgywnqnw5] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem;
}

    .device-clear-search:hover[b-rdgywnqnw5] {
        color: var(--text-primary);
    }

/* Filter Options */
.device-filter-options[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.device-checkbox[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

    .device-checkbox input[b-rdgywnqnw5] {
        cursor: pointer;
    }

/* Buttons */
.device-btn[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-btn-secondary[b-rdgywnqnw5] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .device-btn-secondary:hover[b-rdgywnqnw5] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

.device-btn-primary[b-rdgywnqnw5] {
    background-color: var(--primary-color);
    border: 1px solid transparent;
    color: white;
}

    .device-btn-primary:hover[b-rdgywnqnw5] {
        background-color: var(--primary-dark);
    }

/* Stats Bar */
.device-stats-bar[b-rdgywnqnw5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
}

.device-stat-item[b-rdgywnqnw5] {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.device-stat-value[b-rdgywnqnw5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
}

.device-stat-label[b-rdgywnqnw5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Main Table */
.device-apps-table-container[b-rdgywnqnw5] {
    overflow-x: auto;
    background-color: var(--content-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.device-apps-table[b-rdgywnqnw5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .device-apps-table th[b-rdgywnqnw5],
    .device-apps-table td[b-rdgywnqnw5] {
        padding: 0.75rem 0.875rem;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid var(--border-divider);
    }

    .device-apps-table th[b-rdgywnqnw5] {
        font-weight: 600;
        color: var(--text-primary);
        background-color: var(--subtle-bg);
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .device-apps-table tr:hover td[b-rdgywnqnw5] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

    .device-apps-table tr.removed-app td[b-rdgywnqnw5] {
        color: var(--text-muted);
        font-style: italic;
    }

    .device-apps-table tr.removed-app:hover td[b-rdgywnqnw5] {
        background-color: rgba(var(--danger-rgb), 0.05);
    }

    .device-apps-table th:first-child[b-rdgywnqnw5],
    .device-apps-table td:first-child[b-rdgywnqnw5] {
        padding-left: 1rem;
    }

    .device-apps-table th:last-child[b-rdgywnqnw5],
    .device-apps-table td:last-child[b-rdgywnqnw5] {
        padding-right: 1rem;
    }

/* Table Columns */
.sortable-column[b-rdgywnqnw5] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

    .sortable-column:hover[b-rdgywnqnw5] {
        background-color: rgba(var(--primary-rgb), 0.1);
    }

    .sortable-column i[b-rdgywnqnw5] {
        margin-left: 0.375rem;
        font-size: 0.75rem;
        color: var(--text-muted);
    }

.version-column[b-rdgywnqnw5] {
    width: 8%;
}

.publisher-column[b-rdgywnqnw5] {
    width: 15%;
}

.date-column[b-rdgywnqnw5] {
    width: 8%;
}

.size-column[b-rdgywnqnw5] {
    width: 7%;
}

.source-column[b-rdgywnqnw5] {
    width: 8%;
}

.actions-column[b-rdgywnqnw5] {
    width: 3%;
}

/* App Name Cell */
.app-name-cell[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 350px;
}

.app-icon[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
}

.app-details[b-rdgywnqnw5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-name[b-rdgywnqnw5] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.app-path[b-rdgywnqnw5] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

/* Source Badge */
.source-badge[b-rdgywnqnw5] {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 1rem;
    white-space: nowrap;
}

.registry-source[b-rdgywnqnw5] {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.startmenu-source[b-rdgywnqnw5] {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.other-source[b-rdgywnqnw5] {
    background-color: rgba(var(--info-rgb), 0.1);
    color: var(--info);
}

/* Table Actions */
.app-action-btn[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .app-action-btn:hover[b-rdgywnqnw5] {
        background-color: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-color);
    }

/* Pagination */
.device-pagination[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
}

.device-pagination-btn[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .device-pagination-btn:hover:not(:disabled)[b-rdgywnqnw5] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .device-pagination-btn:disabled[b-rdgywnqnw5] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.device-pagination-pages[b-rdgywnqnw5] {
    display: flex;
    gap: 0.25rem;
}

.device-pagination-page[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .device-pagination-page:hover[b-rdgywnqnw5] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .device-pagination-page.active[b-rdgywnqnw5] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

/* Loading State */
.device-loading-state[b-rdgywnqnw5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
}

.device-loading-spinner[b-rdgywnqnw5] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--primary-rgb), 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-rdgywnqnw5 0.8s infinite linear;
    margin-bottom: 1rem;
}

.device-loading-state p[b-rdgywnqnw5] {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

@keyframes spin-b-rdgywnqnw5 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.device-empty-content[b-rdgywnqnw5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
}

.device-empty-icon[b-rdgywnqnw5] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.device-empty-content h4[b-rdgywnqnw5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.device-empty-content p[b-rdgywnqnw5] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 1rem 0;
    max-width: 25rem;
}

/* Modal */
.device-modal-overlay[b-rdgywnqnw5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-rdgywnqnw5 0.2s ease;
}

.device-modal[b-rdgywnqnw5] {
    background-color: var(--content-bg);
    border-radius: 0.5rem;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: modal-slide-up-b-rdgywnqnw5 0.3s ease;
}

@keyframes fade-in-b-rdgywnqnw5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-slide-up-b-rdgywnqnw5 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.device-modal-header[b-rdgywnqnw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.app-modal-title[b-rdgywnqnw5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-modal-icon[b-rdgywnqnw5] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 0.375rem;
    font-size: 1.25rem;
}

.app-modal-title h4[b-rdgywnqnw5] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.device-modal-close[b-rdgywnqnw5] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

    .device-modal-close:hover[b-rdgywnqnw5] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }

.device-modal-body[b-rdgywnqnw5] {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

.device-modal-footer[b-rdgywnqnw5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* App Details */
.app-details-container[b-rdgywnqnw5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app-detail-section[b-rdgywnqnw5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-detail-item[b-rdgywnqnw5] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.app-detail-label[b-rdgywnqnw5] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.app-detail-value[b-rdgywnqnw5] {
    color: var(--text-primary);
    font-size: 0.875rem;
    word-break: break-word;
}

.app-detail-divider[b-rdgywnqnw5] {
    height: 1px;
    background-color: var(--border-divider);
    margin: 0.25rem 0;
}

.removed-date .app-detail-value[b-rdgywnqnw5] {
    color: var(--danger);
    font-weight: 500;
}

.full-path .app-detail-value[b-rdgywnqnw5] {
    font-family: monospace;
    font-size: 0.8125rem;
    padding: 0.5rem;
    background-color: var(--subtle-bg);
    border-radius: 0.25rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
}

.unique-id[b-rdgywnqnw5] {
    font-family: monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .device-stat-item[b-rdgywnqnw5] {
        min-width: 80px;
    }

    .app-name-cell[b-rdgywnqnw5] {
        max-width: 200px;
    }

    .app-name[b-rdgywnqnw5], .app-path[b-rdgywnqnw5] {
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    .device-tab-actions[b-rdgywnqnw5] {
        flex-direction: column;
        align-items: stretch;
    }

    .device-filter-options[b-rdgywnqnw5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .device-stats-bar[b-rdgywnqnw5] {
        grid-template-columns: 1fr 1fr;
    }

    .app-detail-item[b-rdgywnqnw5] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .app-detail-value[b-rdgywnqnw5] {
        padding-left: 1rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceBrowserHistoryTab.razor.rz.scp.css */
/* ====== Enhanced Browser History Tab Styles ====== */

:root[b-tsq52u9ab0] {
    --history-card-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    --history-card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
    --history-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --history-border-radius: 0.75rem;
    --history-bg-gradient: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.01) 100%);
    /* Timeline specific variables */
    --timeline-item-width: 200px;
    --timeline-item-gap: 16px;
    --timeline-item-height: 170px;
    --timeline-active-glow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}

.theme-dark[b-tsq52u9ab0] {
    --history-card-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    --history-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
    --history-bg-gradient: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.03) 100%);
}

/* Base Container Animation */
.device-tab-container[b-tsq52u9ab0] {
    animation: fade-in-b-tsq52u9ab0 0.5s ease-out;
}

@keyframes fade-in-b-tsq52u9ab0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* History Tab Header Styles */
.history-tab .device-tab-header[b-tsq52u9ab0] {
    margin-bottom: 1.5rem;
    position: relative;
}

.header-main[b-tsq52u9ab0] {
    margin-bottom: 1rem;
}

.history-tab .device-tab-header h3[b-tsq52u9ab0] {
    margin: 0 0 0.375rem 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .history-tab .device-tab-header h3 i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 1.25rem;
    }

.history-tab .device-tab-header p[b-tsq52u9ab0] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 80%;
}

/* Tab Actions */
.device-tab-actions[b-tsq52u9ab0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--content-bg);
    border-radius: var(--history-border-radius);
    border: 1px solid var(--border-divider);
    box-shadow: var(--history-card-shadow);
    backdrop-filter: blur(4px);
    transition: var(--history-transition);
}

    .device-tab-actions:hover[b-tsq52u9ab0] {
        box-shadow: var(--history-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.15);
    }

/* Group filter elements */
.filter-group[b-tsq52u9ab0] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

/* Search Box */
.device-search-box[b-tsq52u9ab0] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

    .device-search-box i[b-tsq52u9ab0] {
        position: absolute;
        left: 1.125rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 1rem;
        transition: color 0.3s ease;
    }

    .device-search-box input[b-tsq52u9ab0] {
        width: 100%;
        padding: 0.75rem 1.25rem 0.75rem 2.75rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-divider);
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.3s ease;
    }

        .device-search-box input:focus[b-tsq52u9ab0] {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

            .device-search-box input:focus + i[b-tsq52u9ab0] {
                color: var(--primary-color);
            }

.device-clear-search[b-tsq52u9ab0] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.3s ease;
}

    .device-clear-search:hover[b-tsq52u9ab0] {
        background-color: rgba(var(--text-secondary-rgb), 0.1);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

/* Filter Dropdown */
.device-filter-dropdown[b-tsq52u9ab0] {
    position: relative;
    min-width: 140px;
}

    .device-filter-dropdown select[b-tsq52u9ab0] {
        padding: 0.75rem 2.5rem 0.75rem 1.125rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        transition: all 0.3s ease;
        min-width: 100%;
    }

        .device-filter-dropdown select:focus[b-tsq52u9ab0] {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

        .device-filter-dropdown select:hover[b-tsq52u9ab0] {
            border-color: rgba(var(--primary-rgb), 0.3);
        }

.device-date-filter select[b-tsq52u9ab0] {
    min-width: 130px;
}

/* View Toggle */
.device-view-toggle[b-tsq52u9ab0] {
    display: flex;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    padding: 0.375rem;
    border: 1px solid var(--border-divider);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .device-view-toggle button[b-tsq52u9ab0] {
        padding: 0.5rem 0.75rem;
        background: none;
        border: none;
        border-radius: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9375rem;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

        .device-view-toggle button.active[b-tsq52u9ab0] {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
        }

        .device-view-toggle button:not(.active):hover[b-tsq52u9ab0] {
            background-color: rgba(var(--text-secondary-rgb), 0.1);
            color: var(--text-primary);
        }

/* Cards per page selector */
.history-count-selector[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .history-count-selector span[b-tsq52u9ab0] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

.count-options[b-tsq52u9ab0] {
    display: flex;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    padding: 0.25rem;
    border: 1px solid var(--border-divider);
}

    .count-options button[b-tsq52u9ab0] {
        min-width: 2.5rem;
        height: 2rem;
        border: none;
        background: none;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .count-options button.active[b-tsq52u9ab0] {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
        }

        .count-options button:not(.active):hover[b-tsq52u9ab0] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

/* History Stats Cards */
.history-stats[b-tsq52u9ab0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: fade-in-b-tsq52u9ab0 0.6s ease-out;
}

.history-stat-card[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    border-radius: var(--history-border-radius);
    border: 1px solid var(--border-divider);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--history-transition);
    box-shadow: var(--history-card-shadow);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .history-stat-card[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-rgb), 0.7));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .history-stat-card:hover[b-tsq52u9ab0] {
        transform: translateY(-5px);
        box-shadow: var(--history-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

        .history-stat-card:hover[b-tsq52u9ab0]::before {
            transform: scaleX(1);
        }

.history-stat-icon[b-tsq52u9ab0] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.8), rgba(var(--primary-rgb), 0.6));
    color: white;
    font-size: 1.25rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}

.history-stat-card:hover .history-stat-icon[b-tsq52u9ab0] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.3);
}

.history-stat-content[b-tsq52u9ab0] {
    flex: 1;
}

.history-stat-value[b-tsq52u9ab0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.history-stat-label[b-tsq52u9ab0] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Timeline Styles */
.history-timeline-container[b-tsq52u9ab0] {
    margin: 1.5rem 0 2rem 0;
    padding: 1.25rem;
    background-color: var(--content-bg);
    border-radius: var(--history-border-radius);
    border: 1px solid var(--border-divider);
    box-shadow: var(--history-card-shadow);
    position: relative;
    overflow: hidden;
    animation: fade-in-b-tsq52u9ab0 0.7s ease-out;
}

    .history-timeline-container[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        height: 4px;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.7));
        border-radius: var(--history-border-radius) var(--history-border-radius) 0 0;
    }

.timeline-header[b-tsq52u9ab0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .timeline-header h4[b-tsq52u9ab0] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.history-count[b-tsq52u9ab0] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background-color: var(--subtle-bg);
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--border-divider);
    font-weight: 500;
}

/* Custom Scrollbar Styling */
.custom-scrollbar[b-tsq52u9ab0] {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .custom-scrollbar[b-tsq52u9ab0]::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .custom-scrollbar[b-tsq52u9ab0]::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar[b-tsq52u9ab0]::-webkit-scrollbar-thumb {
        background-color: var(--scroll-thumb);
        border-radius: 6px;
    }

        .custom-scrollbar[b-tsq52u9ab0]::-webkit-scrollbar-thumb:hover {
            background-color: var(--scroll-thumb-hover);
        }

.horizontal-timeline-scroll[b-tsq52u9ab0] {
    overflow-x: auto;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.horizontal-timeline[b-tsq52u9ab0] {
    display: flex;
    gap: var(--timeline-item-gap);
    padding: 0.5rem 0.25rem;
    min-width: fit-content;
}

.timeline-item[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    width: var(--timeline-item-width);
    height: var(--timeline-item-height);
    border-radius: 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--history-transition);
    cursor: pointer;
    position: relative;
    box-shadow: var(--history-card-shadow);
}

    .timeline-item[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .timeline-item:hover[b-tsq52u9ab0] {
        transform: translateY(-5px) scale(1.03);
        box-shadow: var(--history-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.2);
        z-index: 2;
    }

        .timeline-item:hover[b-tsq52u9ab0]::before {
            transform: scaleX(1);
        }

    .timeline-item.active[b-tsq52u9ab0] {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.4);
        background-color: var(--primary-light);
        z-index: 3;
    }

        .timeline-item.active[b-tsq52u9ab0]::before {
            transform: scaleX(1);
            height: 4px;
        }

.timeline-thumbnail[b-tsq52u9ab0] {
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
    background-color: var(--subtle-bg);
}

    .timeline-thumbnail img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

.timeline-item:hover .timeline-thumbnail img[b-tsq52u9ab0] {
    transform: scale(1.08);
}

.timeline-favicon[b-tsq52u9ab0] {
    position: absolute;
    bottom: 0.625rem;
    right: 0.625rem;
    width: 1.75rem;
    height: 1.75rem;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    transition: all 0.3s ease;
}

    .timeline-favicon img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.timeline-title[b-tsq52u9ab0] {
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.timeline-item.active .timeline-title[b-tsq52u9ab0] {
    color: var(--primary-color);
}

.timeline-details[b-tsq52u9ab0] {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.timeline-browser[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .timeline-browser i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 0.875rem;
        flex-shrink: 0;
    }

.timeline-time[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

    .timeline-time i[b-tsq52u9ab0] {
        font-size: 0.875rem;
    }

/* Grid View */
.history-grid[b-tsq52u9ab0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    animation: fade-in-b-tsq52u9ab0 0.7s ease-out;
}

.history-card[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    border-radius: var(--history-border-radius);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--history-transition);
    position: relative;
    box-shadow: var(--history-card-shadow);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .history-card[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1;
    }

    .history-card:hover[b-tsq52u9ab0] {
        transform: translateY(-8px);
        box-shadow: var(--history-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

        .history-card:hover[b-tsq52u9ab0]::before {
            transform: scaleX(1);
        }

.history-card-header[b-tsq52u9ab0] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-card-browser[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

    .history-card-browser i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 1.125rem;
    }

.history-card-time[b-tsq52u9ab0] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .history-card-time i[b-tsq52u9ab0] {
        font-size: 0.875rem;
    }

.history-card-thumbnail[b-tsq52u9ab0] {
    position: relative;
    height: 180px;
    width: 100%;
    overflow: hidden;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
}

    .history-card-thumbnail img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

.history-card:hover .history-card-thumbnail img[b-tsq52u9ab0] {
    transform: scale(1.08);
}

.history-card-favicon[b-tsq52u9ab0] {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.375rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.history-card:hover .history-card-favicon[b-tsq52u9ab0] {
    transform: scale(1.1);
}

.history-card-favicon img[b-tsq52u9ab0] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.history-card-body[b-tsq52u9ab0] {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.history-card-title[b-tsq52u9ab0] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    font-size: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.history-card-url[b-tsq52u9ab0] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: auto;
}

.history-card-footer[b-tsq52u9ab0] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--text-muted);
    background-color: var(--subtle-bg);
}

.history-card-visits[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

    .history-card-visits i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 0.875rem;
    }

.history-card-actions[b-tsq52u9ab0] {
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
    display: flex;
    gap: 0.375rem;
}

.history-card:hover .history-card-actions[b-tsq52u9ab0] {
    opacity: 1;
    transform: translateY(0);
}

.history-action-btn[b-tsq52u9ab0] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

    .history-action-btn:hover[b-tsq52u9ab0] {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(var(--primary-rgb), 0.2);
    }

/* List View */
.history-list[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    border-radius: var(--history-border-radius);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--history-card-shadow);
    position: relative;
    animation: fade-in-b-tsq52u9ab0 0.7s ease-out;
}

    .history-list[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        height: 4px;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.7));
        border-radius: var(--history-border-radius) var(--history-border-radius) 0 0;
    }

.history-table[b-tsq52u9ab0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .history-table th[b-tsq52u9ab0] {
        text-align: left;
        padding: 1rem 1.125rem;
        background-color: var(--subtle-bg);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
        letter-spacing: 0.02em;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .history-table th:hover[b-tsq52u9ab0] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

        .history-table th i[b-tsq52u9ab0] {
            margin-left: 0.25rem;
            font-size: 0.75rem;
            transition: transform 0.3s ease;
        }

            .history-table th i.fa-sort-up[b-tsq52u9ab0] {
                transform: translateY(1px);
            }

            .history-table th i.fa-sort-down[b-tsq52u9ab0] {
                transform: translateY(-1px);
            }

    .history-table td[b-tsq52u9ab0] {
        padding: 0.875rem 1.125rem;
        font-size: 0.9375rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
        transition: all 0.2s ease;
    }

    .history-table tbody tr[b-tsq52u9ab0] {
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .history-table tbody tr:hover[b-tsq52u9ab0] {
            background-color: var(--primary-light);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

            .history-table tbody tr:hover td[b-tsq52u9ab0] {
                border-bottom-color: transparent;
            }

.history-browser[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .history-browser i[b-tsq52u9ab0] {
        font-size: 1.125rem;
        color: var(--primary-color);
        width: 1.25rem;
        text-align: center;
    }

.history-list-title[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-favicon[b-tsq52u9ab0] {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

.history-url[b-tsq52u9ab0], .history-title[b-tsq52u9ab0] {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .history-url a[b-tsq52u9ab0] {
        color: var(--primary-color);
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .history-url a:hover[b-tsq52u9ab0] {
            text-decoration: underline;
            color: var(--primary-color-hover);
        }

.history-time-info[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .history-time-info div:first-child[b-tsq52u9ab0] {
        font-weight: 600;
        color: var(--text-primary);
    }

    .history-time-info div:last-child[b-tsq52u9ab0] {
        font-size: 0.8125rem;
        color: var(--text-muted);
    }

.history-count[b-tsq52u9ab0] {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.history-actions[b-tsq52u9ab0] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.table-action-btn[b-tsq52u9ab0] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .table-action-btn:hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

/* Pagination */
.history-pagination[b-tsq52u9ab0] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
    gap: 0.25rem;
}

.pagination-btn[b-tsq52u9ab0] {
    background: none;
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

    .pagination-btn:disabled[b-tsq52u9ab0] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-btn:not(:disabled):hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

.pagination-pages[b-tsq52u9ab0] {
    display: flex;
    margin: 0 0.5rem;
    gap: 0.25rem;
}

.pagination-page[b-tsq52u9ab0] {
    background: none;
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

    .pagination-page.active[b-tsq52u9ab0] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

    .pagination-page:not(.active):hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-2px);
    }

/* Load More Button */
.history-load-more[b-tsq52u9ab0] {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

    .history-load-more button[b-tsq52u9ab0] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1.5rem;
        background-color: var(--content-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-divider);
        border-radius: 0.75rem;
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--history-transition);
        box-shadow: var(--history-card-shadow);
    }

        .history-load-more button:hover[b-tsq52u9ab0] {
            background-color: var(--primary-light);
            color: var(--primary-color);
            border-color: rgba(var(--primary-rgb), 0.3);
            transform: translateY(-3px);
            box-shadow: var(--history-card-shadow-hover);
        }

            .history-load-more button:hover i[b-tsq52u9ab0] {
                animation: bounce-b-tsq52u9ab0 0.6s ease infinite;
            }

@keyframes bounce-b-tsq52u9ab0 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* Detail Modal */
.history-detail-modal-overlay[b-tsq52u9ab0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(8px);
    padding: 1.5rem;
    animation: fade-in-b-tsq52u9ab0 0.3s ease;
}

.history-detail-modal[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    border-radius: 1rem;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modal-in-b-tsq52u9ab0 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

    .history-detail-modal[b-tsq52u9ab0]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        z-index: 1;
    }

.history-visits-modal[b-tsq52u9ab0] {
    max-width: 600px;
}

@keyframes modal-in-b-tsq52u9ab0 {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.history-detail-modal-header[b-tsq52u9ab0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.history-detail-modal-title h4[b-tsq52u9ab0] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

    .history-detail-modal-title h4 i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 1.125rem;
    }

.history-detail-modal-close[b-tsq52u9ab0] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--content-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

    .history-detail-modal-close:hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: rotate(90deg);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

.history-detail-modal-body[b-tsq52u9ab0] {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
}

.history-detail-preview[b-tsq52u9ab0] {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-divider);
}

    .history-detail-preview img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.history-detail-favicon[b-tsq52u9ab0] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.375rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

    .history-detail-favicon:hover[b-tsq52u9ab0] {
        transform: scale(1.1);
    }

    .history-detail-favicon img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.history-detail-info[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.history-detail-item[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.history-detail-label[b-tsq52u9ab0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-detail-value[b-tsq52u9ab0] {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.4;
}

    .history-detail-value a[b-tsq52u9ab0] {
        color: var(--primary-color);
        text-decoration: none;
        word-break: break-all;
        transition: all 0.2s ease;
    }

        .history-detail-value a:hover[b-tsq52u9ab0] {
            text-decoration: underline;
            color: var(--primary-color-hover);
        }

.history-detail-meta[b-tsq52u9ab0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 0.5rem;
    background-color: var(--subtle-bg);
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
}

.history-detail-actions[b-tsq52u9ab0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.history-detail-modal-footer[b-tsq52u9ab0] {
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    gap: 0.75rem;
}

/* Visit History Modal */
.history-visit-title[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-divider);
}

.history-visit-title-favicon[b-tsq52u9ab0] {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 0.375rem;
}

    .history-visit-title-favicon img[b-tsq52u9ab0] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.history-visit-title-info[b-tsq52u9ab0] {
    flex: 1;
    min-width: 0;
}

    .history-visit-title-info h5[b-tsq52u9ab0] {
        margin: 0 0 0.375rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.history-visit-title-url[b-tsq52u9ab0] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-visits-list[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.history-visit-item[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

    .history-visit-item:hover[b-tsq52u9ab0] {
        background-color: var(--content-bg);
        border-color: var(--border-divider);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.history-visit-time[b-tsq52u9ab0] {
    flex-shrink: 0;
    width: 7rem;
}

.visit-date[b-tsq52u9ab0] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.visit-time[b-tsq52u9ab0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.history-visit-browser[b-tsq52u9ab0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 7rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

    .history-visit-browser i[b-tsq52u9ab0] {
        color: var(--primary-color);
        font-size: 1rem;
    }

.history-visit-meta[b-tsq52u9ab0] {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .history-visit-meta i[b-tsq52u9ab0] {
        color: var(--primary-color);
    }

.history-visits-empty[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
}

.history-empty-icon[b-tsq52u9ab0] {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.history-visits-empty h4[b-tsq52u9ab0] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.history-visits-empty p[b-tsq52u9ab0] {
    color: var(--text-secondary);
    max-width: 300px;
    margin: 0;
}

/* Button Styles */
.history-btn[b-tsq52u9ab0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.history-btn-primary[b-tsq52u9ab0] {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), 0.9));
    color: white;
    box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
}

    .history-btn-primary:hover[b-tsq52u9ab0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.3);
    }

.history-btn-secondary[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .history-btn-secondary:hover[b-tsq52u9ab0] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

.history-btn-tertiary[b-tsq52u9ab0] {
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
}

    .history-btn-tertiary:hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

/* Empty State */
.device-empty-content[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    background-color: var(--subtle-bg);
    border-radius: 1rem;
    border: 1px dashed var(--border-divider);
    animation: fade-in-b-tsq52u9ab0 0.6s ease-out;
}

.device-empty-icon[b-tsq52u9ab0] {
    font-size: 3.5rem;
    color: rgba(var(--text-muted-rgb), 0.6);
    margin-bottom: 1.5rem;
    animation: pulse-b-tsq52u9ab0 3s ease-in-out infinite;
}

@keyframes pulse-b-tsq52u9ab0 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.device-empty-content h4[b-tsq52u9ab0] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.device-empty-content p[b-tsq52u9ab0] {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    max-width: 35rem;
    line-height: 1.5;
}

.device-btn[b-tsq52u9ab0] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-divider);
    background-color: var(--content-bg);
    color: var(--text-primary);
    box-shadow: var(--history-card-shadow);
}

    .device-btn:hover[b-tsq52u9ab0] {
        transform: translateY(-3px);
        box-shadow: var(--history-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

.device-btn-secondary[b-tsq52u9ab0] {
    background-color: var(--content-bg);
    color: var(--text-secondary);
}

    .device-btn-secondary:hover[b-tsq52u9ab0] {
        background-color: var(--primary-light);
        color: var(--primary-color);
    }

/* Loading State */
.device-loading-state[b-tsq52u9ab0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    animation: fade-in-b-tsq52u9ab0 0.6s ease-out;
}

.device-loading-spinner[b-tsq52u9ab0] {
    width: 3.5rem;
    height: 3.5rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-tsq52u9ab0 1.2s infinite linear;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.1);
}

@keyframes spin-b-tsq52u9ab0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.device-loading-state p[b-tsq52u9ab0] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .history-grid[b-tsq52u9ab0] {
        grid-template-columns: repeat(3, 1fr);
    }

    .history-detail-modal[b-tsq52u9ab0] {
        max-width: 95vw;
    }

    .timeline-item[b-tsq52u9ab0] {
        width: 180px;
        --timeline-item-width: 180px;
    }
}

@media (max-width: 992px) {
    .history-stats[b-tsq52u9ab0] {
        grid-template-columns: repeat(3, 1fr);
    }

    .history-grid[b-tsq52u9ab0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .history-detail-meta[b-tsq52u9ab0] {
        grid-template-columns: 1fr;
    }

    .device-tab-actions[b-tsq52u9ab0] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-tsq52u9ab0] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .device-view-toggle[b-tsq52u9ab0] {
        align-self: flex-end;
    }

    .timeline-item[b-tsq52u9ab0] {
        width: 160px;
        --timeline-item-width: 160px;
    }
}

@media (max-width: 768px) {
    .history-stats[b-tsq52u9ab0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .history-grid[b-tsq52u9ab0] {
        grid-template-columns: 1fr;
    }

    .device-search-box[b-tsq52u9ab0],
    .device-filter-dropdown[b-tsq52u9ab0],
    .device-date-filter[b-tsq52u9ab0],
    .device-view-toggle[b-tsq52u9ab0],
    .history-count-selector[b-tsq52u9ab0] {
        width: 100%;
    }

    .history-count-selector[b-tsq52u9ab0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .timeline-item[b-tsq52u9ab0] {
        width: 140px;
        --timeline-item-width: 140px;
    }

    .history-table th:nth-child(3)[b-tsq52u9ab0],
    .history-table td:nth-child(3)[b-tsq52u9ab0] {
        display: none;
    }

    .history-detail-actions[b-tsq52u9ab0] {
        flex-direction: column;
    }

        .history-detail-actions .history-btn[b-tsq52u9ab0] {
            width: 100%;
        }

    .pagination-pages[b-tsq52u9ab0] {
        display: none;
    }

    .pagination-btn[b-tsq52u9ab0] {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 576px) {
    .history-stats[b-tsq52u9ab0] {
        grid-template-columns: 1fr;
    }

    .history-table th:nth-child(4)[b-tsq52u9ab0],
    .history-table td:nth-child(4)[b-tsq52u9ab0] {
        display: none;
    }

    .history-detail-modal[b-tsq52u9ab0] {
        width: 95%;
    }

    .history-card-thumbnail[b-tsq52u9ab0] {
        height: 150px;
    }

    .timeline-item[b-tsq52u9ab0] {
        width: 130px;
        --timeline-item-width: 130px;
    }

    .history-detail-preview[b-tsq52u9ab0] {
        height: 200px;
    }

    .history-visit-browser[b-tsq52u9ab0] {
        width: auto;
    }

    .history-visit-item[b-tsq52u9ab0] {
        flex-wrap: wrap;
    }

    .history-visit-meta[b-tsq52u9ab0] {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceKeystrokesTab.razor.rz.scp.css */
/* ====== Enhanced Device Keystrokes Tab Styles ====== */

.device-tab-container[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: fade-in 0.4s ease-out;
}

.device-tab-header[b-p9e4ebm7wl] {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    padding-bottom: 1rem;
}

    .device-tab-header h3[b-p9e4ebm7wl] {
        margin: 0 0 0.25rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .device-tab-header h3 i[b-p9e4ebm7wl] {
            color: var(--primary-color);
        }

    .device-tab-header p[b-p9e4ebm7wl] {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        margin: 0 0 1rem 0;
    }

.device-tab-actions[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.device-search-box[b-p9e4ebm7wl] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

    .device-search-box input[b-p9e4ebm7wl] {
        width: 100%;
        padding: 0.625rem 2.25rem 0.625rem 2.25rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: var(--hover-transition);
    }

        .device-search-box input:focus[b-p9e4ebm7wl] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

    .device-search-box i[b-p9e4ebm7wl] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
    }

.device-clear-search[b-p9e4ebm7wl] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .device-clear-search:hover[b-p9e4ebm7wl] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

.device-filter-dropdown[b-p9e4ebm7wl] {
    position: relative;
    min-width: 120px;
}

    .device-filter-dropdown select[b-p9e4ebm7wl] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1em;
        padding: 0.625rem 2rem 0.625rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        width: 100%;
        transition: var(--hover-transition);
    }

        .device-filter-dropdown select:focus[b-p9e4ebm7wl] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

.device-view-toggle[b-p9e4ebm7wl] {
    display: flex;
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
    overflow: hidden;
}

    .device-view-toggle button[b-p9e4ebm7wl] {
        padding: 0.625rem 0.75rem;
        background-color: var(--input-bg);
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .device-view-toggle button:hover[b-p9e4ebm7wl] {
            background-color: var(--subtle-bg);
            color: var(--text-primary);
        }

        .device-view-toggle button.active[b-p9e4ebm7wl] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

.device-export-button .device-btn[b-p9e4ebm7wl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--hover-transition);
}

.auto-refresh-toggle[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.toggle-switch[b-p9e4ebm7wl] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

    .toggle-switch input[b-p9e4ebm7wl] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-p9e4ebm7wl] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--text-secondary-rgb), 0.2);
    transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

    .toggle-slider[b-p9e4ebm7wl]:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }

.toggle-switch input:checked + .toggle-slider[b-p9e4ebm7wl] {
    background: var(--primary-gradient);
}

    .toggle-switch input:checked + .toggle-slider[b-p9e4ebm7wl]:before {
        transform: translateX(18px);
    }

/* ====== Keystroke Stats Cards ====== */
.keystrokes-container[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.keystroke-summary[b-p9e4ebm7wl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.keystroke-stats-card[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--card-transition);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

    .keystroke-stats-card:hover[b-p9e4ebm7wl] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.keystroke-stats-icon[b-p9e4ebm7wl] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.25rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.keystroke-stats-card:hover .keystroke-stats-icon[b-p9e4ebm7wl] {
    transform: scale(1.1);
}

.keystroke-stats-content[b-p9e4ebm7wl] {
    flex: 1;
}

.keystroke-stats-value[b-p9e4ebm7wl] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.keystroke-stats-label[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ====== App Usage Summary ====== */
.app-usage-summary[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

    .app-usage-summary h4[b-p9e4ebm7wl] {
        margin: 0 0 1rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.app-usage-bars[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-usage-bar[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-usage-info[b-p9e4ebm7wl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-usage-name[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .app-usage-name:hover[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

    .app-usage-name i[b-p9e4ebm7wl] {
        color: var(--primary-color);
        font-size: 1rem;
    }

.app-usage-count[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.app-usage-progress[b-p9e4ebm7wl] {
    height: 8px;
    background-color: rgba(var(--text-secondary-rgb), 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.app-usage-progress-fill[b-p9e4ebm7wl] {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 4px;
    transition: width 1s ease-out;
}

.app-usage-percentage[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    align-self: flex-end;
}

/* ====== Filter Info Section ====== */
.keystroke-filter-info[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.keystroke-active-filters[b-p9e4ebm7wl] {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.keystroke-filter-label[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.keystroke-filter-tags[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.keystroke-filter-tag[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--primary-light);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    transition: all 0.2s ease;
}

    .keystroke-filter-tag:hover[b-p9e4ebm7wl] {
        background-color: rgba(var(--primary-rgb), 0.12);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

    .keystroke-filter-tag button[b-p9e4ebm7wl] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        background: none;
        border: none;
        border-radius: 50%;
        color: var(--primary-color);
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .keystroke-filter-tag button:hover[b-p9e4ebm7wl] {
            background-color: rgba(var(--primary-rgb), 0.2);
            transform: rotate(90deg);
        }

    .keystroke-filter-tag.search-filter[b-p9e4ebm7wl] {
        background-color: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary-color);
        color: var(--primary-color);
        font-weight: 500;
    }

.keystroke-clear-filters[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .keystroke-clear-filters:hover[b-p9e4ebm7wl] {
        background-color: var(--danger-light);
        color: var(--danger);
        border-color: rgba(var(--danger-rgb), 0.2);
    }

.keystroke-results-count[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-match-count[b-p9e4ebm7wl] {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 600;
}

/* Enhanced search styles */
.search-highlight[b-p9e4ebm7wl] {
    background-color: rgba(var(--primary-rgb), 0.2);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.125rem 0.125rem;
    display: inline-block;
    margin: -0.125rem 0;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.4);
}

    .search-highlight.strong[b-p9e4ebm7wl] {
        background-color: rgba(var(--primary-rgb), 0.3);
        font-weight: 700;
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.5);
    }

.search-instruction[b-p9e4ebm7wl] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    background-color: var(--content-bg);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.activity-card.search-highlight[b-p9e4ebm7wl],
.sequence-card.search-highlight[b-p9e4ebm7wl] {
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}

.sequence-key.search-match[b-p9e4ebm7wl] {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.timeline-row.search-match[b-p9e4ebm7wl] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.device-search-box.search-active input[b-p9e4ebm7wl] {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
}

/* ====== Timeline View ====== */
.keystroke-timeline-container[b-p9e4ebm7wl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.activity-card[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

    .activity-card:hover[b-p9e4ebm7wl] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.activity-card-header[b-p9e4ebm7wl] {
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.activity-app-info[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .activity-app-info i[b-p9e4ebm7wl] {
        color: var(--primary-color);
        font-size: 1.125rem;
    }

.activity-app-details[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.activity-app-name[b-p9e4ebm7wl] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .activity-app-name:hover[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.activity-window-title[b-p9e4ebm7wl] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.activity-time[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

    .activity-time i[b-p9e4ebm7wl] {
        font-size: 0.875rem;
    }

.activity-duration[b-p9e4ebm7wl] {
    font-weight: 500;
    color: var(--text-secondary);
}

.activity-card-content[b-p9e4ebm7wl] {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-text[b-p9e4ebm7wl] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 150px;
    overflow-y: auto;
    font-family: var(--monospace-font, monospace);
}

    .activity-text.text-password[b-p9e4ebm7wl] {
        color: var(--danger);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .activity-text.text-password i[b-p9e4ebm7wl] {
            color: var(--danger);
        }

/* Screenshot integration in activity card */
.activity-screenshot[b-p9e4ebm7wl] {
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--subtle-bg);
    margin-top: 0.5rem;
}

.activity-screenshot-header[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

    .activity-screenshot-header i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.screenshot-time[b-p9e4ebm7wl] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-screenshot-thumbnail[b-p9e4ebm7wl] {
    height: 150px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background-color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .activity-screenshot-thumbnail img[b-p9e4ebm7wl] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .activity-screenshot-thumbnail:hover img[b-p9e4ebm7wl] {
        transform: scale(1.05);
    }

.screenshot-placeholder[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: rgba(255, 255, 255, 0.4);
}

    .screenshot-placeholder i[b-p9e4ebm7wl] {
        font-size: 2rem;
    }

.screenshot-overlay[b-p9e4ebm7wl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .screenshot-overlay i[b-p9e4ebm7wl] {
        color: white;
        font-size: 1.5rem;
    }

.activity-screenshot-thumbnail:hover .screenshot-overlay[b-p9e4ebm7wl] {
    opacity: 1;
}

.activity-card-footer[b-p9e4ebm7wl] {
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-stats[b-p9e4ebm7wl] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .activity-stats span[b-p9e4ebm7wl] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .activity-stats i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.activity-actions[b-p9e4ebm7wl] {
    display: flex;
    gap: 0.5rem;
}

.activity-action-btn[b-p9e4ebm7wl] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .activity-action-btn:hover[b-p9e4ebm7wl] {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

/* ====== Keystroke Viewer Mode ====== */
.keystroke-viewer-container[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sequence-card[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-sm);
}

    .sequence-card:hover[b-p9e4ebm7wl] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.sequence-header[b-p9e4ebm7wl] {
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sequence-app[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

    .sequence-app i[b-p9e4ebm7wl] {
        color: var(--primary-color);
        font-size: 1.125rem;
    }

    .sequence-app span[b-p9e4ebm7wl] {
        cursor: pointer;
        transition: color 0.2s ease;
    }

        .sequence-app span:hover[b-p9e4ebm7wl] {
            color: var(--primary-color);
        }

.sequence-time[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.sequence-content[b-p9e4ebm7wl] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sequence-visualizer[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.sequence-key[b-p9e4ebm7wl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-family: var(--monospace-font, monospace);
    transition: all 0.2s ease;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
}

    .sequence-key:hover[b-p9e4ebm7wl] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .sequence-key.key-down[b-p9e4ebm7wl] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

    .sequence-key.key-up[b-p9e4ebm7wl] {
        color: var(--text-secondary);
    }

    .sequence-key.modifier-down[b-p9e4ebm7wl] {
        background-color: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
        border-color: rgba(139, 92, 246, 0.2);
    }

    .sequence-key.modifier-up[b-p9e4ebm7wl] {
        color: #7c3aed;
        opacity: 0.7;
    }

    .sequence-key.special-key-down[b-p9e4ebm7wl] {
        background-color: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.2);
    }

    .sequence-key.special-key-up[b-p9e4ebm7wl] {
        color: #f59e0b;
        opacity: 0.7;
    }

.key-name[b-p9e4ebm7wl] {
    font-weight: 600;
}

.key-action[b-p9e4ebm7wl] {
    font-size: 0.5rem;
    background-color: rgba(0, 0, 0, 0.1);
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.key-character[b-p9e4ebm7wl] {
    font-weight: 700;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.05);
}

.key-time[b-p9e4ebm7wl] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.key-duration[b-p9e4ebm7wl] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-style: italic;
}

.active-modifiers[b-p9e4ebm7wl] {
    display: flex;
    gap: 0.25rem;
}

.active-modifier[b-p9e4ebm7wl] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.25rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
    color: #7c3aed;
}

.sequence-text[b-p9e4ebm7wl] {
    padding: 1rem;
    background-color: var(--content-bg);
    border: 1px dashed var(--border-divider);
    border-radius: 0.5rem;
}

.text-label[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.text-content[b-p9e4ebm7wl] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: var(--monospace-font, monospace);
    word-break: break-word;
}

/* Screenshot integration in sequence card */
.sequence-screenshot[b-p9e4ebm7wl] {
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--subtle-bg);
}

.sequence-screenshot-header[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

    .sequence-screenshot-header i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.sequence-screenshot-thumbnail[b-p9e4ebm7wl] {
    height: 180px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background-color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sequence-screenshot-thumbnail img[b-p9e4ebm7wl] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .sequence-screenshot-thumbnail:hover img[b-p9e4ebm7wl] {
        transform: scale(1.05);
    }

.sequence-footer[b-p9e4ebm7wl] {
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sequence-stats[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .sequence-stats span[b-p9e4ebm7wl] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .sequence-stats i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.sequence-actions[b-p9e4ebm7wl] {
    display: flex;
    gap: 0.5rem;
}

.sequence-action-btn[b-p9e4ebm7wl] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .sequence-action-btn:hover[b-p9e4ebm7wl] {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

/* ====== Key Sequence Modal ====== */
.keystroke-modal-overlay[b-p9e4ebm7wl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade-in 0.3s ease;
    padding: 1rem;
}

.keystroke-modal[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.keystroke-modal-header[b-p9e4ebm7wl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .keystroke-modal-header h4[b-p9e4ebm7wl] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.keystroke-modal-close[b-p9e4ebm7wl] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1rem;
}

    .keystroke-modal-close:hover[b-p9e4ebm7wl] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.keystroke-modal-body[b-p9e4ebm7wl] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.key-sequence-section[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.key-sequence-label[b-p9e4ebm7wl] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.key-sequence-process[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

    .key-sequence-process i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.key-sequence-window[b-p9e4ebm7wl] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.4;
    padding: 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    word-break: break-word;
}

.key-sequence-stats[b-p9e4ebm7wl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    padding: 1rem;
}

.key-sequence-stat[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.key-sequence-stat-label[b-p9e4ebm7wl] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.key-sequence-stat-value[b-p9e4ebm7wl] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 600;
}

.key-sequence-content[b-p9e4ebm7wl] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    white-space: pre-wrap;
    font-family: var(--monospace-font, monospace);
    max-height: 150px;
    overflow-y: auto;
    word-break: break-word;
}

/* Screenshot in sequence detail */
.key-sequence-screenshot[b-p9e4ebm7wl] {
    position: relative;
    height: 250px;
    background-color: #121212;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

    .key-sequence-screenshot img[b-p9e4ebm7wl] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .key-sequence-screenshot:hover img[b-p9e4ebm7wl] {
        transform: scale(1.05);
    }

    .key-sequence-screenshot:hover[b-p9e4ebm7wl]::after {
        content: "\f002";
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2rem;
        background-color: rgba(0, 0, 0, 0.5);
        width: 4rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

.screenshot-info[b-p9e4ebm7wl] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 0.75rem;
}

    .screenshot-info span[b-p9e4ebm7wl] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .screenshot-info i[b-p9e4ebm7wl] {
        color: rgba(var(--primary-rgb), 0.8);
    }

.screenshot-placeholder.large[b-p9e4ebm7wl] {
    height: 100%;
    padding: 3rem;
}

    .screenshot-placeholder.large i[b-p9e4ebm7wl] {
        font-size: 3rem;
    }

    .screenshot-placeholder.large span[b-p9e4ebm7wl] {
        margin-top: 1rem;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.6);
    }

.key-sequence-events[b-p9e4ebm7wl] {
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    overflow: hidden;
}

.timeline-header[b-p9e4ebm7wl] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
}

.timeline-col[b-p9e4ebm7wl] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.timeline-row[b-p9e4ebm7wl] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-divider);
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
}

    .timeline-row:last-child[b-p9e4ebm7wl] {
        border-bottom: none;
    }

    .timeline-row:hover[b-p9e4ebm7wl] {
        background-color: var(--primary-light);
    }

    .timeline-row.key-down[b-p9e4ebm7wl] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

    .timeline-row.key-up[b-p9e4ebm7wl] {
        background-color: transparent;
    }

    .timeline-row.modifier-down[b-p9e4ebm7wl] {
        background-color: rgba(139, 92, 246, 0.05);
    }

    .timeline-row.modifier-up[b-p9e4ebm7wl] {
        background-color: transparent;
    }

    .timeline-row.special-key-down[b-p9e4ebm7wl] {
        background-color: rgba(245, 158, 11, 0.05);
    }

    .timeline-row.special-key-up[b-p9e4ebm7wl] {
        background-color: transparent;
    }

.hold-duration[b-p9e4ebm7wl] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-left: 0.25rem;
}

.empty-mods[b-p9e4ebm7wl] {
    color: var(--text-muted);
}

.keystroke-modal-footer[b-p9e4ebm7wl] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* ====== Screenshot Modal ====== */
.screenshot-modal[b-p9e4ebm7wl] {
    background-color: var(--content-bg);
    border-radius: 1rem;
    width: 100%;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6);
    animation: modal-zoom-in-b-p9e4ebm7wl 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-zoom-in-b-p9e4ebm7wl {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.screenshot-modal-header[b-p9e4ebm7wl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.screenshot-modal-info h4[b-p9e4ebm7wl] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.screenshot-modal-details[b-p9e4ebm7wl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .screenshot-modal-details span[b-p9e4ebm7wl] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .screenshot-modal-details i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

.app-detail[b-p9e4ebm7wl] {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-modal-actions[b-p9e4ebm7wl] {
    display: flex;
    gap: 0.75rem;
}

.screenshot-modal-btn[b-p9e4ebm7wl] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    border: 1px solid var(--border-divider);
    background-color: var(--content-bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .screenshot-modal-btn:hover[b-p9e4ebm7wl] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

.screenshot-modal-body[b-p9e4ebm7wl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #121212;
}

.screenshot-full-image[b-p9e4ebm7wl] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

    .screenshot-full-image img[b-p9e4ebm7wl] {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 0.25rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    }

.fullsize-loading[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.fullsize-spinner[b-p9e4ebm7wl] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin-b-p9e4ebm7wl 1s infinite linear;
}

@keyframes spin-b-p9e4ebm7wl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.screenshot-modal-footer[b-p9e4ebm7wl] {
    padding: 1rem 1.5rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
}

.screenshot-actions[b-p9e4ebm7wl] {
    display: flex;
    justify-content: center;
}

.screenshot-timing-info[b-p9e4ebm7wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

    .screenshot-timing-info i[b-p9e4ebm7wl] {
        color: var(--primary-color);
    }

/* ====== Loading State ====== */
.device-loading-state[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.device-loading-spinner[b-p9e4ebm7wl] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-p9e4ebm7wl 1s linear infinite;
    margin-bottom: 1.5rem;
}

.device-loading-state p[b-p9e4ebm7wl] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

/* ====== Empty State ====== */
.device-empty-content[b-p9e4ebm7wl],
.empty-search-results[b-p9e4ebm7wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 0.75rem;
    background-color: var(--subtle-bg);
    border: 1px dashed var(--border-divider);
}

.device-empty-icon[b-p9e4ebm7wl],
.empty-search-icon[b-p9e4ebm7wl] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.device-empty-content h4[b-p9e4ebm7wl],
.empty-search-results h4[b-p9e4ebm7wl] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.device-empty-content p[b-p9e4ebm7wl],
.empty-search-results p[b-p9e4ebm7wl] {
    color: var(--text-secondary);
    max-width: 300px;
    margin: 0 0 1.5rem 0;
}

.clear-filters-btn[b-p9e4ebm7wl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .clear-filters-btn:hover[b-p9e4ebm7wl] {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

/* ====== Auto-Refresh Experience ====== */
/* Typing indicator for auto-refresh */
.auto-refresh-indicator[b-p9e4ebm7wl] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--primary-gradient);
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-md);
    z-index: 100;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 0.875rem;
    font-weight: 500;
}

    .auto-refresh-indicator.visible[b-p9e4ebm7wl] {
        opacity: 1;
        transform: translateY(0);
    }

    .auto-refresh-indicator i[b-p9e4ebm7wl] {
        animation: pulse 1s infinite alternate;
    }

/* Typing dots animation */
.typing-dots[b-p9e4ebm7wl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 2rem;
}

    .typing-dots span[b-p9e4ebm7wl] {
        display: inline-block;
        width: 0.375rem;
        height: 0.375rem;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        margin: 0 0.125rem;
        animation: typing-dots-pulse-b-p9e4ebm7wl 1.4s infinite ease-in-out;
    }

        .typing-dots span:nth-child(1)[b-p9e4ebm7wl] {
            animation-delay: 0s;
        }

        .typing-dots span:nth-child(2)[b-p9e4ebm7wl] {
            animation-delay: 0.2s;
        }

        .typing-dots span:nth-child(3)[b-p9e4ebm7wl] {
            animation-delay: 0.4s;
        }

@keyframes typing-dots-pulse-b-p9e4ebm7wl {
    0%, 100% {
        transform: scale(0.6);
        opacity: 0.6;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Add smooth transitions to containers to avoid jumps */
.keystroke-timeline-container[b-p9e4ebm7wl],
.keystroke-viewer-container[b-p9e4ebm7wl] {
    transition: height 0.3s ease;
    min-height: 100px;
    height: auto;
    position: relative;
    will-change: contents;
}

/* New content fade in */
.sequence-card[b-p9e4ebm7wl],
.activity-card[b-p9e4ebm7wl] {
    transition: all 0.3s ease;
    opacity: 1;
}

    .sequence-card.new-data[b-p9e4ebm7wl],
    .activity-card.new-data[b-p9e4ebm7wl] {
        animation: new-content-highlight-b-p9e4ebm7wl 2s ease-out;
    }

@keyframes new-content-highlight-b-p9e4ebm7wl {
    0% {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
        transform: translateY(-5px);
    }

    100% {
        border-color: var(--border-divider);
        box-shadow: var(--shadow-sm);
        transform: translateY(0);
    }
}

/* Ghost loading placeholders during refresh */
.loading-placeholder[b-p9e4ebm7wl] {
    background: linear-gradient(90deg, var(--subtle-bg) 0%, var(--content-bg) 50%, var(--subtle-bg) 100%);
    background-size: 200% 100%;
    animation: loading-gradient-b-p9e4ebm7wl 1.5s infinite;
    border-radius: 0.25rem;
    height: 1rem;
    margin: 0.5rem 0;
}

@keyframes loading-gradient-b-p9e4ebm7wl {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Refreshing animation for cards */
.refreshing-card[b-p9e4ebm7wl] {
    position: relative;
    overflow: hidden;
}

    .refreshing-card[b-p9e4ebm7wl]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.1), transparent);
        transform: translateX(-100%);
        animation: shine-b-p9e4ebm7wl 1.5s infinite;
        z-index: 1;
    }

@keyframes shine-b-p9e4ebm7wl {
    100% {
        transform: translateX(100%);
    }
}

/* Keystrokes container transition when updating */
.keystrokes-container[b-p9e4ebm7wl] {
    position: relative;
    scroll-behavior: smooth;
}

    .keystrokes-container.refreshing[b-p9e4ebm7wl]::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-gradient);
        animation: progress-bar-b-p9e4ebm7wl 2s ease-in-out;
    }

@keyframes progress-bar-b-p9e4ebm7wl {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Prevent scrolling jumps during refresh by maintaining container heights */
.keystroke-stats-card.maintain-height[b-p9e4ebm7wl],
.app-usage-summary.maintain-height[b-p9e4ebm7wl],
.sequence-card.maintain-height[b-p9e4ebm7wl],
.activity-card.maintain-height[b-p9e4ebm7wl] {
    min-height: var(--prev-height, auto);
}

/* Clipboard feedback animation */
@keyframes copy-success-b-p9e4ebm7wl {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.copy-success[b-p9e4ebm7wl] {
    animation: copy-success-b-p9e4ebm7wl 0.5s ease;
    background-color: var(--success-light) !important;
    color: var(--success) !important;
}

/* ====== Responsive Styles ====== */
@media (max-width: 1200px) {
    .keystroke-summary[b-p9e4ebm7wl] {
        grid-template-columns: repeat(3, 1fr);
    }

    .keystroke-timeline-container[b-p9e4ebm7wl] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    .keystroke-summary[b-p9e4ebm7wl] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .timeline-header[b-p9e4ebm7wl], .timeline-row[b-p9e4ebm7wl] {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .device-tab-actions[b-p9e4ebm7wl] {
        flex-direction: column;
        align-items: flex-start;
    }

    .device-search-box[b-p9e4ebm7wl],
    .device-filter-dropdown[b-p9e4ebm7wl],
    .device-view-toggle[b-p9e4ebm7wl],
    .device-export-button[b-p9e4ebm7wl],
    .auto-refresh-toggle[b-p9e4ebm7wl] {
        width: 100%;
    }

    .keystroke-summary[b-p9e4ebm7wl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .keystroke-timeline-container[b-p9e4ebm7wl] {
        grid-template-columns: 1fr;
    }

    .activity-app-info[b-p9e4ebm7wl] {
        flex: 1;
    }

    .activity-window-title[b-p9e4ebm7wl] {
        max-width: 100%;
    }

    .activity-stats[b-p9e4ebm7wl] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sequence-header[b-p9e4ebm7wl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .key-sequence-stats[b-p9e4ebm7wl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-header[b-p9e4ebm7wl], .timeline-row[b-p9e4ebm7wl] {
        grid-template-columns: 100px 100px 120px 1fr;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .device-tab-header h3[b-p9e4ebm7wl] {
        font-size: 1.125rem;
    }

    .device-tab-header p[b-p9e4ebm7wl] {
        font-size: 0.875rem;
    }

    .keystroke-summary[b-p9e4ebm7wl] {
        grid-template-columns: 1fr;
    }

    .sequence-stats[b-p9e4ebm7wl] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .sequence-footer[b-p9e4ebm7wl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .sequence-actions[b-p9e4ebm7wl] {
        align-self: flex-end;
    }

    .key-sequence-stats[b-p9e4ebm7wl] {
        grid-template-columns: 1fr;
    }

    .timeline-header[b-p9e4ebm7wl], .timeline-row[b-p9e4ebm7wl] {
        grid-template-columns: 80px 80px 100px 1fr;
        font-size: 0.6875rem;
        padding: 0.5rem;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .app-usage-info[b-p9e4ebm7wl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .app-usage-percentage[b-p9e4ebm7wl] {
        align-self: flex-start;
    }

    .sequence-text[b-p9e4ebm7wl], .key-sequence-content[b-p9e4ebm7wl] {
        font-size: 0.875rem;
    }

    .timeline-header[b-p9e4ebm7wl], .timeline-row[b-p9e4ebm7wl] {
        grid-template-columns: 1fr 1fr;
    }

        .timeline-header .timeline-col:nth-child(3)[b-p9e4ebm7wl],
        .timeline-header .timeline-col:nth-child(4)[b-p9e4ebm7wl],
        .timeline-row .timeline-col:nth-child(3)[b-p9e4ebm7wl],
        .timeline-row .timeline-col:nth-child(4)[b-p9e4ebm7wl] {
            display: none;
        }

    .keystroke-modal-footer[b-p9e4ebm7wl] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .keystroke-modal-footer .device-btn[b-p9e4ebm7wl] {
            width: 100%;
        }
}

@media (max-width: 400px) {
    .device-tab-actions[b-p9e4ebm7wl] {
        gap: 0.5rem;
    }

    .device-tab-header h3[b-p9e4ebm7wl] {
        font-size: 1rem;
    }

    .keystroke-stats-card[b-p9e4ebm7wl] {
        padding: 0.75rem;
    }

    .keystroke-stats-icon[b-p9e4ebm7wl] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .keystroke-stats-value[b-p9e4ebm7wl] {
        font-size: 1.25rem;
    }

    .keystroke-stats-label[b-p9e4ebm7wl] {
        font-size: 0.75rem;
    }

    .app-usage-summary[b-p9e4ebm7wl],
    .key-sequence-window[b-p9e4ebm7wl],
    .key-sequence-content[b-p9e4ebm7wl] {
        padding: 0.75rem;
    }

    .activity-card-header[b-p9e4ebm7wl],
    .activity-card-content[b-p9e4ebm7wl],
    .activity-card-footer[b-p9e4ebm7wl],
    .sequence-header[b-p9e4ebm7wl],
    .sequence-content[b-p9e4ebm7wl],
    .sequence-footer[b-p9e4ebm7wl] {
        padding: 0.75rem;
    }

    .timeline-header[b-p9e4ebm7wl], .timeline-row[b-p9e4ebm7wl] {
        font-size: 0.625rem;
        padding: 0.375rem;
    }

    .keystroke-modal-body[b-p9e4ebm7wl] {
        padding: 0.75rem;
        gap: 0.75rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceLiveDashboard.razor.rz.scp.css */
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceOverviewTab.razor.rz.scp.css */
/* ====== Device Overview Tab Styles ====== */

.device-overview-container[b-pwv0jqdidb] {
    animation: fade-slide-in-b-pwv0jqdidb 0.4s ease-in-out;
}

@keyframes fade-slide-in-b-pwv0jqdidb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Header Styling with Status Banner */
.device-refresh-banner[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-top: 0.75rem;
    transition: all 0.3s ease;
}

    .device-refresh-banner.device-offline-banner[b-pwv0jqdidb] {
        background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.08) 0%, rgba(var(--danger-rgb), 0.03) 100%);
        border: 1px solid rgba(var(--danger-rgb), 0.12);
    }

.device-refresh-status[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.device-refresh-indicator[b-pwv0jqdidb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--danger);
    flex-shrink: 0;
}

    .device-refresh-indicator.pulse-online[b-pwv0jqdidb] {
        background-color: var(--success);
        animation: pulse-success-b-pwv0jqdidb 2s infinite;
    }

.device-refresh-info[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.device-refresh-label[b-pwv0jqdidb] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.device-refresh-time[b-pwv0jqdidb] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.device-refresh-btn[b-pwv0jqdidb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--content-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-refresh-btn:hover[b-pwv0jqdidb] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: rotate(180deg);
    }

/* Grid Layout */
.device-overview-grid[b-pwv0jqdidb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
    .device-overview-grid[b-pwv0jqdidb] {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
}

@media (max-width: 992px) {
    .device-overview-grid[b-pwv0jqdidb] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .device-overview-grid[b-pwv0jqdidb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .device-refresh-status[b-pwv0jqdidb] {
        gap: 0.5rem;
    }

    .device-refresh-banner[b-pwv0jqdidb] {
        padding: 0.625rem 0.75rem;
    }

    .device-refresh-btn[b-pwv0jqdidb] {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 400px) {
    .device-refresh-time[b-pwv0jqdidb] {
        font-size: 0.75rem;
    }

    .device-refresh-label[b-pwv0jqdidb] {
        font-size: 0.875rem;
    }

    .device-refresh-btn[b-pwv0jqdidb] {
        width: 28px;
        height: 28px;
    }
}

/* Card Styling */
.device-overview-card[b-pwv0jqdidb] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transform-origin: center;
    will-change: transform, box-shadow;
}

    .device-overview-card:hover[b-pwv0jqdidb] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: rgba(var(--primary-rgb), 0.25);
    }

    .device-overview-card.system-info[b-pwv0jqdidb] {
        background-image: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.01) 100%);
    }

    .device-overview-card.resource-metrics[b-pwv0jqdidb] {
        background-image: linear-gradient(135deg, rgba(var(--info-rgb), 0.05) 0%, rgba(var(--info-rgb), 0.01) 100%);
    }

    .device-overview-card.recent-activity[b-pwv0jqdidb] {
        background-image: linear-gradient(135deg, rgba(var(--warning-rgb), 0.05) 0%, rgba(var(--warning-rgb), 0.01) 100%);
    }

    .device-overview-card.connection-timeline[b-pwv0jqdidb] {
        background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.01) 100%);
    }

    .device-overview-card.media-monitoring[b-pwv0jqdidb] {
        background-image: linear-gradient(135deg, rgba(var(--success-rgb), 0.05) 0%, rgba(var(--success-rgb), 0.01) 100%);
    }

.device-card-header[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

.device-card-icon[b-pwv0jqdidb] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--content-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: 1.125rem;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.device-overview-card:hover .device-card-icon[b-pwv0jqdidb] {
    transform: scale(1.1);
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.system-info .device-card-icon[b-pwv0jqdidb] {
    color: var(--primary-color);
}

.resource-metrics .device-card-icon[b-pwv0jqdidb] {
    color: var(--info);
}

.recent-activity .device-card-icon[b-pwv0jqdidb] {
    color: var(--warning);
}

.connection-timeline .device-card-icon[b-pwv0jqdidb] {
    color: #9333ea; /* Purple */
}

.media-monitoring .device-card-icon[b-pwv0jqdidb] {
    color: var(--success);
}

.device-card-header h4[b-pwv0jqdidb] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.device-connection-badge[b-pwv0jqdidb] {
    padding: 0.375rem 0.75rem;
    border-radius: 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .device-connection-badge[b-pwv0jqdidb]::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 0.25rem;
    }

    .device-connection-badge.status-online[b-pwv0jqdidb] {
        background-color: var(--scale-online-bg);
        color: var(--scale-online);
    }

        .device-connection-badge.status-online[b-pwv0jqdidb]::before {
            background-color: var(--scale-online);
            box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.5);
            animation: pulse-success-b-pwv0jqdidb 2s infinite;
        }

    .device-connection-badge.status-pending[b-pwv0jqdidb] {
        background-color: var(--scale-stale-bg);
        color: var(--scale-stale);
    }

        .device-connection-badge.status-pending[b-pwv0jqdidb]::before {
            background-color: var(--scale-stale);
            animation: blink-b-pwv0jqdidb 1s ease-in-out infinite alternate;
        }

    .device-connection-badge.status-offline[b-pwv0jqdidb] {
        background-color: var(--scale-offline-bg);
        color: var(--scale-offline);
    }

        .device-connection-badge.status-offline[b-pwv0jqdidb]::before {
            background-color: var(--scale-offline);
        }

.last-activity-badge[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--content-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-divider);
}

.device-card-body[b-pwv0jqdidb] {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* System Info Card */
.device-info-grid[b-pwv0jqdidb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    animation: fade-in-b-pwv0jqdidb 0.5s ease-out;
}

.device-info-item[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.device-info-label[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.device-info-value[b-pwv0jqdidb] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .device-info-value.highlight[b-pwv0jqdidb] {
        font-weight: 600;
        color: var(--primary-color);
    }

    .device-info-value i[b-pwv0jqdidb] {
        color: var(--text-secondary);
    }

/* Resource Metrics Card */
.device-metric-container[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.device-metric-item[b-pwv0jqdidb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.device-donut-chart[b-pwv0jqdidb] {
    position: relative;
    width: 110px;
    height: 110px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.device-overview-card:hover .device-donut-chart[b-pwv0jqdidb] {
    transform: scale(1.05);
}

.donut-hole[b-pwv0jqdidb] {
    position: absolute;
    width: 60%;
    height: 60%;
    background-color: var(--content-bg);
    border-radius: 50%;
    top: 20%;
    left: 20%;
    z-index: 2;
}

.donut-chart-svg[b-pwv0jqdidb] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-ring[b-pwv0jqdidb] {
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.05);
    stroke-width: 2.5;
}

.donut-segment[b-pwv0jqdidb] {
    fill: transparent;
    stroke-width: 2.5;
    transition: stroke-dasharray 1s ease;
}

    .donut-segment.usage-normal[b-pwv0jqdidb] {
        stroke: var(--success);
    }

    .donut-segment.usage-medium[b-pwv0jqdidb] {
        stroke: var(--info);
    }

    .donut-segment.usage-warning[b-pwv0jqdidb] {
        stroke: var(--warning);
    }

    .donut-segment.usage-critical[b-pwv0jqdidb] {
        stroke: var(--danger);
    }

.donut-number[b-pwv0jqdidb] {
    fill: var(--text-primary);
    font-size: 0.25rem;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.device-donut-label[b-pwv0jqdidb] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    margin-top: 0.375rem;
}

/* Storage Drives Styling */
.device-storage-section[b-pwv0jqdidb] {
    margin-top: 1rem;
    border-top: 1px dashed var(--border-divider);
    padding-top: 1.25rem;
    animation: fade-in-b-pwv0jqdidb 0.5s ease-out;
}

    .device-storage-section h5[b-pwv0jqdidb] {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 1rem 0;
    }

.device-drives-grid[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.device-drive-item[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: fade-in-b-pwv0jqdidb 0.5s ease-out;
}

.device-drive-header[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.device-drive-letter[b-pwv0jqdidb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.device-drive-label[b-pwv0jqdidb] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.device-drive-progress[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.device-drive-bar[b-pwv0jqdidb] {
    height: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.device-drive-fill[b-pwv0jqdidb] {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

    .device-drive-fill.usage-normal[b-pwv0jqdidb] {
        background-color: var(--success);
    }

    .device-drive-fill.usage-medium[b-pwv0jqdidb] {
        background-color: var(--info);
    }

    .device-drive-fill.usage-warning[b-pwv0jqdidb] {
        background-color: var(--warning);
    }

    .device-drive-fill.usage-critical[b-pwv0jqdidb] {
        background-color: var(--danger);
    }

.device-drive-info[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.device-drive-percentage[b-pwv0jqdidb] {
    font-weight: 600;
}

/* Recent Activity Card */
.device-activity-list[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.device-activity-item[b-pwv0jqdidb] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    animation: fade-slide-up-b-pwv0jqdidb 0.4s ease-out;
    transform-origin: top;
    will-change: transform, box-shadow;
}

@keyframes fade-slide-up-b-pwv0jqdidb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.device-activity-item:hover[b-pwv0jqdidb] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.device-activity-icon[b-pwv0jqdidb] {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .device-activity-icon.activity-browser[b-pwv0jqdidb] {
        background-color: rgba(var(--warning-rgb), 0.1);
        color: var(--warning);
    }

    .device-activity-icon.activity-keyboard[b-pwv0jqdidb] {
        background-color: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-color);
    }

    .device-activity-icon.activity-application[b-pwv0jqdidb] {
        background-color: rgba(var(--info-rgb), 0.1);
        color: var(--info);
    }

    .device-activity-icon.activity-screenshot[b-pwv0jqdidb] {
        background-color: rgba(var(--success-rgb), 0.1);
        color: var(--success);
    }

    .device-activity-icon.activity-default[b-pwv0jqdidb] {
        background-color: rgba(var(--text-secondary-rgb), 0.1);
        color: var(--text-secondary);
    }

.device-activity-item:hover .device-activity-icon[b-pwv0jqdidb] {
    transform: scale(1.1);
}

.device-activity-details[b-pwv0jqdidb] {
    flex: 1;
    min-width: 0; /* Helps with text overflow */
}

.device-activity-title[b-pwv0jqdidb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.device-activity-time[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.device-activity-description[b-pwv0jqdidb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-activity-empty[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.device-activity-empty-icon[b-pwv0jqdidb] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.device-activity-empty p[b-pwv0jqdidb] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.device-activity-last-seen[b-pwv0jqdidb] {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    margin-top: 0.75rem;
}

.device-load-more-btn[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--content-bg);
    border: 1px dashed var(--border-divider);
    color: var(--text-secondary);
    padding: 0.625rem;
    width: 100%;
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-load-more-btn:hover[b-pwv0jqdidb] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

        .device-load-more-btn:hover i[b-pwv0jqdidb] {
            transform: translateY(2px);
        }

    .device-load-more-btn i[b-pwv0jqdidb] {
        transition: transform 0.3s ease;
    }

/* Timeline Styles */
.device-timeline[b-pwv0jqdidb] {
    position: relative;
    padding-left: 1.75rem;
    animation: fade-in-b-pwv0jqdidb 0.5s ease-out;
}

.device-timeline-line[b-pwv0jqdidb] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.4) 50%, rgba(var(--primary-rgb), 0.2) 100%);
    transform: translateX(-50%);
}

.device-timeline-item[b-pwv0jqdidb] {
    position: relative;
    margin-bottom: 1.25rem;
    animation: slide-in-left 0.5s ease-out;
}

    .device-timeline-item:last-child[b-pwv0jqdidb] {
        margin-bottom: 0;
    }

.device-timeline-marker[b-pwv0jqdidb] {
    position: absolute;
    left: -1.75rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 2px solid var(--content-bg);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

    .device-timeline-marker.first-seen[b-pwv0jqdidb] {
        background-color: var(--primary-color);
        animation: pulse-primary-b-pwv0jqdidb 2s infinite;
    }

    .device-timeline-marker.event-connected[b-pwv0jqdidb] {
        background-color: var(--success);
    }

    .device-timeline-marker.event-disconnected[b-pwv0jqdidb] {
        background-color: var(--danger);
    }

    .device-timeline-marker.event-service[b-pwv0jqdidb] {
        background-color: var(--warning);
    }

    .device-timeline-marker.event-metrics[b-pwv0jqdidb] {
        background-color: var(--info);
    }

    .device-timeline-marker.event-default[b-pwv0jqdidb] {
        background-color: var(--text-secondary);
    }

.device-timeline-content[b-pwv0jqdidb] {
    background-color: var(--content-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

    .device-timeline-content:hover[b-pwv0jqdidb] {
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.device-timeline-title[b-pwv0jqdidb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.device-timeline-time[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.device-timeline-details[b-pwv0jqdidb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Media & Monitoring Card */
.device-media-tabs[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: fade-in-b-pwv0jqdidb 0.5s ease-out;
}

.device-media-tab-header[b-pwv0jqdidb] {
    display: flex;
    border-bottom: 1px solid var(--border-divider);
    margin-bottom: 1rem;
}

.device-media-tab[b-pwv0jqdidb] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-media-tab.active[b-pwv0jqdidb] {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        font-weight: 500;
    }

    .device-media-tab:hover:not(.active)[b-pwv0jqdidb] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

.device-media-content[b-pwv0jqdidb] {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 240px;
}

.device-media-screenshots[b-pwv0jqdidb],
.device-media-browser[b-pwv0jqdidb],
.device-media-keystrokes[b-pwv0jqdidb] {
    animation: tab-fade-in-b-pwv0jqdidb 0.4s ease-out;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@keyframes tab-fade-in-b-pwv0jqdidb {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.device-media-loading[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    height: 100%;
}

.device-loading-spinner[b-pwv0jqdidb] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-pwv0jqdidb 1s infinite linear;
    margin-bottom: 1rem;
}

.device-media-loading p[b-pwv0jqdidb] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.device-media-empty[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    height: 100%;
}

.device-media-empty-icon[b-pwv0jqdidb] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.device-media-empty p[b-pwv0jqdidb] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/* Screenshots styles */
.device-screenshots-grid[b-pwv0jqdidb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.device-screenshot-item[b-pwv0jqdidb] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-screenshot-item:hover[b-pwv0jqdidb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.device-screenshot-thumbnail[b-pwv0jqdidb] {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    overflow: hidden;
    background-color: var(--subtle-bg);
}

    .device-screenshot-thumbnail img[b-pwv0jqdidb] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.device-screenshot-item:hover .device-screenshot-thumbnail img[b-pwv0jqdidb] {
    transform: scale(1.05);
}

.device-screenshot-placeholder[b-pwv0jqdidb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.5rem;
}

.device-screenshot-info[b-pwv0jqdidb] {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.device-screenshot-time[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.device-screenshot-window[b-pwv0jqdidb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .device-screenshot-window i[b-pwv0jqdidb] {
        color: var(--primary-color);
        flex-shrink: 0;
    }

/* Browser history styles */
.device-browser-list[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.device-browser-item[b-pwv0jqdidb] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

    .device-browser-item:hover[b-pwv0jqdidb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.device-browser-icon[b-pwv0jqdidb] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: rgba(var(--warning-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.device-browser-details[b-pwv0jqdidb] {
    flex: 1;
    min-width: 0; /* Helps with text overflow */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.device-browser-title[b-pwv0jqdidb] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-browser-url[b-pwv0jqdidb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-browser-time[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.device-browser-visits[b-pwv0jqdidb] {
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Keystroke stats styles */
.device-keystroke-summary[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.device-keystroke-metrics[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.device-keystroke-metric[b-pwv0jqdidb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

    .device-keystroke-metric:hover[b-pwv0jqdidb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.device-keystroke-metric-value[b-pwv0jqdidb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.device-keystroke-metric-label[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.device-keystroke-windows[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .device-keystroke-windows h5[b-pwv0jqdidb] {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

.device-keystroke-window-item[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-keystroke-window-bar[b-pwv0jqdidb] {
    height: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.device-keystroke-window-fill[b-pwv0jqdidb] {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: width 1s ease;
}

.device-keystroke-window-details[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.device-keystroke-window-title[b-pwv0jqdidb] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-keystroke-window-stats[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Media Summary Footer */
.device-media-summary[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-divider);
}

.device-media-stats[b-pwv0jqdidb] {
    display: flex;
    gap: 1rem;
}

.device-stat-item[b-pwv0jqdidb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.device-stat-label[b-pwv0jqdidb] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.device-stat-value[b-pwv0jqdidb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.device-view-all-btn[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-view-all-btn:hover[b-pwv0jqdidb] {
        background-color: var(--primary-color);
        color: white;
        transform: translateX(2px);
    }

    .device-view-all-btn i[b-pwv0jqdidb] {
        transition: transform 0.3s ease;
    }

    .device-view-all-btn:hover i[b-pwv0jqdidb] {
        transform: translateX(2px);
    }

/* Screenshot Modal */
.device-screenshot-modal-overlay[b-pwv0jqdidb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in-b-pwv0jqdidb 0.3s ease;
    padding: 1rem;
}

.device-screenshot-modal[b-pwv0jqdidb] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modal-in-b-pwv0jqdidb 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-in-b-pwv0jqdidb {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.device-screenshot-modal-header[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.device-screenshot-modal-info h4[b-pwv0jqdidb] {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.device-screenshot-modal-details[b-pwv0jqdidb] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .device-screenshot-modal-details span[b-pwv0jqdidb] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

.device-screenshot-modal-close[b-pwv0jqdidb] {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-screenshot-modal-close:hover[b-pwv0jqdidb] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        transform: rotate(90deg);
    }

.device-screenshot-modal-body[b-pwv0jqdidb] {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #121212;
}

.device-screenshot-image[b-pwv0jqdidb] {
    max-width: 100%;
    max-height: calc(90vh - 9rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .device-screenshot-image img[b-pwv0jqdidb] {
        max-width: 100%;
        max-height: calc(90vh - 9rem);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

.device-screenshot-modal-footer[b-pwv0jqdidb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.device-screenshot-counter[b-pwv0jqdidb] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.device-screenshot-nav-btn[b-pwv0jqdidb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .device-screenshot-nav-btn:hover:not(:disabled)[b-pwv0jqdidb] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

    .device-screenshot-nav-btn:disabled[b-pwv0jqdidb] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Animations */
@keyframes pulse-success-b-pwv0jqdidb {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

@keyframes pulse-primary-b-pwv0jqdidb {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes fade-in-b-pwv0jqdidb {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin-b-pwv0jqdidb {
    to {
        transform: rotate(360deg);
    }
}

@keyframes blink-b-pwv0jqdidb {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* Media Queries for Responsive Design */
@media (max-width: 992px) {
    .device-metric-container[b-pwv0jqdidb] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .device-metric-item[b-pwv0jqdidb] {
        min-width: 100px;
    }

    .device-donut-chart[b-pwv0jqdidb] {
        width: 100px;
        height: 100px;
    }

    .device-screenshots-grid[b-pwv0jqdidb] {
        grid-template-columns: 1fr 1fr;
    }

    .device-keystroke-metrics[b-pwv0jqdidb] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .device-keystroke-metric[b-pwv0jqdidb] {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .device-card-header[b-pwv0jqdidb] {
        padding: 1rem;
    }

    .device-card-body[b-pwv0jqdidb] {
        padding: 1rem;
    }

    .device-info-grid[b-pwv0jqdidb] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .device-card-icon[b-pwv0jqdidb] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .device-card-header h4[b-pwv0jqdidb] {
        font-size: 1rem;
    }

    .device-connection-badge[b-pwv0jqdidb] {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

        .device-connection-badge[b-pwv0jqdidb]::before {
            width: 6px;
            height: 6px;
        }

    .device-media-tab[b-pwv0jqdidb] {
        padding: 0.5rem 0.375rem;
        font-size: 0.8125rem;
    }

    .device-screenshot-modal-details[b-pwv0jqdidb] {
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .device-metric-container[b-pwv0jqdidb] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .device-metric-item[b-pwv0jqdidb] {
        width: 100%;
    }

    .device-storage-section h5[b-pwv0jqdidb] {
        font-size: 0.875rem;
    }

    .device-screenshots-grid[b-pwv0jqdidb] {
        grid-template-columns: 1fr;
    }

    .device-keystroke-metrics[b-pwv0jqdidb] {
        flex-direction: column;
        gap: 0.625rem;
    }

    .device-keystroke-metric[b-pwv0jqdidb] {
        width: 100%;
    }

    .device-keystroke-windows h5[b-pwv0jqdidb] {
        font-size: 0.875rem;
    }

    .device-media-stats[b-pwv0jqdidb] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .device-screenshot-nav-btn span[b-pwv0jqdidb] {
        display: none;
    }
}

@media (max-width: 400px) {
    .device-card-header[b-pwv0jqdidb] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .device-card-body[b-pwv0jqdidb] {
        padding: 0.75rem;
    }

    .device-card-icon[b-pwv0jqdidb] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    .device-card-header h4[b-pwv0jqdidb] {
        font-size: 0.9375rem;
    }

    .device-donut-chart[b-pwv0jqdidb] {
        width: 80px;
        height: 80px;
    }

    .device-storage-section[b-pwv0jqdidb] {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .device-activity-item[b-pwv0jqdidb] {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .device-activity-icon[b-pwv0jqdidb] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    .device-activity-title[b-pwv0jqdidb] {
        font-size: 0.875rem;
    }

    .device-activity-description[b-pwv0jqdidb] {
        font-size: 0.75rem;
    }

    .device-timeline[b-pwv0jqdidb] {
        padding-left: 1.5rem;
    }

    .device-timeline-marker[b-pwv0jqdidb] {
        width: 0.75rem;
        height: 0.75rem;
        left: -1.5rem;
    }

    .device-timeline-content[b-pwv0jqdidb] {
        padding: 0.625rem 0.75rem;
    }

    .device-timeline-title[b-pwv0jqdidb] {
        font-size: 0.875rem;
    }

    .device-timeline-details[b-pwv0jqdidb] {
        font-size: 0.75rem;
    }

    .device-media-tab[b-pwv0jqdidb] {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    .device-view-all-btn[b-pwv0jqdidb] {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .device-screenshot-modal-info h4[b-pwv0jqdidb] {
        font-size: 1rem;
    }

    .device-screenshot-modal-details[b-pwv0jqdidb] {
        font-size: 0.75rem;
    }

    .device-keystroke-metric-value[b-pwv0jqdidb] {
        font-size: 1.25rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Monitoring/DeviceScreenshotsTab.razor.rz.scp.css */
/* ====== Enhanced Screenshot Tab Styles ====== */

:root[b-6igd46nu47] {
    --screenshot-card-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    --screenshot-card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
    --screenshot-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --screenshot-border-radius: var(--border-radius-lg);
    --screenshot-bg-gradient: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.01) 100%);
    /* Timeline specific variables */
    --timeline-item-width: 160px;
    --timeline-item-gap: 12px;
    --timeline-item-height: 170px;
    --timeline-active-glow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}

.theme-dark[b-6igd46nu47] {
    --screenshot-card-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    --screenshot-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
    --screenshot-bg-gradient: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.03) 100%);
}

/* Base Container Animation */
.device-tab-container[b-6igd46nu47] {
    animation: fade-in 0.5s ease-out;
}

/* Header Styles */
.device-tab-header[b-6igd46nu47] {
    margin-bottom: 1.5rem;
}

.header-main[b-6igd46nu47] {
    margin-bottom: 1rem;
}

.device-tab-header h3[b-6igd46nu47] {
    margin: 0 0 0.375rem 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .device-tab-header h3[b-6igd46nu47]::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--primary-color);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    }

.device-tab-header p[b-6igd46nu47] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 80%;
}

/* Tab Actions */
.device-tab-actions[b-6igd46nu47] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background-color: var(--content-bg);
    border-radius: var(--screenshot-border-radius);
    border: 1px solid var(--border-divider);
    box-shadow: var(--screenshot-card-shadow);
    backdrop-filter: blur(8px);
    transition: var(--screenshot-transition);
}

    .device-tab-actions:hover[b-6igd46nu47] {
        box-shadow: var(--screenshot-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.15);
    }

/* Group filter elements */
.filter-group[b-6igd46nu47] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Search Box */
.device-search-box[b-6igd46nu47] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

    .device-search-box i[b-6igd46nu47] {
        position: absolute;
        left: 1.125rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 1rem;
        transition: color 0.3s ease;
    }

    .device-search-box input[b-6igd46nu47] {
        width: 100%;
        padding: 0.75rem 1.25rem 0.75rem 2.75rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-divider);
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.3s ease;
    }

        .device-search-box input:focus[b-6igd46nu47] {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

            .device-search-box input:focus + i[b-6igd46nu47] {
                color: var(--primary-color);
            }

.device-clear-search[b-6igd46nu47] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.3s ease;
}

    .device-clear-search:hover[b-6igd46nu47] {
        background-color: rgba(var(--text-secondary-rgb), 0.1);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

/* Filter Dropdown */
.device-filter-dropdown[b-6igd46nu47] {
    position: relative;
}

    .device-filter-dropdown select[b-6igd46nu47] {
        padding: 0.75rem 2.5rem 0.75rem 1.125rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        transition: all 0.3s ease;
        min-width: 140px;
    }

        .device-filter-dropdown select:focus[b-6igd46nu47] {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

        .device-filter-dropdown select:hover[b-6igd46nu47] {
            border-color: rgba(var(--primary-rgb), 0.3);
        }

.app-filter select[b-6igd46nu47] {
    min-width: 200px;
    max-width: 280px;
    text-overflow: ellipsis;
}

/* View Toggle */
.device-view-toggle[b-6igd46nu47] {
    display: flex;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    padding: 0.375rem;
    border: 1px solid var(--border-divider);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .device-view-toggle button[b-6igd46nu47] {
        padding: 0.5rem 0.75rem;
        background: none;
        border: none;
        border-radius: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9375rem;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

        .device-view-toggle button.active[b-6igd46nu47] {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
        }

        .device-view-toggle button:not(.active):hover[b-6igd46nu47] {
            background-color: rgba(var(--text-secondary-rgb), 0.1);
            color: var(--text-primary);
        }

/* Date Range Picker */
.date-range-picker[b-6igd46nu47] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    animation: fade-up-b-6igd46nu47 0.4s ease-out;
}

@keyframes fade-up-b-6igd46nu47 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.date-input[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-input label[b-6igd46nu47] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .date-input input[b-6igd46nu47] {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        width: 140px;
    }

.apply-date-filter[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.1);
}

    .apply-date-filter:hover[b-6igd46nu47] {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
    }

    .apply-date-filter i[b-6igd46nu47] {
        font-size: 0.75rem;
    }

/* Quality Toggle */
.quality-toggle[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
}

    .quality-toggle label[b-6igd46nu47] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

.toggle-switch[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quality-label[b-6igd46nu47] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 60px;
    text-align: right;
}

.toggle-switch-inner[b-6igd46nu47] {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background-color: var(--subtle-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.toggle-switch.high .toggle-switch-inner[b-6igd46nu47] {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

.toggle-switch-handle[b-6igd46nu47] {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: calc(1.5rem - 0.25rem);
    height: calc(1.5rem - 0.25rem);
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33);
}

.toggle-switch.high .toggle-switch-handle[b-6igd46nu47] {
    left: calc(3rem - 1.5rem + 0.125rem);
    background-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}

/* ===== HORIZONTAL TIMELINE STYLES ===== */
.horizontal-timeline-container[b-6igd46nu47] {
    margin: 1.5rem 0 2rem 0;
    padding: 1.25rem;
    background-color: var(--content-bg);
    border-radius: var(--screenshot-border-radius);
    border: 1px solid var(--border-divider);
    box-shadow: var(--screenshot-card-shadow);
    position: relative;
    overflow: hidden;
}

    .horizontal-timeline-container[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        height: 4px;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.7));
        border-radius: var(--screenshot-border-radius) var(--screenshot-border-radius) 0 0;
    }

.timeline-header[b-6igd46nu47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .timeline-header h4[b-6igd46nu47] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.screenshot-count[b-6igd46nu47] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background-color: var(--subtle-bg);
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--border-divider);
    font-weight: 500;
}

/* Custom Scrollbar Styling */
.custom-scrollbar[b-6igd46nu47] {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .custom-scrollbar[b-6igd46nu47]::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .custom-scrollbar[b-6igd46nu47]::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar[b-6igd46nu47]::-webkit-scrollbar-thumb {
        background-color: var(--scroll-thumb);
        border-radius: 6px;
    }

        .custom-scrollbar[b-6igd46nu47]::-webkit-scrollbar-thumb:hover {
            background-color: var(--scroll-thumb-hover);
        }

.horizontal-timeline-scroll[b-6igd46nu47] {
    overflow-x: auto;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.horizontal-timeline[b-6igd46nu47] {
    display: flex;
    gap: var(--timeline-item-gap);
    padding: 0.5rem 0.25rem;
    min-width: fit-content;
}

.timeline-item[b-6igd46nu47] {
    display: flex;
    flex-direction: column;
    width: var(--timeline-item-width);
    height: var(--timeline-item-height);
    border-radius: 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: var(--screenshot-transition);
    cursor: pointer;
    position: relative;
    box-shadow: var(--screenshot-card-shadow);
}

    .timeline-item[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .timeline-item:hover[b-6igd46nu47] {
        transform: translateY(-5px) scale(1.03);
        box-shadow: var(--screenshot-card-shadow-hover);
        border-color: rgba(var(--primary-rgb), 0.2);
        z-index: 2;
    }

        .timeline-item:hover[b-6igd46nu47]::before {
            transform: scaleX(1);
        }

    .timeline-item.active[b-6igd46nu47] {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.4);
        background-color: var(--primary-light);
        z-index: 3;
    }

        .timeline-item.active[b-6igd46nu47]::before {
            transform: scaleX(1);
            height: 4px;
        }

.timeline-thumbnail[b-6igd46nu47] {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: var(--subtle-bg);
}

    .timeline-thumbnail img[b-6igd46nu47] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

.timeline-item:hover .timeline-thumbnail img[b-6igd46nu47] {
    transform: scale(1.05);
}

.timeline-time[b-6igd46nu47] {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: rgba(var(--content-bg-rgb), 0.8);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.timeline-item.active .timeline-time[b-6igd46nu47] {
    color: var(--primary-color);
}

.timeline-app[b-6igd46nu47] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

    .timeline-app i[b-6igd46nu47] {
        color: var(--primary-color);
        font-size: 0.875rem;
        flex-shrink: 0;
    }

/* Timeline Navigation & Scroll Indicator */
.timeline-navigation[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.timeline-nav-btn[b-6igd46nu47] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--screenshot-transition);
    flex-shrink: 0;
}

    .timeline-nav-btn:hover[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
    }

.timeline-scroll-indicator-container[b-6igd46nu47] {
    flex: 1;
    height: 8px;
    background-color: var(--subtle-bg);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.timeline-scroll-track[b-6igd46nu47] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.timeline-scroll-indicator[b-6igd46nu47] {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-rgb), 0.7));
    border-radius: 4px;
    min-width: 30px;
    transition: left 0.3s ease, width 0.3s ease;
    box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.3);
}

/* Screenshot Preview Container */
.screenshot-preview-container[b-6igd46nu47] {
    background-color: var(--content-bg);
    border-radius: var(--screenshot-border-radius);
    overflow: hidden;
    border: 1px solid var(--border-divider);
    box-shadow: var(--screenshot-card-shadow);
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 500px;
    padding: 1.5rem;
    position: relative;
}

    .screenshot-preview-container[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        border-radius: var(--screenshot-border-radius) var(--screenshot-border-radius) 0 0;
    }

.screenshot-preview-header[b-6igd46nu47] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    animation: fade-in 0.4s ease-out;
    padding-top: 0.5rem;
}

.preview-info h4[b-6igd46nu47] {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.preview-details[b-6igd46nu47] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .preview-details span[b-6igd46nu47] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: var(--subtle-bg);
        padding: 0.5rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
        transition: var(--screenshot-transition);
        border: 1px solid var(--border-divider);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.application-badge[b-6igd46nu47] {
    max-width: 350px;
    flex: 1;
}

.preview-details span:hover[b-6igd46nu47] {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.preview-details span i[b-6igd46nu47] {
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.preview-actions[b-6igd46nu47] {
    display: flex;
    gap: 0.75rem;
}

.preview-action-btn[b-6igd46nu47] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.75rem;
    background-color: var(--content-bg);
    color: var(--text-secondary);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--screenshot-transition);
    border: 1px solid var(--border-divider);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .preview-action-btn:hover[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

.screenshot-preview-body[b-6igd46nu47] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.screenshot-main-image[b-6igd46nu47] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #121212;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: var(--screenshot-transition);
}

    .screenshot-main-image:hover[b-6igd46nu47] {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }

    .screenshot-main-image[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
        pointer-events: none;
        z-index: 1;
    }

    .screenshot-main-image img[b-6igd46nu47] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        animation: fade-in-scale-b-6igd46nu47 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    }

@keyframes fade-in-scale-b-6igd46nu47 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.image-loading[b-6igd46nu47] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner[b-6igd46nu47] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1.2s infinite linear;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.image-loading span[b-6igd46nu47] {
    font-size: 1.125rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-placeholder[b-6igd46nu47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.6);
}

    .image-placeholder i[b-6igd46nu47] {
        font-size: 3.5rem;
        animation: gentle-breathe-b-6igd46nu47 4s ease-in-out infinite;
    }

@keyframes gentle-breathe-b-6igd46nu47 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.image-placeholder p[b-6igd46nu47] {
    font-size: 1.125rem;
    margin: 0;
    font-weight: 500;
}

.screenshot-navigation[b-6igd46nu47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-divider);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-btn[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--screenshot-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .nav-btn:hover:not(:disabled)[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    }

    .nav-btn:disabled[b-6igd46nu47] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.nav-position[b-6igd46nu47] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 1rem;
    background-color: var(--subtle-bg);
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.screenshot-preview-empty[b-6igd46nu47] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0.75rem;
}

.preview-empty-icon[b-6igd46nu47] {
    font-size: 4rem;
    color: rgba(var(--text-muted-rgb), 0.5);
    animation: float-b-6igd46nu47 5s ease-in-out infinite;
}

@keyframes float-b-6igd46nu47 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.screenshot-preview-empty p[b-6igd46nu47] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 20rem;
    text-align: center;
    line-height: 1.5;
}

/* ===== LIST VIEW STYLES ===== */
.screenshot-list[b-6igd46nu47] {
    background-color: var(--content-bg);
    border-radius: var(--screenshot-border-radius);
    overflow: hidden;
    border: 1px solid var(--border-divider);
    box-shadow: var(--screenshot-card-shadow);
    position: relative;
}

    .screenshot-list[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        height: 4px;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.7));
        border-radius: var(--screenshot-border-radius) var(--screenshot-border-radius) 0 0;
    }

.screenshot-table[b-6igd46nu47] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .screenshot-table th[b-6igd46nu47], .screenshot-table td[b-6igd46nu47] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--border-divider);
    }

    .screenshot-table th[b-6igd46nu47] {
        font-weight: 600;
        color: var(--text-primary);
        background-color: var(--subtle-bg);
        font-size: 0.9375rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .screenshot-table tbody tr[b-6igd46nu47] {
        transition: var(--screenshot-transition);
    }

        .screenshot-table tbody tr:hover[b-6igd46nu47] {
            background-color: var(--primary-light);
        }

.sortable-column[b-6igd46nu47] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
    position: relative;
}

    .sortable-column:hover[b-6igd46nu47] {
        background-color: rgba(var(--primary-rgb), 0.08);
    }

    .sortable-column i[b-6igd46nu47] {
        margin-left: 0.5rem;
        font-size: 0.875rem;
        color: var(--text-muted);
        transition: all 0.3s ease;
    }

    .sortable-column:hover i[b-6igd46nu47] {
        color: var(--primary-color);
    }

/* Enhanced application name column */
.app-column[b-6igd46nu47] {
    min-width: 300px;
    width: 40%;
}

.app-name-cell[b-6igd46nu47] {
    max-width: 450px;
    width: 40%;
}

.app-name-wrapper[b-6igd46nu47] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-thumbnail-cell[b-6igd46nu47] {
    width: 10rem;
}

.screenshot-thumbnail-small[b-6igd46nu47] {
    width: 8rem;
    height: 4.5rem; /* 16:9 aspect ratio */
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    background-color: var(--subtle-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: var(--screenshot-transition);
}

    .screenshot-thumbnail-small img[b-6igd46nu47] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .screenshot-thumbnail-small:hover[b-6igd46nu47] {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: scale(1.05);
    }

        .screenshot-thumbnail-small:hover img[b-6igd46nu47] {
            transform: scale(1.08);
        }

.screenshot-thumbnail-loading.small[b-6igd46nu47] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    .screenshot-thumbnail-loading.small .thumbnail-spinner[b-6igd46nu47] {
        width: 1.75rem;
        height: 1.75rem;
    }

.screenshot-actions[b-6igd46nu47] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.screenshot-action-btn[b-6igd46nu47] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--screenshot-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .screenshot-action-btn:hover[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    }

    .screenshot-action-btn.delete-btn:hover[b-6igd46nu47] {
        background-color: rgba(var(--danger-rgb), 0.15);
        color: var(--danger);
    }

/* Load More Button */
.screenshot-load-more[b-6igd46nu47] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.device-btn[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--screenshot-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.device-btn-secondary[b-6igd46nu47] {
    background-color: var(--content-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
}

    .device-btn-secondary:hover[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

        .device-btn-secondary:hover i[b-6igd46nu47] {
            animation: bounce-b-6igd46nu47 0.6s ease infinite;
        }

@keyframes bounce-b-6igd46nu47 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* ===== MODAL STYLES ===== */
.screenshot-modal-overlay[b-6igd46nu47] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.4s ease;
    backdrop-filter: blur(8px);
    padding: 1.5rem;
}

.screenshot-modal[b-6igd46nu47] {
    background-color: var(--content-bg);
    border-radius: 1.25rem;
    width: 100%;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6);
    animation: modal-zoom-in-b-6igd46nu47 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

    .screenshot-modal[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--success-rgb), 0.8));
        z-index: 1;
    }

@keyframes modal-zoom-in-b-6igd46nu47 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.screenshot-modal-header[b-6igd46nu47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.screenshot-modal-info h4[b-6igd46nu47] {
    margin: 0 0 0.625rem 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.screenshot-modal-details[b-6igd46nu47] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

    .screenshot-modal-details span[b-6igd46nu47] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        transition: var(--screenshot-transition);
    }

        .screenshot-modal-details span:hover[b-6igd46nu47] {
            color: var(--primary-color);
            transform: translateY(-2px);
        }

    .screenshot-modal-details i[b-6igd46nu47] {
        color: var(--primary-color);
        font-size: 1.125rem;
    }

.app-detail[b-6igd46nu47] {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-modal-actions[b-6igd46nu47] {
    display: flex;
    gap: 0.75rem;
}

.screenshot-modal-btn[b-6igd46nu47] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.75rem;
    background-color: var(--content-bg);
    color: var(--text-secondary);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--screenshot-transition);
    border: 1px solid var(--border-divider);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .screenshot-modal-btn:hover[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

.screenshot-modal-body[b-6igd46nu47] {
    flex: 1;
    overflow: auto;
    padding: 2rem;
    background-color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .screenshot-modal-body[b-6igd46nu47]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
        pointer-events: none;
    }

.screenshot-full-image[b-6igd46nu47] {
    position: relative;
    max-width: 100%;
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    overflow: hidden;
}

    .screenshot-full-image img[b-6igd46nu47] {
        max-width: 100%;
        max-height: 72vh;
        object-fit: contain;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
        animation: fade-in-scale-b-6igd46nu47 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        border-radius: 0.5rem;
    }

.fullsize-loading[b-6igd46nu47] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.fullsize-spinner[b-6igd46nu47] {
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1.2s infinite linear;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.fullsize-loading span[b-6igd46nu47] {
    font-size: 1.125rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-placeholder.large[b-6igd46nu47] {
    padding: 5rem;
}

    .image-placeholder.large i[b-6igd46nu47] {
        font-size: 5rem;
    }

.screenshot-modal-footer[b-6igd46nu47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.screenshot-counter[b-6igd46nu47] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    background-color: var(--content-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-divider);
}

.screenshot-nav-btn[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--screenshot-transition);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .screenshot-nav-btn:hover:not(:disabled)[b-6igd46nu47] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

    .screenshot-nav-btn:disabled[b-6igd46nu47] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Device Loading & Empty States */
.device-loading-state[b-6igd46nu47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.device-loading-spinner[b-6igd46nu47] {
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1.2s infinite ease-in-out;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.1);
}

.device-loading-state p[b-6igd46nu47] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.device-empty-content[b-6igd46nu47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    background-color: var(--subtle-bg);
    border-radius: 1rem;
    background-image: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.03) 0%, transparent 70%);
}

.device-empty-icon[b-6igd46nu47] {
    font-size: 4rem;
    color: rgba(var(--text-muted-rgb), 0.7);
    margin-bottom: 1.5rem;
    animation: gentle-breathe-b-6igd46nu47 4s ease-in-out infinite;
}

.device-empty-content h4[b-6igd46nu47] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.device-empty-content p[b-6igd46nu47] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    max-width: 30rem;
    line-height: 1.5;
}

.clear-filters-btn[b-6igd46nu47] {
    display: flex;
    align-items: center;
    gap: 0.675rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 0.75rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--screenshot-transition);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .clear-filters-btn:hover[b-6igd46nu47] {
        background-color: var(--content-bg);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    }

    .clear-filters-btn i[b-6igd46nu47] {
        font-size: 0.875rem;
    }

/* ===== Responsiveness ===== */
@media (max-width: 1200px) {
    .screenshot-modal[b-6igd46nu47] {
        max-width: 95vw;
    }

    .device-tab-actions[b-6igd46nu47] {
        gap: 0.5rem;
    }

    .timeline-item[b-6igd46nu47] {
        width: 140px;
        --timeline-item-width: 140px;
    }

    .app-column[b-6igd46nu47] {
        min-width: 250px;
    }
}

@media (max-width: 992px) {
    .device-tab-header[b-6igd46nu47] {
        margin-bottom: 1rem;
    }

        .device-tab-header h3[b-6igd46nu47] {
            font-size: 1.5rem;
        }

    .device-tab-actions[b-6igd46nu47] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-6igd46nu47] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .device-view-toggle[b-6igd46nu47] {
        align-self: flex-end;
    }

    .app-filter select[b-6igd46nu47] {
        width: 100%;
        max-width: none;
    }

    .timeline-item[b-6igd46nu47] {
        width: 130px;
        --timeline-item-width: 130px;
        --timeline-item-gap: 10px;
    }

    .preview-details[b-6igd46nu47] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .screenshot-navigation[b-6igd46nu47] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-position[b-6igd46nu47] {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

    .nav-btn[b-6igd46nu47] {
        flex: 1;
    }

    .screenshot-modal-header[b-6igd46nu47] {
        flex-direction: column;
        gap: 1rem;
    }

    .screenshot-modal-actions[b-6igd46nu47] {
        align-self: flex-end;
    }
}

@media (max-width: 768px) {
    .horizontal-timeline-container[b-6igd46nu47] {
        padding: 1rem;
    }

    .screenshot-preview-container[b-6igd46nu47] {
        padding: 1rem;
        height: auto;
        min-height: 450px;
    }

    .preview-info h4[b-6igd46nu47] {
        font-size: 1.125rem;
    }

    .timeline-header[b-6igd46nu47] {
        flex-direction: column;
        align-items: flex-start;
    }

    .screenshot-count[b-6igd46nu47] {
        align-self: flex-start;
    }

    .timeline-item[b-6igd46nu47] {
        width: 120px;
        height: 160px;
        --timeline-item-width: 120px;
        --timeline-item-height: 160px;
    }

    .screenshot-thumbnail-cell[b-6igd46nu47] {
        width: 6rem;
    }

    .screenshot-thumbnail-small[b-6igd46nu47] {
        width: 6rem;
        height: 3.375rem;
    }

    .app-column[b-6igd46nu47] {
        min-width: 150px;
    }

    .size-column[b-6igd46nu47] {
        display: none;
    }

    .screenshot-modal-details[b-6igd46nu47] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .screenshot-modal-footer[b-6igd46nu47] {
        flex-wrap: wrap;
    }

    .screenshot-counter[b-6igd46nu47] {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
}

@media (max-width: 576px) {
    .device-tab-header h3[b-6igd46nu47] {
        font-size: 1.375rem;
    }

    .device-tab-header p[b-6igd46nu47] {
        font-size: 0.9375rem;
    }

    .timeline-item[b-6igd46nu47] {
        width: 110px;
        height: 150px;
        --timeline-item-width: 110px;
        --timeline-item-height: 150px;
    }

    .timeline-thumbnail[b-6igd46nu47] {
        height: 80px;
    }

    .timeline-app[b-6igd46nu47] {
        font-size: 0.75rem;
    }

    .preview-info h4[b-6igd46nu47] {
        font-size: 1rem;
    }

    .preview-details span[b-6igd46nu47] {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
    }

    .nav-btn span[b-6igd46nu47] {
        display: none;
    }

    .screenshot-table th[b-6igd46nu47], .screenshot-table td[b-6igd46nu47] {
        padding: 0.75rem 0.5rem;
    }

    .screenshot-actions[b-6igd46nu47] {
        flex-wrap: wrap;
    }

    .screenshot-thumbnail-cell[b-6igd46nu47] {
        display: none;
    }

    /* Make the table scroll horizontally on small screens */
    .screenshot-list[b-6igd46nu47] {
        overflow-x: auto;
    }

    .screenshot-table[b-6igd46nu47] {
        min-width: 500px;
    }

    .device-btn[b-6igd46nu47] {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleAdmin.razor.rz.scp.css */
/* Scale Monitoring Dashboard - Enhanced Styling */


/* Base Dashboard Structure */
.scale-dashboard[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem;
    background-color: var(--body-bg);
    font-family: 'Inter', sans-serif;
    position: relative;
    animation: fade-in-b-yfystguu6g 0.5s ease-out;
}

@keyframes fade-in-b-yfystguu6g {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Styling */
.scale-dashboard-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.scale-dashboard-title h1[b-yfystguu6g] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

    .scale-dashboard-title h1[b-yfystguu6g]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

.scale-dashboard-title:hover h1[b-yfystguu6g]::after {
    transform: scaleX(1);
}

.scale-dashboard-subtitle[b-yfystguu6g] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    transition: var(--hover-transition);
}

.scale-dashboard-title:hover .scale-dashboard-subtitle[b-yfystguu6g] {
    opacity: 1;
}

.scale-dashboard-actions[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Connection Status Indicator */
.scale-connection-status[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 1.25rem;
    transition: var(--hover-transition);
    transform-origin: center;
}

    .scale-connection-status:hover[b-yfystguu6g] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.scale-status-connected[b-yfystguu6g] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.3);
}

.scale-status-disconnected[b-yfystguu6g] {
    background-color: rgba(var(--danger-rgb), 0.15);
    color: var(--danger);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    animation: pulse-danger-b-yfystguu6g 2s infinite;
}

@keyframes pulse-danger-b-yfystguu6g {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--danger-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
    }
}

.scale-last-update[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: var(--hover-transition);
}

    .scale-last-update:hover[b-yfystguu6g] {
        color: var(--text-primary);
    }

.scale-activity-indicator[b-yfystguu6g] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: var(--hover-transition);
}

    .scale-activity-indicator.scale-activity-active[b-yfystguu6g] {
        background-color: var(--success);
        box-shadow: 0 0 0 4px rgba(var(--success-rgb), 0.2);
        animation: scale-pulse-b-yfystguu6g 1.5s infinite;
    }

@keyframes scale-pulse-b-yfystguu6g {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

/* Loading Spinner */
.scale-loading[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.scale-spinner[b-yfystguu6g] {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: scale-spin-b-yfystguu6g 1s infinite cubic-bezier(0.41, 0.26, 0.54, 0.94);
}

@keyframes scale-spin-b-yfystguu6g {
    to {
        transform: rotate(360deg);
    }
}

.scale-loading p[b-yfystguu6g] {
    color: var(--text-secondary);
    font-size: 1rem;
    animation: fade-pulse-b-yfystguu6g 2s infinite alternate;
}

@keyframes fade-pulse-b-yfystguu6g {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* Button Styling */
.scale-button[b-yfystguu6g], .scale-refresh-button[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .scale-button[b-yfystguu6g]::after, .scale-refresh-button[b-yfystguu6g]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .scale-button:active[b-yfystguu6g]::after, .scale-refresh-button:active[b-yfystguu6g]::after {
        animation: ripple-b-yfystguu6g 0.6s ease-out;
    }

@keyframes ripple-b-yfystguu6g {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

.scale-button[b-yfystguu6g] {
    background-color: var(--content-bg);
    color: var(--text-primary);
}

    .scale-button:hover[b-yfystguu6g] {
        background-color: var(--nav-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .scale-button:active[b-yfystguu6g] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .scale-button.primary[b-yfystguu6g] {
        background-color: var(--primary-color);
        color: white;
        border: none;
    }

        .scale-button.primary:hover[b-yfystguu6g] {
            background-color: var(--primary-hover);
            box-shadow: 0 4px 6px rgba(var(--primary-rgb), 0.3);
        }

    .scale-button.secondary[b-yfystguu6g] {
        background-color: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
    }

        .scale-button.secondary:hover[b-yfystguu6g] {
            border-color: var(--text-primary);
            color: var(--text-primary);
        }

    .scale-button.icon[b-yfystguu6g] {
        padding: 0.375rem;
        width: 32px;
        height: 32px;
        justify-content: center;
        font-size: 0.875rem;
        background-color: transparent;
        border: none;
        color: var(--text-secondary);
    }

        .scale-button.icon:hover[b-yfystguu6g] {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
            transform: translateY(0);
            box-shadow: none;
        }

.theme-dark .scale-button.icon:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.05);
}

.scale-refresh-button[b-yfystguu6g] {
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.5);
}

    .scale-refresh-button:hover[b-yfystguu6g] {
        background-color: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(var(--primary-rgb), 0.3);
    }

    .scale-refresh-button:active[b-yfystguu6g] {
        transform: translateY(0);
    }

    .scale-refresh-button i[b-yfystguu6g] {
        transition: transform 0.3s ease;
    }

    .scale-refresh-button:hover i[b-yfystguu6g] {
        transform: rotate(180deg);
    }

/* Filter and Search */
.scale-dashboard-filters[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--hover-transition);
}

    .scale-dashboard-filters:hover[b-yfystguu6g] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.scale-filter-buttons[b-yfystguu6g] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.scale-filter-button[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
}

    .scale-filter-button[b-yfystguu6g]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .scale-filter-button:active[b-yfystguu6g]::after {
        animation: ripple-b-yfystguu6g 0.6s ease-out;
    }

    .scale-filter-button:hover[b-yfystguu6g] {
        border-color: var(--primary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .scale-filter-button.active[b-yfystguu6g] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
    }

    .scale-filter-button.scale-filter-online.active[b-yfystguu6g] {
        background-color: var(--success);
        border-color: var(--success);
        box-shadow: 0 4px 8px rgba(var(--success-rgb), 0.2);
    }

    .scale-filter-button.scale-filter-offline.active[b-yfystguu6g] {
        background-color: var(--danger);
        border-color: var(--danger);
        box-shadow: 0 4px 8px rgba(var(--danger-rgb), 0.2);
    }

    .scale-filter-button.scale-filter-stale.active[b-yfystguu6g] {
        background-color: var(--warning);
        border-color: var(--warning);
        box-shadow: 0 4px 8px rgba(var(--warning-rgb), 0.2);
    }

.scale-filter-count[b-yfystguu6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.theme-dark .scale-filter-count[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.2);
}

.scale-filter-button:hover .scale-filter-count[b-yfystguu6g] {
    transform: scale(1.1);
}

.scale-filter-button.active .scale-filter-count[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.2);
}

.scale-search-container[b-yfystguu6g] {
    position: relative;
    min-width: 220px;
    flex-grow: 1;
    max-width: 400px;
}

.scale-search-icon[b-yfystguu6g] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

.scale-search-input:focus ~ .scale-search-icon[b-yfystguu6g] {
    color: var(--primary-color);
}

.scale-search-input[b-yfystguu6g] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

    .scale-search-input:focus[b-yfystguu6g] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    }

.scale-search-clear[b-yfystguu6g] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-search-clear:hover[b-yfystguu6g] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: translateY(-50%) scale(1.2);
    }

.theme-dark .scale-search-clear:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Time Period Selector */
.scale-period-selector[b-yfystguu6g] {
    display: flex;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    transition: var(--hover-transition);
}

    .scale-period-selector:hover[b-yfystguu6g] {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .scale-period-selector button[b-yfystguu6g] {
        padding: 0.375rem 0.75rem;
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        transition: var(--hover-transition);
    }

        .scale-period-selector button:hover[b-yfystguu6g] {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--primary-color);
        }

.theme-dark .scale-period-selector button:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.05);
}

.scale-period-selector button.active[b-yfystguu6g] {
    background-color: var(--primary-color);
    color: white;
}

.scale-period-selector button i[b-yfystguu6g] {
    transition: transform 0.3s ease;
}

.scale-period-selector button:hover i[b-yfystguu6g] {
    transform: scale(1.1);
}

/* Time Navigation */
.scale-time-navigation[b-yfystguu6g] {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
    animation: slide-in-left-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.3s;
}

@keyframes slide-in-left-b-yfystguu6g {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scale-time-navigation:hover[b-yfystguu6g] {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.scale-period-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.scale-period-info[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
}

    .scale-period-info h3[b-yfystguu6g] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: var(--hover-transition);
    }

.scale-time-navigation:hover .scale-period-info h3[b-yfystguu6g] {
    color: var(--primary-color);
}

.scale-period-description[b-yfystguu6g] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.scale-period-navigation[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .scale-period-navigation span[b-yfystguu6g] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        transition: var(--hover-transition);
    }

.scale-time-navigation:hover .scale-period-navigation span[b-yfystguu6g] {
    color: var(--primary-color);
}

.scale-nav-button[b-yfystguu6g] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-nav-button:hover:not([disabled])[b-yfystguu6g] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .scale-nav-button[disabled][b-yfystguu6g] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Overview Statistics */
.scale-dashboard-overview[b-yfystguu6g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    animation: slide-in-right-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.2s;
}

@keyframes slide-in-right-b-yfystguu6g {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scale-stats-card[b-yfystguu6g] {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: var(--card-transition);
    overflow: hidden;
    position: relative;
    animation: card-slide-up-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes card-slide-up-b-yfystguu6g {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-stats-card:nth-child(1)[b-yfystguu6g] {
    animation-delay: 0.1s;
}

.scale-stats-card:nth-child(2)[b-yfystguu6g] {
    animation-delay: 0.2s;
}

.scale-stats-card:nth-child(3)[b-yfystguu6g] {
    animation-delay: 0.3s;
}

.scale-stats-card:nth-child(4)[b-yfystguu6g] {
    animation-delay: 0.4s;
}

.scale-stats-card:hover[b-yfystguu6g] {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.scale-stats-card[b-yfystguu6g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--primary-color);
}

.scale-total-scales[b-yfystguu6g]::before {
    background-color: var(--primary-color);
}

.scale-online-scales[b-yfystguu6g]::before {
    background-color: var(--success);
}

.scale-data-sources[b-yfystguu6g]::before {
    background-color: var(--info);
}

.scale-last-reading[b-yfystguu6g]::before {
    background-color: var(--warning);
}

.scale-stats-icon[b-yfystguu6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-right: 0.875rem;
    flex-shrink: 0;
    font-size: 1.375rem;
    transition: var(--hover-transition);
}

.scale-stats-card:hover .scale-stats-icon[b-yfystguu6g] {
    transform: scale(1.1);
}

.scale-total-scales .scale-stats-icon[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

.scale-online-scales .scale-stats-icon[b-yfystguu6g] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.scale-data-sources .scale-stats-icon[b-yfystguu6g] {
    background-color: rgba(var(--info-rgb), 0.15);
    color: var(--info);
}

.scale-last-reading .scale-stats-icon[b-yfystguu6g] {
    background-color: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
}

.scale-stats-content[b-yfystguu6g] {
    flex-grow: 1;
}

    .scale-stats-content h3[b-yfystguu6g] {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
        transition: var(--hover-transition);
    }

.scale-stats-card:hover .scale-stats-content h3[b-yfystguu6g] {
    color: var(--text-primary);
}

.scale-stats-value[b-yfystguu6g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    transition: var(--hover-transition);
}

.scale-stats-card:hover .scale-stats-value[b-yfystguu6g] {
    transform: scale(1.05);
    transform-origin: left;
}

.scale-stats-detail[b-yfystguu6g] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.scale-stats-chart[b-yfystguu6g] {
    margin-top: 0.5rem;
}

.scale-stats-bar[b-yfystguu6g] {
    height: 5px;
    width: 100%;
    display: flex;
    border-radius: 2.5px;
    overflow: hidden;
}

.scale-stats-segment[b-yfystguu6g] {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

    .scale-stats-segment.scale-status-online[b-yfystguu6g] {
        background-color: var(--success);
    }

    .scale-stats-segment.scale-status-offline[b-yfystguu6g] {
        background-color: var(--danger);
    }

    .scale-stats-segment.scale-status-stale[b-yfystguu6g] {
        background-color: var(--warning);
    }

/* Group Section */
.scale-group-section[b-yfystguu6g] {
    margin-bottom: 1.25rem;
    animation: fade-in-up-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.3s;
}

@keyframes fade-in-up-b-yfystguu6g {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-group-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
}

    .scale-group-header:hover[b-yfystguu6g] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .scale-group-header h2[b-yfystguu6g] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        position: relative;
        padding-left: 12px;
    }

        .scale-group-header h2[b-yfystguu6g]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }

.scale-group-stats[b-yfystguu6g] {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    align-items: center;
}

    .scale-group-stats span[b-yfystguu6g] {
        background-color: rgba(var(--primary-rgb), 0.08);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
    }

/* Scale Readings Grid */
.scale-readings-grid[b-yfystguu6g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    position: relative; /* For empty state positioning */
}

.scale-reading-card[b-yfystguu6g] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--card-transition);
}

@keyframes card-fade-in-b-yfystguu6g {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-reading-card:hover[b-yfystguu6g] {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.scale-reading-card.scale-status-online[b-yfystguu6g] {
    border-left: 4px solid var(--success);
}

.scale-reading-card.scale-status-offline[b-yfystguu6g] {
    border-left: 4px solid var(--danger);
}

.scale-reading-card.scale-status-stale[b-yfystguu6g] {
    border-left: 4px solid var(--warning);
}

.scale-reading-updated[b-yfystguu6g] {
    animation: scale-highlight-b-yfystguu6g 3s ease-out;
}

@keyframes scale-highlight-b-yfystguu6g {
    0% {
        background-color: rgba(var(--primary-rgb), 0.2);
    }

    100% {
        background-color: transparent;
    }
}

.scale-reading-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    transition: var(--hover-transition);
}

.theme-dark .scale-reading-header[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-reading-card:hover .scale-reading-header[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.theme-dark .scale-reading-card:hover .scale-reading-header[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-reading-title h3[b-yfystguu6g] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-title h3[b-yfystguu6g] {
    color: var(--primary-color);
}

.scale-reading-subtitle[b-yfystguu6g] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.125rem;
}

.scale-reading-actions[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scale-reading-status-badge[b-yfystguu6g] {
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-status-badge[b-yfystguu6g] {
    transform: scale(1.05);
}

.scale-reading-status-badge.scale-status-online[b-yfystguu6g] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.scale-reading-status-badge.scale-status-offline[b-yfystguu6g] {
    background-color: rgba(var(--danger-rgb), 0.15);
    color: var(--danger);
}

.scale-reading-status-badge.scale-status-stale[b-yfystguu6g] {
    background-color: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
}

.scale-reading-content[b-yfystguu6g] {
    padding: 1.125rem;
}

.scale-reading-main[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.scale-reading-value[b-yfystguu6g] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-value[b-yfystguu6g] {
    transform: scale(1.05);
    color: var(--primary-color);
}

.scale-reading-unit[b-yfystguu6g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.scale-reading-details[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.scale-reading-detail[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-detail[b-yfystguu6g] {
    color: var(--text-primary);
}

.scale-reading-stale[b-yfystguu6g] {
    color: var(--warning);
    font-weight: 500;
}

.scale-reading-no-data[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    gap: 0.75rem;
}

    .scale-reading-no-data i[b-yfystguu6g] {
        font-size: 1.75rem;
        opacity: 0.5;
        transition: var(--hover-transition);
    }

.scale-reading-card:hover .scale-reading-no-data i[b-yfystguu6g] {
    transform: scale(1.2);
    opacity: 0.7;
}

.scale-reading-no-data span[b-yfystguu6g] {
    font-size: 0.8125rem;
}

/* Target Progress Section */
.scale-target-progress[b-yfystguu6g] {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scale-target-item[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scale-target-label[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

    .scale-target-label span:first-child[b-yfystguu6g] {
        color: var(--text-secondary);
        font-weight: 500;
    }

.scale-target-value[b-yfystguu6g] {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-target-value[b-yfystguu6g] {
    color: var(--primary-color);
}

/* Progress Bar Styling */
.scale-target-gauge[b-yfystguu6g] {
    width: 100%;
    margin: 5px 0;
}

.scale-gauge-track[b-yfystguu6g] {
    height: 6px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.theme-dark .scale-gauge-track[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.1);
}

.scale-gauge-fill[b-yfystguu6g] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 5px; /* Ensure very small values are still visible */
    max-width: 100%; /* Ensure it never exceeds the track */
}

.scale-reading-card:hover .scale-gauge-fill[b-yfystguu6g] {
    filter: brightness(1.1);
}

.scale-gauge-fill.scale-progress-excellent[b-yfystguu6g] {
    background-color: var(--success);
}

.scale-gauge-fill.scale-progress-good[b-yfystguu6g] {
    background-color: #22c55e; /* Lighter green */
}

.scale-gauge-fill.scale-progress-average[b-yfystguu6g] {
    background-color: #eab308; /* Yellow */
}

.scale-gauge-fill.scale-progress-low[b-yfystguu6g] {
    background-color: #f97316; /* Orange */
}

.scale-amendment[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    transition: var(--hover-transition);
}

    .scale-amendment.positive[b-yfystguu6g] {
        color: var(--success);
    }

    .scale-amendment.negative[b-yfystguu6g] {
        color: var(--danger);
    }

.scale-reading-card:hover .scale-amendment[b-yfystguu6g] {
    transform: translateX(5px);
}

.scale-variance[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--hover-transition);
}

    .scale-variance.positive[b-yfystguu6g] {
        color: var(--success);
    }

    .scale-variance.negative[b-yfystguu6g] {
        color: var(--danger);
    }

.scale-reading-card:hover .scale-variance[b-yfystguu6g] {
    transform: translateX(5px);
}

/* No Results State */
.scale-no-results[b-yfystguu6g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    text-align: center;
    background-color: var(--body-bg);
    border-radius: 0.75rem;
    border: 2px dashed var(--border-color);
    animation: fade-in-b-yfystguu6g 0.5s ease;
}

    .scale-no-results i[b-yfystguu6g] {
        font-size: 2.5rem;
        color: var(--text-muted);
        margin-bottom: 0.875rem;
        opacity: 0.5;
        animation: float-b-yfystguu6g 3s ease-in-out infinite;
    }

@keyframes float-b-yfystguu6g {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.scale-no-results h3[b-yfystguu6g] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
}

.scale-no-results p[b-yfystguu6g] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
    max-width: 350px;
    font-size: 0.875rem;
}

.scale-reset-filters[b-yfystguu6g] {
    padding: 0.375rem 0.75rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
}

    .scale-reset-filters[b-yfystguu6g]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .scale-reset-filters:active[b-yfystguu6g]::after {
        animation: ripple-b-yfystguu6g 0.6s ease-out;
    }

    .scale-reset-filters:hover[b-yfystguu6g] {
        background-color: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.3);
    }

    .scale-reset-filters:active[b-yfystguu6g] {
        transform: translateY(0);
    }

/* Panels */
.scale-dashboard-panels[b-yfystguu6g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    animation: fade-in-up-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.4s;
}

.scale-panel[b-yfystguu6g] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--card-transition);
}

    .scale-panel:hover[b-yfystguu6g] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

.scale-panel-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    transition: var(--hover-transition);
}

.scale-panel:hover .scale-panel-header[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.theme-dark .scale-panel-header[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.02);
}

.theme-dark .scale-panel:hover .scale-panel-header[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-panel-header h2[b-yfystguu6g] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-panel-header h2[b-yfystguu6g]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transition: var(--hover-transition);
    }

.scale-panel:hover .scale-panel-header h2[b-yfystguu6g]::before {
    height: 20px;
}

.scale-panel-actions[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.scale-view-options[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

    .scale-view-options button[b-yfystguu6g] {
        padding: 0.3125rem 0.625rem;
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        transition: var(--hover-transition);
    }

        .scale-view-options button:hover[b-yfystguu6g] {
            background-color: rgba(0, 0, 0, 0.05);
        }

.theme-dark .scale-view-options button:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.05);
}

.scale-view-options button.active[b-yfystguu6g] {
    background-color: var(--primary-color);
    color: white;
}

.scale-panel-action[b-yfystguu6g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-panel-action:hover[b-yfystguu6g] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .scale-panel-action i[b-yfystguu6g] {
        transition: transform 0.3s ease;
    }

    .scale-panel-action:hover i[b-yfystguu6g] {
        transform: rotate(180deg);
    }

.scale-panel-badge[b-yfystguu6g] {
    padding: 0.25rem 0.625rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: var(--hover-transition);
}

.scale-panel:hover .scale-panel-badge[b-yfystguu6g] {
    transform: scale(1.05);
    background-color: var(--primary-color);
    color: white;
}

.scale-panel-content[b-yfystguu6g] {
    padding: 0;
}

/* Table Styling */
.scale-table-container[b-yfystguu6g] {
    overflow-x: auto;
}

.scale-table[b-yfystguu6g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .scale-table th[b-yfystguu6g],
    .scale-table td[b-yfystguu6g] {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .scale-table th[b-yfystguu6g] {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background-color: rgba(0, 0, 0, 0.02);
        position: sticky;
        top: 0;
        z-index: 10;
    }

.theme-dark .scale-table th[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-table tbody tr:last-child td[b-yfystguu6g] {
    border-bottom: none;
}

.scale-table tbody tr[b-yfystguu6g] {
    transition: var(--hover-transition);
}

    .scale-table tbody tr:hover[b-yfystguu6g] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.theme-dark .scale-table tbody tr:hover[b-yfystguu6g] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-row-updated[b-yfystguu6g] {
    animation: scale-row-highlight-b-yfystguu6g 3s ease-out;
}

@keyframes scale-row-highlight-b-yfystguu6g {
    0% {
        background-color: rgba(var(--primary-rgb), 0.2);
    }

    100% {
        background-color: transparent;
    }
}

.scale-row-online[b-yfystguu6g] {
    border-left: 3px solid var(--success);
}

.scale-row-offline[b-yfystguu6g] {
    border-left: 3px solid var(--danger);
}

.scale-row-stale[b-yfystguu6g] {
    border-left: 3px solid var(--warning);
}

/* Compact Table View */
.scale-table.compact td[b-yfystguu6g],
.scale-table.compact th[b-yfystguu6g] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

/* Status Indicator */
.scale-status-indicator[b-yfystguu6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: var(--hover-transition);
}

.scale-table tr:hover .scale-status-indicator[b-yfystguu6g] {
    transform: scale(1.05);
}

.scale-status-indicator.scale-status-online[b-yfystguu6g] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.scale-status-indicator.scale-status-offline[b-yfystguu6g] {
    background-color: rgba(var(--danger-rgb), 0.15);
    color: var(--danger);
}

.scale-status-indicator.scale-status-stale[b-yfystguu6g] {
    background-color: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
}

.scale-status-indicator.scale-status-unknown[b-yfystguu6g] {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

.theme-dark .scale-status-indicator.scale-status-unknown[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Table Data Formatting */
.scale-reading-formatted[b-yfystguu6g] {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    transition: var(--hover-transition);
}

.scale-table tr:hover .scale-reading-formatted[b-yfystguu6g] {
    color: var(--primary-color);
}

.scale-no-data[b-yfystguu6g] {
    color: var(--text-muted);
    font-style: italic;
}

.scale-device[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.scale-timestamp[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.scale-timeago[b-yfystguu6g] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.1875rem;
    transition: var(--hover-transition);
}

.scale-table tr:hover .scale-timeago[b-yfystguu6g] {
    color: var(--text-secondary);
}

.scale-timestamp-stale[b-yfystguu6g] {
    color: var(--warning) !important;
    font-weight: 500;
}

.scale-device-name[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.scale-count[b-yfystguu6g] {
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--primary-light);
    padding: 0.1875rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    display: inline-block;
    transition: var(--hover-transition);
}

.scale-table tr:hover .scale-count[b-yfystguu6g] {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

/* Empty State */
.scale-empty-state[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    gap: 0.625rem;
}

    .scale-empty-state i[b-yfystguu6g] {
    }

    .scale-empty-state p[b-yfystguu6g] {
        margin: 0;
        font-size: 0.9375rem;
    }

.scale-empty-table[b-yfystguu6g] {
    padding: 3rem 1rem !important;
    text-align: center;
}

/* Empty Data Message */
.scale-no-data-message[b-yfystguu6g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: 0.5rem;
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-no-data-message[b-yfystguu6g] {
    color: var(--text-secondary);
}

.scale-no-data-message i[b-yfystguu6g] {
    font-size: 0.875rem;
}

/* Progress Indicators */
.scale-progress-percentage[b-yfystguu6g] {
    font-size: 0.75rem;
    font-weight: 600;
}

    .scale-progress-percentage.excellent[b-yfystguu6g] {
        color: var(--success);
    }

    .scale-progress-percentage.good[b-yfystguu6g] {
        color: #22c55e;
    }

    .scale-progress-percentage.average[b-yfystguu6g] {
        color: #eab308;
    }

    .scale-progress-percentage.low[b-yfystguu6g] {
        color: #f97316;
    }

/* Notification */
.scale-notification[b-yfystguu6g] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background-color: var(--content-bg);
    border-radius: 0.625rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-color);
    max-width: 380px;
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1000;
}

.scale-notification-show[b-yfystguu6g] {
    transform: translateX(0);
    opacity: 1;
}

.scale-notification i[b-yfystguu6g] {
    font-size: 1.25rem;
    color: var(--primary-color);
    animation: notification-icon-pop-b-yfystguu6g 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes notification-icon-pop-b-yfystguu6g {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-notification-content[b-yfystguu6g] {
    flex-grow: 1;
}

    .scale-notification-content h4[b-yfystguu6g] {
        margin: 0 0 0.25rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .scale-notification-content p[b-yfystguu6g] {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

.scale-notification-close[b-yfystguu6g] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-notification-close:hover[b-yfystguu6g] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-notification-close:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dialog Styling */
.scale-dialog[b-yfystguu6g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(3px);
}

.scale-dialog-show[b-yfystguu6g] {
    opacity: 1;
    visibility: visible;
}

.scale-dialog-content[b-yfystguu6g] {
    width: 100%;
    max-width: 550px;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-color);
}

.scale-dialog-show .scale-dialog-content[b-yfystguu6g] {
    transform: translateY(0) scale(1);
}

.scale-dialog-header[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .scale-dialog-header[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-dialog-header h3[b-yfystguu6g] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-dialog-header h3[b-yfystguu6g]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }

.scale-dialog-close[b-yfystguu6g] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-dialog-close:hover[b-yfystguu6g] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-dialog-close:hover[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.1);
}

.scale-dialog-body[b-yfystguu6g] {
    padding: 1.25rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.scale-dialog-footer[b-yfystguu6g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .scale-dialog-footer[b-yfystguu6g] {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Target Dialog Form */
.target-form[b-yfystguu6g], .priority-form[b-yfystguu6g], .amendment-form[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.target-item[b-yfystguu6g], .priority-item[b-yfystguu6g] {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    transition: var(--hover-transition);
}

    .target-item:hover[b-yfystguu6g], .priority-item:hover[b-yfystguu6g] {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .target-item h4[b-yfystguu6g], .priority-item h4[b-yfystguu6g], .priority-group h4[b-yfystguu6g] {
        margin: 0 0 0.75rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.target-inputs[b-yfystguu6g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.input-group[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

    .input-group label[b-yfystguu6g] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
        transition: var(--hover-transition);
    }

    .input-group input:focus + label[b-yfystguu6g] {
        color: var(--primary-color);
    }

    .input-group input[b-yfystguu6g] {
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid var(--border-color);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: var(--hover-transition);
    }

        .input-group input:focus[b-yfystguu6g] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

.input-help[b-yfystguu6g] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: -0.25rem 0 0.375rem 0;
}

.priority-help[b-yfystguu6g] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}

.priority-group[b-yfystguu6g] {
    margin-bottom: 1.25rem;
}

.priority-items[b-yfystguu6g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.priority-item[b-yfystguu6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--content-bg);
    transition: var(--hover-transition);
}

    .priority-item:hover[b-yfystguu6g] {
        background-color: rgba(var(--primary-rgb), 0.05);
        border-color: var(--primary-color);
    }

.priority-scale[b-yfystguu6g] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.priority-control[b-yfystguu6g] {
    width: 80px;
}

    .priority-control input[b-yfystguu6g] {
        width: 100%;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid var(--border-color);
        background-color: var(--body-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        text-align: center;
        transition: var(--hover-transition);
    }

        .priority-control input:focus[b-yfystguu6g] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .scale-dashboard-overview[b-yfystguu6g] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .scale-group-header[b-yfystguu6g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .scale-group-stats[b-yfystguu6g] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .scale-dashboard[b-yfystguu6g] {
        padding: 0.875rem;
    }

    .scale-dashboard-header[b-yfystguu6g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .scale-dashboard-actions[b-yfystguu6g] {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .scale-dashboard-filters[b-yfystguu6g] {
        flex-direction: column;
        align-items: stretch;
    }

    .scale-filter-buttons[b-yfystguu6g] {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .scale-filter-button[b-yfystguu6g] {
        margin-bottom: 0.375rem;
    }

    .scale-dashboard-overview[b-yfystguu6g] {
        grid-template-columns: 1fr;
    }

    .scale-readings-grid[b-yfystguu6g] {
        grid-template-columns: 1fr;
    }

    .scale-reading-value[b-yfystguu6g] {
        font-size: 1.5rem;
    }

    .scale-reading-main[b-yfystguu6g] {
        flex-direction: column;
    }

    .scale-period-header[b-yfystguu6g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .scale-time-navigation[b-yfystguu6g] {
        padding: 0.75rem;
    }

    .scale-period-selector[b-yfystguu6g] {
        width: 100%;
        margin-bottom: 0.75rem;
    }

        .scale-period-selector button[b-yfystguu6g] {
            flex: 1;
            justify-content: center;
        }

    .scale-dialog-content[b-yfystguu6g] {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .target-inputs[b-yfystguu6g] {
        grid-template-columns: 1fr;
    }

    .scale-dialog-footer[b-yfystguu6g] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .scale-dialog-footer .scale-button[b-yfystguu6g] {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .scale-dashboard-actions[b-yfystguu6g] {
        gap: 0.5rem;
    }

    .scale-button[b-yfystguu6g] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

        .scale-button span[b-yfystguu6g] {
            display: none;
        }

        .scale-button i[b-yfystguu6g] {
            margin-right: 0;
        }

    .scale-refresh-button[b-yfystguu6g] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

        .scale-refresh-button span[b-yfystguu6g] {
            display: none;
        }

    .scale-table th[b-yfystguu6g] {
        font-size: 0.625rem;
    }

    .scale-table td[b-yfystguu6g] {
        font-size: 0.75rem;
    }

    .scale-table.compact td[b-yfystguu6g],
    .scale-table.compact th[b-yfystguu6g] {
        padding: 0.375rem 0.5rem;
    }

    .scale-reading-title h3[b-yfystguu6g] {
        font-size: 0.875rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleAmendMents.razor.rz.scp.css */
/* Base Variables & General Styles */
:root[b-3qshbsuws6] {
    --animation-timing: 0.3s;
    --hover-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --card-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hover-scale: scale(1.05);
}

/* Base Dashboard Structure */
.scale-dashboard[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem;
    background-color: var(--body-bg);
    font-family: 'Inter', sans-serif;
    position: relative;
    animation: fade-in-b-3qshbsuws6 0.5s ease-out;
}

@keyframes fade-in-b-3qshbsuws6 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Styling */
.scale-dashboard-header[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.scale-dashboard-title h1[b-3qshbsuws6] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

    .scale-dashboard-title h1[b-3qshbsuws6]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

.scale-dashboard-title:hover h1[b-3qshbsuws6]::after {
    transform: scaleX(1);
}

.scale-dashboard-subtitle[b-3qshbsuws6] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    transition: var(--hover-transition);
}

.scale-dashboard-title:hover .scale-dashboard-subtitle[b-3qshbsuws6] {
    opacity: 1;
}

.scale-dashboard-actions[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Loading Indicators */
.scale-loading[b-3qshbsuws6],
.filter-loading[b-3qshbsuws6],
.history-loading[b-3qshbsuws6],
.chart-loading[b-3qshbsuws6],
.month-loading-indicator[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
    animation: fade-pulse-b-3qshbsuws6 2s infinite alternate;
}

.scale-loading[b-3qshbsuws6] {
    min-height: 400px;
}

.filter-loading[b-3qshbsuws6],
.history-loading[b-3qshbsuws6] {
    min-height: 200px;
}

.chart-loading[b-3qshbsuws6] {
    min-height: 250px;
    width: 100%;
    background-color: rgba(var(--primary-rgb), 0.05);
    border-radius: 0.5rem;
}

.month-loading-indicator[b-3qshbsuws6] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    flex-direction: row;
}

.scale-spinner[b-3qshbsuws6],
.filter-spinner[b-3qshbsuws6],
.history-spinner[b-3qshbsuws6],
.chart-spinner[b-3qshbsuws6],
.month-spinner[b-3qshbsuws6],
.loading-spinner[b-3qshbsuws6] {
    border-radius: 50%;
    border: 4px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    animation: scale-spin-b-3qshbsuws6 1s infinite cubic-bezier(0.41, 0.26, 0.54, 0.94);
}

.scale-spinner[b-3qshbsuws6] {
    width: 48px;
    height: 48px;
}

.filter-spinner[b-3qshbsuws6],
.history-spinner[b-3qshbsuws6],
.chart-spinner[b-3qshbsuws6] {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

.month-spinner[b-3qshbsuws6] {
    width: 18px;
    height: 18px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.loading-spinner[b-3qshbsuws6] {
    width: 20px;
    height: 20px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.scale-loading p[b-3qshbsuws6],
.filter-loading p[b-3qshbsuws6],
.history-loading p[b-3qshbsuws6],
.chart-loading span[b-3qshbsuws6] {
    font-size: 1rem;
    margin: 0;
}

@keyframes scale-spin-b-3qshbsuws6 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fade-pulse-b-3qshbsuws6 {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* Button Styles */
.scale-button[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .scale-button:hover[b-3qshbsuws6] {
        background-color: var(--nav-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .scale-button:active[b-3qshbsuws6] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Button Variants */
    .scale-button.icon[b-3qshbsuws6] {
        padding: 0.375rem;
        width: 32px;
        height: 32px;
        justify-content: center;
        font-size: 0.875rem;
        background-color: transparent;
        border: none;
        color: var(--text-secondary);
    }

        .scale-button.icon:hover[b-3qshbsuws6] {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
            transform: translateY(0);
            box-shadow: none;
        }

.theme-dark .scale-button.icon:hover[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.05);
}

.scale-button.primary[b-3qshbsuws6] {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

    .scale-button.primary:hover[b-3qshbsuws6] {
        background-color: var(--primary-hover);
        box-shadow: 0 4px 6px rgba(var(--primary-rgb), 0.3);
    }

.scale-button.success[b-3qshbsuws6] {
    background-color: var(--success);
    color: white;
    border: none;
}

    .scale-button.success:hover[b-3qshbsuws6] {
        background-color: var(--success-hover);
        box-shadow: 0 4px 6px rgba(var(--success-rgb), 0.3);
    }

.scale-button.danger[b-3qshbsuws6] {
    background-color: var(--danger);
    color: white;
    border: none;
}

    .scale-button.danger:hover[b-3qshbsuws6] {
        background-color: var(--danger-hover);
        box-shadow: 0 4px 6px rgba(var(--danger-rgb), 0.3);
    }

.scale-button.warning[b-3qshbsuws6] {
    background-color: var(--warning);
    color: white;
    border: none;
}

    .scale-button.warning:hover[b-3qshbsuws6] {
        background-color: var(--warning-hover);
        box-shadow: 0 4px 6px rgba(var(--warning-rgb), 0.3);
    }

.scale-button.secondary[b-3qshbsuws6] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

    .scale-button.secondary:hover[b-3qshbsuws6] {
        border-color: var(--text-primary);
        color: var(--text-primary);
    }

.scale-button.small[b-3qshbsuws6] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    height: auto;
}

.scale-button.loading[b-3qshbsuws6] {
    opacity: 0.8;
    pointer-events: none;
    cursor: progress;
}

/* Special Refresh Button */
.scale-refresh-button[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .scale-refresh-button:hover[b-3qshbsuws6] {
        background-color: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(var(--primary-rgb), 0.3);
    }

    .scale-refresh-button:active[b-3qshbsuws6] {
        transform: translateY(0);
    }

    .scale-refresh-button i[b-3qshbsuws6] {
        transition: transform 0.3s ease;
    }

    .scale-refresh-button:hover i[b-3qshbsuws6] {
        transform: rotate(180deg);
    }

/* Month Navigator */
.month-navigator[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
    position: relative;
    flex-wrap: wrap;
}

    .month-navigator:hover[b-3qshbsuws6] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.month-nav-button[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--body-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--hover-transition);
    flex-shrink: 0;
}

    .month-nav-button:hover[b-3qshbsuws6] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: scale(1.1);
    }

    .month-nav-button.disabled[b-3qshbsuws6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

        .month-nav-button.disabled:hover[b-3qshbsuws6] {
            background-color: var(--body-bg);
            color: var(--text-secondary);
            border-color: var(--border-color);
            transform: none;
        }

.current-month[b-3qshbsuws6] {
    flex-grow: 1;
    position: relative;
    min-width: 200px;
}

    .current-month h2[b-3qshbsuws6] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.month-range[b-3qshbsuws6] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.month-select-container[b-3qshbsuws6] {
    position: relative;
    min-width: 180px;
}

    .month-select-container select[b-3qshbsuws6],
    #monthSelector[b-3qshbsuws6] {
        width: 100%;
        padding: 0.5rem 2rem 0.5rem 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid var(--border-color);
        background-color: var(--body-bg);
        color: var(--text-primary);
        font-size: 0.8125rem;
        transition: var(--hover-transition);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2354656f'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1em;
    }

        .month-select-container select:focus[b-3qshbsuws6],
        #monthSelector:focus[b-3qshbsuws6] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
        }

    .month-select-container label[b-3qshbsuws6] {
        position: absolute;
        top: -0.625rem;
        left: 0.75rem;
        padding: 0 0.25rem;
        background-color: var(--body-bg);
        color: var(--text-secondary);
        font-size: 0.6875rem;
        font-weight: 600;
        transition: var(--hover-transition);
    }

    .month-select-container select:focus + label[b-3qshbsuws6] {
        color: var(--primary-color);
    }

/* Dashboard Overview Cards */
.scale-dashboard-overview[b-3qshbsuws6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    animation: slide-in-right-b-3qshbsuws6 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.2s;
}

@keyframes slide-in-right-b-3qshbsuws6 {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scale-stats-card[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: var(--card-transition);
    overflow: hidden;
    position: relative;
    animation: card-slide-up-b-3qshbsuws6 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes card-slide-up-b-3qshbsuws6 {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-stats-card:nth-child(1)[b-3qshbsuws6] {
    animation-delay: 0.1s;
}

.scale-stats-card:nth-child(2)[b-3qshbsuws6] {
    animation-delay: 0.2s;
}

.scale-stats-card:nth-child(3)[b-3qshbsuws6] {
    animation-delay: 0.3s;
}

.scale-stats-card:nth-child(4)[b-3qshbsuws6] {
    animation-delay: 0.4s;
}

.scale-stats-card:hover[b-3qshbsuws6] {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.scale-stats-card[b-3qshbsuws6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--primary-color);
}

.scale-total-scales[b-3qshbsuws6]::before {
    background-color: var(--primary-color);
}

.scale-online-scales[b-3qshbsuws6]::before {
    background-color: var(--success);
}

.scale-data-sources[b-3qshbsuws6]::before {
    background-color: var(--danger);
}

.scale-last-reading[b-3qshbsuws6]::before {
    background-color: var(--info);
}

.scale-stats-icon[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-right: 0.875rem;
    flex-shrink: 0;
    font-size: 1.375rem;
    transition: var(--hover-transition);
}

.scale-stats-card:hover .scale-stats-icon[b-3qshbsuws6] {
    transform: scale(1.1);
}

.scale-total-scales .scale-stats-icon[b-3qshbsuws6] {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

.scale-online-scales .scale-stats-icon[b-3qshbsuws6] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.scale-data-sources .scale-stats-icon[b-3qshbsuws6] {
    background-color: rgba(var(--danger-rgb), 0.15);
    color: var(--danger);
}

.scale-last-reading .scale-stats-icon[b-3qshbsuws6] {
    background-color: rgba(var(--info-rgb), 0.15);
    color: var(--info);
}

.scale-stats-content[b-3qshbsuws6] {
    flex-grow: 1;
}

    .scale-stats-content h3[b-3qshbsuws6] {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
        transition: var(--hover-transition);
    }

.scale-stats-card:hover .scale-stats-content h3[b-3qshbsuws6] {
    color: var(--text-primary);
}

.scale-stats-value[b-3qshbsuws6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    transition: var(--hover-transition);
}

.scale-stats-card:hover .scale-stats-value[b-3qshbsuws6] {
    transform: scale(1.05);
    transform-origin: left;
}

.scale-stats-detail[b-3qshbsuws6] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

/* Value styling for positive/negative amounts */
.positive-value[b-3qshbsuws6] {
    color: var(--success);
    font-weight: 600;
}

.negative-value[b-3qshbsuws6] {
    color: var(--danger);
    font-weight: 600;
}

.warning-value[b-3qshbsuws6] {
    color: var(--warning);
    font-weight: 600;
}

.scale-stats-value.positive[b-3qshbsuws6] {
    color: var(--success);
}

.scale-stats-value.negative[b-3qshbsuws6] {
    color: var(--danger);
}

/* Filter and Search */
.scale-dashboard-filters[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--hover-transition);
}

    .scale-dashboard-filters:hover[b-3qshbsuws6] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.group-filter-dropdown[b-3qshbsuws6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
    flex-grow: 1;
    max-width: 300px;
}

.group-filter-select[b-3qshbsuws6] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border-radius: 0.375rem 0 0 0.375rem;
    border: 1px solid var(--border-color);
    border-right: none;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2354656f'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1em;
}

.filter-apply-btn[b-3qshbsuws6] {
    height: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
    background-color: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .filter-apply-btn:hover[b-3qshbsuws6] {
        background-color: var(--primary-hover);
    }

.group-filter-select:focus[b-3qshbsuws6] {
    outline: none;
    border-color: var(--primary-color);
}

.group-filter-dropdown label[b-3qshbsuws6] {
    position: absolute;
    top: -0.625rem;
    left: 0.75rem;
    padding: 0 0.25rem;
    background-color: var(--content-bg);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    transition: var(--hover-transition);
}

.group-filter-select:focus + label[b-3qshbsuws6] {
    color: var(--primary-color);
}

.scale-search-container[b-3qshbsuws6] {
    position: relative;
    display: flex;
    min-width: 220px;
    flex-grow: 1;
    max-width: 400px;
}

.scale-search-icon[b-3qshbsuws6] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

.scale-search-input[b-3qshbsuws6] {
    width: 100%;
    padding: 0.5rem 4rem 0.5rem 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

    .scale-search-input:focus[b-3qshbsuws6] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    }

        .scale-search-input:focus ~ .scale-search-icon[b-3qshbsuws6] {
            color: var(--primary-color);
        }

.scale-search-button[b-3qshbsuws6] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.5rem;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-search-button:hover[b-3qshbsuws6] {
        background-color: var(--primary-hover);
    }

.scale-search-clear[b-3qshbsuws6] {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-search-clear:hover[b-3qshbsuws6] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: translateY(-50%) scale(1.2);
    }

.theme-dark .scale-search-clear:hover[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* View Toggle */
.view-toggle[b-3qshbsuws6] {
    display: flex;
    background-color: var(--body-bg);
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

    .view-toggle button[b-3qshbsuws6] {
        padding: 0.5rem 0.75rem;
        background-color: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .view-toggle button:hover[b-3qshbsuws6] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

        .view-toggle button.active[b-3qshbsuws6] {
            background-color: var(--primary-color);
            color: white;
        }

/* Production Trend Chart */
.production-trend-chart[b-3qshbsuws6] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
    position: relative;
}

    .production-trend-chart:hover[b-3qshbsuws6] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.chart-header[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

    .chart-header h2[b-3qshbsuws6] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.chart-actions[b-3qshbsuws6] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.chart-view-selector[b-3qshbsuws6],
.chart-period-selector[b-3qshbsuws6] {
    display: flex;
    background-color: var(--body-bg);
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

    .chart-view-selector button[b-3qshbsuws6],
    .chart-period-selector button[b-3qshbsuws6] {
        padding: 0.5rem 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        background-color: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .chart-view-selector button:hover[b-3qshbsuws6],
        .chart-period-selector button:hover[b-3qshbsuws6] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

        .chart-view-selector button.active[b-3qshbsuws6],
        .chart-period-selector button.active[b-3qshbsuws6] {
            background-color: var(--primary-color);
            color: white;
        }

.chart-container[b-3qshbsuws6] {
    display: flex;
    height: 250px;
    position: relative;
}

.chart-y-axis[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    width: 60px;
    text-align: right;
    position: relative;
}

.y-axis-label[b-3qshbsuws6] {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.chart-y-axis[b-3qshbsuws6]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--border-color);
}

.chart-content[b-3qshbsuws6] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-grow: 1;
    height: 100%;
    padding-top: 20px;
    background-image: linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
    background-size: 100% 25%;
    background-position: 0 0;
    background-repeat: repeat-y;
}

.chart-month[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 0 0.25rem;
    position: relative;
    transition: var(--hover-transition);
    cursor: pointer;
}

    .chart-month:hover[b-3qshbsuws6] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

    .chart-month.selected[b-3qshbsuws6] {
        background-color: rgba(var(--primary-rgb), 0.1);
    }

.chart-bars[b-3qshbsuws6] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    height: calc(100% - 25px);
    width: 100%;
    align-items: flex-end;
}

.chart-bar[b-3qshbsuws6] {
    width: 20px;
    background-color: var(--primary-color);
    transition: height 0.5s ease;
    position: relative;
    border-radius: 2px 2px 0 0;
}

    .chart-bar.production[b-3qshbsuws6] {
        background-color: var(--primary-color);
    }

    .chart-bar.target[b-3qshbsuws6] {
        background-color: rgba(var(--warning-rgb), 0.7);
    }

    .chart-bar.positive[b-3qshbsuws6] {
        background-color: var(--success);
    }

    .chart-bar.negative[b-3qshbsuws6] {
        background-color: var(--danger);
    }

.bar-tooltip[b-3qshbsuws6] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-primary);
    color: white;
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

    .bar-tooltip[b-3qshbsuws6]::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--text-primary) transparent transparent transparent;
    }

.chart-bar:hover .bar-tooltip[b-3qshbsuws6] {
    opacity: 1;
}

.chart-x-label[b-3qshbsuws6] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    text-align: center;
}

/* Scale Group Sections */
.scale-group-section[b-3qshbsuws6] {
    margin-bottom: 1.25rem;
    animation: fade-in-up-b-3qshbsuws6 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.3s;
}

@keyframes fade-in-up-b-3qshbsuws6 {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-group-header[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .scale-group-header:hover[b-3qshbsuws6] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

.group-header-info[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scale-group-header h2[b-3qshbsuws6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-group-header h2[b-3qshbsuws6]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }

.scale-group-stats[b-3qshbsuws6] {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    align-items: center;
    flex-wrap: wrap;
}

    .scale-group-stats span[b-3qshbsuws6] {
        background-color: rgba(var(--primary-rgb), 0.08);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
    }

/* Scale Cards Grid */
.scale-cards-grid[b-3qshbsuws6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.scale-production-card[b-3qshbsuws6] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .scale-production-card:hover[b-3qshbsuws6] {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-color);
    }

.scale-card-header[b-3qshbsuws6] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(var(--primary-rgb), 0.05);
}

    .scale-card-header h3[b-3qshbsuws6] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.scale-card-desc[b-3qshbsuws6] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scale-card-stats[b-3qshbsuws6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem;
}

.card-stat[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background-color: var(--body-bg);
    border-radius: 0.375rem;
}

.stat-label[b-3qshbsuws6] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value[b-3qshbsuws6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scale-card-progress[b-3qshbsuws6] {
    padding: 0 1rem 1rem;
}

.progress-label[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.progress-bar[b-3qshbsuws6] {
    height: 6px;
    width: 100%;
    background-color: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-original[b-3qshbsuws6] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(var(--primary-rgb), 0.4);
    transition: width 0.5s ease;
    z-index: 1;
}

.progress-adjusted[b-3qshbsuws6] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.5s ease;
    z-index: 2;
}

.progress-labels[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.scale-card-actions[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--body-bg);
    border-top: 1px solid var(--border-color);
}

/* Empty Data States */
.empty-data-state[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 1.25rem;
}

    .empty-data-state i[b-3qshbsuws6] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        opacity: 0.4;
    }

    .empty-data-state h3[b-3qshbsuws6] {
        margin: 0 0 0.5rem;
        color: var(--text-primary);
        font-size: 1.25rem;
    }

    .empty-data-state p[b-3qshbsuws6] {
        margin: 0 0 1.5rem;
        color: var(--text-secondary);
    }

.scale-empty-state[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

    .scale-empty-state i[b-3qshbsuws6] {
    }

    .scale-empty-state p[b-3qshbsuws6] {
        margin: 0 0 0.75rem;
        color: var(--text-secondary);
    }

/* Table Styling */
.scale-table-container[b-3qshbsuws6] {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.responsive-table-container[b-3qshbsuws6] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.scale-table[b-3qshbsuws6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .scale-table th[b-3qshbsuws6],
    .scale-table td[b-3qshbsuws6] {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .scale-table th[b-3qshbsuws6] {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background-color: rgba(0, 0, 0, 0.02);
        position: sticky;
        top: 0;
        z-index: 10;
    }

.theme-dark .scale-table th[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-table tbody tr:last-child td[b-3qshbsuws6] {
    border-bottom: none;
}

.scale-table tbody tr[b-3qshbsuws6] {
    transition: var(--hover-transition);
}

    .scale-table tbody tr:hover[b-3qshbsuws6] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.theme-dark .scale-table tbody tr:hover[b-3qshbsuws6] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-row-positive[b-3qshbsuws6] {
    background-color: rgba(var(--success-rgb), 0.05);
}

    .scale-row-positive:hover[b-3qshbsuws6] {
        background-color: rgba(var(--success-rgb), 0.1);
    }

.scale-row-negative[b-3qshbsuws6] {
    background-color: rgba(var(--danger-rgb), 0.05);
}

    .scale-row-negative:hover[b-3qshbsuws6] {
        background-color: rgba(var(--danger-rgb), 0.1);
    }

/* Row actions */
.scale-row-actions[b-3qshbsuws6] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Empty Table State */
.scale-empty-table[b-3qshbsuws6] {
    padding: 3rem 1rem !important;
    text-align: center;
}

/* Panel Styling */
.scale-panel[b-3qshbsuws6] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--card-transition);
    margin-bottom: 1.25rem;
}

    .scale-panel:hover[b-3qshbsuws6] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

.scale-panel-header[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    transition: var(--hover-transition);
}

.scale-panel:hover .scale-panel-header[b-3qshbsuws6] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.theme-dark .scale-panel-header[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.02);
}

.theme-dark .scale-panel:hover .scale-panel-header[b-3qshbsuws6] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-panel-header h2[b-3qshbsuws6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-panel-header h2[b-3qshbsuws6]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transition: var(--hover-transition);
    }

.scale-panel:hover .scale-panel-header h2[b-3qshbsuws6]::before {
    height: 20px;
}

.scale-panel-actions[b-3qshbsuws6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.scale-panel-action[b-3qshbsuws6] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-panel-action:hover[b-3qshbsuws6] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .scale-panel-action i[b-3qshbsuws6] {
        transition: transform 0.3s ease;
    }

    .scale-panel-action:hover i[b-3qshbsuws6] {
        transform: rotate(180deg);
    }

.scale-panel-content[b-3qshbsuws6] {
    padding: 0;
}

/* Dialog Styling */
.scale-dialog[b-3qshbsuws6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(3px);
}

.scale-dialog-show[b-3qshbsuws6] {
    opacity: 1;
    visibility: visible;
}

.scale-dialog-content[b-3qshbsuws6] {
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.scale-dialog-lg[b-3qshbsuws6] {
    max-width: 800px;
}

.scale-dialog-show .scale-dialog-content[b-3qshbsuws6] {
    transform: translateY(0) scale(1);
}

.scale-dialog-header[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
}

.theme-dark .scale-dialog-header[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-dialog-header h3[b-3qshbsuws6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-dialog-header h3[b-3qshbsuws6]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }

.scale-dialog-close[b-3qshbsuws6] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-dialog-close:hover[b-3qshbsuws6] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-dialog-close:hover[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.1);
}

.scale-dialog-body[b-3qshbsuws6] {
    padding: 1.25rem;
    overflow-y: auto;
    flex-grow: 1;
}

.scale-dialog-footer[b-3qshbsuws6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
}

.theme-dark .scale-dialog-footer[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Scale History Dialog */
.scale-history-chart[b-3qshbsuws6],
.scale-history-table[b-3qshbsuws6],
.scale-history-adjustments[b-3qshbsuws6] {
    margin-bottom: 1.5rem;
}

    .scale-history-chart h4[b-3qshbsuws6],
    .scale-history-table h4[b-3qshbsuws6],
    .scale-history-adjustments h4[b-3qshbsuws6] {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }

.chart-placeholder[b-3qshbsuws6] {
    background-color: var(--body-bg);
    border-radius: 0.5rem;
    height: 200px;
    overflow: hidden;
    position: relative;
}

/* Form Styling */
.form-group[b-3qshbsuws6] {
    margin-bottom: 1rem;
}

    .form-group label[b-3qshbsuws6] {
        display: block;
        margin-bottom: 0.375rem;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--text-primary);
    }

    .form-group input[b-3qshbsuws6],
    .form-group select[b-3qshbsuws6],
    .form-group textarea[b-3qshbsuws6] {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        background-color: var(--body-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: var(--hover-transition);
    }

    .form-group textarea[b-3qshbsuws6] {
        resize: vertical;
        min-height: 80px;
    }

        .form-group input:focus[b-3qshbsuws6],
        .form-group select:focus[b-3qshbsuws6],
        .form-group textarea:focus[b-3qshbsuws6] {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
            outline: none;
        }

    .form-group small[b-3qshbsuws6] {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

.validation-error[b-3qshbsuws6] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Adjustment Impact Preview */
.adjustment-impact-preview[b-3qshbsuws6] {
    background-color: var(--body-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin-top: 1.25rem;
}

    .adjustment-impact-preview h4[b-3qshbsuws6] {
        margin: 0 0 0.875rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.impact-grid[b-3qshbsuws6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.impact-item[b-3qshbsuws6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.impact-label[b-3qshbsuws6] {
    color: var(--text-secondary);
}

.impact-value[b-3qshbsuws6] {
    font-weight: 600;
    color: var(--text-primary);
}

.impact-progress[b-3qshbsuws6] {
    margin-top: 1rem;
}

.progress-bar-container[b-3qshbsuws6] {
    width: 100%;
}

/* Confirmation Messages */
.confirmation-message[b-3qshbsuws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

    .confirmation-message i[b-3qshbsuws6] {
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }

    .confirmation-message p[b-3qshbsuws6] {
        margin: 0.25rem 0;
        font-size: 0.9375rem;
        color: var(--text-secondary);
    }

    .confirmation-message.warning[b-3qshbsuws6] {
        background-color: rgba(var(--warning-rgb), 0.1);
        border: 1px solid rgba(var(--warning-rgb), 0.3);
    }

        .confirmation-message.warning i[b-3qshbsuws6] {
            color: var(--warning);
        }

    .confirmation-message.danger[b-3qshbsuws6] {
        background-color: rgba(var(--danger-rgb), 0.1);
        border: 1px solid rgba(var(--danger-rgb), 0.3);
    }

        .confirmation-message.danger i[b-3qshbsuws6] {
            color: var(--danger);
        }

    .confirmation-message.success[b-3qshbsuws6] {
        background-color: rgba(var(--success-rgb), 0.1);
        border: 1px solid rgba(var(--success-rgb), 0.3);
    }

        .confirmation-message.success i[b-3qshbsuws6] {
            color: var(--success);
        }

/* Notification */
.scale-notification[b-3qshbsuws6] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background-color: var(--content-bg);
    border-radius: 0.625rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-color);
    max-width: 380px;
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1000;
}

.scale-notification-show[b-3qshbsuws6] {
    transform: translateX(0);
    opacity: 1;
}

.scale-notification i[b-3qshbsuws6] {
    font-size: 1.25rem;
    color: var(--primary-color);
    animation: notification-icon-pop-b-3qshbsuws6 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes notification-icon-pop-b-3qshbsuws6 {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-notification-content[b-3qshbsuws6] {
    flex-grow: 1;
}

    .scale-notification-content h4[b-3qshbsuws6] {
        margin: 0 0 0.25rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .scale-notification-content p[b-3qshbsuws6] {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

.scale-notification-close[b-3qshbsuws6] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-notification-close:hover[b-3qshbsuws6] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-notification-close:hover[b-3qshbsuws6] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .scale-dashboard-overview[b-3qshbsuws6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .scale-stats-icon[b-3qshbsuws6] {
        width: 42px;
        height: 42px;
        font-size: 1.125rem;
    }

    .scale-stats-value[b-3qshbsuws6] {
        font-size: 1.25rem;
    }

    .scale-cards-grid[b-3qshbsuws6] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .scale-dashboard-title h1[b-3qshbsuws6] {
        font-size: 1.5rem;
    }

    .chart-header[b-3qshbsuws6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-actions[b-3qshbsuws6] {
        width: 100%;
        justify-content: space-between;
    }

    .scale-group-header[b-3qshbsuws6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .scale-group-stats[b-3qshbsuws6] {
        flex-wrap: wrap;
        width: 100%;
    }

    .impact-grid[b-3qshbsuws6] {
        grid-template-columns: 1fr 1fr;
    }

    .chart-month[b-3qshbsuws6] {
        padding: 0 0.15rem;
    }

    .chart-bar[b-3qshbsuws6] {
        width: 15px;
    }

    .chart-container[b-3qshbsuws6] {
        height: 200px;
    }

    .chart-x-label[b-3qshbsuws6] {
        max-width: 70px;
        font-size: 0.625rem;
    }
}

@media (max-width: 768px) {
    .scale-dashboard[b-3qshbsuws6] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .scale-dashboard-header[b-3qshbsuws6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .scale-dashboard-actions[b-3qshbsuws6] {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .month-navigator[b-3qshbsuws6] {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
    }

    .current-month[b-3qshbsuws6] {
        order: -1;
        text-align: center;
        margin-bottom: 0.75rem;
    }

    .month-nav-buttons[b-3qshbsuws6] {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .month-select-container[b-3qshbsuws6] {
        width: 100%;
        margin-top: 0.75rem;
    }

    .scale-dashboard-filters[b-3qshbsuws6] {
        flex-direction: column;
        align-items: stretch;
    }

    .group-filter-dropdown[b-3qshbsuws6],
    .scale-search-container[b-3qshbsuws6] {
        max-width: 100%;
    }

    .chart-container[b-3qshbsuws6] {
        height: 200px;
    }

    .chart-bar[b-3qshbsuws6] {
        width: 10px;
    }

    .chart-view-selector button span[b-3qshbsuws6] {
        display: none;
    }

    .chart-view-selector button i[b-3qshbsuws6] {
        font-size: 1rem;
    }

    .chart-view-selector button[b-3qshbsuws6],
    .chart-period-selector button[b-3qshbsuws6] {
        padding: 0.5rem;
    }

    .chart-y-axis[b-3qshbsuws6] {
        width: 40px;
    }

    .y-axis-label[b-3qshbsuws6] {
        font-size: 0.625rem;
    }

    .chart-x-label[b-3qshbsuws6] {
        max-width: 50px;
        font-size: 0.625rem;
    }

    .scale-cards-grid[b-3qshbsuws6] {
        grid-template-columns: 1fr;
    }

    .scale-dialog-content[b-3qshbsuws6] {
        width: calc(100% - 2rem);
        max-height: 80vh;
    }
}

@media (max-width: 576px) {
    .scale-dashboard-overview[b-3qshbsuws6] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .scale-stats-card[b-3qshbsuws6] {
        padding: 0.875rem;
    }

    .scale-stats-icon[b-3qshbsuws6] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .scale-stats-value[b-3qshbsuws6] {
        font-size: 1.125rem;
    }

    .scale-stats-detail[b-3qshbsuws6] {
        font-size: 0.625rem;
    }

    .scale-dashboard-actions[b-3qshbsuws6] {
        flex-direction: column;
        align-items: stretch;
    }

        .scale-dashboard-actions .scale-button[b-3qshbsuws6],
        .scale-dashboard-actions .scale-refresh-button[b-3qshbsuws6] {
            width: 100%;
            justify-content: center;
        }

    .chart-actions[b-3qshbsuws6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .chart-view-selector[b-3qshbsuws6],
    .chart-period-selector[b-3qshbsuws6] {
        width: 100%;
    }

        .chart-view-selector button[b-3qshbsuws6],
        .chart-period-selector button[b-3qshbsuws6] {
            flex: 1;
            justify-content: center;
        }

    .scale-notification[b-3qshbsuws6] {
        left: 1rem;
        right: 1rem;
        max-width: unset;
    }

    .scale-row-actions[b-3qshbsuws6] {
        flex-direction: column;
    }

    .scale-card-actions[b-3qshbsuws6] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .scale-card-actions .scale-button[b-3qshbsuws6] {
            width: 100%;
        }

    .scale-card-stats[b-3qshbsuws6] {
        grid-template-columns: 1fr;
    }

    .scale-dialog-footer[b-3qshbsuws6] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .scale-dialog-footer .scale-button[b-3qshbsuws6] {
            width: 100%;
        }

    .impact-grid[b-3qshbsuws6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .scale-button[b-3qshbsuws6] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .scale-refresh-button[b-3qshbsuws6] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .chart-container[b-3qshbsuws6] {
        height: 180px;
    }

    .chart-bar[b-3qshbsuws6] {
        width: 8px;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleDetail.razor.rz.scp.css */
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleDisplays.razor.rz.scp.css */
/* ====== SCALE DISPLAYS - PREMIUM COMPACT MONITORING DASHBOARD ====== */
/* Ultra-modern compact design with stunning animations and mobile optimization */

/* ====== CSS Variables for Easy Theming ====== */
:root[b-17dpk7ay70] {
    /* Primary Colors */
    --primary: #6366f1;
    --primary-rgb: 99, 102, 241;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    /* Secondary Colors */
    --secondary: #8b5cf6;
    --secondary-rgb: 139, 92, 246;
    /* Status Colors */
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --info: #3b82f6;
    --info-rgb: 59, 130, 246;
    /* Neutral Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
    /* Background Colors */
    --body-bg: #f9fafb;
    --content-bg: #ffffff;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg: #f3f4f6;
    --subtle-bg-rgb: 243, 244, 246;
    /* Border Colors */
    --border-divider: #e5e7eb;
    --border-divider-rgb: 229, 231, 235;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --scale-gradient-primary: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --scale-gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --scale-gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --scale-gradient-info: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    /* Other */
    --placeholder-color: #9ca3af;
}

/* Dark Mode Variables */
[data-theme="dark"][b-17dpk7ay70] {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    --body-bg: #111827;
    --content-bg: #1f2937;
    --content-bg-rgb: 31, 41, 55;
    --subtle-bg: #374151;
    --subtle-bg-rgb: 55, 65, 81;
    --border-divider: #374151;
    --border-divider-rgb: 55, 65, 81;
    --placeholder-color: #6b7280;
}

/* ====== Page Structure & Animated Background ====== */
.sd-page[b-17dpk7ay70] {
    min-height: 100vh;
    background: var(--body-bg);
    position: relative;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* Premium Animated Background */
.sd-background-animation[b-17dpk7ay70] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    opacity: 0.6;
}

.sd-particle[b-17dpk7ay70] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
    animation: sd-float-b-17dpk7ay70 25s infinite ease-in-out;
}

    .sd-particle:nth-child(1)[b-17dpk7ay70] {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 30s;
    }

    .sd-particle:nth-child(2)[b-17dpk7ay70] {
        top: 60%;
        right: 20%;
        animation-delay: 5s;
        animation-duration: 35s;
        background: var(--secondary);
        box-shadow: 0 0 6px rgba(var(--secondary-rgb), 0.4);
    }

    .sd-particle:nth-child(3)[b-17dpk7ay70] {
        bottom: 20%;
        left: 30%;
        animation-delay: 10s;
        animation-duration: 25s;
        background: var(--success);
        box-shadow: 0 0 6px rgba(var(--success-rgb), 0.4);
    }

@keyframes sd-float-b-17dpk7ay70 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    25% {
        transform: translate(80px, -80px) scale(1.2);
        opacity: 0.6;
    }

    50% {
        transform: translate(-40px, 80px) scale(0.8);
        opacity: 0.4;
    }

    75% {
        transform: translate(120px, 40px) scale(1.1);
        opacity: 0.5;
    }
}

.sd-gradient-orb[b-17dpk7ay70] {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    animation: sd-orb-float-b-17dpk7ay70 35s infinite ease-in-out;
    top: -250px;
    left: -250px;
}

.sd-gradient-orb-secondary[b-17dpk7ay70] {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, rgba(var(--secondary-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: sd-orb-float-b-17dpk7ay70 45s infinite ease-in-out reverse;
    bottom: -300px;
    right: -300px;
}

@keyframes sd-orb-float-b-17dpk7ay70 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(80px, -40px) scale(1.05);
    }

    66% {
        transform: translate(-40px, 80px) scale(0.95);
    }
}

/* ====== Container ====== */
.sd-container[b-17dpk7ay70] {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

/* ====== Premium Header Section ====== */
.sd-header-wrapper[b-17dpk7ay70] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .sd-header-wrapper[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
        animation: sd-shimmer-b-17dpk7ay70 3s infinite linear;
    }

@keyframes sd-shimmer-b-17dpk7ay70 {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.sd-header[b-17dpk7ay70] {
    padding: 1.5rem 2rem;
}

.sd-header-content[b-17dpk7ay70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.sd-brand-section[b-17dpk7ay70] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sd-title-group[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.sd-icon-wrapper[b-17dpk7ay70] {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scale-gradient-primary);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.25);
    animation: sd-icon-entrance-b-17dpk7ay70 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sd-icon-entrance-b-17dpk7ay70 {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.sd-icon-wrapper i[b-17dpk7ay70] {
    font-size: 1.5rem;
    color: white;
    z-index: 1;
    animation: sd-icon-pulse-b-17dpk7ay70 3s ease-in-out infinite;
}

@keyframes sd-icon-pulse-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.sd-icon-glow[b-17dpk7ay70] {
    position: absolute;
    inset: -2px;
    background: var(--scale-gradient-primary);
    border-radius: 16px;
    opacity: 0.5;
    filter: blur(12px);
    animation: sd-glow-pulse-b-17dpk7ay70 3s ease-in-out infinite;
}

@keyframes sd-glow-pulse-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.3;
    }
}

.sd-title-content[b-17dpk7ay70] {
    flex: 1;
}

.sd-main-title[b-17dpk7ay70] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.1;
    animation: sd-title-slide-b-17dpk7ay70 0.8s ease-out 0.2s both;
}

@keyframes sd-title-slide-b-17dpk7ay70 {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.sd-subtitle[b-17dpk7ay70] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    animation: sd-title-slide-b-17dpk7ay70 0.8s ease-out 0.3s both;
}

.sd-header-stats[b-17dpk7ay70] {
    display: flex;
    gap: 1rem;
    animation: sd-stats-fade-b-17dpk7ay70 0.8s ease-out 0.4s both;
}

@keyframes sd-stats-fade-b-17dpk7ay70 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sd-stat-pill[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--content-bg-rgb), 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-divider);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .sd-stat-pill[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s ease;
    }

    .sd-stat-pill:hover[b-17dpk7ay70] {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-light);
    }

        .sd-stat-pill:hover[b-17dpk7ay70]::before {
            left: 100%;
        }

    .sd-stat-pill i[b-17dpk7ay70] {
        font-size: 1.1rem;
        color: var(--primary);
    }

    .sd-stat-pill.sd-connected i[b-17dpk7ay70] {
        color: var(--success);
        animation: sd-connection-pulse-b-17dpk7ay70 2s ease-in-out infinite;
    }

@keyframes sd-connection-pulse-b-17dpk7ay70 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.sd-stat-pill.sd-disconnected i[b-17dpk7ay70] {
    color: var(--danger);
}

.sd-stat-pill.sd-active i[b-17dpk7ay70] {
    color: var(--success);
}

.sd-stat-pill.sd-alarm-stat.sd-has-alarms[b-17dpk7ay70] {
    background: rgba(var(--danger-rgb), 0.1);
    border-color: rgba(var(--danger-rgb), 0.3);
    animation: sd-alarm-pulse-b-17dpk7ay70 2s ease-in-out infinite;
}

@keyframes sd-alarm-pulse-b-17dpk7ay70 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(var(--danger-rgb), 0);
    }
}

.sd-stat-pill.sd-total i[b-17dpk7ay70] {
    color: var(--info);
}

.sd-stat-pill.sd-update i[b-17dpk7ay70] {
    color: var(--secondary);
}

.sd-stat-value[b-17dpk7ay70] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.sd-stat-label[b-17dpk7ay70] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.sd-header-actions[b-17dpk7ay70] {
    display: flex;
    gap: 1rem;
    animation: sd-actions-fade 0.8s ease-out 0.5s both;
}

/* ====== Premium Buttons ====== */
.sd-btn[b-17dpk7ay70] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .sd-btn[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .sd-btn:hover[b-17dpk7ay70]::before {
        width: 400px;
        height: 400px;
    }

    .sd-btn:disabled[b-17dpk7ay70] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sd-btn-refresh[b-17dpk7ay70] {
    background: var(--scale-gradient-primary);
    color: white;
}

    .sd-btn-refresh:hover:not(:disabled)[b-17dpk7ay70] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.3);
    }

.sd-btn-connect[b-17dpk7ay70] {
    background: var(--scale-gradient-success);
    color: white;
}

    .sd-btn-connect:hover:not(:disabled)[b-17dpk7ay70] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--success-rgb), 0.3);
    }

.sd-btn i[b-17dpk7ay70] {
    font-size: 1rem;
}

.sd-spin[b-17dpk7ay70] {
    animation: sd-spin-b-17dpk7ay70 1s linear infinite;
}

@keyframes sd-spin-b-17dpk7ay70 {
    to {
        transform: rotate(360deg);
    }
}

.sd-disconnected-icon[b-17dpk7ay70] {
    color: var(--danger) !important;
}

/* ====== Loading State ====== */
.sd-loading-state[b-17dpk7ay70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem;
}

.sd-loader[b-17dpk7ay70] {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
}

.sd-loader-ring[b-17dpk7ay70] {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 50%;
}

    .sd-loader-ring:nth-child(1)[b-17dpk7ay70] {
        border-top-color: var(--primary);
        animation: sd-loader-spin-b-17dpk7ay70 2s linear infinite;
    }

    .sd-loader-ring:nth-child(2)[b-17dpk7ay70] {
        inset: 10px;
        border-right-color: var(--secondary);
        animation: sd-loader-spin-b-17dpk7ay70 2.5s linear infinite reverse;
    }

    .sd-loader-ring:nth-child(3)[b-17dpk7ay70] {
        inset: 20px;
        border-bottom-color: var(--success);
        animation: sd-loader-spin-b-17dpk7ay70 3s linear infinite;
    }

.sd-loader-icon[b-17dpk7ay70] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--primary);
    animation: sd-loader-pulse-b-17dpk7ay70 2s ease-in-out infinite;
}

@keyframes sd-loader-spin-b-17dpk7ay70 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sd-loader-pulse-b-17dpk7ay70 {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.sd-loading-title[b-17dpk7ay70] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.sd-loading-subtitle[b-17dpk7ay70] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ====== Content Wrapper ====== */
.sd-content-wrapper[b-17dpk7ay70] {
    padding: 1.5rem;
}

/* ====== Controls Section (COMPACT) ====== */
.sd-controls-section[b-17dpk7ay70] {
    margin-bottom: 1.5rem;
    animation: fade-in-up-b-17dpk7ay70 0.6s ease-out;
}

.sd-controls-header[b-17dpk7ay70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sd-section-title[b-17dpk7ay70] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .sd-section-title i[b-17dpk7ay70] {
        color: var(--primary);
        font-size: 1rem;
    }

.sd-results-info[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sd-results-text[b-17dpk7ay70] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

    .sd-results-text strong[b-17dpk7ay70] {
        color: var(--text-primary);
        font-weight: 700;
    }

.sd-alarm-count[b-17dpk7ay70] {
    color: var(--danger);
    font-weight: 600;
    animation: sd-blink-b-17dpk7ay70 2s ease-in-out infinite;
}

@keyframes sd-blink-b-17dpk7ay70 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ====== Controls Bar (COMPACT) ====== */
.sd-controls-bar[b-17dpk7ay70] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.sd-search-group[b-17dpk7ay70] {
    flex: 1;
    min-width: 280px;
}

.sd-search-wrapper[b-17dpk7ay70] {
    position: relative;
}

.sd-search-icon[b-17dpk7ay70] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
}

.sd-search-input[b-17dpk7ay70] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    border: 1.5px solid var(--border-divider);
    border-radius: 10px;
    font-size: 0.875rem;
    background: rgba(var(--content-bg-rgb), 0.8);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

    .sd-search-input:focus[b-17dpk7ay70] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .sd-search-input[b-17dpk7ay70]::placeholder {
        color: var(--placeholder-color);
    }

.sd-filter-group[b-17dpk7ay70] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.sd-filter-wrapper[b-17dpk7ay70] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .sd-filter-wrapper i[b-17dpk7ay70] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

.sd-filter-select[b-17dpk7ay70] {
    appearance: none;
    padding: 0.625rem 2rem 0.625rem 1rem;
    border: 1.5px solid var(--border-divider);
    border-radius: 10px;
    font-size: 0.825rem;
    background: rgba(var(--content-bg-rgb), 0.8);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    font-weight: 500;
    min-width: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

    .sd-filter-select:focus[b-17dpk7ay70] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        background-color: var(--content-bg);
    }

    .sd-filter-select:hover[b-17dpk7ay70] {
        border-color: var(--primary-light);
    }

/* ====== COMPACT Scale Display Grid ====== */
.sd-displays-grid[b-17dpk7ay70] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    animation: fade-in-up-b-17dpk7ay70 0.8s ease-out 0.2s both;
}

/* ====== COMPACT Scale Cards ====== */
.sd-scale-card[b-17dpk7ay70] {
    background: rgba(var(--content-bg-rgb), 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

    .sd-scale-card[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--scale-gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sd-scale-card:hover[b-17dpk7ay70] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-light);
    }

        .sd-scale-card:hover[b-17dpk7ay70]::before {
            transform: scaleX(1);
        }

    .sd-scale-card.sd-alarm[b-17dpk7ay70] {
        background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.03) 0%, rgba(var(--content-bg-rgb), 0.98) 100%);
        border-color: rgba(var(--danger-rgb), 0.25);
    }

        .sd-scale-card.sd-alarm[b-17dpk7ay70]::before {
            background: var(--scale-gradient-danger);
            transform: scaleX(1);
            animation: sd-alarm-flash-b-17dpk7ay70 1s ease-in-out infinite;
        }

@keyframes sd-alarm-flash-b-17dpk7ay70 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.sd-scale-card.sd-offline[b-17dpk7ay70] {
    opacity: 0.65;
    background: rgba(var(--content-bg-rgb), 0.85);
}

.sd-scale-card.sd-recent-alarm[b-17dpk7ay70] {
    border-color: rgba(var(--warning-rgb), 0.25);
}

/* Scale Header (COMPACT) */
.sd-scale-header[b-17dpk7ay70] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.875rem;
}

.sd-scale-info[b-17dpk7ay70] {
    flex: 1;
}

.sd-scale-number[b-17dpk7ay70] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-mono);
    margin-bottom: 0.125rem;
    letter-spacing: -0.02em;
}

.sd-scale-name[b-17dpk7ay70] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
}

.sd-scale-status[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sd-status-dot[b-17dpk7ay70] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}

    .sd-status-dot[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: inherit;
        opacity: 0.3;
        animation: sd-pulse-b-17dpk7ay70 2s ease-in-out infinite;
    }

@keyframes sd-pulse-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.sd-status-online[b-17dpk7ay70] {
    background: rgba(var(--success-rgb), 0.08);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.15);
}

    .sd-status-online .sd-status-dot[b-17dpk7ay70] {
        background: var(--success);
    }

.sd-status-stale[b-17dpk7ay70] {
    background: rgba(var(--warning-rgb), 0.08);
    color: var(--warning);
    border: 1px solid rgba(var(--warning-rgb), 0.15);
}

    .sd-status-stale .sd-status-dot[b-17dpk7ay70] {
        background: var(--warning);
    }

.sd-status-offline[b-17dpk7ay70] {
    background: rgba(var(--danger-rgb), 0.08);
    color: var(--danger);
    border: 1px solid rgba(var(--danger-rgb), 0.15);
}

    .sd-status-offline .sd-status-dot[b-17dpk7ay70] {
        background: var(--danger);
    }

.sd-status-starting[b-17dpk7ay70] {
    background: rgba(var(--info-rgb), 0.08);
    color: var(--info);
    border: 1px solid rgba(var(--info-rgb), 0.15);
}

    .sd-status-starting .sd-status-dot[b-17dpk7ay70] {
        background: var(--info);
        animation: sd-starting-pulse-b-17dpk7ay70 1s ease-in-out infinite;
    }

@keyframes sd-starting-pulse-b-17dpk7ay70 {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.sd-status-text[b-17dpk7ay70] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Scale Displays (COMPACT) */
.sd-scale-displays[b-17dpk7ay70] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.sd-display-block[b-17dpk7ay70] {
    background: rgba(var(--subtle-bg-rgb), 0.4);
    border: 1px solid var(--border-divider);
    border-radius: 10px;
    padding: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .sd-display-block[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        transition: left 0.8s ease;
    }

    .sd-display-block:hover[b-17dpk7ay70] {
        background: rgba(var(--subtle-bg-rgb), 0.6);
        border-color: var(--primary-light);
    }

        .sd-display-block:hover[b-17dpk7ay70]::before {
            left: 100%;
        }

.sd-display-label[b-17dpk7ay70] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.sd-display-value[b-17dpk7ay70] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-height: 1.25rem;
    word-break: break-all;
    line-height: 1.2;
}

    .sd-display-value.sd-alarm[b-17dpk7ay70] {
        color: var(--danger);
        animation: sd-alarm-text-b-17dpk7ay70 1s ease-in-out infinite;
    }

@keyframes sd-alarm-text-b-17dpk7ay70 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.sd-display-value.sd-rate[b-17dpk7ay70] {
    color: var(--info);
}

.sd-display-value.sd-total[b-17dpk7ay70] {
    color: var(--success);
}

.sd-rate-indicator[b-17dpk7ay70] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
}

.sd-no-data[b-17dpk7ay70] {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    font-size: 0.875rem;
}

/* NEW: Sparkline Chart Area */
.sd-scale-sparkline[b-17dpk7ay70] {
    position: relative;
    height: 40px;
    margin-bottom: 0.75rem;
    background: rgba(var(--subtle-bg-rgb), 0.3);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
}

.sd-sparkline-canvas[b-17dpk7ay70] {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.sd-scale-card:hover .sd-sparkline-canvas[b-17dpk7ay70] {
    opacity: 1;
}

/* Scale Footer (COMPACT) */
.sd-scale-footer[b-17dpk7ay70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.4);
}

.sd-footer-info[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .sd-footer-info i[b-17dpk7ay70] {
        color: var(--primary);
        font-size: 0.75rem;
    }

.sd-footer-alarm[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--warning);
}

    .sd-footer-alarm.sd-active-alarm[b-17dpk7ay70] {
        color: var(--danger);
        font-weight: 600;
        animation: sd-alarm-blink-b-17dpk7ay70 1s ease-in-out infinite;
    }

@keyframes sd-alarm-blink-b-17dpk7ay70 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.sd-footer-alarm i[b-17dpk7ay70] {
    font-size: 0.8rem;
}

.sd-footer-rate[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--success);
    font-weight: 600;
}

    .sd-footer-rate i[b-17dpk7ay70] {
        font-size: 0.75rem;
    }

.sd-footer-type[b-17dpk7ay70] {
    flex-shrink: 0;
}

.sd-type-badge[b-17dpk7ay70] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
}

.sd-type-rate[b-17dpk7ay70] {
    background: rgba(var(--info-rgb), 0.08);
    color: var(--info);
    border-color: rgba(var(--info-rgb), 0.15);
}

.sd-type-mass[b-17dpk7ay70] {
    background: rgba(var(--secondary-rgb), 0.08);
    color: var(--secondary);
    border-color: rgba(var(--secondary-rgb), 0.15);
}

.sd-type-total[b-17dpk7ay70] {
    background: rgba(var(--success-rgb), 0.08);
    color: var(--success);
    border-color: rgba(var(--success-rgb), 0.15);
}

.sd-type-unknown[b-17dpk7ay70] {
    background: rgba(var(--text-secondary-rgb), 0.08);
    color: var(--text-secondary);
    border-color: rgba(var(--text-secondary-rgb), 0.15);
}

/* Alarm Indicator (COMPACT) */
.sd-alarm-indicator[b-17dpk7ay70] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 3px 15px rgba(var(--danger-rgb), 0.35);
    animation: sd-alarm-ring-b-17dpk7ay70 2s ease-in-out infinite;
}

@keyframes sd-alarm-ring-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(-5deg);
    }

    75% {
        transform: scale(1.05) rotate(5deg);
    }
}

.sd-alarm-indicator.sd-alarm-active[b-17dpk7ay70] {
    animation: sd-alarm-ring-b-17dpk7ay70 0.5s ease-in-out infinite;
}

/* ====== Empty State ====== */
.sd-empty-state[b-17dpk7ay70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.sd-empty-icon[b-17dpk7ay70] {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
}

    .sd-empty-icon i[b-17dpk7ay70] {
        font-size: 3.5rem;
        color: var(--text-muted);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

.sd-empty-icon-bg[b-17dpk7ay70] {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: sd-empty-pulse-b-17dpk7ay70 3s ease-in-out infinite;
}

@keyframes sd-empty-pulse-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

.sd-empty-title[b-17dpk7ay70] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.625rem 0;
}

.sd-empty-message[b-17dpk7ay70] {
    font-size: 0.925rem;
    color: var(--text-secondary);
    max-width: 450px;
    line-height: 1.5;
}

/* ====== Animation for grid items ====== */
.sd-scale-card[b-17dpk7ay70] {
    animation: sd-card-enter-b-17dpk7ay70 0.5s ease-out backwards;
}

    .sd-scale-card:nth-child(1)[b-17dpk7ay70] {
        animation-delay: 0.05s;
    }

    .sd-scale-card:nth-child(2)[b-17dpk7ay70] {
        animation-delay: 0.1s;
    }

    .sd-scale-card:nth-child(3)[b-17dpk7ay70] {
        animation-delay: 0.15s;
    }

    .sd-scale-card:nth-child(4)[b-17dpk7ay70] {
        animation-delay: 0.2s;
    }

    .sd-scale-card:nth-child(5)[b-17dpk7ay70] {
        animation-delay: 0.25s;
    }

    .sd-scale-card:nth-child(6)[b-17dpk7ay70] {
        animation-delay: 0.3s;
    }

    .sd-scale-card:nth-child(7)[b-17dpk7ay70] {
        animation-delay: 0.35s;
    }

    .sd-scale-card:nth-child(8)[b-17dpk7ay70] {
        animation-delay: 0.4s;
    }

    .sd-scale-card:nth-child(9)[b-17dpk7ay70] {
        animation-delay: 0.45s;
    }

    .sd-scale-card:nth-child(10)[b-17dpk7ay70] {
        animation-delay: 0.5s;
    }

@keyframes sd-card-enter-b-17dpk7ay70 {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ====== Runtime Statistics Section ====== */
.sd-runtime-section[b-17dpk7ay70] {
    margin-top: 3rem;
    animation: fade-in-up-b-17dpk7ay70 0.8s ease-out 0.4s both;
}

.sd-runtime-header[b-17dpk7ay70] {
    background: rgba(var(--content-bg-rgb), 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-divider);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .sd-runtime-header[b-17dpk7ay70]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--scale-gradient-info);
        opacity: 0.8;
    }

.sd-runtime-summary[b-17dpk7ay70] {
    display: flex;
    gap: 2rem;
}

.sd-runtime-stat[b-17dpk7ay70] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border: 1px solid var(--border-divider);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .sd-runtime-stat:hover[b-17dpk7ay70] {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border-color: var(--info-light);
    }

    .sd-runtime-stat i[b-17dpk7ay70] {
        font-size: 1.25rem;
        color: var(--info);
    }

.sd-runtime-value[b-17dpk7ay70] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.sd-runtime-label[b-17dpk7ay70] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Runtime Grid */
.sd-runtime-grid[b-17dpk7ay70] {
    background: rgba(var(--content-bg-rgb), 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.sd-runtime-table[b-17dpk7ay70] {
    width: 100%;
    border-collapse: collapse;
}

    .sd-runtime-table thead[b-17dpk7ay70] {
        background: rgba(var(--subtle-bg-rgb), 0.5);
        border-bottom: 2px solid var(--border-divider);
    }

    .sd-runtime-table th[b-17dpk7ay70] {
        padding: 1.25rem 1rem;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        user-select: none;
    }

        .sd-runtime-table th:hover[b-17dpk7ay70] {
            background: rgba(var(--primary-rgb), 0.05);
            color: var(--primary);
        }

        .sd-runtime-table th span[b-17dpk7ay70] {
            margin-right: 0.5rem;
        }

        .sd-runtime-table th i[b-17dpk7ay70] {
            font-size: 0.75rem;
            opacity: 0.5;
            transition: all 0.2s ease;
        }

        .sd-runtime-table th.sd-sort-asc i[b-17dpk7ay70]::before {
            content: "\f0de";
            opacity: 1;
            color: var(--primary);
        }

        .sd-runtime-table th.sd-sort-desc i[b-17dpk7ay70]::before {
            content: "\f0dd";
            opacity: 1;
            color: var(--primary);
        }

    .sd-runtime-table tbody tr[b-17dpk7ay70] {
        border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
        transition: all 0.2s ease;
    }

        .sd-runtime-table tbody tr:hover[b-17dpk7ay70] {
            background: rgba(var(--primary-rgb), 0.02);
        }

        .sd-runtime-table tbody tr.sd-runtime-running[b-17dpk7ay70] {
            background: rgba(var(--success-rgb), 0.02);
        }

            .sd-runtime-table tbody tr.sd-runtime-running:hover[b-17dpk7ay70] {
                background: rgba(var(--success-rgb), 0.05);
            }

        .sd-runtime-table tbody tr.sd-runtime-long-stop[b-17dpk7ay70] {
            background: rgba(var(--danger-rgb), 0.02);
        }

            .sd-runtime-table tbody tr.sd-runtime-long-stop:hover[b-17dpk7ay70] {
                background: rgba(var(--danger-rgb), 0.05);
            }

    .sd-runtime-table td[b-17dpk7ay70] {
        padding: 1rem;
        font-size: 0.875rem;
    }

.sd-runtime-scale[b-17dpk7ay70] {
    font-weight: 600;
}

.sd-runtime-number[b-17dpk7ay70] {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.sd-runtime-name[b-17dpk7ay70] {
    color: var(--text-primary);
    font-weight: 500;
}

.sd-runtime-status[b-17dpk7ay70] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sd-runtime-rate[b-17dpk7ay70] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.sd-rate-active[b-17dpk7ay70] {
    color: var(--success);
}

.sd-rate-zero[b-17dpk7ay70] {
    color: var(--text-muted);
}

.sd-rate-average[b-17dpk7ay70] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
    display: block;
}

.sd-runtime-progress[b-17dpk7ay70] {
    position: relative;
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border-radius: 8px;
    height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 120px;
}

.sd-runtime-bar[b-17dpk7ay70] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--scale-gradient-success);
    transition: width 0.5s ease;
    opacity: 0.8;
}

.sd-runtime-hours[b-17dpk7ay70] {
    position: relative;
    z-index: 1;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sd-runtime-production[b-17dpk7ay70] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.sd-production-value[b-17dpk7ay70] {
    color: var(--success);
}

.sd-production-zero[b-17dpk7ay70] {
    color: var(--text-muted);
}

/* Downtime Column Styles */
.sd-runtime-downtime[b-17dpk7ay70] {
    font-family: var(--font-mono);
}

.sd-downtime-none[b-17dpk7ay70] {
    color: var(--text-muted);
}

.sd-downtime-value[b-17dpk7ay70] {
    color: var(--warning);
    font-weight: 600;
}

    .sd-downtime-value i[b-17dpk7ay70] {
        font-size: 0.75rem;
        margin-right: 0.25rem;
        opacity: 0.8;
    }

.sd-downtime-never[b-17dpk7ay70] {
    color: var(--danger);
    font-weight: 600;
    font-style: italic;
}

    .sd-downtime-never i[b-17dpk7ay70] {
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }

/* Running States in Downtime Column */
.sd-stable-running[b-17dpk7ay70] {
    color: var(--success);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

    .sd-stable-running i[b-17dpk7ay70] {
        font-size: 0.75rem;
        animation: sd-check-pulse-b-17dpk7ay70 2s ease-in-out infinite;
    }

@keyframes sd-check-pulse-b-17dpk7ay70 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.sd-starting-up[b-17dpk7ay70] {
    color: var(--info);
    font-weight: 600;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

    .sd-starting-up i[b-17dpk7ay70] {
        font-size: 0.75rem;
        animation: sd-hourglass-spin-b-17dpk7ay70 2s ease-in-out infinite;
    }

@keyframes sd-hourglass-spin-b-17dpk7ay70 {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

.sd-runtime-lastrun[b-17dpk7ay70] {
    font-size: 0.825rem;
}

.sd-lastrun-active[b-17dpk7ay70] {
    color: var(--success);
    font-weight: 600;
}

.sd-lastrun-never[b-17dpk7ay70] {
    color: var(--text-muted);
    font-style: italic;
}

.sd-efficiency-indicator[b-17dpk7ay70] {
    position: relative;
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border-radius: 8px;
    height: 28px;
    overflow: hidden;
    min-width: 100px;
}

.sd-efficiency-bar[b-17dpk7ay70] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--scale-gradient-info);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
}

.sd-efficiency-value[b-17dpk7ay70] {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sd-runtime-empty[b-17dpk7ay70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background: rgba(var(--subtle-bg-rgb), 0.3);
    border-radius: 16px;
    border: 1px dashed var(--border-divider);
}

    .sd-runtime-empty i[b-17dpk7ay70] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .sd-runtime-empty p[b-17dpk7ay70] {
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin: 0;
    }

/* Responsive adjustments for runtime section */
@media (max-width: 1200px) {
    .sd-runtime-header[b-17dpk7ay70] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .sd-runtime-summary[b-17dpk7ay70] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .sd-runtime-stat[b-17dpk7ay70] {
        flex: 1;
        min-width: 150px;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .sd-runtime-table[b-17dpk7ay70] {
        font-size: 0.75rem;
    }

        .sd-runtime-table th[b-17dpk7ay70],
        .sd-runtime-table td[b-17dpk7ay70] {
            padding: 0.75rem 0.5rem;
        }

        .sd-runtime-table th[b-17dpk7ay70] {
            font-size: 0.7rem;
        }

    .sd-runtime-progress[b-17dpk7ay70],
    .sd-efficiency-indicator[b-17dpk7ay70] {
        min-width: 80px;
        height: 24px;
    }

    .sd-runtime-hours[b-17dpk7ay70],
    .sd-efficiency-value[b-17dpk7ay70] {
        font-size: 0.7rem;
    }

    .sd-runtime-value[b-17dpk7ay70] {
        font-size: 1.25rem;
    }

    .sd-runtime-stat[b-17dpk7ay70] {
        padding: 0.5rem 0.875rem;
    }

    /* Hide less important columns on mobile */
    .sd-runtime-table td:nth-child(4)[b-17dpk7ay70],
    .sd-runtime-table th:nth-child(4)[b-17dpk7ay70],
    .sd-runtime-table td:nth-child(6)[b-17dpk7ay70],
    .sd-runtime-table th:nth-child(6)[b-17dpk7ay70],
    .sd-runtime-table td:nth-child(7)[b-17dpk7ay70],
    .sd-runtime-table th:nth-child(7)[b-17dpk7ay70] {
        display: none;
    }
}

@media (max-width: 576px) {
    .sd-runtime-section[b-17dpk7ay70] {
        margin-top: 2rem;
    }

    .sd-runtime-header[b-17dpk7ay70] {
        padding: 1rem;
    }

    .sd-runtime-stat[b-17dpk7ay70] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem;
        min-width: 0;
    }

        .sd-runtime-stat i[b-17dpk7ay70] {
            font-size: 1rem;
        }

    .sd-runtime-value[b-17dpk7ay70] {
        font-size: 1rem;
    }

    .sd-runtime-label[b-17dpk7ay70] {
        font-size: 0.7rem;
    }

    /* Make table horizontally scrollable on small screens */
    .sd-runtime-grid[b-17dpk7ay70] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sd-runtime-table[b-17dpk7ay70] {
        min-width: 600px;
    }
}

/* Animation for runtime rows */
.sd-runtime-table tbody tr[b-17dpk7ay70] {
    animation: sd-row-enter-b-17dpk7ay70 0.4s ease-out backwards;
}

    .sd-runtime-table tbody tr:nth-child(1)[b-17dpk7ay70] {
        animation-delay: 0.05s;
    }

    .sd-runtime-table tbody tr:nth-child(2)[b-17dpk7ay70] {
        animation-delay: 0.1s;
    }

    .sd-runtime-table tbody tr:nth-child(3)[b-17dpk7ay70] {
        animation-delay: 0.15s;
    }

    .sd-runtime-table tbody tr:nth-child(4)[b-17dpk7ay70] {
        animation-delay: 0.2s;
    }

    .sd-runtime-table tbody tr:nth-child(5)[b-17dpk7ay70] {
        animation-delay: 0.25s;
    }

    .sd-runtime-table tbody tr:nth-child(6)[b-17dpk7ay70] {
        animation-delay: 0.3s;
    }

    .sd-runtime-table tbody tr:nth-child(7)[b-17dpk7ay70] {
        animation-delay: 0.35s;
    }

    .sd-runtime-table tbody tr:nth-child(8)[b-17dpk7ay70] {
        animation-delay: 0.4s;
    }

    .sd-runtime-table tbody tr:nth-child(9)[b-17dpk7ay70] {
        animation-delay: 0.45s;
    }

    .sd-runtime-table tbody tr:nth-child(10)[b-17dpk7ay70] {
        animation-delay: 0.5s;
    }

@keyframes sd-row-enter-b-17dpk7ay70 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ====== Responsive Design - Mobile First ====== */

/* Extra Large Screens - 4 columns */
@media (min-width: 1600px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Large Screens - 3-4 columns */
@media (min-width: 1200px) and (max-width: 1599px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Medium Screens - 2-3 columns */
@media (min-width: 768px) and (max-width: 1199px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 0.875rem;
    }

    .sd-content-wrapper[b-17dpk7ay70] {
        padding: 1.25rem;
    }
}

/* Small Tablets - 2 columns */
@media (min-width: 576px) and (max-width: 767px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .sd-scale-card[b-17dpk7ay70] {
        padding: 0.875rem;
    }

    .sd-scale-displays[b-17dpk7ay70] {
        gap: 0.5rem;
        display: flex;
        flex-direction: column;
    }
}

/* Mobile Landscape - 2-3 columns */
@media (min-width: 480px) and (max-width: 575px) and (orientation: landscape) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.625rem;
    }
}

/* Mobile Portrait - 2 columns */
@media (min-width: 360px) and (max-width: 479px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .sd-content-wrapper[b-17dpk7ay70] {
        padding: 0.75rem;
    }

    .sd-scale-card[b-17dpk7ay70] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .sd-scale-number[b-17dpk7ay70] {
        font-size: 1.125rem;
    }

    .sd-scale-name[b-17dpk7ay70] {
        font-size: 0.75rem;
    }

    .sd-scale-displays[b-17dpk7ay70] {
        gap: 0.375rem;
        display: flex;
        flex-direction: column;
    }

    .sd-display-block[b-17dpk7ay70] {
        padding: 0.5rem;
    }

    .sd-display-label[b-17dpk7ay70] {
        font-size: 0.625rem;
    }

    .sd-display-value[b-17dpk7ay70] {
        font-size: 0.875rem;
    }

    .sd-scale-sparkline[b-17dpk7ay70] {
        height: 30px;
    }
}

/* Small Mobile - 1-2 columns */
@media (max-width: 359px) {
    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Option for 2 very compact columns on tiny screens */
    @media (min-width: 320px) {
        .sd-displays-grid[b-17dpk7ay70] {
            grid-template-columns: repeat(2, 1fr);
        }

        .sd-scale-card[b-17dpk7ay70] {
            padding: 0.625rem;
        }

        .sd-scale-displays[b-17dpk7ay70] {
            grid-template-columns: 1fr;
            display: flex;
            flex-direction: column;
        }
    }
}
@media (min-width: 720px) {

    .sd-scale-displays[b-17dpk7ay70] {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
}
@media (max-width: 720px) {

    .sd-scale-displays[b-17dpk7ay70] {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
}
/* Header Responsive Adjustments */
@media (max-width: 992px) {
    .sd-header-content[b-17dpk7ay70] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .sd-header-stats[b-17dpk7ay70] {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .sd-stat-pill[b-17dpk7ay70] {
        flex: 1;
        min-width: 140px;
        justify-content: center;
    }

    .sd-header-actions[b-17dpk7ay70] {
        width: 100%;
        justify-content: space-between;
    }

    .sd-controls-bar[b-17dpk7ay70] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .sd-search-group[b-17dpk7ay70] {
        width: 100%;
        min-width: unset;
    }

    .sd-filter-group[b-17dpk7ay70] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .sd-header[b-17dpk7ay70] {
        padding: 1rem;
    }

    .sd-title-group[b-17dpk7ay70] {
        gap: 0.875rem;
    }

    .sd-icon-wrapper[b-17dpk7ay70] {
        width: 48px;
        height: 48px;
    }

        .sd-icon-wrapper i[b-17dpk7ay70] {
            font-size: 1.25rem;
        }

    .sd-main-title[b-17dpk7ay70] {
        font-size: 1.5rem;
    }

    .sd-subtitle[b-17dpk7ay70] {
        font-size: 0.85rem;
    }

    .sd-header-stats[b-17dpk7ay70] {
        gap: 0.5rem;
    }

    .sd-stat-pill[b-17dpk7ay70] {
        padding: 0.5rem 0.875rem;
        gap: 0.375rem;
    }

    .sd-stat-value[b-17dpk7ay70] {
        font-size: 1rem;
    }

    .sd-stat-label[b-17dpk7ay70] {
        font-size: 0.7rem;
    }

    .sd-header-actions[b-17dpk7ay70] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .sd-btn[b-17dpk7ay70] {
        padding: 0.625rem 1rem;
        font-size: 0.825rem;
        flex: 1;
        min-width: 0;
    }

    .sd-section-title[b-17dpk7ay70] {
        font-size: 1.125rem;
    }

    .sd-controls-header[b-17dpk7ay70] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sd-filter-wrapper[b-17dpk7ay70] {
        flex: 1;
    }

    .sd-filter-select[b-17dpk7ay70] {
        width: 100%;
        min-width: unset;
        font-size: 0.775rem;
    }
}

@media (max-width: 576px) {
    .sd-header[b-17dpk7ay70] {
        padding: 0.75rem;
    }

    .sd-icon-wrapper[b-17dpk7ay70] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

        .sd-icon-wrapper i[b-17dpk7ay70] {
            font-size: 1rem;
        }

    .sd-main-title[b-17dpk7ay70] {
        font-size: 1.125rem;
    }

    .sd-subtitle[b-17dpk7ay70] {
        display: none;
    }

    .sd-stat-pill[b-17dpk7ay70] {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
    }

    .sd-stat-value[b-17dpk7ay70] {
        font-size: 0.875rem;
    }

    .sd-stat-label[b-17dpk7ay70] {
        font-size: 0.625rem;
    }

    .sd-btn[b-17dpk7ay70] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

        .sd-btn span[b-17dpk7ay70] {
            display: none;
        }

    .sd-search-input[b-17dpk7ay70] {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    }

    .sd-controls-section[b-17dpk7ay70] {
        margin-bottom: 1rem;
    }

    .sd-section-title[b-17dpk7ay70] {
        font-size: 1rem;
    }

        .sd-section-title i[b-17dpk7ay70] {
            font-size: 0.875rem;
        }

    .sd-results-text[b-17dpk7ay70] {
        font-size: 0.75rem;
    }
}

/* Ultra Small Mobile */
@media (max-width: 400px) {
    .sd-header[b-17dpk7ay70] {
        padding: 0.625rem;
    }

    .sd-header-stats[b-17dpk7ay70] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem;
    }

    .sd-stat-pill[b-17dpk7ay70] {
        min-width: 0;
        padding: 0.3rem 0.5rem;
    }

    .sd-alarm-indicator[b-17dpk7ay70] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .sd-type-badge[b-17dpk7ay70] {
        font-size: 0.6rem;
        padding: 0.15rem 0.5rem;
    }

    .sd-footer-info[b-17dpk7ay70],
    .sd-footer-alarm[b-17dpk7ay70] {
        font-size: 0.7rem;
    }
}

/* Print Styles */
@media print {
    .sd-page[b-17dpk7ay70] {
        background: white;
    }

    .sd-background-animation[b-17dpk7ay70] {
        display: none;
    }

    .sd-header-actions[b-17dpk7ay70],
    .sd-controls-bar[b-17dpk7ay70] {
        display: none;
    }

    .sd-scale-card[b-17dpk7ay70] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .sd-displays-grid[b-17dpk7ay70] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .sd-scale-card[b-17dpk7ay70] {
        border-width: 2px;
    }

    .sd-btn[b-17dpk7ay70] {
        border: 2px solid currentColor;
    }

    .sd-search-input[b-17dpk7ay70],
    .sd-filter-select[b-17dpk7ay70] {
        border-width: 2px;
    }

    .sd-display-block[b-17dpk7ay70] {
        border-width: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sd-particle[b-17dpk7ay70],
    .sd-gradient-orb[b-17dpk7ay70],
    .sd-gradient-orb-secondary[b-17dpk7ay70],
    .sd-icon-wrapper[b-17dpk7ay70],
    .sd-icon-glow[b-17dpk7ay70],
    .sd-loader-ring[b-17dpk7ay70],
    .sd-loader-icon[b-17dpk7ay70],
    .sd-alarm-indicator[b-17dpk7ay70],
    .sd-spin[b-17dpk7ay70],
    .sd-scale-card[b-17dpk7ay70],
    .sd-check-pulse[b-17dpk7ay70],
    .sd-hourglass-spin[b-17dpk7ay70] {
        animation: none;
    }

    .sd-scale-card[b-17dpk7ay70],
    .sd-btn[b-17dpk7ay70],
    .sd-stat-pill[b-17dpk7ay70],
    .sd-display-block[b-17dpk7ay70] {
        transition: none;
    }
}

/* Dark Mode Enhancements */
[data-theme="dark"] .sd-scale-card[b-17dpk7ay70] {
    background: rgba(var(--content-bg-rgb), 0.04);
    backdrop-filter: blur(30px);
}

    [data-theme="dark"] .sd-scale-card:hover[b-17dpk7ay70] {
        background: rgba(var(--content-bg-rgb), 0.06);
    }

[data-theme="dark"] .sd-display-block[b-17dpk7ay70] {
    background: rgba(var(--subtle-bg-rgb), 0.2);
}

[data-theme="dark"] .sd-loader-ring[b-17dpk7ay70] {
    opacity: 0.8;
}

[data-theme="dark"] .sd-empty-icon-bg[b-17dpk7ay70] {
    opacity: 0.3;
}

[data-theme="dark"] .sd-scale-sparkline[b-17dpk7ay70] {
    background: rgba(var(--subtle-bg-rgb), 0.15);
}

/* Utility animations */
@keyframes fade-in-up-b-17dpk7ay70 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleLiveDashboard.razor.rz.scp.css */

/* ====== Main Dashboard Container ====== */
.scale-dashboard[b-b37vplt28s] {
    min-height: 100vh;
    background: var(--body-bg);
    position: relative;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ====== Premium Header Section ====== */
.scale-header-wrapper[b-b37vplt28s] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--scale-shadow-soft);
    margin-left: 1em;
    border-bottom-left-radius: 30px;
    margin-right: 1em;
    border-bottom-right-radius: 30px;
}

    .scale-header-wrapper[b-b37vplt28s]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.scale-header[b-b37vplt28s] {
    padding: 1.25rem 2rem;
}

.scale-header-content[b-b37vplt28s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.scale-brand-section[b-b37vplt28s] {
    flex: 1;
}

.scale-title-group[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.scale-icon-wrapper[b-b37vplt28s] {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scale-gradient-primary);
    border-radius: 14px;
    box-shadow: var(--scale-shadow-glow);
    animation: scale-icon-entrance-b-b37vplt28s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scale-icon-entrance-b-b37vplt28s {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.scale-icon-wrapper i[b-b37vplt28s] {
    font-size: 1.25rem;
    color: white;
    z-index: 1;
}

.scale-icon-glow[b-b37vplt28s] {
    position: absolute;
    inset: -1px;
    background: var(--scale-gradient-primary);
    border-radius: 14px;
    opacity: 0.4;
    filter: blur(8px);
    animation: scale-glow-pulse-b-b37vplt28s 3s ease-in-out infinite;
}

@keyframes scale-glow-pulse-b-b37vplt28s {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.scale-title-content[b-b37vplt28s] {
    flex: 1;
}

.scale-main-title[b-b37vplt28s] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: scale-title-slide-b-b37vplt28s 0.6s ease-out 0.2s both;
}

@keyframes scale-title-slide-b-b37vplt28s {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.scale-subtitle[b-b37vplt28s] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    animation: scale-title-slide-b-b37vplt28s 0.6s ease-out 0.3s both;
}

.scale-header-stats[b-b37vplt28s] {
    display: flex;
    gap: 1rem;
    animation: scale-stats-fade-b-b37vplt28s 0.6s ease-out 0.4s both;
}

@keyframes scale-stats-fade-b-b37vplt28s {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-stat-pill[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 100px;
    transition: var(--scale-transition-smooth);
}

    .scale-stat-pill:hover[b-b37vplt28s] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: var(--primary-light);
    }

    .scale-stat-pill i[b-b37vplt28s] {
        font-size: 0.875rem;
        opacity: 0.8;
    }

    .scale-stat-pill.scale-connected i[b-b37vplt28s] {
        color: var(--success);
    }

    .scale-stat-pill.scale-activity i[b-b37vplt28s] {
        color: var(--warning);
    }

    .scale-stat-pill.scale-update i[b-b37vplt28s] {
        color: var(--info);
    }

.scale-stat-value[b-b37vplt28s] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.scale-stat-label[b-b37vplt28s] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.scale-header-actions[b-b37vplt28s] {
    display: flex;
    gap: 0.875rem;
    animation: scale-actions-fade 0.6s ease-out 0.5s both;
}

/* ====== Premium Buttons ====== */
.scale-btn[b-b37vplt28s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--scale-transition-smooth);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .scale-btn[b-b37vplt28s]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .scale-btn:hover[b-b37vplt28s]::before {
        width: 300px;
        height: 300px;
    }

    .scale-btn:disabled[b-b37vplt28s] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.scale-btn-primary[b-b37vplt28s] {
    background: var(--scale-gradient-primary);
    color: white;
}

    .scale-btn-primary:hover:not(:disabled)[b-b37vplt28s] {
        transform: translateY(-1px);
        box-shadow: var(--scale-shadow-glow);
    }

.scale-btn-refresh[b-b37vplt28s] {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

    .scale-btn-refresh:hover:not(:disabled)[b-b37vplt28s] {
        background: var(--scale-gradient-primary);
        color: white;
        transform: translateY(-1px);
        box-shadow: var(--scale-shadow-glow);
    }

.scale-spin[b-b37vplt28s] {
    animation: scale-spin-b-b37vplt28s 1s linear infinite;
}

@keyframes scale-spin-b-b37vplt28s {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Main Layout Grid ====== */
.scale-main-layout[b-b37vplt28s] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    height: calc(100vh - var(--scale-header-height) - 3rem);
}

/* ====== Left Panel - Premium Card Style ====== */
.scale-control-panel[b-b37vplt28s] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 20px;
    box-shadow: var(--scale-shadow-soft);
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: var(--scale-transition-smooth);
}

    .scale-control-panel:hover[b-b37vplt28s] {
        box-shadow: var(--scale-shadow-hover);
        transform: translateY(-2px);
    }

.scale-panel-header[b-b37vplt28s] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: 20px;
}

.scale-panel-title[b-b37vplt28s] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .scale-panel-title i[b-b37vplt28s] {
        color: var(--primary);
        font-size: 1.125rem;
        opacity: 0.8;
    }

.scale-panel-subtitle[b-b37vplt28s] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

/* ====== Time Navigation - Premium Design ====== */
.scale-time-card[b-b37vplt28s] {
    padding: 1.25rem;
    margin: 1rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.scale-period-display[b-b37vplt28s] {
    text-align: center;
    margin-bottom: 1rem;
}

    .scale-period-display h3[b-b37vplt28s] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary);
        margin: 0 0 0.25rem 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .scale-period-display p[b-b37vplt28s] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin: 0;
    }

.scale-time-navigation[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.scale-nav-btn[b-b37vplt28s] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--scale-transition-smooth);
    font-size: 0.875rem;
}

    .scale-nav-btn:hover:not(:disabled)[b-b37vplt28s] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: translateY(-1px);
    }

    .scale-nav-btn:disabled[b-b37vplt28s] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.scale-date-display[b-b37vplt28s] {
    flex: 1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    padding: 0.5rem;
    background: var(--content-bg);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
}

/* ====== Period Selector Tabs ====== */
.scale-period-tabs[b-b37vplt28s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--subtle-bg);
    border-radius: 12px;
    border: 1px solid var(--border-divider);
}

.scale-period-tab[b-b37vplt28s] {
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--scale-transition-smooth);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .scale-period-tab[b-b37vplt28s]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        right: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.1), transparent);
        transition: all 0.5s ease;
    }

    .scale-period-tab:hover[b-b37vplt28s] {
        background: rgba(var(--primary-rgb), 0.05);
        color: var(--primary);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

        .scale-period-tab:hover[b-b37vplt28s]::before {
            left: 0;
            right: 0;
        }

    .scale-period-tab.active[b-b37vplt28s] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        font-weight: 700;
    }

    .scale-period-tab i[b-b37vplt28s] {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
        display: block;
    }

/* ====== Stats Overview Cards ====== */
.scale-stats-grid[b-b37vplt28s] {
    padding: 1rem;
    display: grid;
    gap: 0.875rem;
}

.scale-stat-card[b-b37vplt28s] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 14px;
    padding: 1rem;
    transition: var(--scale-transition-smooth);
    position: relative;
    overflow: hidden;
    animation: scale-card-entrance-b-b37vplt28s 0.4s ease-out both;
}

@keyframes scale-card-entrance-b-b37vplt28s {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-stat-card[b-b37vplt28s]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: var(--scale-transition-smooth);
}

.scale-stat-card.stat-total[b-b37vplt28s]::before {
    background: var(--primary);
}

.scale-stat-card.stat-production[b-b37vplt28s]::before {
    background: var(--success);
}

.scale-stat-card.stat-target[b-b37vplt28s]::before {
    background: var(--info);
}

.scale-stat-card.stat-time[b-b37vplt28s]::before {
    background: var(--warning);
}

.scale-stat-card:hover[b-b37vplt28s] {
    transform: translateY(-2px);
    box-shadow: var(--scale-shadow-hover);
    border-color: var(--primary-light);
}

.scale-stat-header[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.scale-stat-icon[b-b37vplt28s] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: var(--scale-transition-smooth);
}

.stat-total .scale-stat-icon[b-b37vplt28s] {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.stat-production .scale-stat-icon[b-b37vplt28s] {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.stat-target .scale-stat-icon[b-b37vplt28s] {
    background: rgba(var(--info-rgb), 0.1);
    color: var(--info);
}

.stat-time .scale-stat-icon[b-b37vplt28s] {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning);
}

.scale-stat-info[b-b37vplt28s] {
    flex: 1;
}

.scale-stat-label[b-b37vplt28s] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem 0;
}

.scale-stat-value[b-b37vplt28s] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    font-family: var(--font-mono);
}

.scale-stat-progress[b-b37vplt28s] {
    margin-top: 0.875rem;
}

.scale-progress-info[b-b37vplt28s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.scale-progress-label[b-b37vplt28s] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.scale-progress-value[b-b37vplt28s] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-mono);
}

.scale-progress-bar[b-b37vplt28s] {
    width: 100%;
    height: 8px;
    background: var(--border-divider);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.scale-progress-fill[b-b37vplt28s] {
    height: 100%;
    border-radius: 20px;
    transition: width 0.5s ease-in-out;
    position: relative;
}

.stat-production .scale-progress-fill[b-b37vplt28s] {
    background: var(--scale-gradient-success);
}

.stat-target .scale-progress-fill[b-b37vplt28s] {
    background: var(--scale-gradient-info);
}

.scale-progress-fill[b-b37vplt28s]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: scale-shimmer-b-b37vplt28s 2s infinite;
}

@keyframes scale-shimmer-b-b37vplt28s {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ====== Target Chase Toggle - Premium Style ====== */
.scale-target-chase[b-b37vplt28s] {
    padding: 1rem;
    background: linear-gradient(135deg, var(--warning-light) 0%, rgba(var(--warning-rgb), 0.05) 100%);
    border-radius: 14px;
    margin: 0 1rem 1rem;
    border: 1px solid rgba(var(--warning-rgb), 0.2);
}

.scale-toggle-container[b-b37vplt28s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.scale-toggle-label[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

    .scale-toggle-label i[b-b37vplt28s] {
        color: var(--warning);
    }

.scale-toggle-switch[b-b37vplt28s] {
    position: relative;
    width: 48px;
    height: 24px;
    flex-shrink: 0;
}

    .scale-toggle-switch input[b-b37vplt28s] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.scale-toggle-slider[b-b37vplt28s] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--text-secondary-rgb), 0.3);
    border-radius: 24px;
    transition: var(--scale-transition-smooth);
}

    .scale-toggle-slider[b-b37vplt28s]::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: var(--scale-transition-smooth);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.scale-toggle-switch input:checked + .scale-toggle-slider[b-b37vplt28s] {
    background: var(--warning);
}

    .scale-toggle-switch input:checked + .scale-toggle-slider[b-b37vplt28s]::before {
        transform: translateX(24px);
    }

/* ====== Main Content Area ====== */
.scale-content-area[b-b37vplt28s] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 20px;
    box-shadow: var(--scale-shadow-soft);
    overflow: visible;
    display: flex;
    flex-direction: column;
    
}

.scale-content-header[b-b37vplt28s] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
}

.scale-content-title[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .scale-content-title h2[b-b37vplt28s] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .scale-content-title i[b-b37vplt28s] {
        color: var(--primary);
        font-size: 1.125rem;
    }

.scale-content-count[b-b37vplt28s] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

/* ====== Premium Table Design ====== */
.scale-table-wrapper[b-b37vplt28s] {
    flex: 1;
    overflow: auto;
    position: relative;
}

.scale-section[b-b37vplt28s] {
    margin: 0;
    border: none;
    background: transparent;
    border: solid;
    margin-bottom: .5em;
    border-width: 1px;
    border-color: var(--primary);
}

.scale-section-header[b-b37vplt28s] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--primary);
    color: white;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0px;
}

    .scale-section-header i[b-b37vplt28s] {
        font-size: 1rem;
        opacity: 0.9;
    }

.scale-table[b-b37vplt28s] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    background: var(--content-bg);
}

    .scale-table th[b-b37vplt28s] {
        background: var(--subtle-bg);
        color: var(--text-primary);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid var(--border-divider);
        border-right: 1px solid var(--border-divider);
        position: sticky;
        top: 0;
        z-index: 5;
    }

        .scale-table th:last-child[b-b37vplt28s] {
            border-right: none;
        }

    .scale-table td[b-b37vplt28s] {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
        border-right: 1px solid rgba(var(--border-divider-rgb), 0.3);
        text-align: center;
        font-weight: 500;
        color: var(--text-primary);
        transition: var(--scale-transition-smooth);
    }

        .scale-table td:last-child[b-b37vplt28s] {
            border-right: none;
        }

    .scale-table tbody tr[b-b37vplt28s] {
        transition: var(--scale-transition-smooth);
        position: relative;
    }

        .scale-table tbody tr[b-b37vplt28s]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: var(--primary);
            transition: width 0.3s ease;
        }

        .scale-table tbody tr:hover[b-b37vplt28s] {
            background: rgba(var(--primary-rgb), 0.04);
        }

            .scale-table tbody tr:hover[b-b37vplt28s]::before {
                width: 3px;
            }

            .scale-table tbody tr:hover td[b-b37vplt28s] {
                transform: translateX(3px);
            }

/* Group header styling */
.scale-group-header[b-b37vplt28s] {
    background: var(--primary);
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    text-align: center;
}

.scale-group-border-left[b-b37vplt28s] {
    border-left: 2px solid var(--primary) !important;
}

/* Scale name cell */
.scale-name-cell[b-b37vplt28s] {
    text-align: left !important;
    font-weight: 600;
    background: var(--content-bg);
    position: sticky;
    left: 0;
    z-index: 6;
    border-right: 2px solid var(--border-divider) !important;
    min-width: 160px;
    max-width: 200px;
}

.scale-name-wrapper[b-b37vplt28s] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.scale-status-indicator[b-b37vplt28s] {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .scale-status-indicator.online[b-b37vplt28s] {
        background: var(--success);
        box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.2);
        animation: scale-pulse-b-b37vplt28s 2s infinite;
    }

    .scale-status-indicator.stale[b-b37vplt28s] {
        background: var(--warning);
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.2);
    }

    .scale-status-indicator.offline[b-b37vplt28s] {
        background: var(--danger);
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.2);
    }

@keyframes scale-pulse-b-b37vplt28s {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

.scale-name-text[b-b37vplt28s] {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Value styling */
.scale-value-positive[b-b37vplt28s] {
    color: var(--success);
    font-weight: 700;
}

.scale-value-negative[b-b37vplt28s] {
    color: var(--danger);
    font-weight: 700;
}

.scale-value-cell[b-b37vplt28s] {
    position: relative;
    font-family: var(--font-mono);
}

.scale-value-updated[b-b37vplt28s] {
    animation: scale-value-highlight-b-b37vplt28s 1s ease;
}

@keyframes scale-value-highlight-b-b37vplt28s {
    0% {
        background: rgba(var(--success-rgb), 0.3);
        transform: scale(1.1);
    }

    100% {
        background: transparent;
        transform: scale(1);
    }
}

/* Total row */
.scale-total-row[b-b37vplt28s] {
    background: var(--subtle-bg) !important;
    font-weight: 800;
}

    .scale-total-row td[b-b37vplt28s],
    .scale-total-row th[b-b37vplt28s] {
        border-top: 2px solid var(--border-divider);
        background: var(--subtle-bg);
        font-size: 0.875rem;
    }

/* ====== Loading State ====== */
.scale-loading-state[b-b37vplt28s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem;
}

.scale-loading-spinner[b-b37vplt28s] {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 2rem;
}

    .scale-loading-spinner[b-b37vplt28s]::before,
    .scale-loading-spinner[b-b37vplt28s]::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 3px solid transparent;
        border-radius: 50%;
    }

    .scale-loading-spinner[b-b37vplt28s]::before {
        border-top-color: var(--primary);
        animation: scale-loader-spin-b-b37vplt28s 1.5s linear infinite;
    }

    .scale-loading-spinner[b-b37vplt28s]::after {
        inset: 10px;
        border-right-color: var(--secondary);
        animation: scale-loader-spin-b-b37vplt28s 2s linear infinite reverse;
    }

@keyframes scale-loader-spin-b-b37vplt28s {
    to {
        transform: rotate(360deg);
    }
}

.scale-loading-text[b-b37vplt28s] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ====== Premium Notification System ====== */
.scale-notification[b-b37vplt28s] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    max-width: 400px;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    box-shadow: var(--scale-shadow-hover);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transform: translateX(calc(100% + 3rem));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1000;
}

.scale-notification-show[b-b37vplt28s] {
    transform: translateX(0);
    opacity: 1;
}

.scale-notification-icon[b-b37vplt28s] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.scale-notification-success .scale-notification-icon[b-b37vplt28s] {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.scale-notification-error .scale-notification-icon[b-b37vplt28s] {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.scale-notification-info .scale-notification-icon[b-b37vplt28s] {
    background: rgba(var(--info-rgb), 0.1);
    color: var(--info);
}

.scale-notification-content[b-b37vplt28s] {
    flex: 1;
    min-width: 0;
}

.scale-notification-title[b-b37vplt28s] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.scale-notification-message[b-b37vplt28s] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.scale-notification-close[b-b37vplt28s] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: var(--scale-transition-smooth);
}

    .scale-notification-close:hover[b-b37vplt28s] {
        background: var(--danger-light);
        color: var(--danger);
    }

/* ====== Responsive Design ====== */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .scale-main-layout[b-b37vplt28s] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 1rem;
    }

    .scale-control-panel[b-b37vplt28s] {
        display: none;
    }

    .scale-mobile-controls[b-b37vplt28s] {
        display: block;
    }

    .scale-header[b-b37vplt28s] {
        padding: 1rem 1.5rem;
    }

    .scale-main-title[b-b37vplt28s] {
        font-size: 1rem;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .scale-header-content[b-b37vplt28s] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .scale-header-stats[b-b37vplt28s] {
        width: 100%;
        justify-content: space-between;
    }

    .scale-header-actions[b-b37vplt28s] {
        width: 100%;
        justify-content: center;
    }

    .scale-stat-pill[b-b37vplt28s] {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
}

/* Large Mobile */
@media (max-width: 768px) {
    .scale-header-wrapper[b-b37vplt28s] {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    .scale-header[b-b37vplt28s] {
        padding: 0.875rem 1rem;
    }

    .scale-title-group[b-b37vplt28s] {
        gap: 0.75rem;
    }

    .scale-main-title[b-b37vplt28s] {
        font-size: 1.25rem;
    }

    .scale-subtitle[b-b37vplt28s] {
        font-size: 0.75rem;
    }

    .scale-icon-wrapper[b-b37vplt28s] {
        width: 40px;
        height: 40px;
    }

        .scale-icon-wrapper i[b-b37vplt28s] {
            font-size: 1rem;
        }

    .scale-header-stats[b-b37vplt28s] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .scale-stat-pill[b-b37vplt28s] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .scale-stat-value[b-b37vplt28s] {
        font-size: 0.8125rem;
    }

    .scale-stat-label[b-b37vplt28s] {
        font-size: 0.625rem;
    }

    .scale-header-actions[b-b37vplt28s] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .scale-btn[b-b37vplt28s] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        flex: 1;
        min-width: 0;
    }

    .scale-main-layout[b-b37vplt28s] {
        padding: 1rem;
        height: auto;
        min-height: calc(100vh - var(--scale-header-height) - 2rem);
    }

    .scale-content-area[b-b37vplt28s] {
        border-radius: 16px;
    }

    .scale-content-header[b-b37vplt28s] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .scale-content-title h2[b-b37vplt28s] {
        font-size: 1.125rem;
    }

    .scale-table th[b-b37vplt28s],
    .scale-table td[b-b37vplt28s] {
        padding: 0.625rem 0.5rem;
        font-size: 0.7rem;
    }

    .scale-name-cell[b-b37vplt28s] {
        min-width: 120px;
        max-width: 150px;
    }

    .scale-notification[b-b37vplt28s] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        bottom: 1rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .scale-header[b-b37vplt28s] {
        padding: 0.75rem;
    }

    .scale-main-title[b-b37vplt28s] {
        font-size: 1.125rem;
    }

    .scale-icon-wrapper[b-b37vplt28s] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

        .scale-icon-wrapper i[b-b37vplt28s] {
            font-size: 0.875rem;
        }

    .scale-icon-glow[b-b37vplt28s] {
        display: none;
    }

    .scale-header-stats[b-b37vplt28s] {
        flex-direction: column;
        gap: 0.375rem;
    }

    .scale-stat-pill[b-b37vplt28s] {
        width: 100%;
        justify-content: space-between;
        padding: 0.375rem 0.625rem;
    }

    .scale-btn[b-b37vplt28s] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 8px;
    }

        .scale-btn span[b-b37vplt28s] {
            display: none;
        }

        .scale-btn i[b-b37vplt28s] {
            font-size: 0.875rem;
        }

    .scale-main-layout[b-b37vplt28s] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .scale-content-area[b-b37vplt28s] {
        border-radius: 12px;
    }

    .scale-table[b-b37vplt28s] {
        font-size: 0.625rem;
    }

        .scale-table th[b-b37vplt28s],
        .scale-table td[b-b37vplt28s] {
            padding: 0.5rem 0.375rem;
            font-size: 0.625rem;
        }

    .scale-name-cell[b-b37vplt28s] {
        min-width: 100px;
        max-width: 120px;
    }

    .scale-status-indicator[b-b37vplt28s] {
        width: 6px;
        height: 6px;
    }

    .scale-section-header[b-b37vplt28s] {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

    .scale-notification[b-b37vplt28s] {
        padding: 1rem;
    }

    .scale-notification-icon[b-b37vplt28s] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .scale-notification-title[b-b37vplt28s] {
        font-size: 0.8125rem;
    }

    .scale-notification-message[b-b37vplt28s] {
        font-size: 0.7rem;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .scale-header[b-b37vplt28s] {
        padding: 0.625rem;
    }

    .scale-main-title[b-b37vplt28s] {
        font-size: 1rem;
    }

    .scale-subtitle[b-b37vplt28s] {
        font-size: 0.625rem;
    }

    .scale-icon-wrapper[b-b37vplt28s] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

        .scale-icon-wrapper i[b-b37vplt28s] {
            font-size: 0.75rem;
        }

    .scale-stat-pill[b-b37vplt28s] {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .scale-stat-value[b-b37vplt28s] {
        font-size: 0.75rem;
    }

    .scale-stat-label[b-b37vplt28s] {
        font-size: 0.5625rem;
    }

    .scale-btn[b-b37vplt28s] {
        padding: 0.375rem 0.5rem;
        font-size: 0.625rem;
        border-radius: 6px;
    }

    .scale-main-layout[b-b37vplt28s] {
        padding: 0.5rem;
    }

    .scale-content-header[b-b37vplt28s] {
        padding: 0.75rem;
    }

    .scale-content-title h2[b-b37vplt28s] {
        font-size: 0.875rem;
    }

    .scale-content-title i[b-b37vplt28s] {
        font-size: 0.875rem;
    }

    .scale-table th[b-b37vplt28s],
    .scale-table td[b-b37vplt28s] {
        padding: 0.375rem 0.25rem;
        font-size: 0.5625rem;
    }

    .scale-name-cell[b-b37vplt28s] {
        min-width: 80px;
        max-width: 100px;
    }

    .scale-name-text[b-b37vplt28s] {
        font-size: 0.625rem;
    }

    .scale-section-header[b-b37vplt28s] {
        padding: 0.5rem 0.75rem;
        font-size: 0.625rem;
    }

    .scale-total-row td[b-b37vplt28s],
    .scale-total-row th[b-b37vplt28s] {
        font-size: 0.625rem;
    }

    .scale-loading-spinner[b-b37vplt28s] {
        width: 60px;
        height: 60px;
    }

    .scale-loading-text[b-b37vplt28s] {
        font-size: 0.875rem;
    }

    .scale-notification[b-b37vplt28s] {
        padding: 0.75rem;
    }

    .scale-notification-icon[b-b37vplt28s] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .scale-notification-title[b-b37vplt28s] {
        font-size: 0.75rem;
    }

    .scale-notification-message[b-b37vplt28s] {
        font-size: 0.625rem;
    }

    .scale-notification-close[b-b37vplt28s] {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }
}

/* ====== Mobile Control Panel ====== */
.scale-mobile-controls[b-b37vplt28s] {
    display: none;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--scale-shadow-soft);
}

@media (max-width: 1200px) {
    .scale-mobile-controls[b-b37vplt28s] {
        display: block;
    }
}

.scale-mobile-header[b-b37vplt28s] {
    padding: 1rem;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-bottom: 1px solid var(--border-divider);
}

.scale-mobile-title[b-b37vplt28s] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scale-mobile-stats[b-b37vplt28s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 1rem;
}

.scale-mobile-stat[b-b37vplt28s] {
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: var(--scale-transition-smooth);
}

    .scale-mobile-stat:hover[b-b37vplt28s] {
        border-color: var(--primary-light);
        transform: translateY(-1px);
    }

.scale-mobile-stat-value[b-b37vplt28s] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    font-family: var(--font-mono);
}

.scale-mobile-stat-label[b-b37vplt28s] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.scale-mobile-nav[b-b37vplt28s] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

    .scale-mobile-nav button[b-b37vplt28s] {
        flex: 1;
        padding: 0.75rem;
        border: 1px solid var(--border-divider);
        background: var(--content-bg);
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: var(--scale-transition-smooth);
        text-align: center;
    }

        .scale-mobile-nav button:hover[b-b37vplt28s] {
            border-color: var(--primary);
            color: var(--primary);
        }

        .scale-mobile-nav button.active[b-b37vplt28s] {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

/* ====== Scrollbar Styling ====== */
.scale-table-wrapper[b-b37vplt28s]::-webkit-scrollbar,
.scale-control-panel[b-b37vplt28s]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scale-table-wrapper[b-b37vplt28s]::-webkit-scrollbar-track,
.scale-control-panel[b-b37vplt28s]::-webkit-scrollbar-track {
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border-radius: 4px;
}

.scale-table-wrapper[b-b37vplt28s]::-webkit-scrollbar-thumb,
.scale-control-panel[b-b37vplt28s]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scroll-thumb) 0%, rgba(var(--primary-rgb), 0.3) 100%);
    border-radius: 4px;
    border: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .scale-table-wrapper[b-b37vplt28s]::-webkit-scrollbar-thumb:hover,
    .scale-control-panel[b-b37vplt28s]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--scroll-thumb-hover) 0%, rgba(var(--primary-rgb), 0.5) 100%);
    }

/* ====== Print Styles ====== */
@media print {
    .scale-header-wrapper[b-b37vplt28s],
    .scale-control-panel[b-b37vplt28s],
    .scale-mobile-controls[b-b37vplt28s],
    .scale-notification[b-b37vplt28s] {
        display: none !important;
    }

    .scale-main-layout[b-b37vplt28s] {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0;
    }

    .scale-content-area[b-b37vplt28s] {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .scale-table-wrapper[b-b37vplt28s] {
        overflow: visible;
    }

    .scale-table[b-b37vplt28s] {
        break-inside: avoid;
    }

    .scale-section-header[b-b37vplt28s] {
        position: static;
        break-after: avoid;
    }
}

/* ====== Accessibility ====== */
@media (prefers-reduced-motion: reduce) {
    .scale-spin[b-b37vplt28s],
    .scale-glow-pulse[b-b37vplt28s],
    .scale-pulse[b-b37vplt28s],
    .scale-shimmer[b-b37vplt28s],
    .scale-loader-spin[b-b37vplt28s] {
        animation: none;
    }

    .scale-btn[b-b37vplt28s],
    .scale-stat-pill[b-b37vplt28s],
    .scale-stat-card[b-b37vplt28s],
    .scale-period-tab[b-b37vplt28s],
    .scale-nav-btn[b-b37vplt28s],
    .scale-table tbody tr[b-b37vplt28s] {
        transition: none;
    }

        .scale-btn:hover:not(:disabled)[b-b37vplt28s],
        .scale-stat-pill:hover[b-b37vplt28s],
        .scale-stat-card:hover[b-b37vplt28s],
        .scale-period-tab:hover[b-b37vplt28s],
        .scale-nav-btn:hover:not(:disabled)[b-b37vplt28s],
        .scale-table tbody tr:hover[b-b37vplt28s] {
            transform: none;
        }
}

/* ====== High Contrast Mode ====== */
@media (prefers-contrast: high) {
    .scale-stat-card[b-b37vplt28s],
    .scale-control-panel[b-b37vplt28s],
    .scale-content-area[b-b37vplt28s],
    .scale-notification[b-b37vplt28s] {
        border-width: 2px;
    }

    .scale-btn[b-b37vplt28s] {
        border-width: 2px;
    }

    .scale-stat-pill[b-b37vplt28s],
    .scale-period-tab[b-b37vplt28s] {
        border-width: 2px;
    }
}

/* ====== Dark Mode Enhancements ====== */
@media (prefers-color-scheme: dark) {
    .scale-stat-card:hover[b-b37vplt28s],
    .scale-control-panel:hover[b-b37vplt28s],
    .scale-content-area:hover[b-b37vplt28s] {
        background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.08) 100%);
    }

    .scale-table tbody tr:hover[b-b37vplt28s] {
        background: rgba(var(--primary-rgb), 0.08);
    }

    .scale-loading-spinner[b-b37vplt28s]::before,
    .scale-loading-spinner[b-b37vplt28s]::after {
        opacity: 0.9;
    }
}
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleManagement.razor.rz.scp.css */
/* _content/MajestyPortal/Components/Pages/Dashboards/Scales/ScaleOverview.razor.rz.scp.css */
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeAddressInfo.razor.rz.scp.css */
/* ====== Employee Addresses Styles ====== */
/* ====== Employee Addresses Styles ====== */

/* Form Section Container */
.em-form-section[b-w7hxpevmry] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-w7hxpevmry 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-w7hxpevmry] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-w7hxpevmry]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--warning));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-w7hxpevmry]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-w7hxpevmry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-w7hxpevmry]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-w7hxpevmry]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-w7hxpevmry] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-w7hxpevmry] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-section-actions[b-w7hxpevmry] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-w7hxpevmry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-w7hxpevmry] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-w7hxpevmry 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-w7hxpevmry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-w7hxpevmry 0.5s ease both;
}

    .em-empty-state > i[b-w7hxpevmry] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-w7hxpevmry] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-w7hxpevmry] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-w7hxpevmry] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Address Summary */
.em-address-summary[b-w7hxpevmry] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.em-summary-card[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 190px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-w7hxpevmry 0.4s ease both;
}

    .em-summary-card:nth-child(1)[b-w7hxpevmry] {
        animation-delay: 0.1s;
    }

    .em-summary-card:nth-child(2)[b-w7hxpevmry] {
        animation-delay: 0.2s;
    }

    .em-summary-card:nth-child(3)[b-w7hxpevmry] {
        animation-delay: 0.3s;
    }

    .em-summary-card:hover[b-w7hxpevmry] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.em-summary-icon[b-w7hxpevmry] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--warning-light);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

    .em-summary-icon.primary[b-w7hxpevmry] {
        background-color: var(--primary-light);
        color: var(--primary);
    }

    .em-summary-icon.secondary[b-w7hxpevmry] {
        background-color: var(--info-light);
        color: var(--info);
    }

.em-summary-card:hover .em-summary-icon[b-w7hxpevmry] {
    transform: scale(1.1) rotate(10deg);
}

.em-summary-content[b-w7hxpevmry] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-w7hxpevmry] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-w7hxpevmry] {
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.em-toast-close:hover[b-w7hxpevmry] {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* Button Styles */
.em-btn[b-w7hxpevmry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-w7hxpevmry] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-w7hxpevmry] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-w7hxpevmry] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-w7hxpevmry] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-w7hxpevmry] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-w7hxpevmry] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-w7hxpevmry] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-w7hxpevmry] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-w7hxpevmry] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn:disabled[b-w7hxpevmry] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Animations */
@keyframes fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-w7hxpevmry {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-w7hxpevmry {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-w7hxpevmry {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-w7hxpevmry {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes switch-ripple-b-w7hxpevmry {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(15, 15);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(30, 30);
    }
}

@keyframes modal-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes card-slide-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grid-fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes alert-fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-address-grid[b-w7hxpevmry] {
        grid-template-columns: 1fr 1fr;
    }

    .em-address-summary[b-w7hxpevmry] {
        flex-wrap: wrap;
    }

    .em-summary-card[b-w7hxpevmry] {
        min-width: 160px;
    }

    .em-preview-address[b-w7hxpevmry] {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .em-address-grid[b-w7hxpevmry] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-w7hxpevmry] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-w7hxpevmry] {
        max-height: calc(100vh - 170px);
    }

    .em-form-row[b-w7hxpevmry] {
        grid-template-columns: 1fr;
    }

    .em-preview-content[b-w7hxpevmry] {
        padding: 1rem;
    }

    .em-address-stamp[b-w7hxpevmry] {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .em-preview-address[b-w7hxpevmry] {
        padding: 0.75rem;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-w7hxpevmry] {
        padding: 1rem;
    }

    .em-section-header[b-w7hxpevmry] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-w7hxpevmry] {
        width: 100%;
        justify-content: space-between;
    }

    .em-address-actions[b-w7hxpevmry] {
        justify-content: center;
    }

    .em-modal-footer[b-w7hxpevmry] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-w7hxpevmry] {
            width: 100%;
        }

    .em-toast[b-w7hxpevmry] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-form-group label[b-w7hxpevmry] {
        padding-left: 0;
    }

        .em-form-group label[b-w7hxpevmry]::before {
            display: none;
        }

    .em-form-help[b-w7hxpevmry],
    .em-error-message[b-w7hxpevmry] {
        padding-left: 0;
    }

    .em-address-stamp[b-w7hxpevmry] {
        display: none;
    }
}

rem;
color: var(--text-secondary);[b-w7hxpevmry]
}

/* Address Filters */
.em-address-filters[b-w7hxpevmry] {
    margin-bottom: 1.5rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 0.75rem;
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-w7hxpevmry 0.4s ease both;
}

.em-filter-buttons[b-w7hxpevmry] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Address Grid */
.em-address-grid[b-w7hxpevmry] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    animation: grid-fade-in-b-w7hxpevmry 0.6s ease both;
    padding-top: 10px;
}

/* Address Card */
.em-address-card[b-w7hxpevmry] {
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-slide-in-b-w7hxpevmry 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    transform-origin: center;
    position: relative;
}

    .em-address-card:nth-child(1)[b-w7hxpevmry] {
        --card-index: 1;
    }

    .em-address-card:nth-child(2)[b-w7hxpevmry] {
        --card-index: 2;
    }

    .em-address-card:nth-child(3)[b-w7hxpevmry] {
        --card-index: 3;
    }

    .em-address-card:nth-child(4)[b-w7hxpevmry] {
        --card-index: 4;
    }

    .em-address-card:hover[b-w7hxpevmry] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .em-address-card.em-primary[b-w7hxpevmry] {
        border-left: 3px solid var(--primary);
    }

        .em-address-card.em-primary[b-w7hxpevmry]::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 40px 40px 0;
            border-color: transparent var(--primary) transparent transparent;
            z-index: 1;
        }

.em-address-header[b-w7hxpevmry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: rgba(255, 255, 255, 0.05);
}

.em-address-info[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-address-type[b-w7hxpevmry] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--subtle-bg);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-divider);
}

.em-address-primary[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    animation: pulse-primary-b-w7hxpevmry 2s infinite alternate;
}

    .em-address-primary i[b-w7hxpevmry] {
        color: var(--primary);
        font-size: 0.75rem;
    }

.em-address-content[b-w7hxpevmry] {
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.em-address-map[b-w7hxpevmry] {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary-light);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.em-address-card:hover .em-address-map[b-w7hxpevmry] {
    transform: scale(1.1) rotate(5deg);
    background-color: var(--primary);
    color: white;
}

.em-address-lines[b-w7hxpevmry] {
    flex: 1;
}

.em-address-line[b-w7hxpevmry] {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

    .em-address-line:first-child[b-w7hxpevmry] {
        font-weight: 500;
        color: var(--text-primary);
    }

.em-address-actions[b-w7hxpevmry] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-divider);
    justify-content: flex-end;
}

/* Form Row */
.em-form-row[b-w7hxpevmry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Form Group */
.em-form-group[b-w7hxpevmry] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-w7hxpevmry] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-w7hxpevmry] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-w7hxpevmry]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-w7hxpevmry]::before,
    .em-form-group:has(select:not([value=""])) label[b-w7hxpevmry]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-w7hxpevmry]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-w7hxpevmry] {
        color: var(--primary);
    }

    .em-form-group input[b-w7hxpevmry],
    .em-form-group select[b-w7hxpevmry],
    .em-form-group textarea[b-w7hxpevmry] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-w7hxpevmry],
        .em-form-group select:focus[b-w7hxpevmry],
        .em-form-group textarea:focus[b-w7hxpevmry] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-w7hxpevmry],
        .em-form-group select:hover[b-w7hxpevmry],
        .em-form-group textarea:hover[b-w7hxpevmry] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-w7hxpevmry],
        .em-form-group textarea:not(:placeholder-shown)[b-w7hxpevmry],
        .em-form-group select:not([value=""])[b-w7hxpevmry] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

.em-required[b-w7hxpevmry] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-w7hxpevmry 2s infinite;
}

.em-input-error[b-w7hxpevmry] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-w7hxpevmry] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-w7hxpevmry] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-w7hxpevmry 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-w7hxpevmry]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

/* Help Text */
.em-form-help[b-w7hxpevmry] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-w7hxpevmry] {
    color: var(--text-secondary);
}

/* Switch Control - Enhanced */
.em-switch[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .em-switch input[b-w7hxpevmry] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-w7hxpevmry] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .em-switch label[b-w7hxpevmry]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-w7hxpevmry] {
        background-color: var(--primary);
    }


        .em-switch input:checked + label[b-w7hxpevmry]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch input:focus + label[b-w7hxpevmry] {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }

    .em-switch span[b-w7hxpevmry] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .em-switch:hover span[b-w7hxpevmry] {
        color: var(--text-primary);
    }

    /* Ripple effect on toggle */
    .em-switch label[b-w7hxpevmry]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-switch input:checked + label[b-w7hxpevmry]::after {
        animation: switch-ripple-b-w7hxpevmry 0.6s ease-out;
    }

/* Button Link */
.em-btn-link[b-w7hxpevmry] {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--primary);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    transition: all 0.2s ease;
}

    .em-btn-link:hover[b-w7hxpevmry] {
        color: var(--primary-hover);
        text-decoration: underline;
    }

/* Tooltip */
.em-tooltip-trigger[b-w7hxpevmry] {
    margin-left: 0.5rem;
    color: var(--text-muted);
    cursor: help;
    transition: color 0.2s ease;
}

    .em-tooltip-trigger:hover[b-w7hxpevmry] {
        color: var(--text-secondary);
    }

/* Enhanced Address Preview */
.em-address-preview[b-w7hxpevmry] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    margin-top: 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: fade-in-up-b-w7hxpevmry 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    transition: all 0.3s ease;
}

    .em-address-preview:hover[b-w7hxpevmry] {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    .em-address-preview[b-w7hxpevmry]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--info-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-address-preview:hover[b-w7hxpevmry]::before {
        transform: scaleX(1.5);
    }

.em-preview-header[b-w7hxpevmry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
}

    .em-preview-header[b-w7hxpevmry]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--info) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-address-preview:hover .em-preview-header[b-w7hxpevmry]::after {
    transform: scaleX(1);
}

.em-preview-header i[b-w7hxpevmry] {
    color: white;
    font-size: 1.125rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--info-gradient);
    border-radius: var(--border-radius-md);
    box-shadow: 0 3px 6px rgba(var(--info-rgb), 0.2);
    transition: all 0.3s ease;
}

.em-address-preview:hover .em-preview-header i[b-w7hxpevmry] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--info-rgb), 0.3);
}

.em-preview-content[b-w7hxpevmry] {
    padding: 1.5rem;
    position: relative;
    background-color: var(--content-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0h20v20L20 40H0z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 50px;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.em-address-stamp[b-w7hxpevmry] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    border: 1px dashed var(--border-divider);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--info-rgb), 0.05);
    transform: rotate(5deg);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.em-address-preview:hover .em-address-stamp[b-w7hxpevmry] {
    transform: rotate(0deg);
    opacity: 1;
}

.em-address-stamp i[b-w7hxpevmry] {
    font-size: 1.75rem;
    color: var(--info);
    opacity: 0.8;
}

.em-preview-address[b-w7hxpevmry] {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    font-family: 'Courier New', monospace;
    padding: 1rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
    max-width: 80%;
}

.em-preview-label[b-w7hxpevmry] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-preview-line[b-w7hxpevmry] {
    margin-bottom: 0.25rem;
}

.em-preview-placeholder[b-w7hxpevmry] {
    color: var(--text-muted);
    font-style: italic;
}

/* Modal Styles */
.em-modal-overlay[b-w7hxpevmry] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-w7hxpevmry 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-w7hxpevmry] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-w7hxpevmry 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-sm[b-w7hxpevmry] {
    max-width: 450px;
}

.em-modal-header[b-w7hxpevmry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .em-modal-header h3[b-w7hxpevmry] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-w7hxpevmry] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-w7hxpevmry] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-w7hxpevmry] {
    padding: 1.25rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-w7hxpevmry] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Confirmation Content */
.em-confirmation-content[b-w7hxpevmry] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-w7hxpevmry] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger-bg);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.em-confirmation-content p[b-w7hxpevmry] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-w7hxpevmry] {
        margin-bottom: 0;
    }

.em-confirmation-content strong[b-w7hxpevmry] {
    color: var(--text-primary);
}

/* Alert */
.em-alert[b-w7hxpevmry] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary);
    animation: alert-fade-in-b-w7hxpevmry 0.3s ease both;
}

.em-alert-warning[b-w7hxpevmry] {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
}

.em-alert-info[b-w7hxpevmry] {
    background-color: var(--info-light);
    border-left-color: var(--info);
}

.em-alert i[b-w7hxpevmry] {
    color: var(--info);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert-warning i[b-w7hxpevmry] {
    color: var(--warning);
}

.em-alert-info i[b-w7hxpevmry] {
    color: var(--info);
}

.em-alert p[b-w7hxpevmry] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toast Notification */
.em-toast[b-w7hxpevmry] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-w7hxpevmry 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-w7hxpevmry] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-w7hxpevmry] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-w7hxpevmry] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-w7hxpevmry] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-w7hxpevmry] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-w7hxpevmry] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-w7hxpevmry] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-w7hxpevmry] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-w7hxpevmry] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-w7hxpevmry] {
    flex: 1;
}

.em-toast-title[b-w7hxpevmry] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-w7hxpevmry] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-w7hxpevmry] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-w7hxpevmry] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-w7hxpevmry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-w7hxpevmry] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-w7hxpevmry] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-w7hxpevmry] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-w7hxpevmry] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-w7hxpevmry] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-w7hxpevmry] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-w7hxpevmry] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-w7hxpevmry] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-w7hxpevmry] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn:disabled[b-w7hxpevmry] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Animations */
@keyframes fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-w7hxpevmry {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-w7hxpevmry {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-w7hxpevmry {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modal-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes card-slide-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grid-fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shake-b-w7hxpevmry {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes alert-fade-in-b-w7hxpevmry {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-address-grid[b-w7hxpevmry] {
        grid-template-columns: 1fr 1fr;
    }

    .em-address-summary[b-w7hxpevmry] {
        flex-wrap: wrap;
    }

    .em-summary-card[b-w7hxpevmry] {
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .em-address-grid[b-w7hxpevmry] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-w7hxpevmry] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-w7hxpevmry] {
        max-height: calc(100vh - 170px);
    }

    .em-form-row[b-w7hxpevmry] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-w7hxpevmry] {
        padding: 1rem;
    }

    .em-section-header[b-w7hxpevmry] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-w7hxpevmry] {
        width: 100%;
        justify-content: space-between;
    }

    .em-address-actions[b-w7hxpevmry] {
        justify-content: center;
    }

    .em-modal-footer[b-w7hxpevmry] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-w7hxpevmry] {
            width: 100%;
        }

    .em-toast[b-w7hxpevmry] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeAdvancedFilters.razor.rz.scp.css */
/* ====== Employee Advanced Filters Stylesheet ====== */

/* Main Container */
.em-advanced-filters[b-whi44lzmm2] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-whi44lzmm2 0.3s ease-out;
    width: 100%;
    transition: var(--card-transition);
}

    .em-advanced-filters:hover[b-whi44lzmm2] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

/* Filter Sections */
.em-filter-section[b-whi44lzmm2] {
    margin-bottom: 1.5rem;
    animation: slide-in-left-b-whi44lzmm2 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--animation-index, 0) * 0.1s);
}

    .em-filter-section:nth-child(2)[b-whi44lzmm2] {
        --animation-index: 1;
    }

    .em-filter-section:nth-child(3)[b-whi44lzmm2] {
        --animation-index: 2;
    }

    .em-filter-section h3[b-whi44lzmm2] {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .em-filter-section h3 i[b-whi44lzmm2] {
            color: var(--primary-color);
            font-size: 1.125rem;
        }

/* Filter Rows */
.em-filter-row[b-whi44lzmm2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .em-filter-row:last-child[b-whi44lzmm2] {
        margin-bottom: 0;
    }

/* Individual Filters */
.em-filter[b-whi44lzmm2] {
    flex: 1;
    min-width: 250px;
    position: relative;
    transition: transform 0.2s ease;
}

    .em-filter:focus-within[b-whi44lzmm2] {
        transform: translateY(-2px);
    }

    .em-filter label[b-whi44lzmm2] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .em-filter select[b-whi44lzmm2],
    .em-filter input[b-whi44lzmm2] {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: var(--hover-transition);
        box-shadow: var(--shadow-sm);
    }

        .em-filter select:hover[b-whi44lzmm2],
        .em-filter input:hover[b-whi44lzmm2] {
            border-color: var(--border-color);
        }

        .em-filter select:focus[b-whi44lzmm2],
        .em-filter input:focus[b-whi44lzmm2] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: var(--shadow-focus);
        }

        .em-filter select:disabled[b-whi44lzmm2] {
            opacity: 0.6;
            cursor: not-allowed;
            background-color: rgba(0, 0, 0, 0.03);
        }

.theme-dark .em-filter select:disabled[b-whi44lzmm2] {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Date Range Styling */
.em-filter-date[b-whi44lzmm2] {
    flex: 2;
    min-width: 300px;
}

.em-date-range[b-whi44lzmm2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-date-range input[b-whi44lzmm2] {
        flex: 1;
    }

.em-date-separator[b-whi44lzmm2] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Checkbox Group */
.em-checkbox-group[b-whi44lzmm2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.em-checkbox[b-whi44lzmm2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

    .em-checkbox input[b-whi44lzmm2] {
        width: auto;
        height: 1.125rem;
        width: 1.125rem;
        border-radius: 0.25rem;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: var(--hover-transition);
    }

        .em-checkbox input:checked[b-whi44lzmm2] {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
            background-size: 75% 75%;
            background-position: center;
            background-repeat: no-repeat;
        }

    .em-checkbox span[b-whi44lzmm2] {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

/* Filter Stats */
.em-filter-stats[b-whi44lzmm2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--border-divider);
    margin-top: 1rem;
}

.em-filter-summary[b-whi44lzmm2] {
    display: flex;
    gap: 1rem;
}

/* Stats Cards */
.em-stats-card[b-whi44lzmm2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background-color: var(--subtle-bg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    transition: var(--hover-transition);
}

    .em-stats-card:hover[b-whi44lzmm2] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.em-stats-card-icon[b-whi44lzmm2] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: var(--primary-light);
    color: var(--primary-color);
}

    .em-stats-card-icon.primary[b-whi44lzmm2] {
        background: var(--primary-gradient);
        color: white;
        box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-stats-card-content[b-whi44lzmm2] {
    display: flex;
    flex-direction: column;
}

.em-stats-value[b-whi44lzmm2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-stats-label[b-whi44lzmm2] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Filter Actions */
.em-filter-actions[b-whi44lzmm2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider);
}

/* Button Styles */
.em-btn[b-whi44lzmm2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .em-btn[b-whi44lzmm2]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-btn:focus:not(:active)[b-whi44lzmm2]::after {
        animation: ripple-b-whi44lzmm2 0.6s ease-out;
    }

.em-btn-sm[b-whi44lzmm2] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    min-height: 34px;
}

.em-btn-primary[b-whi44lzmm2] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-whi44lzmm2] {
        background: var(--primary-hover);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-whi44lzmm2] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-whi44lzmm2] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-whi44lzmm2] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

/* Animations */
@keyframes fade-in-down-b-whi44lzmm2 {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left-b-whi44lzmm2 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ripple-b-whi44lzmm2 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .em-filter-row[b-whi44lzmm2] {
        flex-direction: column;
    }

    .em-filter[b-whi44lzmm2] {
        width: 100%;
    }

    .em-filter-stats[b-whi44lzmm2] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .em-filter-summary[b-whi44lzmm2] {
        flex-direction: column;
        gap: 0.625rem;
        width: 100%;
    }

    .em-filter-actions[b-whi44lzmm2] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .em-advanced-filters[b-whi44lzmm2] {
        padding: 1rem;
    }

    .em-filter-section h3[b-whi44lzmm2] {
        font-size: 0.9375rem;
    }

    .em-stats-card[b-whi44lzmm2] {
        width: 100%;
    }

    .em-btn-sm span[b-whi44lzmm2] {
        display: none;
    }

    .em-btn-sm i[b-whi44lzmm2] {
        margin-right: 0;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeCalendar.razor.rz.scp.css */
/* EmployeeCalendar.razor.css - Modern, responsive calendar with animations */

/* ======= Container Layout ======= */
.em-container[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--body-bg);
    overflow: hidden;
    position: relative;
}

/* ======= Header Styling ======= */
.em-header[b-97c8by7vpv] {
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-divider);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    transition: all 0.2s ease;
    animation: slide-in-top 0.4s ease;
}

.em-header-content[b-97c8by7vpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.em-header-title[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .em-header-title i[b-97c8by7vpv] {
        font-size: 1.75rem;
        color: var(--primary-color);
        background-color: var(--primary-light);
        padding: 0.75rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .em-header-title:hover i[b-97c8by7vpv] {
        transform: scale(1.05) rotate(10deg);
        box-shadow: var(--shadow-md);
    }

    .em-header-title h1[b-97c8by7vpv] {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        color: var(--text-primary);
    }

    .em-header-title p[b-97c8by7vpv] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
        animation: fade-in 0.8s ease;
    }

.em-header-actions[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ======= Main Content Styling ======= */
.em-main-content[b-97c8by7vpv] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    animation: fade-in 0.5s ease;
}

/* ======= Calendar Controls ======= */
.em-calendar-controls[b-97c8by7vpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
    animation: fade-in-up-b-97c8by7vpv 0.6s ease;
}

.em-calendar-navigation[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-calendar-title[b-97c8by7vpv] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    min-width: 200px;
    text-align: center;
    transition: all 0.3s ease;
}

.em-view-toggle[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: 10px;
    padding: 0.25rem;
    border: 1px solid var(--border-divider);
}

    .em-view-toggle button[b-97c8by7vpv] {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

        .em-view-toggle button:not(.em-btn-primary):hover[b-97c8by7vpv] {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

/* ======= Filters Container ======= */
.em-filters-container[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
    animation: fade-in-up-b-97c8by7vpv 0.7s ease;
}

.em-category-filters[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.em-category-label[b-97c8by7vpv] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

    .em-category-label:hover[b-97c8by7vpv] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.em-checkbox[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .em-checkbox:hover[b-97c8by7vpv] {
        transform: translateY(-1px);
    }

    .em-checkbox input[b-97c8by7vpv] {
        margin-right: 0.5rem;
        position: relative;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 0.25rem;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: all 0.2s ease;
    }

        .em-checkbox input:checked[b-97c8by7vpv] {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

            .em-checkbox input:checked[b-97c8by7vpv]::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -60%) rotate(45deg);
                width: 0.3rem;
                height: 0.6rem;
                border-bottom: 2px solid white;
                border-right: 2px solid white;
                animation: checkmark-b-97c8by7vpv 0.2s ease forwards;
            }

@keyframes checkmark-b-97c8by7vpv {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    100% {
        height: 0.6rem;
        width: 0.3rem;
        opacity: 1;
    }
}

.em-category-birthday[b-97c8by7vpv] {
    background-color: rgba(255, 64, 129, 0.15);
    color: #FF4081;
    border: 1px solid rgba(255, 64, 129, 0.2);
}

.em-category-anniversary[b-97c8by7vpv] {
    background-color: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
    border: 1px solid rgba(156, 39, 176, 0.2);
}

.em-category-certification[b-97c8by7vpv] {
    background-color: rgba(33, 150, 243, 0.15);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.2);
}

.em-category-induction[b-97c8by7vpv] {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.em-category-contract[b-97c8by7vpv] {
    background-color: rgba(255, 152, 0, 0.15);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.2);
}

/* ======= Advanced Filters Panel ======= */
.em-advanced-filters[b-97c8by7vpv] {
    background-color: var(--content-bg);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    animation: fade-in 0.4s ease-out;
    transition: all 0.3s ease;
}

    .em-advanced-filters:hover[b-97c8by7vpv] {
        box-shadow: var(--shadow-md);
    }

.em-filter-row[b-97c8by7vpv] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-filter[b-97c8by7vpv] {
    flex: 1;
    min-width: 200px;
}

    .em-filter label[b-97c8by7vpv] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 500;
    }

    .em-filter select[b-97c8by7vpv],
    .em-filter input[type="date"][b-97c8by7vpv] {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

        .em-filter select:focus[b-97c8by7vpv],
        .em-filter input[type="date"]:focus[b-97c8by7vpv] {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--focus-ring);
            outline: none;
        }

        .em-filter select:hover[b-97c8by7vpv],
        .em-filter input[type="date"]:hover[b-97c8by7vpv] {
            border-color: var(--primary-color);
        }

.em-filter-date[b-97c8by7vpv] {
    position: relative;
}

    .em-filter-date input[type="date"][b-97c8by7vpv] {
        position: relative;
        padding-right: 2.5rem;
    }

        .em-filter-date input[type="date"][b-97c8by7vpv]::-webkit-calendar-picker-indicator {
            background-color: var(--primary-light);
            padding: 0.4rem;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .em-filter-date input[type="date"][b-97c8by7vpv]::-webkit-calendar-picker-indicator:hover {
                background-color: var(--primary-color);
                opacity: 0.8;
            }

.em-filter-stats[b-97c8by7vpv] {
    flex: 1;
    min-width: 250px;
}

.em-filter-summary[b-97c8by7vpv] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.em-stats-card[b-97c8by7vpv] {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 8px;
    border: 1px solid var(--border-divider);
    transition: all 0.3s ease;
}

    .em-stats-card:hover[b-97c8by7vpv] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-sm);
    }

.em-stats-card-icon[b-97c8by7vpv] {
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.em-stats-card:hover .em-stats-card-icon[b-97c8by7vpv] {
    transform: scale(1.1);
}

.em-stats-card-content[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
}

.em-stats-value[b-97c8by7vpv] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-stats-label[b-97c8by7vpv] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-filter-actions[b-97c8by7vpv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ======= Calendar Container ======= */
.em-calendar-container[b-97c8by7vpv] {
    position: relative;
    min-height: 300px;
    animation: fade-in-up-b-97c8by7vpv 0.8s ease;
}

/* ======= Month Calendar View ======= */
.em-month-calendar[b-97c8by7vpv] {
    background-color: var(--content-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    transition: all 0.3s ease;
}

    .em-month-calendar:hover[b-97c8by7vpv] {
        box-shadow: var(--shadow-md);
    }

.em-calendar-header[b-97c8by7vpv] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--table-header-bg);
    border-bottom: 1px solid var(--border-divider);
}

.em-weekday[b-97c8by7vpv] {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.em-calendar-grid[b-97c8by7vpv] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(120px, auto);
}

.em-calendar-day[b-97c8by7vpv] {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 120px;
    background-color: var(--content-bg);
    transition: background-color 0.3s ease;
}

    .em-calendar-day:hover[b-97c8by7vpv] {
        background-color: var(--hover-bg);
    }

    .em-calendar-day.em-today[b-97c8by7vpv] {
        background-color: var(--primary-light);
        animation: today-highlight-b-97c8by7vpv 1s infinite alternate;
    }

@keyframes today-highlight-b-97c8by7vpv {
    from {
        background-color: var(--primary-light);
    }

    to {
        background-color: rgba(var(--primary-rgb), 0.2);
    }
}

.em-calendar-day.em-other-month[b-97c8by7vpv] {
    background-color: var(--subtle-bg);
    color: var(--text-muted);
}

.em-day-header[b-97c8by7vpv] {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.em-day-number[b-97c8by7vpv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.em-today .em-day-number[b-97c8by7vpv] {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4);
    animation: pulse-primary 2s infinite;
}

.em-day-events[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
}

.em-event-pill[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 0.375rem;
}

    .em-event-pill:hover[b-97c8by7vpv] {
        transform: translateX(3px) scale(1.01);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

.em-event-text[b-97c8by7vpv] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-event-birthday[b-97c8by7vpv] {
    background-color: rgba(255, 64, 129, 0.15);
    color: #FF4081;
    border-left: 3px solid #FF4081;
}

.em-event-anniversary[b-97c8by7vpv] {
    background-color: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
    border-left: 3px solid #9C27B0;
}

.em-event-certification[b-97c8by7vpv] {
    background-color: rgba(33, 150, 243, 0.15);
    color: #2196F3;
    border-left: 3px solid #2196F3;
}

.em-event-induction[b-97c8by7vpv] {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border-left: 3px solid #4CAF50;
}

.em-event-contract[b-97c8by7vpv] {
    background-color: rgba(255, 152, 0, 0.15);
    color: #FF9800;
    border-left: 3px solid #FF9800;
}

.em-more-events[b-97c8by7vpv] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-more-events:hover[b-97c8by7vpv] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: scale(1.02);
    }

/* ======= Timeline View ======= */
.em-timeline[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fade-in 0.5s ease;
}

.em-timeline-group[b-97c8by7vpv] {
    background-color: var(--content-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    transition: all 0.3s ease;
    animation: fade-in-up-b-97c8by7vpv 0.5s ease both;
}

    .em-timeline-group:hover[b-97c8by7vpv] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.em-timeline-header[b-97c8by7vpv] {
    padding: 1rem 1.25rem;
    background-color: var(--table-header-bg);
    border-bottom: 1px solid var(--border-divider);
}

.em-timeline-title[b-97c8by7vpv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-timeline-events[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
}

.em-timeline-event[b-97c8by7vpv] {
    display: flex;
    align-items: flex-start;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
    animation: fade-in 0.5s ease forwards;
}

    .em-timeline-event:hover[b-97c8by7vpv] {
        background-color: var(--primary-light);
        transform: translateX(5px);
    }

    .em-timeline-event:last-child[b-97c8by7vpv] {
        border-bottom: none;
    }

.em-timeline-date[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4rem;
    margin-right: 1.25rem;
}

.em-date-day[b-97c8by7vpv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.em-date-month[b-97c8by7vpv] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.em-event-content[b-97c8by7vpv] {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 1rem;
}

.em-event-indicator[b-97c8by7vpv] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.em-timeline-event:hover .em-event-indicator[b-97c8by7vpv] {
    transform: scale(1.1) rotate(5deg);
}

.em-event-indicator.em-event-birthday[b-97c8by7vpv] {
    background-color: rgba(255, 64, 129, 0.15);
    color: #FF4081;
}

.em-event-indicator.em-event-anniversary[b-97c8by7vpv] {
    background-color: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
}

.em-event-indicator.em-event-certification[b-97c8by7vpv] {
    background-color: rgba(33, 150, 243, 0.15);
    color: #2196F3;
}

.em-event-indicator.em-event-induction[b-97c8by7vpv] {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.em-event-indicator.em-event-contract[b-97c8by7vpv] {
    background-color: rgba(255, 152, 0, 0.15);
    color: #FF9800;
}

.em-event-details[b-97c8by7vpv] {
    flex: 1;
}

.em-event-title[b-97c8by7vpv] {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-event-description[b-97c8by7vpv] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.em-event-employee[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-employee-name[b-97c8by7vpv] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-color);
    background-color: var(--primary-light);
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

    .em-employee-name:hover[b-97c8by7vpv] {
        transform: translateY(-2px);
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
    }

.em-expiring-badge[b-97c8by7vpv] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
    background-color: var(--danger-bg);
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    animation: pulse-danger 2s infinite;
}

.em-timeline-actions[b-97c8by7vpv] {
    margin-left: auto;
}

/* ======= State Indicators ======= */
.em-loading-state[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    height: 100%;
    min-height: 300px;
    animation: fade-in 0.5s ease;
}

.em-loading-spinner[b-97c8by7vpv] {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s infinite cubic-bezier(0.41, 0.26, 0.54, 0.94);
    margin-bottom: 1.5rem;
}

.em-empty-state[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    height: 100%;
    min-height: 300px;
    animation: fade-in 0.5s ease;
}

    .em-empty-state > i[b-97c8by7vpv] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
        animation: float-b-97c8by7vpv 3s ease-in-out infinite;
    }

@keyframes float-b-97c8by7vpv {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.em-empty-state h3[b-97c8by7vpv] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-empty-state p[b-97c8by7vpv] {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 350px;
}

/* ======= Event Details Modal ======= */
.em-modal-overlay[b-97c8by7vpv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    animation: fade-in 0.3s ease both;
}

.em-modal[b-97c8by7vpv] {
    background-color: var(--content-bg);
    border-radius: 16px;
    width: 500px;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    animation: modal-in-b-97c8by7vpv 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border: 1px solid var(--border-divider);
}

@keyframes modal-in-b-97c8by7vpv {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.em-modal-header[b-97c8by7vpv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-modal-title[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-event-type-icon[b-97c8by7vpv] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    animation: pop-in-b-97c8by7vpv 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in-b-97c8by7vpv {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.em-modal-title h3[b-97c8by7vpv] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-modal-close[b-97c8by7vpv] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-97c8by7vpv] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: rotate(90deg);
    }

.em-modal-body[b-97c8by7vpv] {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

.em-event-modal-content[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fade-in 0.6s ease;
}

.em-event-info-section[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.em-event-info-item[b-97c8by7vpv] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-event-info-label[b-97c8by7vpv] {
    min-width: 6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.em-event-info-value[b-97c8by7vpv] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.em-status-active[b-97c8by7vpv] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background-color: var(--success-bg);
    color: var(--success);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.em-status-expired[b-97c8by7vpv] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background-color: var(--danger-bg);
    color: var(--danger);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.em-status-expiring[b-97c8by7vpv] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background-color: var(--warning-light);
    color: var(--warning);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    animation: pulse-warning-b-97c8by7vpv 2s infinite;
}

@keyframes pulse-warning-b-97c8by7vpv {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0);
    }
}

.em-event-description-section h4[b-97c8by7vpv] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.em-event-description-section p[b-97c8by7vpv] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.em-anniversary-years[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--primary-light);
    border-radius: 12px;
    text-align: center;
    animation: fade-in 0.8s ease;
}

.em-years-number[b-97c8by7vpv] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: count-up-b-97c8by7vpv 1.5s cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes count-up-b-97c8by7vpv {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.em-years-text[b-97c8by7vpv] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.em-modal-footer[b-97c8by7vpv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* ======= Day Events Modal ======= */
.em-day-events-list[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
}

.em-day-event-item[b-97c8by7vpv] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--content-bg);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
    animation: fade-in-up-b-97c8by7vpv 0.3s ease both;
}

    .em-day-event-item:hover[b-97c8by7vpv] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
    }

.em-day-event-indicator[b-97c8by7vpv] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.em-day-event-details[b-97c8by7vpv] {
    flex: 1;
}

.em-day-event-title[b-97c8by7vpv] {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-day-event-description[b-97c8by7vpv] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.em-day-event-meta[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-day-event-employee[b-97c8by7vpv] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* ======= Buttons ======= */
.em-btn[b-97c8by7vpv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

    .em-btn[b-97c8by7vpv]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-btn:focus:not(:active)[b-97c8by7vpv]::after {
        animation: ripple-b-97c8by7vpv 0.6s ease-out;
    }

@keyframes ripple-b-97c8by7vpv {
    0% {
        opacity: 0.5;
        transform: scale(0, 0);
    }

    20% {
        opacity: 0.3;
        transform: scale(25, 25);
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

.em-btn-primary[b-97c8by7vpv] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
    padding: 0.75rem 1.25rem;
}

    .em-btn-primary:hover[b-97c8by7vpv] {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-97c8by7vpv] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-97c8by7vpv] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
    padding: 0.75rem 1.25rem;
}

    .em-btn-secondary:hover[b-97c8by7vpv] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-sm[b-97c8by7vpv] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.em-btn-icon[b-97c8by7vpv] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .em-btn-icon.em-btn-sm[b-97c8by7vpv] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .em-btn-icon i[b-97c8by7vpv] {
        transition: transform 0.3s ease;
    }

    .em-btn-icon:hover i[b-97c8by7vpv] {
        transform: scale(1.2);
    }

/* ======= Responsive Design ======= */
@media (max-width: 1200px) {
    .em-calendar-grid[b-97c8by7vpv] {
        grid-auto-rows: minmax(100px, auto);
    }

    .em-event-pill[b-97c8by7vpv] {
        font-size: 0.7rem;
    }

    .em-calendar-title[b-97c8by7vpv] {
        min-width: 150px;
    }
}

@media (max-width: 992px) {
    .em-header-title p[b-97c8by7vpv] {
        display: none;
    }

    .em-calendar-controls[b-97c8by7vpv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-calendar-navigation[b-97c8by7vpv] {
        width: 100%;
        justify-content: space-between;
    }

    .em-view-toggle[b-97c8by7vpv] {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .em-filter-row[b-97c8by7vpv] {
        flex-direction: column;
        gap: 1rem;
    }

    .em-filter[b-97c8by7vpv] {
        width: 100%;
    }

    .em-calendar-grid[b-97c8by7vpv] {
        grid-auto-rows: minmax(90px, auto);
    }

    .em-timeline-event[b-97c8by7vpv] {
        flex-direction: column;
        gap: 1rem;
    }

    .em-timeline-date[b-97c8by7vpv] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-right: 0;
    }

    .em-event-content[b-97c8by7vpv] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .em-header-content[b-97c8by7vpv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-header-actions[b-97c8by7vpv] {
        width: 100%;
        justify-content: space-between;
    }

    .em-header-title h1[b-97c8by7vpv] {
        font-size: 1.25rem;
    }

    .em-calendar-day[b-97c8by7vpv] {
        min-height: 80px;
    }

    .em-event-pill[b-97c8by7vpv] {
        max-width: 100%;
    }

    .em-filter-summary[b-97c8by7vpv] {
        flex-direction: column;
    }

    .em-filter-actions[b-97c8by7vpv] {
        flex-wrap: wrap;
    }

    .em-modal-footer[b-97c8by7vpv] {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

        .em-modal-footer button[b-97c8by7vpv] {
            width: 100%;
        }

    .em-event-info-item[b-97c8by7vpv] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .em-event-info-label[b-97c8by7vpv] {
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .em-header-title i[b-97c8by7vpv] {
        font-size: 1.5rem;
        padding: 0.5rem;
    }

    .em-header-title h1[b-97c8by7vpv] {
        font-size: 1.15rem;
    }

    .em-calendar-title[b-97c8by7vpv] {
        font-size: 1.25rem;
    }

    .em-filters-container[b-97c8by7vpv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-category-filters[b-97c8by7vpv] {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .em-calendar-header[b-97c8by7vpv] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .em-weekday[b-97c8by7vpv] {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .em-calendar-grid[b-97c8by7vpv] {
        grid-auto-rows: minmax(70px, auto);
    }

    .em-day-number[b-97c8by7vpv] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .em-event-pill[b-97c8by7vpv] {
        padding: 0.125rem 0.375rem;
        font-size: 0.6875rem;
    }

    .em-modal[b-97c8by7vpv] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .em-btn span[b-97c8by7vpv] {
        display: none;
    }

    .em-header-actions .em-btn[b-97c8by7vpv] {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
    }

    .em-day-event-item[b-97c8by7vpv] {
        padding: 0.75rem;
    }

    .em-day-event-indicator[b-97c8by7vpv] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .em-calendar-grid[b-97c8by7vpv] {
        grid-auto-rows: minmax(60px, auto);
    }

    .em-event-pill[b-97c8by7vpv] {
        font-size: 0.625rem;
    }

    .em-more-events[b-97c8by7vpv] {
        font-size: 0.6875rem;
    }

    .em-timeline-title[b-97c8by7vpv] {
        font-size: 1rem;
    }

    .em-timeline-event[b-97c8by7vpv] {
        padding: 1rem;
    }

    .em-event-indicator[b-97c8by7vpv] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .em-event-title[b-97c8by7vpv] {
        font-size: 1rem;
    }

    .em-filter-summary[b-97c8by7vpv] {
        gap: 0.5rem;
    }

    .em-stats-card[b-97c8by7vpv] {
        padding: 0.625rem;
    }

    .em-stats-card-icon[b-97c8by7vpv] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .em-stats-value[b-97c8by7vpv] {
        font-size: 1.125rem;
    }
}

@media (max-width: 400px) {
    .em-header-content[b-97c8by7vpv] {
        gap: 0.5rem;
    }

    .em-header-title[b-97c8by7vpv] {
        gap: 0.5rem;
    }

        .em-header-title i[b-97c8by7vpv] {
            font-size: 1.25rem;
            padding: 0.375rem;
        }

        .em-header-title h1[b-97c8by7vpv] {
            font-size: 1rem;
        }

    .em-header-actions[b-97c8by7vpv] {
        gap: 0.375rem;
    }

    .em-calendar-controls[b-97c8by7vpv] {
        margin-bottom: 0.75rem;
    }

    .em-calendar-navigation[b-97c8by7vpv] {
        gap: 0.25rem;
    }

    .em-calendar-title[b-97c8by7vpv] {
        font-size: 1.125rem;
        min-width: 120px;
    }

    .em-view-toggle[b-97c8by7vpv] {
        margin-top: 0.375rem;
    }

    .em-filters-container[b-97c8by7vpv] {
        margin-bottom: 0.75rem;
    }

    .em-category-filters[b-97c8by7vpv] {
        gap: 0.375rem;
    }

    .em-category-label[b-97c8by7vpv] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .em-filters-container .em-btn-sm[b-97c8by7vpv] {
        font-size: 0.75rem;
    }

    .em-advanced-filters[b-97c8by7vpv] {
        padding: 1rem;
    }

    .em-filter-actions[b-97c8by7vpv] {
        margin-top: 0.75rem;
    }

    .em-calendar-day[b-97c8by7vpv] {
        padding: 0.25rem;
        min-height: 50px;
    }

    .em-weekday[b-97c8by7vpv] {
        padding: 0.375rem;
        font-size: 0.6875rem;
    }

    .em-day-number[b-97c8by7vpv] {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.6875rem;
    }

    .em-event-pill[b-97c8by7vpv] {
        padding: 0.125rem 0.25rem;
        font-size: 0.625rem;
        gap: 0.25rem;
    }
}
/* ====== Modal with Sidebar Styling ====== */

/* The main modal container with sidebar layout */
.em-modal-with-sidebar[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    max-width: 90vw !important;
    width: 1200px !important;
    height: 85vh;
    max-height: 85vh;
}

/* Modal content container (flex layout for sidebar and main content) */
.em-modal-content[b-97c8by7vpv] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar container */
.em-modal-sidebar[b-97c8by7vpv] {
    width: 240px;
    background-color: var(--subtle-bg);
    border-right: 1px solid var(--border-divider);
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Main content area */
.em-modal-main[b-97c8by7vpv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tabs container in sidebar */
.em-sidebar-tabs[b-97c8by7vpv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.75rem;
}

/* Individual sidebar tab */
.em-sidebar-tab[b-97c8by7vpv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* Hover state for sidebar tabs */
    .em-sidebar-tab:hover:not(.em-active)[b-97c8by7vpv] {
        background-color: rgba(var(--primary-rgb), 0.08);
        color: var(--text-primary);
    }

    /* Active state for sidebar tabs */
    .em-sidebar-tab.em-active[b-97c8by7vpv] {
        background-color: var(--primary-light);
        color: var(--primary-color);
        font-weight: 600;
    }

    /* Icons in sidebar tabs */
    .em-sidebar-tab i[b-97c8by7vpv] {
        font-size: 1.125rem;
        width: 1.25rem;
        text-align: center;
        transition: transform 0.2s ease;
    }

    /* Rotate or scale icon on hover for interactive feel */
    .em-sidebar-tab:hover i[b-97c8by7vpv] {
        transform: translateX(2px);
    }

/* Modal body styles */
.em-modal-body[b-97c8by7vpv] {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

/* Adjust the modal footer styles */
.em-modal-footer[b-97c8by7vpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    flex-shrink: 0;
}

/* Left side of the footer */
.em-modal-footer-left[b-97c8by7vpv] {
    display: flex;
    gap: 0.75rem;
}

/* Right side of the footer */
.em-modal-footer-right[b-97c8by7vpv] {
    display: flex;
    gap: 0.75rem;
}

/* ====== Responsive Design for Sidebar Modal ====== */

@media (max-width: 1024px) {
    .em-modal-with-sidebar[b-97c8by7vpv] {
        width: 95vw !important;
    }

    .em-modal-sidebar[b-97c8by7vpv] {
        width: 220px;
    }

    .em-sidebar-tab[b-97c8by7vpv] {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .em-modal-with-sidebar[b-97c8by7vpv] {
        width: 100vw !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .em-modal-content[b-97c8by7vpv] {
        flex-direction: column;
    }

    .em-modal-sidebar[b-97c8by7vpv] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-divider);
        max-height: 60px;
        overflow: auto;
    }

    .em-sidebar-tabs[b-97c8by7vpv] {
        flex-direction: row;
        padding: 0.5rem;
        overflow-x: auto;
        gap: 0.5rem;
    }

    .em-sidebar-tab[b-97c8by7vpv] {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }

        .em-sidebar-tab span[b-97c8by7vpv] {
            display: none;
        }

        .em-sidebar-tab i[b-97c8by7vpv] {
            margin: 0;
            font-size: 1.25rem;
        }

    .em-modal-footer[b-97c8by7vpv] {
        flex-direction: column;
        gap: 1rem;
    }

    .em-modal-footer-left[b-97c8by7vpv],
    .em-modal-footer-right[b-97c8by7vpv] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .em-modal-body[b-97c8by7vpv] {
        padding: 0.75rem;
    }

    .em-sidebar-tabs[b-97c8by7vpv] {
        padding: 0.25rem;
    }

    .em-sidebar-tab[b-97c8by7vpv] {
        padding: 0.5rem;
        border-radius: 4px;
    }

    .em-modal-footer button[b-97c8by7vpv] {
        flex: 1;
    }
}

/* ====== Animation for Sidebar Modal ====== */
@keyframes slide-in-right-b-97c8by7vpv {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.em-modal-sidebar[b-97c8by7vpv] {
    animation: slide-in-right-b-97c8by7vpv 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fade-in-up-b-97c8by7vpv {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.em-sidebar-tab[b-97c8by7vpv] {
    animation: fade-in-up-b-97c8by7vpv 0.3s ease both;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

/* Add this class to the parent container to prevent scrolling when modal is open */
.modal-open[b-97c8by7vpv] {
    overflow: hidden;
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeChemicalAuthInfo.razor.rz.scp.css */
/* ====== Employee Chemical Authorizations Component Styles - Enhanced ====== */

/* Section container - Enhanced */
.em-form-section[b-wswdrvajy9] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    animation: fade-in-up-b-wswdrvajy9 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-wswdrvajy9] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-wswdrvajy9]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--danger));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-wswdrvajy9]::before {
        transform: scaleX(1.5);
    }

/* Section header - Enhanced */
.em-section-header[b-wswdrvajy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-wswdrvajy9]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--danger) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-wswdrvajy9]::after {
    transform: scaleX(1);
}

.em-section-title[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

    .em-section-title i[b-wswdrvajy9] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--danger), var(--warning));
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-wswdrvajy9] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--danger-rgb), 0.3);
}

.em-section-actions[b-wswdrvajy9] {
    display: flex;
    gap: 0.75rem;
}

/* Loading state - Enhanced */
.em-loading[b-wswdrvajy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-wswdrvajy9 0.5s ease;
}

.em-loading-spinner[b-wswdrvajy9] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--danger-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--danger);
    animation: spin-b-wswdrvajy9 1s infinite linear;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 10px rgba(var(--danger-rgb), 0.15);
}

.em-loading p[b-wswdrvajy9] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    animation: pulse-b-wswdrvajy9 2s infinite;
}

/* Empty state - Enhanced */
.em-empty-state[b-wswdrvajy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-wswdrvajy9 0.5s ease both;
}

    .em-empty-state > i[b-wswdrvajy9] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transition: all 0.3s ease;
        animation: float-b-wswdrvajy9 3s ease-in-out infinite;
    }

    .em-empty-state:hover > i[b-wswdrvajy9] {
        color: var(--danger);
        transform: scale(1.1);
    }

    .em-empty-state h3[b-wswdrvajy9] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-wswdrvajy9] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
        font-size: 0.9375rem;
    }

.em-empty-state-actions[b-wswdrvajy9] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Authorization Summary Cards - Enhanced */
.em-authorizations-status[b-wswdrvajy9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.em-summary-card[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--border-radius-md);
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    transition: all 0.3s ease;
    animation: fade-in-up-b-wswdrvajy9 0.4s ease both;
    position: relative;
    overflow: hidden;
}

    .em-summary-card:nth-child(1)[b-wswdrvajy9] {
        animation-delay: 0.1s;
    }

    .em-summary-card:nth-child(2)[b-wswdrvajy9] {
        animation-delay: 0.2s;
    }

    .em-summary-card:nth-child(3)[b-wswdrvajy9] {
        animation-delay: 0.3s;
    }

    .em-summary-card:nth-child(4)[b-wswdrvajy9] {
        animation-delay: 0.4s;
    }

    .em-summary-card:hover[b-wswdrvajy9] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, transparent, var(--danger), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .em-summary-card:hover[b-wswdrvajy9]::after {
        opacity: 1;
    }

    .em-summary-card.success[b-wswdrvajy9] {
        border-left: 3px solid var(--success);
    }

    .em-summary-card.warning[b-wswdrvajy9] {
        border-left: 3px solid var(--warning);
    }

    .em-summary-card.danger[b-wswdrvajy9] {
        border-left: 3px solid var(--danger);
    }

    .em-summary-card.primary[b-wswdrvajy9] {
        border-left: 3px solid var(--primary);
    }

.em-summary-icon[b-wswdrvajy9] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    font-size: 1.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .em-summary-icon.success[b-wswdrvajy9] {
        background: linear-gradient(135deg, var(--success-light), var(--success));
        color: white;
    }

    .em-summary-icon.warning[b-wswdrvajy9] {
        background: linear-gradient(135deg, var(--warning-light), var(--warning));
        color: white;
    }

    .em-summary-icon.danger[b-wswdrvajy9] {
        background: linear-gradient(135deg, var(--danger-light), var(--danger));
        color: white;
    }

    .em-summary-icon.primary[b-wswdrvajy9] {
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        color: white;
    }

.em-summary-card:hover .em-summary-icon[b-wswdrvajy9] {
    transform: scale(1.1) rotate(10deg);
}

.em-summary-content[b-wswdrvajy9] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-wswdrvajy9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: transform 0.3s ease;
}

.em-summary-card:hover .em-summary-value[b-wswdrvajy9] {
    transform: scale(1.1);
}

.em-summary-label[b-wswdrvajy9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Filters - Enhanced */
.em-auth-filters[b-wswdrvajy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-lg);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-divider);
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    animation: slide-in-top-b-wswdrvajy9 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .em-auth-filters[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 5%;
        right: 5%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--danger), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .em-auth-filters:hover[b-wswdrvajy9]::after {
        opacity: 1;
    }

.em-search-field[b-wswdrvajy9] {
    position: relative;
    min-width: 280px;
    flex-grow: 1;
    max-width: 480px;
}

    .em-search-field input[b-wswdrvajy9] {
        width: 100%;
        padding: 0.625rem 0.75rem 0.625rem 2.5rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-search-field input:focus[b-wswdrvajy9] {
            outline: none;
            border-color: var(--danger);
            box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-search-field input:hover[b-wswdrvajy9] {
            border-color: rgba(var(--danger-rgb), 0.5);
        }

    .em-search-field i[b-wswdrvajy9] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .em-search-field input:focus + i[b-wswdrvajy9] {
        color: var(--danger);
    }

.em-clear-search[b-wswdrvajy9] {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

    .em-clear-search:hover[b-wswdrvajy9] {
        background-color: var(--subtle-bg);
        color: var(--danger);
        transform: translateY(-50%) rotate(90deg);
    }

.em-status-filters[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.3rem;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
}

.em-status-filter[b-wswdrvajy9] {
    padding: 0.5rem 0.875rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

    .em-status-filter[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(var(--danger-rgb), 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-status-filter:focus:not(:active)[b-wswdrvajy9]::after {
        animation: ripple-b-wswdrvajy9 0.6s ease-out;
    }

    .em-status-filter:hover[b-wswdrvajy9] {
        color: var(--danger);
        background-color: var(--danger-light);
    }

    .em-status-filter.active[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--danger), var(--warning));
        color: white;
        box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.25);
    }

.em-hazard-filter[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-hazard-filter label[b-wswdrvajy9] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .em-hazard-filter select[b-wswdrvajy9] {
        padding: 0.5rem 2rem 0.5rem 0.75rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-weight: 500;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 0.85em;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-hazard-filter select:focus[b-wswdrvajy9] {
            outline: none;
            border-color: var(--danger);
            box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-hazard-filter select:hover[b-wswdrvajy9] {
            border-color: rgba(var(--danger-rgb), 0.5);
        }

/* Chemical Cards Grid - Enhanced */
.em-chemical-auth-grid[b-wswdrvajy9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    animation: grid-fade-in-b-wswdrvajy9 0.5s ease;
}

.em-chemical-card[b-wswdrvajy9] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    animation: card-slide-in-b-wswdrvajy9 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    transform-origin: center;
    position: relative;
}

    .em-chemical-card:nth-child(1)[b-wswdrvajy9] {
        --card-index: 1;
    }

    .em-chemical-card:nth-child(2)[b-wswdrvajy9] {
        --card-index: 2;
    }

    .em-chemical-card:nth-child(3)[b-wswdrvajy9] {
        --card-index: 3;
    }

    .em-chemical-card:nth-child(4)[b-wswdrvajy9] {
        --card-index: 4;
    }

    .em-chemical-card:hover[b-wswdrvajy9] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .em-chemical-card.em-auth-expired[b-wswdrvajy9] {
        border-left: 3px solid var(--danger);
    }

        .em-chemical-card.em-auth-expired[b-wswdrvajy9]::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 40px 40px 0;
            border-color: transparent var(--danger) transparent transparent;
            z-index: 1;
            opacity: 0.7;
        }

    .em-chemical-card.em-auth-expiring[b-wswdrvajy9] {
        border-left: 3px solid var(--warning);
    }

        .em-chemical-card.em-auth-expiring[b-wswdrvajy9]::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 40px 40px 0;
            border-color: transparent var(--warning) transparent transparent;
            z-index: 1;
            opacity: 0.7;
        }

    .em-chemical-card.em-auth-active[b-wswdrvajy9] {
        border-left: 3px solid var(--success);
    }

.em-chemical-header[b-wswdrvajy9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-chemical-header[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, var(--danger), transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-chemical-card:hover .em-chemical-header[b-wswdrvajy9]::after {
    transform: scaleX(1);
}

.em-chemical-info[b-wswdrvajy9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.em-chemical-name[b-wswdrvajy9] {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.em-chemical-card:hover .em-chemical-name[b-wswdrvajy9] {
    color: var(--danger);
}

.em-chemical-hazard[b-wswdrvajy9] {
    display: flex;
    align-items: center;
}

.em-hazard-badge[b-wswdrvajy9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .em-hazard-badge:hover[b-wswdrvajy9] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .em-hazard-badge.hazard-extreme[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--danger-light), var(--danger));
        color: white;
    }

    .em-hazard-badge.hazard-high[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--warning-light), var(--warning));
        color: white;
    }

    .em-hazard-badge.hazard-medium[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--info-light), var(--info));
        color: white;
    }

    .em-hazard-badge.hazard-low[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--success-light), var(--success));
        color: white;
    }

.em-auth-status[b-wswdrvajy9] {
    display: flex;
    align-items: center;
}

.em-status-pill[b-wswdrvajy9] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.375rem;
    background-position: 0 0;
    background-size: 200% 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

    .em-status-pill:hover[b-wswdrvajy9] {
        background-position: 100% 0;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

.em-status-active[b-wswdrvajy9] {
    background-image: linear-gradient(to right, var(--success-light), var(--success));
    color: white;
}

.em-status-pending[b-wswdrvajy9] {
    background-image: linear-gradient(to right, var(--warning-light), var(--warning));
    color: white;
}

.em-status-expired[b-wswdrvajy9] {
    background-image: linear-gradient(to right, var(--danger-light), var(--danger));
    color: white;
}

.em-chemical-details[b-wswdrvajy9] {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--content-bg);
    position: relative;
}

    .em-chemical-details[b-wswdrvajy9]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0h20v20L20 40H0z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 80px;
        opacity: 0.1;
        z-index: 0;
        pointer-events: none;
    }

.em-auth-dates[b-wswdrvajy9], .em-auth-by[b-wswdrvajy9], .em-auth-notes[b-wswdrvajy9], .em-auth-position[b-wswdrvajy9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

    .em-auth-dates i[b-wswdrvajy9], .em-auth-by i[b-wswdrvajy9], .em-auth-notes i[b-wswdrvajy9], .em-auth-position i[b-wswdrvajy9] {
        color: var(--danger);
        font-size: 0.9375rem;
        opacity: 0.8;
        transition: all 0.3s ease;
    }

.em-chemical-card:hover .em-auth-dates i[b-wswdrvajy9],
.em-chemical-card:hover .em-auth-by i[b-wswdrvajy9],
.em-chemical-card:hover .em-auth-notes i[b-wswdrvajy9],
.em-chemical-card:hover .em-auth-position i[b-wswdrvajy9] {
    opacity: 1;
    transform: scale(1.1);
}

.em-auth-dates[b-wswdrvajy9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.em-auth-date[b-wswdrvajy9], .em-expiry-date[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-expiry-date.em-expired[b-wswdrvajy9] {
        color: var(--danger);
        font-weight: 600;
    }

.em-expired-badge[b-wswdrvajy9] {
    background: linear-gradient(to right, var(--danger-light), var(--danger));
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(var(--danger-rgb), 0.2);
    animation: pulse-danger-b-wswdrvajy9 2s infinite;
}

.em-expiring-badge[b-wswdrvajy9] {
    background: linear-gradient(to right, var(--warning-light), var(--warning));
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(var(--warning-rgb), 0.2);
    animation: pulse-warning-b-wswdrvajy9 2s infinite;
}

.em-chemical-actions[b-wswdrvajy9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .em-chemical-actions[b-wswdrvajy9]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--danger), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

.em-chemical-card:hover .em-chemical-actions[b-wswdrvajy9] {
    opacity: 1;
}

    .em-chemical-card:hover .em-chemical-actions[b-wswdrvajy9]::before {
        opacity: 1;
    }

/* Modal styles - Enhanced */
.em-modal-overlay[b-wswdrvajy9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: fade-in-b-wswdrvajy9 0.3s ease;
}

.em-modal[b-wswdrvajy9] {
    background-color: var(--modal-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-wswdrvajy9 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    position: relative;
}

    .em-modal[b-wswdrvajy9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, var(--danger), var(--warning));
        z-index: 1;
    }

.em-modal-header[b-wswdrvajy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--danger), transparent);
    }

    .em-modal-header h3[b-wswdrvajy9] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .em-modal-header h3[b-wswdrvajy9]::before {
            content: '';
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--danger);
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 2px var(--danger-light);
            animation: pulse-danger-b-wswdrvajy9 2s infinite;
        }

.em-modal-close[b-wswdrvajy9] {
    background: none;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.125rem;
    position: relative;
    overflow: hidden;
}

    .em-modal-close[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(var(--danger-rgb), 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-modal-close:focus:not(:active)[b-wswdrvajy9]::after {
        animation: ripple-b-wswdrvajy9 0.6s ease-out;
    }

    .em-modal-close:hover[b-wswdrvajy9] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-wswdrvajy9] {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 130px);
}

.em-modal-footer[b-wswdrvajy9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-footer[b-wswdrvajy9]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--danger), transparent);
        opacity: 0.5;
    }

/* Chemical detail modal - Enhanced */
.em-chemical-detail-header[b-wswdrvajy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-chemical-detail-header[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--danger), transparent);
    }

.em-chemical-detail-hazard[b-wswdrvajy9] {
    display: flex;
    align-items: center;
}

.em-hazard-level[b-wswdrvajy9] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .em-hazard-level:hover[b-wswdrvajy9] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .em-hazard-level.hazard-extreme[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--danger-light), var(--danger));
        color: white;
    }

    .em-hazard-level.hazard-high[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--warning-light), var(--warning));
        color: white;
    }

    .em-hazard-level.hazard-medium[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--info-light), var(--info));
        color: white;
    }

    .em-hazard-level.hazard-low[b-wswdrvajy9] {
        background: linear-gradient(to right, var(--success-light), var(--success));
        color: white;
    }

    .em-hazard-level i[b-wswdrvajy9] {
        animation: pulse-hazard-b-wswdrvajy9 2s infinite alternate;
    }

.em-msds-location[b-wswdrvajy9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    transition: all 0.3s ease;
}

    .em-msds-location:hover[b-wswdrvajy9] {
        background-color: var(--danger-light);
        color: var(--danger);
        border-color: var(--danger);
    }

    .em-msds-location i[b-wswdrvajy9] {
        color: var(--danger);
    }

.em-detail-section[b-wswdrvajy9] {
    margin-bottom: 1.5rem;
    animation: fade-in-up-b-wswdrvajy9 0.4s ease both;
    animation-delay: calc(var(--section-index, 0) * 0.1s);
}

    .em-detail-section:nth-child(1)[b-wswdrvajy9] {
        --section-index: 1;
    }

    .em-detail-section:nth-child(2)[b-wswdrvajy9] {
        --section-index: 2;
    }

    .em-detail-section:nth-child(3)[b-wswdrvajy9] {
        --section-index: 3;
    }

    .em-detail-section h4[b-wswdrvajy9] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.75rem 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px dashed var(--border-divider);
    }

        .em-detail-section h4[b-wswdrvajy9]::before {
            content: '';
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--danger);
            border-radius: 50%;
        }

    .em-detail-section p[b-wswdrvajy9] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.6;
        padding: 0 0.5rem;
    }

.em-ppe-list[b-wswdrvajy9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

    .em-ppe-list li[b-wswdrvajy9] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        padding: 0.5rem 0.875rem;
        background-color: var(--subtle-bg);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        transition: all 0.3s ease;
        animation: fade-in-right-b-wswdrvajy9 0.4s ease both;
        animation-delay: calc(var(--item-index, 0) * 0.1s);
    }

        .em-ppe-list li:nth-child(1)[b-wswdrvajy9] {
            --item-index: 1;
        }

        .em-ppe-list li:nth-child(2)[b-wswdrvajy9] {
            --item-index: 2;
        }

        .em-ppe-list li:nth-child(3)[b-wswdrvajy9] {
            --item-index: 3;
        }

        .em-ppe-list li:nth-child(4)[b-wswdrvajy9] {
            --item-index: 4;
        }

        .em-ppe-list li:nth-child(5)[b-wswdrvajy9] {
            --item-index: 5;
        }

        .em-ppe-list li:nth-child(6)[b-wswdrvajy9] {
            --item-index: 6;
        }

        .em-ppe-list li:hover[b-wswdrvajy9] {
            transform: translateY(-3px);
            box-shadow: var(--shadow-sm);
            border-color: var(--danger);
            background-color: var(--danger-light);
            color: var(--danger);
        }

        .em-ppe-list li i[b-wswdrvajy9] {
            color: var(--danger);
            font-size: 1rem;
        }

/* Form elements - Enhanced */
.em-form-group[b-wswdrvajy9] {
    margin-bottom: 1.5rem;
    position: relative;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-wswdrvajy9] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-wswdrvajy9] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 600;
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-wswdrvajy9]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--danger-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-wswdrvajy9]::before,
    .em-form-group:has(select:not([value=""])) label[b-wswdrvajy9]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-wswdrvajy9]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-wswdrvajy9] {
        color: var(--danger);
    }

    .em-form-group select[b-wswdrvajy9],
    .em-form-group input[b-wswdrvajy9],
    .em-form-group textarea[b-wswdrvajy9] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group select:focus[b-wswdrvajy9],
        .em-form-group input:focus[b-wswdrvajy9],
        .em-form-group textarea:focus[b-wswdrvajy9] {
            outline: none;
            border-color: var(--danger);
            box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group select:hover[b-wswdrvajy9],
        .em-form-group input:hover[b-wswdrvajy9],
        .em-form-group textarea:hover[b-wswdrvajy9] {
            border-color: rgba(var(--danger-rgb), 0.5);
        }

        .em-form-group select.em-input-error[b-wswdrvajy9],
        .em-form-group input.em-input-error[b-wswdrvajy9],
        .em-form-group textarea.em-input-error[b-wswdrvajy9] {
            border-color: var(--danger);
            box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25);
            background-color: rgba(var(--danger-rgb), 0.02);
        }

    /* Select enhanced styling */
    .em-form-group select[b-wswdrvajy9] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1em;
        padding-right: 2.5rem;
    }

        .em-form-group select:focus[b-wswdrvajy9] {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
        }

.em-form-help[b-wswdrvajy9] {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-wswdrvajy9] {
    color: var(--text-secondary);
}

.em-required[b-wswdrvajy9] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-wswdrvajy9 2s infinite;
}

.em-error-message[b-wswdrvajy9] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-wswdrvajy9 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-wswdrvajy9]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

/* Confirmation Modal - Enhanced */
.em-confirmation-content[b-wswdrvajy9] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
}

.em-confirmation-icon[b-wswdrvajy9] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--danger-light), var(--danger));
    color: white;
    box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    animation: pulse-icon-b-wswdrvajy9 2s infinite alternate;
}

/* Alert styles - Enhanced */
.em-alert[b-wswdrvajy9] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    animation: alert-appear-b-wswdrvajy9 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .em-alert[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        animation: shimmer-b-wswdrvajy9 2s infinite;
    }

.em-alert-info[b-wswdrvajy9] {
    background-color: var(--info-light);
    border-color: rgba(25, 118, 210, 0.3);
    border-left: 4px solid var(--info);
}

.em-alert-warning[b-wswdrvajy9] {
    background-color: var(--warning-light);
    border-color: rgba(245, 166, 35, 0.3);
    border-left: 4px solid var(--warning);
}

.em-alert i[b-wswdrvajy9] {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: alert-icon-pulse-b-wswdrvajy9 2s infinite;
}

.em-alert-info i[b-wswdrvajy9] {
    color: var(--info);
}

.em-alert-warning i[b-wswdrvajy9] {
    color: var(--warning);
}

.em-alert h4[b-wswdrvajy9] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-wswdrvajy9] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toast notification - Enhanced */
.em-toast[b-wswdrvajy9] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--content-bg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    animation: toast-in-b-wswdrvajy9 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    border: 1px solid var(--border-divider);
    overflow: hidden;
}

    .em-toast[b-wswdrvajy9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }

    .em-toast.error[b-wswdrvajy9]::before {
        background: linear-gradient(to bottom, var(--danger), var(--danger-light));
    }

    .em-toast.success[b-wswdrvajy9]::before {
        background: linear-gradient(to bottom, var(--success), var(--success-light));
    }

    .em-toast.warning[b-wswdrvajy9]::before {
        background: linear-gradient(to bottom, var(--warning), var(--warning-light));
    }

    .em-toast.info[b-wswdrvajy9]::before {
        background: linear-gradient(to bottom, var(--info), var(--info-light));
    }

.em-toast-icon[b-wswdrvajy9] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.em-toast.error .em-toast-icon[b-wswdrvajy9] {
    background: linear-gradient(135deg, var(--danger-light), var(--danger));
    color: white;
}

.em-toast.success .em-toast-icon[b-wswdrvajy9] {
    background: linear-gradient(135deg, var(--success-light), var(--success));
    color: white;
}

.em-toast.warning .em-toast-icon[b-wswdrvajy9] {
    background: linear-gradient(135deg, var(--warning-light), var(--warning));
    color: white;
}

.em-toast.info .em-toast-icon[b-wswdrvajy9] {
    background: linear-gradient(135deg, var(--info-light), var(--info));
    color: white;
}

.em-toast-content[b-wswdrvajy9] {
    flex: 1;
}

.em-toast-title[b-wswdrvajy9] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-toast-message[b-wswdrvajy9] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.em-toast-close[b-wswdrvajy9] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-toast-close:hover[b-wswdrvajy9] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Buttons - Enhanced */
.em-btn[b-wswdrvajy9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

    .em-btn[b-wswdrvajy9]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-btn:focus:not(:active)[b-wswdrvajy9]::after {
        animation: ripple-b-wswdrvajy9 0.6s ease-out;
    }

.em-btn-primary[b-wswdrvajy9] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
    background-size: 200% 100%;
    background-position: 0 0;
}

    .em-btn-primary:hover[b-wswdrvajy9] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
        background-position: 100% 0;
    }

    .em-btn-primary:active[b-wswdrvajy9] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-wswdrvajy9] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .em-btn-secondary:hover[b-wswdrvajy9] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-outline[b-wswdrvajy9] {
    background: transparent;
    border: 1px solid var(--border-divider);
}

    .em-btn-outline:hover[b-wswdrvajy9] {
        border-color: var(--danger);
        color: var(--danger);
        background-color: var(--danger-light);
    }

.em-btn-danger[b-wswdrvajy9] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
    background-size: 200% 100%;
    background-position: 0 0;
}

    .em-btn-danger:hover[b-wswdrvajy9] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
        background-position: 100% 0;
    }

.em-btn-sm[b-wswdrvajy9] {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

    .em-btn-sm i[b-wswdrvajy9] {
        font-size: 0.875rem;
    }

.em-btn-icon[b-wswdrvajy9] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
}

    .em-btn-icon.em-btn-sm[b-wswdrvajy9] {
        width: 1.875rem;
        height: 1.875rem;
    }

/* Animation for button hover */
.em-btn-bounce-hover:hover[b-wswdrvajy9] {
    animation: bounce-b-wswdrvajy9 0.75s;
}

/* Animations - Enhanced */
@keyframes fade-in-b-wswdrvajy9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-right-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-top-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes modal-in-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes card-slide-in-b-wswdrvajy9 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grid-fade-in-b-wswdrvajy9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin-b-wswdrvajy9 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-wswdrvajy9 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes float-b-wswdrvajy9 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes pulse-primary-b-wswdrvajy9 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-wswdrvajy9 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--danger-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
    }
}

@keyframes pulse-warning-b-wswdrvajy9 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0);
    }
}

@keyframes pulse-hazard-b-wswdrvajy9 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes pulse-icon-b-wswdrvajy9 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes ripple-b-wswdrvajy9 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes validation-shake-b-wswdrvajy9 {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes alert-icon-pulse-b-wswdrvajy9 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shimmer-b-wswdrvajy9 {
    100% {
        transform: translateX(100%);
    }
}

@keyframes alert-appear-b-wswdrvajy9 {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce-b-wswdrvajy9 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive styles - Enhanced */
@media (max-width: 992px) {
    .em-authorizations-status[b-wswdrvajy9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .em-chemical-auth-grid[b-wswdrvajy9] {
        grid-template-columns: 1fr;
    }

    .em-auth-filters[b-wswdrvajy9] {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem;
    }

    .em-status-filters[b-wswdrvajy9] {
        width: 100%;
        overflow-x: auto;
        padding: 0.25rem;
    }

    .em-search-field[b-wswdrvajy9] {
        width: 100%;
        max-width: none;
        margin-top: 0.75rem;
    }

    .em-hazard-filter[b-wswdrvajy9] {
        width: 100%;
        margin-top: 0.75rem;
    }

        .em-hazard-filter select[b-wswdrvajy9] {
            flex-grow: 1;
        }

    .em-authorizations-status[b-wswdrvajy9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .em-form-section[b-wswdrvajy9] {
        padding: 1.25rem;
    }

    .em-section-header[b-wswdrvajy9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .em-section-actions[b-wswdrvajy9] {
        width: 100%;
        justify-content: space-between;
    }

    .em-ppe-list[b-wswdrvajy9] {
        grid-template-columns: 1fr;
    }

    .em-form-group label[b-wswdrvajy9] {
        padding-left: 0;
    }

        .em-form-group label[b-wswdrvajy9]::before {
            display: none;
        }

    .em-form-help[b-wswdrvajy9],
    .em-error-message[b-wswdrvajy9] {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .em-authorizations-status[b-wswdrvajy9] {
        grid-template-columns: 1fr;
    }

    .em-form-section[b-wswdrvajy9] {
        padding: 1rem;
    }

    .em-chemical-actions[b-wswdrvajy9] {
        flex-wrap: wrap;
    }

    .em-btn span[b-wswdrvajy9] {
        display: none;
    }

    .em-section-actions[b-wswdrvajy9] {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

        .em-section-actions .em-btn[b-wswdrvajy9] {
            width: 100%;
        }

    .em-modal[b-wswdrvajy9] {
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
        width: 100%;
    }

    .em-modal-body[b-wswdrvajy9] {
        padding: 1rem;
    }

    .em-toast[b-wswdrvajy9] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeContactHistoryInfo.razor.rz.scp.css */
/* ====== Employee Contact History Styles ====== */

/* Form Section Container */
.em-form-section[b-8f2sdgdp7k] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-8f2sdgdp7k 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-8f2sdgdp7k] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-8f2sdgdp7k]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-8f2sdgdp7k]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-8f2sdgdp7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-8f2sdgdp7k]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-8f2sdgdp7k]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-8f2sdgdp7k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-8f2sdgdp7k] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-8f2sdgdp7k] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-section-actions[b-8f2sdgdp7k] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-8f2sdgdp7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-8f2sdgdp7k] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-8f2sdgdp7k 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-8f2sdgdp7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-8f2sdgdp7k 0.5s ease both;
}

    .em-empty-state > i[b-8f2sdgdp7k] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .em-empty-state:hover > i[b-8f2sdgdp7k] {
        transform: translateY(-8px);
        color: var(--primary);
        opacity: 1;
    }

    .em-empty-state h3[b-8f2sdgdp7k] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-8f2sdgdp7k] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-8f2sdgdp7k] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Enhanced Filter section */
.em-filter-section[b-8f2sdgdp7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-8f2sdgdp7k 0.4s ease both;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .em-filter-section[b-8f2sdgdp7k]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary), var(--info), transparent);
    }

.em-search-field[b-8f2sdgdp7k] {
    flex-grow: 1;
    position: relative;
    min-width: 200px;
}

    .em-search-field input[b-8f2sdgdp7k] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-search-field input:focus[b-8f2sdgdp7k] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-search-field input:hover[b-8f2sdgdp7k] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

    .em-search-field i[b-8f2sdgdp7k] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.25s ease;
        font-size: 0.9375rem;
    }

    .em-search-field input:focus + i[b-8f2sdgdp7k] {
        color: var(--primary);
    }

.em-clear-search[b-8f2sdgdp7k] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .em-clear-search:hover[b-8f2sdgdp7k] {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-50%) rotate(90deg);
    }

.em-filter-buttons[b-8f2sdgdp7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-date-filter[b-8f2sdgdp7k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    width: 100%;
    animation: fade-in-up-b-8f2sdgdp7k 0.4s ease both;
}

.em-date-range[b-8f2sdgdp7k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: 0.5rem 0.875rem;
    flex-grow: 1;
}

    .em-date-range span[b-8f2sdgdp7k] {
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 500;
    }

    .em-date-range input[b-8f2sdgdp7k] {
        border: none;
        background: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        padding: 0.375rem 0;
        width: 130px;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .em-date-range input:hover[b-8f2sdgdp7k] {
            background-color: rgba(var(--primary-rgb), 0.05);
        }

        .em-date-range input:focus[b-8f2sdgdp7k] {
            outline: none;
            background-color: rgba(var(--primary-rgb), 0.08);
        }

/* Timeline Styles - Enhanced */
.em-timeline[b-8f2sdgdp7k] {
    position: relative;
    padding: 1.5rem 0;
    margin-top: 1rem;
}

    .em-timeline[b-8f2sdgdp7k]:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 3px;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        border-radius: 3px;
        box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.2);
        z-index: 1;
        height: 80%;
        margin: auto;
    }

    /* Animated glow effect for timeline */
    .em-timeline[b-8f2sdgdp7k]:after {
        content: '';
        position: absolute;
        top: 0;
        height: 100px;
        width: 3px;
        left: 20px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
        z-index: 2;
        animation: timeline-pulse-b-8f2sdgdp7k 4s infinite linear;
    }

.em-timeline-item[b-8f2sdgdp7k] {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 3.5rem;
    animation: timeline-item-in-b-8f2sdgdp7k 0.5s ease both;
    animation-delay: calc(var(--item-index, 0) * 0.1s);
    transition: transform 0.3s ease;
}

    .em-timeline-item:nth-child(1)[b-8f2sdgdp7k] {
        --item-index: 1;
    }

    .em-timeline-item:nth-child(2)[b-8f2sdgdp7k] {
        --item-index: 2;
    }

    .em-timeline-item:nth-child(3)[b-8f2sdgdp7k] {
        --item-index: 3;
    }

    .em-timeline-item:nth-child(4)[b-8f2sdgdp7k] {
        --item-index: 4;
    }

    .em-timeline-item:nth-child(5)[b-8f2sdgdp7k] {
        --item-index: 5;
    }

    .em-timeline-item:hover[b-8f2sdgdp7k] {
        transform: translateX(5px);
    }

    .em-timeline-item:last-child[b-8f2sdgdp7k] {
        margin-bottom: 0;
    }

.em-timeline-point[b-8f2sdgdp7k] {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: 2px solid white;
}

.em-timeline-item:hover .em-timeline-point[b-8f2sdgdp7k] {
    transform: scale(1.2) rotate(15deg);
    box-shadow: 0 5px 12px rgba(var(--primary-rgb), 0.3);
}

.em-timeline-point i[b-8f2sdgdp7k] {
    color: var(--primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.em-timeline-item:hover .em-timeline-point i[b-8f2sdgdp7k] {
    transform: scale(1.1);
}

.em-timeline-content[b-8f2sdgdp7k] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    overflow: hidden;
    transform-origin: left center;
}

.em-timeline-item:hover .em-timeline-content[b-8f2sdgdp7k] {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px) scale(1.01);
}

.em-timeline-header[b-8f2sdgdp7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--subtle-bg);
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
}

    .em-timeline-header[b-8f2sdgdp7k]::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary), transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

.em-timeline-item:hover .em-timeline-header[b-8f2sdgdp7k]::after {
    transform: scaleX(1);
}

.em-timeline-title[b-8f2sdgdp7k] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.em-contact-type[b-8f2sdgdp7k] {
    font-weight: 700;
    color: var(--primary);
    background-color: var(--primary-light);
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.15);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-timeline-item:hover .em-contact-type[b-8f2sdgdp7k] {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
}

.em-timeline-date[b-8f2sdgdp7k] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

    .em-timeline-date[b-8f2sdgdp7k]::before {
        content: '•';
        font-size: 1rem;
        color: var(--text-muted);
    }

.em-timeline-item:hover .em-timeline-date[b-8f2sdgdp7k] {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.em-timeline-actions[b-8f2sdgdp7k] {
    display: flex;
    gap: 0.5rem;
}

.em-timeline-details[b-8f2sdgdp7k] {
    padding: 1.25rem;
}

.em-change-details[b-8f2sdgdp7k] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    position: relative;
    overflow: hidden;
}

    .em-change-details[b-8f2sdgdp7k]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        opacity: 0.7;
    }

.em-old-value[b-8f2sdgdp7k],
.em-new-value[b-8f2sdgdp7k] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
}

.em-timeline-item:hover .em-new-value[b-8f2sdgdp7k] {
    background-color: rgba(var(--success-rgb), 0.05);
}

.em-value-label[b-8f2sdgdp7k] {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 4.5rem;
    font-size: 0.8125rem;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.3125rem 0.75rem;
    border-radius: var(--border-radius-sm);
    text-align: center;
    transition: all 0.3s ease;
}

.em-old-value .em-value-label[b-8f2sdgdp7k] {
    color: var(--danger);
}

.em-new-value .em-value-label[b-8f2sdgdp7k] {
    color: var(--success);
}

.em-timeline-item:hover .em-value-label[b-8f2sdgdp7k] {
    background-color: rgba(0, 0, 0, 0.08);
}

.em-value[b-8f2sdgdp7k] {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 0.9375rem;
    word-break: break-word;
    padding: 0.3125rem 0;
    line-height: 1.4;
    position: relative;
    flex: 1;
}

.em-old-value .em-value[b-8f2sdgdp7k] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.em-new-value .em-value[b-8f2sdgdp7k] {
    font-weight: 500;
}

    .em-new-value .em-value[b-8f2sdgdp7k]::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: var(--success);
        transition: width 0.5s ease;
    }

.em-timeline-item:hover .em-new-value .em-value[b-8f2sdgdp7k]::before {
    width: 100%;
}

.em-timeline-notes[b-8f2sdgdp7k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--info);
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm) inset;
}

.em-timeline-item:hover .em-timeline-notes[b-8f2sdgdp7k] {
    background-color: rgba(var(--info-rgb), 0.05);
    box-shadow: var(--shadow-md) inset;
}

.em-timeline-notes i[b-8f2sdgdp7k] {
    color: var(--info);
    margin-top: 0.25rem;
    transition: transform 0.3s ease;
}

.em-timeline-item:hover .em-timeline-notes i[b-8f2sdgdp7k] {
    transform: scale(1.2);
}

.em-timeline-notes p[b-8f2sdgdp7k] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.em-updated-by[b-8f2sdgdp7k] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    font-style: italic;
    transition: all 0.3s ease;
}

.em-timeline-item:hover .em-updated-by[b-8f2sdgdp7k] {
    color: var(--text-secondary);
}

/* Contact type colors - Enhanced */
.em-type-phone .em-timeline-point[b-8f2sdgdp7k] {
    background-color: rgba(0, 168, 132, 0.15);
    border-color: rgba(0, 168, 132, 0.5);
}

    .em-type-phone .em-timeline-point i[b-8f2sdgdp7k],
    .em-type-phone .em-contact-type[b-8f2sdgdp7k] {
        color: var(--success);
    }

.em-type-phone .em-contact-type[b-8f2sdgdp7k] {
    background-color: var(--success-light);
    box-shadow: 0 2px 4px rgba(var(--success-rgb), 0.2);
}

    .em-type-phone .em-contact-type[b-8f2sdgdp7k]::before {
        content: "\f095";
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: 0.75rem;
    }

.em-type-phone .em-timeline-content[b-8f2sdgdp7k] {
    border-top: 3px solid var(--success);
}

.em-type-email .em-timeline-point[b-8f2sdgdp7k] {
    background-color: rgba(25, 118, 210, 0.15);
    border-color: rgba(25, 118, 210, 0.5);
}

    .em-type-email .em-timeline-point i[b-8f2sdgdp7k],
    .em-type-email .em-contact-type[b-8f2sdgdp7k] {
        color: var(--info);
    }

.em-type-email .em-contact-type[b-8f2sdgdp7k] {
    background-color: var(--info-light);
    box-shadow: 0 2px 4px rgba(var(--info-rgb), 0.2);
}

    .em-type-email .em-contact-type[b-8f2sdgdp7k]::before {
        content: "\f0e0";
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: 0.75rem;
    }

.em-type-email .em-timeline-content[b-8f2sdgdp7k] {
    border-top: 3px solid var(--info);
}

.em-type-address .em-timeline-point[b-8f2sdgdp7k] {
    background-color: rgba(142, 36, 170, 0.15);
    border-color: rgba(142, 36, 170, 0.5);
}

    .em-type-address .em-timeline-point i[b-8f2sdgdp7k],
    .em-type-address .em-contact-type[b-8f2sdgdp7k] {
        color: #8e24aa;
    }

.em-type-address .em-contact-type[b-8f2sdgdp7k] {
    background-color: rgba(142, 36, 170, 0.15);
    box-shadow: 0 2px 4px rgba(142, 36, 170, 0.2);
}

    .em-type-address .em-contact-type[b-8f2sdgdp7k]::before {
        content: "\f3c5";
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: 0.75rem;
    }

.em-type-address .em-timeline-content[b-8f2sdgdp7k] {
    border-top: 3px solid #8e24aa;
}

.em-type-emergency .em-timeline-point[b-8f2sdgdp7k] {
    background-color: rgba(229, 57, 53, 0.15);
    border-color: rgba(229, 57, 53, 0.5);
}

    .em-type-emergency .em-timeline-point i[b-8f2sdgdp7k],
    .em-type-emergency .em-contact-type[b-8f2sdgdp7k] {
        color: var(--danger);
    }

.em-type-emergency .em-contact-type[b-8f2sdgdp7k] {
    background-color: var(--danger-light);
    box-shadow: 0 2px 4px rgba(var(--danger-rgb), 0.2);
}

    .em-type-emergency .em-contact-type[b-8f2sdgdp7k]::before {
        content: "\f0f9";
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: 0.75rem;
    }

.em-type-emergency .em-timeline-content[b-8f2sdgdp7k] {
    border-top: 3px solid var(--danger);
}

.em-type-other .em-timeline-point[b-8f2sdgdp7k] {
    background-color: rgba(121, 134, 203, 0.15);
    border-color: rgba(121, 134, 203, 0.5);
}

    .em-type-other .em-timeline-point i[b-8f2sdgdp7k],
    .em-type-other .em-contact-type[b-8f2sdgdp7k] {
        color: #7986cb;
    }

.em-type-other .em-contact-type[b-8f2sdgdp7k] {
    background-color: rgba(121, 134, 203, 0.15);
    box-shadow: 0 2px 4px rgba(121, 134, 203, 0.2);
}

    .em-type-other .em-contact-type[b-8f2sdgdp7k]::before {
        content: "\f2bb";
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: 0.75rem;
    }

.em-type-other .em-timeline-content[b-8f2sdgdp7k] {
    border-top: 3px solid #7986cb;
}

/* Form Styles */
.em-form-group[b-8f2sdgdp7k] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-8f2sdgdp7k] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-8f2sdgdp7k] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-8f2sdgdp7k]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-8f2sdgdp7k]::before,
    .em-form-group:has(select:not([value=""])) label[b-8f2sdgdp7k]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-8f2sdgdp7k]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-8f2sdgdp7k] {
        color: var(--primary);
    }

    .em-form-group input[b-8f2sdgdp7k],
    .em-form-group select[b-8f2sdgdp7k],
    .em-form-group textarea[b-8f2sdgdp7k] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-8f2sdgdp7k],
        .em-form-group select:focus[b-8f2sdgdp7k],
        .em-form-group textarea:focus[b-8f2sdgdp7k] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-8f2sdgdp7k],
        .em-form-group select:hover[b-8f2sdgdp7k],
        .em-form-group textarea:hover[b-8f2sdgdp7k] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-8f2sdgdp7k],
        .em-form-group textarea:not(:placeholder-shown)[b-8f2sdgdp7k],
        .em-form-group select:not([value=""])[b-8f2sdgdp7k] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

.em-required[b-8f2sdgdp7k] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-8f2sdgdp7k 2s infinite;
}

.em-input-error[b-8f2sdgdp7k] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-8f2sdgdp7k] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-8f2sdgdp7k] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-8f2sdgdp7k 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-8f2sdgdp7k]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

.em-form-help[b-8f2sdgdp7k] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-8f2sdgdp7k] {
    color: var(--text-secondary);
}

.em-form-tip[b-8f2sdgdp7k] {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--info-light);
    border: 1px solid rgba(var(--info-rgb), 0.3);
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

    .em-form-tip[b-8f2sdgdp7k]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: var(--info);
    }

    .em-form-tip i[b-8f2sdgdp7k] {
        color: var(--info);
        margin-top: 0.125rem;
        font-size: 1rem;
    }

    .em-form-tip p[b-8f2sdgdp7k] {
        margin: 0;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.em-warning-text[b-8f2sdgdp7k] {
    color: var(--warning);
    font-weight: 600;
}

/* Button & Icon Styles */
.em-btn[b-8f2sdgdp7k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-8f2sdgdp7k] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-8f2sdgdp7k] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-8f2sdgdp7k] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-8f2sdgdp7k] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-8f2sdgdp7k] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-8f2sdgdp7k] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-8f2sdgdp7k] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-8f2sdgdp7k] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-8f2sdgdp7k] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-8f2sdgdp7k] {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.8125rem;
}

.em-btn:disabled[b-8f2sdgdp7k] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Modal Styles */
.em-modal-overlay[b-8f2sdgdp7k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-8f2sdgdp7k 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-8f2sdgdp7k] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-8f2sdgdp7k 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-header[b-8f2sdgdp7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header h3[b-8f2sdgdp7k] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-modal-header[b-8f2sdgdp7k]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
    }

.em-modal-close[b-8f2sdgdp7k] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-8f2sdgdp7k] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-8f2sdgdp7k] {
    padding: 1.5rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-8f2sdgdp7k] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Confirmation Content */
.em-confirmation-content[b-8f2sdgdp7k] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-8f2sdgdp7k] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: pulse-danger-b-8f2sdgdp7k 2s infinite alternate;
    box-shadow: 0 3px 10px rgba(var(--danger-rgb), 0.2);
}

.em-confirmation-content p[b-8f2sdgdp7k] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-8f2sdgdp7k] {
        margin-bottom: 0;
    }

.em-confirmation-content strong[b-8f2sdgdp7k] {
    color: var(--text-primary);
}

/* Toast Notification */
.em-toast[b-8f2sdgdp7k] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-8f2sdgdp7k 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-8f2sdgdp7k] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-8f2sdgdp7k] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-8f2sdgdp7k] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-8f2sdgdp7k] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-8f2sdgdp7k] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-8f2sdgdp7k] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-8f2sdgdp7k] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-8f2sdgdp7k] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-8f2sdgdp7k] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-8f2sdgdp7k] {
    flex: 1;
}

.em-toast-title[b-8f2sdgdp7k] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-8f2sdgdp7k] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-8f2sdgdp7k] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-8f2sdgdp7k] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Animations */
@keyframes fade-in-b-8f2sdgdp7k {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-8f2sdgdp7k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-8f2sdgdp7k {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes timeline-item-in-b-8f2sdgdp7k {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-8f2sdgdp7k {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-danger-b-8f2sdgdp7k {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-8f2sdgdp7k {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes timeline-pulse-b-8f2sdgdp7k {
    0% {
        opacity: 0;
        top: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 100%;
    }
}

@keyframes modal-in-b-8f2sdgdp7k {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-8f2sdgdp7k {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-filter-section[b-8f2sdgdp7k] {
        flex-direction: column;
        align-items: stretch;
    }

    .em-filter-buttons[b-8f2sdgdp7k] {
        overflow-x: auto;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .em-timeline[b-8f2sdgdp7k]:before {
        left: 15px;
    }

    .em-timeline-item[b-8f2sdgdp7k] {
        padding-left: 2.5rem;
    }

    .em-timeline-point[b-8f2sdgdp7k] {
        width: 30px;
        height: 30px;
    }

        .em-timeline-point i[b-8f2sdgdp7k] {
            font-size: 0.8125rem;
        }

    .em-timeline-header[b-8f2sdgdp7k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .em-timeline-actions[b-8f2sdgdp7k] {
        align-self: flex-end;
    }

    .em-change-details[b-8f2sdgdp7k] {
        flex-direction: column;
    }

    .em-date-range[b-8f2sdgdp7k] {
        flex-direction: column;
        align-items: stretch;
    }

        .em-date-range input[b-8f2sdgdp7k] {
            width: 100%;
        }

    .em-modal[b-8f2sdgdp7k] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-8f2sdgdp7k] {
        max-height: calc(100vh - 170px);
    }

    .em-form-group label[b-8f2sdgdp7k] {
        padding-left: 0;
    }

        .em-form-group label[b-8f2sdgdp7k]::before {
            display: none;
        }

    .em-form-help[b-8f2sdgdp7k],
    .em-error-message[b-8f2sdgdp7k] {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-8f2sdgdp7k] {
        padding: 1rem;
    }

    .em-section-header[b-8f2sdgdp7k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-8f2sdgdp7k] {
        width: 100%;
        justify-content: space-between;
    }

    .em-filter-section[b-8f2sdgdp7k] {
        padding: 0.875rem;
    }

    .em-timeline-item[b-8f2sdgdp7k] {
        padding-left: 2.25rem;
    }

    .em-timeline[b-8f2sdgdp7k]:before {
        left: 12px;
    }

    .em-timeline-point[b-8f2sdgdp7k] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .em-modal-footer[b-8f2sdgdp7k] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-8f2sdgdp7k] {
            width: 100%;
        }

    .em-toast[b-8f2sdgdp7k] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeContactsInfo.razor.rz.scp.css */
/* ====== Employee Emergency Contacts Styles ====== */

/* Form Section Container */
.em-form-section[b-tubp0coqud] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-tubp0coqud 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-tubp0coqud] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-tubp0coqud]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-tubp0coqud]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-tubp0coqud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-tubp0coqud]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-tubp0coqud]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-tubp0coqud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-tubp0coqud] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-tubp0coqud] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Loading State */
.em-loading[b-tubp0coqud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-tubp0coqud] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-tubp0coqud 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-tubp0coqud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-tubp0coqud 0.5s ease both;
}

    .em-empty-state > i[b-tubp0coqud] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .em-empty-state:hover > i[b-tubp0coqud] {
        transform: translateY(-8px);
        color: var(--primary);
        opacity: 1;
    }

    .em-empty-state h3[b-tubp0coqud] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-tubp0coqud] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-tubp0coqud] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Contacts Summary */
.em-contacts-summary[b-tubp0coqud] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.em-summary-card[b-tubp0coqud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 200px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-tubp0coqud 0.4s ease both;
    box-shadow: var(--shadow-sm);
}

    .em-summary-card:hover[b-tubp0coqud] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

.em-summary-icon[b-tubp0coqud] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--warning-light);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(var(--warning-rgb), 0.1);
}

    .em-summary-icon.primary[b-tubp0coqud] {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.1);
    }

.em-summary-card:hover .em-summary-icon[b-tubp0coqud] {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 5px 15px rgba(var(--warning-rgb), 0.2);
}

    .em-summary-card:hover .em-summary-icon.primary[b-tubp0coqud] {
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.2);
    }

.em-summary-content[b-tubp0coqud] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-tubp0coqud] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-tubp0coqud] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Contacts Grid */
.em-contacts-grid[b-tubp0coqud] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    animation: grid-fade-in-b-tubp0coqud 0.6s ease both;
}

/* Contact Card */
.em-contact-card[b-tubp0coqud] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-slide-in-b-tubp0coqud 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    transform-origin: center;
    box-shadow: var(--shadow-sm);
}

    .em-contact-card:nth-child(1)[b-tubp0coqud] {
        --card-index: 1;
    }

    .em-contact-card:nth-child(2)[b-tubp0coqud] {
        --card-index: 2;
    }

    .em-contact-card:nth-child(3)[b-tubp0coqud] {
        --card-index: 3;
    }

    .em-contact-card:nth-child(4)[b-tubp0coqud] {
        --card-index: 4;
    }

    .em-contact-card:hover[b-tubp0coqud] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

    .em-contact-card.em-primary[b-tubp0coqud] {
        border-left: 3px solid var(--primary);
        background-color: rgba(var(--primary-rgb), 0.03);
    }

.em-contact-header[b-tubp0coqud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-contact-header[b-tubp0coqud]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
        transition: width 0.4s ease;
    }

.em-contact-card:hover .em-contact-header[b-tubp0coqud]::after {
    width: 100%;
}

.em-contact-info[b-tubp0coqud] {
    display: flex;
    flex-direction: column;
}

.em-contact-name[b-tubp0coqud] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-contact-relationship[b-tubp0coqud] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-contact-primary[b-tubp0coqud] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    animation: pulse-primary-b-tubp0coqud 2s infinite alternate;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.15);
}

    .em-contact-primary i[b-tubp0coqud] {
        color: var(--primary);
    }

.em-contact-content[b-tubp0coqud] {
    padding: 1.25rem 1rem;
}

.em-contact-detail[b-tubp0coqud] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
}

    .em-contact-detail:last-child[b-tubp0coqud] {
        margin-bottom: 0;
    }

    .em-contact-detail:hover[b-tubp0coqud] {
        background-color: rgba(var(--primary-rgb), 0.03);
    }

    .em-contact-detail i[b-tubp0coqud] {
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        color: var(--primary);
        border-radius: var(--border-radius-sm);
        font-size: 0.75rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.1);
    }

.em-contact-card:hover .em-contact-detail i[b-tubp0coqud] {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.2);
}

.em-contact-label[b-tubp0coqud] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.em-contact-value[b-tubp0coqud] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.em-contact-link[b-tubp0coqud] {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

    .em-contact-link:hover[b-tubp0coqud] {
        color: var(--primary-hover);
        text-decoration: none;
    }

    .em-contact-link[b-tubp0coqud]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: var(--primary);
        transition: width 0.3s ease;
    }

    .em-contact-link:hover[b-tubp0coqud]::after {
        width: 100%;
    }

.em-contact-actions[b-tubp0coqud] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-top: 1px solid var(--border-divider);
    justify-content: flex-end;
}

/* Mobile View */
.em-contact-card-mobile[b-tubp0coqud] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    margin-bottom: 1rem;
    overflow: hidden;
    animation: card-slide-in-b-tubp0coqud 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    box-shadow: var(--shadow-sm);
}

    .em-contact-card-mobile.em-primary[b-tubp0coqud] {
        border-left: 3px solid var(--primary);
        background-color: rgba(var(--primary-rgb), 0.03);
    }

.em-contact-mobile-header[b-tubp0coqud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-contact-mobile-actions[b-tubp0coqud] {
    display: flex;
    gap: 0.375rem;
}

.em-contact-mobile-details[b-tubp0coqud] {
    padding: 0.75rem 1rem;
}

.em-contact-mobile-item[b-tubp0coqud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.375rem;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

    .em-contact-mobile-item:hover[b-tubp0coqud] {
        background-color: rgba(var(--primary-rgb), 0.03);
    }

    .em-contact-mobile-item i[b-tubp0coqud] {
        color: var(--primary);
        font-size: 0.875rem;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: var(--border-radius-sm);
    }

.em-contact-mobile-primary[b-tubp0coqud] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.375rem;
    background-color: rgba(var(--primary-rgb), 0.1);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.1);
}

/* Modal Styles */
.em-modal-overlay[b-tubp0coqud] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-tubp0coqud 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-tubp0coqud] {
    width: 100%;
    max-width: 500px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-tubp0coqud 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-header[b-tubp0coqud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header[b-tubp0coqud]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
    }

    .em-modal-header h3[b-tubp0coqud] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-tubp0coqud] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-tubp0coqud] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-tubp0coqud] {
    padding: 1.5rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-tubp0coqud] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Group - ENHANCED with EmployeePersonalInfo styles */
.em-form-group[b-tubp0coqud] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-tubp0coqud] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-tubp0coqud] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-tubp0coqud]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-tubp0coqud]::before,
    .em-form-group:has(select:not([value=""])) label[b-tubp0coqud]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-tubp0coqud]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-tubp0coqud] {
        color: var(--primary);
    }

    .em-form-group input[b-tubp0coqud],
    .em-form-group select[b-tubp0coqud],
    .em-form-group textarea[b-tubp0coqud] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-tubp0coqud],
        .em-form-group select:focus[b-tubp0coqud],
        .em-form-group textarea:focus[b-tubp0coqud] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-tubp0coqud],
        .em-form-group select:hover[b-tubp0coqud],
        .em-form-group textarea:hover[b-tubp0coqud] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-tubp0coqud],
        .em-form-group textarea:not(:placeholder-shown)[b-tubp0coqud],
        .em-form-group select:not([value=""])[b-tubp0coqud] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

        /* Placeholder animation */
        .em-form-group input[b-tubp0coqud]::placeholder,
        .em-form-group textarea[b-tubp0coqud]::placeholder {
            color: var(--text-muted);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .em-form-group input:focus[b-tubp0coqud]::placeholder,
        .em-form-group textarea:focus[b-tubp0coqud]::placeholder {
            transform: translateY(-10px);
            opacity: 0;
        }

/* Required Asterisk */
.em-required[b-tubp0coqud] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-tubp0coqud 2s infinite;
}

/* Error State - ENHANCED */
.em-input-error[b-tubp0coqud] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-tubp0coqud] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-tubp0coqud] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-tubp0coqud 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-tubp0coqud]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

/* Help Text - ENHANCED */
.em-form-help[b-tubp0coqud] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-tubp0coqud] {
    color: var(--text-secondary);
}

/* Switch Control - ENHANCED */
.em-switch[b-tubp0coqud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .em-switch input[b-tubp0coqud] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-tubp0coqud] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .em-switch label[b-tubp0coqud]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-tubp0coqud] {
        background-color: var(--primary);
    }


        .em-switch input:checked + label[b-tubp0coqud]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch input:focus + label[b-tubp0coqud] {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }

    .em-switch span[b-tubp0coqud] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .em-switch:hover span[b-tubp0coqud] {
        color: var(--text-primary);
    }

    /* Ripple effect on toggle */
    .em-switch label[b-tubp0coqud]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-switch input:checked + label[b-tubp0coqud]::after {
        animation: switch-ripple-b-tubp0coqud 0.6s ease-out;
    }

/* Tooltip */
.em-tooltip-trigger[b-tubp0coqud] {
    margin-left: 0.5rem;
    color: var(--text-muted);
    cursor: help;
    transition: color 0.2s ease;
}

    .em-tooltip-trigger:hover[b-tubp0coqud] {
        color: var(--text-secondary);
    }

/* Confirmation Content */
.em-confirmation-content[b-tubp0coqud] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-tubp0coqud] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: pulse-danger-b-tubp0coqud 2s infinite alternate;
    box-shadow: 0 3px 10px rgba(var(--danger-rgb), 0.2);
}

.em-confirmation-content p[b-tubp0coqud] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-tubp0coqud] {
        margin-bottom: 0;
    }

.em-confirmation-content strong[b-tubp0coqud] {
    color: var(--text-primary);
}

/* Alert - ENHANCED */
.em-alert[b-tubp0coqud] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary);
    animation: alert-fade-in-b-tubp0coqud 0.3s ease both;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

    .em-alert[b-tubp0coqud]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
    }

    .em-alert:hover[b-tubp0coqud]::after {
        animation: shimmer-b-tubp0coqud 2s infinite;
    }

.em-alert-warning[b-tubp0coqud] {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
}

.em-alert i[b-tubp0coqud] {
    color: var(--warning);
    font-size: 1.125rem;
    flex-shrink: 0;
    animation: alert-icon-pulse-b-tubp0coqud 2s infinite;
}

.em-alert p[b-tubp0coqud] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toast Notification */
.em-toast[b-tubp0coqud] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-tubp0coqud 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-tubp0coqud] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-tubp0coqud] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-tubp0coqud] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-tubp0coqud] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-tubp0coqud] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-tubp0coqud] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-tubp0coqud] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-tubp0coqud] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-tubp0coqud] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-tubp0coqud] {
    flex: 1;
}

.em-toast-title[b-tubp0coqud] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-tubp0coqud] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-tubp0coqud] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-tubp0coqud] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-tubp0coqud] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-tubp0coqud] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-tubp0coqud] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-tubp0coqud] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-tubp0coqud] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-tubp0coqud] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-tubp0coqud] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-tubp0coqud] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-tubp0coqud] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-tubp0coqud] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-tubp0coqud] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .em-btn-icon.em-btn-sm[b-tubp0coqud] {
        width: 2rem;
        height: 2rem;
    }

.em-btn:disabled[b-tubp0coqud] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Date Inputs - Custom Styling */
input[type="date"][b-tubp0coqud] {
    position: relative;
}

    input[type="date"][b-tubp0coqud]::-webkit-calendar-picker-indicator {
        background-color: var(--primary-light);
        padding: 0.25rem;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        input[type="date"][b-tubp0coqud]::-webkit-calendar-picker-indicator:hover {
            background-color: var(--primary);
            filter: invert(1);
        }

/* Textarea Enhanced */
textarea[b-tubp0coqud] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

    textarea:focus[b-tubp0coqud] {
        height: 120px;
    }

/* Select Dropdown Enhancement */
select[b-tubp0coqud] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

    select:focus[b-tubp0coqud] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
    }

/* Animations */
@keyframes fade-in-b-tubp0coqud {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-tubp0coqud {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-tubp0coqud {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-tubp0coqud {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-tubp0coqud {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-tubp0coqud {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes alert-icon-pulse-b-tubp0coqud {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes switch-ripple-b-tubp0coqud {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(15, 15);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(30, 30);
    }
}

@keyframes modal-in-b-tubp0coqud {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-tubp0coqud {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes card-slide-in-b-tubp0coqud {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grid-fade-in-b-tubp0coqud {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shimmer-b-tubp0coqud {
    100% {
        transform: translateX(100%);
    }
}

@keyframes alert-fade-in-b-tubp0coqud {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .em-contacts-grid[b-tubp0coqud] {
        grid-template-columns: 1fr;
    }

    .em-contacts-summary[b-tubp0coqud] {
        flex-direction: column;
    }

    .em-summary-card[b-tubp0coqud] {
        width: 100%;
    }

    .em-modal[b-tubp0coqud] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-tubp0coqud] {
        max-height: calc(100vh - 170px);
    }
}

@media (max-width: 576px) {
    .em-form-section[b-tubp0coqud] {
        padding: 1rem;
    }

    .em-section-header[b-tubp0coqud] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-contact-actions[b-tubp0coqud] {
        justify-content: center;
    }

    .em-modal-footer[b-tubp0coqud] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-tubp0coqud] {
            width: 100%;
        }

    .em-toast[b-tubp0coqud] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-form-group label[b-tubp0coqud] {
        padding-left: 0;
    }

        .em-form-group label[b-tubp0coqud]::before {
            display: none;
        }

    .em-form-help[b-tubp0coqud],
    .em-error-message[b-tubp0coqud] {
        padding-left: 0;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeDocumentsInfo.razor.rz.scp.css */
/* ====== Employee Documents Information Styles ====== */

/* Form Section Container */
.em-form-section[b-kbtu5jr8rt] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--card-transition);
    animation: fade-in-up-b-kbtu5jr8rt 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-kbtu5jr8rt] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-kbtu5jr8rt]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-kbtu5jr8rt]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Actions */
.em-section-header[b-kbtu5jr8rt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
}

/* Section Title */
.em-section-title[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-kbtu5jr8rt] {
        color: var(--primary);
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
    }

.em-form-section:hover .em-section-title i[b-kbtu5jr8rt] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

/* Section Actions */
.em-section-actions[b-kbtu5jr8rt] {
    display: flex;
    gap: 0.5rem;
}

/* Document Dashboard */
.em-document-dashboard[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Document Stats Section */
.em-document-stats[b-kbtu5jr8rt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.em-summary-card[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

    .em-summary-card:hover[b-kbtu5jr8rt] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.primary[b-kbtu5jr8rt] {
        border-left: 4px solid var(--primary);
    }

    .em-summary-card.warning[b-kbtu5jr8rt] {
        border-left: 4px solid var(--warning);
    }

    .em-summary-card.success[b-kbtu5jr8rt] {
        border-left: 4px solid var(--success);
    }

.em-summary-icon[b-kbtu5jr8rt] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 1.125rem;
}

.em-summary-card.primary .em-summary-icon[b-kbtu5jr8rt] {
    background-color: var(--primary-light);
    color: var(--primary);
}

.em-summary-card.warning .em-summary-icon[b-kbtu5jr8rt] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-summary-card.success .em-summary-icon[b-kbtu5jr8rt] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-summary-content[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-kbtu5jr8rt] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Document Filters */
.em-documents-filters[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
}

.em-search-field[b-kbtu5jr8rt] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

    .em-search-field input[b-kbtu5jr8rt] {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 2rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.8125rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-kbtu5jr8rt] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        }

    .em-search-field i[b-kbtu5jr8rt] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
        pointer-events: none;
    }

.em-clear-search[b-kbtu5jr8rt] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .em-clear-search:hover[b-kbtu5jr8rt] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

.em-filter-options[b-kbtu5jr8rt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

.em-category-filter select[b-kbtu5jr8rt],
.em-sort-option select[b-kbtu5jr8rt] {
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    background-color: var(--content-bg);
    color: var(--text-primary);
    font-size: 0.75rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.85em;
    cursor: pointer;
    transition: var(--hover-transition);
}

    .em-category-filter select:focus[b-kbtu5jr8rt],
    .em-sort-option select:focus[b-kbtu5jr8rt] {
        outline: none;
        border-color: var(--primary);
        box-shadow: var(--shadow-focus);
    }

.em-filter-buttons[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
}

.em-filter-btn[b-kbtu5jr8rt] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-filter-btn:hover[b-kbtu5jr8rt] {
        color: var(--primary);
    }

    .em-filter-btn.active[b-kbtu5jr8rt] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

/* Document Display Area */
.em-document-display[b-kbtu5jr8rt] {
    min-height: 200px;
}

/* Document Grid View */
.em-documents-grid[b-kbtu5jr8rt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-document-card[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

    .em-document-card:hover[b-kbtu5jr8rt] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-document-card.em-confidential[b-kbtu5jr8rt] {
        border-left: 3px solid var(--primary);
    }

.em-document-icon[b-kbtu5jr8rt] {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-document-icon i[b-kbtu5jr8rt] {
        font-size: 2rem;
        color: var(--primary);
    }

.em-confidential-badge[b-kbtu5jr8rt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
}

.em-document-info[b-kbtu5jr8rt] {
    padding: 0.75rem;
    flex: 1;
}

.em-document-name[b-kbtu5jr8rt] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-document-meta[b-kbtu5jr8rt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.em-document-category[b-kbtu5jr8rt] {
    background-color: var(--primary-light);
    color: var(--primary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
}

.em-document-date[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-document-description[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.375rem;
}

.em-document-expired[b-kbtu5jr8rt] {
    background-color: var(--danger-light);
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-document-actions[b-kbtu5jr8rt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Table View */
.em-table-container[b-kbtu5jr8rt] {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background-color: var(--content-bg);
    animation: fade-in-up-b-kbtu5jr8rt 0.5s ease both;
    margin-bottom: 1.5rem;
}

.em-data-table[b-kbtu5jr8rt] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .em-data-table th[b-kbtu5jr8rt] {
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
    }

    .em-data-table td[b-kbtu5jr8rt] {
        padding: 0.75rem 1rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
    }

    .em-data-table tr:last-child td[b-kbtu5jr8rt] {
        border-bottom: none;
    }

    .em-data-table tr:hover td[b-kbtu5jr8rt] {
        background-color: var(--bs-table-hover-bg);
    }

.em-confidential-row[b-kbtu5jr8rt] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

    .em-confidential-row td:first-child[b-kbtu5jr8rt] {
        border-left: 3px solid var(--primary);
    }

.em-file-info[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .em-file-info i[b-kbtu5jr8rt] {
        font-size: 1.25rem;
        color: var(--primary);
        min-width: 1.25rem;
    }

.em-file-name[b-kbtu5jr8rt] {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.em-file-description[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-file-actions[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Status Pills */
.em-status-pill[b-kbtu5jr8rt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
}

.em-status-active[b-kbtu5jr8rt] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-expired[b-kbtu5jr8rt] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-status-confidential[b-kbtu5jr8rt] {
    background-color: var(--primary-light);
    color: var(--primary);
}

/* View Toggle */
.em-view-toggle[b-kbtu5jr8rt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Button Styles */
.em-btn[b-kbtu5jr8rt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.em-btn-sm[b-kbtu5jr8rt] {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.em-btn-primary[b-kbtu5jr8rt] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-kbtu5jr8rt] {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-kbtu5jr8rt] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-kbtu5jr8rt] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .em-btn-secondary:hover[b-kbtu5jr8rt] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-kbtu5jr8rt] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-kbtu5jr8rt] {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-kbtu5jr8rt] {
    background: transparent;
    border: 1px solid var(--border-divider);
}

    .em-btn-outline:hover[b-kbtu5jr8rt] {
        border-color: var(--primary);
        color: var(--primary);
    }

.em-btn-icon[b-kbtu5jr8rt] {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--border-radius-md);
}

.em-btn[b-kbtu5jr8rt]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.em-btn:focus:not(:active)[b-kbtu5jr8rt]::after {
    animation: ripple-b-kbtu5jr8rt 0.6s ease-out;
}

/* Loading State */
.em-loading[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.em-loading-spinner[b-kbtu5jr8rt] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-kbtu5jr8rt 1s infinite linear;
    margin-bottom: 1rem;
}

.em-loading p[b-kbtu5jr8rt] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Empty State */
.em-empty-state[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

    .em-empty-state > i[b-kbtu5jr8rt] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-kbtu5jr8rt] {
        margin: 0;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-kbtu5jr8rt] {
        margin: 0;
        margin-bottom: 1.25rem;
        color: var(--text-secondary);
        max-width: 24rem;
        font-size: 0.9375rem;
    }

.em-empty-state-actions[b-kbtu5jr8rt] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Alert Styles */
.em-alert[b-kbtu5jr8rt] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1.5rem;
}

.em-alert-warning[b-kbtu5jr8rt] {
    background-color: var(--warning-light);
    border-left: 4px solid var(--warning);
}

.em-alert-info[b-kbtu5jr8rt] {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
}

.em-alert i[b-kbtu5jr8rt] {
    font-size: 1.25rem;
    color: var(--warning);
}

.em-alert-info i[b-kbtu5jr8rt] {
    color: var(--info);
}

.em-alert h4[b-kbtu5jr8rt] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-kbtu5jr8rt] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Modal Styles */
.em-modal-overlay[b-kbtu5jr8rt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: fade-in-b-kbtu5jr8rt 0.3s ease;
}

.em-modal[b-kbtu5jr8rt] {
    background-color: var(--modal-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-kbtu5jr8rt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
    overflow: auto;
}

.em-modal-lg[b-kbtu5jr8rt] {
    max-width: 800px;
}

.em-modal-header[b-kbtu5jr8rt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    z-index: 10;
}

.em-modal h3[b-kbtu5jr8rt] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-modal-close[b-kbtu5jr8rt] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.125rem;
}

    .em-modal-close:hover[b-kbtu5jr8rt] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-kbtu5jr8rt] {
    padding: 1.5rem;
    overflow-y: auto;
}

.em-modal-footer[b-kbtu5jr8rt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Preview Container */
.em-preview-container[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.em-document-preview[b-kbtu5jr8rt] {
    min-height: 400px;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.em-image-preview img[b-kbtu5jr8rt] {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.em-pdf-preview[b-kbtu5jr8rt] {
    width: 100%;
    height: 500px;
}

.em-generic-preview[b-kbtu5jr8rt],
.em-no-preview[b-kbtu5jr8rt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

    .em-generic-preview i[b-kbtu5jr8rt],
    .em-no-preview i[b-kbtu5jr8rt] {
        font-size: 4rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
    }

    .em-generic-preview p[b-kbtu5jr8rt],
    .em-no-preview p[b-kbtu5jr8rt] {
        font-size: 1rem;
        color: var(--text-secondary);
        max-width: 300px;
    }

.em-document-details[b-kbtu5jr8rt] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    padding: 1rem;
}

.em-detail-row[b-kbtu5jr8rt] {
    display: flex;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

    .em-detail-row:last-child[b-kbtu5jr8rt] {
        margin-bottom: 0;
    }

.em-detail-label[b-kbtu5jr8rt] {
    width: 120px;
    font-weight: 600;
    color: var(--text-secondary);
}

.em-detail-value[b-kbtu5jr8rt] {
    flex: 1;
    color: var(--text-primary);
}

.em-expired-text[b-kbtu5jr8rt] {
    color: var(--danger);
    font-weight: 500;
}

.em-confidential-text[b-kbtu5jr8rt] {
    color: var(--primary);
    font-weight: 500;
}

/* Form Groups for Modal */
.em-form-group[b-kbtu5jr8rt] {
    margin-bottom: 1.25rem;
}

    .em-form-group label[b-kbtu5jr8rt] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-form-group input[b-kbtu5jr8rt],
    .em-form-group select[b-kbtu5jr8rt],
    .em-form-group textarea[b-kbtu5jr8rt] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-form-group input:focus[b-kbtu5jr8rt],
        .em-form-group select:focus[b-kbtu5jr8rt],
        .em-form-group textarea:focus[b-kbtu5jr8rt] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        }

.em-form-row[b-kbtu5jr8rt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.em-input-error[b-kbtu5jr8rt] {
    border-color: var(--danger) !important;
}

    .em-input-error:focus[b-kbtu5jr8rt] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-kbtu5jr8rt] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-required[b-kbtu5jr8rt] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
}

.em-form-help[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

/* File Upload Styling */
.em-file-input[b-kbtu5jr8rt] {
    padding: 0.75rem;
    border: 1px dashed var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--subtle-bg);
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
}

    .em-file-input:hover[b-kbtu5jr8rt] {
        border-color: var(--primary);
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.em-selected-file[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    margin-top: 0.5rem;
}

    .em-selected-file i[b-kbtu5jr8rt] {
        color: var(--primary);
    }

    .em-selected-file span[b-kbtu5jr8rt] {
        font-size: 0.8125rem;
        color: var(--text-primary);
    }

.em-file-size[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Switch Control */
.em-switch[b-kbtu5jr8rt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    position: relative;
}

    .em-switch input[b-kbtu5jr8rt] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-kbtu5jr8rt] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        .em-switch label[b-kbtu5jr8rt]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-kbtu5jr8rt] {
        background-color: var(--primary);
    }


        .em-switch input:checked + label[b-kbtu5jr8rt]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch input:focus + label[b-kbtu5jr8rt] {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }

    .em-switch span[b-kbtu5jr8rt] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        cursor: pointer;
    }

.em-tooltip-trigger[b-kbtu5jr8rt] {
    color: var(--text-muted);
    cursor: help;
    transition: color 0.2s ease;
}

    .em-tooltip-trigger:hover[b-kbtu5jr8rt] {
        color: var(--primary);
    }

/* Upload Progress */
.em-upload-progress[b-kbtu5jr8rt] {
    margin-top: 1rem;
}

.em-progress-bar[b-kbtu5jr8rt] {
    height: 0.5rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--subtle-bg);
    margin-bottom: 0.375rem;
    overflow: hidden;
}

.em-progress-fill[b-kbtu5jr8rt] {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--border-radius-pill);
    transition: width 0.3s ease;
}

.em-progress-text[b-kbtu5jr8rt] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
}

/* Confirmation Modal */
.em-confirmation-content[b-kbtu5jr8rt] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.em-confirmation-icon[b-kbtu5jr8rt] {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    flex-shrink: 0;
}

.em-confirmation-content p[b-kbtu5jr8rt] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

    .em-confirmation-content p:last-child[b-kbtu5jr8rt] {
        margin-bottom: 0;
    }

/* Toast Notification */
.em-toast[b-kbtu5jr8rt] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--content-bg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    animation: slide-in-right-b-kbtu5jr8rt 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .em-toast.error[b-kbtu5jr8rt] {
        border-left: 4px solid var(--danger);
    }

    .em-toast.success[b-kbtu5jr8rt] {
        border-left: 4px solid var(--success);
    }

    .em-toast.warning[b-kbtu5jr8rt] {
        border-left: 4px solid var(--warning);
    }

    .em-toast.info[b-kbtu5jr8rt] {
        border-left: 4px solid var(--info);
    }

.em-toast-icon[b-kbtu5jr8rt] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-toast.error .em-toast-icon[b-kbtu5jr8rt] {
    color: var(--danger);
    background-color: var(--danger-light);
}

.em-toast.success .em-toast-icon[b-kbtu5jr8rt] {
    color: var(--success);
    background-color: var(--success-light);
}

.em-toast.warning .em-toast-icon[b-kbtu5jr8rt] {
    color: var(--warning);
    background-color: var(--warning-light);
}

.em-toast.info .em-toast-icon[b-kbtu5jr8rt] {
    color: var(--info);
    background-color: var(--info-light);
}

.em-toast-content[b-kbtu5jr8rt] {
    flex: 1;
}

.em-toast-title[b-kbtu5jr8rt] {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-toast-message[b-kbtu5jr8rt] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-kbtu5jr8rt] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-toast-close:hover[b-kbtu5jr8rt] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Animations */
@keyframes fade-in-b-kbtu5jr8rt {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-kbtu5jr8rt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-kbtu5jr8rt {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes modal-in-b-kbtu5jr8rt {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ripple-b-kbtu5jr8rt {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes spin-b-kbtu5jr8rt {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .em-document-stats[b-kbtu5jr8rt] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .em-documents-grid[b-kbtu5jr8rt] {
        grid-template-columns: 1fr;
    }

    .em-filters-container[b-kbtu5jr8rt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-filter-options[b-kbtu5jr8rt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-category-filter[b-kbtu5jr8rt],
    .em-sort-option[b-kbtu5jr8rt] {
        width: 100%;
    }

    .em-filter-buttons[b-kbtu5jr8rt] {
        width: 100%;
        justify-content: center;
        margin: 0.5rem 0;
    }

    .em-table-container[b-kbtu5jr8rt] {
        overflow-x: auto;
    }

    .em-data-table[b-kbtu5jr8rt] {
        min-width: 900px;
    }

    .em-form-row[b-kbtu5jr8rt] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-kbtu5jr8rt] {
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
    }

    .em-document-preview[b-kbtu5jr8rt] {
        min-height: 300px;
    }

    .em-detail-row[b-kbtu5jr8rt] {
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 1rem;
    }

    .em-detail-label[b-kbtu5jr8rt] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-kbtu5jr8rt] {
        padding: 1rem;
    }

    .em-section-header[b-kbtu5jr8rt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .em-section-actions[b-kbtu5jr8rt] {
        width: 100%;
        justify-content: flex-start;
    }

    .em-summary-card[b-kbtu5jr8rt] {
        padding: 0.75rem;
    }

    .em-summary-icon[b-kbtu5jr8rt] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .em-summary-value[b-kbtu5jr8rt] {
        font-size: 1.125rem;
    }

    .em-modal-body[b-kbtu5jr8rt] {
        padding: 1rem;
    }

    .em-document-actions[b-kbtu5jr8rt] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .em-empty-state-actions[b-kbtu5jr8rt] {
        flex-direction: column;
        width: 100%;
    }

        .em-empty-state-actions .em-btn[b-kbtu5jr8rt] {
            width: 100%;
        }

    .em-view-toggle[b-kbtu5jr8rt] {
        justify-content: center;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeEmploymentInfo.razor.rz.scp.css */
/* ====== Employee Employment Information Styles ====== */

/* Form Section Container */
.em-form-section[b-gtky0hekbd] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-gtky0hekbd 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-gtky0hekbd] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-gtky0hekbd]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:nth-child(2)[b-gtky0hekbd]::before {
        background: var(--success-gradient);
    }

    .em-form-section:hover[b-gtky0hekbd]::before {
        transform: scaleX(1.5);
    }

/* Section Title */
.em-section-title[b-gtky0hekbd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-title i[b-gtky0hekbd] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:nth-child(2) .em-section-title i[b-gtky0hekbd] {
    color: white;
    background: var(--success-gradient);
    box-shadow: 0 3px 6px rgba(var(--success-rgb), 0.2);
}

.em-form-section:hover .em-section-title i[b-gtky0hekbd] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-form-section:nth-child(2):hover .em-section-title i[b-gtky0hekbd] {
    box-shadow: 0 4px 12px rgba(var(--success-rgb), 0.3);
}

/* Form Row */
.em-form-row[b-gtky0hekbd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    animation: slide-in-left-b-gtky0hekbd 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--animation-index, 0) * 0.1s);
}

    .em-form-row:nth-child(2)[b-gtky0hekbd] {
        --animation-index: 1;
    }

    .em-form-row:nth-child(3)[b-gtky0hekbd] {
        --animation-index: 2;
    }

    .em-form-row:nth-child(4)[b-gtky0hekbd] {
        --animation-index: 3;
    }

    .em-form-row:last-child[b-gtky0hekbd] {
        margin-bottom: 0;
    }

/* Form Group - ENHANCED with EmployeePersonalInfo styles */
.em-form-group[b-gtky0hekbd] {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-gtky0hekbd] {
        transform: translateY(-4px);
    }

    /* Labels - ENHANCED */
    .em-form-group label[b-gtky0hekbd] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-gtky0hekbd]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-gtky0hekbd]::before,
    .em-form-group:has(select:not([value=""])) label[b-gtky0hekbd]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-gtky0hekbd]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-gtky0hekbd] {
        color: var(--primary);
    }

/* Required Asterisk */
.em-required[b-gtky0hekbd] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-gtky0hekbd 2s infinite;
}

/* Input Fields - ENHANCED with EmployeePersonalInfo styles */
.em-form-group input[b-gtky0hekbd],
.em-form-group select[b-gtky0hekbd],
.em-form-group textarea[b-gtky0hekbd] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

    .em-form-group input:focus[b-gtky0hekbd],
    .em-form-group select:focus[b-gtky0hekbd],
    .em-form-group textarea:focus[b-gtky0hekbd] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        transform: translateY(-2px);
    }

    .em-form-group input:hover[b-gtky0hekbd],
    .em-form-group select:hover[b-gtky0hekbd],
    .em-form-group textarea:hover[b-gtky0hekbd] {
        border-color: rgba(var(--primary-rgb), 0.5);
    }

    /* Active state styling - ENHANCED */
    .em-form-group input:not(:placeholder-shown)[b-gtky0hekbd],
    .em-form-group textarea:not(:placeholder-shown)[b-gtky0hekbd],
    .em-form-group select:not([value=""])[b-gtky0hekbd] {
        border-color: var(--primary);
        background-color: rgba(var(--primary-rgb), 0.03);
    }

    /* Placeholder animation */
    .em-form-group input[b-gtky0hekbd]::placeholder,
    .em-form-group textarea[b-gtky0hekbd]::placeholder {
        color: var(--text-muted);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .em-form-group input:focus[b-gtky0hekbd]::placeholder,
    .em-form-group textarea:focus[b-gtky0hekbd]::placeholder {
        transform: translateY(-10px);
        opacity: 0;
    }

    /* Disabled inputs */
    .em-form-group input:disabled[b-gtky0hekbd],
    .em-form-group select:disabled[b-gtky0hekbd] {
        opacity: 0.7;
        background-color: var(--subtle-bg);
        cursor: not-allowed;
    }

/* Error State - ENHANCED */
.em-input-error[b-gtky0hekbd] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-gtky0hekbd] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-gtky0hekbd] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-gtky0hekbd 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-gtky0hekbd]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

/* Help Text - ENHANCED */
.em-form-help[b-gtky0hekbd] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-gtky0hekbd] {
    color: var(--text-secondary);
}

/* Switch Control - ENHANCED */
.em-switch[b-gtky0hekbd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .em-switch input[b-gtky0hekbd] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-gtky0hekbd] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .em-switch label[b-gtky0hekbd]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-gtky0hekbd] {
        background-color: var(--primary);
    }


        .em-switch input:checked + label[b-gtky0hekbd]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch input:focus + label[b-gtky0hekbd] {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }

    .em-switch input:disabled + label[b-gtky0hekbd] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .em-switch span[b-gtky0hekbd] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .em-switch:hover span[b-gtky0hekbd] {
        color: var(--text-primary);
    }

    /* Ripple effect on toggle */
    .em-switch label[b-gtky0hekbd]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-switch input:checked + label[b-gtky0hekbd]::after {
        animation: switch-ripple-b-gtky0hekbd 0.6s ease-out;
    }

/* Validation Summary */
.em-validation-summary[b-gtky0hekbd] {
    margin: 1.5rem 0;
    animation: fade-in-b-gtky0hekbd 0.3s ease both;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Alert Boxes - ENHANCED */
.em-alert[b-gtky0hekbd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--primary);
    background-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    animation: alert-appear-b-gtky0hekbd 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-alert[b-gtky0hekbd]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
    }

    .em-alert:hover[b-gtky0hekbd]::after {
        animation: shimmer-b-gtky0hekbd 2s infinite;
    }

.em-alert-danger[b-gtky0hekbd] {
    background-color: var(--danger-bg);
    border-left-color: var(--danger);
}

.em-alert-warning[b-gtky0hekbd] {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
}

.em-alert-info[b-gtky0hekbd] {
    background-color: var(--info-light);
    border-left-color: var(--info);
}

.em-alert i[b-gtky0hekbd] {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
    animation: alert-icon-pulse-b-gtky0hekbd 2s infinite;
}

.em-alert-danger i[b-gtky0hekbd] {
    color: var(--danger);
}

.em-alert-warning i[b-gtky0hekbd] {
    color: var(--warning);
}

.em-alert-info i[b-gtky0hekbd] {
    color: var(--info);
}

.em-alert h4[b-gtky0hekbd] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-gtky0hekbd] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Button Styles */
.em-btn[b-gtky0hekbd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.em-btn-primary[b-gtky0hekbd] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-gtky0hekbd] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-gtky0hekbd] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-sm[b-gtky0hekbd] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.em-btn[b-gtky0hekbd]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.em-btn:focus:not(:active)[b-gtky0hekbd]::after {
    animation: ripple-b-gtky0hekbd 0.6s ease-out;
}

/* Info Section Styles - ENHANCED FOR POSITION REQUIREMENTS */
.em-info-section[b-gtky0hekbd] {
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    margin-top: 1.25rem;
    border: 1px solid var(--border-divider);
    animation: fade-in-b-gtky0hekbd 0.4s ease both;
    animation-delay: 0.3s;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.em-info-title[b-gtky0hekbd] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px dashed var(--border-divider);
}

    .em-info-title i[b-gtky0hekbd] {
        color: white;
        font-size: 1rem;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius-md);
        background: var(--primary-gradient);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
        transition: all 0.3s ease;
    }

        /* Icons for different requirement types */
        .em-info-title i.fa-certificate[b-gtky0hekbd] {
            background: var(--primary-gradient);
        }

        .em-info-title i.fa-hard-hat[b-gtky0hekbd] {
            background: var(--warning-gradient);
        }

        .em-info-title i.fa-graduation-cap[b-gtky0hekbd] {
            background: var(--info-gradient);
        }

        .em-info-title i.fa-clipboard-list[b-gtky0hekbd] {
            background: var(--success-gradient);
        }

        .em-info-title i.fa-stethoscope[b-gtky0hekbd] {
            background: var(--danger-gradient);
        }

.em-info-section:hover .em-info-title i[b-gtky0hekbd] {
    transform: scale(1.1) rotate(10deg);
}

.em-info-list[b-gtky0hekbd] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

    .em-info-list li[b-gtky0hekbd] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        border-radius: var(--border-radius-md);
        background-color: var(--content-bg);
        border: 1px solid var(--border-divider);
        animation: fade-in-left 0.3s ease both;
        animation-delay: calc(var(--item-index, 0) * 0.1s);
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-info-list li:hover[b-gtky0hekbd] {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-light);
        }

        .em-info-list li:nth-child(1)[b-gtky0hekbd] {
            --item-index: 1;
        }

        .em-info-list li:nth-child(2)[b-gtky0hekbd] {
            --item-index: 2;
        }

        .em-info-list li:nth-child(3)[b-gtky0hekbd] {
            --item-index: 3;
        }

        .em-info-list li:nth-child(4)[b-gtky0hekbd] {
            --item-index: 4;
        }

        .em-info-list li:nth-child(5)[b-gtky0hekbd] {
            --item-index: 5;
        }

.em-info-item[b-gtky0hekbd] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
    padding-left: 1.625rem;
}

    .em-info-item[b-gtky0hekbd]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.125rem;
        height: 1.125rem;
        background-color: var(--primary-light);
        border-radius: 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.75rem;
    }

/* Badge styles - ENHANCED */
.em-badge[b-gtky0hekbd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.325rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    animation: badge-pulse-b-gtky0hekbd 1.5s infinite alternate;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .em-badge[b-gtky0hekbd]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        transform: translateX(-100%);
    }

    .em-badge:hover[b-gtky0hekbd]::after {
        animation: shimmer-b-gtky0hekbd 1.5s infinite;
    }

.em-badge-danger[b-gtky0hekbd] {
    background-color: var(--danger);
    color: white;
    border: 1px solid rgba(var(--danger-rgb), 0.3);
}

.em-badge-info[b-gtky0hekbd] {
    background-color: var(--info);
    color: white;
    border: 1px solid rgba(var(--info-rgb), 0.3);
}

/* Requirements card styles */
.em-requirements-card[b-gtky0hekbd] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

    .em-requirements-card:hover[b-gtky0hekbd] {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

.em-requirements-group[b-gtky0hekbd] {
    margin-top: 1rem;
}

.em-requirement-row[b-gtky0hekbd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-divider);
}

    .em-requirement-row:last-child[b-gtky0hekbd] {
        border-bottom: none;
    }

.em-requirement-title[b-gtky0hekbd] {
    font-weight: 600;
    color: var(--text-primary);
}

.em-requirement-type[b-gtky0hekbd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-requirement-type i[b-gtky0hekbd] {
        color: var(--primary);
    }

/* Table Container */
.em-table-container[b-gtky0hekbd] {
    margin-top: 1rem;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background-color: var(--content-bg);
    animation: fade-in-up-b-gtky0hekbd 0.5s ease both;
}

/* Data Table */
.em-data-table[b-gtky0hekbd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .em-data-table th[b-gtky0hekbd] {
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid var(--border-divider);
    }

    .em-data-table td[b-gtky0hekbd] {
        padding: 0.75rem 1rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
    }

    .em-data-table tr:last-child td[b-gtky0hekbd] {
        border-bottom: none;
    }

    .em-data-table tr:hover td[b-gtky0hekbd] {
        background-color: var(--bs-table-hover-bg);
    }

/* Table Row Styles */
.em-row-active[b-gtky0hekbd] {
    background-color: rgba(var(--success-rgb), 0.05);
}

    .em-row-active td:first-child[b-gtky0hekbd] {
        border-left: 3px solid var(--success);
    }

/* Status Pills */
.em-status-pill[b-gtky0hekbd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}

.em-status-active[b-gtky0hekbd] {
    background-color: var(--success-bg);
    color: var(--success);
}

.em-status-closed[b-gtky0hekbd] {
    background-color: var(--text-light);
    color: var(--text-primary);
    opacity: 0.7;
}

.em-status-pill i[b-gtky0hekbd] {
    font-size: 0.75rem;
}

/* Requirement details popup */
.em-requirement-details[b-gtky0hekbd] {
    position: absolute;
    z-index: 100;
    width: 300px;
    background-color: var(--modal-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-divider);
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(10px);
    pointer-events: none;
}

.em-info-item:hover .em-requirement-details[b-gtky0hekbd] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.em-requirement-details h5[b-gtky0hekbd] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-requirement-details h5 i[b-gtky0hekbd] {
        color: var(--primary);
    }

.em-requirement-details p[b-gtky0hekbd] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-requirement-details-meta[b-gtky0hekbd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-divider);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Date Inputs - Custom Styling */
input[type="date"][b-gtky0hekbd] {
    position: relative;
}

    input[type="date"][b-gtky0hekbd]::-webkit-calendar-picker-indicator {
        background-color: var(--primary-light);
        padding: 0.25rem;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        input[type="date"][b-gtky0hekbd]::-webkit-calendar-picker-indicator:hover {
            background-color: var(--primary);
            filter: invert(1);
        }

/* Textarea Enhanced */
textarea[b-gtky0hekbd] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

    textarea:focus[b-gtky0hekbd] {
        height: 120px;
    }

/* Select Dropdown Enhancement */
select[b-gtky0hekbd] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

    select:focus[b-gtky0hekbd] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .em-form-row[b-gtky0hekbd] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .em-form-section[b-gtky0hekbd] {
        padding: 1.25rem;
    }

    .em-data-table[b-gtky0hekbd] {
        font-size: 0.75rem;
    }

        .em-data-table th[b-gtky0hekbd],
        .em-data-table td[b-gtky0hekbd] {
            padding: 0.625rem 0.75rem;
        }

    .em-info-list[b-gtky0hekbd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-gtky0hekbd] {
        padding: 1rem;
    }

    .em-section-title[b-gtky0hekbd] {
        font-size: 1.125rem;
    }

    .em-form-group input[b-gtky0hekbd],
    .em-form-group select[b-gtky0hekbd],
    .em-form-group textarea[b-gtky0hekbd] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    .em-table-container[b-gtky0hekbd] {
        overflow-x: auto;
    }

    .em-data-table[b-gtky0hekbd] {
        min-width: 600px;
    }

    .em-info-section[b-gtky0hekbd] {
        padding: 1rem;
    }

    .em-form-group label[b-gtky0hekbd] {
        padding-left: 0;
    }

        .em-form-group label[b-gtky0hekbd]::before {
            display: none;
        }

    .em-form-help[b-gtky0hekbd],
    .em-error-message[b-gtky0hekbd] {
        padding-left: 0;
    }
}

/* ====== Animations ====== */
@keyframes validation-shake-b-gtky0hekbd {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes pulse-danger-b-gtky0hekbd {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes badge-pulse-b-gtky0hekbd {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes alert-icon-pulse-b-gtky0hekbd {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Switch ripple effect */
@keyframes switch-ripple-b-gtky0hekbd {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(15, 15);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(30, 30);
    }
}

/* Row fade-in animation */
.em-form-row[b-gtky0hekbd] {
    transform: translateY(5px);
    opacity: 0;
    animation: row-appear-b-gtky0hekbd 0.5s forwards;
    animation-delay: calc(var(--animation-index, 0) * 100ms);
}

@keyframes row-appear-b-gtky0hekbd {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Table row animation */
.em-data-table tr[b-gtky0hekbd] {
    opacity: 0;
    animation: tr-fade-in-b-gtky0hekbd 0.3s ease forwards;
    animation-delay: calc(var(--tr-index, 0) * 70ms);
}

    .em-data-table tr:nth-child(1)[b-gtky0hekbd] {
        --tr-index: 1;
    }

    .em-data-table tr:nth-child(2)[b-gtky0hekbd] {
        --tr-index: 2;
    }

    .em-data-table tr:nth-child(3)[b-gtky0hekbd] {
        --tr-index: 3;
    }

    .em-data-table tr:nth-child(4)[b-gtky0hekbd] {
        --tr-index: 4;
    }

    .em-data-table tr:nth-child(5)[b-gtky0hekbd] {
        --tr-index: 5;
    }

@keyframes tr-fade-in-b-gtky0hekbd {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Focus animation for form groups */
.em-form-group:focus-within[b-gtky0hekbd] {
    animation: focus-pulse-b-gtky0hekbd 1s ease;
}

@keyframes focus-pulse-b-gtky0hekbd {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

    100% {
        background-color: transparent;
    }
}

/* Ripple animation for buttons */
@keyframes ripple-b-gtky0hekbd {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/* Subtle sweep animation for section headers */
.em-section-title[b-gtky0hekbd]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

.em-form-section:hover .em-section-title[b-gtky0hekbd]::after {
    transform: scaleX(1);
}

.em-form-section:nth-child(2) .em-section-title[b-gtky0hekbd]::after {
    background: linear-gradient(90deg, var(--success) 0%, transparent 100%);
}

/* Entry animations for alerts */
.em-alert[b-gtky0hekbd] {
    animation: alert-appear-b-gtky0hekbd 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes alert-appear-b-gtky0hekbd {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Shimmer effect on hover for table rows */
.em-data-table tr:hover[b-gtky0hekbd] {
    position: relative;
    overflow: hidden;
}

    .em-data-table tr:hover[b-gtky0hekbd]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        animation: shimmer-b-gtky0hekbd 1.5s infinite;
    }

@keyframes shimmer-b-gtky0hekbd {
    100% {
        transform: translateX(50%);
    }
}

/* Floating effect for requirement cards */
.em-info-list li[b-gtky0hekbd] {
    transform-style: preserve-3d;
    perspective: 1000px;
}

    .em-info-list li:hover[b-gtky0hekbd] {
        animation: float-b-gtky0hekbd 3s infinite alternate ease-in-out;
    }

@keyframes float-b-gtky0hekbd {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(1deg);
    }

    100% {
        transform: translateY(-3px) rotate(-1deg);
    }
}

/* Badge shine effect */
@keyframes shine-b-gtky0hekbd {
    0% {
        background-position: -100px;
    }

    40%, 100% {
        background-position: 140px;
    }
}

/* Fade in animation for sections */
@keyframes fade-in-b-gtky0hekbd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-gtky0hekbd {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left-b-gtky0hekbd {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeEquipmentInfo.razor.rz.scp.css */
/* ====== Employee Equipment Information Styles ====== */

/* Form Section Container */
.em-form-section[b-je1dhu21ew] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--card-transition);
    animation: fade-in-up-b-je1dhu21ew 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-je1dhu21ew] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-je1dhu21ew]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-je1dhu21ew]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Actions */
.em-section-header[b-je1dhu21ew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
}

/* Section Title */
.em-section-title[b-je1dhu21ew] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-je1dhu21ew] {
        color: var(--primary);
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
    }

.em-form-section:hover .em-section-title i[b-je1dhu21ew] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

/* Section Actions */
.em-section-actions[b-je1dhu21ew] {
    display: flex;
    gap: 0.5rem;
}

/* Equipment Grid Layout */
.em-equipment-grid[b-je1dhu21ew] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Equipment Card Styles */
.em-equipment-card[b-je1dhu21ew] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--card-transition);
    overflow: hidden;
    animation: fade-in-b-je1dhu21ew 0.5s ease both;
}

    .em-equipment-card.em-active[b-je1dhu21ew] {
        border-left: 4px solid var(--success);
    }

    .em-equipment-card.em-returned[b-je1dhu21ew] {
        border-left: 4px solid var(--text-muted);
        opacity: 0.85;
    }

    .em-equipment-card:hover[b-je1dhu21ew] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.em-equipment-header[b-je1dhu21ew] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-equipment-info[b-je1dhu21ew] {
    flex: 1;
}

.em-equipment-name[b-je1dhu21ew] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.em-equipment-code[b-je1dhu21ew] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.em-equipment-status-badge[b-je1dhu21ew] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Equipment Status Indicators */
.em-status-pill[b-je1dhu21ew] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
}

.em-status-active[b-je1dhu21ew] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-closed[b-je1dhu21ew] {
    background-color: var(--text-light);
    color: var(--text-muted);
}

.em-status-pending[b-je1dhu21ew] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-status-expired[b-je1dhu21ew] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-warning-badge[b-je1dhu21ew] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.375rem;
    background-color: var(--danger-light);
    color: var(--danger);
}

/* Equipment Details Section */
.em-equipment-details[b-je1dhu21ew] {
    padding: 1rem;
    flex: 1;
}

.em-equipment-dates[b-je1dhu21ew] {
    margin-bottom: 0.75rem;
}

.em-issue-date[b-je1dhu21ew],
.em-return-date[b-je1dhu21ew],
.em-maintenance-date[b-je1dhu21ew] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.em-maintenance-due[b-je1dhu21ew] {
    color: var(--warning);
}

.em-equipment-condition[b-je1dhu21ew] {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.em-condition-label[b-je1dhu21ew] {
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}

.em-condition-value[b-je1dhu21ew] {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.em-equipment-notes[b-je1dhu21ew] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

    .em-equipment-notes i[b-je1dhu21ew] {
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

/* Equipment Actions */
.em-equipment-actions[b-je1dhu21ew] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Equipment Status Summary */
.em-equipment-status[b-je1dhu21ew] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.em-summary-card[b-je1dhu21ew] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

    .em-summary-card:hover[b-je1dhu21ew] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.success[b-je1dhu21ew] {
        border-left: 4px solid var(--success);
    }

    .em-summary-card.warning[b-je1dhu21ew] {
        border-left: 4px solid var(--warning);
    }

    .em-summary-card.danger[b-je1dhu21ew] {
        border-left: 4px solid var(--danger);
    }

.em-summary-icon[b-je1dhu21ew] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 1.125rem;
}

    .em-summary-icon.success[b-je1dhu21ew] {
        background-color: var(--success-light);
        color: var(--success);
    }

.em-summary-card.success .em-summary-icon[b-je1dhu21ew] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-summary-card.warning .em-summary-icon[b-je1dhu21ew] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-summary-card.danger .em-summary-icon[b-je1dhu21ew] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-summary-content[b-je1dhu21ew] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-je1dhu21ew] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-je1dhu21ew] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Equipment Filters */
.em-equipment-filters[b-je1dhu21ew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.em-search-field[b-je1dhu21ew] {
    position: relative;
    width: 240px;
}

    .em-search-field input[b-je1dhu21ew] {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 2rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.8125rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-je1dhu21ew] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        }

    .em-search-field i[b-je1dhu21ew] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
        pointer-events: none;
    }

.em-clear-search[b-je1dhu21ew] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .em-clear-search:hover[b-je1dhu21ew] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

.em-status-filters[b-je1dhu21ew] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
}

.em-status-filter[b-je1dhu21ew] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-status-filter:hover[b-je1dhu21ew] {
        color: var(--primary);
    }

    .em-status-filter.active[b-je1dhu21ew] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

/* Equipment Summary in Modals */
.em-equipment-summary[b-je1dhu21ew] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
}

.em-equipment-summary-icon[b-je1dhu21ew] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: var(--border-radius-md);
    font-size: 1.5rem;
}

.em-equipment-summary-details[b-je1dhu21ew] {
    flex: 1;
}

    .em-equipment-summary-details h4[b-je1dhu21ew] {
        margin: 0 0 0.5rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-equipment-summary-details div[b-je1dhu21ew] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

.em-equipment-detail[b-je1dhu21ew] {
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
}

    .em-equipment-detail strong[b-je1dhu21ew] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

/* Loading State */
.em-loading[b-je1dhu21ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.em-loading-spinner[b-je1dhu21ew] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-je1dhu21ew 1s infinite linear;
    margin-bottom: 1rem;
}

.em-loading p[b-je1dhu21ew] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Empty State */
.em-empty-state[b-je1dhu21ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

    .em-empty-state > i[b-je1dhu21ew] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-je1dhu21ew] {
        margin: 0;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-je1dhu21ew] {
        margin: 0;
        margin-bottom: 1.25rem;
        color: var(--text-secondary);
        max-width: 24rem;
        font-size: 0.9375rem;
    }

/* Button Styles */
.em-btn[b-je1dhu21ew] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.em-btn-sm[b-je1dhu21ew] {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.em-btn-primary[b-je1dhu21ew] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-je1dhu21ew] {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-je1dhu21ew] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-je1dhu21ew] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .em-btn-secondary:hover[b-je1dhu21ew] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-je1dhu21ew] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-je1dhu21ew] {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-je1dhu21ew] {
    background: transparent;
    border: 1px solid var(--border-divider);
}

    .em-btn-outline:hover[b-je1dhu21ew] {
        border-color: var(--primary);
        color: var(--primary);
    }

.em-btn[b-je1dhu21ew]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.em-btn:focus:not(:active)[b-je1dhu21ew]::after {
    animation: ripple-b-je1dhu21ew 0.6s ease-out;
}

/* Alert Styles */
.em-alert[b-je1dhu21ew] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1.5rem;
}

.em-alert-warning[b-je1dhu21ew] {
    background-color: var(--warning-light);
    border-left: 4px solid var(--warning);
}

.em-alert-info[b-je1dhu21ew] {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
}

.em-alert i[b-je1dhu21ew] {
    font-size: 1.25rem;
    color: var(--warning);
}

.em-alert-info i[b-je1dhu21ew] {
    color: var(--info);
}

.em-alert h4[b-je1dhu21ew] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-je1dhu21ew] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Modal Styles */
.em-modal-overlay[b-je1dhu21ew] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: fade-in-b-je1dhu21ew 0.3s ease;
}

.em-modal[b-je1dhu21ew] {
    background-color: var(--modal-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-je1dhu21ew 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
    overflow: auto;
}

.em-modal-header[b-je1dhu21ew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    z-index: 10;
}

.em-modal h3[b-je1dhu21ew] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-modal-close[b-je1dhu21ew] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.125rem;
}

    .em-modal-close:hover[b-je1dhu21ew] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-je1dhu21ew] {
    padding: 1.5rem;
    overflow-y: auto;
}

.em-modal-footer[b-je1dhu21ew] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Groups for Modal */
.em-form-group[b-je1dhu21ew] {
    margin-bottom: 1.25rem;
}

    .em-form-group label[b-je1dhu21ew] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-form-group input[b-je1dhu21ew],
    .em-form-group select[b-je1dhu21ew],
    .em-form-group textarea[b-je1dhu21ew] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-form-group input:focus[b-je1dhu21ew],
        .em-form-group select:focus[b-je1dhu21ew],
        .em-form-group textarea:focus[b-je1dhu21ew] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        }

.em-form-row[b-je1dhu21ew] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.em-input-error[b-je1dhu21ew] {
    border-color: var(--danger) !important;
}

    .em-input-error:focus[b-je1dhu21ew] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-je1dhu21ew] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-required[b-je1dhu21ew] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
}

/* Confirmation Modal */
.em-confirmation-content[b-je1dhu21ew] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.em-confirmation-icon[b-je1dhu21ew] {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    flex-shrink: 0;
}

.em-confirmation-content p[b-je1dhu21ew] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

    .em-confirmation-content p:last-child[b-je1dhu21ew] {
        margin-bottom: 0;
    }

/* Toast Notification */
.em-toast[b-je1dhu21ew] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--content-bg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    animation: slide-in-right-b-je1dhu21ew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .em-toast.error[b-je1dhu21ew] {
        border-left: 4px solid var(--danger);
    }

    .em-toast.success[b-je1dhu21ew] {
        border-left: 4px solid var(--success);
    }

    .em-toast.warning[b-je1dhu21ew] {
        border-left: 4px solid var(--warning);
    }

    .em-toast.info[b-je1dhu21ew] {
        border-left: 4px solid var(--info);
    }

.em-toast-icon[b-je1dhu21ew] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-toast.error .em-toast-icon[b-je1dhu21ew] {
    color: var(--danger);
    background-color: var(--danger-light);
}

.em-toast.success .em-toast-icon[b-je1dhu21ew] {
    color: var(--success);
    background-color: var(--success-light);
}

.em-toast.warning .em-toast-icon[b-je1dhu21ew] {
    color: var(--warning);
    background-color: var(--warning-light);
}

.em-toast.info .em-toast-icon[b-je1dhu21ew] {
    color: var(--info);
    background-color: var(--info-light);
}

.em-toast-content[b-je1dhu21ew] {
    flex: 1;
}

.em-toast-title[b-je1dhu21ew] {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-toast-message[b-je1dhu21ew] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-je1dhu21ew] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-toast-close:hover[b-je1dhu21ew] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Animations */
@keyframes fade-in-b-je1dhu21ew {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-je1dhu21ew {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-je1dhu21ew {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes modal-in-b-je1dhu21ew {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ripple-b-je1dhu21ew {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes spin-b-je1dhu21ew {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .em-equipment-grid[b-je1dhu21ew] {
        grid-template-columns: 1fr;
    }

    .em-equipment-status[b-je1dhu21ew] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .em-equipment-filters[b-je1dhu21ew] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-search-field[b-je1dhu21ew] {
        width: 100%;
    }

    .em-status-filters[b-je1dhu21ew] {
        width: 100%;
        justify-content: center;
    }

    .em-form-row[b-je1dhu21ew] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-je1dhu21ew] {
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-je1dhu21ew] {
        padding: 1rem;
    }

    .em-section-header[b-je1dhu21ew] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .em-section-actions[b-je1dhu21ew] {
        width: 100%;
        justify-content: flex-start;
    }

    .em-summary-card[b-je1dhu21ew] {
        padding: 0.75rem;
    }

    .em-summary-icon[b-je1dhu21ew] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .em-summary-value[b-je1dhu21ew] {
        font-size: 1.125rem;
    }

    .em-equipment-header[b-je1dhu21ew] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .em-equipment-status-badge[b-je1dhu21ew] {
        align-self: flex-start;
    }

    .em-equipment-actions[b-je1dhu21ew] {
        flex-wrap: wrap;
    }

    .em-equipment-summary[b-je1dhu21ew] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .em-modal-body[b-je1dhu21ew] {
        padding: 1rem;
    }

    .em-confirmation-content[b-je1dhu21ew] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeInductionInfo.razor.rz.scp.css */
/* ====== Employee Inductions & Safety Training Styles ====== */

:root[b-u9k73185zf] {
    --max-content-width: 1400px;
}

/* Form Section Container */
.em-form-section[b-u9k73185zf] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-u9k73185zf 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

    .em-form-section:hover[b-u9k73185zf] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-u9k73185zf]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--success));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

/* Dashboard Layout */
.em-dashboard[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.em-controls-container[b-u9k73185zf] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.em-content-area[b-u9k73185zf] {
    overflow: hidden;
    width: 100%;
}

/* Section Header with Action Buttons */
.em-section-header[b-u9k73185zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-u9k73185zf]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-u9k73185zf]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-u9k73185zf] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-section-actions[b-u9k73185zf] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-u9k73185zf] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-u9k73185zf 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-u9k73185zf 0.5s ease both;
}

    .em-empty-state > i[b-u9k73185zf] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .em-empty-state:hover > i[b-u9k73185zf] {
        transform: translateY(-8px);
        color: var(--primary);
        opacity: 1;
    }

    .em-empty-state h3[b-u9k73185zf] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-u9k73185zf] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-u9k73185zf] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Induction Summary Cards */
.em-induction-summary[b-u9k73185zf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.em-summary-card[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 160px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-u9k73185zf 0.4s ease both;
}

    .em-summary-card:nth-child(1)[b-u9k73185zf] {
        animation-delay: 0.1s;
    }

    .em-summary-card:nth-child(2)[b-u9k73185zf] {
        animation-delay: 0.2s;
    }

    .em-summary-card:nth-child(3)[b-u9k73185zf] {
        animation-delay: 0.3s;
    }

    .em-summary-card:nth-child(4)[b-u9k73185zf] {
        animation-delay: 0.4s;
    }

    .em-summary-card:hover[b-u9k73185zf] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.success[b-u9k73185zf] {
        border-left: 3px solid var(--success);
    }

    .em-summary-card.warning[b-u9k73185zf] {
        border-left: 3px solid var(--warning);
    }

    .em-summary-card.danger[b-u9k73185zf] {
        border-left: 3px solid var(--danger);
    }

    .em-summary-card.primary[b-u9k73185zf] {
        border-left: 3px solid var(--primary);
    }

.em-summary-icon[b-u9k73185zf] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--success-light);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(var(--success-rgb), 0.1);
}

    .em-summary-icon.warning[b-u9k73185zf] {
        background-color: var(--warning-light);
        color: var(--warning);
        box-shadow: 0 3px 6px rgba(var(--warning-rgb), 0.1);
    }

    .em-summary-icon.danger[b-u9k73185zf] {
        background-color: var(--danger-light);
        color: var(--danger);
        box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.1);
    }

    .em-summary-icon.primary[b-u9k73185zf] {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.1);
    }

.em-summary-card:hover .em-summary-icon[b-u9k73185zf] {
    transform: scale(1.1) rotate(10deg);
}

.em-summary-content[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-u9k73185zf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-u9k73185zf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* View Toggle */
.em-view-toggle[b-u9k73185zf] {
    display: flex;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
}

.em-view-btn[b-u9k73185zf] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-view-btn:hover[b-u9k73185zf] {
        color: var(--primary);
    }

    .em-view-btn.active[b-u9k73185zf] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

/* Filters Bar */
.em-filters-bar[b-u9k73185zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.em-status-filters[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

    .em-status-filters[b-u9k73185zf]::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome and Safari */
    }

.em-status-filter[b-u9k73185zf] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .em-status-filter:hover[b-u9k73185zf] {
        color: var(--primary);
    }

    .em-status-filter.active[b-u9k73185zf] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

.em-search-field[b-u9k73185zf] {
    position: relative;
    min-width: 180px;
    flex-grow: 1;
    max-width: 350px;
}

    .em-search-field input[b-u9k73185zf] {
        width: 100%;
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-u9k73185zf] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        }

    .em-search-field i[b-u9k73185zf] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.25s ease;
    }

    .em-search-field input:focus + i[b-u9k73185zf] {
        color: var(--primary);
    }

.em-clear-search[b-u9k73185zf] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .em-clear-search:hover[b-u9k73185zf] {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-50%) rotate(90deg);
    }

/* Table Container */
.em-table-wrapper[b-u9k73185zf] {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    animation: fade-in-b-u9k73185zf 0.5s ease both;
    animation-delay: 0.2s;
    -webkit-overflow-scrolling: touch;
}

/* Column Widths and Style */
.em-col-type[b-u9k73185zf] {
    min-width: 240px;
}

.em-col-date[b-u9k73185zf] {
    min-width: 120px;
    white-space: nowrap;
}

.em-col-status[b-u9k73185zf] {
    min-width: 100px;
    white-space: nowrap;
}

.em-col-conductor[b-u9k73185zf] {
    min-width: 150px;
}

.em-col-actions[b-u9k73185zf] {
    min-width: 160px;
    white-space: nowrap;
}

/* Date Display */
.em-date[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.em-date-value[b-u9k73185zf] {
    font-weight: 600;
    color: var(--text-primary);
}

.em-date-time[b-u9k73185zf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-conductor[b-u9k73185zf] {
    font-size: 0.813rem;
}

/* Data Table Styles */
.em-data-table[b-u9k73185zf] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

    .em-data-table th[b-u9k73185zf] {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0.6875rem 0.875rem;
        text-align: left;
        font-weight: 600;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .em-data-table td[b-u9k73185zf] {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--border-divider);
        vertical-align: middle;
    }

    .em-data-table tr:hover[b-u9k73185zf] {
        background-color: var(--subtle-bg);
    }

    .em-data-table tr:last-child td[b-u9k73185zf] {
        border-bottom: none;
    }

.em-inactive-row[b-u9k73185zf] {
    background-color: rgba(0, 0, 0, 0.02);
}

    .em-inactive-row td[b-u9k73185zf] {
        opacity: 0.7;
    }

.em-scheduled-row[b-u9k73185zf] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.em-pending-row[b-u9k73185zf] {
    background-color: rgba(var(--warning-rgb), 0.05);
}

/* Card View Styles */
.em-cards-view[b-u9k73185zf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    width: 100%;
}

.em-induction-card[b-u9k73185zf] {
    border-radius: var(--border-radius-lg);
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    animation: fade-in-up-b-u9k73185zf 0.4s ease both;
}

.em-card-active[b-u9k73185zf] {
    border-left: 4px solid var(--success);
}

.em-card-expired[b-u9k73185zf] {
    border-left: 4px solid var(--danger);
    opacity: 0.8;
}

.em-card-expiring[b-u9k73185zf] {
    border-left: 4px solid var(--warning);
}

.em-card-scheduled[b-u9k73185zf] {
    border-left: 4px solid var(--primary);
}

.em-card-pending[b-u9k73185zf] {
    border-left: 4px solid var(--info);
}

.em-induction-card:hover[b-u9k73185zf] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.em-card-header[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
}

.em-card-icon[b-u9k73185zf] {
    font-size: 1.125rem;
    color: var(--primary);
    background-color: var(--primary-light);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.em-card-title[b-u9k73185zf] {
    flex: 1;
    min-width: 0;
}

    .em-card-title h4[b-u9k73185zf] {
        margin: 0 0 0.25rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.em-card-status[b-u9k73185zf] {
    flex-shrink: 0;
    margin-left: auto;
}

.em-card-body[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    flex: 1;
}

.em-card-row[b-u9k73185zf] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.em-card-data[b-u9k73185zf] {
    flex: 1;
    min-width: 120px;
}

.em-card-label[b-u9k73185zf] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.em-card-value[b-u9k73185zf] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.em-card-comments[b-u9k73185zf] {
    flex: 1 0 100%;
}

.em-card-actions[b-u9k73185zf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Induction Info Styling */
.em-induction-info[b-u9k73185zf] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .em-induction-info i[b-u9k73185zf] {
        font-size: 1rem;
        color: var(--primary);
        background-color: var(--primary-light);
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
    }

.em-data-table tr:hover .em-induction-info i[b-u9k73185zf] {
    transform: scale(1.1) rotate(5deg);
    background-color: var(--primary);
    color: white;
}

.em-induction-name[b-u9k73185zf] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.em-induction-description[b-u9k73185zf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    max-width: 220px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.em-badge[b-u9k73185zf] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    white-space: nowrap;
}

.em-badge-danger[b-u9k73185zf] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-text-muted[b-u9k73185zf] {
    color: var(--text-muted);
    font-style: italic;
}

.em-expired-badge[b-u9k73185zf], .em-expiring-badge[b-u9k73185zf] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    white-space: nowrap;
}

.em-expired-badge[b-u9k73185zf] {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: pulse-danger-b-u9k73185zf 2s infinite;
}

.em-expiring-badge[b-u9k73185zf] {
    background-color: var(--warning-light);
    color: var(--warning);
}

/* Status Pills */
.em-status-pill[b-u9k73185zf] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.em-status-active[b-u9k73185zf] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-expired[b-u9k73185zf] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-status-pending[b-u9k73185zf] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-status-default[b-u9k73185zf] {
    background-color: var(--info-light);
    color: var(--info);
}

/* Induction Actions */
.em-induction-actions[b-u9k73185zf] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.em-action-buttons[b-u9k73185zf] {
    display: flex;
    gap: 0.375rem;
}

.em-action-dropdown[b-u9k73185zf] {
    position: relative;
}

.em-actions-menu[b-u9k73185zf] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    z-index: 100;
    animation: fade-in-down-b-u9k73185zf 0.3s ease;
    margin-top: 0.5rem;
}

.em-menu-item[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-menu-item:hover[b-u9k73185zf] {
        background-color: var(--subtle-bg);
        color: var(--primary);
    }

    .em-menu-item i[b-u9k73185zf] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        transition: color 0.2s ease;
    }

    .em-menu-item:hover i[b-u9k73185zf] {
        color: var(--primary);
    }

/* Modal Styles */
.em-modal-overlay[b-u9k73185zf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-u9k73185zf 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-u9k73185zf] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-u9k73185zf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.em-modal-header[b-u9k73185zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header[b-u9k73185zf]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
    }

    .em-modal-header h3[b-u9k73185zf] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-u9k73185zf] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-u9k73185zf] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-u9k73185zf] {
    padding: 1.5rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
    flex: 1;
}

.em-modal-footer[b-u9k73185zf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Styles */
.em-form-group[b-u9k73185zf] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-u9k73185zf] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-u9k73185zf] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-u9k73185zf]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-u9k73185zf]::before,
    .em-form-group:has(select:not([value=""])) label[b-u9k73185zf]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-u9k73185zf]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-u9k73185zf] {
        color: var(--primary);
    }

    .em-form-group input[b-u9k73185zf],
    .em-form-group select[b-u9k73185zf],
    .em-form-group textarea[b-u9k73185zf] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-u9k73185zf],
        .em-form-group select:focus[b-u9k73185zf],
        .em-form-group textarea:focus[b-u9k73185zf] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-u9k73185zf],
        .em-form-group select:hover[b-u9k73185zf],
        .em-form-group textarea:hover[b-u9k73185zf] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-u9k73185zf],
        .em-form-group textarea:not(:placeholder-shown)[b-u9k73185zf],
        .em-form-group select:not([value=""])[b-u9k73185zf] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

.em-form-row[b-u9k73185zf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-required[b-u9k73185zf] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-u9k73185zf 2s infinite;
}

.em-input-error[b-u9k73185zf] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-u9k73185zf] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-u9k73185zf] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-u9k73185zf 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-u9k73185zf]::before {
        content: "⚠";
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

.em-form-help[b-u9k73185zf] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-u9k73185zf] {
    color: var(--text-secondary);
}

/* Induction Timeline */
.em-induction-timeline[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
    position: relative;
}

    .em-induction-timeline[b-u9k73185zf]::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--border-divider);
        z-index: 0;
    }

.em-timeline-item[b-u9k73185zf] {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-left: 2.5rem;
    animation: slide-in-right-b-u9k73185zf 0.4s ease both;
}

    .em-timeline-item:nth-child(1)[b-u9k73185zf] {
        animation-delay: 0.1s;
    }

    .em-timeline-item:nth-child(2)[b-u9k73185zf] {
        animation-delay: 0.2s;
    }

    .em-timeline-item:nth-child(3)[b-u9k73185zf] {
        animation-delay: 0.3s;
    }

.em-timeline-icon[b-u9k73185zf] {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--content-bg);
    border: 2px solid var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    z-index: 1;
    transition: all 0.3s ease;
}

.em-timeline-item:hover .em-timeline-icon[b-u9k73185zf] {
    transform: scale(1.1);
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.em-timeline-item.completed .em-timeline-icon[b-u9k73185zf] {
    border-color: var(--success);
    color: var(--success);
}

.em-timeline-item.failed .em-timeline-icon[b-u9k73185zf] {
    border-color: var(--danger);
    color: var(--danger);
}

.em-timeline-item.expired .em-timeline-icon[b-u9k73185zf] {
    border-color: var(--warning);
    color: var(--warning);
}

.em-timeline-content[b-u9k73185zf] {
    flex: 1;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    position: relative;
    transition: all 0.3s ease;
}

    .em-timeline-content:hover[b-u9k73185zf] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.em-timeline-header[b-u9k73185zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-timeline-date[b-u9k73185zf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-timeline-details[b-u9k73185zf] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.em-timeline-detail[b-u9k73185zf] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.em-detail-label[b-u9k73185zf] {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 5rem;
}

/* Alert Styles */
.em-alert[b-u9k73185zf] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    animation: fade-in-b-u9k73185zf 0.3s ease;
}

.em-alert-info[b-u9k73185zf] {
    background-color: var(--info-light);
    border-left: 3px solid var(--info);
}

.em-alert-warning[b-u9k73185zf] {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
}

.em-alert i[b-u9k73185zf] {
    color: var(--info);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert-warning i[b-u9k73185zf] {
    color: var(--warning);
}

.em-alert h4[b-u9k73185zf] {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-u9k73185zf] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Toast Notification */
.em-toast[b-u9k73185zf] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-u9k73185zf 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-u9k73185zf] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-u9k73185zf] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-u9k73185zf] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-u9k73185zf] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-u9k73185zf] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-u9k73185zf] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-u9k73185zf] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-u9k73185zf] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-u9k73185zf] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-u9k73185zf] {
    flex: 1;
}

.em-toast-title[b-u9k73185zf] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-u9k73185zf] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-u9k73185zf] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-u9k73185zf] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-u9k73185zf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-u9k73185zf] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-u9k73185zf] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-u9k73185zf] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-u9k73185zf] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-u9k73185zf] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-u9k73185zf] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-u9k73185zf] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-u9k73185zf] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-u9k73185zf] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-u9k73185zf] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .em-btn-icon.em-btn-sm[b-u9k73185zf] {
        width: 2rem;
        height: 2rem;
    }

.em-btn:disabled[b-u9k73185zf] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn-bounce-hover:hover[b-u9k73185zf] {
    animation: bounce-b-u9k73185zf 0.75s;
}

/* Animations */
@keyframes fade-in-b-u9k73185zf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-u9k73185zf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-u9k73185zf {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-u9k73185zf {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-u9k73185zf {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-u9k73185zf {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-u9k73185zf {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-u9k73185zf {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-u9k73185zf {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-u9k73185zf {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes bounce-b-u9k73185zf {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-induction-summary[b-u9k73185zf] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .em-form-row[b-u9k73185zf] {
        grid-template-columns: 1fr;
    }

    .em-cards-view[b-u9k73185zf] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .em-form-section[b-u9k73185zf] {
        padding: 1rem;
    }

    .em-section-header[b-u9k73185zf] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .em-filters-bar[b-u9k73185zf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-status-filters[b-u9k73185zf] {
        width: 100%;
        overflow-x: auto;
    }

    .em-search-field[b-u9k73185zf] {
        width: 100%;
        max-width: none;
    }

    .em-view-toggle[b-u9k73185zf] {
        align-self: flex-end;
        margin-top: -2.5rem;
    }

    .em-cards-view[b-u9k73185zf] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-u9k73185zf] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-u9k73185zf] {
        max-height: calc(100vh - 170px);
    }

    .em-btn-text[b-u9k73185zf] {
        display: none;
    }

    .em-card-actions[b-u9k73185zf] {
        justify-content: center;
    }

    /* Hide less important columns on small screens */
    .em-col-conductor[b-u9k73185zf], .em-data-table td:nth-child(6)[b-u9k73185zf] {
        display: none;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-u9k73185zf] {
        padding: 0.875rem;
    }

    .em-section-header[b-u9k73185zf] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .em-section-actions[b-u9k73185zf] {
        width: 100%;
        justify-content: space-between;
        margin-top: 0.5rem;
    }

    .em-induction-actions[b-u9k73185zf] {
        justify-content: center;
    }

    /* Even more column hiding */
    .em-col-date[b-u9k73185zf], .em-data-table td:nth-child(2)[b-u9k73185zf],
    .em-col-date[b-u9k73185zf], .em-data-table td:nth-child(3)[b-u9k73185zf] {
        display: none;
    }

    .em-modal-footer[b-u9k73185zf] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-u9k73185zf] {
            width: 100%;
        }

    .em-toast[b-u9k73185zf] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-form-group label[b-u9k73185zf] {
        padding-left: 0;
    }

        .em-form-group label[b-u9k73185zf]::before {
            display: none;
        }

    .em-form-help[b-u9k73185zf],
    .em-error-message[b-u9k73185zf] {
        padding-left: 0;
    }

    .em-timeline-item[b-u9k73185zf] {
        padding-left: 2rem;
    }

    .em-induction-name[b-u9k73185zf] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .em-card-header[b-u9k73185zf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-card-status[b-u9k73185zf] {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .em-card-row[b-u9k73185zf] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .em-action-buttons[b-u9k73185zf] {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .em-action-buttons[b-u9k73185zf]::-webkit-scrollbar {
            display: none;
        }
}

@media (max-width: 400px) {
    .em-section-title[b-u9k73185zf] {
        font-size: 1.125rem;
    }

        .em-section-title i[b-u9k73185zf] {
            width: 2.25rem;
            height: 2.25rem;
            font-size: 1rem;
        }

    .em-summary-card[b-u9k73185zf] {
        padding: 0.75rem;
    }

    .em-summary-icon[b-u9k73185zf] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .em-summary-value[b-u9k73185zf] {
        font-size: 1.125rem;
    }

    .em-status-filter[b-u9k73185zf] {
        padding: 0.375rem 0.625rem;
        font-size: 0.6875rem;
    }

    .em-induction-description[b-u9k73185zf] {
        max-width: 180px;
    }
}
/* Status styles for renewed inductions */
.em-status-renewed[b-u9k73185zf] {
    background-color: var(--primary-light);
    color: var(--primary);
    position: relative;
    overflow: hidden;
}

    .em-status-renewed[b-u9k73185zf]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(45deg, transparent 0%, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%, transparent 100%);
        animation: shine-b-u9k73185zf 2s infinite linear;
    }

/* Renewed badge */
.em-renewed-badge[b-u9k73185zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--primary-light);
    color: var(--primary);
    white-space: nowrap;
    animation: pulse-primary-b-u9k73185zf 3s infinite;
}

    .em-renewed-badge i[b-u9k73185zf] {
        font-size: 0.625rem;
    }

/* Card styles for renewed inductions */
.em-card-renewed[b-u9k73185zf] {
    border-left: 4px solid var(--primary);
    position: relative;
}

    .em-card-renewed[b-u9k73185zf]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 40px 40px 0;
        border-color: transparent var(--primary-light) transparent transparent;
        z-index: 1;
    }

/* Row style for renewed inductions */
.em-renewed-row[b-u9k73185zf] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

    .em-renewed-row td[b-u9k73185zf] {
        border-left: 2px solid var(--primary);
    }

/* Renewal details modal styles */
.em-renewal-comparison[b-u9k73185zf] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.em-renewal-card[b-u9k73185zf] {
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--content-bg);
}

.em-renewal-header[b-u9k73185zf] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    font-weight: 600;
    font-size: 0.875rem;
}

    .em-renewal-header.original[b-u9k73185zf] {
        background-color: var(--primary-light);
        color: var(--primary);
    }

    .em-renewal-header.renewed[b-u9k73185zf] {
        background-color: var(--success-light);
        color: var(--success);
    }

.em-renewal-info[b-u9k73185zf] {
    padding: 1rem;
}

.em-renewal-row[b-u9k73185zf] {
    display: flex;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.em-renewal-label[b-u9k73185zf] {
    min-width: 120px;
    font-weight: 600;
    color: var(--text-primary);
}

.em-renewal-value[b-u9k73185zf] {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.em-renewal-connector[b-u9k73185zf] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-renewal-arrow[b-u9k73185zf] {
    width: 2rem;
    height: 2rem;
    background-color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
}

.em-renewal-notes[b-u9k73185zf] {
    margin-top: 1rem;
}

/* Summary card for renewed inductions */
.em-summary-card.renewed[b-u9k73185zf] {
    border-left: 3px solid var(--primary);
}

    .em-summary-card.renewed .em-summary-icon[b-u9k73185zf] {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.1);
    }

    .em-summary-card.renewed:hover .em-summary-icon[b-u9k73185zf] {
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.2);
    }

/* Timeline styles for renewed inductions */
.em-timeline-item.renewed .em-timeline-icon[b-u9k73185zf] {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-light);
}

.em-timeline-item.renewed .em-timeline-content[b-u9k73185zf] {
    border-left: 3px solid var(--primary);
}

/* Animation for renewal indicator */
@keyframes shine-b-u9k73185zf {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Card renewal info */
.em-card-renewal-info[b-u9k73185zf] {
    background-color: var(--primary-light);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

    .em-card-renewal-info .em-card-value[b-u9k73185zf] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .em-card-renewal-info i[b-u9k73185zf] {
        color: var(--primary);
        margin-right: 0.25rem;
    }

/* Responsive styles for renewal details */
@media (max-width: 768px) {
    .em-renewal-comparison[b-u9k73185zf] {
        grid-template-columns: 1fr;
    }

    .em-renewal-connector[b-u9k73185zf] {
        display: none;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeMainImporter.razor.rz.scp.css */
/* ====== Employee Importer Stylesheet ====== */

/* Root variables and overrides */
:root[b-ko18xvi755] {
    --emp-header-height: 4.5rem;
    --emp-transition-normal: 250ms;
    --emp-transition-slow: 400ms;
    --emp-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --emp-hover-transition: all var(--emp-transition-normal) var(--emp-transition-timing);
    --emp-card-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --emp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --emp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --emp-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --emp-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --emp-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
    --emp-radius-sm: 6px;
    --emp-radius-md: 8px;
    --emp-radius-lg: 12px;
    --emp-radius-xl: 16px;
    --emp-radius-full: 9999px;
    --emp-required: var(--danger);
    --emp-z-index-base: 10;
    --emp-z-index-dropdown: 50;
    --emp-z-index-modal: 100;
    --emp-z-index-toast: 1000;
    /* New z-index variables for better modal stacking */
    --emp-z-index-modal-1: 100; /* Standard modal */
    --emp-z-index-modal-2: 200; /* Wizard modal */
    --emp-z-index-modal-3: 300; /* High priority modals */
}

/* ====== Main Container and Layout ====== */
.emp-importer-container[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    overflow: hidden;
    position: relative;
}

/* ====== Header Section Styling ====== */
.emp-importer-header[b-ko18xvi755] {
    background: var(--content-bg);
    background-image: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--border-divider);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--emp-shadow-sm);
    z-index: var(--emp-z-index-base);
    position: sticky;
    top: 0;
    height: var(--emp-header-height);
    display: flex;
    align-items: center;
    animation: slide-in-top-b-ko18xvi755 0.4s ease-out both;
}

    .emp-importer-header[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        opacity: 0.8;
    }

.emp-importer-header-content[b-ko18xvi755] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.emp-importer-header-title[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: slide-in-left-b-ko18xvi755 0.5s ease-out both;
    animation-delay: 0.1s;
}

    .emp-importer-header-title i[b-ko18xvi755] {
        font-size: 1.75rem;
        color: var(--primary);
        background-color: rgba(var(--primary-rgb), 0.1);
        border-radius: 50%;
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .emp-importer-header-title:hover i[b-ko18xvi755] {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
    }

    .emp-importer-header-title h1[b-ko18xvi755] {
        margin: 0 0 0.25rem 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.2;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .emp-importer-header-title p[b-ko18xvi755] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

.emp-importer-header-actions[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slide-in-right-b-ko18xvi755 0.5s ease-out both;
    animation-delay: 0.2s;
}

/* ====== Main Content Area ====== */
.emp-importer-main-content[b-ko18xvi755] {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: fade-in-up-b-ko18xvi755 0.6s ease both;
    animation-delay: 0.3s;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* ====== Stats Cards Section ====== */
.emp-importer-stats[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    animation: fade-in-b-ko18xvi755 0.5s ease-out;
}

.emp-stats-card[b-ko18xvi755] {
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--emp-card-transition);
    box-shadow: var(--emp-shadow-sm);
    animation: fade-in-up-b-ko18xvi755 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 0.1s);
    position: relative;
    overflow: hidden;
}

    .emp-stats-card[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .emp-stats-card:hover[b-ko18xvi755] {
        transform: translateY(-4px);
        box-shadow: var(--emp-shadow-md);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

        .emp-stats-card:hover[b-ko18xvi755]::before {
            opacity: 1;
        }

.emp-stats-card-icon[b-ko18xvi755] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--emp-radius-lg);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-position: center;
    background-size: 200% 200%;
    animation: subtle-gradient-b-ko18xvi755 8s ease infinite;
}

.emp-stats-card:hover .emp-stats-card-icon[b-ko18xvi755] {
    transform: scale(1.08);
}

.emp-stats-card-icon.primary[b-ko18xvi755] {
    background-image: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12);
}

.emp-stats-card-icon.success[b-ko18xvi755] {
    background-image: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.15) 100%);
    color: var(--success);
    box-shadow: 0 4px 12px rgba(var(--success-rgb), 0.12);
}

.emp-stats-card-icon.warning[b-ko18xvi755] {
    background-image: linear-gradient(135deg, var(--warning-light) 0%, rgba(var(--warning-rgb), 0.15) 100%);
    color: var(--warning);
    box-shadow: 0 4px 12px rgba(var(--warning-rgb), 0.12);
}

.emp-stats-card-icon.danger[b-ko18xvi755] {
    background-image: linear-gradient(135deg, var(--danger-light) 0%, rgba(var(--danger-rgb), 0.15) 100%);
    color: var(--danger);
    box-shadow: 0 4px 12px rgba(var(--danger-rgb), 0.12);
}

.emp-stats-card-content[b-ko18xvi755] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.emp-stats-value[b-ko18xvi755] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.emp-stats-label[b-ko18xvi755] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ====== Bulk Import Settings ====== */
.emp-bulk-import-settings[b-ko18xvi755] {
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    box-shadow: var(--emp-shadow-sm);
    animation: fade-in-up-b-ko18xvi755 0.5s ease;
    animation-delay: 0.3s;
    position: relative;
    overflow: hidden;
}

    .emp-bulk-import-settings[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
        z-index: 1;
    }

    .emp-bulk-import-settings h3[b-ko18xvi755] {
        margin: 0 0 0.75rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        position: relative;
        display: inline-block;
    }

        .emp-bulk-import-settings h3[b-ko18xvi755]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--primary-gradient);
            border-radius: 3px;
        }

    .emp-bulk-import-settings p[b-ko18xvi755] {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        margin: 0 0 1.5rem;
    }

.emp-bulk-settings-grid[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.emp-bulk-settings-column[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
}

.emp-form-section[b-ko18xvi755] {
    background-color: var(--subtle-bg);
    border-radius: var(--emp-radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-divider);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: var(--emp-card-transition);
    position: relative;
    overflow: hidden;
}

    .emp-form-section:hover[b-ko18xvi755] {
        box-shadow: var(--emp-shadow-sm);
        border-color: rgba(var(--primary-rgb), 0.2);
        transform: translateY(-2px);
    }

    .emp-form-section h4[b-ko18xvi755] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px dashed var(--border-divider);
    }

        .emp-form-section h4 i[b-ko18xvi755] {
            color: var(--primary);
        }

.emp-form-row[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.emp-form-group[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

    .emp-form-group label[b-ko18xvi755] {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

.em-required[b-ko18xvi755] {
    color: var(--emp-required);
}

.emp-form-control[b-ko18xvi755] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--emp-radius-md);
    border: 1px solid var(--border-divider);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: var(--emp-hover-transition);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

    .emp-form-control:focus[b-ko18xvi755] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .emp-form-control[b-ko18xvi755]::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

.emp-input-with-custom[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.emp-form-help[b-ko18xvi755] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.emp-form-options[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.emp-option-group[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.emp-form-actions[b-ko18xvi755] {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ====== Switch/Toggle ====== */
.emp-switch[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

    .emp-switch input[b-ko18xvi755] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .emp-switch label[b-ko18xvi755] {
        position: relative;
        display: inline-block;
        width: 38px;
        height: 20px;
        flex-shrink: 0;
        margin: 0;
        cursor: pointer;
    }

        .emp-switch label[b-ko18xvi755]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(var(--text-secondary-rgb), 0.2);
            transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-radius: 20px;
            box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        }

        .emp-switch label[b-ko18xvi755]::after {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }

    .emp-switch input:checked + label[b-ko18xvi755]::before {
        background: var(--primary-gradient);
    }

    .emp-switch input:checked + label[b-ko18xvi755]::after {
        transform: translateX(18px);
    }

    .emp-switch input:focus + label[b-ko18xvi755]::before {
        box-shadow: 0 0 1px var(--primary);
    }

    .emp-switch span[b-ko18xvi755] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        user-select: none;
    }

/* ====== Search and Filters ====== */
.emp-importer-filters[b-ko18xvi755] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1rem;
    box-shadow: var(--emp-shadow-sm);
    flex-wrap: wrap;
    gap: 1rem;
}

.emp-search-container[b-ko18xvi755] {
    flex: 1;
    min-width: 250px;
}

.emp-search-bar[b-ko18xvi755] {
    position: relative;
    width: 100%;
}

    .emp-search-bar i[b-ko18xvi755] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.2s ease;
    }

    .emp-search-bar input[b-ko18xvi755] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        border-radius: var(--emp-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.2s ease;
    }

        .emp-search-bar input:focus[b-ko18xvi755] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

            .emp-search-bar input:focus + i[b-ko18xvi755] {
                color: var(--primary);
            }

.emp-clear-search[b-ko18xvi755] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .emp-clear-search:hover[b-ko18xvi755] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

.emp-filter-options[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.emp-checkbox[b-ko18xvi755] {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

    .emp-checkbox input[type="checkbox"][b-ko18xvi755] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .emp-checkbox label[b-ko18xvi755] {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-secondary);
        padding-left: 1.75rem;
        user-select: none;
    }

        .emp-checkbox label[b-ko18xvi755]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            border: 1px solid var(--border-divider);
            background-color: var(--input-bg);
            border-radius: var(--emp-radius-sm);
            transition: var(--emp-hover-transition);
        }

    .emp-checkbox input[type="checkbox"]:checked + label[b-ko18xvi755]::before {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .emp-checkbox input[type="checkbox"]:checked + label[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        left: 0.375rem;
        top: 50%;
        transform: translateY(-60%) rotate(45deg);
        width: 0.375rem;
        height: 0.625rem;
        border: solid white;
        border-width: 0 2px 2px 0;
    }

    .emp-checkbox input[type="checkbox"]:focus + label[b-ko18xvi755]::before {
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

/* ====== Grid and Table Containers ====== */
.emp-importer-grid-container[b-ko18xvi755] {
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    box-shadow: var(--emp-shadow-sm);
    flex: 1;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    animation: fade-in-up-b-ko18xvi755 0.6s ease;
    animation-delay: 0.4s;
    position: relative;
}

.emp-employees-table[b-ko18xvi755] {
    width: 100%;
    overflow-x: auto;
    position: relative;
}

    .emp-employees-table table[b-ko18xvi755] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .emp-employees-table th[b-ko18xvi755] {
        position: sticky;
        top: 0;
        z-index: 5;
        text-align: left;
        padding: 0.875rem 1rem;
        background-color: var(--table-header-bg);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: background-color 0.2s ease;
    }

        .emp-employees-table th:hover[b-ko18xvi755] {
            background-color: rgba(var(--primary-rgb), 0.1);
        }

    .emp-employees-table td[b-ko18xvi755] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
        vertical-align: middle;
        transition: background-color 0.15s ease;
    }

    .emp-employees-table tbody tr[b-ko18xvi755] {
        transition: all 0.15s ease;
    }

        .emp-employees-table tbody tr:hover[b-ko18xvi755] {
            background-color: var(--bs-table-hover-bg);
        }

            .emp-employees-table tbody tr:hover td[b-ko18xvi755] {
                color: var(--text-primary);
            }

    .emp-employees-table .emp-select-column[b-ko18xvi755] {
        width: 40px;
        text-align: center;
    }

.emp-duplicate-row[b-ko18xvi755] {
    background-color: rgba(var(--warning-rgb), 0.05);
}

    .emp-duplicate-row:hover td[b-ko18xvi755] {
        background-color: rgba(var(--warning-rgb), 0.1) !important;
    }

.emp-missing-data-row[b-ko18xvi755] {
    background-color: rgba(var(--danger-rgb), 0.05);
}

    .emp-missing-data-row:hover td[b-ko18xvi755] {
        background-color: rgba(var(--danger-rgb), 0.1) !important;
    }

.emp-duplicate-badge[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    color: var(--warning);
    font-size: 0.875rem;
    cursor: help;
}

.emp-actions-cell[b-ko18xvi755] {
    width: 100px;
}

.emp-actions-buttons[b-ko18xvi755] {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
}

/* Status badges */
.emp-status-badge[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--emp-radius-full);
    white-space: nowrap;
    transition: transform 0.2s ease;
}

    .emp-status-badge:hover[b-ko18xvi755] {
        transform: translateY(-1px);
    }

.emp-status-success[b-ko18xvi755] {
    background-color: var(--success-light);
    color: var(--success);
}

.emp-status-warning[b-ko18xvi755] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.emp-status-danger[b-ko18xvi755] {
    background-color: var(--danger-light);
    color: var(--danger);
}

/* ====== Missing fields summary ====== */
.emp-missing-fields-summary[b-ko18xvi755] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.emp-missing-field-tag[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background-color: var(--danger-light);
    color: var(--danger);
    border-radius: var(--emp-radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ====== Loading and Empty States ====== */
.emp-loading-state[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    text-align: center;
    height: 100%;
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

.emp-loading-spinner[b-ko18xvi755] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-ko18xvi755 1s linear infinite;
    margin-bottom: 1.5rem;
    position: relative;
}

    .emp-loading-spinner[b-ko18xvi755]::before,
    .emp-loading-spinner[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        top: -0.5rem;
        left: -0.5rem;
        right: -0.5rem;
        bottom: -0.5rem;
        border-radius: 50%;
        border: 0.25rem solid transparent;
        border-top-color: var(--primary);
        opacity: 0.3;
        animation: spin-b-ko18xvi755 2s linear infinite;
    }

    .emp-loading-spinner[b-ko18xvi755]::after {
        top: -0.25rem;
        left: -0.25rem;
        right: -0.25rem;
        bottom: -0.25rem;
        opacity: 0.15;
        animation: spin-b-ko18xvi755 1.5s linear infinite reverse;
    }

.emp-loading-state p[b-ko18xvi755] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    animation: pulse-text-b-ko18xvi755 1.5s ease-in-out infinite alternate;
}

@keyframes pulse-text-b-ko18xvi755 {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.emp-empty-state[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    height: 100%;
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-empty-state i[b-ko18xvi755] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
        opacity: 0.7;
        animation: float-b-ko18xvi755 3s ease-in-out infinite;
    }

    .emp-empty-state h3[b-ko18xvi755] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 0.5rem;
        color: var(--text-primary);
    }

    .emp-empty-state p[b-ko18xvi755] {
        color: var(--text-secondary);
        max-width: 400px;
        margin: 0 0 1.5rem;
    }

@keyframes float-b-ko18xvi755 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ====== Buttons ====== */
.emp-btn[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--emp-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--emp-hover-transition);
    border: none;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: var(--emp-shadow-xs);
}

    .emp-btn[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .emp-btn:focus:not(:active)[b-ko18xvi755]::after {
        animation: ripple-b-ko18xvi755 0.6s ease-out;
    }

    .emp-btn i[b-ko18xvi755] {
        transition: transform 0.3s ease;
    }

.emp-btn-primary[b-ko18xvi755] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .emp-btn-primary:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

    .emp-btn-primary:active[b-ko18xvi755] {
        transform: translateY(0) scale(0.98);
    }

.emp-btn-secondary[b-ko18xvi755] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .emp-btn-secondary:hover[b-ko18xvi755] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .emp-btn-secondary:active[b-ko18xvi755] {
        transform: translateY(0) scale(0.98);
    }

    .emp-btn-secondary:hover i[b-ko18xvi755] {
        transform: rotate(180deg);
    }

.emp-btn-success[b-ko18xvi755] {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--success-rgb), 0.2);
}

    .emp-btn-success:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--success-rgb), 0.3);
    }

    .emp-btn-success:active[b-ko18xvi755] {
        transform: translateY(0) scale(0.98);
    }

.emp-btn-danger[b-ko18xvi755] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--danger-rgb), 0.2);
}

    .emp-btn-danger:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

    .emp-btn-danger:active[b-ko18xvi755] {
        transform: translateY(0) scale(0.98);
    }

.emp-btn-info[b-ko18xvi755] {
    background: var(--info-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--info-rgb), 0.2);
}

    .emp-btn-info:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--info-rgb), 0.3);
    }

    .emp-btn-info:active[b-ko18xvi755] {
        transform: translateY(0) scale(0.98);
    }

.emp-btn:disabled[b-ko18xvi755] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.emp-btn-icon[b-ko18xvi755] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
}

.emp-btn-sm[b-ko18xvi755] {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

    .emp-btn-sm.emp-btn-icon[b-ko18xvi755] {
        width: 2rem;
        height: 2rem;
    }

.emp-btn-bounce-hover:hover[b-ko18xvi755] {
    animation: bounce-b-ko18xvi755 0.5s ease;
}

/* ====== Modal Styling ====== */
/* ===== IMPROVED MODAL OVERLAY AND CONTAINER ===== */
.emp-modal-overlay[b-ko18xvi755] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: var(--emp-z-index-modal-1); /* Use the standard modal z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in-b-ko18xvi755 0.25s ease;
    padding: 1.25rem;
    transition: opacity 0.3s ease;
}

.emp-modal[b-ko18xvi755] {
    background-color: var(--modal-bg);
    border-radius: var(--emp-radius-lg);
    box-shadow: var(--emp-shadow-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-ko18xvi755 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    position: relative;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .emp-modal:hover[b-ko18xvi755] {
        transform: scale(1.01);
    }

    .emp-modal[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
        z-index: 2;
    }

.emp-modal-sm[b-ko18xvi755] {
    max-width: 400px;
}

.emp-modal-large[b-ko18xvi755] {
    max-width: 800px;
}

.emp-modal-lg[b-ko18xvi755] {
    max-width: 800px;
}

.emp-modal-header[b-ko18xvi755] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .emp-modal-header h3[b-ko18xvi755] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.emp-modal-close[b-ko18xvi755] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--emp-hover-transition);
    font-size: 1.125rem;
    z-index: 3;
}

    .emp-modal-close:hover[b-ko18xvi755] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        transform: rotate(90deg);
    }

.emp-modal-body[b-ko18xvi755] {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 170px);
    position: relative;
}

.emp-modal-footer[b-ko18xvi755] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

/* ===== WIZARD MODAL STYLING (IMPROVED) ===== */
.emp-wizard-overlay[b-ko18xvi755] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(4px);
    z-index: var(--emp-z-index-modal-2); /* Higher z-index than standard modals */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in-b-ko18xvi755 0.25s ease;
    padding: 1.25rem;
}

.emp-wizard-container[b-ko18xvi755] {
    background-color: var(--modal-bg);
    border-radius: var(--emp-radius-lg);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(var(--primary-rgb), 0.1);
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-divider);
    overflow: hidden;
    position: relative;
    animation: wizard-in-b-ko18xvi755 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}

@keyframes wizard-in-b-ko18xvi755 {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.emp-wizard-container[b-ko18xvi755]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    z-index: 2;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}

/* Wizard header */
.emp-wizard-header[b-ko18xvi755] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

.emp-wizard-title[b-ko18xvi755] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .emp-wizard-title i[b-ko18xvi755] {
        color: var(--primary);
        font-size: 1.375rem;
        animation: pulse-icon-b-ko18xvi755 2s infinite alternate;
    }

@keyframes pulse-icon-b-ko18xvi755 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.emp-wizard-close[b-ko18xvi755] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--emp-hover-transition);
    font-size: 1.125rem;
    z-index: 3;
}

    .emp-wizard-close:hover[b-ko18xvi755] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        transform: rotate(90deg);
    }

/* Wizard body */
.emp-wizard-body[b-ko18xvi755] {
    padding: 0;
    overflow-y: auto;
    max-height: calc(90vh - 170px);
    position: relative;
}

/* Step indicator */
.emp-wizard-steps[b-ko18xvi755] {
    display: flex;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px dashed var(--border-divider);
    background-color: var(--content-bg);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .emp-wizard-steps[b-ko18xvi755]::-webkit-scrollbar {
        display: none;
    }

.emp-wizard-step[b-ko18xvi755] {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 2.5rem;
    opacity: 0.6;
    transition: all 0.3s ease;
}

    .emp-wizard-step:last-child[b-ko18xvi755] {
        margin-right: 0;
    }

    .emp-wizard-step[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        right: -1.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1px;
        background-color: var(--border-divider);
    }

    .emp-wizard-step:last-child[b-ko18xvi755]::after {
        display: none;
    }

    .emp-wizard-step.active[b-ko18xvi755] {
        opacity: 1;
    }

.emp-wizard-step-number[b-ko18xvi755] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
}

.emp-wizard-step.active .emp-wizard-step-number[b-ko18xvi755] {
    background: var(--primary-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
    animation: pulse-number-b-ko18xvi755 2s infinite;
}

@keyframes pulse-number-b-ko18xvi755 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

.emp-wizard-step.completed .emp-wizard-step-number[b-ko18xvi755] {
    background: var(--success);
    color: white;
    border-color: transparent;
}

.emp-wizard-step-label[b-ko18xvi755] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.emp-wizard-step.active .emp-wizard-step-label[b-ko18xvi755] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Step content */
.emp-wizard-step-content[b-ko18xvi755] {
    padding: 2rem 1.5rem;
    animation: fade-in-b-ko18xvi755 0.3s ease;
}

/* Initial selection screen */
.emp-wizard-selection[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
}

.emp-wizard-option[b-ko18xvi755] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--emp-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--emp-shadow-xs);
}

    .emp-wizard-option[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .emp-wizard-option:hover[b-ko18xvi755] {
        transform: translateY(-5px);
        box-shadow: var(--emp-shadow-md);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

        .emp-wizard-option:hover[b-ko18xvi755]::before {
            opacity: 1;
        }

.emp-wizard-option-icon[b-ko18xvi755] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--emp-radius-lg);
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
    background-image: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12);
}

.emp-wizard-option:hover .emp-wizard-option-icon[b-ko18xvi755] {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.2);
}

.emp-wizard-option-title[b-ko18xvi755] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.emp-wizard-option-desc[b-ko18xvi755] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Form styling */
.emp-wizard-form-row[b-ko18xvi755] {
    margin-bottom: 1.5rem;
}

    .emp-wizard-form-row:last-child[b-ko18xvi755] {
        margin-bottom: 0;
    }

.emp-wizard-form-group[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

    .emp-wizard-form-group label[b-ko18xvi755] {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .emp-wizard-form-group input[b-ko18xvi755],
    .emp-wizard-form-group select[b-ko18xvi755],
    .emp-wizard-form-group textarea[b-ko18xvi755] {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: var(--emp-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: var(--emp-hover-transition);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    }

        .emp-wizard-form-group input:focus[b-ko18xvi755],
        .emp-wizard-form-group select:focus[b-ko18xvi755],
        .emp-wizard-form-group textarea:focus[b-ko18xvi755] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

.emp-wizard-form-help[b-ko18xvi755] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.emp-wizard-selected-entity[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--primary-light);
    border-radius: var(--emp-radius-md);
    margin-bottom: 1.5rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    transition: all 0.3s ease;
}

    .emp-wizard-selected-entity:hover[b-ko18xvi755] {
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
        transform: translateY(-2px);
    }

    .emp-wizard-selected-entity i[b-ko18xvi755] {
        font-size: 1.25rem;
        color: var(--primary);
        background-color: white;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
        transition: transform 0.3s ease;
    }

    .emp-wizard-selected-entity:hover i[b-ko18xvi755] {
        transform: scale(1.1);
    }

.emp-wizard-selected-entity-details[b-ko18xvi755] {
    flex: 1;
}

.emp-wizard-selected-entity-title[b-ko18xvi755] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.emp-wizard-selected-entity-desc[b-ko18xvi755] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.emp-wizard-change-btn[b-ko18xvi755] {
    padding: 0.25rem 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--emp-radius-sm);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--emp-hover-transition);
}

    .emp-wizard-change-btn:hover[b-ko18xvi755] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
    }

.emp-wizard-info-box[b-ko18xvi755] {
    padding: 1rem;
    background-color: var(--info-light);
    border-radius: var(--emp-radius-md);
    border-left: 4px solid var(--info);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    box-shadow: 0 2px 6px rgba(var(--info-rgb), 0.1);
}

    .emp-wizard-info-box i[b-ko18xvi755] {
        color: var(--info);
        font-size: 1.125rem;
        margin-top: 0.125rem;
        flex-shrink: 0;
        animation: pulse-info-b-ko18xvi755 2s infinite alternate;
    }

@keyframes pulse-info-b-ko18xvi755 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.emp-wizard-info-content[b-ko18xvi755] {
    flex: 1;
}

.emp-wizard-info-title[b-ko18xvi755] {
    font-weight: 600;
    color: var(--info);
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
}

.emp-wizard-info-text[b-ko18xvi755] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Success screen */
.emp-wizard-success[b-ko18xvi755] {
    text-align: center;
    padding: 2rem 1.5rem;
}

.emp-wizard-success-icon[b-ko18xvi755] {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.15) 100%);
    color: var(--success);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: success-pulse-b-ko18xvi755 2s infinite;
}

@keyframes success-pulse-b-ko18xvi755 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

.emp-wizard-success h3[b-ko18xvi755] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.emp-wizard-success p[b-ko18xvi755] {
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

.emp-wizard-created-details[b-ko18xvi755] {
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--emp-radius-lg);
    padding: 1.25rem;
    text-align: left;
    margin-bottom: 1.5rem;
    box-shadow: var(--emp-shadow-sm);
    animation: fade-in-up-b-ko18xvi755 0.4s ease;
}

.emp-wizard-detail-row[b-ko18xvi755] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-divider);
}

    .emp-wizard-detail-row:last-child[b-ko18xvi755] {
        border-bottom: none;
    }

.emp-wizard-detail-label[b-ko18xvi755] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.emp-wizard-detail-value[b-ko18xvi755] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
}

/* Wizard footer */
.emp-wizard-footer[b-ko18xvi755] {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.emp-wizard-btn[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--emp-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--emp-hover-transition);
    border: none;
    position: relative;
    overflow: hidden;
}

.emp-wizard-btn-next[b-ko18xvi755] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .emp-wizard-btn-next:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

    .emp-wizard-btn-next:disabled[b-ko18xvi755] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2) !important;
    }

.emp-wizard-btn-prev[b-ko18xvi755] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .emp-wizard-btn-prev:hover[b-ko18xvi755] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.emp-wizard-btn-finish[b-ko18xvi755] {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 2px 5px rgba(var(--success-rgb), 0.2);
}

    .emp-wizard-btn-finish:hover[b-ko18xvi755] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--success-rgb), 0.3);
    }

/* Animations for step transitions */
@keyframes slide-in-right-b-ko18xvi755 {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left-b-ko18xvi755 {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.emp-wizard-slide-in[b-ko18xvi755] {
    animation: slide-in-right-b-ko18xvi755 0.3s ease forwards;
}

/* Employee Details Modal specific styles */
.emp-details-grid[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

.emp-detail-item[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.emp-detail-label[b-ko18xvi755] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.emp-detail-value[b-ko18xvi755] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

.emp-detail-warning[b-ko18xvi755] {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--warning-light);
    border-radius: var(--emp-radius-md);
    border-left: 4px solid var(--warning);
    margin-top: 1rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    box-shadow: 0 2px 6px rgba(var(--warning-rgb), 0.1);
}

    .emp-detail-warning i[b-ko18xvi755] {
        color: var(--warning);
        font-size: 1.125rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
        animation: warning-pulse-b-ko18xvi755 2s infinite alternate;
    }

@keyframes warning-pulse-b-ko18xvi755 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.emp-detail-missing[b-ko18xvi755] {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--emp-radius-md);
    border: 1px solid var(--border-divider);
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-detail-missing h4[b-ko18xvi755] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.75rem 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .emp-detail-missing h4[b-ko18xvi755]::before {
            content: '\f0ae'; /* Tasks icon */
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            color: var(--primary);
        }

.emp-detail-success[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--success-light);
    border-radius: var(--emp-radius-md);
    color: var(--success);
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-detail-success i[b-ko18xvi755] {
        font-size: 1.125rem;
        animation: pulse-success-b-ko18xvi755 2s infinite alternate;
    }

@keyframes pulse-success-b-ko18xvi755 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.emp-missing-fields-list[b-ko18xvi755] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .emp-missing-fields-list li[b-ko18xvi755] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background-color: var(--danger-light);
        border-radius: var(--emp-radius-md);
        color: var(--danger);
        font-size: 0.875rem;
        animation: fade-in-b-ko18xvi755 0.4s ease;
        animation-delay: calc(var(--i, 0) * 0.1s);
    }

        .emp-missing-fields-list li i[b-ko18xvi755] {
            font-size: 1rem;
        }

.emp-detail-note[b-ko18xvi755] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--info-light);
    border-radius: var(--emp-radius-md);
    color: var(--info);
    font-size: 0.8125rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-detail-note i[b-ko18xvi755] {
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

/* Missing Fields Modal */
.emp-missing-fields-info[b-ko18xvi755] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--emp-radius-md);
    border-left: 4px solid var(--primary);
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-missing-fields-info p[b-ko18xvi755] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9375rem;
    }

        .emp-missing-fields-info p strong[b-ko18xvi755] {
            color: var(--text-primary);
        }

.emp-mt-2[b-ko18xvi755] {
    margin-top: 0.5rem;
}

/* Import Progress Modal */
.emp-import-progress[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.emp-progress-bar[b-ko18xvi755] {
    height: 10px;
    background-color: rgba(var(--primary-rgb), 0.1);
    border-radius: var(--emp-radius-full);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.emp-progress-fill[b-ko18xvi755] {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--emp-radius-full);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .emp-progress-fill[b-ko18xvi755]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: translateX(-100%);
        animation: progress-shine-b-ko18xvi755 2s infinite;
    }

@keyframes progress-shine-b-ko18xvi755 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.emp-progress-stats[b-ko18xvi755] {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

.emp-import-status[b-ko18xvi755] {
    margin-top: 0.5rem;
}

.emp-status-message[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--primary-light);
    border-radius: var(--emp-radius-md);
    color: var(--primary);
    font-size: 0.875rem;
    animation: pulse-primary-b-ko18xvi755 2s infinite;
}

.emp-import-cancel[b-ko18xvi755] {
    margin-top: 1rem;
    text-align: center;
}

/* Import Results Modal */
.emp-import-results[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.emp-results-summary[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.emp-result-stat[b-ko18xvi755] {
    padding: 1.25rem;
    border-radius: var(--emp-radius-md);
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: var(--emp-card-transition);
}

    .emp-result-stat:hover[b-ko18xvi755] {
        transform: translateY(-3px);
        box-shadow: var(--emp-shadow-sm);
    }

.emp-result-icon[b-ko18xvi755] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .emp-result-icon.success[b-ko18xvi755] {
        background-color: var(--success-light);
        color: var(--success);
        animation: pulse-success-icon-b-ko18xvi755 2s infinite;
    }

@keyframes pulse-success-icon-b-ko18xvi755 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

.emp-result-icon.error[b-ko18xvi755] {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: pulse-error-icon-b-ko18xvi755 2s infinite;
}

@keyframes pulse-error-icon-b-ko18xvi755 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--danger-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
    }
}

.emp-result-content[b-ko18xvi755] {
    flex: 1;
    overflow: hidden;
}

.emp-result-value[b-ko18xvi755] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-result-label[b-ko18xvi755] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.emp-success-imports[b-ko18xvi755],
.emp-failed-imports[b-ko18xvi755] {
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider);
}

    .emp-success-imports h4[b-ko18xvi755],
    .emp-failed-imports h4[b-ko18xvi755] {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .emp-success-imports h4[b-ko18xvi755]::before {
            content: '\f058'; /* Check circle icon */
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            color: var(--success);
        }

        .emp-failed-imports h4[b-ko18xvi755]::before {
            content: '\f057'; /* Times circle icon */
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            color: var(--danger);
        }

.emp-results-table[b-ko18xvi755] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-divider);
    border-radius: var(--emp-radius-md);
    overflow: hidden;
}

    .emp-results-table th[b-ko18xvi755] {
        text-align: left;
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
    }

    .emp-results-table td[b-ko18xvi755] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
        transition: background-color 0.15s ease;
    }

    .emp-results-table tr:hover td[b-ko18xvi755] {
        background-color: var(--bs-table-hover-bg);
        color: var(--text-primary);
    }

    .emp-results-table tr:last-child td[b-ko18xvi755] {
        border-bottom: none;
    }

.emp-more-results[b-ko18xvi755] {
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* JSON Data Viewer Styles */
.emp-json-data-container[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

.emp-json-data-header[b-ko18xvi755] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-divider);
}

    .emp-json-data-header h4[b-ko18xvi755] {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .emp-json-data-header p[b-ko18xvi755] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin: 0;
    }

.emp-json-data-sections[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.emp-json-section[b-ko18xvi755] {
    background-color: var(--subtle-bg);
    border-radius: var(--emp-radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-divider);
    transition: var(--emp-card-transition);
    animation: fade-in-b-ko18xvi755 0.4s ease;
}

    .emp-json-section:hover[b-ko18xvi755] {
        box-shadow: var(--emp-shadow-sm);
        border-color: rgba(var(--primary-rgb), 0.2);
        transform: translateY(-2px);
    }

    .emp-json-section h5[b-ko18xvi755] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-divider);
        color: var(--text-primary);
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .emp-json-section h5[b-ko18xvi755]::before {
            content: '\f15c'; /* File icon */
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            color: var(--primary);
            font-size: 0.875rem;
        }

.emp-json-fields[b-ko18xvi755] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.emp-json-field[b-ko18xvi755] {
    display: flex;
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.5rem;
    transition: background-color 0.15s ease;
    border-radius: var(--emp-radius-sm);
}

    .emp-json-field:hover[b-ko18xvi755] {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.emp-json-label[b-ko18xvi755] {
    width: 40%;
    font-weight: 500;
    color: var(--text-primary);
    padding-right: 1rem;
}

.emp-json-value[b-ko18xvi755] {
    width: 60%;
    color: var(--text-secondary);
    word-break: break-word;
    font-family: 'Roboto Mono', monospace;
}

    .emp-json-value:empty[b-ko18xvi755]::after {
        content: '—';
        color: var(--text-muted);
        opacity: 0.7;
    }

/* Toast Notification */
.emp-toast[b-ko18xvi755] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    box-shadow: var(--emp-shadow-lg);
    border-left: 4px solid var(--primary);
    max-width: 350px;
    width: 100%;
    z-index: var(--emp-z-index-toast);
    animation: toast-in-b-ko18xvi755 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes toast-in-b-ko18xvi755 {
    0% {
        transform: translateX(calc(100% + 2rem));
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.emp-toast.success[b-ko18xvi755] {
    border-left-color: var(--success);
}

.emp-toast.error[b-ko18xvi755] {
    border-left-color: var(--danger);
}

.emp-toast.warning[b-ko18xvi755] {
    border-left-color: var(--warning);
}

.emp-toast.info[b-ko18xvi755] {
    border-left-color: var(--info);
}

.emp-toast-icon[b-ko18xvi755] {
    font-size: 1.25rem;
    flex-shrink: 0;
    animation: notification-icon-pop-b-ko18xvi755 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.emp-toast.success .emp-toast-icon[b-ko18xvi755] {
    color: var(--success);
}

.emp-toast.error .emp-toast-icon[b-ko18xvi755] {
    color: var(--danger);
}

.emp-toast.warning .emp-toast-icon[b-ko18xvi755] {
    color: var(--warning);
}

.emp-toast.info .emp-toast-icon[b-ko18xvi755] {
    color: var(--info);
}

.emp-toast-content[b-ko18xvi755] {
    flex: 1;
    overflow: hidden;
}

    .emp-toast-content h4[b-ko18xvi755] {
        margin: 0 0 0.25rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .emp-toast-content p[b-ko18xvi755] {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

.emp-toast-close[b-ko18xvi755] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--emp-hover-transition);
}

    .emp-toast-close:hover[b-ko18xvi755] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .emp-toast-close:hover[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ====== Common Animations ====== */
@keyframes fade-in-b-ko18xvi755 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left-b-ko18xvi755 {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right-b-ko18xvi755 {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-top-b-ko18xvi755 {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom-b-ko18xvi755 {
    0% {
        transform: translateY(15px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-up-b-ko18xvi755 {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ripple-b-ko18xvi755 {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes pulse-primary-b-ko18xvi755 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes modal-in-b-ko18xvi755 {
    0% {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes spin-b-ko18xvi755 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes notification-icon-pop-b-ko18xvi755 {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce-b-ko18xvi755 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes subtle-gradient-b-ko18xvi755 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ====== Responsive Styles ====== */
@media (max-width: 1200px) {
    .emp-stats-card-icon[b-ko18xvi755] {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .emp-stats-value[b-ko18xvi755] {
        font-size: 1.5rem;
    }

    .emp-details-grid[b-ko18xvi755] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 992px) {
    .emp-importer-stats[b-ko18xvi755] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .emp-bulk-settings-grid[b-ko18xvi755] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .emp-details-grid[b-ko18xvi755] {
        grid-template-columns: 1fr 1fr;
    }

    .emp-form-grid[b-ko18xvi755] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .emp-importer-header[b-ko18xvi755] {
        padding: 1rem 1.25rem;
    }

    .emp-importer-header-content[b-ko18xvi755] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .emp-importer-header-actions[b-ko18xvi755] {
        width: 100%;
        justify-content: space-between;
    }

    .emp-importer-main-content[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-importer-filters[b-ko18xvi755] {
        flex-direction: column;
        align-items: flex-start;
    }

    .emp-search-container[b-ko18xvi755] {
        width: 100%;
    }

    .emp-filter-options[b-ko18xvi755] {
        width: 100%;
    }

    .emp-results-summary[b-ko18xvi755] {
        grid-template-columns: 1fr 1fr;
    }

    .emp-form-grid[b-ko18xvi755] {
        grid-template-columns: 1fr;
    }

    .emp-modal[b-ko18xvi755] {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }

    .emp-wizard-container[b-ko18xvi755] {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }

    .emp-wizard-steps[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-wizard-step-content[b-ko18xvi755] {
        padding: 1.5rem 1rem;
    }

    .emp-wizard-footer[b-ko18xvi755] {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .emp-importer-header[b-ko18xvi755] {
        padding: 0.875rem 1rem;
    }

    .emp-importer-header-title[b-ko18xvi755] {
        gap: 0.75rem;
    }

        .emp-importer-header-title i[b-ko18xvi755] {
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1.25rem;
        }

        .emp-importer-header-title h1[b-ko18xvi755] {
            font-size: 1.25rem;
        }

        .emp-importer-header-title p[b-ko18xvi755] {
            font-size: 0.75rem;
        }

    .emp-importer-header-actions[b-ko18xvi755] {
        gap: 0.5rem;
    }

    .emp-btn span[b-ko18xvi755] {
        display: none;
    }

    .emp-btn i[b-ko18xvi755] {
        margin: 0;
    }

    .emp-btn[b-ko18xvi755] {
        padding: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
    }

    .emp-modal-footer .emp-btn[b-ko18xvi755] {
        width: auto;
        padding: 0.625rem 1rem;
        border-radius: var(--emp-radius-md);
    }

        .emp-modal-footer .emp-btn span[b-ko18xvi755] {
            display: inline;
        }

    .emp-importer-stats[b-ko18xvi755] {
        grid-template-columns: 1fr 1fr;
    }

    .emp-stats-card[b-ko18xvi755] {
        padding: 0.875rem;
    }

    .emp-stats-card-icon[b-ko18xvi755] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .emp-stats-value[b-ko18xvi755] {
        font-size: 1.25rem;
    }

    .emp-stats-label[b-ko18xvi755] {
        font-size: 0.75rem;
    }

    .emp-bulk-preview-header[b-ko18xvi755] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .emp-bulk-preview-stats[b-ko18xvi755] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .emp-preview-stat[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-results-summary[b-ko18xvi755] {
        grid-template-columns: 1fr;
    }

    .emp-details-grid[b-ko18xvi755] {
        grid-template-columns: 1fr;
    }

    .emp-modal-body[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-modal-footer[b-ko18xvi755],
    .emp-wizard-footer[b-ko18xvi755] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }

        .emp-modal-footer .emp-btn[b-ko18xvi755],
        .emp-wizard-footer .emp-wizard-btn[b-ko18xvi755] {
            width: 100%;
            display: flex;
            justify-content: center;
        }

    .emp-results-table th[b-ko18xvi755],
    .emp-results-table td[b-ko18xvi755] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .emp-toast[b-ko18xvi755] {
        max-width: calc(100% - 2rem);
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    .emp-wizard-selection[b-ko18xvi755] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .emp-wizard-steps[b-ko18xvi755] {
        justify-content: center;
    }

    .emp-wizard-step-label[b-ko18xvi755] {
        display: none;
    }

    .emp-wizard-step[b-ko18xvi755] {
        margin-right: 1.5rem;
    }

        .emp-wizard-step[b-ko18xvi755]::after {
            right: -1rem;
            width: 0.75rem;
        }

    .emp-wizard-btn[b-ko18xvi755] {
        padding: 0.625rem 1rem;
    }
}

@media (max-width: 400px) {
    .emp-importer-header-title p[b-ko18xvi755] {
        display: none;
    }

    .emp-importer-stats[b-ko18xvi755] {
        grid-template-columns: 1fr;
    }

    .emp-stats-card[b-ko18xvi755] {
        flex-direction: row;
        align-items: center;
    }

    .emp-employees-table th:nth-child(3)[b-ko18xvi755],
    .emp-employees-table td:nth-child(3)[b-ko18xvi755],
    .emp-employees-table th:nth-child(6)[b-ko18xvi755],
    .emp-employees-table td:nth-child(6)[b-ko18xvi755] {
        display: none;
    }

    .emp-form-section[b-ko18xvi755] {
        padding: 1rem;
    }

        .emp-form-section h4[b-ko18xvi755] {
            font-size: 0.9375rem;
        }

    .emp-modal-header[b-ko18xvi755],
    .emp-wizard-header[b-ko18xvi755] {
        padding: 0.875rem 1rem;
    }

        .emp-modal-header h3[b-ko18xvi755],
        .emp-wizard-title[b-ko18xvi755] {
            font-size: 1.125rem;
        }

    .emp-detail-missing[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-wizard-step-number[b-ko18xvi755] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .emp-wizard-option-icon[b-ko18xvi755] {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.5rem;
    }
}

/* ====== Dark Theme Adjustments ====== */
.theme-dark .emp-search-bar input[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .emp-toast-close:hover[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .emp-modal-close:hover[b-ko18xvi755],
.theme-dark .emp-wizard-close:hover[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .emp-toast[b-ko18xvi755] {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.theme-dark .emp-checkbox label[b-ko18xvi755]::before {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .emp-modal[b-ko18xvi755]::before,
.theme-dark .emp-wizard-container[b-ko18xvi755]::before {
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}

.theme-dark .emp-switch label[b-ko18xvi755]::after {
    background-color: rgba(255, 255, 255, 0.9);
}

.theme-dark .emp-progress-bar[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .emp-json-value[b-ko18xvi755] {
    color: rgba(255, 255, 255, 0.8);
}

.theme-dark .emp-json-field:hover[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .emp-wizard-change-btn[b-ko18xvi755] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.theme-dark .emp-wizard-option:hover[b-ko18xvi755] {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Enhanced Modal Animation and Transitions */
.emp-modal[b-ko18xvi755],
.emp-wizard-container[b-ko18xvi755] {
    will-change: transform, opacity;
}

    .emp-modal:focus[b-ko18xvi755],
    .emp-wizard-container:focus[b-ko18xvi755] {
        outline: none;
    }

/* More elaborate background for overlays */
.emp-modal-overlay[b-ko18xvi755],
.emp-wizard-overlay[b-ko18xvi755] {
    background-image: radial-gradient( circle at center, rgba(26, 32, 36, 0.6) 0%, rgba(26, 32, 36, 0.75) 100% );
}

/* Enhanced focus styles for accessibility */
.emp-btn:focus[b-ko18xvi755],
.emp-wizard-btn:focus[b-ko18xvi755],
.emp-form-control:focus[b-ko18xvi755],
.emp-wizard-form-group input:focus[b-ko18xvi755],
.emp-wizard-form-group select:focus[b-ko18xvi755] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}

/* Enhanced table row hover animations */
.emp-employees-table tbody tr[b-ko18xvi755],
.emp-results-table tr[b-ko18xvi755] {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

    .emp-employees-table tbody tr:hover[b-ko18xvi755],
    .emp-results-table tr:hover[b-ko18xvi755] {
        transform: translateX(2px);
    }

/* Enhanced button hover effects */
.emp-btn:hover i[b-ko18xvi755],
.emp-wizard-btn:hover i[b-ko18xvi755] {
    animation: icon-wiggle-b-ko18xvi755 0.5s ease;
}

@keyframes icon-wiggle-b-ko18xvi755 {
    0%, 100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

/* Improve loading animation */
@keyframes loading-rotation-b-ko18xvi755 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced progress bar for import */
.emp-progress-fill[b-ko18xvi755] {
    background-size: 200% 200%;
    animation: gradient-shift-b-ko18xvi755 2s ease infinite;
}

@keyframes gradient-shift-b-ko18xvi755 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Accessibility improvements */
.emp-status-badge[b-ko18xvi755],
.emp-badge[b-ko18xvi755] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Print styles for reports */
@media print {
    .emp-importer-container[b-ko18xvi755] {
        background: white !important;
    }

    .emp-importer-header[b-ko18xvi755],
    .emp-importer-filters[b-ko18xvi755],
    .emp-btn[b-ko18xvi755],
    .emp-wizard-btn[b-ko18xvi755],
    .emp-modal-close[b-ko18xvi755],
    .emp-wizard-close[b-ko18xvi755],
    .emp-toast[b-ko18xvi755] {
        display: none !important;
    }

    .emp-employees-table[b-ko18xvi755],
    .emp-results-table[b-ko18xvi755] {
        border: 1px solid #ddd !important;
    }

        .emp-employees-table th[b-ko18xvi755],
        .emp-results-table th[b-ko18xvi755] {
            background-color: #f9f9f9 !important;
            color: #000 !important;
        }

        .emp-employees-table td[b-ko18xvi755],
        .emp-results-table td[b-ko18xvi755] {
            color: #000 !important;
        }
}


.emp-modal-overlay[b-ko18xvi755] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: var(--emp-z-index-modal-1); /* Base modal z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in-b-ko18xvi755 0.25s ease;
    padding: 1.25rem;
    transition: opacity 0.3s ease;
}

    /* Missing fields modal should appear above position assignment modal */
    .emp-modal-overlay:has(.emp-missing-fields-info)[b-ko18xvi755] {
        z-index: var(--emp-z-index-modal-3); /* Higher z-index for missing fields dialog */
    }

/* Fix for missing data row - only show red background when company is missing */
.emp-missing-data-row[b-ko18xvi755] {
    background-color: rgba(var(--danger-rgb), 0.05);
}


/* Add missing fields indicator for only required fields */
.emp-required-field[b-ko18xvi755] {
    position: relative;
}

    .emp-required-field[b-ko18xvi755]::after {
        content: '*';
        color: var(--danger);
        margin-left: 4px;
    }

/* Add these CSS fixes to EmployeeMainImporter.razor.css */

/* Fix for overlapping modal dialogs */
.emp-modal-overlay[b-ko18xvi755] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: var(--emp-z-index-modal-1); /* Base modal z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in-b-ko18xvi755 0.25s ease;
    padding: 1.25rem;
    transition: opacity 0.3s ease;
}

    /* Position assignment modal should be highest priority */
    .emp-modal-overlay:has(.emp-position-assignment-info)[b-ko18xvi755] {
        z-index: var(--emp-z-index-modal-3); /* Highest z-index for position assignment dialog */
    }

    /* Missing fields modal should also have high priority */
    .emp-modal-overlay:has(.emp-missing-fields-info)[b-ko18xvi755] {
        z-index: var(--emp-z-index-modal-2); /* High z-index for missing fields dialog */
    }

/* Fix for missing data row - only show red background when company is missing */
.emp-missing-data-row[b-ko18xvi755] {
    background-color: rgba(var(--danger-rgb), 0.05);
}



/* Add missing fields indicator for only required fields */
.emp-required-field[b-ko18xvi755] {
    position: relative;
}

    .emp-required-field[b-ko18xvi755]::after {
        content: '*';
        color: var(--danger);
        margin-left: 4px;
    }
/* ====== Position Assignment Dialog Styling ====== */

/* Position assignment info panel */
.emp-position-assignment-info[b-ko18xvi755] {
    padding: 1.25rem;
    background-color: var(--primary-light);
    border-radius: var(--emp-radius-md);
    border-left: 4px solid var(--primary);
    margin-bottom: 1.5rem;
    animation: fade-in-b-ko18xvi755 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.1);
}

    .emp-position-assignment-info p[b-ko18xvi755] {
        margin: 0 0 0.5rem 0;
        color: var(--text-secondary);
        font-size: 0.9375rem;
    }

        .emp-position-assignment-info p strong[b-ko18xvi755] {
            color: var(--text-primary);
            font-weight: 600;
        }

/* Info row layout */
.emp-info-row[b-ko18xvi755] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.1);
}

    .emp-info-row:last-child[b-ko18xvi755] {
        border-bottom: none;
    }

.emp-info-label[b-ko18xvi755] {
    width: 40%;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.emp-info-value[b-ko18xvi755] {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Badge styling for employee info */
.emp-badge[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--emp-radius-full);
    white-space: nowrap;
    transition: transform 0.2s ease;
}

    .emp-badge:hover[b-ko18xvi755] {
        transform: translateY(-1px);
    }

.emp-badge-primary[b-ko18xvi755] {
    background-color: var(--primary-light);
    color: var(--primary);
}

.emp-badge-success[b-ko18xvi755] {
    background-color: var(--success-light);
    color: var(--success);
}

.emp-badge-info[b-ko18xvi755] {
    background-color: var(--info-light);
    color: var(--info);
}

.emp-badge-warning[b-ko18xvi755] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.emp-badge-danger[b-ko18xvi755] {
    background-color: var(--danger-light);
    color: var(--danger);
}

/* Divider styling */
.emp-divider[b-ko18xvi755] {
    border: none;
    height: 1px;
    background: var(--border-divider);
    margin: 1.5rem 0;
    position: relative;
}

    .emp-divider[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: var(--primary-gradient);
        border-radius: 3px;
    }

/* Form grid specific to position assignment */
.emp-form-grid[b-ko18xvi755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Additional styles for mt-3 utility class */
.mt-3[b-ko18xvi755] {
    margin-top: 1.5rem;
}

/* Dark theme adjustments */
.theme-dark .emp-position-assignment-info[b-ko18xvi755] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.theme-dark .emp-divider[b-ko18xvi755]::before {
    box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.5);
}

.theme-dark .emp-info-row[b-ko18xvi755] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Responsive styles */
@media (max-width: 768px) {
    .emp-info-row[b-ko18xvi755] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .emp-info-label[b-ko18xvi755],
    .emp-info-value[b-ko18xvi755] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .emp-position-assignment-info[b-ko18xvi755] {
        padding: 1rem;
    }

    .emp-form-grid[b-ko18xvi755] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Data Source Selector Card */
.emp-data-source-card[b-ko18xvi755] {
    background-color: var(--content-bg);
    border-radius: var(--emp-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--emp-card-transition);
    box-shadow: var(--emp-shadow-sm);
    animation: fade-in-up-b-ko18xvi755 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 0.1s);
    position: relative;
    overflow: hidden;
    grid-column: span 2
}

    .emp-data-source-card[b-ko18xvi755]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .emp-data-source-card:hover[b-ko18xvi755] {
        transform: translateY(-4px);
        box-shadow: var(--emp-shadow-md);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

        .emp-data-source-card:hover[b-ko18xvi755]::before {
            opacity: 1;
        }

.emp-data-source-icon[b-ko18xvi755] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--emp-radius-lg);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-position: center;
    background-size: 200% 200%;
    animation: subtle-gradient-b-ko18xvi755 8s ease infinite;
    background-image: linear-gradient(135deg, var(--info-light) 0%, rgba(var(--info-rgb), 0.15) 100%);
    color: var(--info);
    box-shadow: 0 4px 12px rgba(var(--info-rgb), 0.12);
}

.emp-data-source-card:hover .emp-data-source-icon[b-ko18xvi755] {
    transform: scale(1.08);
}

.emp-data-source-content[b-ko18xvi755] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;

}

.emp-data-source-title[b-ko18xvi755] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.emp-data-source-options[b-ko18xvi755] {
    display: flex;
    gap: 0.75rem;
}

.emp-source-option[b-ko18xvi755] {
    position: relative;
    cursor: pointer;
}

    .emp-source-option input[type="radio"][b-ko18xvi755] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .emp-source-option label[b-ko18xvi755] {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        background-color: var(--subtle-bg);
        border: 1px solid var(--border-divider);
        border-radius: var(--emp-radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
        transition: var(--emp-hover-transition);
        cursor: pointer;
    }

    .emp-source-option input[type="radio"]:checked + label[b-ko18xvi755] {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
    }

        .emp-source-option input[type="radio"]:checked + label[b-ko18xvi755]::before {
            content: '\f00c';
            font-family: 'Font Awesome 5 Pro';
            font-weight: 900;
            margin-right: 0.5rem;
            font-size: 0.75rem;
        }

/* Source count badge styling */
.emp-source-count[b-ko18xvi755] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    margin-left: 0.5rem;
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    border-radius: var(--emp-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    transition: var(--emp-hover-transition);
}

    .emp-source-count.active[b-ko18xvi755] {
        background-color: rgba(255, 255, 255, 0.3);
        color: white;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

.emp-source-option:hover label[b-ko18xvi755] {
    transform: translateY(-2px);
    box-shadow: var(--emp-shadow-sm);
}

/* Responsive styles */
@media (max-width: 768px) {
    .emp-data-source-options[b-ko18xvi755] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .emp-data-source-card[b-ko18xvi755] {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .emp-data-source-icon[b-ko18xvi755] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeMedicalInfo.razor.rz.scp.css */
/* ====== Employee Medical Records Styling ====== */

/* Form Section Container */
.em-form-section[b-hiqwue6t6r] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-hiqwue6t6r 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-hiqwue6t6r] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-hiqwue6t6r]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-hiqwue6t6r]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-hiqwue6t6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-hiqwue6t6r]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-hiqwue6t6r]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-hiqwue6t6r] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--info), var(--primary));
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-hiqwue6t6r] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-section-actions[b-hiqwue6t6r] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-hiqwue6t6r] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-hiqwue6t6r 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-hiqwue6t6r 0.5s ease both;
}

    .em-empty-state > i[b-hiqwue6t6r] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .em-empty-state:hover > i[b-hiqwue6t6r] {
        transform: translateY(-8px);
        color: var(--info);
        opacity: 1;
    }

    .em-empty-state h3[b-hiqwue6t6r] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-hiqwue6t6r] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-hiqwue6t6r] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Requirements Section Styling */
.em-requirements-section[b-hiqwue6t6r] {
    margin-bottom: 1.5rem;
    animation: fade-in-b-hiqwue6t6r 0.4s ease-out;
}

.em-subsection-title[b-hiqwue6t6r] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.875rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-subsection-title[b-hiqwue6t6r]::before {
        content: '';
        width: 3px;
        height: 1rem;
        background-color: var(--info);
        border-radius: var(--border-radius-pill);
    }

.em-requirements-content[b-hiqwue6t6r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.em-requirement-card[b-hiqwue6t6r] {
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    padding: 1rem;
    transition: all 0.3s ease;
}

    .em-requirement-card:hover[b-hiqwue6t6r] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-sm);
    }

.em-requirement-header[b-hiqwue6t6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.em-requirement-title[b-hiqwue6t6r] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-requirement-title i[b-hiqwue6t6r] {
        color: var(--primary);
    }

.em-requirement-badge[b-hiqwue6t6r] {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
}

    .em-requirement-badge.em-status-active[b-hiqwue6t6r] {
        background-color: var(--success-light);
        color: var(--success);
    }

    .em-requirement-badge.em-status-expired[b-hiqwue6t6r] {
        background-color: var(--danger-light);
        color: var(--danger);
    }

    .em-requirement-badge.em-status-info[b-hiqwue6t6r] {
        background-color: var(--info-light);
        color: var(--info);
    }

.em-requirement-details[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .em-requirement-details div[b-hiqwue6t6r] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

.em-frequency i[b-hiqwue6t6r],
.em-compliance-status i[b-hiqwue6t6r],
.em-next-due i[b-hiqwue6t6r] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.em-compliance-status.em-not-compliant[b-hiqwue6t6r] {
    color: var(--danger);
}

    .em-compliance-status.em-not-compliant i[b-hiqwue6t6r] {
        color: var(--danger);
    }

.em-schedule-action[b-hiqwue6t6r] {
    margin-top: 0.25rem;
}

/* Medical Summary Cards */
.em-induction-summary[b-hiqwue6t6r] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.em-summary-card[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 190px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-hiqwue6t6r 0.4s ease both;
}

    .em-summary-card:nth-child(1)[b-hiqwue6t6r] {
        animation-delay: 0.1s;
    }

    .em-summary-card:nth-child(2)[b-hiqwue6t6r] {
        animation-delay: 0.2s;
    }

    .em-summary-card:nth-child(3)[b-hiqwue6t6r] {
        animation-delay: 0.3s;
    }

    .em-summary-card:nth-child(4)[b-hiqwue6t6r] {
        animation-delay: 0.4s;
    }

    .em-summary-card:nth-child(5)[b-hiqwue6t6r] {
        animation-delay: 0.5s;
    }

    .em-summary-card:hover[b-hiqwue6t6r] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.success[b-hiqwue6t6r] {
        border-left: 3px solid var(--success);
    }

    .em-summary-card.warning[b-hiqwue6t6r] {
        border-left: 3px solid var(--warning);
    }

    .em-summary-card.danger[b-hiqwue6t6r] {
        border-left: 3px solid var(--danger);
    }

    .em-summary-card.primary[b-hiqwue6t6r] {
        border-left: 3px solid var(--primary);
    }

    .em-summary-card.info[b-hiqwue6t6r] {
        border-left: 3px solid var(--info);
    }

.em-summary-icon[b-hiqwue6t6r] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

    .em-summary-icon.warning[b-hiqwue6t6r] {
        background-color: var(--warning-light);
        color: var(--warning);
        box-shadow: 0 3px 6px rgba(var(--warning-rgb), 0.1);
    }

    .em-summary-icon.danger[b-hiqwue6t6r] {
        background-color: var(--danger-light);
        color: var(--danger);
        box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.1);
    }

    .em-summary-icon.primary[b-hiqwue6t6r] {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.1);
    }

    .em-summary-icon.success[b-hiqwue6t6r] {
        background-color: var(--success-light);
        color: var(--success);
        box-shadow: 0 3px 6px rgba(var(--success-rgb), 0.1);
    }

    .em-summary-icon.info[b-hiqwue6t6r] {
        background-color: var(--info-light);
        color: var(--info);
        box-shadow: 0 3px 6px rgba(var(--info-rgb), 0.1);
    }

.em-summary-card:hover .em-summary-icon[b-hiqwue6t6r] {
    transform: scale(1.1) rotate(10deg);
}

.em-summary-content[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-hiqwue6t6r] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-hiqwue6t6r] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Filters Bar */
.em-filters-bar[b-hiqwue6t6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.em-status-filters[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.em-status-filter[b-hiqwue6t6r] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .em-status-filter:hover[b-hiqwue6t6r] {
        color: var(--primary);
    }

    .em-status-filter.active[b-hiqwue6t6r] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

.em-search-field[b-hiqwue6t6r] {
    position: relative;
    min-width: 220px;
    flex-grow: 1;
    max-width: 350px;
}

    .em-search-field input[b-hiqwue6t6r] {
        width: 100%;
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-hiqwue6t6r] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

    .em-search-field i[b-hiqwue6t6r] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.25s ease;
    }

    .em-search-field input:focus + i[b-hiqwue6t6r] {
        color: var(--primary);
    }

.em-clear-search[b-hiqwue6t6r] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .em-clear-search:hover[b-hiqwue6t6r] {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-50%) rotate(90deg);
    }

/* Table Container */
.em-table-container[b-hiqwue6t6r] {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    animation: fade-in-b-hiqwue6t6r 0.5s ease both;
    animation-delay: 0.2s;
}

/* Medical Data Table */
.em-data-table[b-hiqwue6t6r] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

    .em-data-table th[b-hiqwue6t6r] {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0.6875rem 0.875rem;
        text-align: left;
        font-weight: 600;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .em-data-table td[b-hiqwue6t6r] {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--border-divider);
        vertical-align: middle;
    }

    .em-data-table tr:hover[b-hiqwue6t6r] {
        background-color: var(--subtle-bg);
    }

    .em-data-table tr:last-child td[b-hiqwue6t6r] {
        border-bottom: none;
    }

.em-inactive-row[b-hiqwue6t6r] {
    background-color: rgba(0, 0, 0, 0.02);
}

    .em-inactive-row td[b-hiqwue6t6r] {
        opacity: 0.7;
    }

.em-scheduled-row[b-hiqwue6t6r] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.em-row-expiring[b-hiqwue6t6r] {
    background-color: rgba(var(--warning-rgb), 0.05);
}

.em-renewed-row[b-hiqwue6t6r] {
    background-color: rgba(var(--info-rgb), 0.05);
}

/* Medical Type Styling */
.em-medical-type[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-medical-type i[b-hiqwue6t6r] {
        color: var(--info);
        font-size: 1rem;
    }

/* Status Pills */
.em-status-pill[b-hiqwue6t6r] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.em-status-active[b-hiqwue6t6r] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-expired[b-hiqwue6t6r] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-status-pending[b-hiqwue6t6r] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-status-default[b-hiqwue6t6r] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-status-renewed[b-hiqwue6t6r] {
    background-color: var(--info-light);
    color: var(--info);
}

/* Expiry Badges */
.em-expired-badge[b-hiqwue6t6r], .em-expiring-badge[b-hiqwue6t6r], .em-renewed-badge[b-hiqwue6t6r] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    margin-left: 0.375rem;
}

.em-expired-badge[b-hiqwue6t6r] {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: pulse-danger-b-hiqwue6t6r 2s infinite;
}

.em-expiring-badge[b-hiqwue6t6r] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-renewed-badge[b-hiqwue6t6r] {
    background-color: var(--info-light);
    color: var(--info);
}

/* Record Actions */
.em-record-actions[b-hiqwue6t6r] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Text Utilities */
.em-text-muted[b-hiqwue6t6r] {
    color: var(--text-muted);
    font-style: italic;
}

/* File Upload Styling - UNIFIED VERSION */
.em-file-upload[b-hiqwue6t6r] {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.em-file-input[b-hiqwue6t6r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.em-file-label[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--content-bg);
    border: 2px dashed var(--border-divider);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .em-file-label[b-hiqwue6t6r]::before {
        content: "\f574"; /* File icon in FontAwesome */
        font-family: "Font Awesome 5 Pro";
        margin-right: 0.625rem;
        font-size: 1rem;
        color: var(--primary);
    }

.em-file-upload:hover .em-file-label[b-hiqwue6t6r] {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* File Preview Styling */
.em-file-preview[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--subtle-bg);
    transition: all 0.3s ease;
}

    .em-file-preview:hover[b-hiqwue6t6r] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.em-file-preview-icon[b-hiqwue6t6r] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: var(--border-radius-sm);
    margin-right: 0.75rem;
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

.em-file-preview-details[b-hiqwue6t6r] {
    flex: 1;
}

.em-file-preview-name[b-hiqwue6t6r] {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    word-break: break-word;
}

.em-file-preview-meta[b-hiqwue6t6r] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-file-preview-actions[b-hiqwue6t6r] {
    display: flex;
    gap: 0.5rem;
}

.em-file-action[b-hiqwue6t6r] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .em-file-action:hover[b-hiqwue6t6r] {
        background-color: var(--primary-light);
        color: var(--primary);
        transform: translateY(-2px);
    }

/* Modal Styles */
.em-modal-overlay[b-hiqwue6t6r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-hiqwue6t6r 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-hiqwue6t6r] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-hiqwue6t6r 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-lg[b-hiqwue6t6r] {
    max-width: 900px;
}

.em-modal-header[b-hiqwue6t6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header[b-hiqwue6t6r]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
    }

    .em-modal-header h3[b-hiqwue6t6r] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-header-actions[b-hiqwue6t6r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-modal-close[b-hiqwue6t6r] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-hiqwue6t6r] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-hiqwue6t6r] {
    padding: 1.5rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-hiqwue6t6r] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Styles */
.em-form-group[b-hiqwue6t6r] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-hiqwue6t6r] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-hiqwue6t6r] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-hiqwue6t6r]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-hiqwue6t6r]::before,
    .em-form-group:has(select:not([value=""])) label[b-hiqwue6t6r]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-hiqwue6t6r]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-hiqwue6t6r] {
        color: var(--primary);
    }

    .em-form-group input[b-hiqwue6t6r],
    .em-form-group select[b-hiqwue6t6r],
    .em-form-group textarea[b-hiqwue6t6r] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-hiqwue6t6r],
        .em-form-group select:focus[b-hiqwue6t6r],
        .em-form-group textarea:focus[b-hiqwue6t6r] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-hiqwue6t6r],
        .em-form-group select:hover[b-hiqwue6t6r],
        .em-form-group textarea:hover[b-hiqwue6t6r] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-hiqwue6t6r],
        .em-form-group textarea:not(:placeholder-shown)[b-hiqwue6t6r],
        .em-form-group select:not([value=""])[b-hiqwue6t6r] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

        /* Placeholder animation */
        .em-form-group input[b-hiqwue6t6r]::placeholder,
        .em-form-group textarea[b-hiqwue6t6r]::placeholder {
            color: var(--text-muted);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .em-form-group input:focus[b-hiqwue6t6r]::placeholder,
        .em-form-group textarea:focus[b-hiqwue6t6r]::placeholder {
            transform: translateY(-10px);
            opacity: 0;
        }

.em-form-row[b-hiqwue6t6r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-required[b-hiqwue6t6r] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-hiqwue6t6r 2s infinite;
}

.em-input-error[b-hiqwue6t6r] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-hiqwue6t6r] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-hiqwue6t6r] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-hiqwue6t6r 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-hiqwue6t6r]::before {
        content: "⚠";
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

.em-form-help[b-hiqwue6t6r] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-hiqwue6t6r] {
    color: var(--text-secondary);
}

/* File Viewer Modal */
.em-file-viewer[b-hiqwue6t6r] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    min-height: 60vh;
}

.em-file-viewer-content[b-hiqwue6t6r] {
    max-width: 100%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-file-image[b-hiqwue6t6r] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.em-file-pdf[b-hiqwue6t6r] {
    width: 100%;
    height: 70vh;
    border: none;
    box-shadow: var(--shadow-md);
}

.em-file-generic[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

    .em-file-generic i[b-hiqwue6t6r] {
        margin-bottom: 1rem;
        color: var(--text-muted);
    }

/* Confirmation Modal */
.em-confirmation-content[b-hiqwue6t6r] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.em-confirmation-icon[b-hiqwue6t6r] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .em-confirmation-icon.warning[b-hiqwue6t6r] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .em-confirmation-icon.success[b-hiqwue6t6r] {
        background-color: var(--success-light);
        color: var(--success);
    }

/* Induction Timeline */
.em-induction-timeline[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
    position: relative;
}

    .em-induction-timeline[b-hiqwue6t6r]::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--border-divider);
        z-index: 0;
    }

.em-timeline-item[b-hiqwue6t6r] {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-left: 2.5rem;
    animation: slide-in-right-b-hiqwue6t6r 0.4s ease both;
}

    .em-timeline-item:nth-child(1)[b-hiqwue6t6r] {
        animation-delay: 0.1s;
    }

    .em-timeline-item:nth-child(2)[b-hiqwue6t6r] {
        animation-delay: 0.2s;
    }

    .em-timeline-item:nth-child(3)[b-hiqwue6t6r] {
        animation-delay: 0.3s;
    }

.em-timeline-icon[b-hiqwue6t6r] {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--content-bg);
    border: 2px solid var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    z-index: 1;
    transition: all 0.3s ease;
}

.em-timeline-item:hover .em-timeline-icon[b-hiqwue6t6r] {
    transform: scale(1.1);
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.em-timeline-item.completed .em-timeline-icon[b-hiqwue6t6r] {
    border-color: var(--success);
    color: var(--success);
}

.em-timeline-item.failed .em-timeline-icon[b-hiqwue6t6r] {
    border-color: var(--danger);
    color: var(--danger);
}

.em-timeline-item.expired .em-timeline-icon[b-hiqwue6t6r] {
    border-color: var(--warning);
    color: var(--warning);
}

.em-timeline-item.renewed .em-timeline-icon[b-hiqwue6t6r] {
    border-color: var(--info);
    color: var(--info);
}

.em-timeline-item.renewed[b-hiqwue6t6r] {
    opacity: 0.8;
}

.em-timeline-content[b-hiqwue6t6r] {
    flex: 1;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    position: relative;
    transition: all 0.3s ease;
}

    .em-timeline-content:hover[b-hiqwue6t6r] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.em-timeline-header[b-hiqwue6t6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.em-timeline-date[b-hiqwue6t6r] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-timeline-details[b-hiqwue6t6r] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.em-timeline-detail[b-hiqwue6t6r] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-detail-label[b-hiqwue6t6r] {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 5rem;
}

/* Alert Styles */
.em-alert[b-hiqwue6t6r] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    animation: fade-in-b-hiqwue6t6r 0.3s ease;
}

.em-alert-info[b-hiqwue6t6r] {
    background-color: var(--info-light);
    border-left: 3px solid var(--info);
}

.em-alert-warning[b-hiqwue6t6r] {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
}

.em-alert i[b-hiqwue6t6r] {
    color: var(--info);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert-warning i[b-hiqwue6t6r] {
    color: var(--warning);
}

.em-alert h4[b-hiqwue6t6r] {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-hiqwue6t6r] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Toast Notification */
.em-toast[b-hiqwue6t6r] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-hiqwue6t6r 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-hiqwue6t6r] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-hiqwue6t6r] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-hiqwue6t6r] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-hiqwue6t6r] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-hiqwue6t6r] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-hiqwue6t6r] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-hiqwue6t6r] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-hiqwue6t6r] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-hiqwue6t6r] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-hiqwue6t6r] {
    flex: 1;
}

.em-toast-title[b-hiqwue6t6r] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-hiqwue6t6r] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-hiqwue6t6r] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-hiqwue6t6r] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-hiqwue6t6r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-hiqwue6t6r] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-hiqwue6t6r] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-hiqwue6t6r] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-hiqwue6t6r] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-hiqwue6t6r] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-hiqwue6t6r] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-hiqwue6t6r] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-hiqwue6t6r] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-hiqwue6t6r] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-hiqwue6t6r] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .em-btn-icon.em-btn-sm[b-hiqwue6t6r] {
        width: 2rem;
        height: 2rem;
    }

.em-btn:disabled[b-hiqwue6t6r] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn-bounce-hover:hover[b-hiqwue6t6r] {
    animation: bounce-b-hiqwue6t6r 0.75s;
}

/* Animations */
@keyframes fade-in-b-hiqwue6t6r {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-hiqwue6t6r {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-hiqwue6t6r {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-hiqwue6t6r {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-hiqwue6t6r {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-hiqwue6t6r {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-hiqwue6t6r {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-hiqwue6t6r {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-hiqwue6t6r {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-hiqwue6t6r {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes bounce-b-hiqwue6t6r {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-induction-summary[b-hiqwue6t6r] {
        flex-wrap: wrap;
    }

    .em-summary-card[b-hiqwue6t6r] {
        min-width: 160px;
    }

    .em-form-row[b-hiqwue6t6r] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .em-filters-bar[b-hiqwue6t6r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-status-filters[b-hiqwue6t6r] {
        width: 100%;
        overflow-x: auto;
    }

    .em-search-field[b-hiqwue6t6r] {
        width: 100%;
        max-width: none;
    }

    .em-modal[b-hiqwue6t6r] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-hiqwue6t6r] {
        max-height: calc(100vh - 170px);
    }
}

@media (max-width: 576px) {
    .em-form-section[b-hiqwue6t6r] {
        padding: 1rem;
    }

    .em-section-header[b-hiqwue6t6r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-hiqwue6t6r] {
        width: 100%;
        justify-content: space-between;
    }

    .em-record-actions[b-hiqwue6t6r] {
        justify-content: center;
    }

    .em-modal-footer[b-hiqwue6t6r] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-hiqwue6t6r] {
            width: 100%;
        }

    .em-toast[b-hiqwue6t6r] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-form-group label[b-hiqwue6t6r] {
        padding-left: 0;
    }

        .em-form-group label[b-hiqwue6t6r]::before {
            display: none;
        }

    .em-form-help[b-hiqwue6t6r],
    .em-error-message[b-hiqwue6t6r] {
        padding-left: 0;
    }

    .em-timeline-item[b-hiqwue6t6r] {
        padding-left: 2rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeePayInfo.razor.rz.scp.css */
/* ====== Employee Compensation Styles ====== */

/* Form Section Container */
.em-form-section[b-6jyydcv6rd] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--card-transition);
    animation: fade-in-up-b-6jyydcv6rd 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-6jyydcv6rd] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-6jyydcv6rd]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--success), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-6jyydcv6rd]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-6jyydcv6rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-6jyydcv6rd]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--success) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-6jyydcv6rd]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-6jyydcv6rd] {
        color: var(--success);
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--success-light);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
    }

.em-form-section:hover .em-section-title i[b-6jyydcv6rd] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--success-rgb), 0.2);
}

.em-section-actions[b-6jyydcv6rd] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-6jyydcv6rd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-6jyydcv6rd] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--success-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--success);
    animation: spin-b-6jyydcv6rd 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-6jyydcv6rd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-6jyydcv6rd 0.5s ease both;
}

    .em-empty-state > i[b-6jyydcv6rd] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-6jyydcv6rd] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-6jyydcv6rd] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-6jyydcv6rd] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Compensation Summary Cards */
.em-compensation-summary[b-6jyydcv6rd] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    animation: fade-in-up-b-6jyydcv6rd 0.5s ease both;
}

.em-summary-card[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 200px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-6jyydcv6rd 0.4s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

    .em-summary-card:nth-child(1)[b-6jyydcv6rd] {
        --card-index: 1;
    }

    .em-summary-card:nth-child(2)[b-6jyydcv6rd] {
        --card-index: 2;
    }

    .em-summary-card:nth-child(3)[b-6jyydcv6rd] {
        --card-index: 3;
    }

    .em-summary-card:hover[b-6jyydcv6rd] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: rgba(var(--success-rgb), 0.3);
    }

.em-summary-icon[b-6jyydcv6rd] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--info-light);
    color: var(--info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.em-summary-card:hover .em-summary-icon[b-6jyydcv6rd] {
    transform: scale(1.1) rotate(10deg);
    background-color: var(--info);
    color: white;
}

.em-summary-content[b-6jyydcv6rd] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-6jyydcv6rd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-6jyydcv6rd] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Pay Filters */
.em-pay-filters[b-6jyydcv6rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: fade-in-down-b-6jyydcv6rd 0.4s ease both;
}

.em-status-filters[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
}

.em-status-filter[b-6jyydcv6rd] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-status-filter:hover[b-6jyydcv6rd] {
        color: var(--success);
    }

    .em-status-filter.active[b-6jyydcv6rd] {
        background-color: var(--success);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--success-rgb), 0.25);
    }

.em-sort-dropdown[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-sort-dropdown span[b-6jyydcv6rd] {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .em-sort-dropdown select[b-6jyydcv6rd] {
        padding: 0.4rem 1.75rem 0.4rem 0.625rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-weight: 500;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 0.85em;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .em-sort-dropdown select:focus[b-6jyydcv6rd] {
            outline: none;
            border-color: var(--success);
            box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.25);
        }

/* Table Styles */
.em-table-container[b-6jyydcv6rd] {
    overflow-x: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    animation: fade-in-up-b-6jyydcv6rd 0.5s ease both;
    animation-delay: 0.2s;
}

.em-data-table[b-6jyydcv6rd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .em-data-table th[b-6jyydcv6rd] {
        text-align: left;
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-weight: 600;
        border-bottom: 1px solid var(--border-divider);
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .em-data-table td[b-6jyydcv6rd] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-divider);
        color: var(--text-secondary);
        vertical-align: middle;
        font-size: 0.875rem;
    }

    .em-data-table tbody tr:last-child td[b-6jyydcv6rd] {
        border-bottom: none;
    }

    .em-data-table tbody tr[b-6jyydcv6rd] {
        transition: all 0.2s ease;
    }

        .em-data-table tbody tr:hover[b-6jyydcv6rd] {
            background-color: var(--success-light);
        }

/* Amount Cell */
.em-amount-cell[b-6jyydcv6rd] {
    font-weight: 600;
    color: var(--text-primary) !important;
    text-align: right;
}

/* Row Styles */
.em-row-active[b-6jyydcv6rd] {
    background-color: rgba(var(--success-rgb), 0.05);
}

    .em-row-active:hover[b-6jyydcv6rd] {
        background-color: rgba(var(--success-rgb), 0.1) !important;
    }

/* Allowances */
.em-allowances[b-6jyydcv6rd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.em-allowance-item[b-6jyydcv6rd] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.em-allowance-type[b-6jyydcv6rd] {
    color: var(--text-muted);
}

.em-allowance-value[b-6jyydcv6rd] {
    font-weight: 500;
    color: var(--text-secondary);
}

.em-allowance-total[b-6jyydcv6rd] {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border-divider);
}

    .em-allowance-total .em-allowance-type[b-6jyydcv6rd] {
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-allowance-total .em-allowance-value[b-6jyydcv6rd] {
        font-weight: 600;
        color: var(--success);
    }

/* Status Pill */
.em-status-pill[b-6jyydcv6rd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.em-status-active[b-6jyydcv6rd] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-closed[b-6jyydcv6rd] {
    background-color: var(--text-light);
    color: var(--text-muted);
}

/* Action Buttons */
.em-pay-actions[b-6jyydcv6rd] {
    display: flex;
    gap: 0.375rem;
}

/* Modal Styles */
.em-modal-overlay[b-6jyydcv6rd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-6jyydcv6rd 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-6jyydcv6rd] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-6jyydcv6rd 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-lg[b-6jyydcv6rd] {
    max-width: 800px;
}

.em-modal-header[b-6jyydcv6rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .em-modal-header h3[b-6jyydcv6rd] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-6jyydcv6rd] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-6jyydcv6rd] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-6jyydcv6rd] {
    padding: 1.25rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-6jyydcv6rd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Styles for Modal */
.em-form-row[b-6jyydcv6rd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-form-group[b-6jyydcv6rd] {
    margin-bottom: 1.25rem;
    position: relative;
}

    .em-form-group label[b-6jyydcv6rd] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-form-group input[b-6jyydcv6rd],
    .em-form-group select[b-6jyydcv6rd],
    .em-form-group textarea[b-6jyydcv6rd] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
    }

        .em-form-group input:focus[b-6jyydcv6rd],
        .em-form-group select:focus[b-6jyydcv6rd],
        .em-form-group textarea:focus[b-6jyydcv6rd] {
            outline: none;
            border-color: var(--success);
            box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.25);
            transform: translateY(-2px);
        }

/* Allowances Section */
.em-allowances-section[b-6jyydcv6rd] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    background-color: var(--subtle-bg);
}

    .em-allowances-section h4[b-6jyydcv6rd] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .em-allowances-section h4[b-6jyydcv6rd]::before {
            content: "";
            width: 3px;
            height: 1rem;
            background-color: var(--success);
            border-radius: var(--border-radius-pill);
        }

/* Currency Input */
.em-currency-input[b-6jyydcv6rd] {
    position: relative;
}

.em-currency-symbol[b-6jyydcv6rd] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-weight: 500;
}

.em-currency-input input[b-6jyydcv6rd] {
    padding-left: 1.75rem;
}

/* Calculated Field */
.em-calculated-field[b-6jyydcv6rd] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.em-calculated-amount[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--success);
}

/* Required Field */
.em-required[b-6jyydcv6rd] {
    color: var(--danger);
    margin-left: 0.25rem;
    animation: pulse-danger-b-6jyydcv6rd 2s infinite;
}

/* Error State */
.em-input-error[b-6jyydcv6rd] {
    border-color: var(--danger) !important;
}

.em-error-message[b-6jyydcv6rd] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    animation: shake-b-6jyydcv6rd 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

    .em-error-message[b-6jyydcv6rd]::before {
        font-size: 0.75rem;
    }

/* Switch Control */
.em-switch[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .em-switch input[b-6jyydcv6rd] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-6jyydcv6rd] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        .em-switch label[b-6jyydcv6rd]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-6jyydcv6rd] {
        background-color: var(--success);
    }


        .em-switch input:checked + label[b-6jyydcv6rd]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch span[b-6jyydcv6rd] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        cursor: pointer;
    }

/* Tooltip */
.em-tooltip-trigger[b-6jyydcv6rd] {
    margin-left: 0.5rem;
    color: var(--text-muted);
    cursor: help;
    transition: color 0.2s ease;
}

    .em-tooltip-trigger:hover[b-6jyydcv6rd] {
        color: var(--text-secondary);
    }

/* Confirmation Content */
.em-confirmation-content[b-6jyydcv6rd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-6jyydcv6rd] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger-bg);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.em-confirmation-content p[b-6jyydcv6rd] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-6jyydcv6rd] {
        margin-bottom: 0;
    }

/* Alert Styles */
.em-alert[b-6jyydcv6rd] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    animation: fade-in-b-6jyydcv6rd 0.3s ease both;
}

.em-alert-warning[b-6jyydcv6rd] {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
}

.em-alert i[b-6jyydcv6rd] {
    color: var(--warning);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert p[b-6jyydcv6rd] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Report Modal Styling */
.em-report-content[b-6jyydcv6rd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.em-report-header[b-6jyydcv6rd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
}

.em-report-logo[b-6jyydcv6rd] {
    width: 4rem;
    height: 4rem;
    border-radius: var(--border-radius-md);
    background-color: var(--success-light);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.em-report-title[b-6jyydcv6rd] {
    flex: 1;
}

    .em-report-title h2[b-6jyydcv6rd] {
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-report-title p[b-6jyydcv6rd] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

.em-report-section[b-6jyydcv6rd] {
    margin-bottom: 1.5rem;
}

    .em-report-section h3[b-6jyydcv6rd] {
        margin: 0 0 1rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .em-report-section h3[b-6jyydcv6rd]::before {
            content: "";
            width: 4px;
            height: 1rem;
            background-color: var(--success);
            border-radius: var(--border-radius-pill);
        }

.em-report-summary[b-6jyydcv6rd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.em-summary-item[b-6jyydcv6rd] {
    flex: 1;
    min-width: 160px;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
}

.em-summary-label[b-6jyydcv6rd] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.em-summary-value[b-6jyydcv6rd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Report Table */
.em-report-table[b-6jyydcv6rd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

    .em-report-table th[b-6jyydcv6rd] {
        text-align: left;
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        font-weight: 600;
        border-bottom: 1px solid var(--border-divider);
        font-size: 0.8125rem;
    }

    .em-report-table td[b-6jyydcv6rd] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-divider);
        color: var(--text-secondary);
        vertical-align: middle;
        font-size: 0.875rem;
    }

    .em-report-table tbody tr:last-child td[b-6jyydcv6rd] {
        border-bottom: none;
    }

    .em-report-table tbody tr:nth-child(even)[b-6jyydcv6rd] {
        background-color: var(--subtle-bg);
    }

/* Change Indicators */
.em-positive-change[b-6jyydcv6rd] {
    color: var(--success) !important;
    font-weight: 600;
}

.em-negative-change[b-6jyydcv6rd] {
    color: var(--danger) !important;
    font-weight: 600;
}

/* Chart Visualization */
.em-chart-placeholder[b-6jyydcv6rd] {
    display: flex;
    align-items: flex-end;
    height: 200px;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    position: relative;
}

.em-chart-grid[b-6jyydcv6rd] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--border-divider);
    border-left: 1px solid var(--border-divider);
    padding-left: 2rem;
}

.em-chart-bar[b-6jyydcv6rd] {
    flex: 1;
    background: linear-gradient(to top, var(--success-light), var(--success));
    border-radius: 4px 4px 0 0;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

    .em-chart-bar:hover[b-6jyydcv6rd] {
        filter: brightness(1.1);
        transform: translateY(-5px);
    }

.em-bar-value[b-6jyydcv6rd] {
    position: absolute;
    top: -24px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
}

.em-bar-label[b-6jyydcv6rd] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-chart-y-axis[b-6jyydcv6rd] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
    width: 2rem;
}

    .em-chart-y-axis div[b-6jyydcv6rd] {
        font-size: 0.6875rem;
        color: var(--text-muted);
        text-align: right;
    }

/* Toast Notification */
.em-toast[b-6jyydcv6rd] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-6jyydcv6rd 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-6jyydcv6rd] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-6jyydcv6rd] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-6jyydcv6rd] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-6jyydcv6rd] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-6jyydcv6rd] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-6jyydcv6rd] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-6jyydcv6rd] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-6jyydcv6rd] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-6jyydcv6rd] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-6jyydcv6rd] {
    flex: 1;
}

.em-toast-title[b-6jyydcv6rd] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-6jyydcv6rd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-6jyydcv6rd] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-6jyydcv6rd] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-6jyydcv6rd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--hover-transition);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-6jyydcv6rd] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-6jyydcv6rd] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-6jyydcv6rd] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-6jyydcv6rd] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-6jyydcv6rd] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-6jyydcv6rd] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-success[b-6jyydcv6rd] {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--success-rgb), 0.2);
}

    .em-btn-success:hover[b-6jyydcv6rd] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--success-rgb), 0.3);
    }

.em-btn-outline[b-6jyydcv6rd] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-6jyydcv6rd] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-6jyydcv6rd] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-6jyydcv6rd] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-btn:disabled[b-6jyydcv6rd] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Animations */
@keyframes fade-in-b-6jyydcv6rd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-6jyydcv6rd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-6jyydcv6rd {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-6jyydcv6rd {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-danger-b-6jyydcv6rd {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modal-in-b-6jyydcv6rd {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-6jyydcv6rd {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes shake-b-6jyydcv6rd {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-compensation-summary[b-6jyydcv6rd],
    .em-report-summary[b-6jyydcv6rd] {
        flex-wrap: wrap;
    }

    .em-summary-card[b-6jyydcv6rd],
    .em-summary-item[b-6jyydcv6rd] {
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .em-pay-filters[b-6jyydcv6rd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-form-row[b-6jyydcv6rd] {
        grid-template-columns: 1fr;
    }

    .em-report-header[b-6jyydcv6rd] {
        flex-direction: column;
        text-align: center;
    }

    .em-report-logo[b-6jyydcv6rd] {
        margin: 0 auto;
    }

    .em-modal-footer[b-6jyydcv6rd] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-6jyydcv6rd] {
            width: 100%;
        }
}

@media (max-width: 576px) {
    .em-form-section[b-6jyydcv6rd] {
        padding: 1rem;
    }

    .em-section-header[b-6jyydcv6rd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-6jyydcv6rd] {
        width: 100%;
        justify-content: space-between;
    }

    .em-toast[b-6jyydcv6rd] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeePersonalInfo.razor.rz.scp.css */
/* ====== Employee Personal Information Styles ====== */

/* Form Section Container */
.em-form-section[b-7vgkr8bs8q] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-7vgkr8bs8q 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-7vgkr8bs8q] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-7vgkr8bs8q]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-7vgkr8bs8q]::before {
        transform: scaleX(1.5);
    }

    /* Unique color for each section */
    .em-form-section:nth-child(1)[b-7vgkr8bs8q]::before {
        background: var(--primary-gradient);
    }

    .em-form-section:nth-child(2)[b-7vgkr8bs8q]::before {
        background: var(--info-gradient);
    }

    .em-form-section:nth-child(3)[b-7vgkr8bs8q]::before {
        background: var(--success-gradient);
    }

/* Section Title */
.em-section-title[b-7vgkr8bs8q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-title i[b-7vgkr8bs8q] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

/* Different colors for each section icon */
.em-form-section:nth-child(1) .em-section-title i[b-7vgkr8bs8q] {
    background: var(--primary-gradient);
}

.em-form-section:nth-child(2) .em-section-title i[b-7vgkr8bs8q] {
    background: var(--info-gradient);
}

.em-form-section:nth-child(3) .em-section-title i[b-7vgkr8bs8q] {
    background: var(--success-gradient);
}

.em-form-section:hover .em-section-title i[b-7vgkr8bs8q] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Form Row */
.em-form-row[b-7vgkr8bs8q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    animation: slide-in-left-b-7vgkr8bs8q 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: calc(var(--animation-index, 0) * 0.1s);
}

    .em-form-row:nth-child(2)[b-7vgkr8bs8q] {
        --animation-index: 1;
    }

    .em-form-row:nth-child(3)[b-7vgkr8bs8q] {
        --animation-index: 2;
    }

    .em-form-row:nth-child(4)[b-7vgkr8bs8q] {
        --animation-index: 3;
    }

    .em-form-row:last-child[b-7vgkr8bs8q] {
        margin-bottom: 0;
    }

/* Form Group */
.em-form-group[b-7vgkr8bs8q] {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-7vgkr8bs8q] {
        transform: translateY(-4px);
    }

    /* Labels */
    .em-form-group label[b-7vgkr8bs8q] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-7vgkr8bs8q]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-7vgkr8bs8q]::before,
    .em-form-group:has(select:not([value=""])) label[b-7vgkr8bs8q]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-7vgkr8bs8q]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-7vgkr8bs8q] {
        color: var(--primary);
    }

/* Required Asterisk */
.em-required[b-7vgkr8bs8q] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-7vgkr8bs8q 2s infinite;
}

/* Input Fields */
.em-form-group input[b-7vgkr8bs8q],
.em-form-group select[b-7vgkr8bs8q],
.em-form-group textarea[b-7vgkr8bs8q] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

    .em-form-group input:focus[b-7vgkr8bs8q],
    .em-form-group select:focus[b-7vgkr8bs8q],
    .em-form-group textarea:focus[b-7vgkr8bs8q] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
        transform: translateY(-2px);
    }

    .em-form-group input:hover[b-7vgkr8bs8q],
    .em-form-group select:hover[b-7vgkr8bs8q],
    .em-form-group textarea:hover[b-7vgkr8bs8q] {
        border-color: rgba(var(--primary-rgb), 0.5);
    }

    /* Active state styling */
    .em-form-group input:not(:placeholder-shown)[b-7vgkr8bs8q],
    .em-form-group textarea:not(:placeholder-shown)[b-7vgkr8bs8q],
    .em-form-group select:not([value=""])[b-7vgkr8bs8q] {
        border-color: var(--primary);
        background-color: rgba(var(--primary-rgb), 0.03);
    }

    /* Placeholder animation */
    .em-form-group input[b-7vgkr8bs8q]::placeholder,
    .em-form-group textarea[b-7vgkr8bs8q]::placeholder {
        color: var(--text-muted);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .em-form-group input:focus[b-7vgkr8bs8q]::placeholder,
    .em-form-group textarea:focus[b-7vgkr8bs8q]::placeholder {
        transform: translateY(-10px);
        opacity: 0;
    }

/* Error State */
.em-input-error[b-7vgkr8bs8q] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-7vgkr8bs8q] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-7vgkr8bs8q] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-7vgkr8bs8q 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-7vgkr8bs8q]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

/* Help Text */
.em-form-help[b-7vgkr8bs8q] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-7vgkr8bs8q] {
    color: var(--text-secondary);
}

/* Switch Control - Enhanced */
.em-switch[b-7vgkr8bs8q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .em-switch input[b-7vgkr8bs8q] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-7vgkr8bs8q] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .em-switch label[b-7vgkr8bs8q]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            transition-duration: 0.15s;
        }

    .em-switch input:checked + label[b-7vgkr8bs8q] {
        background-color: var(--primary);
    }

        .em-switch input:checked + label[b-7vgkr8bs8q]::before {
            transform: translateX(1.25rem);
            top:3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch input:focus + label[b-7vgkr8bs8q] {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }

    .em-switch span[b-7vgkr8bs8q] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .em-switch:hover span[b-7vgkr8bs8q] {
        color: var(--text-primary);
    }

    /* Ripple effect on toggle */
    .em-switch label[b-7vgkr8bs8q]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .em-switch input:checked + label[b-7vgkr8bs8q]::after {
        animation: switch-ripple-b-7vgkr8bs8q 0.6s ease-out;
    }

/* Validation Summary */
.em-validation-summary[b-7vgkr8bs8q] {
    margin: 1.5rem 0;
    animation: fade-in-b-7vgkr8bs8q 0.3s ease both;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Enhanced Alert Boxes */
.em-alert[b-7vgkr8bs8q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--primary);
    background-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    animation: alert-appear-b-7vgkr8bs8q 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-alert[b-7vgkr8bs8q]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
    }

    .em-alert:hover[b-7vgkr8bs8q]::after {
        animation: shimmer-b-7vgkr8bs8q 2s infinite;
    }

.em-alert-danger[b-7vgkr8bs8q] {
    background-color: var(--danger-bg);
    border-left-color: var(--danger);
}

.em-alert-warning[b-7vgkr8bs8q] {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
}

.em-alert-info[b-7vgkr8bs8q] {
    background-color: var(--info-light);
    border-left-color: var(--info);
}

.em-alert i[b-7vgkr8bs8q] {
    font-size: 1.5rem;
    color: var(--danger);
    flex-shrink: 0;
    animation: alert-icon-pulse-b-7vgkr8bs8q 2s infinite;
}

.em-alert-danger i[b-7vgkr8bs8q] {
    color: var(--danger);
}

.em-alert-warning i[b-7vgkr8bs8q] {
    color: var(--warning);
}

.em-alert-info i[b-7vgkr8bs8q] {
    color: var(--info);
}

.em-alert h4[b-7vgkr8bs8q] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-7vgkr8bs8q] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Date Inputs - Custom Styling */
input[type="date"][b-7vgkr8bs8q] {
    position: relative;
}

    input[type="date"][b-7vgkr8bs8q]::-webkit-calendar-picker-indicator {
        background-color: var(--primary-light);
        padding: 0.25rem;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        input[type="date"][b-7vgkr8bs8q]::-webkit-calendar-picker-indicator:hover {
            background-color: var(--primary);
            filter: invert(1);
        }

/* Textarea Enhanced */
textarea[b-7vgkr8bs8q] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

    textarea:focus[b-7vgkr8bs8q] {
        height: 120px;
    }

/* Select Dropdown Enhancement */
select[b-7vgkr8bs8q] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

    select:focus[b-7vgkr8bs8q] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .em-form-row[b-7vgkr8bs8q] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .em-form-section[b-7vgkr8bs8q] {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-7vgkr8bs8q] {
        padding: 1rem;
    }

    .em-section-title[b-7vgkr8bs8q] {
        font-size: 1.125rem;
    }

    .em-form-group input[b-7vgkr8bs8q],
    .em-form-group select[b-7vgkr8bs8q],
    .em-form-group textarea[b-7vgkr8bs8q] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    .em-form-group label[b-7vgkr8bs8q] {
        padding-left: 0;
    }

        .em-form-group label[b-7vgkr8bs8q]::before {
            display: none;
        }

    .em-form-help[b-7vgkr8bs8q],
    .em-error-message[b-7vgkr8bs8q] {
        padding-left: 0;
    }
}

/* ====== Animations ====== */
@keyframes validation-shake-b-7vgkr8bs8q {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes label-float-b-7vgkr8bs8q {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

/* Field active state visual indicator */
.em-form-group input:not(:placeholder-shown)[b-7vgkr8bs8q],
.em-form-group textarea:not(:placeholder-shown)[b-7vgkr8bs8q] {
    border-color: var(--primary-hover);
    background-color: rgba(var(--primary-rgb), 0.03);
}

/* Custom row highlight effect on entry */
.em-form-row[b-7vgkr8bs8q] {
    transform: translateY(5px);
    opacity: 0;
    animation: row-appear-b-7vgkr8bs8q 0.5s forwards;
    animation-delay: calc(var(--animation-index, 0) * 100ms);
}

@keyframes row-appear-b-7vgkr8bs8q {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Add a subtle pulsing effect to required fields */
.em-required[b-7vgkr8bs8q] {
    animation: pulse-danger-b-7vgkr8bs8q 2s infinite;
}

@keyframes pulse-danger-b-7vgkr8bs8q {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Switch ripple effect */
@keyframes switch-ripple-b-7vgkr8bs8q {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(15, 15);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(30, 30);
    }
}

/* Form section entry animation */
@keyframes section-entry-b-7vgkr8bs8q {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.em-form-section:nth-child(1)[b-7vgkr8bs8q] {
    animation: section-entry-b-7vgkr8bs8q 0.5s ease forwards;
    animation-delay: 0.1s;
}

.em-form-section:nth-child(2)[b-7vgkr8bs8q] {
    animation: section-entry-b-7vgkr8bs8q 0.5s ease forwards;
    animation-delay: 0.2s;
}

.em-form-section:nth-child(3)[b-7vgkr8bs8q] {
    animation: section-entry-b-7vgkr8bs8q 0.5s ease forwards;
    animation-delay: 0.3s;
}

/* Validation message fade-in animation */
.em-error-message[b-7vgkr8bs8q] {
    opacity: 0;
    animation: message-fade-in-b-7vgkr8bs8q 0.3s ease forwards;
}

@keyframes message-fade-in-b-7vgkr8bs8q {
    to {
        opacity: 1;
    }
}

/* Focus animation for form groups */
.em-form-group:focus-within[b-7vgkr8bs8q] {
    animation: focus-pulse-b-7vgkr8bs8q 1s ease;
}

@keyframes focus-pulse-b-7vgkr8bs8q {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(var(--primary-rgb), 0.05);
    }

    100% {
        background-color: transparent;
    }
}

/* Alert icon pulse animation */
@keyframes alert-icon-pulse-b-7vgkr8bs8q {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Shimmer effect */
@keyframes shimmer-b-7vgkr8bs8q {
    100% {
        transform: translateX(100%);
    }
}

/* Fade in animation */
@keyframes fade-in-b-7vgkr8bs8q {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade in up animation */
@keyframes fade-in-up-b-7vgkr8bs8q {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in left animation */
@keyframes slide-in-left-b-7vgkr8bs8q {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Alert appear animation */
@keyframes alert-appear-b-7vgkr8bs8q {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeePromotionInfo.razor.rz.scp.css */
/* ====== Employee Promotion History Styles ====== */

/* Form Section Container */
.em-form-section[b-gn1lm6i55q] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-gn1lm6i55q 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-gn1lm6i55q] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-gn1lm6i55q]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--success));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-gn1lm6i55q]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Action Buttons */
.em-section-header[b-gn1lm6i55q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-gn1lm6i55q]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-gn1lm6i55q]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-gn1lm6i55q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-gn1lm6i55q] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-gn1lm6i55q] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Loading State */
.em-loading[b-gn1lm6i55q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-gn1lm6i55q] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-gn1lm6i55q 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-gn1lm6i55q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-gn1lm6i55q 0.5s ease both;
}

    .em-empty-state > i[b-gn1lm6i55q] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-gn1lm6i55q] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-gn1lm6i55q] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

/* Career Path Visualization Styles */
.em-career-path[b-gn1lm6i55q] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    animation: fade-in-b-gn1lm6i55q 0.6s ease both;
    border: 1px solid var(--border-divider);
}

.em-career-step[b-gn1lm6i55q] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    animation: fade-in-down-b-gn1lm6i55q 0.5s ease both;
    animation-delay: calc(var(--step-index, 0) * 0.15s);
}

    .em-career-step:nth-child(1)[b-gn1lm6i55q] {
        --step-index: 1;
    }

    .em-career-step:nth-child(2)[b-gn1lm6i55q] {
        --step-index: 2;
    }

    .em-career-step:nth-child(3)[b-gn1lm6i55q] {
        --step-index: 3;
    }

    .em-career-step:nth-child(4)[b-gn1lm6i55q] {
        --step-index: 4;
    }

.em-career-node[b-gn1lm6i55q] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    text-align: center;
    max-width: 300px;
    min-width: 150px;
    transition: all 0.3s ease;
}

.em-career-step:hover .em-career-node[b-gn1lm6i55q] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.em-career-connector[b-gn1lm6i55q] {
    position: relative;
    height: 4px;
    background-color: var(--primary);
    min-width: 100px;
    transition: all 0.3s ease;
}

    .em-career-connector[b-gn1lm6i55q]::before,
    .em-career-connector[b-gn1lm6i55q]::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--primary);
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }

    .em-career-connector[b-gn1lm6i55q]::before {
        left: 0;
    }

    .em-career-connector[b-gn1lm6i55q]::after {
        right: 0;
    }

.em-career-step:hover .em-career-connector[b-gn1lm6i55q] {
    background-color: var(--success);
    height: 6px;
}

    .em-career-step:hover .em-career-connector[b-gn1lm6i55q]::before,
    .em-career-step:hover .em-career-connector[b-gn1lm6i55q]::after {
        background-color: var(--success);
        transform: translateY(-50%) scale(1.2);
    }

.em-position-title[b-gn1lm6i55q] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-position-date[b-gn1lm6i55q] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-promotion-details[b-gn1lm6i55q] {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    z-index: 1;
    transition: all 0.3s ease;
}

.em-career-step:hover .em-promotion-details[b-gn1lm6i55q] {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.em-promotion-date[b-gn1lm6i55q] {
    color: var(--primary);
    font-weight: 500;
}

/* Table Styles */
.em-table-container[b-gn1lm6i55q] {
    margin-top: 1.5rem;
    overflow-x: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    animation: fade-in-up-b-gn1lm6i55q 0.5s ease both;
    animation-delay: 0.3s;
}

.em-data-table[b-gn1lm6i55q] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .em-data-table th[b-gn1lm6i55q] {
        text-align: left;
        padding: 0.75rem 1rem;
        background-color: var(--table-header-bg, var(--subtle-bg));
        color: var(--text-primary);
        font-weight: 600;
        border-bottom: 1px solid var(--border-divider);
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .em-data-table td[b-gn1lm6i55q] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-divider);
        color: var(--text-secondary);
        vertical-align: middle;
        font-size: 0.875rem;
    }

    .em-data-table tbody tr:last-child td[b-gn1lm6i55q] {
        border-bottom: none;
    }

    .em-data-table tbody tr[b-gn1lm6i55q] {
        transition: all 0.2s ease;
    }

        .em-data-table tbody tr:hover[b-gn1lm6i55q] {
            background-color: var(--primary-light);
        }

.em-badge-position[b-gn1lm6i55q] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
}

.em-badge-position-new[b-gn1lm6i55q] {
    background-color: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.2);
}

.em-text-muted[b-gn1lm6i55q] {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8125rem;
}

.em-promotion-actions[b-gn1lm6i55q] {
    display: flex;
    gap: 0.5rem;
}

/* Promotion Stats */
.em-promotion-stats[b-gn1lm6i55q] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    animation: fade-in-up-b-gn1lm6i55q 0.5s ease both;
    animation-delay: 0.5s;
}

.em-stat-item[b-gn1lm6i55q] {
    flex: 1;
    min-width: 150px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    text-align: center;
    transition: all 0.3s ease;
}

    .em-stat-item:hover[b-gn1lm6i55q] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

.em-stat-label[b-gn1lm6i55q] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.em-stat-value[b-gn1lm6i55q] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
}

/* Modal Styles */
.em-modal-overlay[b-gn1lm6i55q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-gn1lm6i55q 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-gn1lm6i55q] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-gn1lm6i55q 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-sm[b-gn1lm6i55q] {
    max-width: 450px;
}

.em-modal-header[b-gn1lm6i55q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .em-modal-header h3[b-gn1lm6i55q] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-gn1lm6i55q] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-gn1lm6i55q] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-gn1lm6i55q] {
    padding: 1.25rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-gn1lm6i55q] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Group */
.em-form-group[b-gn1lm6i55q] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-gn1lm6i55q] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-gn1lm6i55q] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
    }

    .em-form-group:focus-within label[b-gn1lm6i55q] {
        color: var(--primary);
    }

    .em-form-group input[b-gn1lm6i55q],
    .em-form-group select[b-gn1lm6i55q],
    .em-form-group textarea[b-gn1lm6i55q] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-gn1lm6i55q],
        .em-form-group select:focus[b-gn1lm6i55q],
        .em-form-group textarea:focus[b-gn1lm6i55q] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-gn1lm6i55q],
        .em-form-group select:hover[b-gn1lm6i55q],
        .em-form-group textarea:hover[b-gn1lm6i55q] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

.em-required[b-gn1lm6i55q] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-gn1lm6i55q 2s infinite;
}

.em-input-error[b-gn1lm6i55q] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-gn1lm6i55q] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-gn1lm6i55q] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-gn1lm6i55q 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

    .em-error-message[b-gn1lm6i55q]::before {
        content: "⚠";
        font-size: 0.75rem;
    }

.em-form-help[b-gn1lm6i55q] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
}

/* Switch Control */
.em-switch[b-gn1lm6i55q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .em-switch input[b-gn1lm6i55q] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .em-switch label[b-gn1lm6i55q] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        margin-bottom: 0 !important;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        .em-switch label[b-gn1lm6i55q]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

    .em-switch input:checked + label[b-gn1lm6i55q] {
        background-color: var(--primary);
    }

        .em-switch input:checked + label[b-gn1lm6i55q]::before {
            transform: translateX(1.25rem);
            top: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

    .em-switch span[b-gn1lm6i55q] {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
        cursor: pointer;
    }

/* Confirmation Content */
.em-confirmation-content[b-gn1lm6i55q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-gn1lm6i55q] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.em-confirmation-content p[b-gn1lm6i55q] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-gn1lm6i55q] {
        margin-bottom: 0;
    }

/* Toast Notification */
.em-toast[b-gn1lm6i55q] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-gn1lm6i55q 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-gn1lm6i55q] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-gn1lm6i55q] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-gn1lm6i55q] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-gn1lm6i55q] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-gn1lm6i55q] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-gn1lm6i55q] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-gn1lm6i55q] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-gn1lm6i55q] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-gn1lm6i55q] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-gn1lm6i55q] {
    flex: 1;
}

.em-toast-title[b-gn1lm6i55q] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-gn1lm6i55q] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-gn1lm6i55q] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-gn1lm6i55q] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-gn1lm6i55q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-gn1lm6i55q] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-gn1lm6i55q] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-gn1lm6i55q] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-gn1lm6i55q] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-gn1lm6i55q] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-gn1lm6i55q] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-sm[b-gn1lm6i55q] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-icon[b-gn1lm6i55q] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-btn:disabled[b-gn1lm6i55q] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn:active[b-gn1lm6i55q] {
    transform: translateY(1px);
}

/* Animations */
@keyframes fade-in-b-gn1lm6i55q {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-gn1lm6i55q {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-gn1lm6i55q {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-gn1lm6i55q {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-gn1lm6i55q {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-gn1lm6i55q {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-gn1lm6i55q {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-gn1lm6i55q {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-gn1lm6i55q {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-promotion-stats[b-gn1lm6i55q] {
        flex-wrap: wrap;
    }

    .em-stat-item[b-gn1lm6i55q] {
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .em-career-path[b-gn1lm6i55q] {
        padding: 0.5rem;
    }

    .em-career-step[b-gn1lm6i55q] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
    }

    .em-career-connector[b-gn1lm6i55q] {
        width: 4px;
        height: 40px;
        min-width: auto;
    }

        .em-career-connector[b-gn1lm6i55q]::before,
        .em-career-connector[b-gn1lm6i55q]::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .em-career-connector[b-gn1lm6i55q]::before {
            top: 0;
        }

        .em-career-connector[b-gn1lm6i55q]::after {
            top: auto;
            bottom: 0;
        }

    .em-promotion-details[b-gn1lm6i55q] {
        top: auto;
        left: 100%;
        transform: none;
    }

    .em-section-header[b-gn1lm6i55q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-modal-footer[b-gn1lm6i55q] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-gn1lm6i55q] {
            width: 100%;
        }
}

@media (max-width: 576px) {
    .em-form-section[b-gn1lm6i55q] {
        padding: 1rem;
    }

    .em-toast[b-gn1lm6i55q] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeSkillsInfo.razor.rz.scp.css */
/* ====== Employee Skills & Certifications Styles ====== */

/* Form Section Container */
.em-form-section[b-31rngdf7wx] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-31rngdf7wx 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-31rngdf7wx] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-31rngdf7wx]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-31rngdf7wx]::before {
        transform: scaleX(1.5);
    }

    /* Different colors for each section */
    .em-form-section:nth-child(1)[b-31rngdf7wx]::before {
        background: linear-gradient(to bottom, var(--primary), var(--info));
    }

    .em-form-section:nth-child(2)[b-31rngdf7wx]::before {
        background: linear-gradient(to bottom, var(--success), var(--warning));
    }

/* Section Header with Action Buttons */
.em-section-header[b-31rngdf7wx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-31rngdf7wx]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-31rngdf7wx]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-31rngdf7wx] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:nth-child(1) .em-section-title i[b-31rngdf7wx] {
    background: var(--primary-gradient);
}

.em-form-section:nth-child(2) .em-section-title i[b-31rngdf7wx] {
    background: var(--success-gradient);
}

.em-form-section:hover .em-section-title i[b-31rngdf7wx] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-section-actions[b-31rngdf7wx] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-31rngdf7wx] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-31rngdf7wx 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-31rngdf7wx 0.5s ease both;
}

    .em-empty-state > i[b-31rngdf7wx] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-31rngdf7wx] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-31rngdf7wx] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-31rngdf7wx] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Skills Filters */
.em-skills-filters[b-31rngdf7wx] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-31rngdf7wx 0.4s ease both;
}

.em-search-field[b-31rngdf7wx] {
    flex-grow: 1;
    position: relative;
    min-width: 200px;
}

    .em-search-field input[b-31rngdf7wx] {
        width: 100%;
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-31rngdf7wx] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

    .em-search-field i[b-31rngdf7wx] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.25s ease;
    }

    .em-search-field input:focus + i[b-31rngdf7wx] {
        color: var(--primary);
    }

.em-clear-search[b-31rngdf7wx] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .em-clear-search:hover[b-31rngdf7wx] {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-50%) rotate(90deg);
    }

.em-filter-buttons[b-31rngdf7wx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Certificate Filters */
.em-cert-filters[b-31rngdf7wx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-divider);
}

.em-status-filters[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.em-status-filter[b-31rngdf7wx] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .em-status-filter:hover[b-31rngdf7wx] {
        color: var(--primary);
    }

    .em-status-filter.active[b-31rngdf7wx] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

.em-sort-dropdown[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-sort-dropdown span[b-31rngdf7wx] {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .em-sort-dropdown select[b-31rngdf7wx] {
        padding: 0.4rem 1.75rem 0.4rem 0.625rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-weight: 500;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 0.85em;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .em-sort-dropdown select:focus[b-31rngdf7wx] {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--shadow-focus);
        }

/* Skills Grid */
.em-skills-grid[b-31rngdf7wx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Skill Card */
.em-skill-card[b-31rngdf7wx] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-fade-in-b-31rngdf7wx 0.5s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    position: relative;
}

    .em-skill-card:hover[b-31rngdf7wx] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

    .em-skill-card.em-skill-required-card[b-31rngdf7wx] {
        border-left-color: var(--primary);
        border-left-width: 3px;
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.15);
    }

        .em-skill-card.em-skill-required-card:hover[b-31rngdf7wx] {
            box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.25);
        }

.em-skill-header[b-31rngdf7wx] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-skill-info[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.em-skill-name[b-31rngdf7wx] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.em-skill-category[b-31rngdf7wx] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--primary-light);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    display: inline-block;
    max-width: fit-content;
}

.em-skill-proficiency[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.em-proficiency-value[b-31rngdf7wx] {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--primary);
}

.em-proficiency-bar[b-31rngdf7wx] {
    width: 80px;
    height: 0.5rem;
    background-color: var(--border-divider);
    border-radius: var(--border-radius-pill);
    overflow: hidden;
}

.em-proficiency-fill[b-31rngdf7wx] {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--border-radius-pill);
    transition: width 0.3s ease;
}

.em-skill-details[b-31rngdf7wx] {
    padding: 1rem;
}

.em-skill-date[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .em-skill-date i[b-31rngdf7wx] {
        color: var(--primary);
    }

.em-skill-comments[b-31rngdf7wx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--border-divider);
    padding-left: 0.5rem;
}

    .em-skill-comments i[b-31rngdf7wx] {
        color: var(--text-muted);
    }

.em-skill-required[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary);
    margin-top: 0.5rem;
    background-color: var(--primary-light);
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-md);
    animation: pulse-primary-b-31rngdf7wx 3s infinite;
    font-weight: 600;
}

    .em-skill-required i[b-31rngdf7wx] {
        color: var(--primary);
    }

.em-skill-actions[b-31rngdf7wx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Certifications status summary */
.em-certifications-status[b-31rngdf7wx] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.em-summary-card[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 150px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-31rngdf7wx 0.4s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

    .em-summary-card:nth-child(1)[b-31rngdf7wx] {
        --card-index: 1;
    }

    .em-summary-card:nth-child(2)[b-31rngdf7wx] {
        --card-index: 2;
    }

    .em-summary-card:nth-child(3)[b-31rngdf7wx] {
        --card-index: 3;
    }

    .em-summary-card:hover[b-31rngdf7wx] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.success .em-summary-icon[b-31rngdf7wx] {
        background-color: var(--success-light);
        color: var(--success);
    }

    .em-summary-card.warning .em-summary-icon[b-31rngdf7wx] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .em-summary-card.danger .em-summary-icon[b-31rngdf7wx] {
        background-color: var(--danger-light);
        color: var(--danger);
    }

    .em-summary-card.success[b-31rngdf7wx] {
        border-left: 3px solid var(--success);
    }

    .em-summary-card.warning[b-31rngdf7wx] {
        border-left: 3px solid var(--warning);
    }

    .em-summary-card.danger[b-31rngdf7wx] {
        border-left: 3px solid var(--danger);
    }

.em-summary-icon[b-31rngdf7wx] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

    .em-summary-icon.success[b-31rngdf7wx] {
        background-color: var(--success-light);
        color: var(--success);
    }

.em-summary-content[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-31rngdf7wx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-31rngdf7wx] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Certifications Grid */
.em-certifications-grid[b-31rngdf7wx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Certification Card */
.em-certification-card[b-31rngdf7wx] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-fade-in-b-31rngdf7wx 0.5s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    position: relative;
}

    .em-certification-card:hover[b-31rngdf7wx] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .em-certification-card.em-cert-expired[b-31rngdf7wx] {
        border-color: var(--danger);
    }

        .em-certification-card.em-cert-expired .em-certification-header[b-31rngdf7wx] {
            background-color: var(--danger-light);
        }

    .em-certification-card.em-cert-expiring[b-31rngdf7wx] {
        border-color: var(--warning);
    }

        .em-certification-card.em-cert-expiring .em-certification-header[b-31rngdf7wx] {
            background-color: var(--warning-light);
        }

    .em-certification-card.em-cert-valid[b-31rngdf7wx] {
        border-color: var(--success);
    }

        .em-certification-card.em-cert-valid .em-certification-header[b-31rngdf7wx] {
            background-color: var(--success-light);
        }

    .em-certification-card.em-cert-required-card[b-31rngdf7wx] {
        border-left-color: var(--primary);
        border-left-width: 3px;
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.15);
    }

        .em-certification-card.em-cert-required-card:hover[b-31rngdf7wx] {
            box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.25);
        }

.em-certification-header[b-31rngdf7wx] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-certification-info[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.em-certification-name[b-31rngdf7wx] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.em-certification-status[b-31rngdf7wx] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: fit-content;
}

.em-status-active[b-31rngdf7wx] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-expired[b-31rngdf7wx] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-status-pending[b-31rngdf7wx] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-status-default[b-31rngdf7wx] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-certification-required[b-31rngdf7wx] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--primary-light);
    color: var(--primary);
    animation: pulse-primary-b-31rngdf7wx 2s infinite alternate;
}

.em-certification-details[b-31rngdf7wx] {
    padding: 1rem;
}

.em-certification-dates[b-31rngdf7wx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.em-issue-date[b-31rngdf7wx], .em-expiry-date[b-31rngdf7wx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .em-issue-date i[b-31rngdf7wx] {
        color: var(--success);
    }

    .em-expiry-date i[b-31rngdf7wx] {
        color: var(--text-muted);
    }

    .em-expiry-date.em-expired[b-31rngdf7wx] {
        color: var(--danger);
    }

        .em-expiry-date.em-expired i[b-31rngdf7wx] {
            color: var(--danger);
        }

.em-expired-badge[b-31rngdf7wx], .em-expiring-badge[b-31rngdf7wx] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    margin-left: 0.5rem;
}

.em-expired-badge[b-31rngdf7wx] {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: pulse-danger-b-31rngdf7wx 2s infinite;
}

.em-expiring-badge[b-31rngdf7wx] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-certification-comments[b-31rngdf7wx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--border-divider);
    padding-left: 0.5rem;
}

    .em-certification-comments i[b-31rngdf7wx] {
        color: var(--text-muted);
    }

.em-certification-actions[b-31rngdf7wx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Rating Control for Skill Proficiency */
.em-rating-control[b-31rngdf7wx] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.em-rating-button[b-31rngdf7wx] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background-color: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .em-rating-button:hover[b-31rngdf7wx] {
        background-color: var(--primary-light);
        color: var(--primary);
        transform: translateY(-2px);
    }

    .em-rating-button.active[b-31rngdf7wx] {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
    }

.em-rating-labels[b-31rngdf7wx] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

/* Form Styles */
.em-form-group[b-31rngdf7wx] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-31rngdf7wx] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-31rngdf7wx] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-31rngdf7wx]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-31rngdf7wx]::before,
    .em-form-group:has(select:not([value=""])) label[b-31rngdf7wx]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-31rngdf7wx]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-31rngdf7wx] {
        color: var(--primary);
    }

    .em-form-group input[b-31rngdf7wx],
    .em-form-group select[b-31rngdf7wx],
    .em-form-group textarea[b-31rngdf7wx] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-31rngdf7wx],
        .em-form-group select:focus[b-31rngdf7wx],
        .em-form-group textarea:focus[b-31rngdf7wx] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-31rngdf7wx],
        .em-form-group select:hover[b-31rngdf7wx],
        .em-form-group textarea:hover[b-31rngdf7wx] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-31rngdf7wx],
        .em-form-group textarea:not(:placeholder-shown)[b-31rngdf7wx],
        .em-form-group select:not([value=""])[b-31rngdf7wx] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

.em-required[b-31rngdf7wx] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-31rngdf7wx 2s infinite;
}

.em-input-error[b-31rngdf7wx] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-31rngdf7wx] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-31rngdf7wx] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-31rngdf7wx 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-31rngdf7wx]::before {
        
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

.em-form-help[b-31rngdf7wx] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

/* Alert Styles */
.em-alert[b-31rngdf7wx] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    animation: fade-in-b-31rngdf7wx 0.3s ease;
}

.em-alert-info[b-31rngdf7wx] {
    background-color: var(--info-light);
    border-left: 3px solid var(--info);
}

.em-alert-warning[b-31rngdf7wx] {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
}

.em-alert i[b-31rngdf7wx] {
    color: var(--info);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert-warning i[b-31rngdf7wx] {
    color: var(--warning);
}

.em-alert h4[b-31rngdf7wx] {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-31rngdf7wx] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Modal Styles */
.em-modal-overlay[b-31rngdf7wx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-31rngdf7wx 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-31rngdf7wx] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-31rngdf7wx 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-header[b-31rngdf7wx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .em-modal-header h3[b-31rngdf7wx] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-31rngdf7wx] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-31rngdf7wx] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-31rngdf7wx] {
    padding: 1.25rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-31rngdf7wx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Confirmation Content */
.em-confirmation-content[b-31rngdf7wx] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-31rngdf7wx] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.em-confirmation-content p[b-31rngdf7wx] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-31rngdf7wx] {
        margin-bottom: 0;
    }

.em-confirmation-content strong[b-31rngdf7wx] {
    color: var(--text-primary);
}

/* Toast Notification */
.em-toast[b-31rngdf7wx] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-31rngdf7wx 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-31rngdf7wx] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-31rngdf7wx] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-31rngdf7wx] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-31rngdf7wx] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-31rngdf7wx] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-31rngdf7wx] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-31rngdf7wx] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-31rngdf7wx] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-31rngdf7wx] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-31rngdf7wx] {
    flex: 1;
}

.em-toast-title[b-31rngdf7wx] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-31rngdf7wx] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-31rngdf7wx] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-31rngdf7wx] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-31rngdf7wx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-31rngdf7wx] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-31rngdf7wx] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-31rngdf7wx] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-31rngdf7wx] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-31rngdf7wx] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-31rngdf7wx] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-31rngdf7wx] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-31rngdf7wx] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-31rngdf7wx] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn:disabled[b-31rngdf7wx] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn:active[b-31rngdf7wx] {
    transform: translateY(1px);
}

/* Animations */
@keyframes fade-in-b-31rngdf7wx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-31rngdf7wx {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-31rngdf7wx {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes card-fade-in-b-31rngdf7wx {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin-b-31rngdf7wx {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-31rngdf7wx {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-31rngdf7wx {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-31rngdf7wx {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-31rngdf7wx {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-31rngdf7wx {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-skills-grid[b-31rngdf7wx], .em-certifications-grid[b-31rngdf7wx] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .em-skills-filters[b-31rngdf7wx], .em-cert-filters[b-31rngdf7wx] {
        flex-direction: column;
        align-items: stretch;
    }

    .em-filter-buttons[b-31rngdf7wx] {
        overflow-x: auto;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
    }

    .em-certifications-status[b-31rngdf7wx] {
        flex-wrap: wrap;
    }

    .em-summary-card[b-31rngdf7wx] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .em-skills-grid[b-31rngdf7wx], .em-certifications-grid[b-31rngdf7wx] {
        grid-template-columns: 1fr;
    }

    .em-section-header[b-31rngdf7wx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-31rngdf7wx] {
        width: 100%;
        justify-content: space-between;
    }

    .em-modal[b-31rngdf7wx] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-31rngdf7wx] {
        max-height: calc(100vh - 170px);
    }

    .em-skill-header[b-31rngdf7wx], .em-certification-header[b-31rngdf7wx] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .em-skill-proficiency[b-31rngdf7wx], .em-certification-info[b-31rngdf7wx] {
        align-items: flex-start;
    }

    .em-certification-required[b-31rngdf7wx] {
        margin-top: 0.5rem;
    }

    .em-form-group label[b-31rngdf7wx] {
        padding-left: 0;
    }

        .em-form-group label[b-31rngdf7wx]::before {
            display: none;
        }

    .em-form-help[b-31rngdf7wx], .em-error-message[b-31rngdf7wx] {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-31rngdf7wx] {
        padding: 1rem;
    }

    .em-certification-actions[b-31rngdf7wx], .em-skill-actions[b-31rngdf7wx] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .em-certification-actions .em-btn[b-31rngdf7wx], .em-skill-actions .em-btn[b-31rngdf7wx] {
            flex: 1;
        }

    .em-modal-footer[b-31rngdf7wx] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-31rngdf7wx] {
            width: 100%;
        }

    .em-toast[b-31rngdf7wx] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-rating-control[b-31rngdf7wx] {
        justify-content: space-between;
        width: 100%;
    }

    .em-rating-button[b-31rngdf7wx] {
        flex: 1;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeesMain.razor.rz.scp.css */
/* ====== Employee Management Styles ====== */

/* Main Container */
.emp-portal-container[b-k96844b40u] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--body-bg);
    overflow: hidden;
    position: relative;
}

/* Header Section */
.emp-portal-header[b-k96844b40u] {
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-divider);
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 10;
    position: relative;
    animation: slide-in-top-b-k96844b40u 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .emp-portal-header[b-k96844b40u]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--primary-gradient);
        opacity: 0.7;
    }

.emp-portal-header-content[b-k96844b40u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.emp-portal-header-title[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .emp-portal-header-title i[b-k96844b40u] {
        font-size: 1.25rem;
        color: var(--primary);
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: 10px;
        box-shadow: 0 4px 8px -2px rgba(var(--primary-rgb), 0.25);
        transition: all 0.3s ease;
    }

    .emp-portal-header-title:hover i[b-k96844b40u] {
        transform: scale(1.05);
        box-shadow: 0 6px 12px -2px rgba(var(--primary-rgb), 0.35);
    }

    .emp-portal-header-title h1[b-k96844b40u] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.01em;
    }

    .emp-portal-header-title p[b-k96844b40u] {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
        opacity: 0.9;
    }

.emp-portal-header-actions[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .emp-portal-header-actions .emp-portal-badge[b-k96844b40u] {
        position: relative;
        top: -1px;
        margin-left: 4px;
        font-size: 0.65rem;
        padding: 0.125rem 0.25rem;
        border-radius: 8px;
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.25);
    }

/* Main Content */
.emp-portal-main-content[b-k96844b40u] {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
    background-color: var(--body-bg);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ====== SIMPLIFIED SEARCH AND FILTERS SECTION ====== */
.emp-portal-search-filters[b-k96844b40u] {
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    padding: 0.875rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    animation: fade-in-b-k96844b40u 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

    .emp-portal-search-filters[b-k96844b40u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: var(--primary-gradient);
        opacity: 0.7;
    }

/* Collapsible Search Section */
.emp-portal-search-header[b-k96844b40u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.emp-portal-search-title[b-k96844b40u] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emp-portal-search-toggle[b-k96844b40u] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.emp-portal-search-content[b-k96844b40u] {
    padding-top: 5px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .emp-portal-search-content.collapsed[b-k96844b40u] {
        max-height: 0;

    }

.emp-portal-search-container[b-k96844b40u] {
    flex: 1;
    min-width: 250px;
    max-width: 520px;
}

.emp-portal-search-bar[b-k96844b40u] {
    position: relative;
    width: 100%;
}

    .emp-portal-search-bar input[b-k96844b40u] {
        width: 100%;
        padding: 0.625rem 1rem 0.625rem 2.5rem;
        border-radius: 10px;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease-in-out;
        box-shadow: var(--shadow-sm);
    }

        .emp-portal-search-bar input:focus[b-k96844b40u] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
            transform: translateY(-1px);
        }

    .emp-portal-search-bar i[b-k96844b40u] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        pointer-events: none;
    }

    .emp-portal-search-bar input:focus + i[b-k96844b40u] {
        color: var(--primary);
    }

.emp-portal-clear-search[b-k96844b40u] {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: all 0.25s ease;
    font-size: 0.75rem;
}

    .emp-portal-clear-search:hover[b-k96844b40u] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
        transform: translateY(-50%) rotate(90deg);
    }

/* Essential Filters */
.emp-portal-essential-filters[b-k96844b40u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.75rem;
    gap: 0.75rem;
}

.emp-portal-status-filters[b-k96844b40u] {
    display: flex;
    gap: 0.125rem;
    margin-right: 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 20px;
    padding: 0.125rem;
    border: 1px solid var(--border-divider);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.emp-portal-status-filter[b-k96844b40u] {
    padding: 0.375rem 0.625rem;
    border-radius: 18px;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.25s;
    white-space: nowrap;
    font-weight: 500;
}

    .emp-portal-status-filter:hover[b-k96844b40u] {
        color: var(--primary);
    }

    .emp-portal-status-filter.emp-portal-active[b-k96844b40u] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
    }

.emp-portal-company-filter[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .emp-portal-company-filter select[b-k96844b40u] {
        padding: 0.425rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.8125rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.625rem center;
        background-size: 0.75em;
        appearance: none;
        padding-right: 1.875rem;
        transition: all 0.25s ease;
    }

        .emp-portal-company-filter select:focus[b-k96844b40u] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
            transform: translateY(-1px);
        }

    .emp-portal-company-filter label[b-k96844b40u] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

/* Switch Filters for Attention & Incomplete */
.emp-portal-switch-filter[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.emp-portal-switch[b-k96844b40u] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

    .emp-portal-switch input[b-k96844b40u] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.emp-portal-switch-slider[b-k96844b40u] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--text-secondary-rgb), 0.2);
    border-radius: 18px;
    transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

    .emp-portal-switch-slider[b-k96844b40u]:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    }

.emp-portal-switch input:checked + .emp-portal-switch-slider[b-k96844b40u] {
    background: var(--primary-gradient, linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%));
}

    .emp-portal-switch input:checked + .emp-portal-switch-slider[b-k96844b40u]:before {
        transform: translateX(16px);
    }

.emp-portal-switch input:focus + .emp-portal-switch-slider[b-k96844b40u] {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.emp-portal-switch-label[b-k96844b40u] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.emp-portal-switch-filter .emp-portal-badge[b-k96844b40u] {
    font-size: 0.65rem;
    padding: 0.125rem 0.25rem;
    border-radius: 8px;
    color: white;
    margin-left: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.emp-portal-badge-warning[b-k96844b40u] {
    background-color: var(--warning);
}

.emp-portal-badge-danger[b-k96844b40u] {
    background-color: var(--danger);
}

.emp-portal-badge-primary[b-k96844b40u] {
    background-color: var(--primary);
}

/* Grid Controls */
.emp-portal-grid-controls[b-k96844b40u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 8px;
    border: 1px solid var(--border-divider);
}

.emp-portal-sort-dropdown[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .emp-portal-sort-dropdown label[b-k96844b40u] {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .emp-portal-sort-dropdown select[b-k96844b40u] {
        padding: 0.375rem 1.625rem 0.375rem 0.625rem;
        border-radius: 6px;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-weight: 500;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 0.75em;
        cursor: pointer;
        transition: all 0.25s ease;
    }

        .emp-portal-sort-dropdown select:focus[b-k96844b40u] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
            transform: translateY(-1px);
        }

/* ====== ADVANCED FILTERS STYLING ====== */
.emp-portal-advanced-filters[b-k96844b40u] {
    background-color: var(--content-bg);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-k96844b40u 0.4s ease-out;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .emp-portal-advanced-filters[b-k96844b40u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        opacity: 0.7;
    }

.emp-portal-filter-section[b-k96844b40u] {
    margin-bottom: 1.25rem;
}

    .emp-portal-filter-section h3[b-k96844b40u] {
        font-size: 0.9375rem;
        font-weight: 600;
        margin-bottom: 0.875rem;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.375rem;
        position: relative;
        padding-left: 1.25rem;
    }

        .emp-portal-filter-section h3 i[b-k96844b40u] {
            color: var(--primary);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.875rem;
        }

.emp-portal-filter-row[b-k96844b40u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.emp-portal-filter[b-k96844b40u] {
    flex: 1;
    min-width: 180px;
}

    .emp-portal-filter label[b-k96844b40u] {
        display: block;
        margin-bottom: 0.375rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-primary);
    }

    .emp-portal-filter select[b-k96844b40u],
    .emp-portal-filter input[b-k96844b40u] {
        width: 100%;
        padding: 0.5rem 0.625rem;
        border-radius: 8px;
        border: 1px solid var(--border-divider);
        background-color: var(--input-bg);
        transition: all 0.25s ease;
        font-size: 0.8125rem;
    }

        .emp-portal-filter select:focus[b-k96844b40u],
        .emp-portal-filter input:focus[b-k96844b40u] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
            transform: translateY(-1px);
        }

        .emp-portal-filter select:disabled[b-k96844b40u] {
            opacity: 0.6;
            cursor: not-allowed;
            background-color: var(--subtle-bg);
        }

.emp-portal-date-range[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emp-portal-date-separator[b-k96844b40u] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.emp-portal-checkbox-group[b-k96844b40u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.625rem;
    padding: 0.25rem 0;
}

.emp-portal-checkbox[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: all 0.25s ease;
}

    .emp-portal-checkbox:hover[b-k96844b40u] {
        color: var(--text-primary);
    }

    .emp-portal-checkbox input[b-k96844b40u] {
        width: 0.875rem;
        height: 0.875rem;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--border-divider);
        border-radius: 3px;
        transition: all 0.25s ease;
        position: relative;
    }

        .emp-portal-checkbox input:checked[b-k96844b40u] {
            background-color: var(--primary);
            border-color: var(--primary);
        }

            .emp-portal-checkbox input:checked[b-k96844b40u]::after {
                content: '';
                position: absolute;
                display: block;
                left: 50%;
                top: 40%;
                width: 0.25rem;
                height: 0.5rem;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: translate(-50%, -50%) rotate(45deg);
            }

.emp-portal-filter-stats[b-k96844b40u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-divider);
    padding-top: 1rem;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.emp-portal-filter-summary[b-k96844b40u] {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.emp-portal-stats-card[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--subtle-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-divider);
    transition: all 0.25s ease;
}

    .emp-portal-stats-card:hover[b-k96844b40u] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        border-color: rgba(var(--primary-rgb), 0.2);
    }

.emp-portal-stats-card-icon[b-k96844b40u] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    background-color: var(--primary-light);
    color: var(--primary);
}

    .emp-portal-stats-card-icon.primary[b-k96844b40u] {
        background-color: var(--primary-light);
        color: var(--primary);
    }

.emp-portal-stats-card-content[b-k96844b40u] {
    display: flex;
    flex-direction: column;
}

.emp-portal-stats-value[b-k96844b40u] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.emp-portal-stats-label[b-k96844b40u] {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.emp-portal-filter-actions[b-k96844b40u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 0.875rem;
}

/* Employees Grid Table */
.emp-portal-grid-container[b-k96844b40u] {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-divider);
    animation: fade-in-b-k96844b40u 0.4s ease-out;
}

.emp-portal-employees-table[b-k96844b40u] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 220px);
}

    .emp-portal-employees-table table[b-k96844b40u] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.8125rem;
    }

    .emp-portal-employees-table th[b-k96844b40u] {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0.75rem 0.875rem;
        text-align: left;
        font-weight: 600;
        background-color: var(--table-header-bg);
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.25s ease;
        user-select: none;
    }

        .emp-portal-employees-table th:hover[b-k96844b40u] {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .emp-portal-employees-table th[b-k96844b40u]::after {
            content: '';
            margin-left: 0.375rem;
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .emp-portal-employees-table th.emp-portal-sort-asc[b-k96844b40u]::after {
            content: '▲';
            font-size: 0.5rem;
            opacity: 1;
            color: var(--primary);
        }

        .emp-portal-employees-table th.emp-portal-sort-desc[b-k96844b40u]::after {
            content: '▼';
            font-size: 0.5rem;
            opacity: 1;
            color: var(--primary);
        }

    .emp-portal-employees-table td[b-k96844b40u] {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--border-divider);
        vertical-align: middle;
    }

    .emp-portal-employees-table tr:last-child td[b-k96844b40u] {
        border-bottom: none;
    }

    .emp-portal-employees-table tbody tr[b-k96844b40u] {
        transition: all 0.25s ease;
    }

        .emp-portal-employees-table tbody tr:hover[b-k96844b40u] {
            background-color: var(--bs-table-hover-bg);
        }

/* Row highlighting for special states */
.emp-portal-attention-row[b-k96844b40u] {
    border-left: 3px solid var(--warning);
}

    .emp-portal-attention-row:hover[b-k96844b40u] {
        background-color: rgba(var(--warning-rgb), 0.1);
    }

.emp-portal-incomplete-row[b-k96844b40u] {
    border-left: 3px solid var(--danger);
}

    .emp-portal-incomplete-row:hover[b-k96844b40u] {
        background-color: rgba(var(--danger-rgb), 0.1);
    }

.emp-portal-inactive-row[b-k96844b40u] {
    background-color: rgba(var(--text-secondary-rgb), 0.05);
    border-left: 3px solid var(--text-muted);
}

    .emp-portal-inactive-row td[b-k96844b40u] {
        opacity: 0.75;
    }

/* Table Cell Styling */
.emp-portal-status-dot[b-k96844b40u] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

    .emp-portal-status-dot.emp-portal-active[b-k96844b40u] {
        background-color: var(--success);
        box-shadow: 0 0 0 2px rgba(var(--success-rgb), 0.2);
    }

        .emp-portal-status-dot.emp-portal-active[b-k96844b40u]::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 50%;
            background: rgba(var(--success-rgb), 0.2);
            animation: pulse-success-b-k96844b40u 2s infinite;
        }

    .emp-portal-status-dot.emp-portal-inactive[b-k96844b40u] {
        background-color: var(--danger);
        box-shadow: 0 0 0 2px rgba(var(--danger-rgb), 0.2);
    }

/* Enhanced Status Cell */
td[data-label="Status"][b-k96844b40u] {
    position: relative;
    padding: 0.625rem 0.875rem !important;
    min-width: 90px;
}

    td[data-label="Status"] .emp-portal-status-dot[b-k96844b40u] {
        margin-right: 0.375rem;
    }

    td[data-label="Status"] .emp-portal-hire-date[b-k96844b40u] {
        font-size: 0.6875rem;
        color: var(--text-muted);
        display: block;
        white-space: nowrap;
        margin-top: 0.1875rem;
    }

    td[data-label="Status"] .emp-portal-status-icon[b-k96844b40u] {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        font-weight: 500;
    }

        td[data-label="Status"] .emp-portal-status-icon.emp-portal-active[b-k96844b40u] {
            color: var(--success);
        }

        td[data-label="Status"] .emp-portal-status-icon.emp-portal-inactive[b-k96844b40u] {
            color: var(--danger);
        }

        td[data-label="Status"] .emp-portal-status-icon i[b-k96844b40u] {
            font-size: 0.875rem;
        }

.emp-portal-employee-name-cell[b-k96844b40u] {
    min-width: 160px;
}

.emp-portal-employee-name[b-k96844b40u] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.1875rem;
    font-size: 0.875rem;
    display: block;
}

.emp-portal-employee-supervisor[b-k96844b40u] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}

.emp-portal-badge[b-k96844b40u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 16px;
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.emp-portal-company-cell[b-k96844b40u] {
    position: relative;
    padding-left: 0.75rem;
    min-width: 110px;
    font-size: 0.8125rem;
}

.emp-portal-contact-cell[b-k96844b40u] {
    min-width: 150px;
}

    .emp-portal-contact-cell div[b-k96844b40u] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 0.6875rem;
    }

        .emp-portal-contact-cell div:last-child[b-k96844b40u] {
            margin-bottom: 0;
        }

    .emp-portal-contact-cell a[b-k96844b40u] {
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .emp-portal-contact-cell a:hover[b-k96844b40u] {
            color: var(--primary);
        }

.emp-portal-indicators-cell[b-k96844b40u] {
    min-width: 110px;
    white-space: nowrap;
}

.emp-portal-warning-badge[b-k96844b40u] {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
    font-size: 0.6875rem;
    transition: all 0.25s ease;
    margin-right: 0.25rem;
}

    .emp-portal-warning-badge:hover[b-k96844b40u] {
        background-color: var(--danger);
        color: white;
        transform: scale(1.1);
    }

/* Special icon for incomplete employees */
.emp-portal-incomplete-badge[b-k96844b40u] {
    background-color: var(--danger);
    color: white;
}

.emp-portal-info-badge[b-k96844b40u] {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: rgba(var(--info-rgb), 0.1);
    color: var(--info);
    font-size: 0.6875rem;
    transition: all 0.25s ease;
    margin-right: 0.25rem;
}

    .emp-portal-info-badge:hover[b-k96844b40u] {
        background-color: var(--info);
        color: white;
        transform: scale(1.1);
    }

.emp-portal-actions-cell[b-k96844b40u] {
    min-width: 90px;
    white-space: nowrap;
}

/* Pagination */
.emp-portal-pagination[b-k96844b40u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    font-size: 0.8125rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 0 0 12px 12px;
}

.emp-portal-pagination-info[b-k96844b40u] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.emp-portal-pagination-controls[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.emp-portal-pages-desktop[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.emp-portal-pages-mobile[b-k96844b40u] {
    display: none;
    padding: 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.emp-portal-current-page[b-k96844b40u] {
    padding: 0.3125rem 0.625rem;
    background-color: var(--primary);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.emp-portal-page-size-selector[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .emp-portal-page-size-selector label[b-k96844b40u] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    .emp-portal-page-size-selector select[b-k96844b40u] {
        padding: 0.3125rem 1.625rem 0.3125rem 0.625rem;
        border-radius: 6px;
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.375rem center;
        background-size: 0.75em;
        cursor: pointer;
        transition: all 0.25s ease;
    }

/* Loading and Empty States */
.emp-portal-loading-state[b-k96844b40u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
    min-height: 240px;
}

.emp-portal-loading-spinner[b-k96844b40u] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-k96844b40u 1s infinite linear;
    margin-bottom: 1.25rem;
}

.emp-portal-loading-state p[b-k96844b40u] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.emp-portal-empty-state[b-k96844b40u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
    min-height: 240px;
}

    .emp-portal-empty-state > i[b-k96844b40u] {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .emp-portal-empty-state h3[b-k96844b40u] {
        margin: 0;
        margin-bottom: 0.5rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .emp-portal-empty-state p[b-k96844b40u] {
        margin: 0;
        margin-bottom: 1.25rem;
        color: var(--text-secondary);
        max-width: 26rem;
        font-size: 0.9375rem;
    }

/* Button Styles */
.emp-portal-btn[b-k96844b40u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg);
    color: var(--text-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
}

    .emp-portal-btn[b-k96844b40u]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .emp-portal-btn:focus:not(:active)[b-k96844b40u]::after {
        animation: ripple-b-k96844b40u 0.6s ease-out;
    }

.emp-portal-btn-primary[b-k96844b40u] {
    background: var(--primary-gradient, linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%));
    color: white;
    box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.25);
}

    .emp-portal-btn-primary:hover[b-k96844b40u] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.35);
    }

    .emp-portal-btn-primary:active[b-k96844b40u] {
        transform: translateY(0) scale(0.98);
    }

.emp-portal-btn-secondary[b-k96844b40u] {
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
}

    .emp-portal-btn-secondary:hover[b-k96844b40u] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.emp-portal-btn-success[b-k96844b40u] {
    background: var(--success-gradient, linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%));
    color: white;
    box-shadow: 0 3px 6px rgba(var(--success-rgb), 0.25);
}

    .emp-portal-btn-success:hover[b-k96844b40u] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(var(--success-rgb), 0.35);
    }

.emp-portal-btn-danger[b-k96844b40u] {
    background: var(--danger-gradient, linear-gradient(135deg, var(--danger) 0%, var(--danger-hover) 100%));
    color: white;
    box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.25);
}

    .emp-portal-btn-danger:hover[b-k96844b40u] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(var(--danger-rgb), 0.35);
    }

.emp-portal-btn-outline[b-k96844b40u] {
    background: transparent;
    border: 1px solid var(--border-divider);
}

    .emp-portal-btn-outline:hover[b-k96844b40u] {
        border-color: var(--primary);
        color: var(--primary);
    }

.emp-portal-btn-soft-danger[b-k96844b40u] {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

    .emp-portal-btn-soft-danger:hover[b-k96844b40u] {
        background-color: var(--danger);
        color: white;
    }

.emp-portal-btn-soft-success[b-k96844b40u] {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

    .emp-portal-btn-soft-success:hover[b-k96844b40u] {
        background-color: var(--success);
        color: white;
    }

.emp-portal-btn-filter[b-k96844b40u] {
    position: relative;
    padding-right: 2rem;
}

.emp-portal-filter-badge[b-k96844b40u] {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 16px;
    background-color: var(--primary);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3125rem;
    position: absolute;
    top: 0;
    right: -0.475rem;
    transform: translateY(-30%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.emp-portal-btn-icon[b-k96844b40u] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
}

.emp-portal-btn-sm[b-k96844b40u] {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 8px;
}

    .emp-portal-btn-sm i[b-k96844b40u] {
        font-size: 0.8125rem;
    }

.emp-portal-btn-icon.emp-portal-btn-sm[b-k96844b40u] {
    width: 1.875rem;
    height: 1.875rem;
}

.emp-portal-btn-bounce-hover:hover[b-k96844b40u] {
    animation: bounce-b-k96844b40u 0.75s;
}

.emp-portal-btn:disabled[b-k96844b40u] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Modal Styles */
.emp-portal-modal-overlay[b-k96844b40u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fade-in-b-k96844b40u 0.3s ease;
}

.emp-portal-modal[b-k96844b40u] {
    background-color: var(--modal-bg);
    border-radius: 14px;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1300px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-k96844b40u 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
    overflow: auto;
}

.emp-portal-modal-sm[b-k96844b40u] {
    max-width: 450px;
}

.emp-portal-modal-with-sidebar[b-k96844b40u] {
    max-width: 1300px;
    display: grid;
    grid-template-columns: 240px 1fr;
}

.emp-portal-modal-header[b-k96844b40u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    z-index: 10;
    border-radius: 14px 14px 0 0;
}

.emp-portal-modal-title[b-k96844b40u] {
    margin: 0;
}

.emp-portal-employee-modal-title[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

    .emp-portal-employee-modal-title h2[b-k96844b40u] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.emp-portal-employee-subtitle[b-k96844b40u] {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.emp-portal-employee-id[b-k96844b40u] {
    font-family: monospace;
    background-color: var(--subtle-bg);
    padding: 0.1875rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-divider);
    font-weight: 500;
}

.emp-portal-modal-close[b-k96844b40u] {
    background: none;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1rem;
    z-index: 12;
}

    .emp-portal-modal-close:hover[b-k96844b40u] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        transform: rotate(90deg);
    }

.emp-portal-modal-content[b-k96844b40u] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Mobile Tabs Navigation */
.emp-portal-mobile-tabs[b-k96844b40u] {
    display: none;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-divider);
    padding: 0.375rem 0;
    position: relative;
    overflow: hidden;
    z-index: 9;
}

.emp-portal-mobile-tabs-scroll[b-k96844b40u] {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0.75rem;
    scroll-snap-type: x mandatory;
}

    .emp-portal-mobile-tabs-scroll[b-k96844b40u]::-webkit-scrollbar {
        display: none;
    }

.emp-portal-mobile-tab[b-k96844b40u] {
    flex: 0 0 auto;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    scroll-snap-align: center;
}

    .emp-portal-mobile-tab:hover[b-k96844b40u] {
        color: var(--primary);
    }

    .emp-portal-mobile-tab.active[b-k96844b40u] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.25);
    }

    .emp-portal-mobile-tab i[b-k96844b40u] {
        font-size: 0.9375rem;
    }

.emp-portal-modal-sidebar[b-k96844b40u] {
    background-color: var(--subtle-bg);
    border-right: 1px solid var(--border-divider);
    padding: 1.25rem 0;
    overflow-y: auto;
}

.emp-portal-sidebar-tabs[b-k96844b40u] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.emp-portal-sidebar-section[b-k96844b40u] {
    margin-bottom: 1rem;
}

.emp-portal-sidebar-section-title[b-k96844b40u] {
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.emp-portal-sidebar-tab[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
    width: 100%;
}

    .emp-portal-sidebar-tab:hover[b-k96844b40u] {
        background-color: rgba(var(--primary-rgb), 0.05);
        color: var(--primary);
    }

    .emp-portal-sidebar-tab.emp-portal-active[b-k96844b40u] {
        background-color: var(--primary-light);
        color: var(--primary);
        font-weight: 600;
        border-left-color: var(--primary);
    }

    .emp-portal-sidebar-tab i[b-k96844b40u] {
        font-size: 0.9375rem;
        width: 1.25rem;
        text-align: center;
    }

.emp-portal-modal-main[b-k96844b40u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.emp-portal-modal-body[b-k96844b40u] {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.emp-portal-modal-footer[b-k96844b40u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    border-radius: 0 0 14px 14px;
}

.emp-portal-modal-footer-left[b-k96844b40u],
.emp-portal-modal-footer-right[b-k96844b40u] {
    display: flex;
    gap: 0.75rem;
}

/* Quick Contact Modal */
.emp-portal-contact-options[b-k96844b40u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.emp-portal-contact-option[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    border: 1px solid var(--border-divider);
    transition: all 0.25s ease;
    color: var(--text-primary);
    text-decoration: none;
}

    .emp-portal-contact-option:hover[b-k96844b40u] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

    .emp-portal-contact-option i[b-k96844b40u] {
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        color: var(--primary);
        border-radius: 10px;
        font-size: 1rem;
    }

    .emp-portal-contact-option.emergency i[b-k96844b40u] {
        background-color: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
    }

.emp-portal-contact-option-title[b-k96844b40u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.1875rem;
}

.emp-portal-contact-option-value[b-k96844b40u] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.emp-portal-contact-message[b-k96844b40u] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.625rem;
    border-radius: 8px;
    border: 1px solid var(--border-divider);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    transition: all 0.25s ease;
}

    .emp-portal-contact-message:focus[b-k96844b40u] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    }

/* Confirmation Modal */
.emp-portal-confirmation-content[b-k96844b40u] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem;
}

.emp-portal-confirmation-icon[b-k96844b40u] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .emp-portal-confirmation-icon.warning[b-k96844b40u] {
        background-color: rgba(var(--warning-rgb), 0.1);
        color: var(--warning);
    }

    .emp-portal-confirmation-icon.success[b-k96844b40u] {
        background-color: rgba(var(--success-rgb), 0.1);
        color: var(--success);
    }

.emp-portal-confirmation-content p[b-k96844b40u] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

    .emp-portal-confirmation-content p:last-child[b-k96844b40u] {
        margin-bottom: 0;
    }

    .emp-portal-confirmation-content p strong[b-k96844b40u] {
        color: var(--text-primary);
    }

/* Toast Notifications */
.emp-portal-toast[b-k96844b40u] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    max-width: 400px;
    width: calc(100% - 2.5rem);
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    animation: slide-in-right-b-k96844b40u 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .emp-portal-toast.error[b-k96844b40u] {
        border-left: 4px solid var(--danger);
    }

    .emp-portal-toast.success[b-k96844b40u] {
        border-left: 4px solid var(--success);
    }

    .emp-portal-toast.warning[b-k96844b40u] {
        border-left: 4px solid var(--warning);
    }

    .emp-portal-toast.info[b-k96844b40u] {
        border-left: 4px solid var(--info);
    }

.emp-portal-toast-icon[b-k96844b40u] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.125rem;
    flex-shrink: 0;
    animation: notification-icon-pop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.emp-portal-toast.error .emp-portal-toast-icon[b-k96844b40u] {
    color: var(--danger);
    background-color: rgba(var(--danger-rgb), 0.1);
}

.emp-portal-toast.success .emp-portal-toast-icon[b-k96844b40u] {
    color: var(--success);
    background-color: rgba(var(--success-rgb), 0.1);
}

.emp-portal-toast.warning .emp-portal-toast-icon[b-k96844b40u] {
    color: var(--warning);
    background-color: rgba(var(--warning-rgb), 0.1);
}

.emp-portal-toast.info .emp-portal-toast-icon[b-k96844b40u] {
    color: var(--info);
    background-color: rgba(var(--info-rgb), 0.1);
}

.emp-portal-toast-content[b-k96844b40u] {
    flex: 1;
    min-width: 0;
}

    .emp-portal-toast-content h4[b-k96844b40u] {
        margin: 0 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .emp-portal-toast-content p[b-k96844b40u] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        word-break: break-word;
    }

.emp-portal-toast-close[b-k96844b40u] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .emp-portal-toast-close:hover[b-k96844b40u] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Notice Panel */
.emp-portal-notice-panel[b-k96844b40u] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background-color: rgba(var(--info-rgb), 0.1);
    border-radius: 12px;
    border-left: 4px solid var(--info);
}

    .emp-portal-notice-panel i[b-k96844b40u] {
        font-size: 1.25rem;
        color: var(--info);
        flex-shrink: 0;
    }

    .emp-portal-notice-panel p[b-k96844b40u] {
        margin: 0;
        font-size: 0.9375rem;
        color: var(--text-primary);
    }

/* Display Utilities */
.emp-portal-hide-sm[b-k96844b40u] {
    display: table-cell;
}

.emp-portal-hide-md[b-k96844b40u] {
    display: table-cell;
}

.emp-portal-nowrap[b-k96844b40u] {
    white-space: nowrap;
}

.emp-portal-text-muted[b-k96844b40u] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Animations */
@keyframes fade-in-b-k96844b40u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-down-b-k96844b40u {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-top-b-k96844b40u {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-k96844b40u {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes modal-in-b-k96844b40u {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin-b-k96844b40u {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-success-b-k96844b40u {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes ripple-b-k96844b40u {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes bounce-b-k96844b40u {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive Table Enhancements */
@media (max-width: 992px) {
    .emp-portal-modal-with-sidebar[b-k96844b40u] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        max-width: 95vw;
    }

    .emp-portal-modal-header[b-k96844b40u] {
        grid-column: 1;
        grid-row: 1;
    }

    .emp-portal-modal-sidebar[b-k96844b40u] {
        display: none;
    }

    .emp-portal-mobile-tabs[b-k96844b40u] {
        display: block;
        grid-column: 1;
        grid-row: 2;
    }

    .emp-portal-modal-main[b-k96844b40u] {
        grid-column: 1;
        grid-row: 3;
    }

    .emp-portal-header-content[b-k96844b40u] {
        flex-direction: column;
        align-items: flex-start;
    }

    .emp-portal-header-actions[b-k96844b40u] {
        margin-top: 0.75rem;
        align-self: flex-end;
    }

    .emp-portal-search-filters[b-k96844b40u] {
        flex-direction: column;
        align-items: flex-start;
    }

    .emp-portal-search-container[b-k96844b40u] {
        width: 100%;
        max-width: none;
    }

    .emp-portal-essential-filters[b-k96844b40u] {
        width: 100%;
        margin-top: 0.75rem;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .emp-portal-employees-table[b-k96844b40u] {
        max-height: calc(100vh - 280px);
    }
}

@media (max-width: 768px) {
    .emp-portal-header[b-k96844b40u] {
        padding: 0.875rem 1rem;
    }

    .emp-portal-header-title h1[b-k96844b40u] {
        font-size: 1.125rem;
    }

    .emp-portal-header-title p[b-k96844b40u] {
        font-size: 0.75rem;
    }

    .emp-portal-header-title i[b-k96844b40u] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.125rem;
    }

    .emp-portal-search-filters[b-k96844b40u] {
        padding: 0.75rem;
    }

    .emp-portal-search-bar input[b-k96844b40u] {
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    }

    .emp-portal-search-bar i[b-k96844b40u] {
        left: 0.75rem;
    }

    .emp-portal-status-filter[b-k96844b40u] {
        padding: 0.3125rem 0.5rem;
        font-size: 0.75rem;
    }

    .emp-portal-company-filter[b-k96844b40u] {
        width: 100%;
        margin-right: 0;
        justify-content: space-between;
    }

        .emp-portal-company-filter select[b-k96844b40u] {
            flex: 1;
        }

    .emp-portal-switch-filter[b-k96844b40u] {
        width: calc(50% - 0.375rem);
    }

    .emp-portal-filter-row[b-k96844b40u] {
        grid-template-columns: 1fr;
    }

    .emp-portal-filter[b-k96844b40u] {
        width: 100%;
    }

    .emp-portal-date-range[b-k96844b40u] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .emp-portal-date-separator[b-k96844b40u] {
        display: none;
    }

    .emp-portal-table[b-k96844b40u] {
        border: 0;
    }

    .emp-portal-employees-table table[b-k96844b40u] {
        display: block;
    }

    .emp-portal-employees-table thead[b-k96844b40u] {
        display: none;
    }

    .emp-portal-employees-table tbody[b-k96844b40u], .emp-portal-employees-table tr[b-k96844b40u] {
        display: block;
        width: 100%;
    }

    .emp-portal-employees-table tr[b-k96844b40u] {
        margin-bottom: 0.625rem;
        display: block;
        border: 1px solid var(--border-divider);
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        position: relative;
    }

        .emp-portal-employees-table tr.emp-portal-attention-row[b-k96844b40u] {
            border-left: 3px solid var(--warning);
        }

        .emp-portal-employees-table tr.emp-portal-incomplete-row[b-k96844b40u] {
            border-left: 3px solid var(--danger);
        }

        .emp-portal-employees-table tr.emp-portal-inactive-row[b-k96844b40u] {
            border-left: 3px solid var(--text-muted);
        }

    .emp-portal-employees-table td[b-k96844b40u] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.75rem 0.875rem;
        text-align: right;
        border-bottom: 1px solid var(--border-divider);
        flex-wrap: wrap;
    }

        .emp-portal-employees-table td:last-child[b-k96844b40u] {
            border-bottom: 0;
        }

        .emp-portal-employees-table td[b-k96844b40u]:before {
            content: attr(data-label);
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            text-align: left;
            margin-right: 0.875rem;
            white-space: nowrap;
            min-width: 80px;
        }

        .emp-portal-employees-table td.emp-portal-actions-cell[b-k96844b40u] {
            justify-content: center;
            background-color: var(--subtle-bg);
            padding: 0.75rem 0.5rem;
            width: 100% !important;
        }

            .emp-portal-employees-table td.emp-portal-actions-cell[b-k96844b40u]:before {
                display: none;
            }

    .emp-portal-actions-buttons[b-k96844b40u] {
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

    .emp-portal-hide-sm[b-k96844b40u], .emp-portal-hide-md[b-k96844b40u] {
        display: flex;
    }

    .emp-portal-filter-stats[b-k96844b40u] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .emp-portal-filter-summary[b-k96844b40u] {
        flex-direction: column;
        gap: 0.625rem;
        width: 100%;
    }

    .emp-portal-filter-actions[b-k96844b40u] {
        width: 100%;
    }

    .emp-portal-pagination[b-k96844b40u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .emp-portal-pagination-controls[b-k96844b40u] {
        width: 100%;
        justify-content: center;
    }

    .emp-portal-pages-desktop[b-k96844b40u] {
        display: none;
    }

    .emp-portal-pages-mobile[b-k96844b40u] {
        display: block;
    }

    .emp-portal-page-size-selector[b-k96844b40u] {
        width: 100%;
        justify-content: flex-end;
    }

    .emp-portal-modal[b-k96844b40u] {
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }

    .emp-portal-modal-overlay[b-k96844b40u] {
        padding: 0;
    }

    .emp-portal-modal-header[b-k96844b40u], .emp-portal-modal-footer[b-k96844b40u] {
        border-radius: 0;
    }

    .emp-portal-modal-footer[b-k96844b40u] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .emp-portal-modal-footer-left[b-k96844b40u], .emp-portal-modal-footer-right[b-k96844b40u] {
        width: 100%;
        justify-content: space-between;
    }

    .emp-portal-modal-main[b-k96844b40u] {
        max-height: calc(100vh - 110px);
    }

    .emp-portal-modal-body[b-k96844b40u] {
        padding: 1rem;
    }

    .emp-portal-toast[b-k96844b40u] {
        bottom: 0.875rem;
        right: 0.875rem;
        max-width: calc(100% - 1.75rem);
    }

    .emp-portal-confirmation-content[b-k96844b40u] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .emp-portal-confirmation-icon[b-k96844b40u] {
        margin-bottom: 0.875rem;
    }
}

@media (max-width: 576px) {
    .emp-portal-main-content[b-k96844b40u] {
        padding: 0.625rem;
    }

    .emp-portal-search-filters[b-k96844b40u] {
        padding: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .emp-portal-status-filters[b-k96844b40u] {
        width: 100%;
    }

    .emp-portal-status-filter[b-k96844b40u] {
        flex: 1;
        text-align: center;
    }

    .emp-portal-switch-filter[b-k96844b40u] {
        width: 100%;
        margin-right: 0;
    }

    .emp-portal-employees-table[b-k96844b40u] {
        font-size: 0.75rem;
    }

        .emp-portal-employees-table th[b-k96844b40u] {
            padding: 0.625rem 0.5rem;
            font-size: 0.6875rem;
        }

        .emp-portal-employees-table td[b-k96844b40u] {
            padding: 0.625rem 0.5rem;
        }

    .emp-portal-contact-cell div[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-warning-badge[b-k96844b40u],
    .emp-portal-info-badge[b-k96844b40u] {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.625rem;
    }

    .emp-portal-btn-sm[b-k96844b40u] {
        padding: 0.3125rem 0.5rem;
    }

    .emp-portal-btn-icon.emp-portal-btn-sm[b-k96844b40u] {
        width: 1.625rem;
        height: 1.625rem;
    }

    .emp-portal-btn-sm span[b-k96844b40u] {
        display: none;
    }

    .emp-portal-header[b-k96844b40u] {
        padding: 0.75rem;
    }

    .emp-portal-header-title[b-k96844b40u] {
        gap: 0.625rem;
    }

        .emp-portal-header-title i[b-k96844b40u] {
            width: 2rem;
            height: 2rem;
            font-size: 1rem;
        }

        .emp-portal-header-title h1[b-k96844b40u] {
            font-size: 1.125rem;
        }

    .emp-portal-modal-body[b-k96844b40u], .emp-portal-modal-header[b-k96844b40u], .emp-portal-modal-footer[b-k96844b40u] {
        padding: 0.875rem;
    }

    .emp-portal-toast[b-k96844b40u] {
        padding: 0.875rem;
        gap: 0.75rem;
    }

    .emp-portal-toast-icon[b-k96844b40u] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .emp-portal-mobile-tab span[b-k96844b40u] {
        display: none;
    }

    .emp-portal-mobile-tab i[b-k96844b40u] {
        font-size: 1.125rem;
    }

    .emp-portal-btn span[b-k96844b40u] {
        display: none;
    }

    .emp-portal-btn i[b-k96844b40u] {
        margin: 0;
        font-size: 1.125rem;
    }

    .emp-portal-modal-footer[b-k96844b40u] {
        padding: 0.625rem;
    }

    .emp-portal-btn[b-k96844b40u] {
        width: auto;
        padding: 0.5rem;
    }

    .emp-portal-employee-name[b-k96844b40u] {
        font-size: 0.8125rem;
    }

    .emp-portal-employee-supervisor[b-k96844b40u] {
        font-size: 0.625rem;
    }
}

/* Especially for very small screens (400px or less) */
@media (max-width: 400px) {
    .emp-portal-main-content[b-k96844b40u] {
        padding: 0.5rem;
    }

    .emp-portal-search-filters[b-k96844b40u] {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .emp-portal-header-title h1[b-k96844b40u] {
        font-size: 1rem;
    }

    .emp-portal-header-title p[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-header-title i[b-k96844b40u] {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.9375rem;
    }

    .emp-portal-search-bar input[b-k96844b40u] {
        padding: 0.4375rem 0.625rem 0.4375rem 2rem;
        font-size: 0.75rem;
    }

    .emp-portal-search-bar i[b-k96844b40u] {
        left: 0.625rem;
        font-size: 0.8125rem;
    }

    .emp-portal-status-filter[b-k96844b40u] {
        padding: 0.25rem 0.4375rem;
        font-size: 0.6875rem;
    }

    .emp-portal-company-filter label[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-company-filter select[b-k96844b40u] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }

    .emp-portal-btn-outline.emp-portal-btn-sm[b-k96844b40u] {
        padding: 0.3125rem 0.4375rem;
        font-size: 0.6875rem;
    }

    .emp-portal-switch-label[b-k96844b40u] {
        font-size: 0.75rem;
    }

    .emp-portal-switch[b-k96844b40u] {
        width: 30px;
        height: 16px;
    }

    .emp-portal-switch-slider[b-k96844b40u]:before {
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
    }

    .emp-portal-switch input:checked + .emp-portal-switch-slider[b-k96844b40u]:before {
        transform: translateX(14px);
    }

    .emp-portal-badge[b-k96844b40u] {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }

    .emp-portal-grid-controls[b-k96844b40u] {
        padding: 0.375rem 0.5rem;
    }

    .emp-portal-sort-dropdown label[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-sort-dropdown select[b-k96844b40u] {
        padding: 0.3125rem 1.5rem 0.3125rem 0.5rem;
        font-size: 0.6875rem;
    }

    .emp-portal-employees-table td[b-k96844b40u]:before {
        font-size: 0.625rem;
        min-width: 70px;
    }

    .emp-portal-employees-table td[b-k96844b40u] {
        padding: 0.5rem 0.625rem;
    }

    .emp-portal-employees-table tr[b-k96844b40u] {
        margin-bottom: 0.5rem;
    }

    .emp-portal-actions-cell button[b-k96844b40u] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .emp-portal-warning-badge[b-k96844b40u], .emp-portal-info-badge[b-k96844b40u] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .emp-portal-btn-icon.emp-portal-btn-sm[b-k96844b40u] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .emp-portal-pagination[b-k96844b40u] {
        padding: 0.625rem 0.75rem;
    }

    .emp-portal-pagination-info[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-pagination-controls[b-k96844b40u] {
        gap: 0.1875rem;
    }

    .emp-portal-current-page[b-k96844b40u] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Compact header in modal */
    .emp-portal-employee-modal-title h2[b-k96844b40u] {
        font-size: 1.125rem;
    }

    .emp-portal-employee-subtitle[b-k96844b40u] {
        font-size: 0.6875rem;
    }

    .emp-portal-modal-close[b-k96844b40u] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    .emp-portal-modal-body[b-k96844b40u] {
        padding: 0.75rem;
    }

    /* Mobile tabs */
    .emp-portal-mobile-tabs[b-k96844b40u] {
        padding: 0.25rem 0;
    }

    .emp-portal-mobile-tab[b-k96844b40u] {
        padding: 0.375rem 0.5rem;
    }

        .emp-portal-mobile-tab i[b-k96844b40u] {
            font-size: 1rem;
        }

    .emp-portal-mobile-tabs-scroll[b-k96844b40u] {
        padding: 0 0.5rem;
    }

    /* Toast notifications */
    .emp-portal-toast[b-k96844b40u] {
        padding: 0.75rem;
        bottom: 0.625rem;
        right: 0.625rem;
    }

    .emp-portal-toast-content h4[b-k96844b40u] {
        font-size: 0.9375rem;
    }

    .emp-portal-toast-content p[b-k96844b40u] {
        font-size: 0.8125rem;
    }

    .emp-portal-toast-icon[b-k96844b40u] {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.9375rem;
    }

    /* Filter handling for very small screens */
    .emp-portal-essential-filters[b-k96844b40u] {
        gap: 0.5rem;
    }

    .emp-portal-filter-badge[b-k96844b40u] {
        min-width: 1.125rem;
        height: 1.125rem;
        font-size: 0.5625rem;
    }

    /* Make buttons more compact but still touchable */
    .emp-portal-btn[b-k96844b40u] {
        padding: 0.4375rem;
    }

    .emp-portal-btn-icon[b-k96844b40u] {
        width: 2rem;
        height: 2rem;
    }
}

.emp-portal-btn-icon span[b-k96844b40u] {
    display: none;
}

/* Ensure icon button styling is consistent */
.emp-portal-btn-icon.emp-portal-btn-sm[b-k96844b40u] {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}
button.emp-portal-btn.emp-portal-btn-outline.emp-portal-btn-sm.emp-portal-btn-filter[b-k96844b40u] {
    overflow: visible !important;
}
/* Collapsible Search Content for Very Small Screens */
@media (max-width: 400px) {
    .emp-portal-search-header[b-k96844b40u] {
        display: flex;
    }

    .emp-portal-search-title i[b-k96844b40u] {
        transition: transform 0.3s ease;
    }

    .emp-portal-search-title.collapsed i[b-k96844b40u] {
        transform: rotate(-90deg);
    }
}

/* Enhanced Status Column - Replace Text with Icon and Hire Date */
td[data-label="Status"][b-k96844b40u] {
    position: relative;
}

    td[data-label="Status"] .emp-portal-status-dot[b-k96844b40u] {
        margin-right: 0;
    }

    td[data-label="Status"] .emp-portal-hide-sm[b-k96844b40u] {
        display: none;
    }

    td[data-label="Status"] .emp-portal-status-info[b-k96844b40u] {
        display: flex;
        flex-direction: row;
        gap: 0.1875rem;
    }

    td[data-label="Status"] .emp-portal-status-icon[b-k96844b40u] {
        display: flex;
        align-items: center;
        gap: 0.3125rem;
        font-size: 0.75rem;
        font-weight: 500;
    }

        td[data-label="Status"] .emp-portal-status-icon i[b-k96844b40u] {
            font-size: 0.9375rem;
        }

        td[data-label="Status"] .emp-portal-status-icon.emp-portal-active[b-k96844b40u] {
            color: var(--success-color);
        }

        td[data-label="Status"] .emp-portal-status-icon.emp-portal-inactive[b-k96844b40u] {
            color: var(--danger-color);
        }

    td[data-label="Status"] .emp-portal-hire-date[b-k96844b40u] {
        font-size: 0.6875rem;
        color: var(--text-muted);
        display: block;
        white-space: nowrap;
    }

/* Enhanced Status Column For Mobile */
@media (max-width: 768px) {
    td[data-label="Status"][b-k96844b40u] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        td[data-label="Status"][b-k96844b40u]:before {
            margin-right: 0.5rem;
        }

    .emp-portal-status-info[b-k96844b40u] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeTrainingInfo.razor.rz.scp.css */
/* ====== Employee Training Styles ====== */

/* Form Section Container */
.em-form-section[b-r32my2zi0d] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-r32my2zi0d 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-r32my2zi0d] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-r32my2zi0d]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), var(--info));
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-r32my2zi0d]::before {
        transform: scaleX(1.5);
    }

    /* Different colors for each section */
    .em-form-section:nth-child(1)[b-r32my2zi0d]::before {
        background: linear-gradient(to bottom, var(--primary), var(--info));
    }

    .em-form-section:nth-child(2)[b-r32my2zi0d]::before {
        background: linear-gradient(to bottom, var(--success), var(--warning));
    }

/* Section Header with Action Buttons */
.em-section-header[b-r32my2zi0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-r32my2zi0d]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-r32my2zi0d]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-r32my2zi0d] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gradient);
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.2);
    }

.em-form-section:nth-child(1) .em-section-title i[b-r32my2zi0d] {
    background: var(--primary-gradient);
}

.em-form-section:nth-child(2) .em-section-title i[b-r32my2zi0d] {
    background: var(--success-gradient);
}

.em-form-section:hover .em-section-title i[b-r32my2zi0d] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.em-section-actions[b-r32my2zi0d] {
    display: flex;
    gap: 0.5rem;
}

/* Loading State */
.em-loading[b-r32my2zi0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.em-loading-spinner[b-r32my2zi0d] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-r32my2zi0d 1s infinite linear;
    margin-bottom: 1rem;
}

/* Empty State */
.em-empty-state[b-r32my2zi0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
    animation: fade-in-b-r32my2zi0d 0.5s ease both;
}

    .em-empty-state > i[b-r32my2zi0d] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
    }

    .em-empty-state h3[b-r32my2zi0d] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-r32my2zi0d] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-r32my2zi0d] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Training Filters */
.em-training-filters[b-r32my2zi0d] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    border: 1px solid var(--border-divider);
    animation: fade-in-down-b-r32my2zi0d 0.4s ease both;
}

.em-search-field[b-r32my2zi0d] {
    flex-grow: 1;
    position: relative;
    min-width: 200px;
}

    .em-search-field input[b-r32my2zi0d] {
        width: 100%;
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.25s ease;
    }

        .em-search-field input:focus[b-r32my2zi0d] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

    .em-search-field i[b-r32my2zi0d] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.25s ease;
    }

    .em-search-field input:focus + i[b-r32my2zi0d] {
        color: var(--primary);
    }

.em-clear-search[b-r32my2zi0d] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .em-clear-search:hover[b-r32my2zi0d] {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-50%) rotate(90deg);
    }

/* Status Filters */
.em-status-filters[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.em-status-filter[b-r32my2zi0d] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .em-status-filter:hover[b-r32my2zi0d] {
        color: var(--primary);
    }

    .em-status-filter.active[b-r32my2zi0d] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

/* Training Grid */
.em-training-grid[b-r32my2zi0d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Training Card */
.em-training-card[b-r32my2zi0d] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-fade-in-b-r32my2zi0d 0.5s ease both;
    animation-delay: calc(var(--card-index, 0) * 0.1s);
    position: relative;
}

    .em-training-card:hover[b-r32my2zi0d] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

    .em-training-card.em-training-completed[b-r32my2zi0d] {
        border-left: 3px solid var(--success);
    }

    .em-training-card.em-training-upcoming[b-r32my2zi0d] {
        border-left: 3px solid var(--info);
    }

    .em-training-card.em-training-failed[b-r32my2zi0d] {
        border-left: 3px solid var(--danger);
    }

    .em-training-card.em-training-withdrawn[b-r32my2zi0d] {
        border-left: 3px solid var(--warning);
    }

    .em-training-card.em-training-noshow[b-r32my2zi0d] {
        border-left: 3px solid var(--danger);
        opacity: 0.8;
    }

.em-training-header[b-r32my2zi0d] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-training-info[b-r32my2zi0d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.em-training-name[b-r32my2zi0d] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.em-training-type[b-r32my2zi0d] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-training-status[b-r32my2zi0d] {
    font-size: 0.75rem;
}

/* Status badges */
.em-status-completed[b-r32my2zi0d] {
    background-color: var(--success-light);
    color: var(--success);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-status-failed[b-r32my2zi0d] {
    background-color: var(--danger-light);
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-status-partial[b-r32my2zi0d] {
    background-color: var(--warning-light);
    color: var(--warning);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-status-withdrawn[b-r32my2zi0d] {
    background-color: var(--text-muted);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-status-registered[b-r32my2zi0d] {
    background-color: var(--info-light);
    color: var(--info);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.em-training-details[b-r32my2zi0d] {
    padding: 1rem;
}

.em-training-dates[b-r32my2zi0d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-reg-date[b-r32my2zi0d], .em-session-dates[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.em-location[b-r32my2zi0d], .em-trainer[b-r32my2zi0d], .em-score[b-r32my2zi0d], .em-certificate[b-r32my2zi0d], .em-training-notes[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-upcoming-badge[b-r32my2zi0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--info-light);
    color: var(--info);
    margin-top: 0.25rem;
}

.em-required-badge[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary);
    margin-top: 0.5rem;
    background-color: var(--primary-light);
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-md);
    animation: pulse-primary-b-r32my2zi0d 3s infinite;
    font-weight: 600;
}

.em-training-actions[b-r32my2zi0d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Requirements section */
.em-requirements-grid[b-r32my2zi0d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.em-requirement-card[b-r32my2zi0d] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: card-fade-in-b-r32my2zi0d 0.5s ease both;
    position: relative;
}

    .em-requirement-card:hover[b-r32my2zi0d] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
    }

    .em-requirement-card.em-requirement-expired[b-r32my2zi0d] {
        border-left: 3px solid var(--danger);
    }

    .em-requirement-card.em-requirement-expiring[b-r32my2zi0d] {
        border-left: 3px solid var(--warning);
    }

.em-requirement-header[b-r32my2zi0d] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

.em-requirement-info[b-r32my2zi0d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.em-requirement-name[b-r32my2zi0d] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.em-requirement-badge[b-r32my2zi0d] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background-color: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: fit-content;
}

.em-requirement-expiry[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-expired[b-r32my2zi0d] {
    color: var(--danger);
    font-weight: 600;
}

.em-expiring[b-r32my2zi0d] {
    color: var(--warning);
    font-weight: 600;
}

.em-requirement-details[b-r32my2zi0d] {
    padding: 1rem;
}

.em-requirement-description[b-r32my2zi0d] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.em-requirement-actions[b-r32my2zi0d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-divider);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Modal Styles */
.em-modal-overlay[b-r32my2zi0d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-r32my2zi0d 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-r32my2zi0d] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-r32my2zi0d 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-header[b-r32my2zi0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

    .em-modal-header h3[b-r32my2zi0d] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-close[b-r32my2zi0d] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-r32my2zi0d] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-r32my2zi0d] {
    padding: 1.25rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-r32my2zi0d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Styles */
.em-form-group[b-r32my2zi0d] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-r32my2zi0d] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-r32my2zi0d] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
    }

    .em-form-group input[b-r32my2zi0d],
    .em-form-group select[b-r32my2zi0d],
    .em-form-group textarea[b-r32my2zi0d] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-r32my2zi0d],
        .em-form-group select:focus[b-r32my2zi0d],
        .em-form-group textarea:focus[b-r32my2zi0d] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

.em-required[b-r32my2zi0d] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-r32my2zi0d 2s infinite;
}

.em-input-error[b-r32my2zi0d] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-r32my2zi0d] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-r32my2zi0d] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-r32my2zi0d 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.em-checkbox[b-r32my2zi0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

    .em-checkbox input[b-r32my2zi0d] {
        width: auto;
        margin: 0;
        cursor: pointer;
    }

/* Confirmation Modal */
.em-confirmation-content[b-r32my2zi0d] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.em-confirmation-icon[b-r32my2zi0d] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.em-confirmation-content p[b-r32my2zi0d] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

    .em-confirmation-content p:last-child[b-r32my2zi0d] {
        margin-bottom: 0;
    }

.em-confirmation-content strong[b-r32my2zi0d] {
    color: var(--text-primary);
}

/* Toast Notification */
.em-toast[b-r32my2zi0d] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-r32my2zi0d 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-r32my2zi0d] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-r32my2zi0d] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-r32my2zi0d] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-r32my2zi0d] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-r32my2zi0d] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-r32my2zi0d] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-r32my2zi0d] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-r32my2zi0d] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-r32my2zi0d] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-r32my2zi0d] {
    flex: 1;
}

.em-toast-title[b-r32my2zi0d] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-r32my2zi0d] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-r32my2zi0d] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-r32my2zi0d] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Button Styles */
.em-btn[b-r32my2zi0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-primary[b-r32my2zi0d] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-r32my2zi0d] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

.em-btn-secondary[b-r32my2zi0d] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-r32my2zi0d] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-r32my2zi0d] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-r32my2zi0d] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-r32my2zi0d] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-r32my2zi0d] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-sm[b-r32my2zi0d] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn:disabled[b-r32my2zi0d] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn:active[b-r32my2zi0d] {
    transform: translateY(1px);
}

/* Animations */
@keyframes fade-in-b-r32my2zi0d {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-r32my2zi0d {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-r32my2zi0d {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes card-fade-in-b-r32my2zi0d {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin-b-r32my2zi0d {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-r32my2zi0d {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-r32my2zi0d {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-r32my2zi0d {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-r32my2zi0d {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-r32my2zi0d {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-training-grid[b-r32my2zi0d], .em-requirements-grid[b-r32my2zi0d] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .em-training-filters[b-r32my2zi0d] {
        flex-direction: column;
        align-items: stretch;
    }

    .em-status-filters[b-r32my2zi0d] {
        overflow-x: auto;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .em-training-grid[b-r32my2zi0d], .em-requirements-grid[b-r32my2zi0d] {
        grid-template-columns: 1fr;
    }

    .em-section-header[b-r32my2zi0d] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-r32my2zi0d] {
        width: 100%;
        justify-content: space-between;
    }

    .em-modal[b-r32my2zi0d] {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-r32my2zi0d] {
        max-height: calc(100vh - 170px);
    }

    .em-training-header[b-r32my2zi0d], .em-requirement-header[b-r32my2zi0d] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .em-training-status[b-r32my2zi0d], .em-requirement-info[b-r32my2zi0d] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .em-form-section[b-r32my2zi0d] {
        padding: 1rem;
    }

    .em-training-actions[b-r32my2zi0d], .em-requirement-actions[b-r32my2zi0d] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .em-training-actions .em-btn[b-r32my2zi0d], .em-requirement-actions .em-btn[b-r32my2zi0d] {
            flex: 1;
        }

    .em-modal-footer[b-r32my2zi0d] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

        .em-modal-footer .em-btn[b-r32my2zi0d] {
            width: 100%;
        }

    .em-toast[b-r32my2zi0d] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }
}
/* _content/MajestyPortal/Components/Pages/Employees/EmployeeWarningInfo.razor.rz.scp.css */
/* ====== Employee Warning Information Styles ====== */

/* Form Section Container */
.em-form-section[b-itsu21al92] {
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: fade-in-up-b-itsu21al92 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: relative;
    overflow: hidden;
}

    .em-form-section:hover[b-itsu21al92] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .em-form-section[b-itsu21al92]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-gradient);
        transform-origin: left;
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }

    .em-form-section:hover[b-itsu21al92]::before {
        transform: scaleX(1.5);
    }

/* Section Header with Actions */
.em-section-header[b-itsu21al92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
    position: relative;
}

    .em-section-header[b-itsu21al92]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease;
    }

.em-form-section:hover .em-section-header[b-itsu21al92]::after {
    transform: scaleX(1);
}

/* Section Title */
.em-section-title[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

    .em-section-title i[b-itsu21al92] {
        color: white;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--warning), var(--danger));
        border-radius: var(--border-radius-md);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(var(--warning-rgb), 0.2);
    }

.em-form-section:hover .em-section-title i[b-itsu21al92] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(var(--warning-rgb), 0.3);
}

/* Section Actions */
.em-section-actions[b-itsu21al92] {
    display: flex;
    gap: 0.5rem;
}

/* Warning Summary Cards */
.em-warning-summary[b-itsu21al92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.em-summary-card[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    flex: 1;
    min-width: 190px;
    transition: all 0.3s ease;
    animation: fade-in-up-b-itsu21al92 0.4s ease both;
}

    .em-summary-card:nth-child(1)[b-itsu21al92] {
        animation-delay: 0.1s;
    }

    .em-summary-card:nth-child(2)[b-itsu21al92] {
        animation-delay: 0.2s;
    }

    .em-summary-card:nth-child(3)[b-itsu21al92] {
        animation-delay: 0.3s;
    }

    .em-summary-card:nth-child(4)[b-itsu21al92] {
        animation-delay: 0.4s;
    }

    .em-summary-card:nth-child(5)[b-itsu21al92] {
        animation-delay: 0.5s;
    }

    .em-summary-card:hover[b-itsu21al92] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-summary-card.success[b-itsu21al92] {
        border-left: 3px solid var(--success);
    }

    .em-summary-card.warning[b-itsu21al92] {
        border-left: 3px solid var(--warning);
    }

    .em-summary-card.danger[b-itsu21al92] {
        border-left: 3px solid var(--danger);
    }

    .em-summary-card.primary[b-itsu21al92] {
        border-left: 3px solid var(--primary);
    }

    .em-summary-card.info[b-itsu21al92] {
        border-left: 3px solid var(--info);
    }

.em-summary-icon[b-itsu21al92] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

    .em-summary-icon.warning[b-itsu21al92] {
        background-color: var(--warning-light);
        color: var(--warning);
        box-shadow: 0 3px 6px rgba(var(--warning-rgb), 0.1);
    }

    .em-summary-icon.danger[b-itsu21al92] {
        background-color: var(--danger-light);
        color: var(--danger);
        box-shadow: 0 3px 6px rgba(var(--danger-rgb), 0.1);
    }

    .em-summary-icon.primary[b-itsu21al92] {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.1);
    }

    .em-summary-icon.success[b-itsu21al92] {
        background-color: var(--success-light);
        color: var(--success);
        box-shadow: 0 3px 6px rgba(var(--success-rgb), 0.1);
    }

    .em-summary-icon.info[b-itsu21al92] {
        background-color: var(--info-light);
        color: var(--info);
        box-shadow: 0 3px 6px rgba(var(--info-rgb), 0.1);
    }

.em-summary-card:hover .em-summary-icon[b-itsu21al92] {
    transform: scale(1.1) rotate(10deg);
}

.em-summary-content[b-itsu21al92] {
    display: flex;
    flex-direction: column;
}

.em-summary-value[b-itsu21al92] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.em-summary-label[b-itsu21al92] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Warning Filters */
.em-warning-filters[b-itsu21al92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.em-status-filters[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-pill);
    padding: 0.2rem;
    border: 1px solid var(--border-divider);
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.em-status-filter[b-itsu21al92] {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .em-status-filter:hover[b-itsu21al92] {
        color: var(--primary);
    }

    .em-status-filter.active[b-itsu21al92] {
        background-color: var(--primary);
        color: white;
        box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
    }

.em-sort-dropdown[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .em-sort-dropdown span[b-itsu21al92] {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .em-sort-dropdown select[b-itsu21al92] {
        padding: 0.375rem 1.75rem 0.375rem 0.625rem;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-divider);
        background-color: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.75rem;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 0.85em;
        cursor: pointer;
        transition: var(--hover-transition);
    }

        .em-sort-dropdown select:focus[b-itsu21al92] {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--shadow-focus);
        }

/* Warnings Grid */
.em-warnings-grid[b-itsu21al92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.em-warning-card[b-itsu21al92] {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-divider);
    background-color: var(--content-bg);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .em-warning-card:hover[b-itsu21al92] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .em-warning-card.em-warning-active[b-itsu21al92] {
        border-left: 3px solid var(--warning);
    }

    .em-warning-card.em-warning-expired[b-itsu21al92] {
        border-left: 3px solid var(--text-muted);
        opacity: 0.8;
    }

    .em-warning-card.em-warning-severe[b-itsu21al92] {
        border-left: 3px solid var(--danger);
    }

.em-warning-header[b-itsu21al92] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider);
}

.em-warning-info[b-itsu21al92] {
    flex: 1;
}

.em-warning-type[b-itsu21al92] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.em-warning-level[b-itsu21al92] {
    display: flex;
    align-items: center;
}

.em-warning-level-indicator[b-itsu21al92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
}

    .em-warning-level-indicator.level-1[b-itsu21al92] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .em-warning-level-indicator.level-2[b-itsu21al92] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .em-warning-level-indicator.level-3[b-itsu21al92],
    .em-warning-level-indicator.level-4[b-itsu21al92],
    .em-warning-level-indicator.level-5[b-itsu21al92] {
        background-color: var(--danger-light);
        color: var(--danger);
    }

.em-warning-status[b-itsu21al92] {
    min-width: 80px;
    text-align: right;
}

.em-status-pill[b-itsu21al92] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
}

.em-status-active[b-itsu21al92] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-status-closed[b-itsu21al92] {
    background-color: var(--text-light);
    color: var(--text-muted);
}

.em-status-pending[b-itsu21al92] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-status-expired[b-itsu21al92] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-status-default[b-itsu21al92] {
    background-color: var(--subtle-bg);
    color: var(--text-secondary);
}

.em-status-renewed[b-itsu21al92] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-warning-content[b-itsu21al92] {
    margin-bottom: 0.75rem;
}

.em-warning-label[b-itsu21al92] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.em-warning-value[b-itsu21al92] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.em-warning-dates[b-itsu21al92] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

    .em-warning-dates div[b-itsu21al92] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin-bottom: 0.375rem;
    }

        .em-warning-dates div:last-child[b-itsu21al92] {
            margin-bottom: 0;
        }

    .em-warning-dates i[b-itsu21al92] {
        width: 1rem;
        text-align: center;
        color: var(--text-muted);
    }

.em-warning-expiry.em-expired[b-itsu21al92] {
    color: var(--danger);
}

.em-expired-badge[b-itsu21al92],
.em-expiring-badge[b-itsu21al92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.375rem;
}

.em-expired-badge[b-itsu21al92] {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: pulse-danger-b-itsu21al92 2s infinite;
}

.em-expiring-badge[b-itsu21al92] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-renewed-badge[b-itsu21al92] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-warning-not-acknowledged[b-itsu21al92] {
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-warning-actions[b-itsu21al92] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Button Styles */
.em-btn[b-itsu21al92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}

.em-btn-sm[b-itsu21al92] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.em-btn-primary[b-itsu21al92] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

    .em-btn-primary:hover[b-itsu21al92] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
    }

    .em-btn-primary:active[b-itsu21al92] {
        transform: translateY(0) scale(0.98);
    }

.em-btn-secondary[b-itsu21al92] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .em-btn-secondary:hover[b-itsu21al92] {
        background-color: var(--subtle-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.em-btn-danger[b-itsu21al92] {
    background: var(--danger-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--danger-rgb), 0.2);
}

    .em-btn-danger:hover[b-itsu21al92] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--danger-rgb), 0.3);
    }

.em-btn-outline[b-itsu21al92] {
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
}

    .em-btn-outline:hover[b-itsu21al92] {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
    }

.em-btn-link[b-itsu21al92] {
    background: transparent;
    border: none;
    color: var(--primary);
    padding: 0;
    font-weight: 500;
    font-size: 0.75rem;
}

    .em-btn-link:hover[b-itsu21al92] {
        text-decoration: underline;
    }

.em-btn-icon[b-itsu21al92] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .em-btn-icon.em-btn-sm[b-itsu21al92] {
        width: 2rem;
        height: 2rem;
    }

.em-btn:disabled[b-itsu21al92] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.em-btn-bounce-hover:hover[b-itsu21al92] {
    animation: bounce-b-itsu21al92 0.75s;
}

/* File Upload Styling - UNIFIED VERSION */
.em-file-upload[b-itsu21al92] {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.em-file-input[b-itsu21al92] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.em-file-label[b-itsu21al92] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--content-bg);
    border: 2px dashed var(--border-divider);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .em-file-label[b-itsu21al92]::before {
        content: "\f574"; /* File icon in FontAwesome */
        font-family: "Font Awesome 5 Pro";
        margin-right: 0.625rem;
        font-size: 1rem;
        color: var(--primary);
    }

.em-file-upload:hover .em-file-label[b-itsu21al92] {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* File Preview Styling */
.em-file-preview[b-itsu21al92] {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    background-color: var(--subtle-bg);
    transition: all 0.3s ease;
}

    .em-file-preview:hover[b-itsu21al92] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        background-color: rgba(var(--primary-rgb), 0.05);
    }

.em-file-preview-icon[b-itsu21al92] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: var(--border-radius-sm);
    margin-right: 0.75rem;
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

.em-file-preview-details[b-itsu21al92] {
    flex: 1;
}

.em-file-preview-name[b-itsu21al92] {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    word-break: break-word;
}

.em-file-preview-meta[b-itsu21al92] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.em-file-preview-actions[b-itsu21al92] {
    display: flex;
    gap: 0.5rem;
}

.em-file-action[b-itsu21al92] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .em-file-action:hover[b-itsu21al92] {
        background-color: var(--primary-light);
        color: var(--primary);
        transform: translateY(-2px);
    }

    .em-file-action.view:hover[b-itsu21al92] {
        background-color: var(--info-light);
        color: var(--info);
    }

    .em-file-action.download:hover[b-itsu21al92] {
        background-color: var(--success-light);
        color: var(--success);
    }

/* Loading State */
.em-loading[b-itsu21al92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.em-loading-spinner[b-itsu21al92] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-itsu21al92 1s infinite linear;
    margin-bottom: 1rem;
}

.em-loading p[b-itsu21al92] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Empty State */
.em-empty-state[b-itsu21al92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    animation: fade-in-b-itsu21al92 0.5s ease both;
}

    .em-empty-state > i[b-itsu21al92] {
        font-size: 3.5rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        opacity: 0.7;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .em-empty-state:hover > i[b-itsu21al92] {
        transform: translateY(-8px);
        color: var(--info);
        opacity: 1;
    }

    .em-empty-state h3[b-itsu21al92] {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .em-empty-state p[b-itsu21al92] {
        margin: 0 0 1.5rem 0;
        color: var(--text-secondary);
        max-width: 350px;
    }

.em-empty-state-actions[b-itsu21al92] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Modal Styles */
.em-modal-overlay[b-itsu21al92] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fade-in-b-itsu21al92 0.3s ease both;
    backdrop-filter: blur(3px);
}

.em-modal[b-itsu21al92] {
    width: 100%;
    max-width: 600px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in-b-itsu21al92 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border-divider);
}

.em-modal-lg[b-itsu21al92] {
    max-width: 900px;
}

.em-modal-header[b-itsu21al92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
    position: relative;
}

    .em-modal-header[b-itsu21al92]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--primary), transparent);
    }

    .em-modal-header h3[b-itsu21al92] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.em-modal-header-actions[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em-modal-close[b-itsu21al92] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .em-modal-close:hover[b-itsu21al92] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger);
        transform: rotate(90deg);
    }

.em-modal-body[b-itsu21al92] {
    padding: 1.5rem;
    max-height: calc(90vh - 170px);
    overflow-y: auto;
}

.em-modal-footer[b-itsu21al92] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-divider);
    background-color: var(--subtle-bg);
}

/* Form Groups for Modal */
.em-form-group[b-itsu21al92] {
    margin-bottom: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

    .em-form-group:focus-within[b-itsu21al92] {
        transform: translateY(-4px);
    }

    .em-form-group label[b-itsu21al92] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.2s ease;
        position: relative;
        padding-left: 1.625rem;
    }

        .em-form-group label[b-itsu21al92]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.125rem;
            height: 1.125rem;
            background-color: var(--primary-light);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .em-form-group:has(input:not(:placeholder-shown)) label[b-itsu21al92]::before,
    .em-form-group:has(select:not([value=""])) label[b-itsu21al92]::before,
    .em-form-group:has(textarea:not(:placeholder-shown)) label[b-itsu21al92]::before {
        opacity: 1;
    }

    .em-form-group:focus-within label[b-itsu21al92] {
        color: var(--primary);
    }

    .em-form-group input[b-itsu21al92],
    .em-form-group select[b-itsu21al92],
    .em-form-group textarea[b-itsu21al92] {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-divider);
        border-radius: var(--border-radius-md);
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: all 0.25s ease;
        box-shadow: var(--shadow-sm);
    }

        .em-form-group input:focus[b-itsu21al92],
        .em-form-group select:focus[b-itsu21al92],
        .em-form-group textarea:focus[b-itsu21al92] {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
            transform: translateY(-2px);
        }

        .em-form-group input:hover[b-itsu21al92],
        .em-form-group select:hover[b-itsu21al92],
        .em-form-group textarea:hover[b-itsu21al92] {
            border-color: rgba(var(--primary-rgb), 0.5);
        }

        /* Active state styling */
        .em-form-group input:not(:placeholder-shown)[b-itsu21al92],
        .em-form-group textarea:not(:placeholder-shown)[b-itsu21al92],
        .em-form-group select:not([value=""])[b-itsu21al92] {
            border-color: var(--primary);
            background-color: rgba(var(--primary-rgb), 0.03);
        }

.em-required[b-itsu21al92] {
    color: var(--danger);
    margin-left: 0.25rem;
    font-weight: 600;
    animation: pulse-danger-b-itsu21al92 2s infinite;
}

.em-input-error[b-itsu21al92] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.25) !important;
    background-color: rgba(var(--danger-rgb), 0.02) !important;
}

    .em-input-error:focus[b-itsu21al92] {
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.25) !important;
    }

.em-error-message[b-itsu21al92] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: validation-shake-b-itsu21al92 0.4s cubic-bezier(.36,.07,.19,.97) both;
    padding-left: 1.625rem;
    position: relative;
}

    .em-error-message[b-itsu21al92]::before {
        content: "⚠";
        font-size: 0.75rem;
        position: absolute;
        left: 0;
    }

.em-form-help[b-itsu21al92] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    transition: all 0.25s ease;
    padding-left: 1.625rem;
}

.em-form-group:focus-within .em-form-help[b-itsu21al92] {
    color: var(--text-secondary);
}

/* Warning Alert in Modal */
.em-warning-alert[b-itsu21al92] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--danger-light);
    color: var(--danger);
    font-size: 0.75rem;
    animation: fade-in-b-itsu21al92 0.3s ease both;
}

    .em-warning-alert i[b-itsu21al92] {
        font-size: 0.875rem;
    }

/* File Viewer Modal */
.em-file-viewer[b-itsu21al92] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-radius: var(--border-radius-md);
    min-height: 60vh;
}

.em-file-viewer-content[b-itsu21al92] {
    max-width: 100%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-file-image[b-itsu21al92] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.em-file-pdf[b-itsu21al92] {
    width: 100%;
    height: 70vh;
    border: none;
    box-shadow: var(--shadow-md);
}

.em-file-generic[b-itsu21al92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

    .em-file-generic i[b-itsu21al92] {
        margin-bottom: 1rem;
        color: var(--text-muted);
    }

/* Detail Modal Styling */
.em-detail-section[b-itsu21al92] {
    margin-bottom: 1.5rem;
    animation: fade-in-b-itsu21al92 0.4s ease both;
    animation-delay: calc(var(--detail-index, 0) * 0.1s);
}

    .em-detail-section:nth-child(1)[b-itsu21al92] {
        --detail-index: 1;
    }

    .em-detail-section:nth-child(2)[b-itsu21al92] {
        --detail-index: 2;
    }

    .em-detail-section:nth-child(3)[b-itsu21al92] {
        --detail-index: 3;
    }

.em-detail-title[b-itsu21al92] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-divider);
}

.em-detail-row[b-itsu21al92] {
    display: flex;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

    .em-detail-row:last-child[b-itsu21al92] {
        margin-bottom: 0;
    }

.em-detail-label[b-itsu21al92] {
    width: 120px;
    font-weight: 600;
    color: var(--text-secondary);
}

.em-detail-value[b-itsu21al92] {
    flex: 1;
    color: var(--text-primary);
}

.em-unacknowledged[b-itsu21al92] {
    color: var(--warning);
    font-weight: 500;
}

/* Confirmation Modal */
.em-confirmation-content[b-itsu21al92] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.em-confirmation-icon[b-itsu21al92] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .em-confirmation-icon.warning[b-itsu21al92] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

    .em-confirmation-icon.success[b-itsu21al92] {
        background-color: var(--success-light);
        color: var(--success);
    }

.em-confirmation-content p[b-itsu21al92] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

    .em-confirmation-content p:last-child[b-itsu21al92] {
        margin-bottom: 0;
    }

/* Alert Component */
.em-alert[b-itsu21al92] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    animation: fade-in-b-itsu21al92 0.3s ease;
}

.em-alert-info[b-itsu21al92] {
    background-color: var(--info-light);
    border-left: 3px solid var(--info);
}

.em-alert-warning[b-itsu21al92] {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
}

.em-alert-danger[b-itsu21al92] {
    background-color: var(--danger-light);
    border-left: 3px solid var(--danger);
}

.em-alert i[b-itsu21al92] {
    color: var(--info);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.em-alert-warning i[b-itsu21al92] {
    color: var(--warning);
}

.em-alert-danger i[b-itsu21al92] {
    color: var(--danger);
}

.em-alert h4[b-itsu21al92] {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.em-alert p[b-itsu21al92] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Toast Notification */
.em-toast[b-itsu21al92] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 350px;
    background-color: var(--content-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    z-index: 1050;
    animation: toast-in-b-itsu21al92 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .em-toast.success[b-itsu21al92] {
        border-left-color: var(--success);
    }

    .em-toast.error[b-itsu21al92] {
        border-left-color: var(--danger);
    }

    .em-toast.warning[b-itsu21al92] {
        border-left-color: var(--warning);
    }

    .em-toast.info[b-itsu21al92] {
        border-left-color: var(--info);
    }

.em-toast-icon[b-itsu21al92] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.em-toast.success .em-toast-icon[b-itsu21al92] {
    background-color: var(--success-light);
    color: var(--success);
}

.em-toast.error .em-toast-icon[b-itsu21al92] {
    background-color: var(--danger-light);
    color: var(--danger);
}

.em-toast.warning .em-toast-icon[b-itsu21al92] {
    background-color: var(--warning-light);
    color: var(--warning);
}

.em-toast.info .em-toast-icon[b-itsu21al92] {
    background-color: var(--info-light);
    color: var(--info);
}

.em-toast-content[b-itsu21al92] {
    flex: 1;
}

.em-toast-title[b-itsu21al92] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.em-toast-message[b-itsu21al92] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.em-toast-close[b-itsu21al92] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .em-toast-close:hover[b-itsu21al92] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

/* Animations */
@keyframes fade-in-b-itsu21al92 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up-b-itsu21al92 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down-b-itsu21al92 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right-b-itsu21al92 {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-itsu21al92 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-primary-b-itsu21al92 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes pulse-danger-b-itsu21al92 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes validation-shake-b-itsu21al92 {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes modal-in-b-itsu21al92 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-in-b-itsu21al92 {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes bounce-b-itsu21al92 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .em-warning-summary[b-itsu21al92] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .em-warning-filters[b-itsu21al92] {
        flex-direction: column;
        align-items: flex-start;
    }

    .em-status-filters[b-itsu21al92] {
        width: 100%;
        overflow-x: auto;
    }

    .em-sort-dropdown[b-itsu21al92] {
        width: 100%;
    }

        .em-sort-dropdown select[b-itsu21al92] {
            width: 100%;
        }

    .em-warnings-grid[b-itsu21al92] {
        grid-template-columns: 1fr;
    }

    .em-modal[b-itsu21al92] {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .em-modal-body[b-itsu21al92] {
        max-height: calc(100vh - 170px);
    }
}

@media (max-width: 576px) {
    .em-form-section[b-itsu21al92] {
        padding: 1rem;
    }

    .em-section-header[b-itsu21al92] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .em-section-actions[b-itsu21al92] {
        width: 100%;
        justify-content: space-between;
    }

    .em-warning-header[b-itsu21al92] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .em-warning-status[b-itsu21al92] {
        text-align: left;
    }

    .em-toast[b-itsu21al92] {
        left: 1rem;
        right: 1rem;
        max-width: none;
        width: auto;
    }

    .em-form-group label[b-itsu21al92] {
        padding-left: 0;
    }

        .em-form-group label[b-itsu21al92]::before {
            display: none;
        }

    .em-form-help[b-itsu21al92],
    .em-error-message[b-itsu21al92] {
        padding-left: 0;
    }

    .em-detail-row[b-itsu21al92] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .em-detail-label[b-itsu21al92] {
        width: 100%;
    }
}
/* _content/MajestyPortal/Components/Pages/General/CustomersAndSuppliersMain.razor.rz.scp.css */
/* ====== Customers and Suppliers Styles ====== */

/* Main Container */
.cs-container[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--body-bg, #f8f9fa);
    overflow: hidden;
    position: relative;
}

/* Header Section */
.cs-header[b-d3u9v8a06c] {
    background: var(--content-bg, #ffffff);
    border-bottom: 1px solid var(--border-divider, #e6e8ec);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    z-index: 10;
    position: relative;
    animation: cs-slide-in-top-b-d3u9v8a06c 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .cs-header[b-d3u9v8a06c]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary, #3b82f6), transparent);
        opacity: 0.8;
    }

.cs-header-content[b-d3u9v8a06c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cs-header-title[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .cs-header-title i[b-d3u9v8a06c] {
        font-size: 1.5rem;
        color: var(--primary, #3b82f6);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light, rgba(59, 130, 246, 0.1));
        border-radius: 12px;
        box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.2);
    }

    .cs-header-title h1[b-d3u9v8a06c] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary, #292D32);
    }

    .cs-header-title p[b-d3u9v8a06c] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary, #64748B);
    }

.cs-header-actions[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Main Content */
.cs-main-content[b-d3u9v8a06c] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background-color: var(--body-bg, #f8f9fa);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Search and Filter Section */
.cs-search-filters[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background-color: var(--content-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-divider, #e6e8ec);
    position: relative;
    animation: cs-slide-in-top-b-d3u9v8a06c 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.cs-search-container[b-d3u9v8a06c] {
    width: 100%;
}

.cs-search-bar[b-d3u9v8a06c] {
    position: relative;
    width: 100%;
}

    .cs-search-bar input[b-d3u9v8a06c] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        border-radius: 12px;
        border: 1px solid var(--border-divider, #e6e8ec);
        background-color: var(--input-bg, #f8f9fa);
        color: var(--text-primary, #292D32);
        font-size: 0.9375rem;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

        .cs-search-bar input:focus[b-d3u9v8a06c] {
            outline: none;
            border-color: var(--primary, #3b82f6);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

    .cs-search-bar i[b-d3u9v8a06c] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #94a3b8);
        font-size: 0.9375rem;
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .cs-search-bar input:focus + i[b-d3u9v8a06c] {
        color: var(--primary, #3b82f6);
    }

.cs-clear-search[b-d3u9v8a06c] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

    .cs-clear-search:hover[b-d3u9v8a06c] {
        background-color: var(--subtle-bg, #f1f5f9);
        color: var(--text-primary, #292D32);
        transform: translateY(-50%) rotate(90deg);
    }

/* Filter Toggle Button */
.cs-filter-toggle[b-d3u9v8a06c] {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background-color: var(--subtle-bg, #f1f5f9);
    border: 1px solid var(--border-divider, #e6e8ec);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #292D32);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cs-filter-toggle:hover[b-d3u9v8a06c] {
        background-color: var(--primary-light, rgba(59, 130, 246, 0.1));
        color: var(--primary, #3b82f6);
    }

    .cs-filter-toggle i:last-child[b-d3u9v8a06c] {
        transition: transform 0.3s ease;
    }

    .cs-filter-toggle.active i:last-child[b-d3u9v8a06c] {
        transform: rotate(180deg);
    }

.cs-filters-container[b-d3u9v8a06c] {
    display: none;
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider, #e6e8ec);
    margin-top: 0.5rem;
}

.cs-show-filters[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-filter-group[b-d3u9v8a06c] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.cs-filter-section[b-d3u9v8a06c] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-filter-section-title[b-d3u9v8a06c] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cs-status-filters[b-d3u9v8a06c],
.cs-type-filters[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    background-color: var(--subtle-bg, #f1f5f9);
    border-radius: 20px;
    padding: 0.2rem;
    border: 1px solid var(--border-divider, #e6e8ec);
}

.cs-status-filter[b-d3u9v8a06c],
.cs-type-filter[b-d3u9v8a06c] {
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #64748B);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

    .cs-status-filter:hover[b-d3u9v8a06c],
    .cs-type-filter:hover[b-d3u9v8a06c] {
        color: var(--primary, #3b82f6);
    }

    .cs-status-filter.cs-active[b-d3u9v8a06c],
    .cs-type-filter.cs-active[b-d3u9v8a06c] {
        background-color: var(--primary, #3b82f6);
        color: white;
        box-shadow: 0 2px 5px rgba(59, 130, 246, 0.25);
    }

.cs-contract-filter[b-d3u9v8a06c] {
    flex-grow: 1;
}

.cs-select-control[b-d3u9v8a06c] {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-divider, #e6e8ec);
    background-color: var(--input-bg, #f8f9fa);
    color: var(--text-primary, #292D32);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.875em;
}

    .cs-select-control:focus[b-d3u9v8a06c] {
        outline: none;
        border-color: var(--primary, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

.cs-stats-summary[b-d3u9v8a06c] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider, #e6e8ec);
}

.cs-stats-item[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--subtle-bg, #f1f5f9);
    border-radius: 8px;
    border: 1px solid var(--border-divider, #e6e8ec);
    flex: 1;
    min-width: 100px;
    max-width: 150px;
}

.cs-stats-count[b-d3u9v8a06c] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary, #3b82f6);
}

.cs-stats-label[b-d3u9v8a06c] {
    font-size: 0.6875rem;
    color: var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Partners Grid Container */
.cs-grid-container[b-d3u9v8a06c] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 12px;
    background-color: var(--content-bg, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-divider, #e6e8ec);
    animation: cs-fade-in-b-d3u9v8a06c 0.4s ease-out;
    overflow: visible;
}

/* Responsive Table */
.cs-responsive-table[b-d3u9v8a06c] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    max-height: none;
    min-height: auto;
}

.cs-table[b-d3u9v8a06c] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .cs-table th[b-d3u9v8a06c] {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 600;
        background-color: var(--subtle-bg, #f1f5f9);
        color: var(--text-secondary, #64748B);
        border-bottom: 1px solid var(--border-divider, #e6e8ec);
        white-space: nowrap;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }

        .cs-table th:hover[b-d3u9v8a06c] {
            background-color: var(--primary-light, rgba(59, 130, 246, 0.1));
            color: var(--primary, #3b82f6);
        }

        .cs-table th.cs-sort-asc[b-d3u9v8a06c]::after {
            content: '▲';
            font-size: 0.625rem;
            opacity: 1;
            color: var(--primary, #3b82f6);
            margin-left: 0.375rem;
        }

        .cs-table th.cs-sort-desc[b-d3u9v8a06c]::after {
            content: '▼';
            font-size: 0.625rem;
            opacity: 1;
            color: var(--primary, #3b82f6);
            margin-left: 0.375rem;
        }

    .cs-table td[b-d3u9v8a06c] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-divider, #e6e8ec);
        vertical-align: middle;
    }

    .cs-table tr:last-child td[b-d3u9v8a06c] {
        border-bottom: none;
    }

    .cs-table tbody tr[b-d3u9v8a06c] {
        transition: all 0.2s ease;
        cursor: pointer;
    }

        .cs-table tbody tr:hover[b-d3u9v8a06c] {
            background-color: rgba(0, 0, 0, 0.02);
        }

.cs-disabled-row[b-d3u9v8a06c] {
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .cs-disabled-row[b-d3u9v8a06c] {
    background-color: rgba(255, 255, 255, 0.03);
}

.cs-disabled-row td[b-d3u9v8a06c] {
    opacity: 0.7;
}

/* Table Cell Styling */
.cs-nowrap[b-d3u9v8a06c] {
    white-space: nowrap;
}

.cs-actions-col[b-d3u9v8a06c] {
    width: 1%;
    white-space: nowrap;
}

.cs-status-dot[b-d3u9v8a06c] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.375rem;
}

    .cs-status-dot.cs-status-active[b-d3u9v8a06c] {
        background-color: var(--success, #10b981);
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        animation: cs-pulse-success-b-d3u9v8a06c 2s infinite;
    }

    .cs-status-dot.cs-status-disabled[b-d3u9v8a06c] {
        background-color: var(--danger, #ef4444);
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

.cs-partner-name-cell[b-d3u9v8a06c] {
    min-width: 160px;
}

.cs-partner-name[b-d3u9v8a06c] {
    font-weight: 600;
    color: var(--text-primary, #292D32);
    margin-bottom: 0.125rem;
    font-size: 0.9375rem;
}

.cs-partner-alias[b-d3u9v8a06c] {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748B);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cs-badge[b-d3u9v8a06c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

    .cs-badge.cs-badge-primary[b-d3u9v8a06c] {
        background-color: var(--primary-light, rgba(59, 130, 246, 0.1));
        color: var(--primary, #3b82f6);
    }

    .cs-badge.cs-badge-secondary[b-d3u9v8a06c] {
        background-color: var(--secondary-light, rgba(100, 116, 139, 0.1));
        color: var(--secondary, #64748B);
    }

    .cs-badge.cs-badge-success[b-d3u9v8a06c] {
        background-color: var(--success-light, rgba(16, 185, 129, 0.1));
        color: var(--success, #10b981);
    }

    .cs-badge.cs-badge-danger[b-d3u9v8a06c] {
        background-color: var(--danger-light, rgba(239, 68, 68, 0.1));
        color: var(--danger, #ef4444);
    }

    .cs-badge.cs-badge-warning[b-d3u9v8a06c] {
        background-color: var(--warning-light, rgba(245, 158, 11, 0.1));
        color: var(--warning, #f59e0b);
    }

    .cs-badge.cs-badge-info[b-d3u9v8a06c] {
        background-color: var(--info-light, rgba(6, 182, 212, 0.1));
        color: var(--info, #06b6d4);
    }

.cs-sm-badge[b-d3u9v8a06c] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    margin-left: 0.25rem;
}

.cs-text-muted[b-d3u9v8a06c] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.8125rem;
}

.cs-actions-cell[b-d3u9v8a06c] {
    white-space: nowrap;
}

.cs-actions-buttons[b-d3u9v8a06c] {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
}

/* Pagination */
.cs-pagination[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--border-divider, #e6e8ec);
    font-size: 0.875rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.cs-pagination-info[b-d3u9v8a06c] {
    color: var(--text-secondary, #64748B);
    font-size: 0.8125rem;
}

.cs-pagination-controls[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cs-pages-desktop[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cs-pages-mobile[b-d3u9v8a06c] {
    display: none;
    padding: 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #292D32);
}

.cs-current-page[b-d3u9v8a06c] {
    padding: 0.375rem 0.625rem;
    background-color: var(--primary-light, rgba(59, 130, 246, 0.1));
    color: var(--primary, #3b82f6);
    border-radius: 8px;
}

.cs-page-size-selector[b-d3u9v8a06c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .cs-page-size-selector label[b-d3u9v8a06c] {
        color: var(--text-secondary, #64748B);
        font-size: 0.8125rem;
    }

    .cs-page-size-selector select[b-d3u9v8a06c] {
        padding: 0.375rem 1.75rem 0.375rem 0.625rem;
        border-radius: 8px;
        border: 1px solid var(--border-divider, #e6e8ec);
        background-color: var(--content-bg, #ffffff);
        color: var(--text-primary, #292D32);
        font-size: 0.8125rem;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.375rem center;
        background-size: 0.75em;
        cursor: pointer;
        transition: all 0.2s ease;
    }

/* Loading and Empty States */
.cs-loading-state[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
}

.cs-loading-spinner[b-d3u9v8a06c] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--primary, #3b82f6);
    border-radius: 50%;
    animation: cs-spin-b-d3u9v8a06c 1s infinite linear;
    margin-bottom: 1.5rem;
}

.cs-loading-state p[b-d3u9v8a06c] {
    color: var(--text-secondary, #64748B);
    font-size: 1rem;
    font-weight: 500;
}

.cs-empty-state[b-d3u9v8a06c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
}

    .cs-empty-state > i[b-d3u9v8a06c] {
        font-size: 3.5rem;
        color: var(--text-muted, #94a3b8);
        margin-bottom: 1.5rem;
        opacity: 0.7;
    }

    .cs-empty-state h3[b-d3u9v8a06c] {
        margin: 0;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary, #292D32);
    }

    .cs-empty-state p[b-d3u9v8a06c] {
        margin: 0;
        margin-bottom: 1.5rem;
        color: var(--text-secondary, #64748B);
        max-width: 28rem;
        font-size: 1rem;
    }

/* Button Styles */
.cs-btn[b-d3u9v8a06c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
    background-color: var(--content-bg, #ffffff);
    color: var(--text-primary, #292D32);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

    .cs-btn[b-d3u9v8a06c]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .cs-btn:focus:not(:active)[b-d3u9v8a06c]::after {
        animation: cs-ripple-b-d3u9v8a06c 0.6s ease-out;
    }

.cs-btn-primary[b-d3u9v8a06c] {
    background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
    color: white;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

    .cs-btn-primary:hover[b-d3u9v8a06c] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
    }

    .cs-btn-primary:active[b-d3u9v8a06c] {
        transform: translateY(0) scale(0.98);
    }

.cs-btn-secondary[b-d3u9v8a06c] {
    background-color: var(--content-bg, #ffffff);
    border: 1px solid var(--border-divider, #e6e8ec);
    color: var(--text-primary, #292D32);
}

    .cs-btn-secondary:hover[b-d3u9v8a06c] {
        background-color: var(--subtle-bg, #f1f5f9);
        border-color: var(--text-muted, #94a3b8);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.cs-btn-success[b-d3u9v8a06c] {
    background: linear-gradient(135deg, var(--success, #10b981), var(--success-dark, #059669));
    color: white;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
}

    .cs-btn-success:hover[b-d3u9v8a06c] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
    }

.cs-btn-warning[b-d3u9v8a06c] {
    background: linear-gradient(135deg, var(--warning, #f59e0b), var(--warning-dark, #d97706));
    color: white;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}

    .cs-btn-warning:hover[b-d3u9v8a06c] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
    }

.cs-btn-danger[b-d3u9v8a06c] {
    background: linear-gradient(135deg, var(--danger, #ef4444), var(--danger-dark, #dc2626));
    color: white;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);
}

    .cs-btn-danger:hover[b-d3u9v8a06c] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
    }

.cs-btn-icon[b-d3u9v8a06c] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
}

.cs-btn-sm[b-d3u9v8a06c] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}

    .cs-btn-sm i[b-d3u9v8a06c] {
        font-size: 0.875rem;
    }

.cs-btn-icon.cs-btn-sm[b-d3u9v8a06c] {
    width: 2rem;
    height: 2rem;
}

.cs-btn-bounce-hover:hover[b-d3u9v8a06c] {
    animation: cs-bounce-b-d3u9v8a06c 0.75s;
}

.cs-btn:disabled[b-d3u9v8a06c] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Modal Styles */
.cs-modal-overlay[b-d3u9v8a06c] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: cs-fade-in-b-d3u9v8a06c 0.3s ease;
}

.cs-modal[b-d3u9v8a06c] {
    background-color: var(--modal-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: cs-modal-in-b-d3u9v8a06c 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider, #e6e8ec);
    overflow: auto;
}

.cs-modal-sm[b-d3u9v8a06c] {
    max-width: 450px;
}

.cs-modal-header[b-d3u9v8a06c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-divider, #e6e8ec);
    background-color: var(--subtle-bg, #f1f5f9);
    z-index: 10;
    border-radius: 16px 16px 0 0;
}

    .cs-modal-header h3[b-d3u9v8a06c] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary, #292D32);
    }

.cs-modal-close[b-d3u9v8a06c] {
    background: none;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748B);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.125rem;
}

    .cs-modal-close:hover[b-d3u9v8a06c] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--danger, #ef4444);
        transform: rotate(90deg);
    }

.cs-modal-body[b-d3u9v8a06c] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.cs-modal-footer[b-d3u9v8a06c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-top: 1px solid var(--border-divider, #e6e8ec);
    background-color: var(--subtle-bg, #f1f5f9);
    border-radius: 0 0 16px 16px;
}

/* Confirmation Content */
.cs-confirmation-content[b-d3u9v8a06c] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem;
}

.cs-confirmation-icon[b-d3u9v8a06c] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    flex-shrink: 0;
}

    .cs-confirmation-icon.warning[b-d3u9v8a06c] {
        background-color: var(--warning-light, rgba(245, 158, 11, 0.1));
        color: var(--warning, #f59e0b);
    }

    .cs-confirmation-icon.success[b-d3u9v8a06c] {
        background-color: var(--success-light, rgba(16, 185, 129, 0.1));
        color: var(--success, #10b981);
    }

.cs-confirmation-content p[b-d3u9v8a06c] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary, #64748B);
    font-size: 0.9375rem;
    line-height: 1.5;
}

    .cs-confirmation-content p:last-child[b-d3u9v8a06c] {
        margin-bottom: 0;
    }

    .cs-confirmation-content p strong[b-d3u9v8a06c] {
        color: var(--text-primary, #292D32);
    }

/* Toast Notification */
.cs-toast[b-d3u9v8a06c] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 400px;
    width: calc(100% - 3rem);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    background-color: var(--content-bg, #ffffff);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1050;
    animation: cs-slide-in-right-b-d3u9v8a06c 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .cs-toast.bg-danger[b-d3u9v8a06c] {
        border-left: 4px solid var(--danger, #ef4444);
    }

    .cs-toast.bg-success[b-d3u9v8a06c] {
        border-left: 4px solid var(--success, #10b981);
    }

    .cs-toast.bg-warning[b-d3u9v8a06c] {
        border-left: 4px solid var(--warning, #f59e0b);
    }

    .cs-toast.bg-info[b-d3u9v8a06c] {
        border-left: 4px solid var(--info, #06b6d4);
    }

.cs-toast-icon[b-d3u9v8a06c] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cs-toast.bg-danger .cs-toast-icon[b-d3u9v8a06c] {
    color: var(--danger, #ef4444);
    background-color: var(--danger-light, rgba(239, 68, 68, 0.1));
}

.cs-toast.bg-success .cs-toast-icon[b-d3u9v8a06c] {
    color: var(--success, #10b981);
    background-color: var(--success-light, rgba(16, 185, 129, 0.1));
}

.cs-toast.bg-warning .cs-toast-icon[b-d3u9v8a06c] {
    color: var(--warning, #f59e0b);
    background-color: var(--warning-light, rgba(245, 158, 11, 0.1));
}

.cs-toast.bg-info .cs-toast-icon[b-d3u9v8a06c] {
    color: var(--info, #06b6d4);
    background-color: var(--info-light, rgba(6, 182, 212, 0.1));
}

.cs-toast-content[b-d3u9v8a06c] {
    flex: 1;
    min-width: 0;
}

    .cs-toast-content h4[b-d3u9v8a06c] {
        margin: 0 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary, #292D32);
    }

    .cs-toast-content p[b-d3u9v8a06c] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary, #64748B);
        word-break: break-word;
    }

.cs-toast-close[b-d3u9v8a06c] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary, #64748B);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cs-toast-close:hover[b-d3u9v8a06c] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary, #292D32);
        transform: rotate(90deg);
    }

/* Display Utilities */
.cs-hide-sm[b-d3u9v8a06c] {
    display: table-cell;
}

.cs-hide-md[b-d3u9v8a06c] {
    display: table-cell;
}

/* Responsive Table Enhancements for Mobile */
@media (max-width: 768px) {
    .cs-table[b-d3u9v8a06c] {
        border: 0;
    }

        .cs-table thead[b-d3u9v8a06c] {
            display: none;
        }

        .cs-table tr[b-d3u9v8a06c] {
            margin-bottom: 0.625rem;
            display: block;
            border: 1px solid var(--border-divider, #e6e8ec);
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .cs-table td[b-d3u9v8a06c] {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.75rem 1rem;
            text-align: right;
            border-bottom: 1px solid var(--border-divider, #e6e8ec);
            flex-wrap: wrap;
        }

            .cs-table td:last-child[b-d3u9v8a06c] {
                border-bottom: 0;
            }

            .cs-table td[b-d3u9v8a06c]::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-secondary, #64748B);
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.02em;
                text-align: left;
                margin-right: 1rem;
                white-space: nowrap;
                min-width: 80px;
            }

            .cs-table td.cs-actions-cell[b-d3u9v8a06c] {
                justify-content: center;
                background-color: var(--subtle-bg, #f1f5f9);
                padding: 0.875rem 0.5rem;
                width: 100% !important;
            }

                .cs-table td.cs-actions-cell[b-d3u9v8a06c]::before {
                    display: none;
                }

    .cs-actions-buttons[b-d3u9v8a06c] {
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

    .cs-hide-sm[b-d3u9v8a06c], .cs-hide-md[b-d3u9v8a06c] {
        display: flex;
    }
}

/* Animations */
@keyframes cs-fade-in-b-d3u9v8a06c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cs-slide-in-top-b-d3u9v8a06c {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cs-slide-in-right-b-d3u9v8a06c {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cs-modal-in-b-d3u9v8a06c {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cs-spin-b-d3u9v8a06c {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cs-pulse-success-b-d3u9v8a06c {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes cs-ripple-b-d3u9v8a06c {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

@keyframes cs-bounce-b-d3u9v8a06c {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .cs-filter-group[b-d3u9v8a06c] {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .cs-header-content[b-d3u9v8a06c] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cs-header-actions[b-d3u9v8a06c] {
        margin-top: 1rem;
        align-self: flex-end;
    }

    .cs-search-filters[b-d3u9v8a06c] {
        padding: 1rem;
    }

    .cs-stats-item[b-d3u9v8a06c] {
        min-width: 110px;
    }
}

@media (max-width: 768px) {
    .cs-main-content[b-d3u9v8a06c] {
        padding: 0.75rem;
    }

    .cs-stats-summary[b-d3u9v8a06c] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .cs-stats-item[b-d3u9v8a06c] {
        width: 100%;
        max-width: none;
    }

    /* Adjust pagination for mobile */
    .cs-pagination[b-d3u9v8a06c] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .cs-pagination-controls[b-d3u9v8a06c] {
        width: 100%;
        justify-content: center;
    }

    .cs-pages-desktop[b-d3u9v8a06c] {
        display: none;
    }

    .cs-pages-mobile[b-d3u9v8a06c] {
        display: block;
    }

    .cs-page-size-selector[b-d3u9v8a06c] {
        width: 100%;
        justify-content: flex-end;
    }

    .cs-modal[b-d3u9v8a06c] {
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }

    .cs-modal-overlay[b-d3u9v8a06c] {
        padding: 0;
    }

    .cs-modal-header[b-d3u9v8a06c], .cs-modal-footer[b-d3u9v8a06c] {
        border-radius: 0;
    }

    .cs-toast[b-d3u9v8a06c] {
        bottom: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }
}

@media (max-width: 576px) {
    .cs-header[b-d3u9v8a06c] {
        padding: 1rem;
    }

    .cs-header-title[b-d3u9v8a06c] {
        gap: 0.75rem;
    }

        .cs-header-title i[b-d3u9v8a06c] {
            width: 2.5rem;
            height: 2.5rem;
        }

        .cs-header-title h1[b-d3u9v8a06c] {
            font-size: 1.25rem;
        }

    .cs-stats-summary[b-d3u9v8a06c] {
        grid-template-columns: 1fr;
    }

    .cs-confirmation-content[b-d3u9v8a06c] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cs-confirmation-icon[b-d3u9v8a06c] {
        margin-bottom: 1rem;
    }

    .cs-modal-body[b-d3u9v8a06c], .cs-modal-header[b-d3u9v8a06c], .cs-modal-footer[b-d3u9v8a06c] {
        padding: 1rem;
    }
}

@media (max-width: 400px) {
    .cs-header-title i[b-d3u9v8a06c] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }

    .cs-header-title h1[b-d3u9v8a06c] {
        font-size: 1.125rem;
    }

    .cs-header-title p[b-d3u9v8a06c] {
        font-size: 0.75rem;
    }

    .cs-header-actions[b-d3u9v8a06c] {
        gap: 0.5rem;
    }

    .cs-btn[b-d3u9v8a06c] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .cs-btn-icon[b-d3u9v8a06c] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .cs-actions-buttons[b-d3u9v8a06c] {
        gap: 0.25rem;
        width: 100%;
    }

    .cs-btn-icon.cs-btn-sm[b-d3u9v8a06c] {
        width: 2.25rem;
        height: 2.25rem;
        margin: 0 0.125rem;
    }

    .cs-toast[b-d3u9v8a06c] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .cs-toast-icon[b-d3u9v8a06c] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .cs-table td[b-d3u9v8a06c] {
        padding: 0.625rem 0.75rem;
    }

        .cs-table td[b-d3u9v8a06c]::before {
            min-width: 70px;
            font-size: 0.6875rem;
        }

    .cs-table tr[b-d3u9v8a06c] {
        margin-bottom: 0.75rem;
    }

    .cs-main-content[b-d3u9v8a06c] {
        padding: 0.5rem;
    }
}
/* _content/MajestyPortal/Components/Pages/General/ProductMain.razor.rz.scp.css */
/* 
===============================
  PRODUCT MANAGEMENT MODULE
===============================
*/

/*
 * Main Container Layout
 */
.pm-container[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*
 * Header Styles 
 */
.pm-header[b-g9ruwno26x] {
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    z-index: 10;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.pm-header-content[b-g9ruwno26x] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}

.pm-header-title[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .pm-header-title i[b-g9ruwno26x] {
        font-size: 1.5rem;
        color: var(--primary-color);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light);
        border-radius: 12px;
    }

    .pm-header-title h1[b-g9ruwno26x] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .pm-header-title p[b-g9ruwno26x] {
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

.pm-header-actions[b-g9ruwno26x] {
    display: flex;
    gap: 0.75rem;
}

/*
 * Main Content Layout
 */
.pm-content[b-g9ruwno26x] {
    display: grid;
    grid-template-columns: 320px 1fr;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 75px);
}

/*
 * Sidebar Styles
 */
.pm-sidebar[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    background-color: var(--content-bg);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pm-sidebar-header[b-g9ruwno26x] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--content-bg);
}

/* Search bar within sidebar */
.pm-search-bar[b-g9ruwno26x] {
    position: relative;
    margin-bottom: 0.75rem;
}

    .pm-search-bar i[b-g9ruwno26x] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .pm-search-bar input[b-g9ruwno26x] {
        width: 100%;
        padding: 0.625rem 0.625rem 0.625rem 2.25rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--input-bg);
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

        .pm-search-bar input:focus[b-g9ruwno26x] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

.pm-clear-search[b-g9ruwno26x] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .pm-clear-search:hover[b-g9ruwno26x] {
        background-color: var(--subtle-bg);
        color: var(--text-primary);
    }

/* Dropdown filters */
.pm-filter[b-g9ruwno26x] {
    margin-bottom: 0.75rem;
}

    .pm-filter select[b-g9ruwno26x] {
        width: 100%;
        padding: 0.625rem 2rem 0.625rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--input-bg);
        font-size: 0.875rem;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 0.75rem;
        transition: all 0.2s ease;
    }

        .pm-filter select:focus[b-g9ruwno26x] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

.pm-product-count[b-g9ruwno26x] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    background-color: var(--subtle-bg);
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

/* Products list in sidebar */
.pm-products-list[b-g9ruwno26x] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pm-product-item[b-g9ruwno26x] {
    display: flex;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .pm-product-item:hover[b-g9ruwno26x] {
        background-color: var(--subtle-bg);
    }

    .pm-product-item.pm-active[b-g9ruwno26x] {
        background-color: var(--primary-light);
    }

        .pm-product-item.pm-active[b-g9ruwno26x]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background-color: var(--primary-color);
        }

    .pm-product-item.pm-inactive[b-g9ruwno26x] {
        opacity: 0.65;
    }

.pm-product-status[b-g9ruwno26x] {
    margin-right: 0.75rem;
    padding-top: 2px;
}

.pm-status-dot[b-g9ruwno26x] {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    .pm-status-dot.pm-active[b-g9ruwno26x] {
        background-color: var(--success);
        box-shadow: 0 0 0 2px rgba(var(--success-rgb), 0.2);
    }

    .pm-status-dot.pm-inactive[b-g9ruwno26x] {
        background-color: var(--text-muted);
    }

.pm-product-info[b-g9ruwno26x] {
    flex: 1;
    min-width: 0;
}

.pm-product-header[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.pm-product-number[b-g9ruwno26x] {
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Badges for product type */
.pm-badge[b-g9ruwno26x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-weight: 500;
}

.pm-badge-lab[b-g9ruwno26x] {
    background-color: var(--info-light);
    color: var(--info);
}

.pm-product-description[b-g9ruwno26x] {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
}

.pm-product-meta[b-g9ruwno26x] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.pm-product-alias[b-g9ruwno26x],
.pm-product-category[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--subtle-bg);
}

/* Empty state for sidebar */
.pm-empty-state[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    height: 100%;
}

    .pm-empty-state i[b-g9ruwno26x] {
        font-size: 2rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }

    .pm-empty-state h3[b-g9ruwno26x] {
        margin: 0 0 0.5rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .pm-empty-state p[b-g9ruwno26x] {
        margin: 0 0 1.5rem;
        color: var(--text-secondary);
        font-size: 0.9375rem;
        max-width: 80%;
    }

/*
 * Main Content Styles
 */
.pm-main[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    background-color: var(--content-bg);
    overflow: hidden;
    height: 100%;
    position: relative;
}

.pm-detail-header[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--content-bg);
    box-shadow: var(--shadow-sm);
}

.pm-detail-title[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .pm-detail-title i[b-g9ruwno26x] {
        font-size: 1.5rem;
        color: var(--primary-color);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light);
        border-radius: 12px;
    }

    .pm-detail-title h2[b-g9ruwno26x] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.pm-detail-actions[b-g9ruwno26x] {
    display: flex;
    gap: 0.75rem;
}

/* Tabs Navigation */
.pm-tabs[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.pm-tab-list[b-g9ruwno26x] {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--content-bg);
    overflow-x: auto;
    flex-shrink: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .pm-tab-list[b-g9ruwno26x]::-webkit-scrollbar {
        display: none;
    }

.pm-tab[b-g9ruwno26x] {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s ease;
}

    .pm-tab i[b-g9ruwno26x] {
        font-size: 1rem;
    }

    .pm-tab:hover[b-g9ruwno26x] {
        color: var(--primary-color);
        background-color: rgba(0, 0, 0, 0.01);
    }

    .pm-tab.pm-active[b-g9ruwno26x] {
        color: var(--primary-color);
        font-weight: 500;
    }

        .pm-tab.pm-active[b-g9ruwno26x]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background-color: var(--primary-color);
        }

/* Tab content area */
.pm-tab-content[b-g9ruwno26x] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    height: 100%;
    max-height: calc(100vh - 180px);
}

/* Empty selection placeholder */
.pm-empty-selection[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 1rem;
}

    .pm-empty-selection i[b-g9ruwno26x] {

    }

    .pm-empty-selection h3[b-g9ruwno26x] {
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .pm-empty-selection p[b-g9ruwno26x] {
        margin: 0 0 1.5rem;
        color: var(--text-secondary);
        max-width: 450px;
    }

/*
 * Form Styles
 */
.pm-form-section[b-g9ruwno26x] {
    margin-bottom: 2rem;
}

.pm-section-title[b-g9ruwno26x] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .pm-section-title i[b-g9ruwno26x] {
        color: var(--primary-color);
    }

    .pm-section-title[b-g9ruwno26x]::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 50px;
        height: 2px;
        background-color: var(--primary-color);
    }

.pm-section-header[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pm-form-group[b-g9ruwno26x] {
    margin-bottom: 1.25rem;
}

    .pm-form-group label[b-g9ruwno26x] {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    .pm-form-group input[b-g9ruwno26x],
    .pm-form-group select[b-g9ruwno26x],
    .pm-form-group textarea[b-g9ruwno26x] {
        width: 100%;
        padding: 0.625rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--input-bg);
        font-size: 0.875rem;
        transition: all 0.2s ease;
        color: var(--text-primary);
    }

        .pm-form-group input:focus[b-g9ruwno26x],
        .pm-form-group select:focus[b-g9ruwno26x],
        .pm-form-group textarea:focus[b-g9ruwno26x] {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

    .pm-form-group textarea[b-g9ruwno26x] {
        min-height: 100px;
        resize: vertical;
    }

.pm-form-row[b-g9ruwno26x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.pm-indented[b-g9ruwno26x] {
    margin-left: 1.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--primary-light);
}

.pm-required[b-g9ruwno26x] {
    color: var(--danger);
    margin-left: 0.25rem;
}

.pm-input-error[b-g9ruwno26x] {
    border-color: var(--danger) !important;
}

.pm-error-message[b-g9ruwno26x] {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.pm-info-icon[b-g9ruwno26x] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-left: 0.25rem;
    cursor: help;
}

/* Switches */
.pm-switch[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .pm-switch input[b-g9ruwno26x] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .pm-switch label[b-g9ruwno26x] {
        position: relative;
        display: inline-block;
        width: 2.5rem;
        height: 1.25rem;
        margin-right: 0.5rem;
        margin-bottom: 0 !important;
        background-color: var(--text-muted);
        border-radius: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

        .pm-switch label[b-g9ruwno26x]::before {
            content: "";
            position: absolute;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
            left: 0.1875rem;
            bottom: 0.1875rem;
            background-color: white;
            transition: transform 0.2s ease;
        }

    .pm-switch input:checked + label[b-g9ruwno26x] {
        background-color: var(--primary-color);
    }

        .pm-switch input:checked + label[b-g9ruwno26x]::before {
            transform: translateX(1.25rem);
        }

    .pm-switch input:disabled + label[b-g9ruwno26x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pm-switch span[b-g9ruwno26x] {
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

.pm-disabled[b-g9ruwno26x] {
    opacity: 0.6;
    pointer-events: none;
}

/* Form Actions - Sticky at bottom */
.pm-form-actions[b-g9ruwno26x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--content-bg);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/*
 * Buttons
 */
.pm-btn[b-g9ruwno26x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

    .pm-btn[b-g9ruwno26x]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .pm-btn:focus:not(:active)[b-g9ruwno26x]::after {
        animation: ripple 0.6s ease-out;
    }

.pm-btn-primary[b-g9ruwno26x] {
    background: var(--primary-gradient, linear-gradient(90deg, var(--primary-color) 0%, var(--primary-hover) 100%));
    color: white;
    box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
}

    .pm-btn-primary:hover[b-g9ruwno26x] {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
    }

    .pm-btn-primary:active[b-g9ruwno26x] {
        transform: translateY(0) scale(0.98);
    }

.pm-btn-secondary[b-g9ruwno26x] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .pm-btn-secondary:hover[b-g9ruwno26x] {
        background-color: var(--subtle-bg);
        border-color: var(--text-muted);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.pm-btn-success[b-g9ruwno26x] {
    background: var(--success-gradient, linear-gradient(90deg, var(--success) 0%, var(--success-hover) 100%));
    color: white;
    box-shadow: 0 2px 5px rgba(var(--success-rgb), 0.2);
}

    .pm-btn-success:hover[b-g9ruwno26x] {
        background-color: var(--success-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--success-rgb), 0.3);
    }

.pm-btn-warning[b-g9ruwno26x] {
    background: var(--warning-gradient, linear-gradient(90deg, var(--warning) 0%, var(--warning-hover) 100%));
    color: white;
    box-shadow: 0 2px 5px rgba(var(--warning-rgb), 0.2);
}

    .pm-btn-warning:hover[b-g9ruwno26x] {
        background-color: var(--warning-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--warning-rgb), 0.3);
    }

.pm-btn-danger[b-g9ruwno26x] {
    background: var(--danger-gradient, linear-gradient(90deg, var(--danger) 0%, var(--danger-hover) 100%));
    color: white;
    box-shadow: 0 2px 5px rgba(var(--danger-rgb), 0.2);
}

    .pm-btn-danger:hover[b-g9ruwno26x] {
        background-color: var(--danger-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--danger-rgb), 0.3);
    }

.pm-btn:disabled[b-g9ruwno26x] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.pm-btn-sm[b-g9ruwno26x] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.pm-btn-icon[b-g9ruwno26x] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 8px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

    .pm-btn-icon:hover[b-g9ruwno26x] {
        background-color: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
    }

    .pm-btn-icon i[b-g9ruwno26x] {
        font-size: 1rem;
    }

    .pm-btn-icon.pm-danger[b-g9ruwno26x] {
        background-color: var(--danger-light);
        color: var(--danger);
    }

        .pm-btn-icon.pm-danger:hover[b-g9ruwno26x] {
            box-shadow: 0 4px 8px rgba(var(--danger-rgb), 0.2);
        }

    .pm-btn-icon.pm-warning[b-g9ruwno26x] {
        background-color: var(--warning-light);
        color: var(--warning);
    }

        .pm-btn-icon.pm-warning:hover[b-g9ruwno26x] {
            box-shadow: 0 4px 8px rgba(var(--warning-rgb), 0.2);
        }

    .pm-btn-icon.pm-success[b-g9ruwno26x] {
        background-color: var(--success-light);
        color: var(--success);
    }

        .pm-btn-icon.pm-success:hover[b-g9ruwno26x] {
            box-shadow: 0 4px 8px rgba(var(--success-rgb), 0.2);
        }

/*
 * Laboratory Test Cards
 */
.pm-test-grid[b-g9ruwno26x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.pm-test-card[b-g9ruwno26x] {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--content-bg);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

    .pm-test-card:hover[b-g9ruwno26x] {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    .pm-test-card.pm-active[b-g9ruwno26x] {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-light);
    }

.pm-test-header[b-g9ruwno26x] {
    padding: 1rem;
    background-color: var(--subtle-bg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pm-test-name[b-g9ruwno26x] {
    font-weight: 600;
    font-size: 0.9375rem;
}

.pm-test-format[b-g9ruwno26x] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background-color: var(--content-bg);
    border-radius: 1rem;
}

.pm-test-content[b-g9ruwno26x] {
    padding: 1rem;
}

.pm-test-range[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

    .pm-test-range.pm-warning[b-g9ruwno26x] {
        background-color: var(--warning-light);
        color: var(--text-primary);
    }

    .pm-test-range.pm-block[b-g9ruwno26x] {
        background-color: var(--danger-light);
        color: var(--text-primary);
    }

.pm-range-label[b-g9ruwno26x] {
    font-weight: 500;
}

.pm-test-actions[b-g9ruwno26x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--subtle-bg);
}

/* Mobile Test List */
.pm-mobile-test-list[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pm-mobile-test-item[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background-color: var(--content-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

    .pm-mobile-test-item:hover[b-g9ruwno26x] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .pm-mobile-test-item.pm-active[b-g9ruwno26x] {
        border-color: var(--primary-color);
        background-color: var(--primary-light);
    }

.pm-mobile-test-info[b-g9ruwno26x] {
    flex: 1;
}

.pm-test-details[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.pm-mobile-test-actions[b-g9ruwno26x] {
    display: flex;
    gap: 0.5rem;
}

/*
 * Modal
 */
.pm-modal-overlay[b-g9ruwno26x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
    animation: pm-fade-in-b-g9ruwno26x 0.2s ease;
}

.pm-modal[b-g9ruwno26x] {
    background-color: var(--content-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: pm-modal-in-b-g9ruwno26x 0.25s ease;
}

@keyframes pm-fade-in-b-g9ruwno26x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pm-modal-in-b-g9ruwno26x {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pm-modal-header[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

    .pm-modal-header h3[b-g9ruwno26x] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

.pm-modal-close[b-g9ruwno26x] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .pm-modal-close:hover[b-g9ruwno26x] {
        background-color: var(--subtle-bg);
        color: var(--danger);
    }

.pm-modal-body[b-g9ruwno26x] {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.pm-modal-footer[b-g9ruwno26x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--content-bg);
}

/*
 * Toast
 */
.pm-toast[b-g9ruwno26x] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    max-width: 350px;
    width: 100%;
    border-left: 3px solid var(--primary-color);
    animation: pm-slide-in-b-g9ruwno26x 0.3s ease;
}

    .pm-toast.success[b-g9ruwno26x] {
        border-left-color: var(--success);
    }

    .pm-toast.error[b-g9ruwno26x] {
        border-left-color: var(--danger);
    }

    .pm-toast.warning[b-g9ruwno26x] {
        border-left-color: var(--warning);
    }

    .pm-toast.info[b-g9ruwno26x] {
        border-left-color: var(--info);
    }

.pm-toast-icon[b-g9ruwno26x] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pm-toast.success .pm-toast-icon[b-g9ruwno26x] {
    color: var(--success);
}

.pm-toast.error .pm-toast-icon[b-g9ruwno26x] {
    color: var(--danger);
}

.pm-toast.warning .pm-toast-icon[b-g9ruwno26x] {
    color: var(--warning);
}

.pm-toast.info .pm-toast-icon[b-g9ruwno26x] {
    color: var(--info);
}

.pm-toast-content[b-g9ruwno26x] {
    flex: 1;
}

    .pm-toast-content h4[b-g9ruwno26x] {
        margin: 0 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
    }

    .pm-toast-content p[b-g9ruwno26x] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

.pm-toast-close[b-g9ruwno26x] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.2s ease;
}

    .pm-toast-close:hover[b-g9ruwno26x] {
        background-color: var(--subtle-bg);
        color: var(--danger);
    }

@keyframes pm-slide-in-b-g9ruwno26x {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading Spinner */
.pm-loading-state[b-g9ruwno26x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    height: 100%;
}

.pm-loading-spinner[b-g9ruwno26x] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(var(--primary-rgb), 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

.pm-loading-state p[b-g9ruwno26x] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/*
 * Mobile View 
 */
.pm-desktop-view[b-g9ruwno26x] {
    display: block;
}

.pm-mobile-view[b-g9ruwno26x] {
    display: none;
}

/* Mobile Dialog for Editing Products */
.pm-mobile-editor[b-g9ruwno26x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--content-bg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pm-slide-up-b-g9ruwno26x 0.3s ease;
}

@keyframes pm-slide-up-b-g9ruwno26x {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pm-mobile-editor-header[b-g9ruwno26x] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    gap: 2rem;
}

    .pm-mobile-editor-header h3[b-g9ruwno26x] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
        color: white;
    }

.pm-mobile-back[b-g9ruwno26x] {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
}

.pm-mobile-tabs[b-g9ruwno26x] {
    display: flex;
    background-color: var(--content-bg);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    flex-shrink: 0;
}

.pm-mobile-tab[b-g9ruwno26x] {
    flex: 1;
    padding: 0.875rem 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    position: relative;
    gap: 0.25rem;
    min-width: 4.5rem;
}

    .pm-mobile-tab i[b-g9ruwno26x] {
        font-size: 1.125rem;
    }

    .pm-mobile-tab.pm-active[b-g9ruwno26x] {
        color: var(--primary-color);
        font-weight: 500;
    }

        .pm-mobile-tab.pm-active[b-g9ruwno26x]::after {
            content: '';
            position: absolute;
            left: 25%;
            right: 25%;
            bottom: -1px;
            height: 2px;
            background-color: var(--primary-color);
        }

.pm-mobile-content[b-g9ruwno26x] {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
    padding-bottom: 5rem;
}

.pm-mobile-footer[b-g9ruwno26x] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background-color: var(--content-bg);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* Product Card for Mobile View */
.pm-product-card[b-g9ruwno26x] {
    background: var(--content-bg);
    border-radius: 12px;
    margin: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid var(--border-light);
}

    .pm-product-card:active[b-g9ruwno26x] {
        transform: scale(0.98);
    }

    .pm-product-card:hover[b-g9ruwno26x] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .pm-product-card.pm-inactive[b-g9ruwno26x] {
        opacity: 0.65;
    }

.pm-product-card-header[b-g9ruwno26x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pm-product-card-body[b-g9ruwno26x] {
    padding-left: 1.25rem;
}

.pm-mobile-actions[b-g9ruwno26x] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--body-bg);
}

/* Dark mode adjustments */
.theme-dark .pm-modal-overlay[b-g9ruwno26x] {
    background-color: rgba(0, 0, 0, 0.7);
}

.theme-dark .pm-product-item:hover[b-g9ruwno26x] {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .pm-product-item.pm-active[b-g9ruwno26x] {
    background-color: rgba(var(--primary-rgb), 0.2);
}

.theme-dark .pm-test-card[b-g9ruwno26x],
.theme-dark .pm-product-card[b-g9ruwno26x] {
    background-color: var(--content-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

    .theme-dark .pm-test-card:hover[b-g9ruwno26x],
    .theme-dark .pm-product-card:hover[b-g9ruwno26x] {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.theme-dark .pm-toast[b-g9ruwno26x] {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/*
 * Responsive Styles
 */
@media (max-width: 1199px) {
    .pm-test-grid[b-g9ruwno26x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .pm-content[b-g9ruwno26x] {
        grid-template-columns: 280px 1fr;
    }

    .pm-header-title h1[b-g9ruwno26x] {
        font-size: 1.125rem;
    }

    .pm-header-title p[b-g9ruwno26x] {
        display: none;
    }

    .pm-test-grid[b-g9ruwno26x] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 767px) {
    .pm-content[b-g9ruwno26x] {
        grid-template-columns: 1fr;
    }

    .pm-sidebar[b-g9ruwno26x] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 900;
        transform: translateX(-100%);
    }

        .pm-sidebar.visible[b-g9ruwno26x] {
            transform: translateX(0);
        }

    .pm-header-title[b-g9ruwno26x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

        .pm-header-title i[b-g9ruwno26x] {
            display: none;
        }

    .pm-btn span[b-g9ruwno26x] {
        display: none;
    }

    .pm-btn[b-g9ruwno26x] {
        padding: 0.625rem;
    }

    .pm-btn-icon[b-g9ruwno26x] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .pm-detail-title i[b-g9ruwno26x] {
        display: none;
    }

    .pm-tab span[b-g9ruwno26x] {
        display: none;
    }

    .pm-tab[b-g9ruwno26x] {
        padding: 0.75rem;
    }

        .pm-tab i[b-g9ruwno26x] {
            font-size: 1.125rem;
        }

    .pm-form-row[b-g9ruwno26x] {
        grid-template-columns: 1fr;
    }

    .pm-toast[b-g9ruwno26x] {
        max-width: calc(100% - 2rem);
        right: 1rem;
        left: 1rem;
    }

    .pm-form-actions[b-g9ruwno26x] {
        padding: 0.75rem 1rem;
    }

    .pm-detail-header[b-g9ruwno26x] {
        padding: 0.75rem 1rem;
    }

    .pm-tab-content[b-g9ruwno26x] {
        padding: 1rem;
    }

    /* Show mobile view, hide desktop view */
    .pm-desktop-view[b-g9ruwno26x] {
        display: none;
    }

    .pm-mobile-view[b-g9ruwno26x] {
        display: block;
        overflow: auto;
    }

    .pm-test-grid[b-g9ruwno26x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pm-header[b-g9ruwno26x] {
        padding: 0.75rem 1rem;
    }

    .pm-header-title h1[b-g9ruwno26x] {
        font-size: 1rem;
    }

    .pm-modal[b-g9ruwno26x] {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .pm-modal-body[b-g9ruwno26x] {
        max-height: calc(100vh - 140px);
    }

    .pm-modal-footer[b-g9ruwno26x] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .pm-product-card[b-g9ruwno26x] {
        margin: 0.5rem;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .pm-mobile-editor-header h3[b-g9ruwno26x] {
        font-size: 1rem;
    }

    .pm-mobile-tab[b-g9ruwno26x] {
        min-width: 3.5rem;
        padding: 0.75rem 0.25rem;
    }

    .pm-mobile-content[b-g9ruwno26x] {
        padding: 1rem 0.75rem 5rem;
    }
}

@media (max-width: 400px) {
    .pm-header-title h1[b-g9ruwno26x] {
        font-size: 0.875rem;
    }

    .pm-btn-icon[b-g9ruwno26x] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .pm-mobile-tab i[b-g9ruwno26x] {
        font-size: 1rem;
    }

    .pm-mobile-tab[b-g9ruwno26x] {
        font-size: 0.75rem;
        min-width: 3rem;
    }

    .pm-product-card[b-g9ruwno26x] {
        padding: 0.75rem;
    }

    .pm-product-card-header[b-g9ruwno26x] {
        flex-wrap: wrap;
    }

    .pm-mobile-actions[b-g9ruwno26x] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* _content/MajestyPortal/Components/Pages/Home.razor.rz.scp.css */
/* Next-Level Professional Dashboard
   Advanced animations, sophisticated interactions, and premium design */

/* CSS Variables for Dynamic Theming */
:root[b-ht8vt3i0wr] {
    --card-hover-transform: translateY(-8px) scale(1.02);
    --primary-glow: 0 20px 40px rgba(var(--primary-rgb), 0.3);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Main Container */
.dashboard-container[b-ht8vt3i0wr] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

    /* Background Pattern Animation */
    .dashboard-container[b-ht8vt3i0wr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(var(--primary-rgb), 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--secondary-rgb), 0.03) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(var(--primary-rgb), 0.02) 0%, transparent 50%);
        animation: backgroundShift-b-ht8vt3i0wr 20s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes backgroundShift-b-ht8vt3i0wr {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-20px, -20px) scale(1.05);
    }

    66% {
        transform: translate(20px, -10px) scale(0.95);
    }
}

/* Dashboard Selection Screen */
.dashboard-selection[b-ht8vt3i0wr] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: pageEnter-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes pageEnter-b-ht8vt3i0wr {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* ====== Premium Header Section ====== */
.scale-header-wrapper[b-ht8vt3i0wr] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    animation: headerReveal-b-ht8vt3i0wr 1s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes headerReveal-b-ht8vt3i0wr {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-header-wrapper[b-ht8vt3i0wr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    animation: expandWidth-b-ht8vt3i0wr 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}

@keyframes expandWidth-b-ht8vt3i0wr {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.scale-header[b-ht8vt3i0wr] {
    padding: 1.5rem 2rem;
}

.scale-header-content[b-ht8vt3i0wr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.scale-brand-section[b-ht8vt3i0wr] {
    flex: 1;
}

.scale-title-group[b-ht8vt3i0wr] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Advanced Icon Animation */
.scale-icon-wrapper[b-ht8vt3i0wr] {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    border-radius: 16px;
    box-shadow: var(--primary-glow);
    animation: iconFloat-b-ht8vt3i0wr 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
    overflow: hidden;
}

@keyframes iconFloat-b-ht8vt3i0wr {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.scale-icon-wrapper i[b-ht8vt3i0wr] {
    font-size: 1.5rem;
    color: white;
    z-index: 2;
    animation: iconPulse-b-ht8vt3i0wr 2s ease-in-out infinite;
}

@keyframes iconPulse-b-ht8vt3i0wr {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.scale-icon-glow[b-ht8vt3i0wr] {
    position: absolute;
    inset: -2px;
    background: var(--primary-gradient);
    border-radius: 16px;
    opacity: 0.4;
    filter: blur(12px);
    animation: glowPulse-b-ht8vt3i0wr 3s ease-in-out infinite;
}

@keyframes glowPulse-b-ht8vt3i0wr {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.2;
    }
}

.scale-title-content[b-ht8vt3i0wr] {
    flex: 1;
}

.scale-main-title[b-ht8vt3i0wr] {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: titleReveal-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}

.scale-subtitle[b-ht8vt3i0wr] {
    margin: 0.375rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    animation: titleReveal-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both;
}

@keyframes titleReveal-b-ht8vt3i0wr {
    0% {
        opacity: 0;
        transform: translateX(-40px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.scale-header-actions[b-ht8vt3i0wr] {
    display: flex;
    gap: 1rem;
    align-items: center;
    animation: actionsFade 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both;
}

/* Search Container */
.search-container[b-ht8vt3i0wr] {
    position: relative;
    width: 300px;
}

.search-icon[b-ht8vt3i0wr] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 50;
}

.dashboard-search[b-ht8vt3i0wr] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid var(--border-divider);
    border-radius: 12px;
    background: rgba(var(--content-bg-rgb), 0.5);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .dashboard-search:focus[b-ht8vt3i0wr] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
        transform: translateY(-1px);
    }

        .dashboard-search:focus + .search-icon[b-ht8vt3i0wr] {
            color: var(--primary);
        }

/* Premium Buttons */
.scale-btn[b-ht8vt3i0wr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .scale-btn[b-ht8vt3i0wr]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .scale-btn:hover[b-ht8vt3i0wr]::before {
        width: 300px;
        height: 300px;
    }

    .scale-btn:hover[b-ht8vt3i0wr] {
        transform: translateY(-2px);
    }

.scale-btn-primary[b-ht8vt3i0wr] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

    .scale-btn-primary:hover[b-ht8vt3i0wr] {
        box-shadow: var(--primary-glow);
    }

/* Category Filter Pills */
.category-filter-wrapper[b-ht8vt3i0wr] {
    background: rgba(var(--content-bg-rgb), 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-divider);
    padding: 1rem 2rem;
    animation: filterSlideIn-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}

@keyframes filterSlideIn-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-filters[b-ht8vt3i0wr] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.category-pill[b-ht8vt3i0wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--content-bg);
    border: 2px solid var(--border-divider);
    border-radius: 100px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .category-pill[b-ht8vt3i0wr]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--primary-gradient);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 100px;
    }

    .category-pill:hover[b-ht8vt3i0wr] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--primary);
        color: var(--primary);
    }

    .category-pill.active[b-ht8vt3i0wr] {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
    }

    .category-pill i[b-ht8vt3i0wr] {
        font-size: 1rem;
        transition: transform 0.3s ease;
    }

    .category-pill:hover i[b-ht8vt3i0wr] {
        transform: rotate(10deg) scale(1.1);
    }

.pill-count[b-ht8vt3i0wr] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.category-pill.active .pill-count[b-ht8vt3i0wr] {
    background: rgba(255, 255, 255, 0.25);
}

/* Dashboard Content Wrapper */
.dashboard-content-wrapper[b-ht8vt3i0wr] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    animation: contentFadeIn-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both;
}

@keyframes contentFadeIn-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Category Sections */
.category-section[b-ht8vt3i0wr] {
    margin-bottom: 3rem;
    opacity: 0;
    animation: sectionReveal-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

    .category-section.loaded[b-ht8vt3i0wr] {
        animation-delay: calc(var(--section-index, 0) * 0.1s);
    }

@keyframes sectionReveal-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-header[b-ht8vt3i0wr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.category-icon-wrapper[b-ht8vt3i0wr] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.1) 100%);
    border-radius: 12px;
    color: var(--primary);
    font-size: 1.125rem;
}

.category-title[b-ht8vt3i0wr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.category-line[b-ht8vt3i0wr] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--border-divider) 0%, transparent 100%);
    margin-left: 1rem;
}

/* Dashboard Grid */
.dashboard-grid[b-ht8vt3i0wr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

    .dashboard-grid.single-category[b-ht8vt3i0wr] {
        max-width: 1400px;
        margin: 0 auto;
    }

/* Advanced Dashboard Cards */
.dashboard-card[b-ht8vt3i0wr] {
    position: relative;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: var(--card-shadow);
    transform-style: preserve-3d;
    perspective: 1000px;
}

    /* Card Loading Animation */
    .dashboard-card.loading[b-ht8vt3i0wr] {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotateX(10deg);
    }

    .dashboard-card.loaded[b-ht8vt3i0wr] {
        animation: cardReveal-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

@keyframes cardReveal-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9) rotateX(10deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
    }
}

/* Card Background Effect */
.card-background[b-ht8vt3i0wr] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dashboard-card:hover .card-background[b-ht8vt3i0wr] {
    opacity: 1;
}

/* Primary Card Styling */
.dashboard-card.primary[b-ht8vt3i0wr] {
    border-color: rgba(var(--primary-rgb), 0.3);
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
}

    .dashboard-card.primary[b-ht8vt3i0wr]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background: var(--primary-gradient);
        border-radius: 0 0 0 100%;
        opacity: 0.1;
        z-index: 50;
    }

/* Card Hover Effects */
.dashboard-card:hover:not(.disabled)[b-ht8vt3i0wr] {
    transform: var(--card-hover-transform);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--primary);
}

.dashboard-card.disabled[b-ht8vt3i0wr] {
    cursor: not-allowed;
    opacity: 0.7;
}

    .dashboard-card.disabled:hover[b-ht8vt3i0wr] {
        transform: none;
        box-shadow: var(--card-shadow);
        border-color: var(--border-divider);
    }

/* Card Content */
.card-content[b-ht8vt3i0wr] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
}

/* Card Header */
.card-header[b-ht8vt3i0wr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

/* Advanced Icon Design */
.card-icon-container[b-ht8vt3i0wr] {
    position: relative;
}

.card-icon-wrapper[b-ht8vt3i0wr] {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.dashboard-card:hover .card-icon-wrapper[b-ht8vt3i0wr] {
    background: var(--primary-gradient);
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

.card-icon[b-ht8vt3i0wr] {
    font-size: 1.75rem;
    color: var(--primary);
    transition: all 0.4s ease;
    z-index: 2;
}

.dashboard-card:hover .card-icon[b-ht8vt3i0wr] {
    color: white;
    transform: scale(1.1);
}

/* Icon Ring Animation */
.icon-ring[b-ht8vt3i0wr] {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--primary);
    border-radius: 18px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.dashboard-card:hover .icon-ring[b-ht8vt3i0wr] {
    opacity: 0.3;
    transform: scale(1.1);
    animation: ringPulse-b-ht8vt3i0wr 2s ease-in-out infinite;
}

@keyframes ringPulse-b-ht8vt3i0wr {
    0%, 100% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.1;
    }
}

/* Status Badge */
.card-status[b-ht8vt3i0wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .card-status.active[b-ht8vt3i0wr] {
        background: rgba(var(--success-rgb), 0.1);
        color: var(--success);
    }

    .card-status.beta[b-ht8vt3i0wr] {
        background: rgba(var(--warning-rgb), 0.1);
        color: var(--warning);
    }

    .card-status.development[b-ht8vt3i0wr] {
        background: rgba(var(--info-rgb), 0.1);
        color: var(--info);
    }

.status-dot[b-ht8vt3i0wr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: statusPulse-b-ht8vt3i0wr 2s ease-in-out infinite;
}

@keyframes statusPulse-b-ht8vt3i0wr {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Card Typography */
.card-title[b-ht8vt3i0wr] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.card-description[b-ht8vt3i0wr] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
    flex: 1;
}

/* Feature Tags */
.card-features[b-ht8vt3i0wr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.feature-tag[b-ht8vt3i0wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
}

    .feature-tag i[b-ht8vt3i0wr] {
        font-size: 0.625rem;
        opacity: 0.8;
    }

/* Card Footer */
.card-footer[b-ht8vt3i0wr] {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-divider);
}

.card-action[b-ht8vt3i0wr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

    .card-action.disabled[b-ht8vt3i0wr] {
        color: var(--text-muted);
    }

.action-arrow[b-ht8vt3i0wr] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9375rem;
}

.dashboard-card:hover:not(.disabled) .action-arrow[b-ht8vt3i0wr] {
    transform: translateX(8px);
    animation: arrowBounce-b-ht8vt3i0wr 1s ease-in-out infinite;
}

@keyframes arrowBounce-b-ht8vt3i0wr {
    0%, 100% {
        transform: translateX(8px);
    }

    50% {
        transform: translateX(12px);
    }
}

/* Card Hover Effect Layer */
.card-hover-effect[b-ht8vt3i0wr] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.dashboard-card:hover .card-hover-effect[b-ht8vt3i0wr] {
    opacity: 1;
}

/* Dashboard Main View */
.dashboard-main[b-ht8vt3i0wr] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: mainSlideIn-b-ht8vt3i0wr 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes mainSlideIn-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dashboard Header */
.dashboard-header[b-ht8vt3i0wr] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    padding: 1.5rem 2rem;
    animation: dashHeaderSlide-b-ht8vt3i0wr 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

@keyframes dashHeaderSlide-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-header-content[b-ht8vt3i0wr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.dashboard-info[b-ht8vt3i0wr] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.dashboard-icon-wrapper[b-ht8vt3i0wr] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    border-radius: 16px;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

.dashboard-title-section[b-ht8vt3i0wr] {
    flex: 1;
}

.dashboard-title[b-ht8vt3i0wr] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.dashboard-subtitle[b-ht8vt3i0wr] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.dashboard-actions[b-ht8vt3i0wr] {
    display: flex;
    gap: 0.75rem;
}

.dash-btn[b-ht8vt3i0wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-btn-secondary[b-ht8vt3i0wr] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .dash-btn-secondary:hover[b-ht8vt3i0wr] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

.dash-btn-primary[b-ht8vt3i0wr] {
    background: var(--primary-gradient);
    color: white;
}

    .dash-btn-primary:hover[b-ht8vt3i0wr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
    }

.spinning[b-ht8vt3i0wr] {
    animation: spin-b-ht8vt3i0wr 1s linear infinite;
}

@keyframes spin-b-ht8vt3i0wr {
    to {
        transform: rotate(360deg);
    }
}

/* Dashboard Content */
.dashboard-content[b-ht8vt3i0wr] {
    flex: 1;
    overflow: auto;
    background-color: var(--body-bg);
    animation: dashContentFade-b-ht8vt3i0wr 0.6s ease-out 0.4s both;
}

@keyframes dashContentFade-b-ht8vt3i0wr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Return Button - Bottom Left */
.return-button[b-ht8vt3i0wr] {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;

    border: 2px solid var(--border-divider);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;

    font-weight: 600;
    animation: returnBtnSlide-b-ht8vt3i0wr 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;

    background: var(--primary-gradient);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.3);
    color: white;
}

@keyframes returnBtnSlide-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.return-button:hover[b-ht8vt3i0wr] {
    background: var(--primary-gradient);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.3);
    color: white;
}

.return-button i[b-ht8vt3i0wr] {
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.return-button:hover i[b-ht8vt3i0wr] {
    transform: translateX(-4px);
}

.return-text[b-ht8vt3i0wr] {
    font-size: 0.9375rem;
    letter-spacing: 0.025em;
}

/* Placeholder Content */
.placeholder-content[b-ht8vt3i0wr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 3rem;
    text-align: center;
    background-color: var(--content-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    margin: 2rem;
    animation: placeholderFloat-b-ht8vt3i0wr 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes placeholderFloat-b-ht8vt3i0wr {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animated-placeholder-icon[b-ht8vt3i0wr] {
    font-size: 4rem;
    margin-bottom: 2rem;
    color: var(--primary);
    opacity: 0.8;
    animation: iconFloat-b-ht8vt3i0wr 3s ease-in-out infinite, iconRotate-b-ht8vt3i0wr 20s linear infinite;
}

@keyframes iconFloat-b-ht8vt3i0wr {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

@keyframes iconRotate-b-ht8vt3i0wr {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1400px) {
    .dashboard-grid[b-ht8vt3i0wr] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 1200px) {
    .dashboard-grid[b-ht8vt3i0wr] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.25rem;
    }

    .search-container[b-ht8vt3i0wr] {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .scale-header[b-ht8vt3i0wr] {
        padding: 1rem;
    }

    .scale-header-content[b-ht8vt3i0wr] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .scale-header-actions[b-ht8vt3i0wr] {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .search-container[b-ht8vt3i0wr] {
        width: 100%;
    }

    .category-filter-wrapper[b-ht8vt3i0wr] {
        padding: 0.75rem 1rem;
    }

    .category-filters[b-ht8vt3i0wr] {
        gap: 0.5rem;
    }

    .category-pill[b-ht8vt3i0wr] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    .dashboard-content-wrapper[b-ht8vt3i0wr] {
        padding: 1rem;
    }

    .dashboard-grid[b-ht8vt3i0wr] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-content[b-ht8vt3i0wr] {
        padding: 1.5rem;
    }

    .dashboard-header[b-ht8vt3i0wr] {
        padding: 1rem;
    }

    .dashboard-header-content[b-ht8vt3i0wr] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .dashboard-info[b-ht8vt3i0wr] {
        flex-direction: column;
        text-align: center;
    }

    .dashboard-actions[b-ht8vt3i0wr] {
        width: 100%;
        justify-content: space-between;
    }

    /* Mobile Return Button */
    .return-button[b-ht8vt3i0wr] {
        bottom: 1rem;
        left: 1rem;
        padding: 0.75rem;
        border-radius: 12px;
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .return-text[b-ht8vt3i0wr] {
        display: none;
    }

    .return-button i[b-ht8vt3i0wr] {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .scale-main-title[b-ht8vt3i0wr] {
        font-size: 1.5rem;
    }

    .scale-btn span[b-ht8vt3i0wr] {
        display: none;
    }

    .category-title[b-ht8vt3i0wr] {
        font-size: 1.25rem;
    }

    .card-title[b-ht8vt3i0wr] {
        font-size: 1.125rem;
    }

    .card-description[b-ht8vt3i0wr] {
        font-size: 0.875rem;
    }

    .pill-count[b-ht8vt3i0wr] {
        display: none;
    }
}

/* Scrollbar Styling */
.dashboard-content-wrapper[b-ht8vt3i0wr]::-webkit-scrollbar,
.dashboard-content[b-ht8vt3i0wr]::-webkit-scrollbar {
    width: 10px;
}

.dashboard-content-wrapper[b-ht8vt3i0wr]::-webkit-scrollbar-track,
.dashboard-content[b-ht8vt3i0wr]::-webkit-scrollbar-track {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 10px;
}

.dashboard-content-wrapper[b-ht8vt3i0wr]::-webkit-scrollbar-thumb,
.dashboard-content[b-ht8vt3i0wr]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.3) 100%);
    border-radius: 10px;
    border: 2px solid var(--body-bg);
}

    .dashboard-content-wrapper[b-ht8vt3i0wr]::-webkit-scrollbar-thumb:hover,
    .dashboard-content[b-ht8vt3i0wr]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.5) 100%);
    }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-ht8vt3i0wr] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .dashboard-card[b-ht8vt3i0wr] {
        border-width: 2px;
    }

    .category-pill.active[b-ht8vt3i0wr] {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/ContractDashboard.razor.rz.scp.css */
/* ====== Contract Dashboard Component - Mobile-First Premium Design ====== */

/* ====== Modal Container ====== */
.eu-cd-modal-overlay[b-cebbt1dw1u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--spacing-4);
}

.eu-cd-modal-visible[b-cebbt1dw1u] {
    opacity: 1;
    visibility: visible;
}

.eu-cd-dashboard-content[b-cebbt1dw1u] {
    background: var(--content-bg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 1200px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 1px solid var(--border-divider);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-cd-modal-visible .eu-cd-dashboard-content[b-cebbt1dw1u] {
    transform: scale(1) translateY(0);
}

/* ====== Modal Header ====== */
.eu-cd-modal-header[b-cebbt1dw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    position: relative;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

    .eu-cd-modal-header[b-cebbt1dw1u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.eu-cd-header-main[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.eu-cd-modal-icon[b-cebbt1dw1u] {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-lg);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.eu-cd-title-section[b-cebbt1dw1u] {
    flex: 1;
    min-width: 0;
}

.eu-cd-modal-title[b-cebbt1dw1u] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1.2;
}

.eu-cd-contract-number[b-cebbt1dw1u] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.eu-cd-header-actions[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.eu-cd-modal-close[b-cebbt1dw1u] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.1rem;
}

    .eu-cd-modal-close:hover[b-cebbt1dw1u] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
        transform: scale(1.05);
    }

/* ====== Loading State ====== */
.eu-cd-loading-state[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    min-height: 300px;
}

.eu-cd-loading-spinner[b-cebbt1dw1u] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-divider);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: eu-cd-spin-b-cebbt1dw1u 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    margin-bottom: var(--spacing-3);
}

.eu-cd-loading-text[b-cebbt1dw1u] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.eu-cd-spin[b-cebbt1dw1u] {
    animation: eu-cd-spin-b-cebbt1dw1u 1s linear infinite;
}

@keyframes eu-cd-spin-b-cebbt1dw1u {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Modal Body ====== */
.eu-cd-modal-body[b-cebbt1dw1u] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar {
        width: 6px;
    }

    .eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 3px;
    }

        .eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

/* ====== Hero Section ====== */
.eu-cd-hero-section[b-cebbt1dw1u] {
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: visible;
    box-shadow: var(--shadow-sm);
}

.eu-cd-contract-meta[b-cebbt1dw1u] {
    padding: var(--spacing-4);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cd-status-badges[b-cebbt1dw1u] {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.eu-cd-contract-type-badge[b-cebbt1dw1u] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--secondary-light);
    color: var(--secondary);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
}

.eu-cd-status-badge[b-cebbt1dw1u] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.eu-cd-status-success[b-cebbt1dw1u] {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.eu-cd-status-warning[b-cebbt1dw1u] {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

.eu-cd-status-danger[b-cebbt1dw1u] {
    background: var(--danger-light);
    color: var(--danger);
    border-color: var(--danger);
}

.eu-cd-contract-details[b-cebbt1dw1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-3);
}

.eu-cd-detail-item[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eu-cd-detail-label[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-cd-detail-value[b-cebbt1dw1u] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* ====== Progress Hero ====== */
.eu-cd-progress-hero[b-cebbt1dw1u] {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.eu-cd-progress-stats[b-cebbt1dw1u] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-4);
    align-items: center;
}

.eu-cd-stat-hero[b-cebbt1dw1u] {
    text-align: center;
    padding: var(--spacing-3);
    background: var(--primary-light);
    border-radius: var(--border-radius-lg);
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    min-width: 120px;
}

    .eu-cd-stat-hero .eu-cd-stat-number[b-cebbt1dw1u] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
        margin-bottom: 2px;
        font-family: var(--font-mono);
    }

    .eu-cd-stat-hero .eu-cd-stat-label[b-cebbt1dw1u] {
        font-size: var(--font-size-xs);
        color: var(--primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }

.eu-cd-stat-sublabel[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-cd-stats-grid[b-cebbt1dw1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-2);
}

.eu-cd-stat-card[b-cebbt1dw1u] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-cd-stat-card:hover[b-cebbt1dw1u] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-cd-stat-icon[b-cebbt1dw1u] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-cd-stat-success[b-cebbt1dw1u] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cd-stat-warning[b-cebbt1dw1u] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cd-stat-info[b-cebbt1dw1u] {
    background: var(--info-light);
    color: var(--info);
}

.eu-cd-stat-content[b-cebbt1dw1u] {
    flex: 1;
    min-width: 0;
}

.eu-cd-stat-card .eu-cd-stat-number[b-cebbt1dw1u] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

.eu-cd-stat-card .eu-cd-stat-label[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ====== Progress Visual ====== */
.eu-cd-progress-visual[b-cebbt1dw1u] {
    position: relative;
}

.eu-cd-progress-bar-hero[b-cebbt1dw1u] {
    height: 8px;
    background: var(--border-divider);
    border-radius: var(--border-radius-pill);
    overflow: visible;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.eu-cd-progress-fill[b-cebbt1dw1u] {
    height: 100%;
    background: var(--primary-gradient);
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: var(--border-radius-pill);
    position: relative;
}

    .eu-cd-progress-fill[b-cebbt1dw1u]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        animation: eu-cd-progress-shine-b-cebbt1dw1u 2s infinite;
    }

@keyframes eu-cd-progress-shine-b-cebbt1dw1u {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.eu-cd-progress-indicator[b-cebbt1dw1u] {
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-cd-progress-tooltip[b-cebbt1dw1u] {
    background: var(--primary);
    color: white;
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-size: 10px;
    font-weight: 600;
    position: relative;
    white-space: nowrap;
}

    .eu-cd-progress-tooltip[b-cebbt1dw1u]::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 3px solid transparent;
        border-top-color: var(--primary);
    }

/* ====== Section Titles ====== */
.eu-cd-section-title[b-cebbt1dw1u] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .eu-cd-section-title i[b-cebbt1dw1u] {
        color: var(--primary);
        font-size: var(--font-size-sm);
    }

/* ====== Status Overview ====== */
.eu-cd-status-overview[b-cebbt1dw1u] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-cd-status-grid[b-cebbt1dw1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-3);
}

.eu-cd-status-card[b-cebbt1dw1u] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: visible;
    transition: var(--card-transition);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    position: relative;
}

    .eu-cd-status-card[b-cebbt1dw1u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--border-divider);
        transition: var(--hover-transition);
    }

.eu-cd-status-pending[b-cebbt1dw1u]::before {
    background: var(--text-muted);
}

.eu-cd-status-checked-in[b-cebbt1dw1u]::before {
    background: var(--info);
}

.eu-cd-status-weighing[b-cebbt1dw1u]::before {
    background: var(--warning);
}

.eu-cd-status-ready[b-cebbt1dw1u]::before {
    background: var(--success);
}

.eu-cd-status-invoiced[b-cebbt1dw1u]::before {
    background: var(--primary);
}

.eu-cd-status-card:hover[b-cebbt1dw1u] {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

    .eu-cd-status-card:hover[b-cebbt1dw1u]::before {
        height: 4px;
    }

.eu-cd-status-card-header[b-cebbt1dw1u] {
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-cd-status-icon[b-cebbt1dw1u] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--subtle-bg);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.eu-cd-status-pending .eu-cd-status-icon[b-cebbt1dw1u] {
    background: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-muted);
}

.eu-cd-status-checked-in .eu-cd-status-icon[b-cebbt1dw1u] {
    background: var(--info-light);
    color: var(--info);
}

.eu-cd-status-weighing .eu-cd-status-icon[b-cebbt1dw1u] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cd-status-ready .eu-cd-status-icon[b-cebbt1dw1u] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cd-status-invoiced .eu-cd-status-icon[b-cebbt1dw1u] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-cd-status-content[b-cebbt1dw1u] {
    flex: 1;
    min-width: 0;
}

    .eu-cd-status-content h4[b-cebbt1dw1u] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 2px 0;
    }

.eu-cd-status-count[b-cebbt1dw1u] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    font-family: var(--font-mono);
}

.eu-cd-status-card-footer[b-cebbt1dw1u] {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--subtle-bg);
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cd-status-description[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ====== Tickets Section ====== */
.eu-cd-tickets-section[b-cebbt1dw1u] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: visible;
    box-shadow: var(--shadow-sm);
}

.eu-cd-section-header[b-cebbt1dw1u] {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.eu-cd-section-controls[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.eu-cd-search-container[b-cebbt1dw1u] {
    position: relative;
    min-width: 220px;
}

.eu-cd-search-input[b-cebbt1dw1u] {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 2rem;
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    background: var(--content-bg);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

    .eu-cd-search-input:focus[b-cebbt1dw1u] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

    .eu-cd-search-input[b-cebbt1dw1u]::placeholder {
        color: var(--placeholder-color);
    }

.eu-cd-search-icon[b-cebbt1dw1u] {
    position: absolute;
    left: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.eu-cd-search-clear[b-cebbt1dw1u] {
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

    .eu-cd-search-clear:hover[b-cebbt1dw1u] {
        color: var(--text-primary);
        background: var(--subtle-bg);
    }

.eu-cd-filter-select[b-cebbt1dw1u] {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    background: var(--content-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    min-width: 120px;
}

    .eu-cd-filter-select:focus[b-cebbt1dw1u] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

.eu-cd-view-toggle[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-sm);
    background: var(--content-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

    .eu-cd-view-toggle:hover[b-cebbt1dw1u] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }

    .eu-cd-view-toggle.active[b-cebbt1dw1u] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

/* ====== Table View ====== */
.eu-cd-table-container[b-cebbt1dw1u] {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.eu-cd-tickets-table[b-cebbt1dw1u] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--content-bg);
}

    .eu-cd-tickets-table thead[b-cebbt1dw1u] {
        background: var(--subtle-bg);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .eu-cd-tickets-table th[b-cebbt1dw1u] {
        padding: var(--spacing-2) var(--spacing-3);
        text-align: left;
        font-weight: 600;
        font-size: 10px;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .eu-cd-tickets-table tbody tr[b-cebbt1dw1u] {
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
        cursor: pointer;
    }

        .eu-cd-tickets-table tbody tr:hover[b-cebbt1dw1u] {
            background: rgba(var(--primary-rgb), 0.04);
            transform: translateY(-1px);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

    .eu-cd-tickets-table td[b-cebbt1dw1u] {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        vertical-align: middle;
        white-space: nowrap;
    }

.eu-cd-ticket-badge[b-cebbt1dw1u] {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px var(--spacing-1);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 10px;
}

.eu-cd-status-cell[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

    .eu-cd-status-cell i[b-cebbt1dw1u] {
        font-size: 10px;
    }

.eu-cd-urgent-indicator[b-cebbt1dw1u] {
    color: var(--warning);
    margin-left: var(--spacing-1);
}

.eu-cd-registration[b-cebbt1dw1u] {
    font-weight: 500;
}

.eu-cd-driver-name[b-cebbt1dw1u] {
    font-weight: 500;
}

.eu-cd-mass-value[b-cebbt1dw1u] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.eu-cd-net-mass[b-cebbt1dw1u] {
    color: var(--success);
    font-weight: 700;
}

.eu-cd-fm-value[b-cebbt1dw1u] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.eu-cd-date-value[b-cebbt1dw1u] {
    font-family: var(--font-mono);
    font-weight: 500;
}

/* ====== Card Grid View ====== */
.eu-cd-tickets-grid[b-cebbt1dw1u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    max-height: 400px;
    overflow-y: auto;
}

.eu-cd-ticket-card[b-cebbt1dw1u] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: visible;
    transition: var(--card-transition);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    position: relative;
}

    .eu-cd-ticket-card[b-cebbt1dw1u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        transition: var(--hover-transition);
    }

    .eu-cd-ticket-card.eu-cd-pending[b-cebbt1dw1u]::before {
        background: var(--text-muted);
    }

    .eu-cd-ticket-card.eu-cd-checked-in[b-cebbt1dw1u]::before {
        background: var(--info);
    }

    .eu-cd-ticket-card.eu-cd-weighing[b-cebbt1dw1u]::before {
        background: var(--warning);
    }

    .eu-cd-ticket-card.eu-cd-ready[b-cebbt1dw1u]::before {
        background: var(--success);
    }

    .eu-cd-ticket-card.eu-cd-invoiced[b-cebbt1dw1u]::before {
        background: var(--primary);
    }

    .eu-cd-ticket-card:hover[b-cebbt1dw1u] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }

        .eu-cd-ticket-card:hover[b-cebbt1dw1u]::before {
            height: 4px;
        }

.eu-cd-ticket-card-header[b-cebbt1dw1u] {
    padding: var(--spacing-3);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cd-ticket-main-info[b-cebbt1dw1u] {
    flex: 1;
    min-width: 0;
}

.eu-cd-ticket-number[b-cebbt1dw1u] {
    margin-bottom: var(--spacing-1);
}

.eu-cd-registration-display[b-cebbt1dw1u] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-cd-ticket-status[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-1);
}

    .eu-cd-ticket-status .eu-cd-status-badge[b-cebbt1dw1u] {
        font-size: 10px;
        padding: 2px var(--spacing-1);
    }

.eu-cd-urgent-flag[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--warning-light);
    color: var(--warning);
    padding: 2px var(--spacing-1);
    border-radius: var(--border-radius-sm);
    font-size: 10px;
    font-weight: 600;
}

.eu-cd-driver-info[b-cebbt1dw1u] {
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--subtle-bg);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

    .eu-cd-driver-info i[b-cebbt1dw1u] {
        color: var(--primary);
        font-size: 10px;
    }

.eu-cd-mass-summary[b-cebbt1dw1u] {
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cd-mass-item[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.eu-cd-mass-label[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-cd-mass-summary .eu-cd-mass-value[b-cebbt1dw1u] {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-cd-ticket-footer[b-cebbt1dw1u] {
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
}

.eu-cd-date-info[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eu-cd-date-label[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-cd-ticket-footer .eu-cd-date-value[b-cebbt1dw1u] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
}

.eu-cd-view-details[b-cebbt1dw1u] {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
    font-size: var(--font-size-xs);
}

    .eu-cd-view-details:hover[b-cebbt1dw1u] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: scale(1.1);
    }

/* ====== Operational Timeline ====== */
.eu-cd-operational-timeline[b-cebbt1dw1u] {
    padding: var(--spacing-3);
    background: rgba(var(--subtle-bg-rgb), 0.4);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cd-timeline-steps[b-cebbt1dw1u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.eu-cd-timeline-step[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    text-align: center;
}

.eu-cd-step-marker[b-cebbt1dw1u] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--subtle-bg);
    border: 2px solid var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.eu-cd-timeline-step.completed .eu-cd-step-marker[b-cebbt1dw1u] {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.eu-cd-timeline-step.current .eu-cd-step-marker[b-cebbt1dw1u] {
    background: var(--warning);
    border-color: var(--warning);
    color: white;
    animation: pulse-b-cebbt1dw1u 2s infinite;
}

@keyframes pulse-b-cebbt1dw1u {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0);
    }
}

.eu-cd-timeline-step.pending .eu-cd-step-marker[b-cebbt1dw1u] {
    opacity: 0.5;
}

.eu-cd-step-info[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eu-cd-step-label[b-cebbt1dw1u] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eu-cd-step-time[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.eu-cd-operational-summary[b-cebbt1dw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-2);
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

.eu-cd-process-time[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

    .eu-cd-process-time i[b-cebbt1dw1u] {
        font-size: 10px;
    }

.eu-cd-loading-status[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--info);
    font-weight: 500;
}

    .eu-cd-loading-status i[b-cebbt1dw1u] {
        font-size: var(--font-size-xs);
    }

/* ====== Operational Status Badges ====== */
.eu-cd-completion-badge[b-cebbt1dw1u],
.eu-cd-invoice-badge[b-cebbt1dw1u],
.eu-cd-progress-badge[b-cebbt1dw1u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--spacing-1);
    border-radius: var(--border-radius-sm);
    font-size: 10px;
    font-weight: 600;
}

.eu-cd-completion-badge[b-cebbt1dw1u] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cd-invoice-badge[b-cebbt1dw1u] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-cd-progress-badge[b-cebbt1dw1u] {
    background: var(--warning-light);
    color: var(--warning);
}

/* ====== Additional Status Indicators ====== */
.eu-cd-urgent-indicator[b-cebbt1dw1u] {
    color: var(--warning);
    animation: blink-b-cebbt1dw1u 2s infinite;
}

@keyframes blink-b-cebbt1dw1u {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.eu-cd-process-time[b-cebbt1dw1u],
.eu-cd-today-complete[b-cebbt1dw1u],
.eu-cd-invoiced-mass[b-cebbt1dw1u] {
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

    .eu-cd-process-time i[b-cebbt1dw1u],
    .eu-cd-today-complete i[b-cebbt1dw1u],
    .eu-cd-invoiced-mass i[b-cebbt1dw1u] {
        font-size: 10px;
        color: var(--primary);
    }

/* ====== Buttons ====== */
.eu-cd-btn[b-cebbt1dw1u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
}

    .eu-cd-btn:hover:not(:disabled)[b-cebbt1dw1u] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .eu-cd-btn:disabled[b-cebbt1dw1u] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.eu-cd-btn-ghost[b-cebbt1dw1u] {
    background: var(--content-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .eu-cd-btn-ghost:hover:not(:disabled)[b-cebbt1dw1u] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

.eu-cd-btn-secondary[b-cebbt1dw1u] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .eu-cd-btn-secondary:hover:not(:disabled)[b-cebbt1dw1u] {
        background: var(--border-divider);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

.eu-cd-btn-icon[b-cebbt1dw1u] {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--border-radius-sm);
    background: var(--content-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: var(--font-size-xs);
}

    .eu-cd-btn-icon:hover[b-cebbt1dw1u] {
        background: var(--primary-light);
        color: var(--primary);
        border-color: var(--primary);
        transform: scale(1.1);
    }

/* ====== Empty State ====== */
.eu-cd-empty-state[b-cebbt1dw1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8) var(--spacing-3);
    text-align: center;
    background: var(--content-bg);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-3) var(--spacing-4);
}

.eu-cd-empty-icon[b-cebbt1dw1u] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-3);
    opacity: 0.7;
}

.eu-cd-empty-title[b-cebbt1dw1u] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1) 0;
}

.eu-cd-empty-description[b-cebbt1dw1u] {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-3) 0;
    font-size: var(--font-size-xs);
    max-width: 300px;
    line-height: 1.6;
}

/* ====== Modal Footer ====== */
.eu-cd-modal-footer[b-cebbt1dw1u] {
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
}

.eu-cd-footer-stats[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.eu-cd-stat-item[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
}

.eu-cd-stat-label[b-cebbt1dw1u] {
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-cd-stat-value[b-cebbt1dw1u] {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.eu-cd-stat-item.urgent .eu-cd-stat-value[b-cebbt1dw1u] {
    color: var(--warning);
}

.eu-cd-stat-separator[b-cebbt1dw1u] {
    color: var(--text-muted);
    font-weight: 300;
}

.eu-cd-footer-actions[b-cebbt1dw1u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* ====== Scrollbar Styling ====== */
.eu-cd-table-container[b-cebbt1dw1u]::-webkit-scrollbar,
.eu-cd-tickets-grid[b-cebbt1dw1u]::-webkit-scrollbar,
.eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar {
    width: 6px;
}

.eu-cd-table-container[b-cebbt1dw1u]::-webkit-scrollbar-track,
.eu-cd-tickets-grid[b-cebbt1dw1u]::-webkit-scrollbar-track,
.eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar-track {
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border-radius: 3px;
    margin: 4px 0;
}

.eu-cd-table-container[b-cebbt1dw1u]::-webkit-scrollbar-thumb,
.eu-cd-tickets-grid[b-cebbt1dw1u]::-webkit-scrollbar-thumb,
.eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scroll-thumb) 0%, rgba(var(--primary-rgb), 0.3) 100%);
    border-radius: 3px;
    border: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .eu-cd-table-container[b-cebbt1dw1u]::-webkit-scrollbar-thumb:hover,
    .eu-cd-tickets-grid[b-cebbt1dw1u]::-webkit-scrollbar-thumb:hover,
    .eu-cd-modal-body[b-cebbt1dw1u]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--scroll-thumb-hover) 0%, rgba(var(--primary-rgb), 0.5) 100%);
    }

/* ====== RESPONSIVE DESIGN - MOBILE FIRST ====== */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .eu-cd-dashboard-content[b-cebbt1dw1u] {
        max-width: 95vw;
    }

    .eu-cd-progress-stats[b-cebbt1dw1u] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .eu-cd-stats-grid[b-cebbt1dw1u] {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .eu-cd-status-grid[b-cebbt1dw1u] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* Tablets */
@media (max-width: 992px) {
    .eu-cd-modal-overlay[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-dashboard-content[b-cebbt1dw1u] {
        max-height: 90vh;
    }

    .eu-cd-modal-header[b-cebbt1dw1u] {
        padding: var(--spacing-3) var(--spacing-4);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-cd-header-main[b-cebbt1dw1u] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .eu-cd-header-actions[b-cebbt1dw1u] {
        width: 100%;
        justify-content: flex-end;
    }

    .eu-cd-modal-body[b-cebbt1dw1u] {
        padding: var(--spacing-3);
    }

    .eu-cd-section-header[b-cebbt1dw1u] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-cd-section-controls[b-cebbt1dw1u] {
        width: 100%;
        justify-content: stretch;
    }

    .eu-cd-search-container[b-cebbt1dw1u] {
        min-width: auto;
        flex: 1;
    }

    .eu-cd-status-grid[b-cebbt1dw1u] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .eu-cd-tickets-table[b-cebbt1dw1u] {
        font-size: 10px;
    }

        .eu-cd-tickets-table th[b-cebbt1dw1u],
        .eu-cd-tickets-table td[b-cebbt1dw1u] {
            padding: var(--spacing-1) var(--spacing-2);
        }
}

/* Large Mobile */
@media (max-width: 768px) {
    .eu-cd-modal-overlay[b-cebbt1dw1u] {
        padding: var(--spacing-1);
    }

    .eu-cd-dashboard-content[b-cebbt1dw1u] {
        border-radius: var(--border-radius-md);
        max-height: 95vh;
    }

    .eu-cd-modal-header[b-cebbt1dw1u] {
        padding: var(--spacing-2) var(--spacing-3);
    }

    .eu-cd-modal-icon[b-cebbt1dw1u] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .eu-cd-modal-title[b-cebbt1dw1u] {
        font-size: var(--font-size-base);
    }

    .eu-cd-modal-close[b-cebbt1dw1u] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .eu-cd-modal-body[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        gap: var(--spacing-3);
    }

    .eu-cd-progress-hero[b-cebbt1dw1u] {
        padding: var(--spacing-3);
    }

    .eu-cd-stat-hero .eu-cd-stat-number[b-cebbt1dw1u] {
        font-size: 1.5rem;
    }

    .eu-cd-stats-grid[b-cebbt1dw1u] {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-1);
    }

    .eu-cd-stat-card[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-status-grid[b-cebbt1dw1u] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .eu-cd-status-card-header[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-status-icon[b-cebbt1dw1u] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .eu-cd-status-count[b-cebbt1dw1u] {
        font-size: 1.25rem;
    }

    .eu-cd-section-header[b-cebbt1dw1u] {
        padding: var(--spacing-3);
    }

    .eu-cd-section-controls[b-cebbt1dw1u] {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .eu-cd-search-container[b-cebbt1dw1u],
    .eu-cd-filter-select[b-cebbt1dw1u],
    .eu-cd-view-toggle[b-cebbt1dw1u] {
        width: 100%;
    }

    .eu-cd-view-toggle[b-cebbt1dw1u] {
        justify-content: center;
    }

    .eu-cd-table-container[b-cebbt1dw1u] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .eu-cd-tickets-table[b-cebbt1dw1u] {
        min-width: 600px;
    }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        padding: var(--spacing-3);
    }

    .eu-cd-modal-footer[b-cebbt1dw1u] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-cd-footer-stats[b-cebbt1dw1u] {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .eu-cd-footer-actions[b-cebbt1dw1u] {
        justify-content: center;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .eu-cd-modal-overlay[b-cebbt1dw1u] {
        padding: 0;
    }

    .eu-cd-dashboard-content[b-cebbt1dw1u] {
        border-radius: 0;
        max-height: 100vh;
        max-width: 100%;
    }

    .eu-cd-modal-header[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        border-radius: 0;
    }

    .eu-cd-modal-icon[b-cebbt1dw1u] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-cd-modal-title[b-cebbt1dw1u] {
        font-size: 0.875rem;
    }

    .eu-cd-contract-number[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-modal-close[b-cebbt1dw1u] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .eu-cd-modal-body[b-cebbt1dw1u] {
        padding: var(--spacing-1);
        gap: var(--spacing-2);
    }

    .eu-cd-hero-section[b-cebbt1dw1u] {
        border-radius: var(--border-radius-sm);
    }

    .eu-cd-contract-meta[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-status-badges[b-cebbt1dw1u] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }

    .eu-cd-contract-details[b-cebbt1dw1u] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .eu-cd-progress-hero[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }

    .eu-cd-stat-hero[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        min-width: auto;
    }

        .eu-cd-stat-hero .eu-cd-stat-number[b-cebbt1dw1u] {
            font-size: 1.25rem;
        }

    .eu-cd-stats-grid[b-cebbt1dw1u] {
        grid-template-columns: 1fr;
        gap: var(--spacing-1);
    }

    .eu-cd-stat-card[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        gap: var(--spacing-1);
    }

    .eu-cd-stat-icon[b-cebbt1dw1u] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .eu-cd-status-overview[b-cebbt1dw1u],
    .eu-cd-tickets-section[b-cebbt1dw1u] {
        border-radius: var(--border-radius-sm);
        box-shadow: none;
    }

    .eu-cd-status-overview[b-cebbt1dw1u] {
        padding: var(--spacing-3);
    }

    .eu-cd-section-title[b-cebbt1dw1u] {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-2);
    }

    .eu-cd-status-card-header[b-cebbt1dw1u] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-1);
    }

    .eu-cd-status-content h4[b-cebbt1dw1u] {
        font-size: 0.75rem;
    }

    .eu-cd-status-count[b-cebbt1dw1u] {
        font-size: 1rem;
    }

    .eu-cd-status-card-footer[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
    }

    .eu-cd-section-header[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-search-input[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) 1.75rem;
        font-size: 0.75rem;
    }

    .eu-cd-search-icon[b-cebbt1dw1u] {
        left: var(--spacing-1);
        font-size: 0.75rem;
    }

    .eu-cd-filter-select[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.75rem;
    }

    .eu-cd-view-toggle[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.75rem;
    }

    .eu-cd-tickets-table[b-cebbt1dw1u] {
        min-width: 500px;
        font-size: 9px;
    }

        .eu-cd-tickets-table th[b-cebbt1dw1u],
        .eu-cd-tickets-table td[b-cebbt1dw1u] {
            padding: 4px var(--spacing-1);
        }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }

    .eu-cd-ticket-card[b-cebbt1dw1u] {
        border-radius: var(--border-radius-sm);
    }

    .eu-cd-ticket-card-header[b-cebbt1dw1u] {
        padding: var(--spacing-2);
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .eu-cd-ticket-status[b-cebbt1dw1u] {
        align-items: flex-start;
        width: 100%;
    }

    .eu-cd-driver-info[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.625rem;
    }

    .eu-cd-mass-summary[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        flex-wrap: wrap;
        gap: var(--spacing-1);
    }

    .eu-cd-mass-item[b-cebbt1dw1u] {
        min-width: 60px;
    }

    .eu-cd-ticket-footer[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        flex-direction: column;
        gap: var(--spacing-1);
        align-items: stretch;
    }

    .eu-cd-date-info[b-cebbt1dw1u] {
        text-align: center;
    }

    .eu-cd-view-details[b-cebbt1dw1u] {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    .eu-cd-timeline-steps[b-cebbt1dw1u] {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .eu-cd-timeline-step[b-cebbt1dw1u] {
        flex-direction: row;
        text-align: left;
        gap: var(--spacing-1);
    }

    .eu-cd-step-marker[b-cebbt1dw1u] {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }

    .eu-cd-step-label[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-step-time[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-operational-summary[b-cebbt1dw1u] {
        flex-direction: column;
        gap: var(--spacing-1);
        align-items: flex-start;
    }

    .eu-cd-empty-state[b-cebbt1dw1u] {
        padding: var(--spacing-4) var(--spacing-2);
        margin: var(--spacing-2);
    }

    .eu-cd-empty-icon[b-cebbt1dw1u] {
        font-size: 2rem;
    }

    .eu-cd-empty-title[b-cebbt1dw1u] {
        font-size: 0.875rem;
    }

    .eu-cd-empty-description[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-btn[b-cebbt1dw1u] {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.625rem;
    }

    .eu-cd-btn-icon[b-cebbt1dw1u] {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    .eu-cd-modal-footer[b-cebbt1dw1u] {
        padding: var(--spacing-2);
    }

    .eu-cd-footer-stats[b-cebbt1dw1u] {
        flex-direction: column;
        gap: var(--spacing-1);
        text-align: center;
    }

    .eu-cd-stat-separator[b-cebbt1dw1u] {
        display: none;
    }

    .eu-cd-footer-actions[b-cebbt1dw1u] {
        width: 100%;
    }

        .eu-cd-footer-actions .eu-cd-btn[b-cebbt1dw1u] {
            flex: 1;
        }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .eu-cd-modal-header[b-cebbt1dw1u] {
        padding: 8px;
    }

    .eu-cd-header-main[b-cebbt1dw1u] {
        gap: 8px;
    }

    .eu-cd-modal-icon[b-cebbt1dw1u] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .eu-cd-modal-title[b-cebbt1dw1u] {
        font-size: 0.75rem;
    }

    .eu-cd-contract-number[b-cebbt1dw1u] {
        font-size: 0.5625rem;
        padding: 2px 6px;
    }

    .eu-cd-modal-close[b-cebbt1dw1u] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .eu-cd-modal-body[b-cebbt1dw1u] {
        gap: 12px;
    }

    .eu-cd-contract-meta[b-cebbt1dw1u] {
        padding: 12px;
    }

    .eu-cd-status-badges[b-cebbt1dw1u] {
        gap: 4px;
    }

    .eu-cd-contract-type-badge[b-cebbt1dw1u],
    .eu-cd-status-badge[b-cebbt1dw1u] {
        font-size: 0.5625rem;
        padding: 2px 8px;
    }

    .eu-cd-detail-label[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-detail-value[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-progress-hero[b-cebbt1dw1u] {
        padding: 12px;
        gap: 12px;
    }

    .eu-cd-stat-hero[b-cebbt1dw1u] {
        padding: 12px;
    }

        .eu-cd-stat-hero .eu-cd-stat-number[b-cebbt1dw1u] {
            font-size: 1rem;
        }

        .eu-cd-stat-hero .eu-cd-stat-label[b-cebbt1dw1u] {
            font-size: 0.625rem;
        }

    .eu-cd-stat-sublabel[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-stat-card[b-cebbt1dw1u] {
        padding: 8px;
    }

    .eu-cd-stat-icon[b-cebbt1dw1u] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .eu-cd-stat-card .eu-cd-stat-number[b-cebbt1dw1u] {
        font-size: 0.75rem;
    }

    .eu-cd-stat-card .eu-cd-stat-label[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-progress-bar-hero[b-cebbt1dw1u] {
        height: 6px;
    }

    .eu-cd-progress-tooltip[b-cebbt1dw1u] {
        font-size: 9px;
        padding: 2px 6px;
    }

    .eu-cd-status-overview[b-cebbt1dw1u] {
        padding: 12px;
    }

    .eu-cd-section-title[b-cebbt1dw1u] {
        font-size: 0.75rem;
        gap: 4px;
        margin-bottom: 8px;
    }

        .eu-cd-section-title i[b-cebbt1dw1u] {
            font-size: 0.75rem;
        }

    .eu-cd-status-icon[b-cebbt1dw1u] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .eu-cd-status-content h4[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-status-count[b-cebbt1dw1u] {
        font-size: 0.875rem;
    }

    .eu-cd-status-description[b-cebbt1dw1u],
    .eu-cd-process-time[b-cebbt1dw1u],
    .eu-cd-today-complete[b-cebbt1dw1u],
    .eu-cd-invoiced-mass[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-section-header[b-cebbt1dw1u] {
        padding: 12px;
    }

    .eu-cd-search-input[b-cebbt1dw1u] {
        padding: 6px 20px 6px 24px;
        font-size: 0.625rem;
    }

    .eu-cd-search-icon[b-cebbt1dw1u] {
        left: 6px;
        font-size: 0.625rem;
    }

    .eu-cd-search-clear[b-cebbt1dw1u] {
        right: 4px;
        padding: 4px;
    }

    .eu-cd-filter-select[b-cebbt1dw1u] {
        padding: 6px 20px 6px 8px;
        font-size: 0.625rem;
    }

    .eu-cd-view-toggle[b-cebbt1dw1u] {
        padding: 6px 12px;
        font-size: 0.625rem;
    }

        .eu-cd-view-toggle i[b-cebbt1dw1u] {
            font-size: 0.625rem;
        }

    .eu-cd-tickets-table[b-cebbt1dw1u] {
        min-width: 400px;
        font-size: 8px;
    }

        .eu-cd-tickets-table th[b-cebbt1dw1u],
        .eu-cd-tickets-table td[b-cebbt1dw1u] {
            padding: 3px 6px;
        }

    .eu-cd-ticket-badge[b-cebbt1dw1u] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        padding: 12px;
        gap: 12px;
    }

    .eu-cd-ticket-card-header[b-cebbt1dw1u] {
        padding: 12px;
    }

    .eu-cd-registration-display[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-urgent-flag[b-cebbt1dw1u] {
        font-size: 9px;
        padding: 1px 6px;
    }

    .eu-cd-driver-info[b-cebbt1dw1u] {
        padding: 6px 12px;
    }

    .eu-cd-mass-summary[b-cebbt1dw1u] {
        padding: 6px 12px;
    }

    .eu-cd-mass-label[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-mass-summary .eu-cd-mass-value[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-ticket-footer[b-cebbt1dw1u] {
        padding: 6px 12px;
    }

    .eu-cd-date-label[b-cebbt1dw1u] {
        font-size: 9px;
    }

    .eu-cd-ticket-footer .eu-cd-date-value[b-cebbt1dw1u] {
        font-size: 0.625rem;
    }

    .eu-cd-view-details[b-cebbt1dw1u] {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    .eu-cd-operational-timeline[b-cebbt1dw1u] {
        padding: 12px;
    }

    .eu-cd-timeline-steps[b-cebbt1dw1u] {
        gap: 8px;
    }

    .eu-cd-timeline-step[b-cebbt1dw1u] {
        gap: 6px;
    }

    .eu-cd-step-marker[b-cebbt1dw1u] {
        width: 18px;
        height: 18px;
        font-size: 7px;
        border-width: 1px;
    }

    .eu-cd-step-label[b-cebbt1dw1u] {
        font-size: 8px;
    }

    .eu-cd-step-time[b-cebbt1dw1u] {
        font-size: 8px;
    }

    .eu-cd-process-time[b-cebbt1dw1u] {
        font-size: 0.5625rem;
    }

    .eu-cd-loading-status[b-cebbt1dw1u] {
        font-size: 0.5625rem;
    }

    .eu-cd-completion-badge[b-cebbt1dw1u],
    .eu-cd-invoice-badge[b-cebbt1dw1u],
    .eu-cd-progress-badge[b-cebbt1dw1u] {
        font-size: 9px;
        padding: 1px 6px;
    }

    .eu-cd-empty-state[b-cebbt1dw1u] {
        padding: 24px 12px;
    }

    .eu-cd-empty-icon[b-cebbt1dw1u] {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .eu-cd-empty-title[b-cebbt1dw1u] {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }

    .eu-cd-empty-description[b-cebbt1dw1u] {
        font-size: 0.5625rem;
        margin-bottom: 12px;
    }

    .eu-cd-btn[b-cebbt1dw1u] {
        padding: 6px 12px;
        font-size: 0.5625rem;
        gap: 4px;
    }

        .eu-cd-btn i[b-cebbt1dw1u] {
            font-size: 0.625rem;
        }

    .eu-cd-btn-icon[b-cebbt1dw1u] {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    .eu-cd-modal-footer[b-cebbt1dw1u] {
        padding: 12px;
        gap: 8px;
    }

    .eu-cd-stat-item[b-cebbt1dw1u] {
        font-size: 0.5625rem;
        gap: 4px;
    }

    .eu-cd-footer-actions[b-cebbt1dw1u] {
        gap: 8px;
    }
}

/* ====== Print Styles ====== */
@media print {
    .eu-cd-modal-overlay[b-cebbt1dw1u] {
        position: static;
        padding: 0;
        background: white;
    }

    .eu-cd-dashboard-content[b-cebbt1dw1u] {
        box-shadow: none;
        border: 1px solid #ccc;
        max-height: none;
    }

    .eu-cd-modal-close[b-cebbt1dw1u],
    .eu-cd-btn[b-cebbt1dw1u],
    .eu-cd-search-container[b-cebbt1dw1u],
    .eu-cd-filter-select[b-cebbt1dw1u],
    .eu-cd-view-toggle[b-cebbt1dw1u],
    .eu-cd-view-details[b-cebbt1dw1u] {
        display: none !important;
    }

    .eu-cd-ticket-card[b-cebbt1dw1u],
    .eu-cd-status-card[b-cebbt1dw1u] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .eu-cd-tickets-grid[b-cebbt1dw1u] {
        max-height: none;
        overflow: visible;
    }

    .eu-cd-table-container[b-cebbt1dw1u] {
        max-height: none;
        overflow: visible;
    }
}

/* ====== Accessibility ====== */
@media (prefers-reduced-motion: reduce) {
    .eu-cd-spin[b-cebbt1dw1u],
    .eu-cd-progress-shine[b-cebbt1dw1u],
    .pulse[b-cebbt1dw1u],
    .blink[b-cebbt1dw1u] {
        animation: none;
    }

    .eu-cd-ticket-card[b-cebbt1dw1u],
    .eu-cd-status-card[b-cebbt1dw1u],
    .eu-cd-btn[b-cebbt1dw1u],
    .eu-cd-view-toggle[b-cebbt1dw1u] {
        transition: none;
    }

    .eu-cd-progress-fill[b-cebbt1dw1u] {
        transition: none;
    }
}

/* ====== High Contrast Mode ====== */
@media (prefers-contrast: high) {
    .eu-cd-ticket-card[b-cebbt1dw1u],
    .eu-cd-status-card[b-cebbt1dw1u] {
        border-width: 2px;
    }

    .eu-cd-status-badge[b-cebbt1dw1u],
    .eu-cd-urgent-flag[b-cebbt1dw1u],
    .eu-cd-contract-type-badge[b-cebbt1dw1u] {
        border-width: 2px;
    }

    .eu-cd-btn[b-cebbt1dw1u] {
        border-width: 2px;
    }

    .eu-cd-search-input[b-cebbt1dw1u],
    .eu-cd-filter-select[b-cebbt1dw1u] {
        border-width: 2px;
    }

    .eu-cd-step-marker[b-cebbt1dw1u] {
        border-width: 3px;
    }
}

/* ====== Dark Mode Enhancements ====== */
@media (prefers-color-scheme: dark) {
    .eu-cd-ticket-card:hover[b-cebbt1dw1u],
    .eu-cd-status-card:hover[b-cebbt1dw1u] {
        background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.08) 100%);
    }

    .eu-cd-loading-spinner[b-cebbt1dw1u] {
        opacity: 0.9;
    }

    .eu-cd-empty-state[b-cebbt1dw1u] {
        background-color: rgba(var(--subtle-bg-rgb), 0.5);
    }

    .eu-cd-progress-fill[b-cebbt1dw1u]::after {
        opacity: 0.4;
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/ContractDetailsModal.razor.rz.scp.css */
/* ====== Contract Details Modal Component Styles (eu-cdm-*) ====== */

/* ====== Modal Container ====== */
.eu-cdm-modal-overlay[b-4a6566m2ni] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--spacing-4);
}

.eu-cdm-modal-visible[b-4a6566m2ni] {
    opacity: 1;
    visibility: visible;
}

.eu-cdm-modal-content[b-4a6566m2ni] {
    background: var(--content-bg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-divider);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-cdm-modal-visible .eu-cdm-modal-content[b-4a6566m2ni] {
    transform: scale(1) translateY(0);
}

/* ====== Modal Header ====== */
.eu-cdm-modal-header[b-4a6566m2ni] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    position: relative;
}

    .eu-cdm-modal-header[b-4a6566m2ni]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.eu-cdm-header-main[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.eu-cdm-contract-icon[b-4a6566m2ni] {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-lg);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    border: 2px solid rgba(var(--primary-rgb), 0.2);
}

.eu-cdm-title-section[b-4a6566m2ni] {
    flex: 1;
    min-width: 0;
}

.eu-cdm-modal-title[b-4a6566m2ni] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1.2;
}

.eu-cdm-contract-number[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    color: var(--secondary);
    font-weight: 600;
    font-family: var(--font-mono);
    background: var(--secondary-light);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    display: inline-block;
}

.eu-cdm-header-actions[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.eu-cdm-modal-close[b-4a6566m2ni] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.1rem;
}

    .eu-cdm-modal-close:hover[b-4a6566m2ni] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
        transform: scale(1.05);
    }

/* ====== Modal Body ====== */
.eu-cdm-modal-body[b-4a6566m2ni] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .eu-cdm-modal-body[b-4a6566m2ni]::-webkit-scrollbar {
        width: 6px;
    }

    .eu-cdm-modal-body[b-4a6566m2ni]::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 3px;
    }

        .eu-cdm-modal-body[b-4a6566m2ni]::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

/* ====== Status Hero ====== */
.eu-cdm-status-hero[b-4a6566m2ni] {
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.eu-cdm-status-section[b-4a6566m2ni] {
    padding: var(--spacing-4);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
}

.eu-cdm-status-badges[b-4a6566m2ni] {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.eu-cdm-contract-type-badge[b-4a6566m2ni] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--secondary-light);
    color: var(--secondary);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
}

.eu-cdm-status-badge[b-4a6566m2ni] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.eu-cdm-status-success[b-4a6566m2ni] {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.eu-cdm-status-warning[b-4a6566m2ni] {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

.eu-cdm-status-danger[b-4a6566m2ni] {
    background: var(--danger-light);
    color: var(--danger);
    border-color: var(--danger);
}

.eu-cdm-contract-meta[b-4a6566m2ni] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.eu-cdm-meta-item[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .eu-cdm-meta-item:last-child[b-4a6566m2ni] {
        border-bottom: none;
    }

    .eu-cdm-meta-item i[b-4a6566m2ni] {
        color: var(--primary);
        font-size: var(--font-size-sm);
        width: 16px;
        flex-shrink: 0;
    }

.eu-cdm-meta-label[b-4a6566m2ni] {
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 60px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.eu-cdm-meta-value[b-4a6566m2ni] {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.eu-cdm-meta-warning[b-4a6566m2ni] {
    color: var(--warning);
}

.eu-cdm-meta-danger[b-4a6566m2ni] {
    color: var(--danger);
}

.eu-cdm-meta-warning .eu-cdm-meta-value[b-4a6566m2ni] {
    color: var(--warning);
    font-weight: 600;
}

.eu-cdm-meta-danger .eu-cdm-meta-value[b-4a6566m2ni] {
    color: var(--danger);
    font-weight: 600;
}

/* ====== Progress Overview ====== */
.eu-cdm-progress-overview[b-4a6566m2ni] {
    padding: var(--spacing-4);
}

.eu-cdm-progress-hero[b-4a6566m2ni] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-4);
    align-items: center;
}

.eu-cdm-progress-circle[b-4a6566m2ni] {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.eu-cdm-progress-ring[b-4a6566m2ni] {
    transform: rotate(-90deg);
}

.eu-cdm-progress-ring-bg[b-4a6566m2ni] {
    fill: none;
    stroke: var(--border-divider);
    stroke-width: 6;
}

.eu-cdm-progress-ring-fill[b-4a6566m2ni] {
    fill: none;
    stroke: var(--primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-cdm-progress-text[b-4a6566m2ni] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.eu-cdm-progress-percentage[b-4a6566m2ni] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

.eu-cdm-progress-label[b-4a6566m2ni] {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-cdm-progress-details h3[b-4a6566m2ni] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-2) 0;
}

.eu-cdm-progress-stats[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.eu-cdm-stat-item[b-4a6566m2ni] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.eu-cdm-stat-value[b-4a6566m2ni] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

.eu-cdm-stat-label[b-4a6566m2ni] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-cdm-stat-divider[b-4a6566m2ni] {
    width: 1px;
    height: 30px;
    background: var(--border-divider);
    flex-shrink: 0;
}

/* ====== Section Titles ====== */
.eu-cdm-section-title[b-4a6566m2ni] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .eu-cdm-section-title i[b-4a6566m2ni] {
        color: var(--primary);
        font-size: var(--font-size-sm);
    }

/* ====== Breakdown Section ====== */
.eu-cdm-breakdown-section[b-4a6566m2ni] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-cdm-breakdown-grid[b-4a6566m2ni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-3);
}

.eu-cdm-breakdown-card[b-4a6566m2ni] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-cdm-breakdown-card:hover[b-4a6566m2ni] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-cdm-card-completed[b-4a6566m2ni] {
    border-left: 3px solid var(--success);
}

.eu-cdm-card-remaining[b-4a6566m2ni] {
    border-left: 3px solid var(--warning);
}

.eu-cdm-card-total[b-4a6566m2ni] {
    border-left: 3px solid var(--primary);
}

.eu-cdm-breakdown-header[b-4a6566m2ni] {
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
}

.eu-cdm-breakdown-icon[b-4a6566m2ni] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-cdm-card-completed .eu-cdm-breakdown-icon[b-4a6566m2ni] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cdm-card-remaining .eu-cdm-breakdown-icon[b-4a6566m2ni] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cdm-card-total .eu-cdm-breakdown-icon[b-4a6566m2ni] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-cdm-breakdown-content[b-4a6566m2ni] {
    flex: 1;
    min-width: 0;
}

.eu-cdm-breakdown-title[b-4a6566m2ni] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.eu-cdm-breakdown-value[b-4a6566m2ni] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-family: var(--font-mono);
}

.eu-cdm-breakdown-footer[b-4a6566m2ni] {
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-cdm-breakdown-bar[b-4a6566m2ni] {
    flex: 1;
    height: 4px;
    background: var(--border-divider);
    border-radius: var(--border-radius-pill);
    overflow: hidden;
}

.eu-cdm-breakdown-fill[b-4a6566m2ni] {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: var(--border-radius-pill);
}

.eu-cdm-card-completed .eu-cdm-breakdown-fill[b-4a6566m2ni] {
    background: var(--success-gradient);
}

.eu-cdm-card-remaining .eu-cdm-breakdown-fill[b-4a6566m2ni] {
    background: var(--warning-gradient);
}

.eu-cdm-card-total .eu-cdm-breakdown-fill[b-4a6566m2ni] {
    background: var(--primary-gradient);
}

.eu-cdm-breakdown-percentage[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    min-width: 32px;
    text-align: right;
}

/* ====== Operational Section ====== */
.eu-cdm-operational-section[b-4a6566m2ni] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-cdm-operational-grid[b-4a6566m2ni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.eu-cdm-operational-card[b-4a6566m2ni] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-cdm-operational-card:hover[b-4a6566m2ni] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-cdm-operational-header[b-4a6566m2ni] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-cdm-operational-icon[b-4a6566m2ni] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-cdm-icon-efficiency[b-4a6566m2ni] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cdm-icon-timeline[b-4a6566m2ni] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cdm-icon-balance[b-4a6566m2ni] {
    background: var(--info-light);
    color: var(--info);
}

.eu-cdm-operational-header h4[b-4a6566m2ni] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-cdm-operational-content[b-4a6566m2ni] {
    padding: var(--spacing-3);
    text-align: center;
}

.eu-cdm-operational-value[b-4a6566m2ni] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-1);
    font-family: var(--font-mono);
}

.eu-cdm-operational-description[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-bottom: var(--spacing-1);
}

.eu-cdm-operational-detail[b-4a6566m2ni] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-cdm-operational-excellent[b-4a6566m2ni] {
    color: var(--success);
}

.eu-cdm-operational-good[b-4a6566m2ni] {
    color: var(--info);
}

.eu-cdm-operational-average[b-4a6566m2ni] {
    color: var(--warning);
}

.eu-cdm-operational-poor[b-4a6566m2ni] {
    color: var(--danger);
}

.eu-cdm-operational-expired[b-4a6566m2ni] {
    color: var(--danger);
    font-weight: 600;
}

.eu-cdm-operational-warning[b-4a6566m2ni] {
    color: var(--warning);
    font-weight: 600;
}

.eu-cdm-operational-complete[b-4a6566m2ni] {
    color: var(--success);
}

.eu-cdm-operational-low[b-4a6566m2ni] {
    color: var(--warning);
}

.eu-cdm-operational-medium[b-4a6566m2ni] {
    color: var(--info);
}

.eu-cdm-operational-high[b-4a6566m2ni] {
    color: var(--text-primary);
}

/* ====== Details Section ====== */
.eu-cdm-details-section[b-4a6566m2ni] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-cdm-details-grid[b-4a6566m2ni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-3);
}

.eu-cdm-info-card[b-4a6566m2ni] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-cdm-info-card:hover[b-4a6566m2ni] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-cdm-card-full-width[b-4a6566m2ni] {
    grid-column: 1 / -1;
}

.eu-cdm-card-header[b-4a6566m2ni] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-cdm-card-icon[b-4a6566m2ni] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-cdm-icon-primary[b-4a6566m2ni] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-cdm-icon-success[b-4a6566m2ni] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cdm-icon-warning[b-4a6566m2ni] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cdm-icon-info[b-4a6566m2ni] {
    background: var(--info-light);
    color: var(--info);
}

.eu-cdm-icon-calendar[b-4a6566m2ni] {
    background: var(--secondary-light);
    color: var(--secondary);
}

.eu-cdm-icon-note[b-4a6566m2ni] {
    background: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
}

.eu-cdm-card-title[b-4a6566m2ni] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-cdm-card-content[b-4a6566m2ni] {
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.eu-cdm-detail-row[b-4a6566m2ni] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .eu-cdm-detail-row:last-child[b-4a6566m2ni] {
        border-bottom: none;
    }

.eu-cdm-detail-label[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 80px;
}

.eu-cdm-detail-value[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.eu-cdm-text-primary[b-4a6566m2ni] {
    color: var(--primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-mono);
}

.eu-cdm-text-success[b-4a6566m2ni] {
    color: var(--success) !important;
    font-weight: 600 !important;
    font-family: var(--font-mono);
}

.eu-cdm-text-warning[b-4a6566m2ni] {
    color: var(--warning) !important;
    font-weight: 600 !important;
}

.eu-cdm-text-danger[b-4a6566m2ni] {
    color: var(--danger) !important;
    font-weight: 600 !important;
}

.eu-cdm-days-count[b-4a6566m2ni] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: var(--spacing-1);
}

.eu-cdm-note-content[b-4a6566m2ni] {
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ====== Performance Section ====== */
.eu-cdm-performance-section[b-4a6566m2ni] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-cdm-metrics-grid[b-4a6566m2ni] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.eu-cdm-metric-card[b-4a6566m2ni] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-cdm-metric-card:hover[b-4a6566m2ni] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-cdm-metric-header[b-4a6566m2ni] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-cdm-metric-icon[b-4a6566m2ni] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-cdm-metric-completion[b-4a6566m2ni] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-cdm-metric-efficiency[b-4a6566m2ni] {
    background: var(--success-light);
    color: var(--success);
}

.eu-cdm-metric-time[b-4a6566m2ni] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-cdm-metric-header h4[b-4a6566m2ni] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-cdm-metric-content[b-4a6566m2ni] {
    padding: var(--spacing-3);
    text-align: center;
}

.eu-cdm-metric-value[b-4a6566m2ni] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-1);
    font-family: var(--font-mono);
}

.eu-cdm-metric-description[b-4a6566m2ni] {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.eu-cdm-metric-excellent[b-4a6566m2ni] {
    color: var(--success);
}

.eu-cdm-metric-good[b-4a6566m2ni] {
    color: var(--info);
}

.eu-cdm-metric-average[b-4a6566m2ni] {
    color: var(--warning);
}

.eu-cdm-metric-poor[b-4a6566m2ni] {
    color: var(--danger);
}

.eu-cdm-metric-low[b-4a6566m2ni] {
    color: var(--warning);
}

.eu-cdm-metric-expired[b-4a6566m2ni] {
    color: var(--danger);
    font-weight: 600;
}

.eu-cdm-metric-warning[b-4a6566m2ni] {
    color: var(--warning);
    font-weight: 600;
}

.eu-cdm-metric-good[b-4a6566m2ni] {
    color: var(--success);
}

/* ====== Buttons ====== */
.eu-cdm-btn[b-4a6566m2ni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
}

    .eu-cdm-btn:hover:not(:disabled)[b-4a6566m2ni] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .eu-cdm-btn:disabled[b-4a6566m2ni] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.eu-cdm-btn-primary[b-4a6566m2ni] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

    .eu-cdm-btn-primary:hover:not(:disabled)[b-4a6566m2ni] {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: white;
    }

.eu-cdm-btn-secondary[b-4a6566m2ni] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .eu-cdm-btn-secondary:hover:not(:disabled)[b-4a6566m2ni] {
        background: var(--border-divider);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

.eu-cdm-btn-ghost[b-4a6566m2ni] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-divider);
}

    .eu-cdm-btn-ghost:hover:not(:disabled)[b-4a6566m2ni] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

/* ====== Modal Footer ====== */
.eu-cdm-modal-footer[b-4a6566m2ni] {
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
}

.eu-cdm-footer-info[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
}

.eu-cdm-contract-summary[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.eu-cdm-summary-item[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

    .eu-cdm-summary-item i[b-4a6566m2ni] {
        color: var(--primary);
        font-size: 10px;
    }

.eu-cdm-summary-divider[b-4a6566m2ni] {
    color: var(--text-muted);
    font-weight: 300;
}

.eu-cdm-footer-actions[b-4a6566m2ni] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* ====== Responsive Design ====== */
@media (max-width: 1200px) {
    .eu-cdm-modal-content[b-4a6566m2ni] {
        max-width: 95vw;
    }

    .eu-cdm-progress-hero[b-4a6566m2ni] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-3);
    }

    .eu-cdm-progress-stats[b-4a6566m2ni] {
        justify-content: center;
    }

    .eu-cdm-breakdown-grid[b-4a6566m2ni] {
        grid-template-columns: 1fr;
    }

    .eu-cdm-details-grid[b-4a6566m2ni] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 992px) {
    .eu-cdm-modal-overlay[b-4a6566m2ni] {
        padding: var(--spacing-2);
    }

    .eu-cdm-modal-content[b-4a6566m2ni] {
        max-height: 90vh;
    }

    .eu-cdm-modal-header[b-4a6566m2ni] {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .eu-cdm-header-main[b-4a6566m2ni] {
        gap: var(--spacing-2);
    }

    .eu-cdm-contract-icon[b-4a6566m2ni] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .eu-cdm-modal-body[b-4a6566m2ni] {
        padding: var(--spacing-3);
    }

    .eu-cdm-progress-circle[b-4a6566m2ni] {
        width: 80px;
        height: 80px;
    }

    .eu-cdm-progress-percentage[b-4a6566m2ni] {
        font-size: 1rem;
    }

    .eu-cdm-details-grid[b-4a6566m2ni] {
        grid-template-columns: 1fr;
    }

    .eu-cdm-metrics-grid[b-4a6566m2ni] {
        grid-template-columns: 1fr;
    }

    .eu-cdm-operational-grid[b-4a6566m2ni] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .eu-cdm-modal-overlay[b-4a6566m2ni] {
        padding: var(--spacing-1);
    }

    .eu-cdm-modal-content[b-4a6566m2ni] {
        border-radius: var(--border-radius-md);
    }

    .eu-cdm-modal-header[b-4a6566m2ni] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-cdm-header-main[b-4a6566m2ni] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .eu-cdm-modal-title[b-4a6566m2ni] {
        font-size: var(--font-size-base);
    }

    .eu-cdm-header-actions[b-4a6566m2ni] {
        align-self: flex-end;
        position: absolute;
        top: var(--spacing-2);
        right: var(--spacing-3);
    }

    .eu-cdm-modal-body[b-4a6566m2ni] {
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }

    .eu-cdm-status-section[b-4a6566m2ni],
    .eu-cdm-progress-overview[b-4a6566m2ni] {
        padding: var(--spacing-3);
    }

    .eu-cdm-contract-meta[b-4a6566m2ni] {
        align-items: center;
    }

    .eu-cdm-meta-item[b-4a6566m2ni] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-1);
    }

    .eu-cdm-meta-label[b-4a6566m2ni] {
        min-width: auto;
    }

    .eu-cdm-progress-stats[b-4a6566m2ni] {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .eu-cdm-stat-divider[b-4a6566m2ni] {
        width: 30px;
        height: 1px;
    }

    .eu-cdm-detail-row[b-4a6566m2ni] {
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }

    .eu-cdm-detail-label[b-4a6566m2ni] {
        min-width: auto;
    }

    .eu-cdm-detail-value[b-4a6566m2ni] {
        text-align: center;
    }

    .eu-cdm-modal-footer[b-4a6566m2ni] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-cdm-contract-summary[b-4a6566m2ni] {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-1);
    }

    .eu-cdm-footer-actions[b-4a6566m2ni] {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .eu-cdm-contract-icon[b-4a6566m2ni] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-cdm-modal-title[b-4a6566m2ni] {
        font-size: var(--font-size-sm);
    }

    .eu-cdm-status-badges[b-4a6566m2ni] {
        flex-direction: column;
        align-items: center;
    }

    .eu-cdm-progress-circle[b-4a6566m2ni] {
        width: 70px;
        height: 70px;
    }

    .eu-cdm-progress-percentage[b-4a6566m2ni] {
        font-size: var(--font-size-sm);
    }

    .eu-cdm-progress-stats[b-4a6566m2ni] {
        gap: var(--spacing-1);
    }

    .eu-cdm-stat-value[b-4a6566m2ni] {
        font-size: var(--font-size-xs);
    }

    .eu-cdm-metric-value[b-4a6566m2ni] {
        font-size: 1.25rem;
    }

    .eu-cdm-breakdown-header[b-4a6566m2ni],
    .eu-cdm-breakdown-footer[b-4a6566m2ni],
    .eu-cdm-card-header[b-4a6566m2ni],
    .eu-cdm-card-content[b-4a6566m2ni],
    .eu-cdm-metric-header[b-4a6566m2ni],
    .eu-cdm-metric-content[b-4a6566m2ni],
    .eu-cdm-operational-header[b-4a6566m2ni],
    .eu-cdm-operational-content[b-4a6566m2ni] {
        padding: var(--spacing-2);
    }

    .eu-cdm-contract-summary[b-4a6566m2ni] {
        flex-direction: column;
        gap: var(--spacing-1);
        text-align: center;
    }

    .eu-cdm-footer-actions[b-4a6566m2ni] {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .eu-cdm-btn[b-4a6566m2ni] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/ExternalAutoReports.razor.rz.scp.css */
/* ====== External Auto Reports Page - Mobile-First Premium Professional Design ====== */

/* ====== Page Structure & Background ====== */
.ar-page[b-2zh6zi1nmw] {
    min-height: 100vh;
    background: var(--body-bg);
    position: relative;
    overflow-x: hidden;
}

.ar-background-animation[b-2zh6zi1nmw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ar-particle[b-2zh6zi1nmw] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.08;
}

    .ar-particle:nth-child(1)[b-2zh6zi1nmw] {
        top: 15%;
        left: 25%;
        animation: ar-float-b-2zh6zi1nmw 22s infinite ease-in-out;
    }

    .ar-particle:nth-child(2)[b-2zh6zi1nmw] {
        top: 65%;
        left: 75%;
        animation: ar-float-b-2zh6zi1nmw 27s infinite ease-in-out reverse;
    }

    .ar-particle:nth-child(3)[b-2zh6zi1nmw] {
        top: 35%;
        left: 45%;
        animation: ar-float-b-2zh6zi1nmw 32s infinite ease-in-out;
    }

@keyframes ar-float-b-2zh6zi1nmw {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(35px, -35px) scale(1.2);
    }

    66% {
        transform: translate(-25px, 25px) scale(0.8);
    }
}

.ar-gradient-orb[b-2zh6zi1nmw] {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    filter: blur(60px);
    top: -275px;
    right: -275px;
    animation: ar-orb-move-b-2zh6zi1nmw 35s infinite ease-in-out;
}

.ar-gradient-orb-secondary[b-2zh6zi1nmw] {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--secondary-rgb), 0.06) 0%, transparent 70%);
    filter: blur(45px);
    bottom: -200px;
    left: -200px;
    animation: ar-orb-move-b-2zh6zi1nmw 28s infinite ease-in-out reverse;
}

@keyframes ar-orb-move-b-2zh6zi1nmw {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, 25px);
    }
}

.ar-container[b-2zh6zi1nmw] {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

/* ====== Compact Premium Header ====== */
.ar-header-wrapper[b-2zh6zi1nmw] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-left: 1em;
    border-bottom-left-radius: 30px;
    margin-right: 1em;
    border-bottom-right-radius: 30px;
}

    .ar-header-wrapper[b-2zh6zi1nmw]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.ar-header[b-2zh6zi1nmw] {
    padding: 1rem 1.5rem;
}

.ar-header-content[b-2zh6zi1nmw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.ar-brand-section[b-2zh6zi1nmw] {
    flex: 1;
}

.ar-title-group[b-2zh6zi1nmw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ar-icon-wrapper[b-2zh6zi1nmw] {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    animation: ar-icon-entrance-b-2zh6zi1nmw 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ar-icon-entrance-b-2zh6zi1nmw {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.ar-icon-wrapper i[b-2zh6zi1nmw] {
    font-size: 1.1rem;
    color: white;
    z-index: 1;
}

.ar-icon-glow[b-2zh6zi1nmw] {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 12px;
    opacity: 0.4;
    filter: blur(8px);
    animation: ar-glow-pulse-b-2zh6zi1nmw 3s ease-in-out infinite;
}

@keyframes ar-glow-pulse-b-2zh6zi1nmw {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.ar-title-content[b-2zh6zi1nmw] {
    flex: 1;
}

.ar-main-title[b-2zh6zi1nmw] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: ar-title-slide-b-2zh6zi1nmw 0.6s ease-out 0.2s both;
}

@keyframes ar-title-slide-b-2zh6zi1nmw {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.ar-subtitle[b-2zh6zi1nmw] {
    margin: 0.125rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    animation: ar-title-slide-b-2zh6zi1nmw 0.6s ease-out 0.3s both;
}

.ar-header-actions[b-2zh6zi1nmw] {
    display: flex;
    gap: 0.75rem;
    animation: ar-actions-fade-b-2zh6zi1nmw 0.6s ease-out 0.5s both;
}

@keyframes ar-actions-fade-b-2zh6zi1nmw {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== Premium Buttons ====== */
.ar-btn[b-2zh6zi1nmw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .ar-btn[b-2zh6zi1nmw]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .ar-btn:hover[b-2zh6zi1nmw]::before {
        width: 300px;
        height: 300px;
    }

    .ar-btn:disabled[b-2zh6zi1nmw] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ar-btn-primary[b-2zh6zi1nmw] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
}

    .ar-btn-primary:hover:not(:disabled)[b-2zh6zi1nmw] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    }

.ar-btn-secondary[b-2zh6zi1nmw] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .ar-btn-secondary:hover:not(:disabled)[b-2zh6zi1nmw] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-1px);
    }

.ar-spin[b-2zh6zi1nmw] {
    animation: ar-spin-b-2zh6zi1nmw 1s linear infinite;
}

@keyframes ar-spin-b-2zh6zi1nmw {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Loading States ====== */
.ar-loading[b-2zh6zi1nmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 3rem;
}

.ar-spinner[b-2zh6zi1nmw] {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

    .ar-spinner[b-2zh6zi1nmw]::before,
    .ar-spinner[b-2zh6zi1nmw]::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 3px solid transparent;
        border-radius: 50%;
    }

    .ar-spinner[b-2zh6zi1nmw]::before {
        border-top-color: var(--primary);
        animation: ar-spin-b-2zh6zi1nmw 1.5s linear infinite;
    }

    .ar-spinner[b-2zh6zi1nmw]::after {
        inset: 8px;
        border-right-color: var(--secondary);
        animation: ar-spin-b-2zh6zi1nmw 2s linear infinite reverse;
    }

.ar-loading span[b-2zh6zi1nmw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ====== Content Sections ====== */
.ar-content-wrapper[b-2zh6zi1nmw] {
    padding: 1.5rem;
    animation: ar-content-fade-b-2zh6zi1nmw 0.6s ease-out 0.3s both;
}

@keyframes ar-content-fade-b-2zh6zi1nmw {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ar-schedules-section[b-2zh6zi1nmw] {
    background: var(--content-bg);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-divider);
    overflow: hidden;
}

.ar-section-header[b-2zh6zi1nmw] {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ar-section-title[b-2zh6zi1nmw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

    .ar-section-title i[b-2zh6zi1nmw] {
        color: var(--primary);
        opacity: 0.8;
    }

.ar-section-actions[b-2zh6zi1nmw] {
    display: flex;
    gap: 0.75rem;
}

/* ====== Schedule Cards Grid ====== */
.ar-schedules-grid[b-2zh6zi1nmw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.ar-schedule-card[b-2zh6zi1nmw] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .ar-schedule-card[b-2zh6zi1nmw]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ar-schedule-card:hover[b-2zh6zi1nmw]::before {
        opacity: 1;
    }

    .ar-schedule-card:hover[b-2zh6zi1nmw] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        border-color: var(--primary-light);
    }

    .ar-schedule-card.inactive[b-2zh6zi1nmw] {
        opacity: 0.6;
        background: var(--subtle-bg);
    }

.ar-schedule-header[b-2zh6zi1nmw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ar-schedule-frequency[b-2zh6zi1nmw] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ar-badge[b-2zh6zi1nmw] {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ar-badge-success[b-2zh6zi1nmw] {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.2);
}

.ar-badge-inactive[b-2zh6zi1nmw] {
    background: var(--subtle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-divider);
}

.ar-schedule-details[b-2zh6zi1nmw] {
    margin-bottom: 1.5rem;
}

.ar-detail-row[b-2zh6zi1nmw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-light);
}

    .ar-detail-row:last-child[b-2zh6zi1nmw] {
        border-bottom: none;
    }

.ar-detail-label[b-2zh6zi1nmw] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 80px;
}

.ar-detail-value[b-2zh6zi1nmw] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: right;
    flex: 1;
}

.ar-schedule-actions[b-2zh6zi1nmw] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    justify-content: flex-end;
}

.ar-btn-icon[b-2zh6zi1nmw] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

    .ar-btn-icon:hover[b-2zh6zi1nmw] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        transform: scale(1.05);
    }

    .ar-btn-icon.ar-btn-danger:hover[b-2zh6zi1nmw] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
    }

/* ====== Empty State ====== */
.ar-empty-state[b-2zh6zi1nmw] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

    .ar-empty-state > i[b-2zh6zi1nmw] {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        opacity: 0.3;
        color: var(--primary);
    }

    .ar-empty-state h3[b-2zh6zi1nmw] {
        font-size: 1.5rem;
        color: var(--text-primary);
        margin: 0 0 0.75rem 0;
        font-weight: 700;
    }

    .ar-empty-state p[b-2zh6zi1nmw] {
        margin: 0 0 2rem 0;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

/* ====== Modal Styles ====== */
.ar-modal-overlay[b-2zh6zi1nmw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: ar-modal-fade-b-2zh6zi1nmw 0.3s ease-out;
}

@keyframes ar-modal-fade-b-2zh6zi1nmw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ar-modal[b-2zh6zi1nmw] {
    background: var(--content-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: ar-modal-slide-b-2zh6zi1nmw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-divider);
}

@keyframes ar-modal-slide-b-2zh6zi1nmw {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ar-modal-small[b-2zh6zi1nmw] {
    max-width: 500px;
}

.ar-modal-large[b-2zh6zi1nmw] {
    max-width: 900px;
}

.ar-modal-header[b-2zh6zi1nmw] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--subtle-bg);
}

    .ar-modal-header h3[b-2zh6zi1nmw] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.ar-modal-close[b-2zh6zi1nmw] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .ar-modal-close:hover[b-2zh6zi1nmw] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
    }

.ar-modal-body[b-2zh6zi1nmw] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.ar-modal-footer[b-2zh6zi1nmw] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-divider);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--subtle-bg);
}

/* ====== Form Styles ====== */
.ar-form-group[b-2zh6zi1nmw] {
    margin-bottom: 1.5rem;
}

    .ar-form-group:last-child[b-2zh6zi1nmw] {
        margin-bottom: 0;
    }

    .ar-form-group label[b-2zh6zi1nmw] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.875rem;
    }

.ar-form-control[b-2zh6zi1nmw] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-divider);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

    .ar-form-control:focus[b-2zh6zi1nmw] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .ar-form-control[b-2zh6zi1nmw]::placeholder {
        color: var(--placeholder-color);
    }

textarea.ar-form-control[b-2zh6zi1nmw] {
    resize: vertical;
    min-height: 80px;
}

.ar-checkbox-group[b-2zh6zi1nmw],
.ar-radio-group[b-2zh6zi1nmw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ar-checkbox[b-2zh6zi1nmw],
.ar-radio[b-2zh6zi1nmw] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .ar-checkbox:hover[b-2zh6zi1nmw],
    .ar-radio:hover[b-2zh6zi1nmw] {
        background: var(--subtle-bg);
    }

    .ar-checkbox input[type="checkbox"][b-2zh6zi1nmw],
    .ar-radio input[type="radio"][b-2zh6zi1nmw] {
        margin-right: 0.5rem;
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary);
    }

    .ar-checkbox span[b-2zh6zi1nmw],
    .ar-radio span[b-2zh6zi1nmw] {
        color: var(--text-primary);
        font-weight: 500;
    }

.ar-section-label[b-2zh6zi1nmw] {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.ar-closed-contracts-section[b-2zh6zi1nmw] {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--subtle-bg);
    border-radius: 10px;
    border: 1px solid var(--border-divider);
}

.ar-multiselect-container[b-2zh6zi1nmw] {
    margin-top: 1rem;
}

.ar-multiselect[b-2zh6zi1nmw] {
    max-height: 200px;
    overflow-y: auto;
    border: 2px solid var(--border-divider);
    border-radius: 8px;
    background: var(--content-bg);
}

.ar-multiselect-item[b-2zh6zi1nmw] {
    display: flex;
    align-items: center;
    padding: 0.875rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.2s ease;
}

    .ar-multiselect-item:hover[b-2zh6zi1nmw] {
        background: var(--subtle-bg);
    }

    .ar-multiselect-item:last-child[b-2zh6zi1nmw] {
        border-bottom: none;
    }

    .ar-multiselect-item input[type="checkbox"][b-2zh6zi1nmw] {
        margin-right: 0.75rem;
        flex-shrink: 0;
        accent-color: var(--primary);
    }

        .ar-multiselect-item input[type="checkbox"]:disabled[b-2zh6zi1nmw] {
            cursor: not-allowed;
            opacity: 0.5;
        }

            .ar-multiselect-item input[type="checkbox"]:disabled ~ .ar-contract-info[b-2zh6zi1nmw] {
                opacity: 0.5;
            }

.ar-contract-info[b-2zh6zi1nmw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .ar-contract-info strong[b-2zh6zi1nmw] {
        color: var(--primary);
        font-weight: 700;
    }

    .ar-contract-info small[b-2zh6zi1nmw] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

.ar-help-text[b-2zh6zi1nmw] {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.ar-no-contracts[b-2zh6zi1nmw] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
}

.ar-loading-small[b-2zh6zi1nmw] {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ====== Table Styles ====== */
.ar-table[b-2zh6zi1nmw] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--content-bg);
}

    .ar-table thead[b-2zh6zi1nmw] {
        background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    }

    .ar-table th[b-2zh6zi1nmw] {
        padding: 1rem;
        text-align: left;
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-divider);
        white-space: nowrap;
    }

    .ar-table td[b-2zh6zi1nmw] {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-light);
        font-size: 0.875rem;
        color: var(--text-primary);
    }

    .ar-table tbody tr[b-2zh6zi1nmw] {
        transition: all 0.2s ease;
    }

        .ar-table tbody tr:hover[b-2zh6zi1nmw] {
            background: var(--primary-light);
        }

.ar-badge-danger[b-2zh6zi1nmw] {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
}

/* ====== RESPONSIVE DESIGN - MOBILE FIRST ====== */

/* Large Desktops (1600px and below) */
@media (max-width: 1600px) {
    .ar-container[b-2zh6zi1nmw] {
        max-width: 100%;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Small Desktops (1400px and below) */
@media (max-width: 1400px) {
    .ar-header-content[b-2zh6zi1nmw] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .ar-header-actions[b-2zh6zi1nmw] {
        width: 100%;
        justify-content: flex-end;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Large Tablets (1200px and below) */
@media (max-width: 1200px) {
    .ar-content-wrapper[b-2zh6zi1nmw] {
        padding: 1rem;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .ar-schedule-card[b-2zh6zi1nmw] {
        padding: 1.25rem;
    }
}

/* Tablets (992px and below) */
@media (max-width: 992px) {
    .ar-header[b-2zh6zi1nmw] {
        padding: 1rem;
    }

    .ar-title-group[b-2zh6zi1nmw] {
        gap: 0.75rem;
    }

    .ar-main-title[b-2zh6zi1nmw] {
        font-size: 1.375rem;
    }

    .ar-subtitle[b-2zh6zi1nmw] {
        font-size: 0.75rem;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        padding: 1rem;
    }

    .ar-section-header[b-2zh6zi1nmw] {
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ar-section-actions[b-2zh6zi1nmw] {
        width: 100%;
        justify-content: stretch;
    }

    .ar-btn[b-2zh6zi1nmw] {
        flex: 1;
        justify-content: center;
    }
}

/* Large Mobile (768px and below) */
@media (max-width: 768px) {
    .ar-header[b-2zh6zi1nmw] {
        padding: 0.875rem;
    }

    .ar-title-group[b-2zh6zi1nmw] {
        margin-bottom: 0.5rem;
    }

    .ar-main-title[b-2zh6zi1nmw] {
        font-size: 1.25rem;
    }

    .ar-icon-wrapper[b-2zh6zi1nmw] {
        width: 40px;
        height: 40px;
    }

        .ar-icon-wrapper i[b-2zh6zi1nmw] {
            font-size: 1rem;
        }

    .ar-header-actions[b-2zh6zi1nmw] {
        gap: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .ar-btn[b-2zh6zi1nmw] {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        min-width: 0;
        flex: 1;
    }

    .ar-content-wrapper[b-2zh6zi1nmw] {
        padding: 0.75rem;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .ar-schedule-card[b-2zh6zi1nmw] {
        padding: 1rem;
    }

    .ar-schedule-header[b-2zh6zi1nmw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ar-schedule-frequency[b-2zh6zi1nmw] {
        font-size: 1rem;
    }

    .ar-detail-row[b-2zh6zi1nmw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 0;
    }

    .ar-detail-label[b-2zh6zi1nmw] {
        min-width: auto;
    }

    .ar-detail-value[b-2zh6zi1nmw] {
        text-align: left;
    }

    .ar-schedule-actions[b-2zh6zi1nmw] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ar-modal[b-2zh6zi1nmw] {
        margin: 0.75rem;
        max-height: 95vh;
    }

    .ar-modal-header[b-2zh6zi1nmw],
    .ar-modal-body[b-2zh6zi1nmw],
    .ar-modal-footer[b-2zh6zi1nmw] {
        padding: 1rem;
    }

    .ar-modal-footer[b-2zh6zi1nmw] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ar-form-control[b-2zh6zi1nmw] {
        padding: 0.625rem;
        font-size: 0.8rem;
    }
}

/* Small Mobile (576px and below) */
@media (max-width: 576px) {
    .ar-header[b-2zh6zi1nmw] {
        padding: 0.75rem;
    }

    .ar-title-group[b-2zh6zi1nmw] {
        gap: 0.5rem;
    }

    .ar-main-title[b-2zh6zi1nmw] {
        font-size: 1.125rem;
    }

    .ar-subtitle[b-2zh6zi1nmw] {
        display: none;
    }

    .ar-icon-wrapper[b-2zh6zi1nmw] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

        .ar-icon-wrapper i[b-2zh6zi1nmw] {
            font-size: 0.9rem;
        }

    .ar-header-actions[b-2zh6zi1nmw] {
        gap: 0.375rem;
    }

    .ar-btn[b-2zh6zi1nmw] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

        .ar-btn span[b-2zh6zi1nmw] {
            display: none;
        }

    .ar-content-wrapper[b-2zh6zi1nmw] {
        padding: 0.5rem;
    }

    .ar-section-header[b-2zh6zi1nmw] {
        padding: 1rem;
    }

    .ar-section-title[b-2zh6zi1nmw] {
        font-size: 1.125rem;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        padding: 0.75rem;
    }

    .ar-schedule-card[b-2zh6zi1nmw] {
        padding: 0.875rem;
        border-radius: 10px;
    }

    .ar-schedule-frequency[b-2zh6zi1nmw] {
        font-size: 0.9rem;
    }

    .ar-badge[b-2zh6zi1nmw] {
        font-size: 0.7rem;
        padding: 0.1875rem 0.5rem;
    }

    .ar-detail-row[b-2zh6zi1nmw] {
        padding: 0.375rem 0;
    }

    .ar-detail-label[b-2zh6zi1nmw],
    .ar-detail-value[b-2zh6zi1nmw] {
        font-size: 0.8rem;
    }

    .ar-btn-icon[b-2zh6zi1nmw] {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

        .ar-btn-icon i[b-2zh6zi1nmw] {
            font-size: 0.85rem;
        }

    .ar-empty-state[b-2zh6zi1nmw] {
        padding: 2.5rem 1rem;
    }

        .ar-empty-state > i[b-2zh6zi1nmw] {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .ar-empty-state h3[b-2zh6zi1nmw] {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }

        .ar-empty-state p[b-2zh6zi1nmw] {
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
        }

    .ar-modal[b-2zh6zi1nmw] {
        margin: 0.5rem;
        border-radius: 12px;
    }

    .ar-modal-header h3[b-2zh6zi1nmw] {
        font-size: 1.125rem;
    }

    .ar-modal-close[b-2zh6zi1nmw] {
        width: 32px;
        height: 32px;
    }

    .ar-form-group[b-2zh6zi1nmw] {
        margin-bottom: 1rem;
    }

        .ar-form-group label[b-2zh6zi1nmw] {
            font-size: 0.8rem;
            margin-bottom: 0.375rem;
        }

    .ar-form-control[b-2zh6zi1nmw] {
        padding: 0.5rem;
        font-size: 0.8rem;
        border-radius: 6px;
    }

    .ar-closed-contracts-section[b-2zh6zi1nmw] {
        padding: 1rem;
        border-radius: 8px;
    }

    .ar-multiselect-item[b-2zh6zi1nmw] {
        padding: 0.75rem;
    }

        .ar-multiselect-item input[type="checkbox"][b-2zh6zi1nmw] {
            margin-right: 0.5rem;
        }

    .ar-contract-info[b-2zh6zi1nmw] {
        gap: 0.125rem;
    }

        .ar-contract-info strong[b-2zh6zi1nmw] {
            font-size: 0.8rem;
        }

        .ar-contract-info small[b-2zh6zi1nmw] {
            font-size: 0.7rem;
        }

    .ar-help-text[b-2zh6zi1nmw] {
        font-size: 0.75rem;
    }

    .ar-table th[b-2zh6zi1nmw],
    .ar-table td[b-2zh6zi1nmw] {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }

    .ar-table th[b-2zh6zi1nmw] {
        font-size: 0.65rem;
    }
}

/* Extra Small Mobile (400px and below) */
@media (max-width: 400px) {
    .ar-header[b-2zh6zi1nmw] {
        padding: 0.625rem;
    }

    .ar-title-group[b-2zh6zi1nmw] {
        gap: 0.375rem;
        margin-bottom: 0.375rem;
    }

    .ar-main-title[b-2zh6zi1nmw] {
        font-size: 1rem;
    }

    .ar-icon-wrapper[b-2zh6zi1nmw] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

        .ar-icon-wrapper i[b-2zh6zi1nmw] {
            font-size: 0.8rem;
        }

    .ar-icon-glow[b-2zh6zi1nmw] {
        display: none;
    }

    .ar-header-actions[b-2zh6zi1nmw] {
        gap: 0.25rem;
    }

    .ar-btn[b-2zh6zi1nmw] {
        padding: 0.375rem 0.5rem;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .ar-content-wrapper[b-2zh6zi1nmw] {
        padding: 0.375rem;
    }

    .ar-section-header[b-2zh6zi1nmw] {
        padding: 0.875rem;
    }

    .ar-section-title[b-2zh6zi1nmw] {
        font-size: 1rem;
        gap: 0.375rem;
    }

        .ar-section-title i[b-2zh6zi1nmw] {
            font-size: 0.9rem;
        }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        padding: 0.625rem;
        gap: 0.75rem;
    }

    .ar-schedule-card[b-2zh6zi1nmw] {
        padding: 0.75rem;
        border-radius: 8px;
    }

    .ar-schedule-header[b-2zh6zi1nmw] {
        margin-bottom: 0.75rem;
        gap: 0.375rem;
    }

    .ar-schedule-frequency[b-2zh6zi1nmw] {
        font-size: 0.85rem;
        gap: 0.375rem;
    }

    .ar-badge[b-2zh6zi1nmw] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
        border-radius: 50px;
    }

    .ar-schedule-details[b-2zh6zi1nmw] {
        margin-bottom: 1rem;
    }

    .ar-detail-row[b-2zh6zi1nmw] {
        padding: 0.25rem 0;
        gap: 0.125rem;
    }

    .ar-detail-label[b-2zh6zi1nmw],
    .ar-detail-value[b-2zh6zi1nmw] {
        font-size: 0.75rem;
    }

    .ar-schedule-actions[b-2zh6zi1nmw] {
        padding-top: 0.75rem;
        gap: 0.375rem;
    }

    .ar-btn-icon[b-2zh6zi1nmw] {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

        .ar-btn-icon i[b-2zh6zi1nmw] {
            font-size: 0.75rem;
        }

    .ar-empty-state[b-2zh6zi1nmw] {
        padding: 2rem 0.75rem;
    }

        .ar-empty-state > i[b-2zh6zi1nmw] {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
        }

        .ar-empty-state h3[b-2zh6zi1nmw] {
            font-size: 1.125rem;
            margin-bottom: 0.375rem;
        }

        .ar-empty-state p[b-2zh6zi1nmw] {
            font-size: 0.8rem;
            margin-bottom: 1.25rem;
        }

    .ar-modal[b-2zh6zi1nmw] {
        margin: 0.25rem;
        border-radius: 10px;
    }

    .ar-modal-header[b-2zh6zi1nmw],
    .ar-modal-body[b-2zh6zi1nmw],
    .ar-modal-footer[b-2zh6zi1nmw] {
        padding: 0.875rem;
    }

        .ar-modal-header h3[b-2zh6zi1nmw] {
            font-size: 1rem;
        }

    .ar-modal-close[b-2zh6zi1nmw] {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

    .ar-form-group[b-2zh6zi1nmw] {
        margin-bottom: 0.875rem;
    }

        .ar-form-group label[b-2zh6zi1nmw] {
            font-size: 0.75rem;
            margin-bottom: 0.25rem;
        }

    .ar-form-control[b-2zh6zi1nmw] {
        padding: 0.375rem;
        font-size: 0.75rem;
        border-radius: 5px;
        border-width: 1px;
    }

    .ar-closed-contracts-section[b-2zh6zi1nmw] {
        padding: 0.875rem;
        border-radius: 6px;
    }

    .ar-section-label[b-2zh6zi1nmw] {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .ar-multiselect[b-2zh6zi1nmw] {
        border-radius: 6px;
        border-width: 1px;
    }

    .ar-multiselect-item[b-2zh6zi1nmw] {
        padding: 0.625rem;
    }

        .ar-multiselect-item input[type="checkbox"][b-2zh6zi1nmw] {
            margin-right: 0.375rem;
        }

    .ar-contract-info[b-2zh6zi1nmw] {
        gap: 0.0625rem;
    }

        .ar-contract-info strong[b-2zh6zi1nmw] {
            font-size: 0.75rem;
        }

        .ar-contract-info small[b-2zh6zi1nmw] {
            font-size: 0.625rem;
        }

    .ar-help-text[b-2zh6zi1nmw] {
        font-size: 0.7rem;
        margin-top: 0.375rem;
    }

    .ar-no-contracts[b-2zh6zi1nmw],
    .ar-loading-small[b-2zh6zi1nmw] {
        padding: 1.5rem;
        font-size: 0.75rem;
    }

    .ar-table th[b-2zh6zi1nmw],
    .ar-table td[b-2zh6zi1nmw] {
        padding: 0.5rem 0.375rem;
        font-size: 0.7rem;
    }

    .ar-table th[b-2zh6zi1nmw] {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }

    .ar-loading[b-2zh6zi1nmw] {
        padding: 2rem;
        min-height: 40vh;
    }

    .ar-spinner[b-2zh6zi1nmw] {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

        .ar-spinner[b-2zh6zi1nmw]::before,
        .ar-spinner[b-2zh6zi1nmw]::after {
            border-width: 2px;
        }

        .ar-spinner[b-2zh6zi1nmw]::after {
            inset: 6px;
        }

    .ar-loading span[b-2zh6zi1nmw] {
        font-size: 0.875rem;
    }
}

/* ====== Print Styles ====== */
@media print {
    .ar-background-animation[b-2zh6zi1nmw],
    .ar-header-actions[b-2zh6zi1nmw],
    .ar-schedule-actions[b-2zh6zi1nmw],
    .ar-modal-overlay[b-2zh6zi1nmw] {
        display: none !important;
    }

    .ar-page[b-2zh6zi1nmw] {
        background: white;
    }

    .ar-schedule-card[b-2zh6zi1nmw],
    .ar-schedules-section[b-2zh6zi1nmw] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .ar-schedules-grid[b-2zh6zi1nmw] {
        break-inside: avoid;
    }
}

/* ====== Accessibility ====== */
@media (prefers-reduced-motion: reduce) {
    .ar-float[b-2zh6zi1nmw],
    .ar-orb-move[b-2zh6zi1nmw],
    .ar-icon-entrance[b-2zh6zi1nmw],
    .ar-glow-pulse[b-2zh6zi1nmw],
    .ar-title-slide[b-2zh6zi1nmw],
    .ar-actions-fade[b-2zh6zi1nmw],
    .ar-content-fade[b-2zh6zi1nmw],
    .ar-spin[b-2zh6zi1nmw],
    .ar-modal-fade[b-2zh6zi1nmw],
    .ar-modal-slide[b-2zh6zi1nmw] {
        animation: none;
    }

    .ar-schedule-card[b-2zh6zi1nmw],
    .ar-btn[b-2zh6zi1nmw],
    .ar-btn-icon[b-2zh6zi1nmw],
    .ar-modal[b-2zh6zi1nmw],
    .ar-form-control[b-2zh6zi1nmw] {
        transition: none;
    }
}

/* ====== High Contrast Mode ====== */
@media (prefers-contrast: high) {
    .ar-schedule-card[b-2zh6zi1nmw],
    .ar-schedules-section[b-2zh6zi1nmw],
    .ar-modal[b-2zh6zi1nmw] {
        border-width: 2px;
    }

    .ar-badge[b-2zh6zi1nmw],
    .ar-btn[b-2zh6zi1nmw],
    .ar-btn-icon[b-2zh6zi1nmw] {
        border-width: 2px;
    }

    .ar-form-control[b-2zh6zi1nmw] {
        border-width: 2px;
    }

    .ar-table th[b-2zh6zi1nmw] {
        border-bottom-width: 3px;
    }
}

/* ====== Dark Mode Enhancements ====== */
@media (prefers-color-scheme: dark) {
    .ar-schedule-card:hover[b-2zh6zi1nmw] {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .ar-schedules-section[b-2zh6zi1nmw] {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }

    .ar-gradient-orb[b-2zh6zi1nmw],
    .ar-gradient-orb-secondary[b-2zh6zi1nmw] {
        opacity: 0.25;
    }

    .ar-modal[b-2zh6zi1nmw] {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/ExternalContracts.razor.rz.scp.css */
/* ====== External Contracts Page - Mobile-First Premium Professional Design ====== */

/* ====== Page Structure & Background ====== */
.ec-page[b-qsczjxorno] {
    min-height: 100vh;
    background: var(--body-bg);
    position: relative;
    overflow-x: hidden;
}

.ec-background-animation[b-qsczjxorno] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ec-particle[b-qsczjxorno] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.08;
}

    .ec-particle:nth-child(1)[b-qsczjxorno] {
        top: 10%;
        left: 20%;
        animation: ec-float-b-qsczjxorno 20s infinite ease-in-out;
    }

    .ec-particle:nth-child(2)[b-qsczjxorno] {
        top: 70%;
        left: 80%;
        animation: ec-float-b-qsczjxorno 25s infinite ease-in-out reverse;
    }

    .ec-particle:nth-child(3)[b-qsczjxorno] {
        top: 40%;
        left: 50%;
        animation: ec-float-b-qsczjxorno 30s infinite ease-in-out;
    }

@keyframes ec-float-b-qsczjxorno {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.ec-gradient-orb[b-qsczjxorno] {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    filter: blur(50px);
    top: -250px;
    right: -250px;
    animation: ec-orb-move-b-qsczjxorno 30s infinite ease-in-out;
}

.ec-gradient-orb-secondary[b-qsczjxorno] {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--secondary-rgb), 0.06) 0%, transparent 70%);
    filter: blur(40px);
    bottom: -175px;
    left: -175px;
    animation: ec-orb-move-b-qsczjxorno 25s infinite ease-in-out reverse;
}

@keyframes ec-orb-move-b-qsczjxorno {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 20px);
    }
}

.ec-container[b-qsczjxorno] {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

/* ====== Compact Premium Header ====== */
.ec-header-wrapper[b-qsczjxorno] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-left: 1em;
    border-bottom-left-radius: 30px;
    margin-right: 1em;
    border-bottom-right-radius: 30px;
}

.ec-header-wrapper[b-qsczjxorno]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
}

.ec-header[b-qsczjxorno] {
    padding: 1rem 1.5rem;
}

.ec-header-content[b-qsczjxorno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.ec-brand-section[b-qsczjxorno] {
    flex: 1;
}

.ec-title-group[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ec-icon-wrapper[b-qsczjxorno] {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    animation: ec-icon-entrance-b-qsczjxorno 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ec-icon-entrance-b-qsczjxorno {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.ec-icon-wrapper i[b-qsczjxorno] {
    font-size: 1.1rem;
    color: white;
    z-index: 1;
}

.ec-icon-glow[b-qsczjxorno] {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 12px;
    opacity: 0.4;
    filter: blur(8px);
    animation: ec-glow-pulse-b-qsczjxorno 3s ease-in-out infinite;
}

@keyframes ec-glow-pulse-b-qsczjxorno {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.ec-title-content[b-qsczjxorno] {
    flex: 1;
}

.ec-main-title[b-qsczjxorno] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: ec-title-slide-b-qsczjxorno 0.6s ease-out 0.2s both;
}

@keyframes ec-title-slide-b-qsczjxorno {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.ec-subtitle[b-qsczjxorno] {
    margin: 0.125rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    animation: ec-title-slide-b-qsczjxorno 0.6s ease-out 0.3s both;
}

.ec-header-stats[b-qsczjxorno] {
    display: flex;
    gap: 0.75rem;
    animation: ec-stats-fade-b-qsczjxorno 0.6s ease-out 0.4s both;
}

@keyframes ec-stats-fade-b-qsczjxorno {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-stat-pill[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .ec-stat-pill:hover[b-qsczjxorno] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: var(--primary-light);
    }

    .ec-stat-pill i[b-qsczjxorno] {
        font-size: 0.9rem;
        color: var(--primary);
        opacity: 0.8;
    }

    .ec-stat-pill.ec-active i[b-qsczjxorno] {
        color: var(--success);
    }

    .ec-stat-pill.ec-volume i[b-qsczjxorno] {
        color: var(--info);
    }

.ec-stat-value[b-qsczjxorno] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.ec-stat-label[b-qsczjxorno] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ec-header-actions[b-qsczjxorno] {
    display: flex;
    gap: 0.75rem;
    animation: ec-actions-fade 0.6s ease-out 0.5s both;
}

/* ====== Compact Premium Buttons ====== */
.ec-btn[b-qsczjxorno] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .ec-btn[b-qsczjxorno]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .ec-btn:hover[b-qsczjxorno]::before {
        width: 300px;
        height: 300px;
    }

    .ec-btn:disabled[b-qsczjxorno] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ec-btn-refresh[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

    .ec-btn-refresh:hover:not(:disabled)[b-qsczjxorno] {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    }

.ec-btn-export[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
    color: white;
}

    .ec-btn-export:hover:not(:disabled)[b-qsczjxorno] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25);
    }

.ec-btn-secondary[b-qsczjxorno] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .ec-btn-secondary:hover:not(:disabled)[b-qsczjxorno] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

.ec-spin[b-qsczjxorno] {
    animation: ec-spin-b-qsczjxorno 1s linear infinite;
}

@keyframes ec-spin-b-qsczjxorno {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Loading States ====== */
.ec-loading-state[b-qsczjxorno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 3rem;
}

.ec-loader[b-qsczjxorno] {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

.ec-loader-ring[b-qsczjxorno] {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
}

    .ec-loader-ring:nth-child(1)[b-qsczjxorno] {
        border-top-color: var(--primary);
        animation: ec-loader-spin-b-qsczjxorno 1.5s linear infinite;
    }

    .ec-loader-ring:nth-child(2)[b-qsczjxorno] {
        inset: 8px;
        border-right-color: var(--secondary);
        animation: ec-loader-spin-b-qsczjxorno 2s linear infinite reverse;
    }

    .ec-loader-ring:nth-child(3)[b-qsczjxorno] {
        inset: 16px;
        border-bottom-color: var(--primary);
        animation: ec-loader-spin-b-qsczjxorno 2.5s linear infinite;
    }

@keyframes ec-loader-spin-b-qsczjxorno {
    to {
        transform: rotate(360deg);
    }
}

.ec-loader-icon[b-qsczjxorno] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: var(--primary);
    animation: ec-loader-pulse-b-qsczjxorno 1.5s ease-in-out infinite;
}

@keyframes ec-loader-pulse-b-qsczjxorno {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.ec-loading-title[b-qsczjxorno] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem;
}

.ec-loading-subtitle[b-qsczjxorno] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
}

/* ====== Filter Loading Overlay ====== */
.ec-table-wrapper[b-qsczjxorno] {
    position: relative;
}

    .ec-table-wrapper.ec-loading[b-qsczjxorno]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(var(--content-bg-rgb), 0.8);
        backdrop-filter: blur(2px);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: ec-fade-in-b-qsczjxorno 0.2s ease-out;
    }

    .ec-table-wrapper.ec-loading[b-qsczjxorno]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 3px solid rgba(var(--primary-rgb), 0.2);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: ec-spin-b-qsczjxorno 0.8s linear infinite;
        z-index: 11;
    }

@keyframes ec-fade-in-b-qsczjxorno {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ====== Compact Statistics Dashboard ====== */
.ec-stats-dashboard[b-qsczjxorno] {
    padding: 1rem 1.5rem;
    animation: ec-dashboard-fade-b-qsczjxorno 0.6s ease-out 0.2s both;
}

@keyframes ec-dashboard-fade-b-qsczjxorno {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-stats-grid[b-qsczjxorno] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.ec-stat-card[b-qsczjxorno] {
    position: relative;
    background: var(--content-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-divider);
}

    .ec-stat-card:hover[b-qsczjxorno] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

.ec-stat-background[b-qsczjxorno] {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    transition: opacity 0.3s ease;
}

.ec-stat-card:hover .ec-stat-background[b-qsczjxorno] {
    opacity: 0.04;
}

.ec-stat-open .ec-stat-background[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
}

.ec-stat-pending .ec-stat-background[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-hover) 100%);
}

.ec-stat-expiring .ec-stat-background[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--warning) 0%, var(--danger) 100%);
}

.ec-stat-mass .ec-stat-background[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.ec-stat-icon-container[b-qsczjxorno] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ec-stat-icon-container i[b-qsczjxorno] {
        font-size: 1.4rem;
        opacity: 0.12;
    }

.ec-stat-open .ec-stat-icon-container i[b-qsczjxorno] {
    color: var(--success);
}

.ec-stat-pending .ec-stat-icon-container i[b-qsczjxorno] {
    color: var(--info);
}

.ec-stat-expiring .ec-stat-icon-container i[b-qsczjxorno] {
    color: var(--warning);
}

.ec-stat-mass .ec-stat-icon-container i[b-qsczjxorno] {
    color: var(--primary);
}

.ec-stat-icon-pulse[b-qsczjxorno] {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    opacity: 0.08;
    animation: ec-icon-pulse-b-qsczjxorno 3s ease-in-out infinite;
}

@keyframes ec-icon-pulse-b-qsczjxorno {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.08;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.04;
    }
}

.ec-pulse-urgent[b-qsczjxorno] {
    animation: ec-urgent-pulse-b-qsczjxorno 1.5s ease-in-out infinite;
}

@keyframes ec-urgent-pulse-b-qsczjxorno {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.08;
    }
}

.ec-stat-content[b-qsczjxorno] {
    position: relative;
    padding: 1.25rem;
    z-index: 1;
}

    .ec-stat-content h3[b-qsczjxorno] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.ec-stat-number[b-qsczjxorno] {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
    font-family: var(--font-mono);
    line-height: 1;
}

.ec-stat-meta[b-qsczjxorno] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ec-stat-percentage[b-qsczjxorno] {
    font-weight: 700;
    color: var(--success);
}

.ec-stat-breakdown[b-qsczjxorno] {
    color: var(--text-secondary);
}

.ec-stat-separator[b-qsczjxorno] {
    color: var(--text-muted);
}

.ec-stat-urgent[b-qsczjxorno] {
    color: var(--warning);
    font-weight: 600;
}

.ec-stat-expired[b-qsczjxorno] {
    color: var(--danger);
    font-weight: 600;
}

.ec-urgent-action[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding: 0.375rem 0.625rem;
    background: var(--warning-light);
    color: var(--warning);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    animation: ec-urgent-blink-b-qsczjxorno 2s ease-in-out infinite;
}

@keyframes ec-urgent-blink-b-qsczjxorno {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.ec-stat-bar[b-qsczjxorno] {
    margin-top: 0.5rem;
    height: 4px;
    background: var(--border-divider);
    border-radius: 2px;
    overflow: hidden;
}

.ec-stat-fill[b-qsczjxorno] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .ec-stat-fill[b-qsczjxorno]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        animation: ec-shimmer-b-qsczjxorno 2s infinite;
    }

@keyframes ec-shimmer-b-qsczjxorno {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.ec-progress-container[b-qsczjxorno] {
    margin-top: 0.75rem;
}

.ec-progress-labels[b-qsczjxorno] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ec-progress-bar[b-qsczjxorno] {
    height: 6px;
    background: var(--border-divider);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.ec-progress-fill[b-qsczjxorno] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.ec-progress-glow[b-qsczjxorno] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: ec-progress-shine-b-qsczjxorno 2s infinite;
}

@keyframes ec-progress-shine-b-qsczjxorno {
    0% {
        transform: translateX(-100%) skewX(-20deg);
    }

    100% {
        transform: translateX(200%) skewX(-20deg);
    }
}

/* ====== Content Wrapper ====== */
.ec-content-wrapper[b-qsczjxorno] {
    padding: 0 1.5rem 1.5rem;
}

/* ====== Compact Controls Section ====== */
.ec-controls-section[b-qsczjxorno] {
    background: var(--content-bg);
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border-divider);
    border-bottom: none;
    overflow: hidden;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}

.ec-controls-header[b-qsczjxorno] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ec-section-title[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

    .ec-section-title i[b-qsczjxorno] {
        color: var(--primary);
        opacity: 0.8;
    }

.ec-results-info[b-qsczjxorno] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

    .ec-results-info strong[b-qsczjxorno] {
        color: var(--text-primary);
        font-weight: 600;
    }

.ec-controls-bar[b-qsczjxorno] {
    padding: 1rem 1.25rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ====== Compact Search Group ====== */
.ec-search-group[b-qsczjxorno] {
    flex: 1;
    max-width: 450px;
}

.ec-search-wrapper[b-qsczjxorno] {
    position: relative;
    display: flex;
    align-items: center;
}

.ec-search-icon[b-qsczjxorno] {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
}

.ec-search-input[b-qsczjxorno] {
    width: 100%;
    padding: 0.625rem 3rem 0.625rem 2.75rem;
    border: 2px solid var(--border-divider);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--subtle-bg);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

    .ec-search-input:focus[b-qsczjxorno] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .ec-search-input[b-qsczjxorno]::placeholder {
        color: var(--placeholder-color);
    }

.ec-search-clear[b-qsczjxorno] {
    position: absolute;
    right: 3rem;
    background: var(--danger-light);
    border: none;
    color: var(--danger);
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ec-search-clear:hover[b-qsczjxorno] {
        background: var(--danger);
        color: white;
        transform: scale(1.05);
    }

.ec-search-button[b-qsczjxorno] {
    position: absolute;
    right: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    border: none;
    color: white;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.8rem;
}

    .ec-search-button:hover:not(:disabled)[b-qsczjxorno] {
        background: var(--primary-hover);
        transform: translateX(1px);
    }

    .ec-search-button:disabled[b-qsczjxorno] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ====== Compact Filter Group ====== */
.ec-filter-group[b-qsczjxorno] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ec-filter-wrapper[b-qsczjxorno] {
    position: relative;
    display: flex;
    align-items: center;
}

    .ec-filter-wrapper i[b-qsczjxorno] {
        position: absolute;
        left: 0.875rem;
        color: var(--text-secondary);
        pointer-events: none;
        z-index: 1;
        font-size: 0.85rem;
    }

.ec-filter-select[b-qsczjxorno],
.ec-page-size-select[b-qsczjxorno] {
    appearance: none;
    padding: 0.625rem 2rem 0.625rem 2.25rem;
    border: 2px solid var(--border-divider);
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--subtle-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    font-weight: 500;
}

    .ec-filter-select:focus[b-qsczjxorno],
    .ec-page-size-select:focus[b-qsczjxorno] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .ec-filter-select:hover[b-qsczjxorno],
    .ec-page-size-select:hover[b-qsczjxorno] {
        border-color: var(--primary-light);
    }

/* ====== Table Wrapper ====== */
.ec-table-wrapper[b-qsczjxorno] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ec-table-container[b-qsczjxorno] {
    overflow-x: auto;
}

/* ====== Compact Premium Table Design ====== */
.ec-table[b-qsczjxorno] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .ec-table thead[b-qsczjxorno] {
        background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    }

    .ec-table th[b-qsczjxorno] {
        padding: 0.875rem 1rem;
        text-align: left;
        font-weight: 700;
        font-size: 0.7rem;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 2px solid var(--border-divider);
        white-space: nowrap;
    }

.ec-th-content[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

    .ec-th-content:hover[b-qsczjxorno] {
        color: var(--primary);
    }

    .ec-th-content i[b-qsczjxorno] {
        font-size: 0.65rem;
        opacity: 0.5;
        transition: all 0.2s ease;
    }

    .ec-th-content:hover i[b-qsczjxorno] {
        opacity: 1;
    }

.ec-table tbody tr[b-qsczjxorno] {
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

    .ec-table tbody tr[b-qsczjxorno]::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: var(--border-divider);
    }

    .ec-table tbody tr:hover[b-qsczjxorno] {
        background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.02) 0%, rgba(var(--primary-rgb), 0.01) 100%);
    }

        .ec-table tbody tr:hover td:first-child[b-qsczjxorno]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary);
        }

.ec-row-expired[b-qsczjxorno] {
    background: rgba(var(--danger-rgb), 0.015);
}

.ec-row-expiring[b-qsczjxorno] {
    background: rgba(var(--warning-rgb), 0.015);
}

.ec-row-closed[b-qsczjxorno] {
    opacity: 0.6;
}

.ec-row-near-complete[b-qsczjxorno] {
    background: rgba(var(--success-rgb), 0.015);
}

.ec-table td[b-qsczjxorno] {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    position: relative;
    font-size: 0.85rem;
}

/* ====== Compact Table Cells ====== */
.ec-cell-contract[b-qsczjxorno] {
    font-weight: 600;
}

.ec-contract-info[b-qsczjxorno] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ec-contract-number[b-qsczjxorno] {
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.ec-order-ref[b-qsczjxorno] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ec-type-badge[b-qsczjxorno] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ec-type-sales[b-qsczjxorno] {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.2);
}

.ec-type-purchase[b-qsczjxorno] {
    background: var(--info-light);
    color: var(--info);
    border: 1px solid rgba(var(--info-rgb), 0.2);
}

.ec-product-info[b-qsczjxorno] {
    max-width: 200px;
}

.ec-product-name[b-qsczjxorno] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.ec-status-wrapper[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ec-status-badge[b-qsczjxorno] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.ec-status-dot[b-qsczjxorno] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}

.ec-status-active[b-qsczjxorno] {
    background: var(--success-light);
    color: var(--success);
}

    .ec-status-active .ec-status-dot[b-qsczjxorno] {
        background: var(--success);
        animation: ec-status-pulse-b-qsczjxorno 2s ease-in-out infinite;
    }

@keyframes ec-status-pulse-b-qsczjxorno {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0);
    }
}

.ec-status-pending[b-qsczjxorno] {
    background: var(--info-light);
    color: var(--info);
}

    .ec-status-pending .ec-status-dot[b-qsczjxorno] {
        background: var(--info);
    }

.ec-status-future[b-qsczjxorno] {
    background: rgba(var(--secondary-rgb), 0.1);
    color: var(--secondary);
}

    .ec-status-future .ec-status-dot[b-qsczjxorno] {
        background: var(--secondary);
    }

.ec-status-closed[b-qsczjxorno] {
    background: var(--subtle-bg);
    color: var(--text-secondary);
}

    .ec-status-closed .ec-status-dot[b-qsczjxorno] {
        background: var(--text-secondary);
    }

.ec-status-expired[b-qsczjxorno] {
    background: var(--danger-light);
    color: var(--danger);
}

    .ec-status-expired .ec-status-dot[b-qsczjxorno] {
        background: var(--danger);
    }

.ec-status-expiring[b-qsczjxorno] {
    background: var(--warning-light);
    color: var(--warning);
}

    .ec-status-expiring .ec-status-dot[b-qsczjxorno] {
        background: var(--warning);
        animation: ec-warning-blink-b-qsczjxorno 1.5s ease-in-out infinite;
    }

@keyframes ec-warning-blink-b-qsczjxorno {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.ec-status-near-complete[b-qsczjxorno] {
    background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--primary-rgb), 0.1) 100%);
    color: var(--success);
}

    .ec-status-near-complete .ec-status-dot[b-qsczjxorno] {
        background: var(--success);
    }

.ec-status-alert[b-qsczjxorno] {
    color: var(--warning);
    font-size: 0.75rem;
    animation: ec-alert-shake-b-qsczjxorno 2s ease-in-out infinite;
}

@keyframes ec-alert-shake-b-qsczjxorno {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-1px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(1px);
    }
}

.ec-mass-value[b-qsczjxorno],
.ec-delivered-value[b-qsczjxorno],
.ec-balance-value[b-qsczjxorno] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.85rem;
}

.ec-delivered-value[b-qsczjxorno] {
    color: var(--success);
}

.ec-balance-value.ec-has-balance[b-qsczjxorno] {
    color: var(--primary);
}

.ec-mass-unit[b-qsczjxorno] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.125rem;
}

.ec-progress-wrapper[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ec-progress-bar[b-qsczjxorno] {
    flex: 1;
    height: 6px;
    background: var(--border-divider);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.ec-progress-fill[b-qsczjxorno] {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 3px;
}

.ec-progress-low[b-qsczjxorno] {
    background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 100%);
}

.ec-progress-medium[b-qsczjxorno] {
    background: linear-gradient(90deg, var(--warning) 0%, var(--info) 100%);
}

.ec-progress-high[b-qsczjxorno] {
    background: linear-gradient(90deg, var(--info) 0%, var(--success) 100%);
}

.ec-progress-complete[b-qsczjxorno] {
    background: linear-gradient(90deg, var(--success) 0%, var(--success-hover) 100%);
}

.ec-progress-shine[b-qsczjxorno] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: ec-progress-move-b-qsczjxorno 2s infinite;
}

@keyframes ec-progress-move-b-qsczjxorno {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.ec-progress-text[b-qsczjxorno] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-width: 28px;
}

.ec-expiry-info[b-qsczjxorno] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ec-expiry-date[b-qsczjxorno] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.ec-expiry-days[b-qsczjxorno] {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.ec-expiry-info.ec-expired .ec-expiry-date[b-qsczjxorno],
.ec-expiry-info.ec-expired .ec-expiry-days[b-qsczjxorno] {
    color: var(--danger);
    font-weight: 600;
}

.ec-expiry-info.ec-expiring .ec-expiry-date[b-qsczjxorno],
.ec-expiry-info.ec-expiring .ec-expiry-days[b-qsczjxorno] {
    color: var(--warning);
    font-weight: 600;
}

.ec-no-expiry[b-qsczjxorno] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.ec-action-btn[b-qsczjxorno] {
    padding: 0.375rem;
    background: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 0.125rem;
    font-size: 0.75rem;
}

    .ec-action-btn:hover[b-qsczjxorno] {
        background: var(--primary);
        color: white;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
    }

/* ====== Compact Pagination ====== */
.ec-pagination-wrapper[b-qsczjxorno] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
}

.ec-pagination[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ec-page-btn[b-qsczjxorno] {
    padding: 0.375rem 0.625rem;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--content-bg);
    border: 1.5px solid var(--border-divider);
    color: var(--text-primary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

    .ec-page-btn:hover:not(:disabled)[b-qsczjxorno] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
    }

    .ec-page-btn:disabled[b-qsczjxorno] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ec-page-btn.ec-active[b-qsczjxorno] {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
        transform: scale(1.05);
    }

.ec-page-numbers[b-qsczjxorno] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ec-page-ellipsis[b-qsczjxorno] {
    padding: 0 0.375rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.ec-page-info[b-qsczjxorno] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

    .ec-page-info strong[b-qsczjxorno] {
        color: var(--text-primary);
        font-weight: 600;
    }

/* ====== Empty State ====== */
.ec-empty-state[b-qsczjxorno] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.ec-empty-icon[b-qsczjxorno] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

    .ec-empty-icon i[b-qsczjxorno] {
        font-size: 2rem;
        color: var(--text-muted);
        z-index: 1;
        position: relative;
    }

.ec-empty-icon-bg[b-qsczjxorno] {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.04) 0%, transparent 70%);
    border-radius: 50%;
    animation: ec-empty-pulse-b-qsczjxorno 3s ease-in-out infinite;
}

@keyframes ec-empty-pulse-b-qsczjxorno {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

.ec-empty-title[b-qsczjxorno] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.ec-empty-message[b-qsczjxorno] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== RESPONSIVE DESIGN - MOBILE FIRST ====== */

/* Large Desktops */
@media (max-width: 1600px) {
    .ec-container[b-qsczjxorno] {
        max-width: 100%;
    }
}

/* Small Desktops */
@media (max-width: 1400px) {
    .ec-stats-grid[b-qsczjxorno] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ec-header-content[b-qsczjxorno] {
        flex-direction: column;
        gap: 1rem;
    }

    .ec-header-actions[b-qsczjxorno] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Large Tablets */
@media (max-width: 1200px) {
    .ec-stats-grid[b-qsczjxorno] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ec-table-wrapper[b-qsczjxorno] {
        margin: 0;
        border-radius: 0;
    }

    .ec-controls-section[b-qsczjxorno] {
        margin: 0;
        border-radius: 0;
    }

    .ec-content-wrapper[b-qsczjxorno] {
        padding: 0;
    }

    .ec-stats-dashboard[b-qsczjxorno] {
        padding: 1rem 1rem;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .ec-header[b-qsczjxorno] {
        padding: 0.875rem 1rem;
    }

    .ec-header-stats[b-qsczjxorno] {
        width: 100%;
    }

    .ec-controls-bar[b-qsczjxorno] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .ec-search-group[b-qsczjxorno] {
        max-width: none;
    }

    .ec-filter-group[b-qsczjxorno] {
        width: 100%;
        flex-wrap: wrap;
    }

    .ec-filter-wrapper[b-qsczjxorno] {
        flex: 1;
        min-width: 140px;
    }

    .ec-th-product[b-qsczjxorno],
    .ec-th-delivered[b-qsczjxorno] {
        display: none;
    }

    .ec-cell-product[b-qsczjxorno],
    .ec-cell-delivered[b-qsczjxorno] {
        display: none;
    }

    .ec-table[b-qsczjxorno] {
        font-size: 0.75rem;
    }

        .ec-table th[b-qsczjxorno],
        .ec-table td[b-qsczjxorno] {
            padding: 0.625rem 0.75rem;
        }
}

/* Large Mobile */
@media (max-width: 768px) {
    .ec-header[b-qsczjxorno] {
        padding: 0.75rem;
    }

    .ec-title-group[b-qsczjxorno] {
        gap: 0.75rem;
    }

    .ec-main-title[b-qsczjxorno] {
        font-size: 1.25rem;
    }

    .ec-subtitle[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-icon-wrapper[b-qsczjxorno] {
        width: 38px;
        height: 38px;
    }

        .ec-icon-wrapper i[b-qsczjxorno] {
            font-size: 1rem;
        }

    .ec-header-stats[b-qsczjxorno] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ec-stat-pill[b-qsczjxorno] {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .ec-stat-value[b-qsczjxorno] {
        font-size: 0.875rem;
    }

    .ec-stat-label[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-stats-dashboard[b-qsczjxorno] {
        padding: 0.75rem;
    }

    .ec-stats-grid[b-qsczjxorno] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ec-stat-content[b-qsczjxorno] {
        padding: 1rem;
    }

    .ec-stat-number[b-qsczjxorno] {
        font-size: 1.5rem;
    }

    .ec-stat-meta[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-urgent-action[b-qsczjxorno] {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .ec-header-actions[b-qsczjxorno] {
        gap: 0.5rem;
        width: 100%;
        justify-content: stretch;
    }

    .ec-btn[b-qsczjxorno] {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
        flex: 1;
    }

        .ec-btn span[b-qsczjxorno] {
            display: none;
        }

        .ec-btn i[b-qsczjxorno] {
            font-size: 0.875rem;
        }

    .ec-controls-header[b-qsczjxorno] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ec-section-title[b-qsczjxorno] {
        font-size: 1rem;
    }

    .ec-results-info[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-controls-bar[b-qsczjxorno] {
        padding: 0.75rem;
    }

    .ec-search-input[b-qsczjxorno] {
        font-size: 0.8rem;
        padding: 0.5rem 2.5rem 0.5rem 2.25rem;
    }

    .ec-search-icon[b-qsczjxorno] {
        left: 0.75rem;
        font-size: 0.8rem;
    }

    .ec-search-clear[b-qsczjxorno] {
        right: 2.5rem;
        width: 20px;
        height: 20px;
    }

    .ec-search-button[b-qsczjxorno] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .ec-filter-select[b-qsczjxorno],
    .ec-page-size-select[b-qsczjxorno] {
        font-size: 0.75rem;
        padding: 0.5rem 1.75rem 0.5rem 2rem;
    }

    .ec-table-container[b-qsczjxorno] {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .ec-table[b-qsczjxorno] {
        min-width: 700px;
    }

    .ec-th-type[b-qsczjxorno],
    .ec-th-balance[b-qsczjxorno],
    .ec-th-expiry[b-qsczjxorno] {
        display: none;
    }

    .ec-cell-type[b-qsczjxorno],
    .ec-cell-balance[b-qsczjxorno],
    .ec-cell-expiry[b-qsczjxorno] {
        display: none;
    }

    .ec-contract-number[b-qsczjxorno] {
        font-size: 0.8rem;
    }

    .ec-type-badge[b-qsczjxorno] {
        font-size: 0.65rem;
        padding: 0.125rem 0.5rem;
    }

    .ec-status-badge[b-qsczjxorno] {
        font-size: 0.65rem;
        padding: 0.125rem 0.5rem;
    }

    .ec-mass-value[b-qsczjxorno],
    .ec-delivered-value[b-qsczjxorno],
    .ec-balance-value[b-qsczjxorno] {
        font-size: 0.8rem;
    }

    .ec-progress-wrapper[b-qsczjxorno] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .ec-progress-bar[b-qsczjxorno] {
        width: 100%;
        min-width: auto;
    }

    .ec-progress-text[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-action-btn[b-qsczjxorno] {
        padding: 0.25rem;
        font-size: 0.7rem;
    }

    .ec-pagination-wrapper[b-qsczjxorno] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .ec-page-numbers[b-qsczjxorno] {
        display: none;
    }

    .ec-pagination[b-qsczjxorno] {
        width: 100%;
        justify-content: center;
    }

    .ec-page-btn[b-qsczjxorno] {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .ec-page-info[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-loading-state[b-qsczjxorno] {
        padding: 2rem;
    }

    .ec-loader[b-qsczjxorno] {
        width: 60px;
        height: 60px;
    }

    .ec-loader-icon[b-qsczjxorno] {
        font-size: 1.5rem;
    }

    .ec-loading-title[b-qsczjxorno] {
        font-size: 1.125rem;
    }

    .ec-loading-subtitle[b-qsczjxorno] {
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .ec-header[b-qsczjxorno] {
        padding: 0.625rem;
    }

    .ec-title-group[b-qsczjxorno] {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .ec-main-title[b-qsczjxorno] {
        font-size: 1.125rem;
    }

    .ec-subtitle[b-qsczjxorno] {
        display: none;
    }

    .ec-icon-wrapper[b-qsczjxorno] {
        width: 32px;
        height: 32px;
    }

        .ec-icon-wrapper i[b-qsczjxorno] {
            font-size: 0.875rem;
        }

    .ec-header-stats[b-qsczjxorno] {
        margin-top: 0.75rem;
        gap: 0.375rem;
    }

    .ec-stat-pill[b-qsczjxorno] {
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }

        .ec-stat-pill i[b-qsczjxorno] {
            display: none;
        }

    .ec-stat-value[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-stat-label[b-qsczjxorno] {
        font-size: 0.6rem;
    }

    .ec-stats-dashboard[b-qsczjxorno] {
        padding: 0.625rem;
    }

    .ec-stats-grid[b-qsczjxorno] {
        gap: 0.625rem;
    }

    .ec-stat-card[b-qsczjxorno] {
        border-radius: 12px;
    }

    .ec-stat-icon-container[b-qsczjxorno] {
        width: 32px;
        height: 32px;
        top: 0.75rem;
        right: 0.75rem;
    }

        .ec-stat-icon-container i[b-qsczjxorno] {
            font-size: 1.125rem;
        }

    .ec-stat-content[b-qsczjxorno] {
        padding: 0.875rem;
    }

        .ec-stat-content h3[b-qsczjxorno] {
            font-size: 0.7rem;
        }

    .ec-stat-number[b-qsczjxorno] {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .ec-stat-meta[b-qsczjxorno] {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .ec-urgent-action[b-qsczjxorno] {
        font-size: 0.6rem;
        padding: 0.25rem 0.375rem;
        margin-top: 0.5rem;
    }

    .ec-progress-labels[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-progress-bar[b-qsczjxorno] {
        height: 5px;
    }

    .ec-header-actions[b-qsczjxorno] {
        gap: 0.375rem;
    }

    .ec-btn[b-qsczjxorno] {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .ec-controls-header[b-qsczjxorno] {
        padding: 0.75rem;
    }

    .ec-section-title[b-qsczjxorno] {
        font-size: 0.875rem;
        gap: 0.375rem;
    }

        .ec-section-title i[b-qsczjxorno] {
            font-size: 0.875rem;
        }

    .ec-results-info[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-controls-bar[b-qsczjxorno] {
        padding: 0.625rem;
        gap: 0.5rem;
    }

    .ec-search-input[b-qsczjxorno] {
        font-size: 0.75rem;
        padding: 0.375rem 2rem 0.375rem 2rem;
    }

    .ec-search-icon[b-qsczjxorno] {
        left: 0.625rem;
        font-size: 0.75rem;
    }

    .ec-search-clear[b-qsczjxorno] {
        right: 2rem;
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .ec-search-button[b-qsczjxorno] {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        right: 0.25rem;
    }

    .ec-filter-wrapper[b-qsczjxorno] {
        min-width: 120px;
    }

        .ec-filter-wrapper i[b-qsczjxorno] {
            left: 0.625rem;
            font-size: 0.75rem;
        }

    .ec-filter-select[b-qsczjxorno],
    .ec-page-size-select[b-qsczjxorno] {
        font-size: 0.7rem;
        padding: 0.375rem 1.5rem 0.375rem 1.75rem;
        border-radius: 6px;
    }

    .ec-table[b-qsczjxorno] {
        min-width: 500px;
        font-size: 0.7rem;
    }

        .ec-table th[b-qsczjxorno] {
            font-size: 0.65rem;
            padding: 0.5rem;
            letter-spacing: 0.03em;
        }

        .ec-table td[b-qsczjxorno] {
            padding: 0.5rem;
            font-size: 0.75rem;
        }

    .ec-th-actions[b-qsczjxorno] {
        text-align: center;
    }

    .ec-contract-number[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-order-ref[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-product-name[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-mass-value[b-qsczjxorno],
    .ec-delivered-value[b-qsczjxorno],
    .ec-balance-value[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-mass-unit[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-expiry-date[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-expiry-days[b-qsczjxorno] {
        font-size: 0.6rem;
    }

    .ec-no-expiry[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-action-btn[b-qsczjxorno] {
        padding: 0.125rem;
        font-size: 0.65rem;
        margin: 0 0.0625rem;
    }

    .ec-pagination-wrapper[b-qsczjxorno] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .ec-page-btn[b-qsczjxorno] {
        min-width: 26px;
        height: 26px;
        font-size: 0.7rem;
        padding: 0.125rem 0.375rem;
        border-radius: 6px;
    }

    .ec-page-info[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-empty-state[b-qsczjxorno] {
        padding: 2rem 1rem;
    }

    .ec-empty-icon[b-qsczjxorno] {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

        .ec-empty-icon i[b-qsczjxorno] {
            font-size: 1.5rem;
        }

    .ec-empty-title[b-qsczjxorno] {
        font-size: 1.125rem;
        margin-bottom: 0.375rem;
    }

    .ec-empty-message[b-qsczjxorno] {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .ec-btn-secondary[b-qsczjxorno] {
        font-size: 0.75rem;
        padding: 0.5rem 0.875rem;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .ec-header[b-qsczjxorno] {
        padding: 0.5rem;
    }

    .ec-title-group[b-qsczjxorno] {
        gap: 0.375rem;
        margin-bottom: 0.375rem;
    }

    .ec-main-title[b-qsczjxorno] {
        font-size: 1rem;
    }

    .ec-icon-wrapper[b-qsczjxorno] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

        .ec-icon-wrapper i[b-qsczjxorno] {
            font-size: 0.75rem;
        }

    .ec-icon-glow[b-qsczjxorno] {
        display: none;
    }

    .ec-header-stats[b-qsczjxorno] {
        margin-top: 0.5rem;
        gap: 0.25rem;
    }

    .ec-stat-pill[b-qsczjxorno] {
        padding: 0.25rem 0.375rem;
        border-radius: 50px;
        font-size: 0.625rem;
    }

    .ec-stat-value[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-stat-label[b-qsczjxorno] {
        font-size: 0.5625rem;
    }

    .ec-stats-dashboard[b-qsczjxorno] {
        padding: 0.5rem;
    }

    .ec-stats-grid[b-qsczjxorno] {
        gap: 0.5rem;
    }

    .ec-stat-card[b-qsczjxorno] {
        border-radius: 10px;
    }

    .ec-stat-icon-container[b-qsczjxorno] {
        width: 28px;
        height: 28px;
        top: 0.5rem;
        right: 0.5rem;
    }

        .ec-stat-icon-container i[b-qsczjxorno] {
            font-size: 1rem;
        }

    .ec-stat-content[b-qsczjxorno] {
        padding: 0.75rem;
    }

        .ec-stat-content h3[b-qsczjxorno] {
            font-size: 0.625rem;
            margin-bottom: 0.375rem;
        }

    .ec-stat-number[b-qsczjxorno] {
        font-size: 1.125rem;
        margin-bottom: 0.375rem;
    }

    .ec-stat-meta[b-qsczjxorno] {
        font-size: 0.6rem;
        gap: 0.125rem;
    }

    .ec-urgent-action[b-qsczjxorno] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.25rem;
        margin-top: 0.375rem;
        gap: 0.25rem;
    }

    .ec-stat-bar[b-qsczjxorno] {
        height: 3px;
        margin-top: 0.375rem;
    }

    .ec-progress-container[b-qsczjxorno] {
        margin-top: 0.5rem;
    }

    .ec-progress-labels[b-qsczjxorno] {
        font-size: 0.6rem;
        margin-bottom: 0.25rem;
    }

    .ec-progress-bar[b-qsczjxorno] {
        height: 4px;
    }

    .ec-header-actions[b-qsczjxorno] {
        gap: 0.25rem;
    }

    .ec-btn[b-qsczjxorno] {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
        border-radius: 6px;
        gap: 0.25rem;
    }

        .ec-btn i[b-qsczjxorno] {
            font-size: 0.75rem;
        }

    .ec-controls-section[b-qsczjxorno] {
        box-shadow: none;
    }

    .ec-controls-header[b-qsczjxorno] {
        padding: 0.625rem;
        gap: 0.375rem;
    }

    .ec-section-title[b-qsczjxorno] {
        font-size: 0.75rem;
        gap: 0.25rem;
    }

        .ec-section-title i[b-qsczjxorno] {
            font-size: 0.75rem;
        }

    .ec-results-info[b-qsczjxorno] {
        font-size: 0.6rem;
    }

    .ec-controls-bar[b-qsczjxorno] {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .ec-search-input[b-qsczjxorno] {
        font-size: 0.7rem;
        padding: 0.25rem 1.75rem 0.25rem 1.75rem;
        border-radius: 6px;
    }

    .ec-search-icon[b-qsczjxorno] {
        left: 0.5rem;
        font-size: 0.7rem;
    }

    .ec-search-clear[b-qsczjxorno] {
        right: 1.75rem;
        width: 16px;
        height: 16px;
    }

    .ec-search-button[b-qsczjxorno] {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
        right: 0.125rem;
        border-radius: 5px;
    }

    .ec-filter-group[b-qsczjxorno] {
        gap: 0.375rem;
    }

    .ec-filter-wrapper[b-qsczjxorno] {
        min-width: 100px;
    }

        .ec-filter-wrapper i[b-qsczjxorno] {
            left: 0.5rem;
            font-size: 0.7rem;
        }

    .ec-filter-select[b-qsczjxorno],
    .ec-page-size-select[b-qsczjxorno] {
        font-size: 0.625rem;
        padding: 0.25rem 1.25rem 0.25rem 1.5rem;
        border-radius: 5px;
    }

    .ec-table[b-qsczjxorno] {
        min-width: 400px;
        font-size: 0.625rem;
    }

        .ec-table th[b-qsczjxorno] {
            font-size: 0.6rem;
            padding: 0.375rem;
            letter-spacing: 0.02em;
        }

        .ec-table td[b-qsczjxorno] {
            padding: 0.375rem;
            font-size: 0.7rem;
        }

    .ec-th-content[b-qsczjxorno] {
        gap: 0.25rem;
    }

        .ec-th-content i[b-qsczjxorno] {
            font-size: 0.6rem;
        }

    .ec-contract-info[b-qsczjxorno] {
        gap: 0.0625rem;
    }

    .ec-contract-number[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-order-ref[b-qsczjxorno] {
        font-size: 0.6rem;
    }

    .ec-type-badge[b-qsczjxorno] {
        font-size: 0.6rem;
        padding: 0.0625rem 0.375rem;
        gap: 0.25rem;
        border-radius: 12px;
    }

        .ec-type-badge i[b-qsczjxorno] {
            font-size: 0.5rem;
        }

    .ec-product-name[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-status-badge[b-qsczjxorno] {
        font-size: 0.6rem;
        padding: 0.0625rem 0.375rem;
        gap: 0.25rem;
        border-radius: 12px;
    }

    .ec-status-dot[b-qsczjxorno] {
        width: 4px;
        height: 4px;
    }

    .ec-status-alert[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-mass-value[b-qsczjxorno],
    .ec-delivered-value[b-qsczjxorno],
    .ec-balance-value[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-mass-unit[b-qsczjxorno] {
        font-size: 0.6rem;
    }

    .ec-progress-bar[b-qsczjxorno] {
        height: 4px;
        min-width: 40px;
    }

    .ec-progress-text[b-qsczjxorno] {
        font-size: 0.6rem;
        min-width: 24px;
    }

    .ec-expiry-date[b-qsczjxorno] {
        font-size: 0.7rem;
    }

    .ec-expiry-days[b-qsczjxorno] {
        font-size: 0.5625rem;
    }

    .ec-no-expiry[b-qsczjxorno] {
        font-size: 0.65rem;
    }

    .ec-action-btn[b-qsczjxorno] {
        padding: 0.0625rem;
        font-size: 0.6rem;
        border-radius: 4px;
    }

    .ec-pagination-wrapper[b-qsczjxorno] {
        padding: 0.625rem;
        gap: 0.375rem;
    }

    .ec-pagination[b-qsczjxorno] {
        gap: 0.25rem;
    }

    .ec-page-btn[b-qsczjxorno] {
        min-width: 24px;
        height: 24px;
        font-size: 0.625rem;
        padding: 0.0625rem 0.25rem;
        border-radius: 5px;
        gap: 0;
    }

        .ec-page-btn i[b-qsczjxorno] {
            font-size: 0.625rem;
        }

    .ec-page-info[b-qsczjxorno] {
        font-size: 0.625rem;
    }

    .ec-empty-state[b-qsczjxorno] {
        padding: 1.5rem 0.75rem;
    }

    .ec-empty-icon[b-qsczjxorno] {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }

        .ec-empty-icon i[b-qsczjxorno] {
            font-size: 1.25rem;
        }

    .ec-empty-icon-bg[b-qsczjxorno] {
        inset: -10px;
    }

    .ec-empty-title[b-qsczjxorno] {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .ec-empty-message[b-qsczjxorno] {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
        max-width: 280px;
    }

    .ec-btn-secondary[b-qsczjxorno] {
        font-size: 0.7rem;
        padding: 0.375rem 0.75rem;
    }

    .ec-loading-state[b-qsczjxorno] {
        padding: 1.5rem;
        min-height: 40vh;
    }

    .ec-loader[b-qsczjxorno] {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    .ec-loader-ring[b-qsczjxorno] {
        border-width: 1.5px;
    }

        .ec-loader-ring:nth-child(2)[b-qsczjxorno] {
            inset: 6px;
        }

        .ec-loader-ring:nth-child(3)[b-qsczjxorno] {
            inset: 12px;
        }

    .ec-loader-icon[b-qsczjxorno] {
        font-size: 1.25rem;
    }

    .ec-loading-title[b-qsczjxorno] {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .ec-loading-subtitle[b-qsczjxorno] {
        font-size: 0.75rem;
    }

    .ec-table-wrapper.ec-loading[b-qsczjxorno]::before {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }
}

/* ====== Print Styles ====== */
@media print {
    .ec-background-animation[b-qsczjxorno],
    .ec-header-actions[b-qsczjxorno],
    .ec-controls-bar[b-qsczjxorno],
    .ec-pagination-wrapper[b-qsczjxorno],
    .ec-action-btn[b-qsczjxorno] {
        display: none !important;
    }

    .ec-page[b-qsczjxorno] {
        background: white;
    }

    .ec-table-wrapper[b-qsczjxorno] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .ec-table tbody tr:hover[b-qsczjxorno] {
        background: none;
    }

    .ec-table td[b-qsczjxorno],
    .ec-table th[b-qsczjxorno] {
        border: 1px solid #ddd;
    }

    .ec-stats-card[b-qsczjxorno] {
        break-inside: avoid;
    }
}

/* ====== Accessibility ====== */
@media (prefers-reduced-motion: reduce) {
    .ec-spin[b-qsczjxorno],
    .ec-float[b-qsczjxorno],
    .ec-orb-move[b-qsczjxorno],
    .ec-icon-entrance[b-qsczjxorno],
    .ec-glow-pulse[b-qsczjxorno],
    .ec-title-slide[b-qsczjxorno],
    .ec-stats-fade[b-qsczjxorno],
    .ec-actions-fade[b-qsczjxorno],
    .ec-dashboard-fade[b-qsczjxorno],
    .ec-loader-spin[b-qsczjxorno],
    .ec-loader-pulse[b-qsczjxorno],
    .ec-fade-in[b-qsczjxorno],
    .ec-icon-pulse[b-qsczjxorno],
    .ec-urgent-pulse[b-qsczjxorno],
    .ec-urgent-blink[b-qsczjxorno],
    .ec-shimmer[b-qsczjxorno],
    .ec-progress-shine[b-qsczjxorno],
    .ec-status-pulse[b-qsczjxorno],
    .ec-warning-blink[b-qsczjxorno],
    .ec-alert-shake[b-qsczjxorno],
    .ec-progress-move[b-qsczjxorno],
    .ec-empty-pulse[b-qsczjxorno] {
        animation: none;
    }

    .ec-stat-card[b-qsczjxorno],
    .ec-btn[b-qsczjxorno],
    .ec-action-btn[b-qsczjxorno],
    .ec-page-btn[b-qsczjxorno],
    .ec-table tbody tr[b-qsczjxorno] {
        transition: none;
    }
}

/* ====== High Contrast Mode ====== */
@media (prefers-contrast: high) {
    .ec-stat-card[b-qsczjxorno],
    .ec-table-wrapper[b-qsczjxorno] {
        border-width: 2px;
    }

    .ec-type-badge[b-qsczjxorno],
    .ec-status-badge[b-qsczjxorno] {
        border-width: 2px;
    }

    .ec-btn[b-qsczjxorno],
    .ec-action-btn[b-qsczjxorno],
    .ec-page-btn[b-qsczjxorno] {
        border-width: 2px;
    }

    .ec-search-input[b-qsczjxorno],
    .ec-filter-select[b-qsczjxorno],
    .ec-page-size-select[b-qsczjxorno] {
        border-width: 2px;
    }

    .ec-table th[b-qsczjxorno] {
        border-bottom-width: 3px;
    }
}

/* ====== Dark Mode Enhancements ====== */
@media (prefers-color-scheme: dark) {
    .ec-stat-card:hover[b-qsczjxorno] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .ec-table-wrapper[b-qsczjxorno] {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }

    .ec-gradient-orb[b-qsczjxorno],
    .ec-gradient-orb-secondary[b-qsczjxorno] {
        opacity: 0.25;
    }

    .ec-table-wrapper.ec-loading[b-qsczjxorno]::after {
        background: rgba(var(--content-bg-rgb), 0.9);
    }

    .ec-stat-background[b-qsczjxorno] {
        opacity: 0.03;
    }

    .ec-stat-card:hover .ec-stat-background[b-qsczjxorno] {
        opacity: 0.06;
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/ExternalUserDashboard.razor.rz.scp.css */
/* ====== External User Dashboard - Complete Mobile-First Premium Design ====== */

/* ====== Page Structure & Background ====== */
.eu-dashboard[b-4zhudwfkay] {
    min-height: 100vh;
    background: var(--body-bg);
    position: relative;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ====== Container with Mobile Optimization ====== */
.eu-container[b-4zhudwfkay] {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

/* ====== Premium Header Section - Consistent with Contracts ====== */

.eu-header-wrapper[b-4zhudwfkay] {
    background: linear-gradient(180deg, rgba(var(--content-bg-rgb), 0.98) 0%, rgba(var(--content-bg-rgb), 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-divider);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-left: 1em;
    border-bottom-left-radius: 30px;
    margin-right: 1em;
    border-bottom-right-radius: 30px;
}

.eu-header-wrapper[b-4zhudwfkay]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
}

.eu-header[b-4zhudwfkay] {
    padding: 1rem 1.5rem;
}

.eu-header-content[b-4zhudwfkay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.eu-brand-section[b-4zhudwfkay] {
    flex: 1;
}

.eu-title-group[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.eu-icon-wrapper[b-4zhudwfkay] {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    animation: eu-icon-entrance-b-4zhudwfkay 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eu-icon-entrance-b-4zhudwfkay {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.eu-icon-wrapper i[b-4zhudwfkay] {
    font-size: 1.1rem;
    color: white;
    z-index: 1;
}

.eu-icon-glow[b-4zhudwfkay] {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 12px;
    opacity: 0.4;
    filter: blur(8px);
    animation: eu-glow-pulse-b-4zhudwfkay 3s ease-in-out infinite;
}

@keyframes eu-glow-pulse-b-4zhudwfkay {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.eu-title-content[b-4zhudwfkay] {
    flex: 1;
}

.eu-main-title[b-4zhudwfkay] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: eu-title-slide-b-4zhudwfkay 0.6s ease-out 0.2s both;
}

@keyframes eu-title-slide-b-4zhudwfkay {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.eu-subtitle[b-4zhudwfkay] {
    margin: 0.125rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    animation: eu-title-slide-b-4zhudwfkay 0.6s ease-out 0.3s both;
}

.eu-header-stats[b-4zhudwfkay] {
    display: flex;
    gap: 0.75rem;
    animation: eu-stats-fade-b-4zhudwfkay 0.6s ease-out 0.4s both;
}

@keyframes eu-stats-fade-b-4zhudwfkay {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.eu-stat-pill[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .eu-stat-pill:hover[b-4zhudwfkay] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: var(--primary-light);
    }

    .eu-stat-pill i[b-4zhudwfkay] {
        font-size: 0.9rem;
        color: var(--primary);
        opacity: 0.8;
    }

    .eu-stat-pill.eu-active i[b-4zhudwfkay] {
        color: var(--success);
    }

    .eu-stat-pill.eu-volume i[b-4zhudwfkay] {
        color: var(--info);
    }

.eu-stat-value[b-4zhudwfkay] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-stat-label[b-4zhudwfkay] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-header-actions[b-4zhudwfkay] {
    display: flex;
    gap: 0.75rem;
    animation: eu-actions-fade-b-4zhudwfkay 0.6s ease-out 0.5s both;
}

@keyframes eu-actions-fade-b-4zhudwfkay {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== Consistent Premium Buttons ====== */
.eu-btn[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    white-space: nowrap;
}

    .eu-btn[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .eu-btn:hover[b-4zhudwfkay]::before {
        width: 300px;
        height: 300px;
    }

    .eu-btn:disabled[b-4zhudwfkay] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.eu-btn-primary[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
}

    .eu-btn-primary:hover:not(:disabled)[b-4zhudwfkay] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    }

.eu-btn-refresh[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

    .eu-btn-refresh:hover:not(:disabled)[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    }

.eu-btn-export[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
    color: white;
}

    .eu-btn-export:hover:not(:disabled)[b-4zhudwfkay] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25);
    }

.eu-btn-ghost[b-4zhudwfkay] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .eu-btn-ghost:hover:not(:disabled)[b-4zhudwfkay] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-1px);
    }

/* Date Picker Enhancement */
.eu-date-picker[b-4zhudwfkay] {
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-divider);
    border-radius: 10px;
    background: var(--subtle-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    font-weight: 500;
    min-width: 150px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .eu-date-picker:focus[b-4zhudwfkay] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        background: var(--content-bg);
    }

    .eu-date-picker:hover[b-4zhudwfkay] {
        border-color: var(--primary-light);
    }

.eu-spin[b-4zhudwfkay] {
    animation: eu-spin-b-4zhudwfkay 1s linear infinite;
}

@keyframes eu-spin-b-4zhudwfkay {
    to {
        transform: rotate(360deg);
    }
}

/* ====== RESPONSIVE DESIGN UPDATES ====== */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .eu-header-content[b-4zhudwfkay] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .eu-header-actions[b-4zhudwfkay] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .eu-header[b-4zhudwfkay] {
        padding: 1rem;
    }

    .eu-header-stats[b-4zhudwfkay] {
        width: 100%;
        flex-wrap: wrap;
    }

    .eu-stat-pill[b-4zhudwfkay] {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
}

/* Large Mobile */
@media (max-width: 768px) {
    .eu-header[b-4zhudwfkay] {
        padding: 0.875rem;
    }

    .eu-title-group[b-4zhudwfkay] {
        gap: 0.75rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1.25rem;
    }

    .eu-subtitle[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-icon-wrapper[b-4zhudwfkay] {
        width: 40px;
        height: 40px;
    }

        .eu-icon-wrapper i[b-4zhudwfkay] {
            font-size: 1rem;
        }

    .eu-header-stats[b-4zhudwfkay] {
        gap: 0.5rem;
    }

    .eu-stat-pill[b-4zhudwfkay] {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
    }

    .eu-stat-value[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

    .eu-stat-label[b-4zhudwfkay] {
        font-size: 0.65rem;
    }

    .eu-header-actions[b-4zhudwfkay] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .eu-btn[b-4zhudwfkay] {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
        flex: 1;
        min-width: 0;
    }

    .eu-date-picker[b-4zhudwfkay] {
        flex: 2;
        min-width: 0;
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .eu-header[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1.125rem;
    }

    .eu-icon-wrapper[b-4zhudwfkay] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

        .eu-icon-wrapper i[b-4zhudwfkay] {
            font-size: 0.9rem;
        }

    .eu-header-stats[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.375rem;
    }

    .eu-stat-pill[b-4zhudwfkay] {
        justify-content: space-between;
    }

    .eu-header-actions[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .eu-btn[b-4zhudwfkay] {
        width: 100%;
        justify-content: center;
    }

        .eu-btn span[b-4zhudwfkay] {
            display: none;
        }

        .eu-btn i[b-4zhudwfkay] {
            font-size: 0.875rem;
        }

    .eu-date-picker[b-4zhudwfkay] {
        width: 100%;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .eu-header[b-4zhudwfkay] {
        padding: 0.625rem;
    }

    .eu-title-group[b-4zhudwfkay] {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1rem;
    }

    .eu-subtitle[b-4zhudwfkay] {
        display: none;
    }

    .eu-icon-wrapper[b-4zhudwfkay] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

        .eu-icon-wrapper i[b-4zhudwfkay] {
            font-size: 0.8rem;
        }

    .eu-icon-glow[b-4zhudwfkay] {
        display: none;
    }

    .eu-stat-pill[b-4zhudwfkay] {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .eu-stat-value[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-stat-label[b-4zhudwfkay] {
        font-size: 0.5625rem;
    }

    .eu-btn[b-4zhudwfkay] {
        padding: 0.375rem 0.5rem;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .eu-date-picker[b-4zhudwfkay] {
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
    }
}

/* ====== Compact Premium Buttons ====== */
.eu-btn[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
}

    .eu-btn[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .eu-btn:hover[b-4zhudwfkay]::before {
        width: 300px;
        height: 300px;
    }

    .eu-btn:disabled[b-4zhudwfkay] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.eu-btn-primary[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
}

    .eu-btn-primary:hover:not(:disabled)[b-4zhudwfkay] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
    }

.eu-btn-success[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
    color: white;
}

    .eu-btn-success:hover:not(:disabled)[b-4zhudwfkay] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25);
    }

.eu-btn-ghost[b-4zhudwfkay] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
}

    .eu-btn-ghost:hover:not(:disabled)[b-4zhudwfkay] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

.eu-btn-outline[b-4zhudwfkay] {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

    .eu-btn-outline:hover:not(:disabled)[b-4zhudwfkay] {
        background: var(--primary-light);
    }

.eu-btn-sm[b-4zhudwfkay] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Date Picker */
.eu-date-picker[b-4zhudwfkay] {
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-divider);
    border-radius: 10px;
    background: var(--subtle-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    font-weight: 500;
    min-width: 150px;
    transition: all 0.2s ease;
}

    .eu-date-picker:focus[b-4zhudwfkay] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--focus-ring);
        background: var(--content-bg);
    }

/* ====== Loading States - Consistent with Contracts ====== */
.eu-loading-state[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 3rem;
}

.eu-loading-spinner[b-4zhudwfkay] {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

    .eu-loading-spinner[b-4zhudwfkay]::before,
    .eu-loading-spinner[b-4zhudwfkay]::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 2px solid transparent;
        border-radius: 50%;
    }

    .eu-loading-spinner[b-4zhudwfkay]::before {
        border-top-color: var(--primary);
        animation: eu-loader-spin-b-4zhudwfkay 1.5s linear infinite;
    }

    .eu-loading-spinner[b-4zhudwfkay]::after {
        inset: 8px;
        border-right-color: var(--secondary);
        animation: eu-loader-spin-b-4zhudwfkay 2s linear infinite reverse;
    }

@keyframes eu-loader-spin-b-4zhudwfkay {
    to {
        transform: rotate(360deg);
    }
}

.eu-loading-text[b-4zhudwfkay] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-spin[b-4zhudwfkay] {
    animation: eu-loader-spin-b-4zhudwfkay 1s linear infinite;
}

/* ====== Main Grid Layout ====== */
.eu-main-grid[b-4zhudwfkay] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ====== Panel Base Styles ====== */
.eu-activity-panel[b-4zhudwfkay],
.eu-contracts-panel[b-4zhudwfkay] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .eu-activity-panel:hover[b-4zhudwfkay],
    .eu-contracts-panel:hover[b-4zhudwfkay] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

.eu-panel-header[b-4zhudwfkay] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eu-panel-title-section[b-4zhudwfkay] {
    flex: 1;
    min-width: 0;
}

.eu-panel-title[b-4zhudwfkay] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

    .eu-panel-title i[b-4zhudwfkay] {
        color: var(--primary);
        font-size: 1rem;
        opacity: 0.8;
    }

.eu-panel-subtitle[b-4zhudwfkay] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.eu-panel-actions[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eu-panel-content[b-4zhudwfkay] {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(var(--subtle-bg-rgb), 0.3);
}

/* ====== Search and Filter Section ====== */
.eu-search-filter-section[b-4zhudwfkay] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.eu-search-row[b-4zhudwfkay] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.eu-search-input-container[b-4zhudwfkay] {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.eu-search-icon[b-4zhudwfkay] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
}

.eu-search-input[b-4zhudwfkay] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    border: 2px solid var(--border-divider);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--subtle-bg);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

    .eu-search-input:focus[b-4zhudwfkay] {
        outline: none;
        border-color: var(--primary);
        background: var(--content-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .eu-search-input[b-4zhudwfkay]::placeholder {
        color: var(--placeholder-color);
    }

.eu-search-clear[b-4zhudwfkay] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--danger-light);
    border: none;
    color: var(--danger);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

    .eu-search-clear:hover[b-4zhudwfkay] {
        background: var(--danger);
        color: white;
        transform: translateY(-50%) scale(1.05);
    }

.eu-contract-filter[b-4zhudwfkay] {
    appearance: none;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 2px solid var(--border-divider);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--subtle-bg);
    color: var(--text-primary);
    min-width: 200px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

    .eu-contract-filter:focus[b-4zhudwfkay] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        background-color: var(--content-bg);
    }

    .eu-contract-filter:hover[b-4zhudwfkay] {
        border-color: var(--primary-light);
    }

.eu-filter-container[b-4zhudwfkay] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.eu-compact-toggle[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--border-divider);
    border-radius: 10px;
    background: var(--subtle-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

    .eu-compact-toggle:hover[b-4zhudwfkay] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
        transform: translateY(-1px);
    }

    .eu-compact-toggle.active[b-4zhudwfkay] {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
    }

    .eu-compact-toggle i[b-4zhudwfkay] {
        font-size: 0.9rem;
    }

/* ====== Status Tabs ====== */
.eu-status-tabs[b-4zhudwfkay] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    background: var(--subtle-bg);
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-divider);
}

.eu-status-tab[b-4zhudwfkay] {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

    .eu-status-tab[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        right: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.1), transparent);
        transition: all 0.5s ease;
    }

    .eu-status-tab:hover[b-4zhudwfkay] {
        background: rgba(var(--primary-rgb), 0.05);
        color: var(--primary);
        border-color: rgba(var(--primary-rgb), 0.2);
        transform: translateY(-2px);
    }

        .eu-status-tab:hover[b-4zhudwfkay]::before {
            left: 0;
            right: 0;
        }

    .eu-status-tab.active[b-4zhudwfkay] {
        background: var(--content-bg);
        box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.15);
        color: var(--primary);
        border-color: var(--primary);
        font-weight: 700;
        transform: scale(1.02);
    }

.eu-tab-label[b-4zhudwfkay] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.eu-tab-count[b-4zhudwfkay] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.2s ease;
    font-family: var(--font-mono);
}

.eu-status-tab.active .eu-tab-count[b-4zhudwfkay] {
    transform: scale(1.1);
    color: var(--primary);
}

.eu-status-tab:not(.active) .eu-tab-count[b-4zhudwfkay] {
    color: var(--text-secondary);
}

.eu-status-tab:hover:not(.active) .eu-tab-count[b-4zhudwfkay] {
    color: var(--primary);
}

/* ====== Ticket List Container ====== */
.eu-ticket-list[b-4zhudwfkay] {
    display: block;
    flex-direction: column;
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem;
    flex: 1;
    background: rgba(var(--border-divider-rgb), 0.02);
    border-radius: 12px;
}

/* ====== Ticket Cards ====== */
.eu-ticket-card[b-4zhudwfkay] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 0;
    overflow: hidden;
}

    .eu-ticket-card[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .eu-ticket-card.checked-in[b-4zhudwfkay]::before {
        background: var(--info);
    }

    .eu-ticket-card.weighed-in[b-4zhudwfkay]::before {
        background: var(--warning);
    }

    .eu-ticket-card.weighed-out[b-4zhudwfkay]::before {
        background: var(--success);
    }

    .eu-ticket-card.invoiced[b-4zhudwfkay]::before {
        background: var(--primary);
    }

    .eu-ticket-card.urgent[b-4zhudwfkay]::before {
        background: var(--danger);
        animation: eu-urgent-pulse-b-4zhudwfkay 2s infinite;
    }

@keyframes eu-urgent-pulse-b-4zhudwfkay {
    0%, 100% {
        opacity: 0.8;
        height: 3px;
    }

    50% {
        opacity: 1;
        height: 4px;
    }
}

.eu-ticket-card:hover[b-4zhudwfkay] {
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

    .eu-ticket-card:hover[b-4zhudwfkay]::before {
        height: 4px;
    }

.eu-ticket-header[b-4zhudwfkay] {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
    background: linear-gradient(135deg, rgba(var(--subtle-bg-rgb), 0.3) 0%, transparent 100%);
}

.eu-ticket-main[b-4zhudwfkay] {
    flex: 1;
    min-width: 0;
}

.eu-ticket-number[b-4zhudwfkay] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    margin-bottom: 0.375rem;
}

.eu-ticket-registration[b-4zhudwfkay] {
    font-size: 0.875rem;
    color: var(--primary);
    font-weight: 600;
    font-family: var(--font-mono);
    margin-bottom: 0.375rem;
    display: inline-block;
    background: var(--primary-light);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
}

.eu-ticket-driver[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.eu-driver-id[b-4zhudwfkay] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: var(--primary-light);
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary);
}

.eu-ticket-status[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
}

.eu-status-badge[b-4zhudwfkay] {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    line-height: 1;
    min-width: 90px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

    .eu-status-badge.checked-in[b-4zhudwfkay] {
        background: var(--info-light);
        color: var(--info);
        border-color: var(--info);
    }

    .eu-status-badge.weighed-in[b-4zhudwfkay] {
        background: var(--warning-light);
        color: var(--warning);
        border-color: var(--warning);
    }

    .eu-status-badge.weighed-out[b-4zhudwfkay] {
        background: var(--success-light);
        color: var(--success);
        border-color: var(--success);
    }

    .eu-status-badge.invoiced[b-4zhudwfkay] {
        background: var(--primary-light);
        color: var(--primary);
        border-color: var(--primary);
    }

.eu-time-display[b-4zhudwfkay] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.eu-ticket-dates[b-4zhudwfkay] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--subtle-bg-rgb), 0.4);
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.3);
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

.eu-date-item[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

    .eu-date-item i[b-4zhudwfkay] {
        color: var(--primary);
        width: 14px;
        font-size: 0.75rem;
    }

.eu-date-label[b-4zhudwfkay] {
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-date-value[b-4zhudwfkay] {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.eu-ticket-weights[b-4zhudwfkay] {
    padding: 0.875rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.625rem;
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.5);
    background: rgba(var(--info-light-rgb), 0.05);
}

.eu-weight-item[b-4zhudwfkay] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    padding: 0.625rem;
    text-align: center;
    transition: all 0.2s ease;
}

    .eu-weight-item:hover[b-4zhudwfkay] {
        border-color: var(--primary-light);
        transform: translateY(-1px);
    }

    .eu-weight-item.final[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.05) 100%);
        border-color: var(--success);
    }

.eu-weight-label[b-4zhudwfkay] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: block;
}

.eu-weight-value[b-4zhudwfkay] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-weight-item.final .eu-weight-label[b-4zhudwfkay],
.eu-weight-item.final .eu-weight-value[b-4zhudwfkay] {
    color: var(--success);
}

.eu-ticket-footer[b-4zhudwfkay] {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(var(--border-divider-rgb), 0.5);
    background: linear-gradient(135deg, rgba(var(--subtle-bg-rgb), 0.6) 0%, rgba(var(--subtle-bg-rgb), 0.3) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eu-contract-info[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.eu-contract-number[b-4zhudwfkay] {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--primary);
}

.eu-product-name[b-4zhudwfkay] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}

.eu-operational-indicator[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.eu-operational-time[b-4zhudwfkay] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
}

.eu-urgent-badge[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--warning-light);
    color: var(--warning);
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--warning);
    animation: eu-urgent-blink-b-4zhudwfkay 2s infinite;
}

@keyframes eu-urgent-blink-b-4zhudwfkay {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.eu-invoice-number[b-4zhudwfkay] {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--success);
}

/* ====== Compact Table View ====== */
.eu-compact-table-container[b-4zhudwfkay] {
    max-height: 70vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border-divider);
    background: var(--content-bg);
}

.eu-compact-table[b-4zhudwfkay] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
}

    .eu-compact-table thead[b-4zhudwfkay] {
        background: var(--subtle-bg);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .eu-compact-table th[b-4zhudwfkay] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 700;
        font-size: 0.7rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-divider);
        white-space: nowrap;
        background: var(--subtle-bg);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        position: relative;
    }

        .eu-compact-table th.eu-sortable[b-4zhudwfkay] {
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
            padding-right: 1.75rem;
        }

            .eu-compact-table th.eu-sortable:hover[b-4zhudwfkay] {
                background: rgba(var(--primary-rgb), 0.05);
                color: var(--primary);
            }

            .eu-compact-table th.eu-sortable i[b-4zhudwfkay] {
                position: absolute;
                right: 0.75rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                color: var(--text-secondary);
                transition: all 0.2s ease;
            }

            .eu-compact-table th.eu-sortable:hover i[b-4zhudwfkay] {
                color: var(--primary);
            }

            .eu-compact-table th.eu-sortable i.fa-sort-up[b-4zhudwfkay],
            .eu-compact-table th.eu-sortable i.fa-sort-down[b-4zhudwfkay] {
                color: var(--primary);
                font-weight: 600;
            }

    .eu-compact-table tbody tr[b-4zhudwfkay] {
        transition: all 0.2s ease;
        cursor: pointer;
    }

        .eu-compact-table tbody tr:hover[b-4zhudwfkay] {
            background: rgba(var(--primary-rgb), 0.04);
        }

        .eu-compact-table tbody tr:not(:last-child) td[b-4zhudwfkay] {
            border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.5);
        }

        .eu-compact-table tbody tr.urgent[b-4zhudwfkay] {
            background: rgba(var(--warning-rgb), 0.02);
        }

            .eu-compact-table tbody tr.urgent:hover[b-4zhudwfkay] {
                background: rgba(var(--warning-rgb), 0.06);
            }

    .eu-compact-table td[b-4zhudwfkay] {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        vertical-align: middle;
        white-space: nowrap;
    }

.eu-compact-ticket-number[b-4zhudwfkay] {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-compact-registration[b-4zhudwfkay] {
    background: var(--primary-light);
    color: var(--primary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    display: inline-block;
}

.eu-compact-driver[b-4zhudwfkay] {
    color: var(--text-primary);
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eu-compact-status[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    justify-content: center;
}

    .eu-compact-status.checked-in[b-4zhudwfkay] {
        background: var(--info-light);
        color: var(--info);
    }

    .eu-compact-status.weighed-in[b-4zhudwfkay] {
        background: var(--warning-light);
        color: var(--warning);
    }

    .eu-compact-status.weighed-out[b-4zhudwfkay] {
        background: var(--success-light);
        color: var(--success);
    }

    .eu-compact-status.invoiced[b-4zhudwfkay] {
        background: var(--primary-light);
        color: var(--primary);
    }

.eu-compact-contract[b-4zhudwfkay] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
}

.eu-compact-product[b-4zhudwfkay] {
    color: var(--text-secondary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eu-compact-weights[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
}

.eu-compact-weight-item[b-4zhudwfkay] {
    background: var(--subtle-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

    .eu-compact-weight-item.final[b-4zhudwfkay] {
        background: var(--success-light);
        color: var(--success);
    }

.eu-compact-lab-indicator[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--info-light);
    color: var(--info);
    font-size: 0.7rem;
}

.eu-compact-time[b-4zhudwfkay] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ====== Timeline View ====== */
.eu-timeline-container[b-4zhudwfkay] {
    flex: 1;
    overflow-y: auto;
    max-height: 65vh;
    padding: 1rem;
}

.eu-timeline[b-4zhudwfkay] {
    position: relative;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .eu-timeline[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        left: 1.5rem;
        top: 2rem;
        bottom: 2rem;
        width: 2px;
        background: linear-gradient(to bottom, var(--primary), var(--secondary));
        opacity: 0.2;
    }

.eu-timeline-event[b-4zhudwfkay] {
    position: relative;
    padding: 1.25rem;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    margin-left: 2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fade-in-up-b-4zhudwfkay 0.4s ease-out both;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@keyframes fade-in-up-b-4zhudwfkay {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.eu-timeline-event:hover[b-4zhudwfkay] {
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.eu-timeline-marker[b-4zhudwfkay] {
    position: absolute;
    left: calc(-2rem - 1.25rem);
    top: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--content-bg);
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.eu-timeline-marker-primary[b-4zhudwfkay] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.eu-timeline-marker-success[b-4zhudwfkay] {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-light);
}

.eu-timeline-marker-warning[b-4zhudwfkay] {
    border-color: var(--warning);
    color: var(--warning);
    background: var(--warning-light);
}

.eu-timeline-marker-info[b-4zhudwfkay] {
    border-color: var(--info);
    color: var(--info);
    background: var(--info-light);
}

.eu-timeline-event:hover .eu-timeline-marker[b-4zhudwfkay] {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.15);
}

.eu-timeline-content[b-4zhudwfkay] {
    min-width: 0;
}

.eu-timeline-header[b-4zhudwfkay] {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.eu-timeline-title[b-4zhudwfkay] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.eu-timeline-time[b-4zhudwfkay] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.eu-timeline-details[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.75rem;
}

.eu-timeline-meta[b-4zhudwfkay] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eu-timeline-meta-item[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--subtle-bg);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-divider);
}

    .eu-timeline-meta-item i[b-4zhudwfkay] {
        color: var(--primary);
        font-size: 0.7rem;
    }

/* ====== Operational Process Timeline ====== */
.eu-operational-process[b-4zhudwfkay] {
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: 10px;
    border: 1px solid var(--border-divider);
    position: relative;
}

.eu-process-steps[b-4zhudwfkay] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

    .eu-process-steps[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: var(--border-divider);
        z-index: 0;
    }

.eu-process-step[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    flex: 1;
    text-align: center;
    min-width: 80px;
    z-index: 1;
}

.eu-process-marker[b-4zhudwfkay] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border: 2px solid;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.eu-process-step.completed .eu-process-marker[b-4zhudwfkay] {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.eu-process-step.current .eu-process-marker[b-4zhudwfkay] {
    background: var(--warning);
    color: white;
    border-color: var(--warning);
    animation: eu-process-pulse-b-4zhudwfkay 2s infinite;
}

@keyframes eu-process-pulse-b-4zhudwfkay {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0);
    }
}

.eu-process-step.pending .eu-process-marker[b-4zhudwfkay] {
    background: var(--subtle-bg);
    color: var(--text-muted);
    border-color: var(--border-divider);
}

.eu-process-info[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.eu-process-label[b-4zhudwfkay] {
    font-weight: 700;
    font-size: 0.625rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-process-time[b-4zhudwfkay] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: var(--font-mono);
}

.eu-operational-summary[b-4zhudwfkay] {
    padding: 0.75rem;
    background: var(--content-bg);
    border-radius: 8px;
    border: 1px solid var(--border-divider);
}

.eu-operational-status[b-4zhudwfkay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eu-status-label[b-4zhudwfkay] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-status-value[b-4zhudwfkay] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

    .eu-status-value.urgent[b-4zhudwfkay] {
        color: var(--warning);
        animation: eu-urgent-blink-b-4zhudwfkay 2s infinite;
    }

/* ====== Timeline Weights ====== */
.eu-timeline-weights[b-4zhudwfkay] {
    background: var(--subtle-bg);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-divider);
    margin-top: 0.75rem;
}

.eu-weight-summary[b-4zhudwfkay] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

.eu-weight-item-timeline[b-4zhudwfkay] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: all 0.2s ease;
}

    .eu-weight-item-timeline:hover[b-4zhudwfkay] {
        border-color: var(--primary-light);
        transform: translateY(-1px);
    }

    .eu-weight-item-timeline.final[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.05) 100%);
        border-color: var(--success);
    }

/* ====== Lab Results ====== */
.eu-timeline-lab[b-4zhudwfkay] {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--info-rgb), 0.05) 100%);
    border-radius: 10px;
    border: 1px solid rgba(var(--info-rgb), 0.2);
}

.eu-lab-header[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

    .eu-lab-header i[b-4zhudwfkay] {
        color: var(--info);
    }

.eu-lab-results[b-4zhudwfkay] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.625rem;
}

.eu-lab-result-item[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: var(--content-bg);
    border-radius: 8px;
    border: 1px solid var(--border-divider);
    transition: all 0.2s ease;
}

    .eu-lab-result-item:hover[b-4zhudwfkay] {
        background: rgba(var(--primary-rgb), 0.02);
        border-color: var(--primary-light);
        transform: translateY(-1px);
    }

    .eu-lab-result-item i[b-4zhudwfkay] {
        color: var(--info);
        font-size: 0.75rem;
        width: 16px;
        flex-shrink: 0;
    }

.eu-lab-name[b-4zhudwfkay] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex: 1;
    font-weight: 500;
}

.eu-lab-value[b-4zhudwfkay] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ====== Loading Status ====== */
.eu-loading-status[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, var(--info-light) 0%, rgba(var(--info-rgb), 0.1) 100%);
    border: 1px solid var(--info);
    border-radius: 8px;
    color: var(--info);
    font-weight: 500;
    font-size: 0.75rem;
}

    .eu-loading-status i[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

/* ====== Contract Cards ====== */
.eu-contracts-list[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    overflow-y: auto;
    padding: 0.5rem;
    flex: 1;
    background: rgba(var(--border-divider-rgb), 0.02);
    border-radius: 12px;
}

.eu-contract-card[b-4zhudwfkay] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

    .eu-contract-card[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
        transition: all 0.3s ease;
        opacity: 0.8;
    }

    .eu-contract-card:hover[b-4zhudwfkay] {
        border-color: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

        .eu-contract-card:hover[b-4zhudwfkay]::before {
            height: 4px;
            opacity: 1;
        }

.eu-contract-header[b-4zhudwfkay] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.625rem;
}

.eu-contract-number[b-4zhudwfkay] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-mono);
}

.eu-contract-status[b-4zhudwfkay] {
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    min-width: 60px;
    text-align: center;
}

    .eu-contract-status.active[b-4zhudwfkay] {
        background: var(--success-light);
        color: var(--success);
        border-color: var(--success);
    }

    .eu-contract-status.expiring[b-4zhudwfkay] {
        background: var(--warning-light);
        color: var(--warning);
        border-color: var(--warning);
    }

    .eu-contract-status.expired[b-4zhudwfkay] {
        background: var(--danger-light);
        color: var(--danger);
        border-color: var(--danger);
    }

.eu-contract-product[b-4zhudwfkay] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.eu-contract-metrics[b-4zhudwfkay] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.eu-metric[b-4zhudwfkay] {
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    padding: 0.625rem;
    text-align: center;
}

.eu-metric-label[b-4zhudwfkay] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: block;
}

.eu-metric-value[b-4zhudwfkay] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-contract-progress[b-4zhudwfkay] {
    margin-top: 0.625rem;
}

.eu-progress-info[b-4zhudwfkay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.eu-progress-percentage[b-4zhudwfkay] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-mono);
}

.eu-progress-text[b-4zhudwfkay] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.eu-progress-bar[b-4zhudwfkay] {
    width: 100%;
    height: 6px;
    background: var(--border-divider);
    border-radius: 20px;
    overflow: hidden;
}

.eu-progress-fill[b-4zhudwfkay] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.5s ease-in-out;
    border-radius: 20px;
    position: relative;
}

    .eu-progress-fill[b-4zhudwfkay]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        animation: eu-shimmer-b-4zhudwfkay 2s infinite;
    }

@keyframes eu-shimmer-b-4zhudwfkay {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ====== Empty States ====== */
.eu-empty-state[b-4zhudwfkay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--subtle-bg);
    border: 2px dashed var(--border-divider);
    border-radius: 12px;
    margin: 1rem 0;
}

.eu-empty-small[b-4zhudwfkay] {
    padding: 2rem 1rem;
    min-height: 200px;
}

.eu-empty-icon[b-4zhudwfkay] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.eu-empty-title[b-4zhudwfkay] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.eu-empty-description[b-4zhudwfkay] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 400px;
    line-height: 1.5;
}

/* ====== Status Cell ====== */
.eu-status-cell[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .eu-status-cell i[b-4zhudwfkay] {
        font-size: 0.75rem;
        flex-shrink: 0;
    }

.eu-urgent-indicator[b-4zhudwfkay] {
    color: var(--warning);
    animation: eu-urgent-pulse-b-4zhudwfkay 2s infinite;
    margin-left: 0.375rem;
}

/* ====== Scrollbar Styling ====== */
.eu-ticket-list[b-4zhudwfkay]::-webkit-scrollbar,
.eu-contracts-list[b-4zhudwfkay]::-webkit-scrollbar,
.eu-compact-table-container[b-4zhudwfkay]::-webkit-scrollbar,
.eu-timeline-container[b-4zhudwfkay]::-webkit-scrollbar {
    width: 6px;
}

.eu-ticket-list[b-4zhudwfkay]::-webkit-scrollbar-track,
.eu-contracts-list[b-4zhudwfkay]::-webkit-scrollbar-track,
.eu-compact-table-container[b-4zhudwfkay]::-webkit-scrollbar-track,
.eu-timeline-container[b-4zhudwfkay]::-webkit-scrollbar-track {
    background: rgba(var(--subtle-bg-rgb), 0.5);
    border-radius: 3px;
    margin: 0.5rem 0;
}

.eu-ticket-list[b-4zhudwfkay]::-webkit-scrollbar-thumb,
.eu-contracts-list[b-4zhudwfkay]::-webkit-scrollbar-thumb,
.eu-compact-table-container[b-4zhudwfkay]::-webkit-scrollbar-thumb,
.eu-timeline-container[b-4zhudwfkay]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scroll-thumb) 0%, rgba(var(--primary-rgb), 0.3) 100%);
    border-radius: 3px;
    border: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .eu-ticket-list[b-4zhudwfkay]::-webkit-scrollbar-thumb:hover,
    .eu-contracts-list[b-4zhudwfkay]::-webkit-scrollbar-thumb:hover,
    .eu-compact-table-container[b-4zhudwfkay]::-webkit-scrollbar-thumb:hover,
    .eu-timeline-container[b-4zhudwfkay]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--scroll-thumb-hover) 0%, rgba(var(--primary-rgb), 0.5) 100%);
    }

/* ====== RESPONSIVE DESIGN - MOBILE FIRST ====== */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .eu-main-grid[b-4zhudwfkay] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .eu-timeline-container[b-4zhudwfkay],
    .eu-ticket-list[b-4zhudwfkay],
    .eu-contracts-list[b-4zhudwfkay],
    .eu-compact-table-container[b-4zhudwfkay] {
        max-height: none;
    }

    .eu-header[b-4zhudwfkay] {
        padding: 0.875rem 1rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1.25rem;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .eu-header-content[b-4zhudwfkay] {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .eu-header-actions[b-4zhudwfkay] {
        width: 100%;
        justify-content: space-between;
    }

    .eu-panel-content[b-4zhudwfkay] {
        padding: 1rem;
    }

    .eu-timeline[b-4zhudwfkay] {
        padding-left: 1.5rem;
    }

        .eu-timeline[b-4zhudwfkay]::before {
            left: 1rem;
        }

    .eu-timeline-marker[b-4zhudwfkay] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
        left: calc(-1rem - 1rem);
    }

    .eu-timeline-event[b-4zhudwfkay] {
        margin-left: 1.5rem;
        padding: 1rem;
    }

    .eu-compact-table th[b-4zhudwfkay],
    .eu-compact-table td[b-4zhudwfkay] {
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
    }

    .eu-compact-table .eu-compact-weights[b-4zhudwfkay] {
        display: none;
    }
}

/* Large Mobile */
@media (max-width: 768px) {
    /* Container */
    .eu-container[b-4zhudwfkay] {
        padding: 0;
    }

    /* Header */
    .eu-header[b-4zhudwfkay] {
        padding: 0.75rem;
        border-radius: 0;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1.125rem;
        gap: 0.5rem;
    }

        .eu-main-title i[b-4zhudwfkay] {
            font-size: 1rem;
        }

    .eu-customer-meta[b-4zhudwfkay] {
        font-size: 0.7rem;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .eu-customer-number[b-4zhudwfkay] {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Header Actions */
    .eu-header-actions[b-4zhudwfkay] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .eu-btn[b-4zhudwfkay] {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        flex: 1;
        min-width: 0;
    }

        .eu-btn span[b-4zhudwfkay] {
            display: none;
        }

        .eu-btn i[b-4zhudwfkay] {
            font-size: 0.875rem;
        }

    .eu-date-picker[b-4zhudwfkay] {
        flex: 2;
        min-width: 0;
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Main Grid */
    .eu-main-grid[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    /* Panels */
    .eu-panel-header[b-4zhudwfkay] {
        padding: 0.875rem;
    }

    .eu-panel-title[b-4zhudwfkay] {
        font-size: 1rem;
    }

    .eu-panel-content[b-4zhudwfkay] {
        padding: 0.875rem;
    }

    /* Search and Filter */
    .eu-search-filter-section[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .eu-search-row[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .eu-search-input-container[b-4zhudwfkay] {
        min-width: auto;
        width: 100%;
    }

    .eu-search-input[b-4zhudwfkay] {
        font-size: 0.875rem;
        padding: 0.625rem 2.25rem 0.625rem 2.25rem;
    }

    .eu-contract-filter[b-4zhudwfkay] {
        width: 100%;
        min-width: auto;
        font-size: 0.875rem;
        padding: 0.625rem 2.25rem 0.625rem 1rem;
    }

    .eu-filter-container[b-4zhudwfkay] {
        width: 100%;
    }

    .eu-compact-toggle[b-4zhudwfkay] {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    /* Status Tabs */
    .eu-status-tabs[b-4zhudwfkay] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .eu-status-tab[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-tab-count[b-4zhudwfkay] {
        font-size: 1.25rem;
    }

    .eu-tab-label[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    /* Ticket Cards */
    .eu-ticket-list[b-4zhudwfkay] {
        padding: 0.375rem;
        gap: 0.75rem;
    }

    .eu-ticket-card[b-4zhudwfkay] {
        border-radius: 10px;
    }

    .eu-ticket-header[b-4zhudwfkay] {
        padding: 0.875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .eu-ticket-status[b-4zhudwfkay] {
        align-items: flex-start;
        width: 100%;
    }

    .eu-ticket-number[b-4zhudwfkay] {
        font-size: 1rem;
    }

    .eu-ticket-registration[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-ticket-dates[b-4zhudwfkay] {
        padding: 0.75rem 0.875rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .eu-ticket-weights[b-4zhudwfkay] {
        padding: 0.75rem 0.875rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .eu-ticket-footer[b-4zhudwfkay] {
        padding: 0.75rem 0.875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Timeline */
    .eu-timeline[b-4zhudwfkay] {
        padding-left: 1rem;
        gap: 1rem;
    }

        .eu-timeline[b-4zhudwfkay]::before {
            left: 0.75rem;
        }

    .eu-timeline-marker[b-4zhudwfkay] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
        left: calc(-0.875rem - 0.75rem);
    }

    .eu-timeline-event[b-4zhudwfkay] {
        margin-left: 1.25rem;
        padding: 0.875rem;
    }

    .eu-timeline-meta[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.375rem;
    }

    .eu-timeline-meta-item[b-4zhudwfkay] {
        width: 100%;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Process Timeline */
    .eu-process-steps[b-4zhudwfkay] {
        flex-direction: column;
        gap: 1rem;
    }

        .eu-process-steps[b-4zhudwfkay]::before {
            display: none;
        }

    .eu-process-step[b-4zhudwfkay] {
        flex-direction: row;
        text-align: left;
        min-width: auto;
        gap: 0.75rem;
    }

        .eu-process-step:not(:last-child)[b-4zhudwfkay]::after {
            content: '';
            position: absolute;
            left: 16px;
            top: 100%;
            width: 2px;
            height: 1rem;
            background: var(--border-divider);
            right: auto;
        }

    .eu-process-marker[b-4zhudwfkay] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .eu-process-info[b-4zhudwfkay] {
        align-items: flex-start;
    }

    /* Lab Results */
    .eu-lab-results[b-4zhudwfkay] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .eu-lab-result-item[b-4zhudwfkay] {
        padding: 0.5rem;
    }

    /* Contract Cards */
    .eu-contracts-list[b-4zhudwfkay] {
        padding: 0.375rem;
        gap: 0.75rem;
    }

    .eu-contract-card[b-4zhudwfkay] {
        padding: 1rem;
    }

    .eu-contract-metrics[b-4zhudwfkay] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Compact Table */
    .eu-compact-table-container[b-4zhudwfkay] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .eu-compact-table[b-4zhudwfkay] {
        min-width: 600px;
    }

        .eu-compact-table .eu-compact-product[b-4zhudwfkay],
        .eu-compact-table .eu-compact-contract[b-4zhudwfkay] {
            display: none;
        }

        .eu-compact-table th.eu-sortable[b-4zhudwfkay] {
            padding-right: 1.25rem;
        }

            .eu-compact-table th.eu-sortable i[b-4zhudwfkay] {
                right: 0.5rem;
                font-size: 0.625rem;
            }
}

/* Small Mobile */
@media (max-width: 576px) {
    /* Header */
    .eu-header[b-4zhudwfkay] {
        padding: 0.625rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 1rem;
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    .eu-customer-meta[b-4zhudwfkay] {
        font-size: 0.625rem;
        flex-direction: column;
    }

    .eu-separator[b-4zhudwfkay] {
        display: none;
    }

    /* Buttons */
    .eu-btn[b-4zhudwfkay] {
        padding: 0.5rem;
        min-width: 36px;
    }

    .eu-btn-sm[b-4zhudwfkay] {
        padding: 0.375rem 0.5rem;
        font-size: 0.625rem;
    }

    /* Main Grid */
    .eu-main-grid[b-4zhudwfkay] {
        padding: 0.5rem;
        gap: 0.75rem;
    }

    /* Panels */
    .eu-panel-header[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-panel-title[b-4zhudwfkay] {
        font-size: 0.875rem;
        gap: 0.375rem;
    }

        .eu-panel-title i[b-4zhudwfkay] {
            font-size: 0.875rem;
        }

    .eu-panel-subtitle[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    .eu-panel-content[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    /* Search */
    .eu-search-input[b-4zhudwfkay] {
        font-size: 0.75rem;
        padding: 0.5rem 2rem 0.5rem 2rem;
    }

    .eu-search-icon[b-4zhudwfkay] {
        left: 0.75rem;
        font-size: 0.75rem;
    }

    .eu-search-clear[b-4zhudwfkay] {
        width: 24px;
        height: 24px;
        right: 0.5rem;
    }

    /* Status Tabs */
    .eu-status-tabs[b-4zhudwfkay] {
        grid-template-columns: 1fr;
        gap: 0.375rem;
        padding: 0.375rem;
    }

    .eu-status-tab[b-4zhudwfkay] {
        flex-direction: row;
        justify-content: space-between;
        padding: 0.625rem;
    }

    .eu-tab-count[b-4zhudwfkay] {
        font-size: 1.125rem;
    }

    /* Ticket Cards */
    .eu-ticket-card[b-4zhudwfkay] {
        border-radius: 8px;
    }

    .eu-ticket-header[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-ticket-number[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

    .eu-ticket-registration[b-4zhudwfkay] {
        font-size: 0.7rem;
        padding: 0.125rem 0.375rem;
    }

    .eu-status-badge[b-4zhudwfkay] {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
        min-width: 70px;
    }

    .eu-ticket-dates[b-4zhudwfkay] {
        padding: 0.625rem 0.75rem;
    }

    .eu-date-item[b-4zhudwfkay] {
        font-size: 0.7rem;
    }

    .eu-ticket-weights[b-4zhudwfkay] {
        padding: 0.625rem 0.75rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .eu-weight-item[b-4zhudwfkay] {
        padding: 0.5rem;
    }

    .eu-weight-label[b-4zhudwfkay] {
        font-size: 0.5625rem;
    }

    .eu-weight-value[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    /* Timeline */
    .eu-timeline[b-4zhudwfkay] {
        padding-left: 0.75rem;
    }

        .eu-timeline[b-4zhudwfkay]::before {
            left: 0.5rem;
            width: 1px;
        }

    .eu-timeline-marker[b-4zhudwfkay] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        left: calc(-0.75rem - 0.5rem);
        border-width: 2px;
    }

    .eu-timeline-event[b-4zhudwfkay] {
        margin-left: 1rem;
        padding: 0.75rem;
        border-radius: 8px;
    }

    .eu-timeline-title[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

    .eu-timeline-time[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    /* Process Steps */
    .eu-process-marker[b-4zhudwfkay] {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    .eu-process-label[b-4zhudwfkay] {
        font-size: 0.5625rem;
    }

    .eu-process-time[b-4zhudwfkay] {
        font-size: 0.5625rem;
    }

    /* Lab Results */
    .eu-timeline-lab[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-lab-header[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-lab-result-item[b-4zhudwfkay] {
        padding: 0.375rem;
        gap: 0.375rem;
    }

    .eu-lab-name[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    .eu-lab-value[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    /* Contract Cards */
    .eu-contract-card[b-4zhudwfkay] {
        padding: 0.875rem;
        border-radius: 8px;
    }

    .eu-contract-number[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

    .eu-contract-product[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-metric[b-4zhudwfkay] {
        padding: 0.5rem;
    }

    .eu-metric-value[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

    /* Compact Table */
    .eu-compact-table[b-4zhudwfkay] {
        min-width: 500px;
        font-size: 0.625rem;
    }

        .eu-compact-table th[b-4zhudwfkay],
        .eu-compact-table td[b-4zhudwfkay] {
            padding: 0.375rem 0.5rem;
            font-size: 0.625rem;
        }

        .eu-compact-table .eu-compact-driver[b-4zhudwfkay] {
            max-width: 80px;
        }

        .eu-compact-table .eu-compact-status[b-4zhudwfkay] {
            font-size: 0.5625rem;
            padding: 0.125rem 0.375rem;
        }

    /* Empty States */
    .eu-empty-state[b-4zhudwfkay] {
        padding: 2rem 1rem;
    }

    .eu-empty-small[b-4zhudwfkay] {
        padding: 1.5rem 0.75rem;
        min-height: 150px;
    }

    .eu-empty-icon[b-4zhudwfkay] {
        font-size: 2rem;
    }

    .eu-empty-title[b-4zhudwfkay] {
        font-size: 1rem;
    }

    .eu-empty-description[b-4zhudwfkay] {
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    /* Header */
    .eu-header[b-4zhudwfkay] {
        padding: 0.5rem;
    }

    .eu-main-title[b-4zhudwfkay] {
        font-size: 0.875rem;
    }

        .eu-main-title i[b-4zhudwfkay] {
            font-size: 0.875rem;
        }

    /* Header Actions */
    .eu-header-actions[b-4zhudwfkay] {
        flex-direction: column;
        gap: 0.375rem;
    }

    .eu-btn[b-4zhudwfkay] {
        width: 100%;
        justify-content: center;
        font-size: 0.7rem;
        padding: 0.5rem;
    }

    .eu-date-picker[b-4zhudwfkay] {
        width: 100%;
        font-size: 0.7rem;
    }

    /* Main Grid */
    .eu-main-grid[b-4zhudwfkay] {
        padding: 0.375rem;
    }

    /* Panels */
    .eu-panel-header[b-4zhudwfkay] {
        padding: 0.625rem;
    }

    .eu-panel-title[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-panel-content[b-4zhudwfkay] {
        padding: 0.625rem;
    }

    /* Search */
    .eu-search-input[b-4zhudwfkay] {
        font-size: 0.7rem;
        padding: 0.375rem 1.75rem 0.375rem 1.75rem;
    }

    .eu-search-icon[b-4zhudwfkay] {
        left: 0.625rem;
        font-size: 0.7rem;
    }

    /* Status Tabs */
    .eu-status-tab[b-4zhudwfkay] {
        padding: 0.5rem;
    }

    .eu-tab-label[b-4zhudwfkay] {
        font-size: 0.5625rem;
    }

    .eu-tab-count[b-4zhudwfkay] {
        font-size: 1rem;
    }

    /* Ticket Elements */
    .eu-ticket-number[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-ticket-registration[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    .eu-status-badge[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        min-width: 60px;
    }

    /* Timeline */
    .eu-timeline-marker[b-4zhudwfkay] {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.5rem;
    }

    /* Contract Cards */
    .eu-contract-card[b-4zhudwfkay] {
        padding: 0.75rem;
    }

    .eu-contract-number[b-4zhudwfkay] {
        font-size: 0.75rem;
    }

    .eu-contract-status[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Compact Table */
    .eu-compact-table[b-4zhudwfkay] {
        min-width: 400px;
    }

        .eu-compact-table th[b-4zhudwfkay],
        .eu-compact-table td[b-4zhudwfkay] {
            padding: 0.25rem 0.375rem;
            font-size: 0.5625rem;
        }

    .eu-compact-ticket-number[b-4zhudwfkay] {
        font-size: 0.625rem;
    }

    .eu-compact-registration[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.25rem;
    }

    .eu-compact-lab-indicator[b-4zhudwfkay] {
        width: 18px;
        height: 18px;
        font-size: 0.5rem;
    }

    /* Loading States */
    .eu-loading-spinner[b-4zhudwfkay] {
        width: 60px;
        height: 60px;
    }

    .eu-loading-text[b-4zhudwfkay] {
        font-size: 0.875rem;
    }
}

/* ====== Print Styles ====== */
@media print {
    .eu-dashboard[b-4zhudwfkay] {
        background: white;
        color: black;
    }

    .eu-header-actions[b-4zhudwfkay],
    .eu-search-filter-section[b-4zhudwfkay],
    .eu-status-tabs[b-4zhudwfkay],
    .eu-compact-toggle[b-4zhudwfkay],
    .eu-panel-actions[b-4zhudwfkay] {
        display: none !important;
    }

    .eu-ticket-card[b-4zhudwfkay],
    .eu-contract-card[b-4zhudwfkay],
    .eu-timeline-event[b-4zhudwfkay] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .eu-main-grid[b-4zhudwfkay] {
        grid-template-columns: 1fr;
    }
}

/* ====== Accessibility ====== */
@media (prefers-reduced-motion: reduce) {
    .eu-spin[b-4zhudwfkay],
    .eu-urgent-pulse[b-4zhudwfkay],
    .eu-process-pulse[b-4zhudwfkay],
    .eu-urgent-blink[b-4zhudwfkay],
    .eu-shimmer[b-4zhudwfkay] {
        animation: none;
    }

    .eu-ticket-card[b-4zhudwfkay],
    .eu-contract-card[b-4zhudwfkay],
    .eu-timeline-event[b-4zhudwfkay],
    .eu-status-tab[b-4zhudwfkay],
    .eu-btn[b-4zhudwfkay] {
        transition: none;
    }

        .eu-btn:hover:not(:disabled)[b-4zhudwfkay],
        .eu-compact-toggle:hover[b-4zhudwfkay],
        .eu-status-tab:hover[b-4zhudwfkay] {
            transform: none;
        }
}

/* ====== High Contrast Mode ====== */
@media (prefers-contrast: high) {
    .eu-ticket-card[b-4zhudwfkay],
    .eu-contract-card[b-4zhudwfkay],
    .eu-timeline-event[b-4zhudwfkay] {
        border-width: 2px;
    }

    .eu-status-badge[b-4zhudwfkay],
    .eu-urgent-badge[b-4zhudwfkay],
    .eu-contract-status[b-4zhudwfkay] {
        border-width: 2px;
    }

    .eu-btn[b-4zhudwfkay] {
        border-width: 2px;
    }

    .eu-search-input[b-4zhudwfkay],
    .eu-contract-filter[b-4zhudwfkay],
    .eu-date-picker[b-4zhudwfkay] {
        border-width: 2px;
    }
}

/* ====== Dark Mode Enhancements ====== */
@media (prefers-color-scheme: dark) {
    .eu-ticket-card:hover[b-4zhudwfkay],
    .eu-contract-card:hover[b-4zhudwfkay],
    .eu-timeline-event:hover[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.08) 100%);
    }

    .eu-ticket-card[b-4zhudwfkay]::before,
    .eu-contract-card[b-4zhudwfkay]::before {
        opacity: 0.9;
    }

    .eu-loading-spinner[b-4zhudwfkay]::before,
    .eu-loading-spinner[b-4zhudwfkay]::after {
        opacity: 0.9;
    }

    .eu-empty-state[b-4zhudwfkay] {
        background-color: rgba(var(--subtle-bg-rgb), 0.5);
    }
}

/* Queue Position Indicators - Premium Themed Version for Majesty Portal */

/* Base queue indicator styling using theme variables */
.eu-queue-indicator[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    cursor: help;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 50;
}

    .eu-queue-indicator:hover[b-4zhudwfkay] {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
    }

    .eu-queue-indicator.eu-queue-next[b-4zhudwfkay] {
        background: var(--success-light);
        border-color: rgba(var(--success-rgb), 0.3);
        color: var(--success);
        animation: eu-queue-pulse-b-4zhudwfkay 2s infinite;
    }

        .eu-queue-indicator.eu-queue-next:hover[b-4zhudwfkay] {
            background: rgba(var(--success-rgb), 0.2);
            border-color: var(--success);
            box-shadow: 0 2px 8px rgba(var(--success-rgb), 0.2);
        }

    .eu-queue-indicator i[b-4zhudwfkay] {
        font-size: 0.625rem;
        opacity: 0.8;
    }
.eu-queue-indicator[b-4zhudwfkay] {
    background: var(--body-bg) !important;
}
    /* Queue badge for compact status column */
    .eu-queue-badge[b-4zhudwfkay] {
        display: inline-block;
        margin-left: 0.5rem;
        padding: 0.125rem 0.5rem;
        background: var(--body-bg) !important;
        color: var(--primary);
        border-radius: 12px;
        font-size: 0.625rem;
        font-weight: 600;
        white-space: nowrap;
        border: 1px solid rgba(var(--primary-rgb), 0.15);
        cursor: help;
        transition: all 0.2s ease;
    }

    .eu-queue-badge:hover[b-4zhudwfkay] {
        background: rgba(var(--primary-rgb), 0.15);
        transform: translateY(-1px);
    }

    .eu-queue-badge.eu-queue-next[b-4zhudwfkay] {
        background: var(--success-light);
        border-color: rgba(var(--success-rgb), 0.2);
        color: var(--success);
        font-weight: 700;
    }

/* Card view queue position badge */
.eu-queue-position-badge[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .eu-queue-position-badge:hover[b-4zhudwfkay] {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.1) 100%);
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.2);
    }

    .eu-queue-position-badge.eu-queue-next[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.05) 100%);
        border-color: rgba(var(--success-rgb), 0.3);
        color: var(--success);
        animation: eu-queue-pulse-b-4zhudwfkay 2s infinite;
    }

        .eu-queue-position-badge.eu-queue-next:hover[b-4zhudwfkay] {
            background: linear-gradient(135deg, rgba(var(--success-rgb), 0.2) 0%, rgba(var(--success-rgb), 0.1) 100%);
            border-color: var(--success);
            box-shadow: 0 3px 12px rgba(var(--success-rgb), 0.25);
        }

/* Timeline view queue indicator */
.eu-queue-indicator-timeline[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .eu-queue-indicator-timeline:hover[b-4zhudwfkay] {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.1) 100%);
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
    }

    .eu-queue-indicator-timeline.eu-queue-next[b-4zhudwfkay] {
        background: linear-gradient(135deg, var(--success-light) 0%, rgba(var(--success-rgb), 0.05) 100%);
        border-color: rgba(var(--success-rgb), 0.3);
        color: var(--success);
        animation: eu-queue-pulse-b-4zhudwfkay 2s infinite;
    }

        .eu-queue-indicator-timeline.eu-queue-next:hover[b-4zhudwfkay] {
            background: linear-gradient(135deg, rgba(var(--success-rgb), 0.2) 0%, rgba(var(--success-rgb), 0.1) 100%);
            border-color: var(--success);
            box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.25);
        }

    .eu-queue-indicator-timeline i[b-4zhudwfkay] {
        font-size: 0.75rem;
        opacity: 0.8;
    }

/* Product-specific queue styling */
.eu-queue-product[b-4zhudwfkay] {
    background: linear-gradient(135deg, var(--secondary-light) 0%, rgba(var(--secondary-rgb), 0.05) 100%);
    border-color: rgba(var(--secondary-rgb), 0.2);
    color: var(--secondary);
}

    .eu-queue-product:hover[b-4zhudwfkay] {
        background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.15) 0%, rgba(var(--secondary-rgb), 0.1) 100%);
        border-color: var(--secondary);
        box-shadow: 0 3px 12px rgba(var(--secondary-rgb), 0.2);
    }

/* Enhanced pulse animation using theme colors */
@keyframes eu-queue-pulse-b-4zhudwfkay {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--success-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
    }
}

/* Adjust spacing in status cells when queue indicator is present */
.eu-status-cell[b-4zhudwfkay] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.eu-compact-status[b-4zhudwfkay] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Dark mode enhancements */
[class*="-dark"] .eu-queue-indicator[b-4zhudwfkay],
[class*="-dark"] .eu-queue-badge[b-4zhudwfkay],
[class*="-dark"] .eu-queue-position-badge[b-4zhudwfkay],
[class*="-dark"] .eu-queue-indicator-timeline[b-4zhudwfkay] {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
}

    [class*="-dark"] .eu-queue-indicator:hover[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-badge:hover[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-position-badge:hover[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-indicator-timeline:hover[b-4zhudwfkay] {
        background: rgba(var(--primary-rgb), 0.25);
        border-color: var(--primary);
    }

    [class*="-dark"] .eu-queue-indicator.eu-queue-next[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-badge.eu-queue-next[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-position-badge.eu-queue-next[b-4zhudwfkay],
    [class*="-dark"] .eu-queue-indicator-timeline.eu-queue-next[b-4zhudwfkay] {
        background: rgba(var(--success-rgb), 0.15);
        border-color: rgba(var(--success-rgb), 0.3);
    }

        [class*="-dark"] .eu-queue-indicator.eu-queue-next:hover[b-4zhudwfkay],
        [class*="-dark"] .eu-queue-badge.eu-queue-next:hover[b-4zhudwfkay],
        [class*="-dark"] .eu-queue-position-badge.eu-queue-next:hover[b-4zhudwfkay],
        [class*="-dark"] .eu-queue-indicator-timeline.eu-queue-next:hover[b-4zhudwfkay] {
            background: rgba(var(--success-rgb), 0.25);
            border-color: var(--success);
        }

/* Responsive adjustments matching your breakpoints */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay] {
        font-size: 0.625rem;
        padding: 0.125rem 0.5rem;
    }

    .eu-queue-position-badge[b-4zhudwfkay] {
        font-size: 0.7rem;
        padding: 0.25rem 0.625rem;
    }

    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay] {
        margin-left: 0.375rem;
    }

    .eu-queue-position-badge[b-4zhudwfkay],
    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        margin-left: 0.5rem;
    }
}

/* Large Mobile */
@media (max-width: 768px) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        gap: 0.25rem;
    }

    .eu-queue-position-badge[b-4zhudwfkay] {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }

    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        font-size: 0.7rem;
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
    }

    .eu-queue-indicator i[b-4zhudwfkay],
    .eu-queue-badge i[b-4zhudwfkay] {
        font-size: 0.5rem;
    }

    .eu-queue-position-badge i[b-4zhudwfkay],
    .eu-queue-indicator-timeline i[b-4zhudwfkay] {
        font-size: 0.625rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay] {
        font-size: 0.5rem;
        padding: 0.125rem 0.25rem;
        margin-left: 0.25rem;
        border-radius: 10px;
    }

    .eu-queue-position-badge[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        margin-left: 0.375rem;
        border-radius: 12px;
    }

    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
        margin-left: 0.5rem;
        border-radius: 14px;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay],
    .eu-queue-position-badge[b-4zhudwfkay],
    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        letter-spacing: normal;
    }

    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay] {
        font-size: 0.4375rem;
        padding: 2px 6px;
    }

    .eu-queue-position-badge[b-4zhudwfkay] {
        font-size: 0.5rem;
        padding: 3px 8px;
    }

    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        font-size: 0.5625rem;
        padding: 4px 10px;
    }

        .eu-queue-indicator i[b-4zhudwfkay],
        .eu-queue-badge i[b-4zhudwfkay],
        .eu-queue-position-badge i[b-4zhudwfkay],
        .eu-queue-indicator-timeline i[b-4zhudwfkay] {
            display: none;
        }
}

/* High Contrast Mode adjustments */
@media (prefers-contrast: high) {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay],
    .eu-queue-position-badge[b-4zhudwfkay],
    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        border-width: 2px;
        font-weight: 800;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .eu-queue-indicator.eu-queue-next[b-4zhudwfkay],
    .eu-queue-badge.eu-queue-next[b-4zhudwfkay],
    .eu-queue-position-badge.eu-queue-next[b-4zhudwfkay],
    .eu-queue-indicator-timeline.eu-queue-next[b-4zhudwfkay] {
        animation: none;
    }
}

/* Premium Tooltip Styling - Enhanced Professional Design */
.eu-queue-indicator[b-4zhudwfkay],
.eu-queue-badge[b-4zhudwfkay],
.eu-queue-position-badge[b-4zhudwfkay],
.eu-queue-indicator-timeline[b-4zhudwfkay] {
    position: relative;
}

    /* Remove default browser tooltip */
    .eu-queue-indicator[title][b-4zhudwfkay],
    .eu-queue-badge[title][b-4zhudwfkay],
    .eu-queue-position-badge[title][b-4zhudwfkay],
    .eu-queue-indicator-timeline[title][b-4zhudwfkay] {
        position: relative;
    }

    /* Custom tooltip implementation with professional design */
    .eu-queue-indicator[b-4zhudwfkay]::after,
    .eu-queue-badge[b-4zhudwfkay]::after,
    .eu-queue-position-badge[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        padding: 1rem 1.25rem;
        background: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.6125rem;
        font-weight: 500;
        font-family: var(--font-sans);
        white-space: normal;
        border-radius: var(--border-radius-lg);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        z-index: var(--z-tooltip);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border-divider);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        letter-spacing: 0.01em;
        text-transform: none;
        line-height: 1.5;
        min-width: 200px;
        max-width: 320px;
        text-align: center;
    }

    /* Tooltip arrow with better design */
    .eu-queue-indicator[b-4zhudwfkay]::before,
    .eu-queue-badge[b-4zhudwfkay]::before,
    .eu-queue-position-badge[b-4zhudwfkay]::before,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid var(--content-bg);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        z-index: calc(var(--z-tooltip) + 1);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Inner arrow for border effect */
    .eu-queue-indicator:hover[b-4zhudwfkay]::after,
    .eu-queue-badge:hover[b-4zhudwfkay]::after,
    .eu-queue-position-badge:hover[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline:hover[b-4zhudwfkay]::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        padding: 1rem 1.25rem;
        background: var(--content-bg);
        color: var(--text-primary);
        font-size: 0.6125rem;
        font-weight: 500;
        font-family: var(--font-sans);
        white-space: normal;
        border-radius: var(--border-radius-lg);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        z-index: var(--z-tooltip);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border-divider);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        letter-spacing: 0.01em;
        text-transform: none;
        line-height: 1.5;
        min-width: 200px;
        max-width: 320px;
        text-align: center;
    }

    /* Show tooltip on hover with smooth animation */
    .eu-queue-indicator:hover[b-4zhudwfkay]::after,
    .eu-queue-badge:hover[b-4zhudwfkay]::after,
    .eu-queue-position-badge:hover[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline:hover[b-4zhudwfkay]::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .eu-queue-indicator:hover[b-4zhudwfkay]::before,
    .eu-queue-badge:hover[b-4zhudwfkay]::before,
    .eu-queue-position-badge:hover[b-4zhudwfkay]::before,
    .eu-queue-indicator-timeline:hover[b-4zhudwfkay]::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* Enhanced styling for longer queue descriptions */
    .eu-queue-indicator:has(+ .eu-queue-product)[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline.eu-queue-product[b-4zhudwfkay]::after {
        min-width: 260px;
    }

/* Dark mode tooltip styling with glass effect */
[class*="-dark"] .eu-queue-indicator[b-4zhudwfkay]::after,
[class*="-dark"] .eu-queue-badge[b-4zhudwfkay]::after,
[class*="-dark"] .eu-queue-position-badge[b-4zhudwfkay]::after,
[class*="-dark"] .eu-queue-indicator-timeline[b-4zhudwfkay]::after {
    background: rgba(var(--subtle-bg-rgb), 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

[class*="-dark"] .eu-queue-indicator[b-4zhudwfkay]::before,
[class*="-dark"] .eu-queue-badge[b-4zhudwfkay]::before,
[class*="-dark"] .eu-queue-position-badge[b-4zhudwfkay]::before,
[class*="-dark"] .eu-queue-indicator-timeline[b-4zhudwfkay]::before {
    border-top-color: rgba(var(--subtle-bg-rgb), 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Enhanced tooltip for "Next" indicators with special styling */
.eu-queue-indicator.eu-queue-next[b-4zhudwfkay]::after,
.eu-queue-badge.eu-queue-next[b-4zhudwfkay]::after,
.eu-queue-position-badge.eu-queue-next[b-4zhudwfkay]::after,
.eu-queue-indicator-timeline.eu-queue-next[b-4zhudwfkay]::after {
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--success-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--success-rgb), 0.2);
    box-shadow: 0 8px 32px rgba(var(--success-rgb), 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.eu-queue-indicator.eu-queue-next[b-4zhudwfkay]::before,
.eu-queue-badge.eu-queue-next[b-4zhudwfkay]::before,
.eu-queue-position-badge.eu-queue-next[b-4zhudwfkay]::before,
.eu-queue-indicator-timeline.eu-queue-next[b-4zhudwfkay]::before {
    border-top-color: var(--content-bg);
}

/* Tooltip position adjustments for edge cases */
@media (min-width: 769px) {
    /* Position tooltip above with more space on desktop */
    .eu-queue-indicator[b-4zhudwfkay]::after,
    .eu-queue-badge[b-4zhudwfkay]::after,
    .eu-queue-position-badge[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::after {
        bottom: calc(100% + 20px);
    }

    .eu-queue-indicator[b-4zhudwfkay]::before,
    .eu-queue-badge[b-4zhudwfkay]::before,
    .eu-queue-position-badge[b-4zhudwfkay]::before,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::before {
        bottom: calc(100% + 10px);
    }
}

@media (max-width: 768px) {
    .eu-queue-indicator[b-4zhudwfkay]::after,
    .eu-queue-badge[b-4zhudwfkay]::after,
    .eu-queue-position-badge[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::after {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
        min-width: 180px;
        max-width: 280px;
    }
}

/* Prevent tooltip cutoff at screen edges */
.eu-ticket-header .eu-queue-indicator[b-4zhudwfkay]::after,
.eu-ticket-header .eu-queue-badge[b-4zhudwfkay]::after,
.eu-ticket-header .eu-queue-position-badge[b-4zhudwfkay]::after {
    left: auto;
    right: -10px;
    transform: translateX(0) translateY(10px);
}

.eu-ticket-header .eu-queue-indicator:hover[b-4zhudwfkay]::after,
.eu-ticket-header .eu-queue-badge:hover[b-4zhudwfkay]::after,
.eu-ticket-header .eu-queue-position-badge:hover[b-4zhudwfkay]::after {
    transform: translateX(0) translateY(0);
}

.eu-ticket-header .eu-queue-indicator[b-4zhudwfkay]::before,
.eu-ticket-header .eu-queue-badge[b-4zhudwfkay]::before,
.eu-ticket-header .eu-queue-position-badge[b-4zhudwfkay]::before {
    left: auto;
    right: 20px;
    transform: translateX(0) translateY(10px);
}

.eu-ticket-header .eu-queue-indicator:hover[b-4zhudwfkay]::before,
.eu-ticket-header .eu-queue-badge:hover[b-4zhudwfkay]::before,
.eu-ticket-header .eu-queue-position-badge:hover[b-4zhudwfkay]::before {
    transform: translateX(0) translateY(0);
}

/* Special positioning for table cells */
.eu-compact-table td .eu-queue-indicator[b-4zhudwfkay]::after,
.eu-compact-table td .eu-queue-badge[b-4zhudwfkay]::after {
    bottom: calc(100% + 12px);
    max-width: 280px;
}

/* Animations for smooth appearance */
@keyframes tooltipFadeIn-b-4zhudwfkay {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .eu-queue-indicator[b-4zhudwfkay]::after,
    .eu-queue-badge[b-4zhudwfkay]::after,
    .eu-queue-position-badge[b-4zhudwfkay]::after,
    .eu-queue-indicator-timeline[b-4zhudwfkay]::after {
        border-width: 2px;
        font-weight: 600;
    }
}

/* Print styles */
@media print {
    .eu-queue-indicator[b-4zhudwfkay],
    .eu-queue-badge[b-4zhudwfkay],
    .eu-queue-position-badge[b-4zhudwfkay],
    .eu-queue-indicator-timeline[b-4zhudwfkay] {
        background: none !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
    }

        .eu-queue-indicator[b-4zhudwfkay]::after,
        .eu-queue-badge[b-4zhudwfkay]::after,
        .eu-queue-position-badge[b-4zhudwfkay]::after,
        .eu-queue-indicator-timeline[b-4zhudwfkay]::after,
        .eu-queue-indicator[b-4zhudwfkay]::before,
        .eu-queue-badge[b-4zhudwfkay]::before,
        .eu-queue-position-badge[b-4zhudwfkay]::before,
        .eu-queue-indicator-timeline[b-4zhudwfkay]::before {
            display: none !important;
        }
}
/* _content/MajestyPortal/Components/Pages/Legacy/TicketDetailsModal.razor.rz.scp.css */
/* ====== Ticket Details Modal Component Styles (eu-td-*) ====== */

/* ====== Modal Container ====== */
.eu-td-modal-overlay[b-i49hnb0wla] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--spacing-4);
}

.eu-td-modal-visible[b-i49hnb0wla] {
    opacity: 1;
    visibility: visible;
}

.eu-td-modal-content[b-i49hnb0wla] {
    background: var(--content-bg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-divider);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-td-modal-visible .eu-td-modal-content[b-i49hnb0wla] {
    transform: scale(1) translateY(0);
}

/* ====== Modal Header ====== */
.eu-td-modal-header[b-i49hnb0wla] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    position: relative;
}

    .eu-td-modal-header[b-i49hnb0wla]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.eu-td-header-main[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.eu-td-status-indicator[b-i49hnb0wla] {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    border: 2px solid;
}

.eu-td-status-info[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
}

.eu-td-status-warning[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

.eu-td-status-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.eu-td-status-primary[b-i49hnb0wla] {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.eu-td-status-secondary[b-i49hnb0wla] {
    background: var(--subtle-bg);
    color: var(--text-secondary);
    border-color: var(--border-divider);
}

.eu-td-title-section[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
}

.eu-td-modal-title[b-i49hnb0wla] {
    margin: 0 0 var(--spacing-1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.eu-td-title-main[b-i49hnb0wla] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-td-title-sub[b-i49hnb0wla] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-mono);
}

.eu-td-ticket-meta[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
}

.eu-td-contract-ref[b-i49hnb0wla] {
    background: var(--secondary-light);
    color: var(--secondary);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 10px;
}

.eu-td-separator[b-i49hnb0wla] {
    color: var(--text-muted);
    font-weight: 300;
}

.eu-td-status-text[b-i49hnb0wla] {
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-td-urgent-flag[b-i49hnb0wla] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--warning-light);
    color: var(--warning);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 10px;
    border: 1px solid var(--warning);
}

.eu-td-header-actions[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.eu-td-modal-close[b-i49hnb0wla] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.1rem;
}

    .eu-td-modal-close:hover[b-i49hnb0wla] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
        transform: scale(1.05);
    }

/* ====== Modal Body ====== */
.eu-td-modal-body[b-i49hnb0wla] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .eu-td-modal-body[b-i49hnb0wla]::-webkit-scrollbar {
        width: 6px;
    }

    .eu-td-modal-body[b-i49hnb0wla]::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 3px;
    }

        .eu-td-modal-body[b-i49hnb0wla]::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

/* ====== Metrics Hero ====== */
.eu-td-metrics-hero[b-i49hnb0wla] {
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-4);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-4);
    align-items: center;
}

.eu-td-metrics-simple[b-i49hnb0wla] {
    grid-template-columns: auto auto;
    justify-content: center;
}

.eu-td-primary-metric[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--primary-light);
    border-radius: var(--border-radius-md);
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    min-width: 220px;
}

.eu-td-metrics-simple .eu-td-primary-metric[b-i49hnb0wla] {
    min-width: 240px;
}

.eu-td-primary-metric .eu-td-metric-icon[b-i49hnb0wla] {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.eu-td-primary-metric .eu-td-metric-content[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
}

.eu-td-primary-metric .eu-td-metric-value[b-i49hnb0wla] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.eu-td-primary-metric .eu-td-metric-label[b-i49hnb0wla] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.eu-td-metric-detail[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-td-secondary-metrics[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-3);
}

.eu-td-metric-card[b-i49hnb0wla] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-td-metric-card:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

    .eu-td-metric-card .eu-td-metric-icon[b-i49hnb0wla] {
        width: 32px;
        height: 32px;
        border-radius: var(--border-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

.eu-td-metric-info[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
}

.eu-td-metric-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
}

.eu-td-metric-warning[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-td-metric-primary[b-i49hnb0wla] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-td-metric-card .eu-td-metric-content[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
}

.eu-td-metric-card .eu-td-metric-value[b-i49hnb0wla] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

.eu-td-metric-card .eu-td-metric-label[b-i49hnb0wla] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ====== Section Titles ====== */
.eu-td-section-title[b-i49hnb0wla] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .eu-td-section-title i[b-i49hnb0wla] {
        color: var(--primary);
        font-size: var(--font-size-sm);
    }

/* ====== Timeline Section ====== */
.eu-td-timeline-section[b-i49hnb0wla] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-td-timeline[b-i49hnb0wla] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.eu-td-timeline-item[b-i49hnb0wla] {
    position: relative;
    display: flex;
    gap: var(--spacing-3);
    animation: eu-td-fade-in-up-b-i49hnb0wla 0.4s ease-out both;
}

    .eu-td-timeline-item:nth-child(1)[b-i49hnb0wla] {
        animation-delay: 0.1s;
    }

    .eu-td-timeline-item:nth-child(2)[b-i49hnb0wla] {
        animation-delay: 0.2s;
    }

    .eu-td-timeline-item:nth-child(3)[b-i49hnb0wla] {
        animation-delay: 0.3s;
    }

    .eu-td-timeline-item:nth-child(4)[b-i49hnb0wla] {
        animation-delay: 0.4s;
    }

    .eu-td-timeline-item:nth-child(5)[b-i49hnb0wla] {
        animation-delay: 0.5s;
    }

@keyframes eu-td-fade-in-up-b-i49hnb0wla {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eu-td-timeline-marker[b-i49hnb0wla] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 2;
    transition: var(--hover-transition);
    box-shadow: var(--shadow-sm);
    border: 3px solid;
    position: relative;
}

.eu-td-marker-primary[b-i49hnb0wla] {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.eu-td-marker-info[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
}

.eu-td-marker-warning[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

.eu-td-marker-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.eu-td-completed .eu-td-timeline-marker[b-i49hnb0wla] {
    background: var(--success);
    color: white;
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.2);
}

.eu-td-current .eu-td-timeline-marker[b-i49hnb0wla] {
    background: var(--warning);
    color: white;
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.2);
    animation: eu-td-pulse-b-i49hnb0wla 2s infinite;
}

.eu-td-pending .eu-td-timeline-marker[b-i49hnb0wla] {
    background: var(--subtle-bg);
    color: var(--text-muted);
    border-color: var(--border-divider);
}

@keyframes eu-td-pulse-b-i49hnb0wla {
    0% {
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0);
    }
}

.eu-td-timeline-content[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: var(--hover-transition);
}

    .eu-td-timeline-content:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-td-timeline-header[b-i49hnb0wla] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-td-timeline-title[b-i49hnb0wla] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.eu-td-timeline-time[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.eu-td-timeline-details[b-i49hnb0wla] {
    padding: var(--spacing-3);
}

.eu-td-detail-grid[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-2);
}

.eu-td-weight-summary[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.eu-td-weight-row[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-2);
}

/* ====== Detail Items ====== */
.eu-td-detail-item[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eu-td-detail-label[b-i49hnb0wla] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eu-td-detail-value[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.eu-td-detail-highlight .eu-td-detail-value[b-i49hnb0wla] {
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-mono);
}

.eu-td-detail-primary .eu-td-detail-value[b-i49hnb0wla] {
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

.eu-td-detail-warning .eu-td-detail-value[b-i49hnb0wla] {
    color: var(--warning);
    font-weight: 600;
}

.eu-td-text-muted[b-i49hnb0wla] {
    color: var(--text-muted) !important;
    font-style: italic;
}

/* ====== Current Status Styles ====== */
.eu-td-current-status[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: linear-gradient(135deg, var(--warning-light) 0%, rgba(var(--warning-rgb), 0.1) 100%);
    border: 1px solid var(--warning);
    border-radius: var(--border-radius-md);
    color: var(--warning);
    font-weight: 500;
    font-size: var(--font-size-xs);
}

    .eu-td-current-status i[b-i49hnb0wla] {
        font-size: var(--font-size-sm);
        animation: eu-td-spin-b-i49hnb0wla 1.5s linear infinite;
    }

.eu-td-pending-status[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--subtle-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-size-xs);
}

/* ====== Loading Progress Styles ====== */
.eu-td-loading-progress[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: linear-gradient(135deg, var(--info-light) 0%, rgba(var(--info-rgb), 0.05) 100%);
    border: 1px solid var(--info);
    border-radius: var(--border-radius-md);
    color: var(--info);
}

    .eu-td-loading-progress > span:first-of-type[b-i49hnb0wla] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-weight: 600;
        font-size: var(--font-size-sm);
    }

        .eu-td-loading-progress > span:first-of-type i[b-i49hnb0wla] {
            font-size: var(--font-size-base);
        }

.eu-td-loading-time[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-1);
}

    .eu-td-loading-time span[b-i49hnb0wla] {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        font-weight: 500;
        font-family: var(--font-mono);
    }

.eu-td-loading-complete[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--success-light);
    border: 1px solid var(--success);
    border-radius: var(--border-radius-md);
    color: var(--success);
    font-weight: 500;
    font-size: var(--font-size-xs);
}

/* ====== Urgent Indicator ====== */
.eu-td-urgent-indicator[b-i49hnb0wla] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-left: var(--spacing-2);
    color: var(--warning);
    font-weight: 600;
    font-size: 10px;
    animation: eu-td-urgent-pulse-b-i49hnb0wla 2s infinite;
}

@keyframes eu-td-urgent-pulse-b-i49hnb0wla {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ====== Lab Results Styles ====== */
.eu-td-icon-lab[b-i49hnb0wla] {
    background: var(--secondary-light);
    color: var(--secondary);
}

.eu-td-lab-results-grid[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.eu-td-lab-result-card[b-i49hnb0wla] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-td-lab-result-card:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-td-lab-result-icon[b-i49hnb0wla] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background: var(--secondary-light);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.eu-td-lab-result-content[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.eu-td-lab-result-name[b-i49hnb0wla] {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.eu-td-lab-result-value[b-i49hnb0wla] {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-mono);
}

/* ====== Weight Display Styles ====== */
.eu-td-weight-display[b-i49hnb0wla] {
    margin-bottom: var(--spacing-3);
}

.eu-td-weight-card[b-i49hnb0wla] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-td-weight-card:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-td-weight-icon[b-i49hnb0wla] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--info-light);
    color: var(--info);
}

.eu-td-icon-info[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
}

.eu-td-icon-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
}

.eu-td-icon-warning[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-td-icon-primary[b-i49hnb0wla] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-td-weight-info[b-i49hnb0wla] {
    flex: 1;
    min-width: 0;
}

.eu-td-weight-label[b-i49hnb0wla] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.eu-td-weight-value[b-i49hnb0wla] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.eu-td-weight-grid[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-2);
}

.eu-td-weight-final[b-i49hnb0wla] {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
}

/* ====== Details Section ====== */
.eu-td-details-section[b-i49hnb0wla] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-td-details-grid[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-3);
}

.eu-td-info-card[b-i49hnb0wla] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-td-info-card:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-td-card-header[b-i49hnb0wla] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-td-card-icon[b-i49hnb0wla] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-td-icon-primary[b-i49hnb0wla] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-td-icon-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
}

.eu-td-icon-warning[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-td-icon-info[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
}

.eu-td-card-title[b-i49hnb0wla] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-td-card-content[b-i49hnb0wla] {
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.eu-td-card-full-width[b-i49hnb0wla] {
    grid-column: 1 / -1;
}

/* ====== Performance Section ====== */
.eu-td-performance-section[b-i49hnb0wla] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-td-performance-grid[b-i49hnb0wla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.eu-td-performance-card[b-i49hnb0wla] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-td-performance-card:hover[b-i49hnb0wla] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-td-performance-header[b-i49hnb0wla] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-td-performance-icon[b-i49hnb0wla] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-td-performance-excellent[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
}

.eu-td-performance-good[b-i49hnb0wla] {
    background: var(--info-light);
    color: var(--info);
}

.eu-td-performance-average[b-i49hnb0wla] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-td-performance-poor[b-i49hnb0wla] {
    background: var(--danger-light);
    color: var(--danger);
}

.eu-td-performance-time[b-i49hnb0wla] {
    background: var(--secondary-light);
    color: var(--secondary);
}

.eu-td-performance-success[b-i49hnb0wla] {
    background: var(--success-light);
    color: var(--success);
}

.eu-td-performance-header h4[b-i49hnb0wla] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-td-performance-content[b-i49hnb0wla] {
    padding: var(--spacing-3);
    text-align: center;
}

.eu-td-performance-value[b-i49hnb0wla] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-1);
    font-family: var(--font-mono);
}

.eu-td-performance-description[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-bottom: var(--spacing-1);
}

.eu-td-performance-good[b-i49hnb0wla] {
    color: var(--success);
}

.eu-td-performance-normal[b-i49hnb0wla] {
    color: var(--info);
}

.eu-td-performance-warning[b-i49hnb0wla] {
    color: var(--warning);
}

/* ====== Completion Status Styles ====== */
.eu-td-completion-summary[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.eu-td-completion-badge[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--success-light);
    border: 1px solid var(--success);
    border-radius: var(--border-radius-md);
    color: var(--success);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.eu-td-completion-stats[b-i49hnb0wla] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.eu-td-completion-stat[b-i49hnb0wla] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-divider);
}

    .eu-td-completion-stat:last-child[b-i49hnb0wla] {
        border-bottom: none;
    }

.eu-td-stat-label[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
}

.eu-td-stat-value[b-i49hnb0wla] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-mono);
}

/* ====== Buttons ====== */
.eu-td-btn[b-i49hnb0wla] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
}

    .eu-td-btn:hover:not(:disabled)[b-i49hnb0wla] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .eu-td-btn:disabled[b-i49hnb0wla] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.eu-td-btn-primary[b-i49hnb0wla] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

    .eu-td-btn-primary:hover:not(:disabled)[b-i49hnb0wla] {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: white;
    }

.eu-td-btn-secondary[b-i49hnb0wla] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .eu-td-btn-secondary:hover:not(:disabled)[b-i49hnb0wla] {
        background: var(--border-divider);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

.eu-td-btn-ghost[b-i49hnb0wla] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-divider);
}

    .eu-td-btn-ghost:hover:not(:disabled)[b-i49hnb0wla] {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

/* ====== Modal Footer ====== */
.eu-td-modal-footer[b-i49hnb0wla] {
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
}

.eu-td-footer-info[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
}

.eu-td-status-summary[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
}

.eu-td-footer-info .eu-td-status-indicator[b-i49hnb0wla] {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
}

.eu-td-duration-text[b-i49hnb0wla] {
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-td-urgent-badge[b-i49hnb0wla] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--warning-light);
    color: var(--warning);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 10px;
    border: 1px solid var(--warning);
    animation: eu-td-urgent-pulse-b-i49hnb0wla 2s infinite;
}

.eu-td-footer-actions[b-i49hnb0wla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* ====== Animations ====== */
@keyframes eu-td-spin-b-i49hnb0wla {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Responsive Design ====== */
@media (max-width: 992px) {
    .eu-td-modal-overlay[b-i49hnb0wla] {
        padding: var(--spacing-2);
    }

    .eu-td-modal-content[b-i49hnb0wla] {
        max-width: 95vw;
        max-height: 90vh;
    }

    .eu-td-modal-header[b-i49hnb0wla] {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .eu-td-header-main[b-i49hnb0wla] {
        gap: var(--spacing-2);
    }

    .eu-td-status-indicator[b-i49hnb0wla] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .eu-td-modal-body[b-i49hnb0wla] {
        padding: var(--spacing-3);
    }

    .eu-td-metrics-hero[b-i49hnb0wla] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-3);
    }

    .eu-td-primary-metric[b-i49hnb0wla] {
        min-width: auto;
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }

    .eu-td-metrics-simple .eu-td-primary-metric[b-i49hnb0wla] {
        min-width: auto;
    }

    .eu-td-secondary-metrics[b-i49hnb0wla] {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .eu-td-details-grid[b-i49hnb0wla] {
        grid-template-columns: 1fr;
    }

    .eu-td-detail-grid[b-i49hnb0wla] {
        grid-template-columns: 1fr;
    }

    .eu-td-weight-row[b-i49hnb0wla] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .eu-td-modal-overlay[b-i49hnb0wla] {
        padding: var(--spacing-1);
    }

    .eu-td-modal-content[b-i49hnb0wla] {
        border-radius: var(--border-radius-md);
    }

    .eu-td-modal-header[b-i49hnb0wla] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-td-header-main[b-i49hnb0wla] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .eu-td-title-main[b-i49hnb0wla] {
        font-size: var(--font-size-base);
    }

    .eu-td-ticket-meta[b-i49hnb0wla] {
        justify-content: center;
    }

    .eu-td-header-actions[b-i49hnb0wla] {
        align-self: flex-end;
        position: absolute;
        top: var(--spacing-2);
        right: var(--spacing-3);
    }

    .eu-td-modal-body[b-i49hnb0wla] {
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }

    .eu-td-metrics-hero[b-i49hnb0wla] {
        padding: var(--spacing-3);
    }

    .eu-td-primary-metric .eu-td-metric-icon[b-i49hnb0wla] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .eu-td-primary-metric .eu-td-metric-value[b-i49hnb0wla] {
        font-size: 1.5rem;
    }

    .eu-td-timeline-marker[b-i49hnb0wla] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-td-timeline-header[b-i49hnb0wla] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }

    .eu-td-modal-footer[b-i49hnb0wla] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-td-status-summary[b-i49hnb0wla] {
        justify-content: center;
    }

    .eu-td-footer-actions[b-i49hnb0wla] {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .eu-td-status-indicator[b-i49hnb0wla] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-td-title-main[b-i49hnb0wla] {
        font-size: var(--font-size-sm);
    }

    .eu-td-title-sub[b-i49hnb0wla] {
        font-size: var(--font-size-xs);
    }

    .eu-td-ticket-meta[b-i49hnb0wla] {
        flex-direction: column;
        gap: 4px;
    }

    .eu-td-primary-metric[b-i49hnb0wla] {
        padding: var(--spacing-2);
    }

        .eu-td-primary-metric .eu-td-metric-icon[b-i49hnb0wla] {
            width: 36px;
            height: 36px;
            font-size: 1.1rem;
        }

        .eu-td-primary-metric .eu-td-metric-value[b-i49hnb0wla] {
            font-size: 1.25rem;
        }

    .eu-td-secondary-metrics[b-i49hnb0wla] {
        grid-template-columns: 1fr;
    }

    .eu-td-timeline[b-i49hnb0wla] {
        gap: var(--spacing-3);
    }

    .eu-td-timeline-marker[b-i49hnb0wla] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }

    .eu-td-timeline-content[b-i49hnb0wla] {
        margin-left: -var(--spacing-1);
    }

    .eu-td-timeline-header[b-i49hnb0wla],
    .eu-td-timeline-details[b-i49hnb0wla],
    .eu-td-card-header[b-i49hnb0wla],
    .eu-td-card-content[b-i49hnb0wla] {
        padding: var(--spacing-2);
    }

    .eu-td-btn[b-i49hnb0wla] {
        width: 100%;
        justify-content: center;
    }

    .eu-td-footer-actions[b-i49hnb0wla] {
        flex-direction: column;
        gap: var(--spacing-1);
    }
}
/* _content/MajestyPortal/Components/Pages/Legacy/TicketTimelineModal.razor.rz.scp.css */
/* ====== Ticket Timeline Modal Component Styles (eu-ttm-*) ====== */

/* ====== Modal Container ====== */
.eu-ttm-modal-overlay[b-nrztshl7ax] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--spacing-4);
}

.eu-ttm-modal-visible[b-nrztshl7ax] {
    opacity: 1;
    visibility: visible;
}

.eu-ttm-modal-content[b-nrztshl7ax] {
    background: var(--content-bg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-divider);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eu-ttm-modal-visible .eu-ttm-modal-content[b-nrztshl7ax] {
    transform: scale(1) translateY(0);
}

/* ====== Modal Header ====== */
.eu-ttm-modal-header[b-nrztshl7ax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-divider);
    background: linear-gradient(135deg, var(--subtle-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    position: relative;
}

    .eu-ttm-modal-header[b-nrztshl7ax]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-gradient);
    }

.eu-ttm-header-main[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.eu-ttm-truck-icon[b-nrztshl7ax] {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    border: 2px solid;
    transition: var(--hover-transition);
}

.eu-ttm-status-info[b-nrztshl7ax] {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
}

.eu-ttm-status-warning[b-nrztshl7ax] {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

.eu-ttm-status-success[b-nrztshl7ax] {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

.eu-ttm-status-primary[b-nrztshl7ax] {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.eu-ttm-status-secondary[b-nrztshl7ax] {
    background: var(--subtle-bg);
    color: var(--text-secondary);
    border-color: var(--border-divider);
}

.eu-ttm-title-section[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

.eu-ttm-modal-title[b-nrztshl7ax] {
    margin: 0 0 var(--spacing-1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.eu-ttm-title-main[b-nrztshl7ax] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.eu-ttm-title-sub[b-nrztshl7ax] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-mono);
}

.eu-ttm-truck-meta[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
}

.eu-ttm-registration[b-nrztshl7ax] {
    background: var(--secondary-light);
    color: var(--secondary);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 10px;
}

.eu-ttm-separator[b-nrztshl7ax] {
    color: var(--text-muted);
    font-weight: 300;
}

.eu-ttm-driver[b-nrztshl7ax] {
    color: var(--text-secondary);
    font-weight: 500;
}

.eu-ttm-urgent-flag[b-nrztshl7ax] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--warning-light);
    color: var(--warning);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 10px;
    border: 1px solid var(--warning);
    animation: eu-ttm-urgent-pulse-b-nrztshl7ax 2s infinite;
}

@keyframes eu-ttm-urgent-pulse-b-nrztshl7ax {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0);
    }
}

.eu-ttm-header-actions[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.eu-ttm-modal-close[b-nrztshl7ax] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    background: transparent;
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hover-transition);
    font-size: 1.1rem;
}

    .eu-ttm-modal-close:hover[b-nrztshl7ax] {
        background: var(--danger-light);
        border-color: var(--danger);
        color: var(--danger);
        transform: scale(1.05);
    }

/* ====== Modal Body ====== */
.eu-ttm-modal-body[b-nrztshl7ax] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .eu-ttm-modal-body[b-nrztshl7ax]::-webkit-scrollbar {
        width: 6px;
    }

    .eu-ttm-modal-body[b-nrztshl7ax]::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 3px;
    }

        .eu-ttm-modal-body[b-nrztshl7ax]::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

/* ====== Truck Hero Section ====== */
.eu-ttm-truck-hero[b-nrztshl7ax] {
    background: linear-gradient(135deg, var(--content-bg) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.eu-ttm-truck-info[b-nrztshl7ax] {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.eu-ttm-info-main[b-nrztshl7ax] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3);
    align-items: start;
}

.eu-ttm-vehicle-card[b-nrztshl7ax] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.eu-ttm-vehicle-header[b-nrztshl7ax] {
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
}

.eu-ttm-vehicle-icon[b-nrztshl7ax] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    background: var(--success-light);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.eu-ttm-vehicle-details[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

.eu-ttm-vehicle-registration[b-nrztshl7ax] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    font-family: var(--font-mono);
}

.eu-ttm-vehicle-driver[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 2px 0;
    font-weight: 500;
}

.eu-ttm-driver-id[b-nrztshl7ax] {
    font-size: 10px;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-mono);
}

.eu-ttm-vehicle-status[b-nrztshl7ax] {
    padding: var(--spacing-3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.eu-ttm-status-badge[b-nrztshl7ax] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

    .eu-ttm-status-badge.eu-ttm-status-info[b-nrztshl7ax] {
        background: var(--info-light);
        color: var(--info);
        border-color: var(--info);
    }

    .eu-ttm-status-badge.eu-ttm-status-warning[b-nrztshl7ax] {
        background: var(--warning-light);
        color: var(--warning);
        border-color: var(--warning);
    }

    .eu-ttm-status-badge.eu-ttm-status-success[b-nrztshl7ax] {
        background: var(--success-light);
        color: var(--success);
        border-color: var(--success);
    }

    .eu-ttm-status-badge.eu-ttm-status-primary[b-nrztshl7ax] {
        background: var(--primary-light);
        color: var(--primary);
        border-color: var(--primary);
    }

.eu-ttm-contract-card[b-nrztshl7ax] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.eu-ttm-contract-header[b-nrztshl7ax] {
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--subtle-bg);
}

.eu-ttm-contract-icon[b-nrztshl7ax] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-ttm-contract-details[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

    .eu-ttm-contract-details h4[b-nrztshl7ax] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 2px 0;
        font-family: var(--font-mono);
    }

    .eu-ttm-contract-details p[b-nrztshl7ax] {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        margin: 0;
        font-weight: 500;
    }

/* ====== Metrics Section ====== */
.eu-ttm-metrics-section[b-nrztshl7ax] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-2);
}

.eu-ttm-metric-card[b-nrztshl7ax] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-ttm-metric-card:hover[b-nrztshl7ax] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-ttm-metric-icon[b-nrztshl7ax] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-ttm-metric-primary[b-nrztshl7ax] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-ttm-metric-warning[b-nrztshl7ax] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-ttm-metric-info[b-nrztshl7ax] {
    background: var(--info-light);
    color: var(--info);
}

.eu-ttm-metric-content[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

.eu-ttm-metric-value[b-nrztshl7ax] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    font-family: var(--font-mono);
}

.eu-ttm-metric-label[b-nrztshl7ax] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ====== Section Titles ====== */
.eu-ttm-section-title[b-nrztshl7ax] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .eu-ttm-section-title i[b-nrztshl7ax] {
        color: var(--primary);
        font-size: var(--font-size-sm);
    }

/* ====== Timeline Section ====== */
.eu-ttm-timeline-section[b-nrztshl7ax] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-ttm-timeline[b-nrztshl7ax] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.eu-ttm-timeline-step[b-nrztshl7ax] {
    position: relative;
    display: flex;
    gap: var(--spacing-3);
    animation: eu-ttm-fade-in-up-b-nrztshl7ax 0.4s ease-out both;
}

    .eu-ttm-timeline-step:nth-child(1)[b-nrztshl7ax] {
        animation-delay: 0.1s;
    }

    .eu-ttm-timeline-step:nth-child(2)[b-nrztshl7ax] {
        animation-delay: 0.2s;
    }

    .eu-ttm-timeline-step:nth-child(3)[b-nrztshl7ax] {
        animation-delay: 0.3s;
    }

    .eu-ttm-timeline-step:nth-child(4)[b-nrztshl7ax] {
        animation-delay: 0.4s;
    }

    .eu-ttm-timeline-step:nth-child(5)[b-nrztshl7ax] {
        animation-delay: 0.5s;
    }

@keyframes eu-ttm-fade-in-up-b-nrztshl7ax {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eu-ttm-timeline-marker[b-nrztshl7ax] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 2;
    transition: var(--hover-transition);
    box-shadow: var(--shadow-sm);
    border: 3px solid;
    background: var(--content-bg);
    color: var(--text-secondary);
    border-color: var(--border-divider);
}

.eu-ttm-completed .eu-ttm-timeline-marker[b-nrztshl7ax] {
    background: var(--success);
    color: white;
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.2);
}

.eu-ttm-current .eu-ttm-timeline-marker[b-nrztshl7ax] {
    background: var(--warning);
    color: white;
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.2);
    animation: eu-ttm-timeline-pulse-b-nrztshl7ax 2s infinite;
}

.eu-ttm-pending .eu-ttm-timeline-marker[b-nrztshl7ax] {
    background: var(--subtle-bg);
    color: var(--text-muted);
    border-color: var(--border-divider);
}

@keyframes eu-ttm-timeline-pulse-b-nrztshl7ax {
    0% {
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--warning-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0);
    }
}

.eu-ttm-timeline-content[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: var(--hover-transition);
}

    .eu-ttm-timeline-content:hover[b-nrztshl7ax] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-ttm-timeline-header[b-nrztshl7ax] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-ttm-timeline-title[b-nrztshl7ax] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.eu-ttm-timeline-time[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.eu-ttm-timeline-details[b-nrztshl7ax] {
    padding: var(--spacing-3);
}

.eu-ttm-detail-grid[b-nrztshl7ax] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-2);
}

.eu-ttm-detail-item[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--subtle-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-divider);
}

.eu-ttm-detail-icon[b-nrztshl7ax] {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.eu-ttm-detail-content[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

.eu-ttm-detail-label[b-nrztshl7ax] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.eu-ttm-detail-value[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

/* ====== Weight Display ====== */
.eu-ttm-weight-display[b-nrztshl7ax] {
    margin-bottom: var(--spacing-2);
}

.eu-ttm-weight-summary[b-nrztshl7ax] {
    margin-bottom: var(--spacing-2);
}

.eu-ttm-weight-grid[b-nrztshl7ax] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-2);
}

.eu-ttm-weight-card[b-nrztshl7ax] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--hover-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-ttm-weight-card:hover[b-nrztshl7ax] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-ttm-weight-final[b-nrztshl7ax] {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
}

.eu-ttm-weight-icon[b-nrztshl7ax] {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    background: var(--success-light);
    color: var(--success);
}

.eu-ttm-icon-info[b-nrztshl7ax] {
    background: var(--info-light);
    color: var(--info);
}

.eu-ttm-icon-success[b-nrztshl7ax] {
    background: var(--success-light);
    color: var(--success);
}

.eu-ttm-icon-warning[b-nrztshl7ax] {
    background: var(--warning-light);
    color: var(--warning);
}

.eu-ttm-icon-primary[b-nrztshl7ax] {
    background: var(--primary-light);
    color: var(--primary);
}

.eu-ttm-weight-info[b-nrztshl7ax] {
    flex: 1;
    min-width: 0;
}

.eu-ttm-weight-label[b-nrztshl7ax] {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.eu-ttm-weight-value[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ====== Additional Information Section ====== */
.eu-ttm-additional-section[b-nrztshl7ax] {
    background: var(--content-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-divider);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.eu-ttm-info-grid[b-nrztshl7ax] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-3);
}

.eu-ttm-info-card[b-nrztshl7ax] {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--card-transition);
    box-shadow: var(--shadow-xs);
}

    .eu-ttm-info-card:hover[b-nrztshl7ax] {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.eu-ttm-card-header[b-nrztshl7ax] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.eu-ttm-card-icon[b-nrztshl7ax] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.eu-ttm-card-header h4[b-nrztshl7ax] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eu-ttm-card-content[b-nrztshl7ax] {
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.eu-ttm-info-row[b-nrztshl7ax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid rgba(var(--border-divider-rgb), 0.3);
}

    .eu-ttm-info-row:last-child[b-nrztshl7ax] {
        border-bottom: none;
    }

.eu-ttm-row-warning[b-nrztshl7ax] {
    color: var(--warning);
}

    .eu-ttm-row-warning .eu-ttm-info-value[b-nrztshl7ax] {
        color: var(--warning);
        font-weight: 600;
    }

.eu-ttm-info-label[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 80px;
}

.eu-ttm-info-value[b-nrztshl7ax] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* ====== Buttons ====== */
.eu-ttm-btn[b-nrztshl7ax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--hover-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
}

    .eu-ttm-btn:hover:not(:disabled)[b-nrztshl7ax] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .eu-ttm-btn:disabled[b-nrztshl7ax] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.eu-ttm-btn-secondary[b-nrztshl7ax] {
    background: var(--subtle-bg);
    color: var(--text-primary);
    border-color: var(--border-divider);
}

    .eu-ttm-btn-secondary:hover:not(:disabled)[b-nrztshl7ax] {
        background: var(--border-divider);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

/* ====== Modal Footer ====== */
.eu-ttm-modal-footer[b-nrztshl7ax] {
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--border-divider);
    background: var(--subtle-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
}

.eu-ttm-footer-info[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
}

.eu-ttm-ticket-summary[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.eu-ttm-summary-item[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

    .eu-ttm-summary-item i[b-nrztshl7ax] {
        color: var(--primary);
        font-size: 10px;
    }

.eu-ttm-summary-divider[b-nrztshl7ax] {
    color: var(--text-muted);
    font-weight: 300;
}

.eu-ttm-summary-urgent[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--warning);
    font-weight: 600;
}

.eu-ttm-footer-actions[b-nrztshl7ax] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* ====== Responsive Design ====== */
@media (max-width: 992px) {
    .eu-ttm-modal-overlay[b-nrztshl7ax] {
        padding: var(--spacing-2);
    }

    .eu-ttm-modal-content[b-nrztshl7ax] {
        max-width: 95vw;
        max-height: 90vh;
    }

    .eu-ttm-modal-header[b-nrztshl7ax] {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .eu-ttm-header-main[b-nrztshl7ax] {
        gap: var(--spacing-2);
    }

    .eu-ttm-truck-icon[b-nrztshl7ax] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .eu-ttm-modal-body[b-nrztshl7ax] {
        padding: var(--spacing-3);
    }

    .eu-ttm-info-main[b-nrztshl7ax] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .eu-ttm-metrics-section[b-nrztshl7ax] {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .eu-ttm-detail-grid[b-nrztshl7ax] {
        grid-template-columns: 1fr;
    }

    .eu-ttm-weight-grid[b-nrztshl7ax] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .eu-ttm-info-grid[b-nrztshl7ax] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .eu-ttm-modal-overlay[b-nrztshl7ax] {
        padding: var(--spacing-1);
    }

    .eu-ttm-modal-content[b-nrztshl7ax] {
        border-radius: var(--border-radius-md);
    }

    .eu-ttm-modal-header[b-nrztshl7ax] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-ttm-header-main[b-nrztshl7ax] {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .eu-ttm-title-main[b-nrztshl7ax] {
        font-size: var(--font-size-base);
    }

    .eu-ttm-truck-meta[b-nrztshl7ax] {
        justify-content: center;
    }

    .eu-ttm-header-actions[b-nrztshl7ax] {
        align-self: flex-end;
        position: absolute;
        top: var(--spacing-2);
        right: var(--spacing-3);
    }

    .eu-ttm-modal-body[b-nrztshl7ax] {
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }

    .eu-ttm-truck-info[b-nrztshl7ax] {
        padding: var(--spacing-3);
    }

    .eu-ttm-metrics-section[b-nrztshl7ax] {
        grid-template-columns: 1fr;
    }

    .eu-ttm-timeline-marker[b-nrztshl7ax] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-ttm-timeline-header[b-nrztshl7ax] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }

    .eu-ttm-weight-grid[b-nrztshl7ax] {
        grid-template-columns: 1fr;
    }

    .eu-ttm-info-row[b-nrztshl7ax] {
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }

    .eu-ttm-info-label[b-nrztshl7ax] {
        min-width: auto;
    }

    .eu-ttm-info-value[b-nrztshl7ax] {
        text-align: center;
    }

    .eu-ttm-modal-footer[b-nrztshl7ax] {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .eu-ttm-ticket-summary[b-nrztshl7ax] {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-1);
    }

    .eu-ttm-footer-actions[b-nrztshl7ax] {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .eu-ttm-truck-icon[b-nrztshl7ax] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .eu-ttm-title-main[b-nrztshl7ax] {
        font-size: var(--font-size-sm);
    }

    .eu-ttm-title-sub[b-nrztshl7ax] {
        font-size: var(--font-size-xs);
    }

    .eu-ttm-truck-meta[b-nrztshl7ax] {
        flex-direction: column;
        gap: 4px;
    }

    .eu-ttm-vehicle-header[b-nrztshl7ax] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-1);
    }

    .eu-ttm-vehicle-registration[b-nrztshl7ax] {
        font-size: var(--font-size-sm);
    }

    .eu-ttm-contract-header[b-nrztshl7ax] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-1);
    }

    .eu-ttm-timeline[b-nrztshl7ax] {
        gap: var(--spacing-3);
    }

    .eu-ttm-timeline-marker[b-nrztshl7ax] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }

    .eu-ttm-timeline-content[b-nrztshl7ax] {
        margin-left: -var(--spacing-1);
    }

    .eu-ttm-timeline-header[b-nrztshl7ax],
    .eu-ttm-timeline-details[b-nrztshl7ax],
    .eu-ttm-card-header[b-nrztshl7ax],
    .eu-ttm-card-content[b-nrztshl7ax],
    .eu-ttm-vehicle-header[b-nrztshl7ax],
    .eu-ttm-vehicle-status[b-nrztshl7ax],
    .eu-ttm-contract-header[b-nrztshl7ax] {
        padding: var(--spacing-2);
    }

    .eu-ttm-metric-value[b-nrztshl7ax] {
        font-size: var(--font-size-sm);
    }

    .eu-ttm-weight-value[b-nrztshl7ax] {
        font-size: 10px;
    }

    .eu-ttm-btn[b-nrztshl7ax] {
        width: 100%;
        justify-content: center;
    }

    .eu-ttm-ticket-summary[b-nrztshl7ax] {
        flex-direction: column;
        gap: var(--spacing-1);
        text-align: center;
    }
}
/* _content/MajestyPortal/Components/Pages/Reports/ReportPage.razor.rz.scp.css */
/* Report Page - Enhanced Styling with Animations and Flow */
:root[b-ki0jjw2skp] {
    --animation-timing: 0.3s;
    --hover-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --card-transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Base Dashboard Structure */
.scale-dashboard[b-ki0jjw2skp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem;
    background-color: var(--body-bg);
    font-family: 'Inter', sans-serif;
    position: relative;
    animation: fade-in-b-ki0jjw2skp 0.5s ease-out;
}

@keyframes fade-in-b-ki0jjw2skp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Styling */
.scale-dashboard-header[b-ki0jjw2skp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.scale-dashboard-title h1[b-ki0jjw2skp] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

    .scale-dashboard-title h1[b-ki0jjw2skp]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

.scale-dashboard-title:hover h1[b-ki0jjw2skp]::after {
    transform: scaleX(1);
}

.scale-dashboard-subtitle[b-ki0jjw2skp] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    transition: var(--hover-transition);
}

.scale-dashboard-title:hover .scale-dashboard-subtitle[b-ki0jjw2skp] {
    opacity: 1;
}

.scale-dashboard-actions[b-ki0jjw2skp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Refresh Button Styling */
.scale-refresh-button[b-ki0jjw2skp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
}

    .scale-refresh-button[b-ki0jjw2skp]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .scale-refresh-button:active[b-ki0jjw2skp]::after {
        animation: ripple-b-ki0jjw2skp 0.6s ease-out;
    }

@keyframes ripple-b-ki0jjw2skp {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

.scale-refresh-button:hover[b-ki0jjw2skp] {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.scale-refresh-button:active[b-ki0jjw2skp] {
    transform: translateY(0);
}

.scale-refresh-button i[b-ki0jjw2skp] {
    transition: transform 0.3s ease;
}

.scale-refresh-button:hover i[b-ki0jjw2skp] {
    transform: rotate(180deg);
}

/* Filter and Search Section */
.scale-dashboard-filters[b-ki0jjw2skp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--hover-transition);
    margin-bottom: 1rem;
    animation: slide-in-right-b-ki0jjw2skp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-right-b-ki0jjw2skp {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scale-dashboard-filters:hover[b-ki0jjw2skp] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.scale-filter-buttons[b-ki0jjw2skp] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.scale-filter-button[b-ki0jjw2skp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: var(--body-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
}

    .scale-filter-button[b-ki0jjw2skp]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .scale-filter-button:active[b-ki0jjw2skp]::after {
        animation: ripple-b-ki0jjw2skp 0.6s ease-out;
    }

    .scale-filter-button:hover[b-ki0jjw2skp] {
        border-color: var(--primary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .scale-filter-button.active[b-ki0jjw2skp] {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
    }

.scale-filter-count[b-ki0jjw2skp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.theme-dark .scale-filter-count[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.2);
}

.scale-filter-button:hover .scale-filter-count[b-ki0jjw2skp] {
    transform: scale(1.1);
}

.scale-filter-button.active .scale-filter-count[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Search Box */
.scale-search-container[b-ki0jjw2skp] {
    position: relative;
    min-width: 220px;
    flex-grow: 0;
}

.scale-search-icon[b-ki0jjw2skp] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

.scale-search-input[b-ki0jjw2skp] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.8125rem;
    transition: var(--hover-transition);
}

    .scale-search-input:focus[b-ki0jjw2skp] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    }

        .scale-search-input:focus ~ .scale-search-icon[b-ki0jjw2skp] {
            color: var(--primary-color);
        }

.scale-search-clear[b-ki0jjw2skp] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-search-clear:hover[b-ki0jjw2skp] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: translateY(-50%) scale(1.2);
    }

.theme-dark .scale-search-clear:hover[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Loader Component */
.scale-loading[b-ki0jjw2skp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.scale-spinner[b-ki0jjw2skp] {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: scale-spin-b-ki0jjw2skp 1s infinite cubic-bezier(0.41, 0.26, 0.54, 0.94);
}

@keyframes scale-spin-b-ki0jjw2skp {
    to {
        transform: rotate(360deg);
    }
}

.scale-loading p[b-ki0jjw2skp] {
    color: var(--text-secondary);
    font-size: 1rem;
    animation: fade-pulse-b-ki0jjw2skp 2s infinite alternate;
}

@keyframes fade-pulse-b-ki0jjw2skp {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* Group Section Styling */
.scale-group-section[b-ki0jjw2skp] {
    margin-bottom: 1.25rem;
    animation: fade-in-up-b-ki0jjw2skp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.3s;
}

@keyframes fade-in-up-b-ki0jjw2skp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-group-header[b-ki0jjw2skp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: var(--hover-transition);
}

    .scale-group-header:hover[b-ki0jjw2skp] {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .scale-group-header h2[b-ki0jjw2skp] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        position: relative;
        padding-left: 12px;
    }

        .scale-group-header h2[b-ki0jjw2skp]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }

.scale-group-stats[b-ki0jjw2skp] {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Readings Grid (Report Cards) */
.scale-readings-grid[b-ki0jjw2skp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    position: relative;
}

.scale-reading-card[b-ki0jjw2skp] {
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--card-transition);
    cursor: pointer;
    animation: card-fade-in-b-ki0jjw2skp 0.4s ease-out forwards;
    opacity: 0;
    transform: translateY(15px);
}

    .scale-reading-card:nth-child(1)[b-ki0jjw2skp] {
        animation-delay: 0.1s;
    }

    .scale-reading-card:nth-child(2)[b-ki0jjw2skp] {
        animation-delay: 0.15s;
    }

    .scale-reading-card:nth-child(3)[b-ki0jjw2skp] {
        animation-delay: 0.2s;
    }

    .scale-reading-card:nth-child(4)[b-ki0jjw2skp] {
        animation-delay: 0.25s;
    }

    .scale-reading-card:nth-child(5)[b-ki0jjw2skp] {
        animation-delay: 0.3s;
    }

    .scale-reading-card:nth-child(6)[b-ki0jjw2skp] {
        animation-delay: 0.35s;
    }

    .scale-reading-card:nth-child(7)[b-ki0jjw2skp] {
        animation-delay: 0.4s;
    }

    .scale-reading-card:nth-child(8)[b-ki0jjw2skp] {
        animation-delay: 0.45s;
    }

@keyframes card-fade-in-b-ki0jjw2skp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-reading-card:hover[b-ki0jjw2skp] {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.scale-reading-header[b-ki0jjw2skp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-header[b-ki0jjw2skp] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.theme-dark .scale-reading-header[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.02);
}

.theme-dark .scale-reading-card:hover .scale-reading-header[b-ki0jjw2skp] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.scale-reading-title h3[b-ki0jjw2skp] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--hover-transition);
}

.scale-reading-card:hover .scale-reading-title h3[b-ki0jjw2skp] {
    color: var(--primary-color);
}

.scale-reading-subtitle[b-ki0jjw2skp] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.125rem;
}

.scale-reading-actions[b-ki0jjw2skp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .scale-reading-actions i[b-ki0jjw2skp] {
        font-size: 1.25rem;
        color: var(--text-secondary);
        transition: var(--hover-transition);
    }

.scale-reading-card:hover .scale-reading-actions i[b-ki0jjw2skp] {
    color: var(--primary-color);
    transform: scale(1.1);
}

.scale-reading-content[b-ki0jjw2skp] {
    padding: 1.125rem;
}

    .scale-reading-content p[b-ki0jjw2skp] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.5;
    }

/* Dialog Component Styling */
.scale-dialog[b-ki0jjw2skp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(3px);
}

.scale-dialog-show[b-ki0jjw2skp] {
    opacity: 1;
    visibility: visible;
}

.scale-dialog-content[b-ki0jjw2skp] {
    width: 100%;
    max-width: 500px;
    background-color: var(--content-bg);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.scale-dialog-show .scale-dialog-content[b-ki0jjw2skp] {
    transform: translateY(0) scale(1);
}

.scale-dialog-header[b-ki0jjw2skp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .scale-dialog-header[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.02);
}

.scale-dialog-header h3[b-ki0jjw2skp] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 12px;
}

    .scale-dialog-header h3[b-ki0jjw2skp]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }

.scale-dialog-close[b-ki0jjw2skp] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--hover-transition);
}

    .scale-dialog-close:hover[b-ki0jjw2skp] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-dialog-close:hover[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.1);
}

.scale-dialog-body[b-ki0jjw2skp] {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.scale-dialog-footer[b-ki0jjw2skp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .scale-dialog-footer[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Report Form Styling */
.report-form[b-ki0jjw2skp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.report-description[b-ki0jjw2skp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--body-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    transition: var(--hover-transition);
}

    .report-description:hover[b-ki0jjw2skp] {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

.report-icon[b-ki0jjw2skp] {
    font-size: 1.75rem;
    color: var(--primary-color);
    background-color: var(--primary-light);
    padding: 1rem;
    border-radius: 0.5rem;
    min-width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

.report-description:hover .report-icon[b-ki0jjw2skp] {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
}

.report-description p[b-ki0jjw2skp] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Form Groups and Inputs */
.form-group[b-ki0jjw2skp] {
    margin-bottom: 1rem;
    animation: fade-in-b-ki0jjw2skp 0.3s ease-out forwards;
    opacity: 0;
}

    .form-group:nth-child(1)[b-ki0jjw2skp] {
        animation-delay: 0.1s;
    }

    .form-group:nth-child(2)[b-ki0jjw2skp] {
        animation-delay: 0.15s;
    }

    .form-group:nth-child(3)[b-ki0jjw2skp] {
        animation-delay: 0.2s;
    }

    .form-group:nth-child(4)[b-ki0jjw2skp] {
        animation-delay: 0.25s;
    }

    .form-group:nth-child(5)[b-ki0jjw2skp] {
        animation-delay: 0.3s;
    }

    .form-group label[b-ki0jjw2skp] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--text-primary);
        font-size: 0.9375rem;
        transition: var(--hover-transition);
    }

.form-control[b-ki0jjw2skp] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: var(--hover-transition);
}

    .form-control:focus[b-ki0jjw2skp] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

.form-group:focus-within label[b-ki0jjw2skp] {
    color: var(--primary-color);
}

.input-help[b-ki0jjw2skp] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    transition: var(--hover-transition);
}

.form-group:focus-within .input-help[b-ki0jjw2skp] {
    color: var(--text-secondary);
}

/* Notification Component */
.scale-notification[b-ki0jjw2skp] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background-color: var(--content-bg);
    border-radius: 0.625rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-color);
    max-width: 380px;
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1000;
}

.scale-notification-show[b-ki0jjw2skp] {
    transform: translateX(0);
    opacity: 1;
}

.scale-notification.success[b-ki0jjw2skp] {
    border-left-color: var(--success);
}

.scale-notification.warning[b-ki0jjw2skp] {
    border-left-color: var(--warning);
}

.scale-notification.error[b-ki0jjw2skp] {
    border-left-color: var(--danger);
}

.scale-notification i[b-ki0jjw2skp] {
    font-size: 1.25rem;
    color: var(--primary-color);
    animation: notification-icon-pop-b-ki0jjw2skp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-notification.success i[b-ki0jjw2skp] {
    color: var(--success);
}

.scale-notification.warning i[b-ki0jjw2skp] {
    color: var(--warning);
}

.scale-notification.error i[b-ki0jjw2skp] {
    color: var(--danger);
}

@keyframes notification-icon-pop-b-ki0jjw2skp {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-notification-content[b-ki0jjw2skp] {
    flex-grow: 1;
}

    .scale-notification-content h4[b-ki0jjw2skp] {
        margin: 0 0 0.25rem 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .scale-notification-content p[b-ki0jjw2skp] {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

.scale-notification-close[b-ki0jjw2skp] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
}

    .scale-notification-close:hover[b-ki0jjw2skp] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

.theme-dark .scale-notification-close:hover[b-ki0jjw2skp] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Button Styling for Dialog */
.dialog-button[b-ki0jjw2skp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
    overflow: hidden;
}

    .dialog-button[b-ki0jjw2skp]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .dialog-button:active[b-ki0jjw2skp]::after {
        animation: ripple-b-ki0jjw2skp 0.6s ease-out;
    }

.dialog-button-primary[b-ki0jjw2skp] {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

    .dialog-button-primary:hover[b-ki0jjw2skp] {
        background-color: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    }

    .dialog-button-primary:active[b-ki0jjw2skp] {
        transform: translateY(0);
    }

.dialog-button-secondary[b-ki0jjw2skp] {
    background-color: var(--content-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .dialog-button-secondary:hover[b-ki0jjw2skp] {
        border-color: var(--text-secondary);
        background-color: var(--body-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .dialog-button-secondary:active[b-ki0jjw2skp] {
        transform: translateY(0);
    }

.dialog-button i[b-ki0jjw2skp] {
    transition: transform 0.3s ease;
}

.dialog-button:hover i:not(.fa-spin)[b-ki0jjw2skp] {
    transform: translateX(3px);
}

.dialog-button-processing[b-ki0jjw2skp] {
    opacity: 0.8;
    cursor: wait;
}

/* Empty State / No Results */
.scale-no-results[b-ki0jjw2skp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    text-align: center;
    background-color: var(--body-bg);
    border-radius: 0.75rem;
    border: 2px dashed var(--border-color);
    animation: fade-in-b-ki0jjw2skp 0.5s ease;
}

    .scale-no-results i[b-ki0jjw2skp] {
        font-size: 2.5rem;
        color: var(--text-muted);
        margin-bottom: 0.875rem;
        opacity: 0.5;
        animation: float-b-ki0jjw2skp 3s ease-in-out infinite;
    }

@keyframes float-b-ki0jjw2skp {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.scale-no-results h3[b-ki0jjw2skp] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
}

.scale-no-results p[b-ki0jjw2skp] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
    max-width: 350px;
    font-size: 0.875rem;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .scale-readings-grid[b-ki0jjw2skp] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .scale-readings-grid[b-ki0jjw2skp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .scale-dashboard[b-ki0jjw2skp] {
        padding: 0.875rem;
    }

    .scale-dashboard-header[b-ki0jjw2skp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .scale-dashboard-actions[b-ki0jjw2skp] {
        width: 100%;
        justify-content: flex-end;
    }

    .scale-dashboard-filters[b-ki0jjw2skp] {
        flex-direction: column;
        align-items: stretch;
    }

    .scale-filter-buttons[b-ki0jjw2skp] {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .scale-readings-grid[b-ki0jjw2skp] {
        grid-template-columns: 1fr;
    }

    .scale-dialog-content[b-ki0jjw2skp] {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .scale-group-header[b-ki0jjw2skp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .report-description[b-ki0jjw2skp] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .report-icon[b-ki0jjw2skp] {
        margin-bottom: 0.5rem;
    }
}