*,*::before,*::after { box-sizing: border-box; }
body { margin: 0; font-family: "Vazir", Tahoma, Arial, sans-serif; background: #f8fafc; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
@keyframes tw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin {animation: tw-spin 1s linear infinite;}
/* Manual additions for tokens not covered by the generated subset */
.mx-auto {margin-left: auto; margin-right: auto;}
.opacity-75 {opacity: 0.75;}
.resize-none {resize: none;}
.sticky {position: sticky;}
.underline {text-decoration: underline;}
.h-\[calc\(100vh-200px\)\] {height: calc(100vh - 200px);}
.max-h-\[90vh\] {max-height: 90vh;}
.table-responsive {width: 100%; overflow-x: auto;}
.table-responsive table {min-width: 800px;}
.table-mobile {display: table; width: 100%;}
.mobile-backdrop {position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40;}
.mobile-sidebar {position: fixed; top: 0; left: 0; height: 100%; width: 280px; background: #fff; z-index: 50; transform: translateX(-100%); transition: transform 0.3s ease;}
.mobile-sidebar.open {transform: translateX(0);}
.mobile-button {height: 48px;}
.mobile-form-input {height: 48px;}
.card-shadow {box-shadow: 0 10px 25px rgba(0,0,0,0.1);}
.gradient-bg {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.hover-scale {transition: transform 0.2s;}
.hover-scale:hover {transform: scale(1.02);}
.notification-badge {animation: pulse 2s infinite;}
.online-indicator {width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite;}
.connection-status {position: fixed; top: 20px; left: 20px; z-index: 1000; width: 12px; height: 12px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 0 rgba(16,185,129,1); animation: pulse-green 2s infinite;}
.sidebar-item {transition: all 0.3s ease;}
.sidebar-item:hover {background: rgba(255,255,255,0.1); transform: translateX(-5px);}
.modal-overlay {position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 60;}
.modal-panel {background: #ffffff; border-radius: 0.75rem; width: 90%; max-width: 520px; padding: 1.5rem; max-height: 90vh; overflow-y: auto;}
.connected {background: #10b981;}
.disconnected {background: #ef4444;}
@keyframes pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}
@keyframes pulse-green {0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);} 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);} 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);} }
@media (min-width: 640px) {
  .sm\:block {display: block;}
  .sm\:flex {display: flex;}
  .sm\:flex-row {flex-direction: row;}
  .sm\:gap-6 {gap: 1.5rem;}
  .sm\:grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .sm\:hidden {display: none;}
  .sm\:items-center {align-items: center;}
  .sm\:justify-between {justify-content: space-between;}
  .sm\:p-6 {padding: 1.5rem;}
  .sm\:px-6 {padding-left: 1.5rem; padding-right: 1.5rem;}
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
  .sm\:table-header-group {display: table-header-group;}
  .sm\:text-2xl {font-size: 1.5rem; line-height: 2rem;}
  .sm\:text-xl {font-size: 1.25rem; line-height: 1.75rem;}
  .sm\:w-auto {width: auto;}
}
@media (max-width: 768px) {
  .table-responsive {display: block; width: 100%;}
  .table-responsive table {display: none;}
  .table-responsive .table-mobile {display: block;}
}
.bg-blue-100 {background-color: #dbeafe;}
.bg-blue-50 {background-color: #eff6ff;}
.bg-blue-600 {background-color: #2563eb;}
.bg-gray-100 {background-color: #f3f4f6;}
.bg-gray-300 {background-color: #d1d5db;}
.bg-gray-50 {background-color: #f9fafb;}
.bg-gray-500 {background-color: #6b7280;}
.bg-green-100 {background-color: #d1fae5;}
.bg-green-50 {background-color: #ecfdf3;}
.bg-green-600 {background-color: #16a34a;}
.bg-orange-100 {background-color: #ffedd5;}
.bg-purple-100 {background-color: #f3e8ff;}
.bg-red-100 {background-color: #fee2e2;}
.bg-red-500 {background-color: #ef4444;}
.bg-red-600 {background-color: #dc2626;}
.bg-white {background-color: #ffffff;}
.block {display: block;}
.border {border: 1px solid #e5e7eb;}
.border-2 {border-width: 2px;}
.border-b {border-bottom-width: 1px;}
.border-b-2 {border-bottom-width: 2px;}
.border-blue-200 {border-color: #bfdbfe; border-style: solid;}
.border-blue-500 {border-color: #3b82f6; border-style: solid;}
.border-blue-600 {border-color: #2563eb; border-style: solid;}
.border-dashed {border-style: dashed;}
.border-gray-100 {border-color: #f3f4f6; border-style: solid;}
.border-gray-200 {border-color: #e5e7eb; border-style: solid;}
.border-gray-300 {border-color: #d1d5db; border-style: solid;}
.border-green-200 {border-color: #a7f3d0; border-style: solid;}
.border-r-4 {border-right-width: 4px;}
.border-t {border-top-width: 1px;}
.cursor-pointer {cursor: pointer;}
.duration-200 {transition-duration: 200ms;}
.flex {display: flex;}
.flex-1 {flex: 1 1 0%;}
.flex-col {flex-direction: column;}
.flex-row-reverse {flex-direction: row-reverse;}
.border-transparent:focus {border-color: transparent;}
.ring-2:focus {box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(59,130,246,0.4)); outline: none;}
.ring-blue-500:focus {--tw-ring-color: #3b82f6;}
.ring-green-500:focus {--tw-ring-color: #22c55e;}
.font-bold {font-weight: 700;}
.font-medium {font-weight: 500;}
.font-semibold {font-weight: 600;}
.font-vazir {font-family: "Vazir", Tahoma, Arial, sans-serif;}
.gap-4 {gap: 1rem;}
.gap-6 {gap: 1.5rem;}
.grid {display: grid;}
.grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.h-10 {height: 2.5rem;}
.h-12 {height: 3rem;}
.h-16 {height: 4rem;}
.h-20 {height: 5rem;}
.h-4 {height: 1rem;}
.h-48 {height: 12rem;}
.h-5 {height: 1.25rem;}
.h-6 {height: 1.5rem;}
.h-64 {height: 16rem;}
.h-8 {height: 2rem;}
.h-\\\1calc(100vh-200px)\\\1 {height: calc(100vh-200px);}
.h-auto {height: auto;}
.h-screen {height: 100vh;}
.hidden {display: none;}
.bg-blue-50:hover {background-color: #eff6ff;}
.bg-blue-700:hover {background-color: #1d4ed8;}
.bg-gray-100:hover {background-color: #f3f4f6;}
.bg-gray-200:hover {background-color: #e5e7eb;}
.bg-gray-400:hover {background-color: #9ca3af;}
.bg-gray-50:hover {background-color: #f9fafb;}
.bg-gray-600:hover {background-color: #4b5563;}
.bg-green-50:hover {background-color: #ecfdf3;}
.bg-green-700:hover {background-color: #15803d;}
.bg-red-50:hover {background-color: #fef2f2;}
.bg-red-700:hover {background-color: #b91c1c;}
.border-green-500:hover {border-color: #22c55e; border-style: solid;}
.text-blue-600:hover {color: #2563eb;}
.text-blue-800:hover {color: #1e40af;}
.text-blue-900:hover {color: #1e3a8a;}
.text-gray-700:hover {color: #374151;}
.text-gray-800:hover {color: #1f2937;}
.text-green-600:hover {color: #16a34a;}
.text-green-800:hover {color: #166534;}
.text-orange-800:hover {color: #9a3412;}
.text-red-800:hover {color: #991b1b;}
.inline {display: inline;}
.inline-flex {display: inline-flex;}
.items-center {align-items: center;}
.items-end {align-items: flex-end;}
.items-start {align-items: flex-start;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.leading-relaxed {line-height: 1.625;}
@media (min-width: 1024px) {.lg\:block {display: block;}}
@media (min-width: 1024px) {.lg\:col-span-1 {grid-column: span 1 / span 1;}}
@media (min-width: 1024px) {.lg\:col-span-2 {grid-column: span 2 / span 2;}}
@media (min-width: 1024px) {.lg\:col-span-3 {grid-column: span 3 / span 3;}}
@media (min-width: 1024px) {.lg\:grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (min-width: 1024px) {.lg\:grid-cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (min-width: 1024px) {.lg\:hidden {display: none;}}
@media (min-width: 1024px) {.lg\:max-w-md {max-width: 28rem;}}
.max-h-32 {max-height: 8rem;}
.max-h-96 {max-height: 24rem;}
.max-h-\\\190vh\\\1 {max-height: 90vh;}
.max-w-4xl {max-width: 56rem;}
.max-w-full {max-width: 100%;}
.max-w-md {max-width: 28rem;}
.max-w-xs {max-width: 20rem;}
.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;}
@media (min-width: 768px) {.md\:grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (min-width: 768px) {.md\:grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}}
.min-h-screen {min-height: 100vh;}
.ml-2 {margin-left: 0.5rem;}
.ml-3 {margin-left: 0.75rem;}
.ml-4 {margin-left: 1rem;}
.mr-2 {margin-right: 0.5rem;}
.mt-1 {margin-top: 0.25rem;}
.mt-2 {margin-top: 0.5rem;}
.mt-4 {margin-top: 1rem;}
.mt-6 {margin-top: 1.5rem;}
.mt-8 {margin-top: 2rem;}
.mx-4 {margin-left: 1rem; margin-right: 1rem;}
.my-4 {margin-top: 1rem; margin-bottom: 1rem;}
.my-6 {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.object-cover {object-fit: cover;}
.overflow-y-auto {overflow-y: auto;}
.p-2 {padding: 0.5rem;}
.p-3 {padding: 0.75rem;}
.p-4 {padding: 1rem;}
.p-6 {padding: 1.5rem;}
.p-8 {padding: 2rem;}
.pt-4 {padding-top: 1rem;}
.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-6 {padding-left: 1.5rem; padding-right: 1.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-8 {padding-top: 2rem; padding-bottom: 2rem;}
.rounded {border-radius: 0.25rem;}
.rounded-2xl {border-radius: 1rem;}
.rounded-b-xl {border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem;}
.rounded-full {border-radius: 9999px;}
.rounded-lg {border-radius: 0.5rem;}
.rounded-t-xl {border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;}
.rounded-xl {border-radius: 0.75rem;}
.shadow-sm {box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.space-x-reverse {--tw-space-x-reverse: 1;}
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.text-2xl {font-size: 1.5rem; line-height: 2rem;}
.text-blue-600 {color: #2563eb;}
.text-blue-700 {color: #1d4ed8;}
.text-blue-800 {color: #1e40af;}
.text-center {text-align: center;}
.text-gray-300 {color: #d1d5db;}
.text-gray-400 {color: #9ca3af;}
.text-gray-500 {color: #6b7280;}
.text-gray-600 {color: #4b5563;}
.text-gray-700 {color: #374151;}
.text-gray-800 {color: #1f2937;}
.text-green-600 {color: #16a34a;}
.text-green-700 {color: #15803d;}
.text-green-800 {color: #166534;}
.text-lg {font-size: 1.125rem; line-height: 1.75rem;}
.text-orange-600 {color: #ea580c;}
.text-purple-600 {color: #9333ea;}
.text-red-500 {color: #ef4444;}
.text-red-600 {color: #dc2626;}
.text-red-800 {color: #991b1b;}
.text-right {text-align: right;}
.text-sm {font-size: 0.875rem; line-height: 1.25rem;}
.text-white {color: #ffffff;}
.text-xl {font-size: 1.25rem; line-height: 1.75rem;}
.text-xs {font-size: 0.75rem; line-height: 1rem;}
.top-0 {top: 0;}
.transition {transition: all 150ms ease-in-out;}
.transition-colors {transition-property: color, background-color, border-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-in-out;}
.w-10 {width: 2.5rem;}
.w-12 {width: 3rem;}
.w-16 {width: 4rem;}
.w-20 {width: 5rem;}
.w-4 {width: 1rem;}
.w-5 {width: 1.25rem;}
.w-6 {width: 1.5rem;}
.w-64 {width: 16rem;}
.w-8 {width: 2rem;}
.w-full {width: 100%;}