@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

html { 
    font-size: 16px; 
    scroll-behavior: smooth;
} 
@media (min-width: 768px) { html { font-size: 17px; } } 
@media (min-width: 1280px) { html { font-size: 18px; } } 

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    background-color: #f1f5f9; 
    color: #0f172a; 
}

/* Premium Animations & Transitions */
.animate-fade-in { 
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(12px) scale(0.99); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    } 
}

/* Micro-Interaction Transitions */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-lift:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
}
.hover-lift:active {
    transform: translateY(-1px) scale(0.995);
}

/* Custom High-Fidelity Scrollbars */
.custom-scrollbar::-webkit-scrollbar { 
    height: 6px; 
    width: 6px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: rgba(0, 0, 0, 0.02); 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: rgba(203, 213, 225, 0.85); 
    border-radius: 10px; 
    transition: background 0.3s;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: rgba(148, 163, 184, 0.9); 
}

/* Master Glassmorphism & SaaS Elements */
.glass-panel { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px) saturate(180%); 
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.5); 
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
}

/* Glowing Shadows */
.shadow-primary-glow {
    box-shadow: 0 10px 25px -5px rgba(0, 92, 154, 0.25), 0 8px 10px -6px rgba(0, 92, 154, 0.15);
}
.shadow-emerald-glow {
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.25), 0 8px 10px -6px rgba(16, 185, 129, 0.15);
}
.shadow-red-glow {
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.25), 0 8px 10px -6px rgba(239, 68, 68, 0.15);
}

/* Sidebar Item & Navigation Overhaul */
.sidebar-item { 
    position: relative; 
    padding: 12px 18px; 
    border-radius: 14px; 
    color: #94a3b8; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer; 
    margin-bottom: 5px; 
    overflow: hidden; 
    white-space: nowrap; 
}

/* 1. Dashboard Home (Sky Blue) */
.sidebar-item-home:hover { 
    background-color: rgba(56, 189, 248, 0.1) !important; 
    color: #38bdf8 !important; 
    transform: translateX(4px);
}
.sidebar-item-home.sidebar-active { 
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.04) 100%) !important; 
    color: #38bdf8 !important; 
    font-weight: 800; 
    border-left: 4px solid #38bdf8 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 2. Roster Builder (Emerald Green) */
.sidebar-item-roster:hover { 
    background-color: rgba(52, 211, 153, 0.1) !important; 
    color: #34d399 !important; 
    transform: translateX(4px);
}
.sidebar-item-roster.sidebar-active { 
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0.04) 100%) !important; 
    color: #34d399 !important; 
    font-weight: 800; 
    border-left: 4px solid #34d399 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 3. Team Directory (Violet/Purple) */
.sidebar-item-staff:hover { 
    background-color: rgba(167, 139, 250, 0.1) !important; 
    color: #a78bfa !important; 
    transform: translateX(4px);
}
.sidebar-item-staff.sidebar-active { 
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(167, 139, 250, 0.04) 100%) !important; 
    color: #a78bfa !important; 
    font-weight: 800; 
    border-left: 4px solid #a78bfa !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 4. Compliance Docs (Amber/Yellow) */
.sidebar-item-compliance:hover { 
    background-color: rgba(251, 191, 36, 0.1) !important; 
    color: #fbbf24 !important; 
    transform: translateX(4px);
}
.sidebar-item-compliance.sidebar-active { 
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.04) 100%) !important; 
    color: #fbbf24 !important; 
    font-weight: 800; 
    border-left: 4px solid #fbbf24 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 5. Swap Requests (Pink) */
.sidebar-item-swaps:hover { 
    background-color: rgba(244, 114, 182, 0.1) !important; 
    color: #f472b6 !important; 
    transform: translateX(4px);
}
.sidebar-item-swaps.sidebar-active { 
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(244, 114, 182, 0.04) 100%) !important; 
    color: #f472b6 !important; 
    font-weight: 800; 
    border-left: 4px solid #f472b6 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 6. Leave Requests (Orange) */
.sidebar-item-leave:hover { 
    background-color: rgba(251, 146, 60, 0.1) !important; 
    color: #fb923c !important; 
    transform: translateX(4px);
}
.sidebar-item-leave.sidebar-active { 
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.04) 100%) !important; 
    color: #fb923c !important; 
    font-weight: 800; 
    border-left: 4px solid #fb923c !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 7. Time Approvals (Rose Red) */
.sidebar-item-time:hover { 
    background-color: rgba(251, 113, 133, 0.1) !important; 
    color: #fb7185 !important; 
    transform: translateX(4px);
}
.sidebar-item-time.sidebar-active { 
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.15) 0%, rgba(251, 113, 133, 0.04) 100%) !important; 
    color: #fb7185 !important; 
    font-weight: 800; 
    border-left: 4px solid #fb7185 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 8. Variance Analytics (Indigo) */
.sidebar-item-reports:hover { 
    background-color: rgba(129, 140, 248, 0.1) !important; 
    color: #818cf8 !important; 
    transform: translateX(4px);
}
.sidebar-item-reports.sidebar-active { 
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.15) 0%, rgba(129, 140, 248, 0.04) 100%) !important; 
    color: #818cf8 !important; 
    font-weight: 800; 
    border-left: 4px solid #818cf8 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 9. Payroll Export (Teal) */
.sidebar-item-payroll:hover { 
    background-color: rgba(45, 212, 191, 0.1) !important; 
    color: #2dd4bf !important; 
    transform: translateX(4px);
}
.sidebar-item-payroll.sidebar-active { 
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.15) 0%, rgba(45, 212, 191, 0.04) 100%) !important; 
    color: #2dd4bf !important; 
    font-weight: 800; 
    border-left: 4px solid #2dd4bf !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 10. Store Settings (Slate Blue) */
.sidebar-item-system:hover { 
    background-color: rgba(148, 163, 184, 0.1) !important; 
    color: #94a3b8 !important; 
    transform: translateX(4px);
}
.sidebar-item-system.sidebar-active { 
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.04) 100%) !important; 
    color: #e2e8f0 !important; 
    font-weight: 800; 
    border-left: 4px solid #94a3b8 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Custom Interactive Clocking Dial Pulse */
.clock-pulsator {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.15;
    animation: pulsateRing 2.2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
    pointer-events: none;
}

@keyframes pulsateRing {
    0% { transform: scale(0.92); opacity: 0.4; }
    50% { opacity: 0.15; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Numpad Button Enhancements */
.numpad-btn { 
    width: 100%; 
    aspect-ratio: 1; 
    font-size: 28px; 
    font-weight: 800; 
    border-radius: 24px; 
    background: #ffffff; 
    color: #1e293b; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); 
    border: 1px solid rgba(226, 232, 240, 0.8); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 
}
.numpad-btn:hover {
    border-color: #cbd5e1;
    transform: scale(1.04);
}
.numpad-btn:active { 
    transform: scale(0.96); 
    background: #f8fafc; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Styling Color Inputs */
input[type="color"] { 
    -webkit-appearance: none; 
    border: none; 
    padding: 0; 
    overflow: hidden; 
}
input[type="color"]::-webkit-color-swatch-wrapper { 
    padding: 0; 
}
input[type="color"]::-webkit-color-swatch { 
    border: none; 
    border-radius: 0.75rem; 
}

/* Premium Scroll indicators for Roster/Swiping grids */
.swipe-indicator {
    position: relative;
}
.swipe-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent 0%, rgba(248, 250, 252, 0.8) 100%);
    pointer-events: none;
}

/* Birthday Alert Pulsing Highlight */
@keyframes softPulse {
    0% { border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 0 10px rgba(168, 85, 247, 0.08); }
    50% { border-color: rgba(236, 72, 153, 0.55); box-shadow: 0 0 20px rgba(236, 72, 153, 0.18); }
    100% { border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 0 10px rgba(168, 85, 247, 0.08); }
}
.birthday-alert-pulse {
    animation: softPulse 3.5s infinite ease-in-out;
}

@media print { 
    body * { visibility: hidden; } 
    .print-area, .print-area * { visibility: visible; } 
    .print-area { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: none; overflow: visible !important; padding: 0 !important; background: white !important; } 
    .no-print { display: none !important; } 
    .print-bg-fix { print-color-adjust: exact; -webkit-print-color-adjust: exact; } 
}