/**
 * User Panel — Tailwind Custom Styles
 * Only styles that cannot be expressed with Tailwind utility classes
 */

/* Prevent transition flash on page navigation */
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after {
    transition: none !important;
}

/* Sidebar transitions */
.user-sidebar {
    transition: width 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sidebar collapsed: hide labels */
body.sidebar-collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
body.sidebar-collapsed .user-sidebar { width: 72px; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; }
body.sidebar-collapsed .sidebar-brand i { margin: 0; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 1rem 0.5rem 0.5rem; }
body.sidebar-collapsed .sidebar-collapse-btn { display: none !important; }
body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 0.6rem; }
body.sidebar-collapsed .sidebar-nav .nav-link i { margin: 0; font-size: 1.25rem; }

/* Sidebar icons: higher contrast than label text for visibility */
.sidebar-nav .nav-link i { color: #374151; }
.dark .sidebar-nav .nav-link i { color: #d1d5db; }
.sidebar-nav .nav-link:hover i { color: #111827; }
.dark .sidebar-nav .nav-link:hover i { color: #f3f4f6; }

/* Sidebar section labels: show as thin line when collapsed */
body.sidebar-collapsed .sidebar-section { margin-top: 0.5rem; margin-bottom: 0.25rem; }
body.sidebar-collapsed .sidebar-section > p { height: 1px; margin: 0.5rem 0.75rem; padding: 0; background: var(--sidebar-divider, rgba(0,0,0,0.06)); font-size: 0; overflow: hidden; }
.dark body.sidebar-collapsed .sidebar-section > p,
body.sidebar-collapsed .dark .sidebar-section > p { background: rgba(255,255,255,0.06); }

/* Expand on hover when collapsed (desktop) */
body.sidebar-collapsed .user-sidebar:hover { width: 260px; }
body.sidebar-collapsed .user-sidebar:hover .sidebar-label { opacity: 1; width: auto; }
body.sidebar-collapsed .user-sidebar:hover .sidebar-header { justify-content: space-between; padding: 1rem 1rem 0.5rem; }
body.sidebar-collapsed .user-sidebar:hover .sidebar-nav .nav-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
body.sidebar-collapsed .user-sidebar:hover .sidebar-nav .nav-link i { font-size: 0.9375rem; }
body.sidebar-collapsed .user-sidebar:hover .sidebar-section > p { height: auto; margin: 0; padding: 0 0.75rem; margin-bottom: 0.375rem; background: transparent; font-size: 10px; overflow: visible; }

/* Main content margin adjusts to sidebar */
.user-main { margin-inline-start: 260px; transition: margin 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
body.sidebar-collapsed .user-main { margin-inline-start: 72px; }

/* Topbar frosted glass */
.user-topbar {
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.dark .user-topbar {
    background: rgba(28,28,30,0.72);
}

/* Sidebar Scrollbar */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }

/* Mobile sidebar */
@media (max-width: 1023px) {
    .user-sidebar {
        width: 260px !important;
        transform: translateX(-100%);
    }
    [dir="rtl"] .user-sidebar {
        transform: translateX(100%);
    }
    .user-sidebar.show { transform: translateX(0); }
    .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
    .user-main { margin-inline-start: 0 !important; }
    .sidebar-collapse-btn { display: none !important; }
    body.sidebar-collapsed .sidebar-label { opacity: 1; width: auto; }
    body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
    body.sidebar-collapsed .sidebar-section > p { height: auto; margin: 0; padding: 0 0.75rem; margin-bottom: 0.375rem; background: transparent !important; font-size: 10px; overflow: visible; }
    body.sidebar-collapsed .sidebar-section { margin-top: 0.75rem; }
}

/* IMEI check digit input */
.imei-cd-input {
    width: 44px !important;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
    cursor: default;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease; }

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-pulse-slow { animation: pulse-slow 2s infinite; }

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

/* Live polling dot */
.live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse-slow 2s ease-in-out infinite;
}
.live-dot.error { background: #f59e0b; animation: none; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(156,163,175,0.2); border-radius: 10px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background-color: rgba(156,163,175,0.4); }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(75,85,99,0.3); }
.dark .custom-scrollbar:hover::-webkit-scrollbar-thumb { background-color: rgba(75,85,99,0.5); }

/* Print styles for PDF exports */
@media print {
    .no-print { display: none !important; }
}