/**
 * Student Utilities
 * Utility classes to replace inline styles on student views.
 * Loaded after design-system.css.
 */

/* Display */
.su-d-flex { display: flex; }
.su-d-block { display: block; }
.su-d-inline { display: inline; }
.su-d-inline-block { display: inline-block; }
.su-d-inline-flex { display: inline-flex; }
.su-d-grid { display: grid; }
.su-d-none { display: none; }

/* Grid */
.su-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.su-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.su-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .su-grid-cols-2 { grid-template-columns: 1fr; }
}

/* Flex direction & wrap */
.su-flex-column { flex-direction: column; }
.su-flex-wrap { flex-wrap: wrap; }
.su-flex-1 { flex: 1; }

/* Align items */
.su-items-center { align-items: center; }
.su-items-start { align-items: flex-start; }
.su-items-end { align-items: flex-end; }
.su-items-stretch { align-items: stretch; }

/* Justify content */
.su-justify-between { justify-content: space-between; }
.su-justify-center { justify-content: center; }
.su-justify-end { justify-content: flex-end; }

/* Gap */
.su-gap-0 { gap: 0; }
.su-gap-1 { gap: 0.25rem; }
.su-gap-2 { gap: 0.5rem; }
.su-gap-3 { gap: 0.75rem; }
.su-gap-4 { gap: 1rem; }
.su-gap-6 { gap: 1.5rem; }

/* Width / height */
.su-w-100 { width: 100%; }
.su-w-6 { width: 24px; }
.su-w-9 { width: 36px; }
.su-w-11 { width: 44px; }
.su-w-12 { width: 50px; }
.su-w-15 { width: 60px; }
.su-h-9 { height: 36px; }
.su-h-11 { height: 44px; }
.su-h-15 { height: 60px; }
.su-h-100 { height: 100%; }
.su-h-2 { height: 8px; }
.su-min-w-120 { min-width: 120px; }
.su-min-w-140 { min-width: 140px; }
.su-min-w-220 { min-width: 220px; }
.su-max-w-700 { max-width: 700px; }
.su-max-w-900 { max-width: 900px; }
.su-max-w-1000 { max-width: 1000px; }
.su-max-w-220 { max-width: 220px; }
.su-max-w-280 { max-width: 280px; }
.su-min-h-auto { min-height: auto; }
.su-min-h-300 { min-height: 300px; }
.su-min-h-11 { min-height: 44px; }

/* Text alignment */
.su-text-center { text-align: center; }
.su-text-left { text-align: left; }
.su-text-right { text-align: right; }

/* Text transform */
.su-text-capitalize { text-transform: capitalize; }
.su-text-uppercase { text-transform: uppercase; }

/* White space / wrapping */
.su-whitespace-pre { white-space: pre-wrap; }
.su-nowrap { white-space: nowrap; }
.su-break-all { word-break: break-all; }

/* Text decoration */
.su-no-underline { text-decoration: none; }

/* Cursor / opacity */
.su-cursor-pointer { cursor: pointer; }
.su-cursor-not-allowed { cursor: not-allowed; }
.su-opacity-70 { opacity: 0.7; }

/* Letter spacing / line height */
.su-tracking-wide { letter-spacing: 0.05em; }
.su-leading-relaxed { line-height: 1.7; }

/* Transitions */
.su-transition-width { transition: width 0.3s; }

/* Font family */
.su-font-mono { font-family: monospace; }

/* Margin */
.su-m-0 { margin: 0; }
.su-m-auto { margin: auto; }
.su-mx-auto { margin-left: auto; margin-right: auto; }
.su-my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.su-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.su-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.su-mt-0 { margin-top: 0; }
.su-mt-1 { margin-top: 0.25rem; }
.su-mt-2 { margin-top: 0.5rem; }
.su-mt-3 { margin-top: 0.75rem; }
.su-mt-4 { margin-top: 1rem; }
.su-mt-6 { margin-top: 1.5rem; }
.su-mb-0 { margin-bottom: 0; }
.su-mb-1 { margin-bottom: 0.25rem; }
.su-mb-2 { margin-bottom: 0.5rem; }
.su-mb-3 { margin-bottom: 0.75rem; }
.su-mb-4 { margin-bottom: 1rem; }
.su-mb-6 { margin-bottom: 1.5rem; }
.su-mb-8 { margin-bottom: 2rem; }
.su-ml-0 { margin-left: 0; }
.su-ml-2 { margin-left: 0.5rem; }
.su-mr-2 { margin-right: 0.5rem; }
.su-mr-4 { margin-right: 1rem; }

/* Padding */
.su-p-0 { padding: 0; }
.su-p-1 { padding: 0.25rem; }
.su-p-2 { padding: 0.5rem; }
.su-p-3 { padding: 0.75rem; }
.su-p-4 { padding: 1rem; }
.su-p-5 { padding: 1.25rem; }
.su-p-6 { padding: 1.5rem; }
.su-p-8 { padding: 2rem; }
.su-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.su-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.su-px-4 { padding-left: 1rem; padding-right: 1rem; }
.su-px-5 { padding-left: 1.125rem; padding-right: 1.125rem; }
.su-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.su-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.su-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.su-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.su-py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Font sizes */
.su-text-xs { font-size: 0.75rem; }
.su-text-12px { font-size: 12px; }
.su-text-sm { font-size: 0.8rem; }
.su-text-sm2 { font-size: 0.85rem; }
.su-text-sm3 { font-size: 0.9rem; }
.su-text-base { font-size: 1rem; }
.su-text-base2 { font-size: 1.05rem; }
.su-text-lg { font-size: 1.1rem; }
.su-text-xl { font-size: 1.25rem; }
.su-text-2xl { font-size: 1.5rem; }
.su-text-3xl { font-size: 2rem; }
.su-text-4xl { font-size: 2.5rem; }

/* Font weight */
.su-font-medium { font-weight: 500; }
.su-font-semibold { font-weight: 600; }
.su-font-bold { font-weight: 700; }
.su-font-extrabold { font-weight: 800; }

/* Border radius */
.su-rounded-none { border-radius: 0; }
.su-rounded-sm { border-radius: 6px; }
.su-rounded { border-radius: 8px; }
.su-rounded-lg { border-radius: 12px; }
.su-rounded-2xl { border-radius: 16px; }
.su-rounded-xl { border-radius: var(--radius-lg); }
.su-rounded-full { border-radius: 999px; }
.su-rounded-circle { border-radius: 50%; }
.su-rounded-10 { border-radius: 10px; }

/* Borders */
.su-border-0 { border: none; }
.su-border { border: 1px solid var(--border-color); }
.su-border-gray { border: 1px solid #d1d5db; }
.su-border-light { border: 1px solid #e5e7eb; }
.su-border-dashed { border: 1px dashed var(--border-color); }
.su-border-bottom { border-bottom: 1px solid #f3f4f6; }
.su-border-collapse { border-collapse: collapse; }
.su-border-green-light { border-color: #bbf7d0; }
.su-border-l-green { border-left: 4px solid #10b981; }
.su-border-l-amber { border-left: 4px solid #f59e0b; }

/* Background colors */
.su-bg-white { background: #fff; }
.su-bg-primary { background: var(--primary); }
.su-bg-primary-600 { background: #16a34a; }
.su-bg-secondary { background: var(--bg-secondary); }
.su-bg-success { background: #dcfce7; }
.su-bg-success-light { background: #f0fdf4; }
.su-bg-danger-light { background: #fee2e2; }
.su-bg-red-500 { background: #ef4444; }
.su-bg-amber-500 { background: var(--color-amber-500); }
.su-bg-amber-100 { background: #fef3c7; }
.su-bg-amber-600 { background: #d97706; }
.su-bg-gray-50 { background: var(--gray-50); }
.su-bg-gray-100 { background: #f3f4f6; }
.su-bg-gray-200 { background: #e5e7eb; }
.su-bg-green-50 { background: #f0fdf4; }
.su-bg-blue-50 { background: #eff6ff; }
.su-bg-violet-50 { background: #f3e8ff; }

/* Text colors */
.su-text-white { color: #fff; }
.su-text-muted { color: var(--text-muted); }
.su-text-secondary { color: var(--text-secondary); }
.su-text-gray-400 { color: #9ca3af; }
.su-text-gray-500 { color: var(--gray-500); }
.su-text-gray-600 { color: #4b5563; }
.su-text-gray-700 { color: #374151; }
.su-text-gray-900 { color: var(--gray-900); }
.su-text-success { color: #166534; }
.su-text-success-600 { color: #16a34a; }
.su-text-danger { color: #991b1b; }
.su-text-amber { color: #f59e0b; }
.su-text-amber-600 { color: #d97706; }
.su-text-amber-700 { color: #92400e; }
.su-text-green-700 { color: #166534; }
.su-text-blue-700 { color: #0369a1; }
.su-text-violet-700 { color: #7c3aed; }

/* Focus-mode specific tokens */
.su-sf-text-muted { color: var(--sf-text-muted); }
.su-sf-text { color: var(--sf-text); }

/* Overflow */
.su-overflow-hidden { overflow: hidden; }
.su-overflow-y-auto { overflow-y: auto; }
.su-max-h-300 { max-height: 300px; }

/* Avatars */
.su-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.su-avatar-44 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.su-avatar-40 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}