/* ================================================
   HRMS Custom Icon System
   Modern, Consistent, Professional Icons
   ================================================ */

/* Icon Base Styles */
.hrm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hrm-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon Sizes */
.hrm-icon.icon-xs {
    width: 14px;
    height: 14px;
}

.hrm-icon.icon-sm {
    width: 16px;
    height: 16px;
}

.hrm-icon.icon-md {
    width: 20px;
    height: 20px;
}

.hrm-icon.icon-lg {
    width: 24px;
    height: 24px;
}

.hrm-icon.icon-xl {
    width: 28px;
    height: 28px;
}

.hrm-icon.icon-2xl {
    width: 32px;
    height: 32px;
}

.hrm-icon.icon-3xl {
    width: 40px;
    height: 40px;
}

/* Icon Colors - Using CSS Variables */
.hrm-icon {
    color: var(--text-secondary, #6B7280);
}

.hrm-icon.icon-primary {
    color: var(--primary-color, #0C8776);
}

.hrm-icon.icon-success {
    color: var(--success-color, #10B981);
}

.hrm-icon.icon-warning {
    color: var(--warning-color, #F59E0B);
}

.hrm-icon.icon-danger {
    color: var(--danger-color, #EF4444);
}

.hrm-icon.icon-info {
    color: #3B82F6;
}

.hrm-icon.icon-white {
    color: #FFFFFF;
}

.hrm-icon.icon-muted {
    color: #9CA3AF;
}

.hrm-icon.icon-dark {
    color: var(--text-main, #111827);
}

/* Icon States */
.hrm-icon.icon-interactive {
    cursor: pointer;
}

.hrm-icon.icon-interactive:hover {
    color: var(--primary-color, #0C8776);
    transform: scale(1.1);
}

.hrm-icon.icon-interactive:active {
    transform: scale(0.95);
}

.hrm-icon.icon-disabled,
.hrm-icon[disabled] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Icon with Circle Background */
.hrm-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 8px;
    transition: all 0.2s ease;
}

.hrm-icon-circle.circle-sm {
    padding: 6px;
}

.hrm-icon-circle.circle-lg {
    padding: 12px;
}

.hrm-icon-circle.bg-primary {
    background: rgba(12, 135, 118, 0.1);
    color: var(--primary-color);
}

.hrm-icon-circle.bg-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.hrm-icon-circle.bg-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.hrm-icon-circle.bg-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.hrm-icon-circle.bg-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.hrm-icon-circle.bg-neutral {
    background: #F3F4F6;
    color: #6B7280;
}

/* Icon with Square Background */
.hrm-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s ease;
}

.hrm-icon-box.bg-gradient-primary {
    background: linear-gradient(135deg, #064E4C 0%, #0C8776 100%);
    color: white;
}

.hrm-icon-box.bg-gradient-success {
    background: linear-gradient(135deg, #047857 0%, #10B981 100%);
    color: white;
}

.hrm-icon-box.bg-gradient-warning {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    color: white;
}

.hrm-icon-box.bg-gradient-danger {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
    color: white;
}

/* Button Icon Integration */
.hrm-btn .hrm-icon,
.hrm-btn-primary .hrm-icon,
.hrm-btn-outline .hrm-icon,
.hrm-btn-danger .hrm-icon {
    margin-right: 6px;
}

.hrm-btn .hrm-icon:last-child,
.hrm-btn-primary .hrm-icon:last-child,
.hrm-btn-outline .hrm-icon:last-child {
    margin-right: 0;
    margin-left: 6px;
}

.hrm-btn .hrm-icon:only-child,
.hrm-btn-primary .hrm-icon:only-child,
.hrm-btn-outline .hrm-icon:only-child {
    margin: 0;
}

/* Navigation Icon Styles */
.hrm-nav-menu .hrm-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.hrm-nav-menu li:hover .hrm-icon,
.hrm-nav-menu li.active .hrm-icon {
    opacity: 1;
    color: var(--primary-color);
}

/* Stat Card Icon Styles */
.stat-header .hrm-icon {
    width: 24px;
    height: 24px;
}

/* Form Input Icons */
.input-with-icon .hrm-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9CA3AF;
}

.input-with-icon input,
.input-with-icon select {
    padding-left: 40px;
}

/* Table Action Icons */
.hrm-table-actions .hrm-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.hrm-table-actions .hrm-icon:hover {
    opacity: 1;
}

.hrm-table-actions .hrm-icon.action-edit:hover {
    color: var(--primary-color);
}

.hrm-table-actions .hrm-icon.action-delete:hover {
    color: var(--danger-color);
}

.hrm-table-actions .hrm-icon.action-view:hover {
    color: #3B82F6;
}

/* Modal Header Icons */
.hrm-modal-header-premium .hrm-icon,
.header-icon-wrapper .hrm-icon {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

/* Alert/Notification Icons */
.hrm-alert .hrm-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hrm-alert.alert-success .hrm-icon {
    color: var(--success-color);
}

.hrm-alert.alert-warning .hrm-icon {
    color: var(--warning-color);
}

.hrm-alert.alert-danger .hrm-icon {
    color: var(--danger-color);
}

.hrm-alert.alert-info .hrm-icon {
    color: #3B82F6;
}

/* Toast Notification Icons */
.hrm-toast-notification .hrm-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Loading Spinner Animation */
.hrm-icon.icon-spin {
    animation: hrm-icon-spin 1s linear infinite;
}

.hrm-icon.icon-spin-slow {
    animation: hrm-icon-spin 2s linear infinite;
}

@keyframes hrm-icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pulse Animation for Notifications */
.hrm-icon.icon-pulse {
    animation: hrm-icon-pulse 2s ease-in-out infinite;
}

@keyframes hrm-icon-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Badge with Icon */
.hrm-badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.hrm-badge-icon .hrm-icon {
    width: 14px;
    height: 14px;
}

.hrm-badge-icon.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.hrm-badge-icon.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
}

.hrm-badge-icon.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #B91C1C;
}

.hrm-badge-icon.badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: #1D4ED8;
}

/* Empty State Icons */
.hrm-empty-state .hrm-icon {
    width: 64px;
    height: 64px;
    color: #D1D5DB;
    margin-bottom: 16px;
}

/* Responsive Icon Sizes */
@media (max-width: 768px) {
    .hrm-icon.icon-responsive {
        width: 18px;
        height: 18px;
    }

    .hrm-nav-menu .hrm-icon {
        width: 20px;
        height: 20px;
    }
}

/* ================================================
   Dashicons Override - Gradual Migration Support
   This maps old dashicons classes to new styling
   ================================================ */

/* Ensure dashicons used alongside new system have consistent sizing */
.hrm-wrap .dashicons,
.hrm-portal-wrap .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    transition: all 0.2s ease;
}

/* Button icon sizing for dashicons */
.hrm-btn .dashicons,
.hrm-btn-primary .dashicons,
.hrm-btn-outline .dashicons,
.hrm-btn-danger .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.btn-sm .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Navigation dashicons */
.hrm-nav-menu .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    opacity: 0.7;
}

.hrm-nav-menu li:hover .dashicons,
.hrm-nav-menu li.active .dashicons {
    opacity: 1;
    color: var(--primary-color);
}

/* Stat card dashicons */
.stat-header .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Modal header dashicons */
.header-icon-wrapper .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

/* Form section label dashicons */
.section-label .dashicons,
h5.section-label .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    color: var(--primary-color);
}

/* Input icon dashicons */
.input-icon.dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #9CA3AF;
}

/* Sidebar header dashicons */
.hrm-sidebar-header .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    color: var(--primary-color);
}

/* Card header icon box dashicons */
.sidebar-card-header .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

/* Action icon button dashicons */
.hrm-btn-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #6B7280;
    transition: all 0.2s ease;
}

.hrm-btn-icon:hover .dashicons {
    color: var(--primary-color);
}

.hrm-btn-icon.danger .dashicons,
.hrm-btn-icon.danger:hover .dashicons {
    color: var(--danger-color);
}

.hrm-btn-icon.success .dashicons,
.hrm-btn-icon.success:hover .dashicons {
    color: var(--success-color);
}

.hrm-btn-icon.warning .dashicons,
.hrm-btn-icon.warning:hover .dashicons {
    color: var(--warning-color);
}

/* Top bar icons */
.hrm-top-bar .dashicons,
.hrm-top-actions .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #6B7280;
    transition: all 0.2s ease;
}

.hrm-notif-bell:hover .dashicons {
    color: var(--primary-color);
}

/* Search icon */
.hrm-search-wrap .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #9CA3AF;
}

/* Menu toggle dashicons */
.hrm-menu-toggle .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--text-main);
}

/* Mini stat icons */
.hrm-mini-stat .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Task meta badge icons */
.task-meta-badge .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

/* Profile preview icons */
.profile-preview-modern .dashicons,
.edit-profile-preview .dashicons,
#preview-avatar-mini .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #9CA3AF;
}

/* Header icon box */
.header-icon-box .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: white;
}

/* Section icon box */
.section-icon-box .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: white;
}

/* Alert icons */
.hrm-alert-icon.dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Toast notification icons */
.hrm-toast-notification .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Empty state icons */
.hrm-empty-icon.dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #D1D5DB;
}

/* Back link icons */
.hrm-back-link .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Pagination icons */
.hrm-pagination-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Chart report icons */
.hrm-report-card .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Filter button icons */
.hrm-filter-bar .hrm-btn-outline .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Progress step icons */
.progress-step .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Upload button icons */
.hrm-btn-upload .dashicons,
.hrm-btn-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Preview overlay icon */
.preview-overlay .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: white;
}

/* Payroll card icons */
.payroll-stat-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Policy card icons */
.policy-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Notification item icons */
.notif-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Leave status icons */
.leave-status-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* IP config icons */
.ip-item .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Attendance icons */
.attendance-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Calendar icons */
.calendar-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Table action icons - consistent sizing */
td .dashicons,
.emp-secondary-actions .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

td .dashicons:hover,
.emp-secondary-actions .dashicons:hover {
    opacity: 1;
}

/* Spin animation for dashicons */
.dashicons.spin,
.dashicons.hrm-spin {
    animation: hrm-dashicon-spin 1s linear infinite;
}

.dashicons.hrm-spin-slow {
    animation: hrm-dashicon-spin 2s linear infinite;
}

@keyframes hrm-dashicon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ================================================
   Icon Hover Effects for Interactive Elements
   ================================================ */

/* Hover effect on cards */
.hrm-employee-card:hover .emp-secondary-actions .dashicons {
    opacity: 0.8;
}

.hrm-employee-card .emp-secondary-actions .dashicons:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Hover effect on table rows */
tr:hover td .dashicons {
    opacity: 0.9;
}

/* Focus visible for accessibility */
.hrm-btn-icon:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hrm-btn-icon:focus-visible .dashicons {
    color: var(--primary-color);
}

/* ================================================
   Print Styles - Hide decorative icons
   ================================================ */

@media print {

    .hrm-icon.icon-decorative,
    .dashicons.icon-decorative {
        display: none !important;
    }
}