@layer legacy{
.main-content{min-width:0}
.app-shell{grid-template-columns:245px minmax(0,1fr);min-width:0}
.sidebar{min-width:0}
.course-tile{margin:0}
@media(max-width:900px){
  .app-shell{grid-template-columns:minmax(0,1fr);max-width:100vw}
  .sidebar{max-width:100vw}
}
}

/* Ported-utility gap fixes (buttons, icons, avatars) */
/* Tailwind utilities used by the PHP templates but never emitted into the compiled
   Lovable subset (lovable.css), plus button chrome for the PageHeader actions strip.
   Deliberately UNLAYERED: the @layer legacy block above is declared before
   lovable.css's layers, so Tailwind's preflight (@layer base) would override any
   layered patch. Values mirror Tailwind v4 defaults and reuse the design tokens
   lovable.css defines on :root (--spacing, --primary, --accent, --border, ...). */

/* Fixed-size avatar / icon chips (shell header + sidebar account chips, wallet card
   photos, portal photo, QR block) */
.h-\[34px\]{height:34px}
.w-\[34px\]{width:34px}
.h-\[38px\]{height:38px}
.w-\[38px\]{width:38px}
.h-\[72px\]{height:72px}
.w-\[72px\]{width:72px}
.h-\[78px\]{height:78px}
.w-\[78px\]{width:78px}
.h-\[84px\]{height:84px}
.w-\[84px\]{width:84px}
.h-\[120px\]{height:120px}
.w-\[120px\]{width:120px}
.w-16{width:calc(var(--spacing) * 16)}
.h-20{height:calc(var(--spacing) * 20)}
.w-20{width:calc(var(--spacing) * 20)}
.h-24{height:calc(var(--spacing) * 24)}
.w-24{width:calc(var(--spacing) * 24)}

/* Sizing and overflow guards */
.max-w-full{max-width:100%}
.max-h-\[90vh\]{max-height:90vh}
.min-h-\[55vh\]{min-height:55vh}
.overflow-x-auto{overflow-x:auto}

/* Spacing */
.mb-5{margin-bottom:calc(var(--spacing) * 5)}
.space-y-5>:not(:last-child){margin-bottom:calc(var(--spacing) * 5)}

/* Grid / flex placement */
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}
.content-start{align-content:flex-start}
.self-end{align-self:flex-end}

/* Borders (slash suffix = Tailwind color opacity) */
.border-8{border-style:var(--tw-border-style,solid);border-width:8px}
.border-white\/15{border-color:#ffffff26}
.border-primary\/25{border-color:var(--primary)}
@supports (color:color-mix(in lab,red,red)){
  .border-primary\/25{border-color:color-mix(in oklab,var(--primary) 25%,transparent)}
}

/* Responsive variants (breakpoints match lovable.css: sm 40rem, md 48rem) */
@media (width>=40rem){
  .sm\:block{display:block}
  .sm\:col-span-1{grid-column:span 1/span 1}
}
@media (width>=48rem){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* PageHeader actions: app.js relocates legacy .page-head buttons/links into the
   .page-header-actions strip, where .auto-page-content button chrome (lovable-bridge)
   no longer reaches them and Tailwind preflight strips their padding/rounding.
   Restore the same chrome as the utility-styled header actions
   (h-8 px-3 text-sm font-medium rounded-md shadow-sm); lovable.css already
   supplies the accent background/hover for these. */
.page-header-actions{min-width:0;max-width:100%}
.page-header-actions button,
.page-header-actions a.button{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.25rem .75rem;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px 0 #0000000d}
.page-header-actions button.secondary,
.page-header-actions a.button.secondary{border:1px solid var(--border);background-color:var(--background);color:var(--foreground)}