/* LXNotes Utility Classes - Global CSS to replace inline styles */

:root {
    --brand-gradient: var(--primary-color);
    --brand-hover: var(--primary-hover);
}

/* Brand Gradients */
.bg-gradient-brand {
    background: var(--primary-color) !important;
}

.bg-gradient-brand-reverse {
    background: var(--primary-color) !important;
}

.text-brand-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.grayscale-50 {
    filter: grayscale(0.5) !important;
}

/* Visibility & Interaction */
.d-hide {
    display: none !important;
}

.d-block {
    display: block !important;
}

/* Error / alert text (e.g. PDF load failures) */
.text-error {
    color: #ff6b6b !important;
}

.pointer-none {
    pointer-events: none !important;
}

/* Opacity Utilities */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-20 {
    opacity: 0.2 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-85 {
    opacity: 0.85 !important;
}

.opacity-90 {
    opacity: 0.9 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* Z-Index Utilities */
.z-10 {
    z-index: 10 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-high {
    z-index: 1050 !important;
}

.z-max {
    z-index: 2000 !important;
}

/* Common Dimensions found in inline styles */
.size-45 {
    width: 45px !important;
    height: 45px !important;
}

.h-5px {
    height: 5px !important;
}

.h-6px {
    height: 6px !important;
}

.h-8px {
    height: 8px !important;
}

.min-h-44 {
    min-height: 44px !important;
}

/* Transitions */
.transition-all-2 {
    transition: all 0.2s ease !important;
}

.transition-bg {
    transition: background 0.15s !important;
}

.transition-width-6 {
    transition: width 0.6s ease !important;
}

.hover-scale-102:hover {
    transform: scale(1.02) !important;
}

/* Typography */
.font-bitter {
    font-family: 'Bitter', serif !important;
}

.text-preview {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
}

.font-07 {
    font-size: 0.7rem !important;
}

.font-075 {
    font-size: 0.75rem !important;
}

.font-5rem {
    font-size: 5rem !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.font-08 {
    font-size: 0.8rem !important;
}

.font-085 {
    font-size: 0.85rem !important;
}

.font-092 {
    font-size: 0.92rem !important;
}

.font-095 {
    font-size: 0.95rem !important;
}

.font-18 {
    font-size: 1.8rem !important;
}

.font-3rem {
    font-size: 3rem !important;
}

.font-072 {
    font-size: 0.72rem !important;
}

.font-078 {
    font-size: 0.78rem !important;
}

/* Icon & Sidebar Utilities */
.icon-fixed {
    font-size: 0.85rem !important;
    width: 18px !important;
    flex-shrink: 0 !important;
}

.icon-search-pos {
    left: 1.2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Dimensions */
.size-15 {
    width: 15px !important;
    height: 15px !important;
}

.size-44 {
    width: 44px !important;
    height: 44px !important;
}

.size-48 {
    width: 48px !important;
    height: 48px !important;
}

.size-50 {
    width: 50px !important;
    height: 50px !important;
}

.size-56 {
    width: 56px !important;
    height: 56px !important;
}

.size-64 {
    width: 64px !important;
    height: 64px !important;
}

.size-80 {
    width: 80px !important;
    height: 80px !important;
}

.size-200 {
    width: 200px !important;
    height: 200px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-w-100p {
    max-width: 100% !important;
}

.max-w-420 {
    max-width: 420px !important;
}

.bg-white-fade-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.98) 25%, rgba(255, 255, 255, 1) 50%) !important;
}

.bg-light-gray {
    background-color: #e9ecef !important;
}

.bg-light-gray-alt {
    background-color: #eee !important;
}

/* Borders */
.rounded-12 {
    border-radius: 12px !important;
}

.rounded-99 {
    border-radius: 99px !important;
}

.border-white-90 {
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Spacing */
.max-w-800 {
    max-width: 800px !important;
}

.py-1-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.ps-2-75 {
    padding-left: 2.75rem !important;
}

/* Line Height */
.lh-1-2 {
    line-height: 1.2 !important;
}

/* White Space */
.ws-nowrap {
    white-space: nowrap !important;
}

/* Brand Gradient Variants */
.bg-pink-gradient {
    background: var(--primary-color) !important;
    border: none !important;
}

.shadow-pink {
    box-shadow: 0 4px 15px var(--primary-shadow) !important;
}

.bg-yellow-gradient {
    background: linear-gradient(135deg, #fffbeb 60%, #fef9c3) !important;
}

.bg-orange-fade {
    background-color: #fff7ed !important;
}

.text-orange-dark {
    color: #c2410c !important;
}

.max-w-120 {
    max-width: 120px !important;
}

.max-w-350 {
    max-width: 350px !important;
}

.max-w-420 {
    max-width: 420px !important;
}

.max-w-700 {
    max-width: 700px !important;
}

.max-w-100p {
    max-width: 100% !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-h-80vh {
    max-height: 80vh !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.top-100 {
    top: 100px !important;
}

.font-07 {
    font-size: 0.7rem !important;
}

.font-072 {
    font-size: 0.72rem !important;
}

.font-075 {
    font-size: 0.75rem !important;
}

.font-078 {
    font-size: 0.78rem !important;
}

.font-08 {
    font-size: 0.8rem !important;
}

.font-09 {
    font-size: 0.9rem !important;
}

.font-092 {
    font-size: 0.92rem !important;
}

.font-095 {
    font-size: 0.95rem !important;
}

.font-12 {
    font-size: 1.2rem !important;
}

.font-15 {
    font-size: 1.5rem !important;
}

.font-16 {
    font-size: 1.6rem !important;
}

.font-18 {
    font-size: 1.8rem !important;
}

.font-3rem {
    font-size: 3rem !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.lh-1 {
    line-height: 1 !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.bg-blue-fade {
    background: linear-gradient(135deg, #4361ee22, #4361ee44) !important;
}

.bg-green-fade {
    background: linear-gradient(135deg, #22c55e22, #22c55e44) !important;
}

.bg-yellow-fade {
    background: linear-gradient(135deg, #f59e0b22, #f59e0b44) !important;
}

.bg-purple-fade {
    background: linear-gradient(135deg, #8b5cf622, #8b5cf644) !important;
}

.bg-sky-fade {
    background: linear-gradient(135deg, #0ea5e922, #0ea5e944) !important;
}

.bg-red-fade {
    background: linear-gradient(135deg, #ef444422, #ef444444) !important;
}

.bg-orange-fade {
    background-color: #fff7ed !important;
}

.bg-yellow-subtle {
    background-color: #fef3c7 !important;
}

.bg-blue-subtle {
    background-color: #eff6ff !important;
}

.bg-slate-50 {
    background-color: #f1f5f9 !important;
}

.text-blue-600 {
    color: #4361ee !important;
}

.text-green-600 {
    color: #22c55e !important;
}

.text-yellow-600 {
    color: #f59e0b !important;
}

.text-purple-600 {
    color: #8b5cf6 !important;
}

.text-sky-600 {
    color: #0ea5e9 !important;
}

.text-red-600 {
    color: #ef4444 !important;
}

.text-orange-dark {
    color: #c2410c !important;
}

.text-slate-600 {
    color: #475569 !important;
}

.text-yellow-dark {
    color: #b45309 !important;
}

.text-light-gray {
    color: #e2e8f0 !important;
}

.border-red-subtle {
    border: 1px solid #fee2e2 !important;
}

.size-46 {
    width: 46px !important;
    height: 46px !important;
}

.size-120 {
    width: 120px !important;
    height: 120px !important;
}

.bl-sky {
    border-left: 3px solid #0ea5e9 !important;
}

.bl-purple {
    border-left: 3px solid #8b5cf6 !important;
}

.bl-green {
    border-left: 3px solid #22c55e !important;
}

.bl-yellow {
    border-left: 3px solid #f59e0b !important;
}

.size-42 {
    width: 42px !important;
    height: 42px !important;
}

.size-52 {
    width: 52px !important;
    height: 52px !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.rounded-14 {
    border-radius: 14px !important;
}

.font-11 {
    font-size: 1.1rem !important;
}

.font-14 {
    font-size: 1.4rem !important;
}

.font-2rem {
    font-size: 2rem !important;
}

.bg-white-15 {
    background: rgba(255, 255, 255, 0.15) !important;
}

.size-36 {
    width: 36px !important;
    height: 36px !important;
}

.size-22 {
    width: 22px !important;
    height: 22px !important;
}

.rounded-6 {
    border-radius: 6px !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.bg-gradient-blue-violet {
    background: linear-gradient(135deg, #4361ee, #7c3aed) !important;
}

.bg-silver-gradient {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.bg-bkash {
    background-color: #e0107a !important;
}

.bg-nagad {
    background-color: #f15a24 !important;
}

.bg-rocket {
    background-color: #8b3fc8 !important;
}

.bg-bank {
    background-color: #64748b !important;
}

.font-065 {
    font-size: 0.65rem !important;
}

.size-64 {
    width: 64px !important;
    height: 64px !important;
}

.size-44 {
    width: 44px !important;
    height: 44px !important;
}

.font-092 {
    font-size: 0.92rem !important;
}

.font-078 {
    font-size: 0.78rem !important;
}

.activity-icon-primary {
    background: #EEF2FF !important;
    color: #4F46E5 !important;
}

.activity-icon-success {
    background: #ECFDF5 !important;
    color: #059669 !important;
}

.activity-icon-warning {
    background: #FFFBEB !important;
    color: #D97706 !important;
}

.activity-icon-danger {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

.transition-width-6 {
    transition: width 0.6s ease !important;
}

.rounded-99 {
    border-radius: 99px !important;
}

.bg-light-gray-alt {
    background-color: #f1f5f9 !important;
}

.font-095 {
    font-size: 0.95rem !important;
}

.font-072 {
    font-size: 0.72rem !important;
}

.min-h-100vh {
    min-height: 100vh !important;
}

.pe-none {
    pointer-events: none !important;
}

.pe-auto {
    pointer-events: auto !important;
}

.opacity-7 {
    opacity: 0.7 !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.z-10 {
    z-index: 10 !important;
}

.size-48 {
    width: 48px !important;
    height: 48px !important;
}

.max-h-48 {
    max-height: 48px !important;
}

.ls-05 {
    letter-spacing: 0.5px !important;
}

.py-1-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.font-088 {
    font-size: 0.88rem !important;
}

.font-093 {
    font-size: 0.93rem !important;
}

/* Flex Utilities that might be missing or need to be cleaner */
.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-1-5 {
    gap: 0.375rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.accent-primary {
    accent-color: #0c9dbf !important;
}

.size-14 {
    width: 14px !important;
    height: 14px !important;
}

.size-16 {
    width: 16px !important;
    height: 16px !important;
}

.size-28 {
    width: 28px !important;
    height: 28px !important;
}

.max-h-260 {
    max-height: 260px !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

.size-40 {
    width: 40px !important;
    height: 40px !important;
}

.size-6 {
    width: 6px !important;
    height: 6px !important;
}

.font-12 {
    font-size: 1.2rem !important;
}

.font-15 {
    font-size: 1.5rem !important;
}

.opacity-2 {
    opacity: 0.2 !important;
}

.lh-1 {
    line-height: 1 !important;
}

.lh-1-8 {
    line-height: 1.8 !important;
}

.mix-blend-hard-light {
    mix-blend-mode: hard-light !important;
}

.mix-blend-plus-darker {
    mix-blend-mode: plus-darker !important;
}

.min-h-50vh {
    min-height: 50vh !important;
}

.text-slate-600 {
    color: #475569 !important;
}

.font-075 {
    font-size: 0.75rem !important;
}

.p-2-8 {
    padding: 2px 8px !important;
}

.max-w-480 {
    max-width: 480px !important;
}

.max-w-350 {
    max-width: 350px !important;
}

.max-w-120 {
    max-width: 120px !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.min-h-100vh {
    min-height: 100vh !important;
}