/* ==========================================================================
   MAGIC LINK AUDIT & HISTORY — matched to Course Detail.dc.html:923-1005
   --------------------------------------------------------------------------
   Still restyled from OUTSIDE the component: course-magic-link-history.html is
   shared with magic_link_history.blade.php and the PRE-RESKIN
   course_details.blade.php, both of which are live (CommonController:3155 and
   CourseController:1099). Only this file carries these rules and only the two
   course-detail pages load it, so the other consumers see none of it.
   ========================================================================== */
#magicLinkAuditHistory.vth{position:relative;padding:20px;}
/* HEADER — the reference puts the title, the status filter and Reset on ONE row
   (line 926). The title lives in the Blade panel and the two controls live inside
   the component, so they are in different subtrees and cannot be flexed together.
   The title is therefore taken out of flow and the component's own filter row is
   pushed to the right to meet it. The filter row is always the component's first
   child, so the two line up predictably; under 720px both return to normal flow. */
#magicLinkAuditHistory.vth .vth-mlhead__title{position:absolute;top:20px;left:20px;
  margin:0;max-width:55%;font-size:20px;font-weight:var(--weight-semibold);
  line-height:42px;color:var(--text-primary);}
#magicLinkAuditHistory.vth > .vth-mlhead{height:0;}
#magicLinkAuditHistory.vth .row-margin{margin:0;}
#magicLinkAuditHistory.vth .col.s12{padding:0;}
#magicLinkAuditHistory.vth .col.s12.margin-top-20{margin-top:0;}
#magicLinkAuditHistory.vth .learn-filter{display:flex;align-items:center;gap:12px;
  justify-content:flex-end;flex-wrap:wrap;}
/* The fields are flex items here; without an explicit basis the status field grew to
   fill the row and flex-end had nothing left to push. */
/* margin-left:auto on the first control absorbs the free space and pushes the group
   to the right edge. justify-content:flex-end alone did not survive the legacy
   .input-field widths this row is built from. */
#magicLinkAuditHistory.vth .learn-filter > *{flex:0 0 auto;width:auto;}
#magicLinkAuditHistory.vth .learn-filter > *:first-child{margin-left:auto;}
#magicLinkAuditHistory.vth .learn-filter .input-field{margin:0;min-width:0;flex:0 0 auto;}
#magicLinkAuditHistory.vth .learn-filter .w-210{width:auto;min-width:0;}
#magicLinkAuditHistory.vth .learn-filter .mr-16{margin-right:0;}
/* material_select() swaps the <select> for .select-wrapper > input.select-dropdown,
   which the .vth .select-wrapper block above already styles; only the width the
   reference asks for (150px, line 928) is set here. */
#magicLinkAuditHistory.vth .learn-filter .select-wrapper{width:150px;}
#magicLinkAuditHistory.vth .learn-filter .select-wrapper input.select-dropdown{
  height:42px;border-radius:10px;}
/* Reset is a text link in the reference, not a filled button (line 934). */
#magicLinkAuditHistory.vth .btn.text-color-btn{height:auto;padding:0;border:0;
  background:none;box-shadow:none;color:var(--vth-blue);
  font-size:14px;font-weight:var(--weight-semibold);}
#magicLinkAuditHistory.vth .btn.text-color-btn:hover{background:none;
  color:var(--vth-blue-hover);text-decoration:underline;}

/* TABLE ------------------------------------------------------------------- */
#magicLinkAuditHistory.vth .vocational-table-list-main{overflow-x:auto;margin-top:16px;}
#magicLinkAuditHistory.vth table{width:100%;min-width:780px;
  border-collapse:collapse;font-size:14px;margin:0;}
#magicLinkAuditHistory.vth thead tr{background:#F6F6F6;}
#magicLinkAuditHistory.vth th{padding:14px;border:0;text-align:left;
  font-size:14px;font-weight:var(--weight-semibold);text-transform:none;
  letter-spacing:0;color:var(--text-primary);white-space:nowrap;}
#magicLinkAuditHistory.vth th:first-child{border-radius:10px 0 0 10px;}
#magicLinkAuditHistory.vth th:last-child{border-radius:0 10px 10px 0;}
#magicLinkAuditHistory.vth tbody tr{background:none;border-bottom:1px solid #EAECF0;}
#magicLinkAuditHistory.vth tbody tr:last-child{border-bottom:0;}
#magicLinkAuditHistory.vth td{padding:15px 14px;border:0;
  color:var(--text-secondary);vertical-align:middle;}
/* No column rules - rows are separated, columns are not. */
#magicLinkAuditHistory.vth th,
#magicLinkAuditHistory.vth td{border-left:0;border-right:0;}
/* The template puts width="12%" on every column, which left the link cell too narrow
   to show a link. Magic Link takes the slack instead. The other columns are NOT
   pinned: this component also runs without a courseId (on /magic-link-history), where
   a seventh "Course" column appears and a forced width:1% crushed the middle of the
   row into a single run of text. */
#magicLinkAuditHistory.vth th[data-field="Magic link"]{width:auto;min-width:240px;}
/* The cell's flex row has min-width:0 so the span can ellipsis, which also lets the
   whole column collapse; the td's own minimum keeps it readable. */
#magicLinkAuditHistory.vth td[data-label="Magic link"]{min-width:240px;}

/* The link cell: blue, medium, truncated, with the copy control beside it. */
#magicLinkAuditHistory.vth .magic-link-copy-item{display:inline-flex;align-items:center;
  gap:9px;min-width:0;}
#magicLinkAuditHistory.vth .magic-link-copy-item > span:first-child{
  font-size:13.5px;font-weight:var(--weight-medium);color:var(--vth-blue);
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#magicLinkAuditHistory.vth .magic-link-copy-item .btn-link{width:26px;height:26px;
  border-radius:7px;color:var(--text-subtle);}
#magicLinkAuditHistory.vth td[data-label="Date Created"]{white-space:nowrap;
  font-weight:var(--weight-medium);}
/* Credit reads as a figure, and the refund case is the only green one. */
#magicLinkAuditHistory.vth td[data-label="Credit"]{white-space:nowrap;
  font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary);}
#magicLinkAuditHistory.vth td.list-refund-item{color:#016630;}
/* Row actions: 32px targets, 18px glyphs (reference line 973). */
#magicLinkAuditHistory.vth td[data-label="Action"]{white-space:nowrap;}
#magicLinkAuditHistory.vth td[data-label="Action"] .btn-link{width:32px;height:32px;
  border-radius:8px;font-size:18px;}
#magicLinkAuditHistory.vth td[data-label="Action"] .btn-link .lms-delete{color:#E7000B;}

/* STATUS PILLS — the component emits .magiclist1..4; the theme's versions are
   washed out next to the reference's badges, so they are re-toned in scope only. */
#magicLinkAuditHistory.vth [class^="magiclist"]{display:inline-flex;align-items:center;
  height:26px;padding:0 10px;border-radius:40px;
  font-size:12.5px;font-weight:var(--weight-semibold);line-height:1;}
#magicLinkAuditHistory.vth .magiclist1{background:#86EFAC;color:#016630;}
#magicLinkAuditHistory.vth .magiclist2{background:#BFDBFE;color:#1447E6;}
#magicLinkAuditHistory.vth .magiclist3{background:#EF4444;color:#fff;}
#magicLinkAuditHistory.vth .magiclist4{background:#E4E4E7;color:#52525B;}

/* EMPTY STATE — the component's "Data not found" row, dressed as the reference's
   dashed panel (line 989) without touching its markup. */
#magicLinkAuditHistory.vth tbody tr.text-center td{padding:48px 20px;text-align:center;
  font-size:15px;font-weight:var(--weight-semibold);color:var(--text-primary);}

/* FOOTER — summary left, pager right (reference line 1003). */
#magicLinkAuditHistory.vth .vth-mlfoot{display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;}
#magicLinkAuditHistory.vth .vth-mlfoot__summary{font-size:12.5px;color:#6D6D6D;}
#magicLinkAuditHistory.vth .pagination-box{padding:0;margin-top:16px;}

@media (max-width:720px){
  #magicLinkAuditHistory.vth .vth-mlhead__title{position:static;max-width:none;
    line-height:1.3;margin-bottom:12px;}
  #magicLinkAuditHistory.vth > .vth-mlhead{height:auto;}
  #magicLinkAuditHistory.vth .learn-filter{justify-content:flex-start;}
}

/* --------------------------------------------------------------------------
   RESET REPAIR — these were in course-detail.css and were lost in an edit during
   the §3.30 work; recovered from git and kept here, where they belong.

   vth-reset.css strips `.vth button` of background and border and strips text-like
   inputs of border, height and padding. Without these the component's Reset button
   and its "Search course..." field render as bare text. The search field only
   appears when the component has NO courseId — i.e. on /magic-link-history, which
   is exactly the page these rules matter most for.

   Scoped to the panel rather than `.vth .btn`: the component ships legacy `.btn`
   and `.btn-link` controls, and a bare `.vth .btn` rule would catch every future
   legacy button that lands inside a scope. Narrow beats convenient.
   -------------------------------------------------------------------------- */
#magicLinkAuditHistory.vth .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);height:40px;padding:0 var(--space-4);
  border-radius:var(--radius-md);border:1px solid var(--vth-blue);
  background:var(--vth-blue);color:var(--text-on-blue);
  font-family:var(--font-sans);font-size:var(--type-size-xs);font-weight:var(--weight-semibold);
  text-transform:none;letter-spacing:0;line-height:1;box-shadow:none;}
#magicLinkAuditHistory.vth .btn:hover{background:var(--vth-blue-hover);color:var(--text-on-blue);}
/* .btn-link is an icon-only row action, not a button. The two cells that hold one
   size it themselves further down; this is the base. */
#magicLinkAuditHistory.vth .btn-link{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-sm);background:transparent;
  color:var(--text-secondary);}
#magicLinkAuditHistory.vth .btn-link:hover{background:var(--surface-muted);color:var(--vth-blue);}
/* The keyword search, shown only when the component runs without a courseId. */
#magicLinkAuditHistory.vth input[type="text"]{height:42px;padding:0 var(--space-3);
  border:1px solid var(--border-light);border-radius:10px;
  background:var(--surface-card);box-shadow:none;margin:0;
  font-family:var(--font-sans);font-size:14px;color:var(--text-primary);}
#magicLinkAuditHistory.vth input[type="text"]:focus{outline:none;
  border-color:var(--border-blue);box-shadow:var(--shadow-focus-blue);}