/* ========================================
   Goodwill Learning Centre - Utility Classes
   ======================================== */

/* Width */
.w-full { width: 100%; }
.w-64 { width: 16rem; }
.w-20 { width: 5rem; }

/* Height */
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-full { height: 100%; }

/* Width */
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-64 { width: 16rem; }

/* SVG Icon defaults */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Color fills for SVG icons */
.icon-primary { color: var(--primary); }
.icon-accent { color: var(--accent); }
.icon-muted { color: var(--muted-foreground); }
.icon-white { color: white; }

/* Hover */
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-accent:hover { color: var(--accent); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.hover\:bg-secondary\/60:hover { background-color: rgba(241, 245, 249, 0.6); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* Transitions */
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-shadow { transition: box-shadow 0.2s ease; }
.transition-all { transition: all 0.15s ease; }

/* Opacity */
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Underline */
.underline { text-decoration: underline; }

/* List styling */
.list-disc {
  list-style: disc;
  padding-left: 1.5rem;
}

/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }

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

/* Border color */
.border-accent { border-color: var(--accent); }

/* Grid columns specific */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

/* Display helpers */
.flex { display: flex; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* ============================================
   RESPONSIVE UTILITIES
   Breakpoints:
   xs: 480px+  sm: 640px+  md: 768px+
   lg: 1024px+ xl: 1200px+
   ============================================ */

/* XS (480px+) */
@media (min-width: 480px) {
  .xs\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .xs\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .xs\:flex { display: flex; }
  .xs\:hidden { display: none; }
  .xs\:block { display: block; }
  .xs\:w-auto { width: auto; }
  .xs\:flex-row { flex-direction: row; }
  .xs\:text-left { text-align: left; }
  .xs\:text-center { text-align: center; }
}

/* SM (640px+) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:w-auto { width: auto; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
}

/* MD (768px+) */
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .md\:col-span-1 { grid-column: span 1; }
  .md\:col-span-2 { grid-column: span 2; }
  .md\:col-span-3 { grid-column: span 3; }
  .md\:col-span-4 { grid-column: span 4; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:w-auto { width: auto; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:text-left { text-align: left; }
}

/* LG (1024px+) */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-cols-\[1fr_380px\] { grid-template-columns: 1fr 380px; }
  .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; }
  .lg\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
  .lg\:grid-cols-\[1fr_300px\] { grid-template-columns: 1fr 300px; }
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
}

/* XL (1200px+) */
@media (min-width: 1200px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  .xl\:block { display: block; }
  .xl\:hidden { display: none; }
  .xl\:flex { display: flex; }
}

/* Backdrop blur */
.backdrop-blur {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ============================================
   INLINE-STYLE MIGRATION UTILITIES
   Shared utility classes replacing inline styles.
   ============================================ */

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 1.25rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.mr-3 { margin-right: 0.75rem; }
.ml-auto { margin-left: auto; }

.w-auto { width: auto; }
.w-200 { width: 200px; }
.min-w-160 { min-width: 160px; }

.justify-start { justify-content: flex-start; }
.items-baseline { align-items: baseline; }

.text-white { color: #fff; }
.text-foreground { color: var(--foreground); }
.text-accent { color: var(--accent); }
.bg-white { background-color: #fff; }
.border-none { border: none; }

.hero-greeting {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}