/*
 * Tailwind CSS - Complete Version for Backend System
 */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
::before,::after{--tw-content:''}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-size:16px}
body{margin:0;line-height:inherit;font-family:Inter,system-ui,-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}

/* CSS Variables */
:root{--primary:#1a365d;--secondary:#2a4365;--accent:#3182ce;--light:#f7fafc;--dark:#2d3748;--success:#48bb78;--warning:#ed8936;--danger:#f56565;--info:#4299e1;--sidebar:#1e293b;--sidebarHover:#334155;--primary-rgb:26,54,93;--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--indigo-500:#6366f1;--indigo-600:#4f46e5;--emerald-500:#10b981;--emerald-600:#059669;--amber-500:#f59e0b;--amber-600:#d97706;--rose-500:#f43f5e;--rose-600:#e11d48;--purple-500:#a855f7;--purple-600:#9333ea}

/* Reset */
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button{-webkit-appearance:button;background-color:transparent;background-image:none}
button,[role="button"]{cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
hr{height:0;border:0}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
ul,ol{list-style:none}
ol,ul,menu{list-style:none;margin:0;padding:0}

/* Utility Classes */
.glass-effect{background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.18);box-shadow:0 8px 32px rgba(31,38,135,0.37)}
.hover-scale{transition:transform 0.3s ease}
.hover-scale:hover{transform:scale(1.03)}
.transition-all-300{transition:all 300ms ease-in-out}
.text-shadow{text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.content-auto{content-visibility:auto}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(calc(-100% - 24px))}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideInRight{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes zoomIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes urgentPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,101,101,0.4)}50%{box-shadow:0 0 0 8px rgba(245,101,101,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

/* Animation Classes */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0);animation:fadeInUp 0.6s ease-out}
.animate-marquee{animation:marquee 30s linear infinite}
.animate-marquee:hover{animation-play-state:paused}
.animate-spin{animation:spin 1s linear infinite}
.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1)infinite}
.card-hover{transition:all 0.3s ease}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
.slide-in{animation:slideIn 0.3s ease}
.slide-in-right{animation:slideInRight 0.3s ease}
.zoom-in{animation:zoomIn 0.3s ease}
.loading-spinner{animation:spin 1s linear infinite}
.mobile-menu{transform:translateX(-100%);transition:transform 0.3s ease}
.mobile-menu.open{transform:translateX(0)}
.overlay{background:rgba(0,0,0,0.5);backdrop-filter:blur(2px)}
.progress-bar{transition:width 0.5s ease}
.notification-item{transition:all 0.3s ease}
.notification-item:hover{background:#f8fafc}
.notification-item.unread{border-left:3px solid #3182ce}
.shake{animation:shake 0.5s ease}
.bounce-in{animation:bounceIn 0.5s ease}
.tooltip{position:relative}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:100}
.tooltip:hover::after{opacity:1}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton 1.5s infinite}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.nav-item-active{background:linear-gradient(90deg,#3182ce 0%,#2b6cb0 100%)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.status-online{background:#48bb78}
.status-offline{background:#cbd5e1}
.priority-high{border-left:4px solid #f56565}
.priority-medium{border-left:4px solid #ed8936}
.priority-low{border-left:4px solid #48bb78}
.shortcut-badge{font-family:'Courier New',monospace;font-size:10px;background:#e2e8f0;padding:2px 6px;border-radius:4px}
.checkbox-custom{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;cursor:pointer;position:relative}
.checkbox-custom:checked{background:#3182ce;border-color:#3182ce}
.checkbox-custom:checked::after{content:'✓';position:absolute;color:#fff;font-size:12px;top:50%;left:50%;transform:translate(-50%,-50%)}
.priority-urgent{animation:urgentPulse 1s infinite}
.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;margin-right:4px}
.badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;font-size:11px}
.stat-card{position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%)}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Focus Styles */
input:focus,button:focus,a:focus{outline:2px solid var(--accent);outline-offset:2px}
input:focus,button:focus,a:focus{outline:2px solid #3b82f6;outline-offset:2px}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}

/* Skip to content */
.skip-to-content{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;padding:8px;z-index:1000}
.skip-to-content:focus{top:0}

/* Colors */
.bg-primary{background-color:var(--primary)}
.bg-secondary{background-color:var(--secondary)}
.bg-accent{background-color:var(--accent)}
.bg-success{background-color:var(--success)}
.bg-warning{background-color:var(--warning)}
.bg-danger{background-color:var(--danger)}
.bg-info{background-color:var(--info)}
.bg-sidebar{background-color:var(--sidebar)}
.bg-sidebarHover{background-color:var(--sidebarHover)}
.bg-light{background-color:var(--light)}
.bg-dark{background-color:var(--dark)}
.bg-white{background-color:#fff}
.bg-slate-50{background-color:var(--slate-50)}
.bg-slate-100{background-color:var(--slate-100)}
.bg-slate-200{background-color:var(--slate-200)}
.bg-slate-300{background-color:var(--slate-300)}
.bg-slate-400{background-color:var(--slate-400)}
.bg-slate-500{background-color:var(--slate-500)}
.bg-slate-600{background-color:var(--slate-600)}
.bg-slate-700{background-color:var(--slate-700)}
.bg-slate-800{background-color:var(--slate-800)}
.bg-slate-900{background-color:var(--slate-900)}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}
.bg-gray-300{background-color:#d1d5db}
.bg-gray-400{background-color:#9ca3af}
.bg-gray-500{background-color:#6b7280}
.bg-gray-600{background-color:#4b5563}
.bg-gray-700{background-color:#374151}
.bg-gray-800{background-color:#1f2937}
.bg-gray-900{background-color:#111827}
.bg-blue-50{background-color:var(--blue-50)}
.bg-blue-500{background-color:var(--blue-500)}
.bg-blue-600{background-color:var(--blue-600)}
.bg-blue-700{background-color:var(--blue-700)}
.bg-indigo-500{background-color:var(--indigo-500)}
.bg-indigo-600{background-color:var(--indigo-600)}
.bg-emerald-500{background-color:var(--emerald-500)}
.bg-emerald-600{background-color:var(--emerald-600)}
.bg-amber-500{background-color:var(--amber-500)}
.bg-amber-600{background-color:var(--amber-600)}
.bg-rose-500{background-color:var(--rose-500)}
.bg-rose-600{background-color:var(--rose-600)}
.bg-purple-500{background-color:var(--purple-500)}
.bg-purple-600{background-color:var(--purple-600)}
.bg-opacity-10{background-color:rgba(26,54,93,0.1)}
.bg-opacity-20{background-color:rgba(26,54,93,0.2)}
.bg-opacity-80{background-color:rgba(26,54,93,0.8)}
.text-opacity-90{color:rgba(255,255,255,0.9)}
.bg-gradient-to-r{--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-image:linear-gradient(to right,var(--tw-gradient-from),var(--tw-gradient-to))}
.bg-gradient-to-br{--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-image:linear-gradient(to bottom right,var(--tw-gradient-from),var(--tw-gradient-to))}
.from-primary{--tw-gradient-from:var(--primary)}
.from-secondary{--tw-gradient-from:var(--secondary)}
.from-accent{--tw-gradient-from:var(--accent)}
.from-warning{--tw-gradient-from:var(--warning)}
.from-danger{--tw-gradient-from:var(--danger)}
.from-success{--tw-gradient-from:var(--success)}
.to-primary{--tw-gradient-to:var(--primary)}
.to-secondary{--tw-gradient-to:var(--secondary)}
.to-warning{--tw-gradient-to:var(--warning)}
.to-danger{--tw-gradient-to:var(--danger)}
.to-success{--tw-gradient-to:var(--success)}
.from-blue-600{--tw-gradient-from:var(--blue-600)}
.to-blue-700{--tw-gradient-to:var(--blue-700)}
.from-indigo-600{--tw-gradient-from:var(--indigo-600)}
.to-purple-600{--tw-gradient-to:var(--purple-600)}
.from-emerald-500{--tw-gradient-from:var(--emerald-500)}
.to-emerald-600{--tw-gradient-to:var(--emerald-600)}
.from-amber-500{--tw-gradient-from:var(--amber-500)}
.to-amber-600{--tw-gradient-to:var(--amber-600)}
.from-rose-500{--tw-gradient-from:var(--rose-500)}
.to-rose-600{--tw-gradient-to:var(--rose-600)}

/* Text Colors */
.text-primary{color:var(--primary)}
.text-secondary{color:var(--secondary)}
.text-accent{color:var(--accent)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-danger{color:var(--danger)}
.text-info{color:var(--info)}
.text-light{color:var(--light)}
.text-dark{color:var(--dark)}
.text-white{color:#fff}
.text-slate-300{color:var(--slate-300)}
.text-slate-400{color:var(--slate-400)}
.text-slate-500{color:var(--slate-500)}
.text-slate-600{color:var(--slate-600)}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-slate-900{color:var(--slate-900)}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-800{color:#1f2937}
.text-gray-900{color:#111827}
.text-blue-600{color:var(--blue-600)}
.text-blue-700{color:var(--blue-700)}
.text-green-600{color:#16a34a}
.text-red-500{color:#ef4444}
.text-red-600{color:#dc2626}

/* Typography */
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:0.05em}
.leading-relaxed{line-height:1.625}
.leading-tight{line-height:1.25}
.underline{text-decoration-line:underline}
.line-through{text-decoration-line:line-through}

/* Layout */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.bottom-0{bottom:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.z-[200]{z-index:200}
.float-right{float:right}
.clear-both{clear:both}
.isolate{isolation:isolate}
.float-left{float:left}

/* Sizing */
.w-2{width:0.5rem}
.w-3{width:0.75rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-8{width:2rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-24{width:6rem}
.w-28{width:7rem}
.w-32{width:8rem}
.w-36{width:9rem}
.w-40{width:10rem}
.w-48{width:12rem}
.w-56{width:14rem}
.w-64{width:16rem}
.w-72{width:18rem}
.w-80{width:20rem}
.w-96{width:24rem}
.w-full{width:100%}
.w-1\/2{width:50%}
.w-1\/3{width:33.333333%}
.w-2\/3{width:66.666667%}
.w-3\/4{width:75%}
.w-4\/5{width:80%}
.w-screen{width:100vw}
.h-2{height:0.5rem}
.h-3{height:0.75rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-28{height:7rem}
.h-32{height:8rem}
.h-36{height:9rem}
.h-40{height:10rem}
.h-48{height:12rem}
.h-56{height:14rem}
.h-64{height:16rem}
.h-full{height:100%}
.h-screen{height:100vh}
.min-h-screen{min-height:100vh}
.min-h-0{min-height:0px}
.max-w-xs{max-width:20rem}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-full{max-width:100%}
.min-w-0{min-width:0px}
.min-w-full{min-width:100%}
.min-w-[120px]{min-width:120px}
.min-w-[160px]{min-width:160px}
.min-w-[200px]{min-width:200px}

/* Spacing */
.m-0{margin:0}
.m-auto{margin:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.my-2{margin-top:0.5rem;margin-bottom:0.5rem}
.my-3{margin-top:0.75rem;margin-bottom:0.75rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.my-12{margin-top:3rem;margin-bottom:3rem}
.my-auto{margin-top:auto;margin-bottom:auto}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mr-1{margin-right:0.25rem}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mr-4{margin-right:1rem}
.mr-6{margin-right:1.5rem}
.mr-8{margin-right:2rem}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.ml-1{margin-left:0.25rem}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}
.ml-5{margin-left:1.25rem}
.ml-6{margin-left:1.5rem}
.ml-8{margin-left:2rem}
.ml-10{margin-left:2.5rem}
.ml-12{margin-left:3rem}
.ml-16{margin-left:4rem}
.ml-20{margin-left:5rem}
.ml-24{margin-left:6rem}
.ml-32{margin-left:8rem}
.ml-40{margin-left:10rem}
.ml-48{margin-left:12rem}
.ml-56{margin-left:14rem}
.ml-64{margin-left:16rem}
.ml-auto{margin-left:auto}
.ml-auto{margin-left:auto}
.mx-2{margin-left:0.5rem;margin-right:0.5rem}
.mx-3{margin-left:0.75rem;margin-right:0.75rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.p-0{padding:0}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.p-12{padding:3rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-2{padding-top:0.5rem}
.pt-4{padding-top:1rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.pt-10{padding-top:2.5rem}
.pt-12{padding-top:3rem}
.pt-16{padding-top:4rem}
.pt-20{padding-top:5rem}
.pt-24{padding-top:6rem}
.pt-28{padding-top:7rem}
.pt-32{padding-top:8rem}
.pb-2{padding-bottom:0.5rem}
.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pb-10{padding-bottom:2.5rem}
.pb-12{padding-bottom:3rem}
.pb-16{padding-bottom:4rem}
.pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem}

/* Display */
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.table{display:table}
.hidden{display:none !important}

/* Flexbox */
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-nowrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-items-center{justify-items:center}
.justify-items-start{justify-items:flex-start}
.content-center{align-content:center}
.flex-1{flex:1 1 0%}
.flex-auto{flex:1 1 auto}
.flex-initial{flex:0 1 auto}
.flex-none{flex:none}
.flex-shrink-0{flex-shrink:0}
.flex-shrink{flex-shrink:1}
.flex-grow-0{flex-grow:0}
.flex-grow{flex-grow:1}
.place-self-center{place-self:center}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.row-span-1{grid-row:span 1/span 1}
.row-span-2{grid-row:span 2/span 2}

/* Position */
.static{position:static}
.sticky{position:sticky}
.absolute-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Overflow */
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.overflow-x-hidden{overflow-x:hidden}
.overflow-y-hidden{overflow-y:hidden}

/* Text */
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-justify{text-align:justify}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre{white-space:pre}
.whitespace-pre-wrap{white-space:pre-wrap}
.whitespace-break-spaces{white-space:break-spaces}
.break-words{overflow-wrap:break-word}
.break-all{word-break:break-all}
.break-normal{word-break:normal;overflow-wrap:normal}

/* Border */
.border{border-width:1px}
.border-2{border-width:2px}
.border-0{border-width:0}
.border-t{border-top-width:1px}
.border-b{border-bottom-width:1px}
.border-r{border-right-width:1px}
.border-l{border-left-width:1px}
.border-x{border-left-width:1px;border-right-width:1px}
.border-y{border-top-width:1px;border-bottom-width:1px}
.border-slate-700{border-color:var(--slate-700)}
.border-slate-200{border-color:var(--slate-200)}
.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.border-white{border-color:#fff}
.border-primary{border-color:var(--primary)}
.border-accent{border-color:var(--accent)}
.border-opacity-10{border-color:rgba(255,255,255,0.1)}
.border-opacity-20{border-color:rgba(255,255,255,0.2)}
.border-opacity-50{border-color:rgba(255,255,255,0.5)}
.rounded{border-radius:0.25rem}
.rounded-sm{border-radius:0.125rem}
.rounded-md{border-radius:0.375rem}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}
.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}

/* Shadow */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.shadow-none{box-shadow:0 0 #0000}
.shadow-lg\:hover:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}

/* Transform */
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.transform-none{transform:none}
.scale-1{transform:scale(1)}
.scale-95{transform:scale(0.95)}
.scale-105{transform:scale(1.05)}
.scale-110{transform:scale(1.1)}
.scale-0{transform:scale(0)}
.translate-x-0{transform:translateX(0)}
.translate-x-64{transform:translateX(16rem)}
.translate-x-full{transform:translateX(100%)}
.-translate-x-full{transform:translateX(-100%)}

/* Transition */
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-all-300{transition:all 300ms ease-in-out}
.duration-75{transition-duration:75ms}
.duration-100{transition-duration:100ms}
.duration-150{transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.ease{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}
.ease-in{transition-timing-function:cubic-bezier(0.4,0,1,1)}
.ease-in-out{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}
.ease-out{transition-timing-function:cubic-bezier(0,1,0,1)}

/* Opacity */
.opacity-0{opacity:0}
.opacity-10{opacity:0.1}
.opacity-20{opacity:0.2}
.opacity-25{opacity:0.25}
.opacity-30{opacity:0.3}
.opacity-40{opacity:0.4}
.opacity-50{opacity:0.5}
.opacity-60{opacity:0.6}
.opacity-70{opacity:0.7}
.opacity-80{opacity:0.8}
.opacity-90{opacity:0.9}
.opacity-100{opacity:1}

/* Cursor */
.cursor-pointer{cursor:pointer}
.cursor-default{cursor:default}
.cursor-not-allowed{cursor:not-allowed}
.cursor-wait{cursor:wait}

/* Pointer Events */
.pointer-events-none{pointer-events:none}
.pointer-events-auto{pointer-events:auto}
.pointer-events-events{pointer-events:auto}

/* Select */
.select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.select-text{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
.select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.select-auto{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}

/* Visibility */
.invisible{visibility:hidden}
.visible{visibility:visible}

/* Z-Index */
.z-0{z-index:0}
.z-1{z-index:1}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.z-auto{z-index:auto}

/* Container */
.container{width:100%;margin-left:auto;margin-right:auto}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}

/* Spaces */
.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem*var(--tw-space-x-reverse));margin-left:calc(0.25rem*(1 - var(--tw-space-x-reverse)))}
.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem*var(--tw-space-x-reverse));margin-left:calc(0.5rem*(1 - var(--tw-space-x-reverse)))}
.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem*var(--tw-space-x-reverse));margin-left:calc(0.75rem*(1 - var(--tw-space-x-reverse)))}
.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}
.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem*var(--tw-space-x-reverse));margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))}
.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem*var(--tw-space-y-reverse))}
.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem*var(--tw-space-y-reverse))}
.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem*var(--tw-space-y-reverse))}
.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}
.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}
.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}

/* Hover States */
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:scale-110:hover{transform:scale(1.1}
.hover\:bg-opacity-90:hover{background-color:rgba(26,54,93,0.9)}
.hover\:bg-opacity-20:hover{background-color:rgba(26,54,93,0.2)}
.hover\:bg-sidebarHover:hover{background-color:var(--sidebarHover)}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-slate-100:hover{background-color:var(--slate-100)}
.hover\:bg-slate-200:hover{background-color:var(--slate-200)}
.hover\:bg-white:hover{background-color:#fff}
.hover\:bg-blue-600:hover{background-color:var(--blue-600)}
.hover\:text-accent:hover{color:var(--accent)}
.hover\:text-primary:hover{color:var(--primary)}
.hover\:text-white:hover{color:#fff}
.hover\:text-slate-800:hover{color:var(--slate-800)}
.hover\:text-blue-700:hover{color:var(--blue-700)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}
.hover\:underline:hover{text-decoration-line:underline}
.hover\:translate-y-3:hover{transform:translateY(-0.75rem)}
.hover\:translate-y-1\/2:hover{transform:translateY(-0.125rem)}

/* Active States */
.active\:nav-item-active.active{background:linear-gradient(90deg,#3182ce 0%,#2b6cb0 100%)}

/* Responsive */
@media (max-width:639px){.max-sm\:hidden{display:none}}
@media (max-width:767px){.max-md\:hidden{display:none}}
@media (min-width:640px){
  .sm\:hidden{display:none}
  .sm\:flex{display:flex}
  .sm\:block{display:block}
  .sm\:grid{display:grid}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-24{padding-top:6rem;padding-bottom:6rem}
  .sm\:pt-32{padding-top:8rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:w-64{width:16rem}
  .sm\:w-72{width:18rem}
  .sm\:h-56{height:14rem}
  .sm\:h-64{height:16rem}
  .sm\:w-full{width:100%}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:flex-col{flex-direction:column}
  .sm\:flex-row{flex-direction:row}
  .sm\:translate-x-0{transform:translateX(0)}
}
@media (min-width:768px){
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:block{display:block}
  .md\:grid{display:grid}
  .md\:w-1\/2{width:50%}
  .md\:w-64{width:16rem}
  .md\:w-80{width:20rem}
  .md\:w-96{width:24rem}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:flex-col{flex-direction:column}
  .md\:flex-row{flex-direction:row}
  .md\:translate-x-0{transform:translateX(0)}
  .md\:static{position:static}
  .md\:sticky{position:sticky}
  .md\:top-0{top:0}
  .md\:text-left{text-align:left}
  .md\:text-right{text-align:right}
  .md\:pr-12{padding-right:3rem}
  .md\:mb-0{margin-bottom:0}
}
@media (min-width:1024px){
  .lg\:hidden{display:none}
  .lg\:flex{display:flex}
  .lg\:block{display:block}
  .lg\:grid{display:grid}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:translate-x-0{transform:translateX(0)}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
  .lg\:w-1\/2{width:50%}
  .lg\:w-1\/3{width:33.333333%}
  .lg\:w-2\/3{width:66.666667%}
  .lg\:ml-64{margin-left:16rem}
}
@media (min-width:1280px){
  .xl\:hidden{display:none}
  .xl\:flex{display:flex}
  .xl\:block{display:block}
  .xl\:grid{display:grid}
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Additional Utilities */
.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}
.divide-y-2>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(2px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(2px*var(--tw-divide-y-reverse))}
.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}

/* Ring */
.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow)}
.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow)}
.ring-offset-2{--tw-ring-offset-width:2px}
.ring-offset-4{--tw-ring-offset-width:4px}

/* Focus States */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow)}
.focus\:ring-accent:focus{--tw-ring-color:var(--accent)}
.focus\:border-transparent:focus{border-color:transparent}
.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}
.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}
.ring-offset-white{--tw-ring-offset-color:#fff}

/* Blur */
.blur-sm{--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-md{--tw-blur:blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-xl{--tw-blur:blur(24px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-2xl{--tw-blur:blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-none{--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

/* Order */
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.order-4{order:4}
.order-5{order:5}
.order-6{order:6}
.order-7{order:7}
.order-8{order:8}
.order-9{order:9}
.order-10{order:10}
.order-11{order:11}
.order-12{order:12}
.order-first{order:-9999}
.order-last{order:9999}
.order-none{order:0}

/* Additional State Classes */
.hover\:bg-blue-600:hover{background-color:var(--blue-600)}
.hover\:bg-indigo-600:hover{background-color:var(--indigo-600)}
.hover\:bg-emerald-600:hover{background-color:var(--emerald-600)}
.hover\:bg-amber-600:hover{background-color:var(--amber-600)}
.hover\:bg-rose-600:hover{background-color:var(--rose-600)}

/* Line Clamp */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* Cyan Colors */
.bg-cyan-100{background-color:#cffafe}
.bg-cyan-500{background-color:#06b6d4}
.bg-cyan-600{background-color:#0891b2}
.text-cyan-600{color:#0891b2}
.hover\:bg-cyan-600:hover{background-color:#0891b2}

/* Green Colors */
.bg-green-100{background-color:#dcfce7}
.bg-green-500{background-color:#22c55e}
.bg-green-600{background-color:#16a34a}
.text-green-600{color:#16a34a}
.hover\:bg-green-600:hover{background-color:#16a34a}

/* Orange Colors */
.bg-orange-100{background-color:#ffedd5}
.bg-orange-500{background-color:#f97316}
.bg-orange-600{background-color:#ea580c}
.text-orange-600{color:#ea580c}
.hover\:bg-orange-600:hover{background-color:#ea580c}

/* Purple Hover */
.hover\:bg-purple-600:hover{background-color:#9333ea}