/* Lifted out of adapter/course-detail.css: /magic-link-history renders the same
   Materialize-enhanced <select>s inside a .vth scope and needs the identical rescue.
   Generic to the scope, so it is a component rather than page styling. */
/* ==========================================================================
   RESCUE: Materialize-enhanced <select> inside the scope
   --------------------------------------------------------------------------
   THIS IS NOT COSMETIC. $('select').material_select() runs globally from
   user-panel/footer.blade.php:989, and again on #student_id from the page itself.
   It REPLACES every <select> that has not opted out with `browser-default`:

       <div class="select-wrapper">
         <span class="caret">▼</span>
         <input type="text" class="select-dropdown" readonly>   <- the visible control
         <ul class="dropdown-content select-dropdown">…</ul>
         <select class="initialized">…</select>                 <- hidden original
       </div>

   The visible control is an input[type=text], so vth-reset.css strips its border,
   height, padding and background. The result is a select that renders as bare text
   with no field around it — LOOKING broken while still working perfectly, which no
   structural check can catch.

   blade-angular-usage.md §5 gives two options: style our own, or destroy the
   Materialize instance. Destroying it would mean owning re-initialisation after
   every AJAX tab load, so the field is restored instead — matched to .vth-input so
   the enhanced select and our own inputs look like one control set.
   ========================================================================== */
.vth .select-wrapper{position:relative;}
.vth .select-wrapper input.select-dropdown{
  display:block;width:100%;height:40px;padding:0 var(--space-8) 0 var(--space-3);
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--surface-page);box-shadow:var(--shadow-xs);
  font-family:var(--font-sans);font-size:var(--type-size-xs);color:var(--text-primary);
  cursor:pointer;}
.vth .select-wrapper input.select-dropdown:focus{outline:none;
  border-color:var(--border-blue);box-shadow:var(--shadow-focus-blue);}
/* Materialize positions its own caret; keep it clear of the text. */
.vth .select-wrapper .caret{position:absolute;right:var(--space-3);top:50%;
  transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
/* The options list is a Materialize .dropdown-content. The scoped reset flattens
   every ul, so its padding and row rhythm are given back — without this the
   options sit flush against the panel edge. */
.vth .select-wrapper .dropdown-content{padding:var(--space-1);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);}
.vth .select-wrapper .dropdown-content li > span{display:block;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--type-size-xs);color:var(--text-primary);}
.vth .select-wrapper .dropdown-content li > span:hover{background:var(--surface-muted);}