/* ============================================================
   vth-components.css — shared VTH ReSkin component layer

   COPIED VERBATIM from branch `122-86cb5dk6x-reports-section-updates`
   @ 01003b795 (2026-09-03), file public/css/vth-reskin/vth-reports.css.

   WHY THIS FILE EXISTS
   vth-reskin.css declares every component as a SINGLE class — `.vth-btn--primary`
   is (0,1,0). vth-reset.css then neutralises raw elements with real specificity:
   `.vth button{background:none;border:none}` and `.vth a{color:var(--text-link)}`
   are (0,1,1), and the input/select reset is (0,2,1) (an [type=x] attribute
   selector counts the same as a class). Specificity beats source order, so those
   component rules LOSE no matter which file loads last. Measured, not theorised:
   a `<button class="vth-btn vth-btn--primary">` renders `background:rgba(0,0,0,0)`
   with white text — an invisible control, not a mis-styled one. The rules below
   restore them with compound/ancestor-doubled selectors sized to clear each reset.

   THESE RULES ALSO LIVE IN 122's vth-reports.css. That is deliberate and
   temporary — until that branch merges, each module loads its own copy and both
   render correctly. ON MERGE: keep ONE copy. Point reports-v2 at this file and
   delete the duplicated blocks from vth-reports.css.

   AFTER BOTH BRANCHES LAND, the proper fix is to raise the specificity inside
   vth-reskin.css itself and delete the button/input blocks here entirely. Not done
   now: branch 122 has its own edits to vth-reskin.css, and a second, different
   rewrite of the same file guarantees a merge conflict in shared code.

   ALSO TAKEN VERBATIM from that branch, and byte-identical ON PURPOSE so the merge
   stays clean — do NOT add comments or edits to any of these:
     public/js/directives/vthPagination.js
     public/js/directives/vthSearchSelect.js
     resources/views/vth/components/icon.blade.php
     public/css/vth-reskin/vth-reskin.css   (carries the .vth-pagination rules)
     app/helpers.php                        (the versioned_asset() block)

   Check for drift before merging. Compares blob hashes, so it works whether or
   not these files are committed yet — `git diff <branch> -- <path>` does NOT,
   it reports an untracked file as deleted. No output means still in sync; any
   output means take 122's version (nothing here is locally modified, so
   `--theirs` is always the right resolution).

     R=122-86cb5dk6x-reports-section-updates
     for f in lms/public/js/directives/vthPagination.js \
              lms/public/js/directives/vthSearchSelect.js \
              lms/resources/views/vth/components/icon.blade.php \
              lms/public/css/vth-reskin/vth-reskin.css \
              lms/app/helpers.php ; do
       [ "$(git hash-object "$f")" = "$(git rev-parse "$R":"$f")" ] \
         || echo "DRIFTED: $f"
     done

   Declarations below are byte-identical to the source. A few of 122's comments
   were trimmed where they referenced reports-only pages; two selector lists still
   name reports-only classes (.vth-steplbl, .vth-stepbox, .vth-lookup) and are kept
   unchanged so the future de-duplication is a clean diff. They are inert here.

   Load order: vth-tokens -> vth-reset -> vth-reskin -> THIS -> <module>.css
   ============================================================ */


/* ============================================================
   Buttons
   ============================================================ */
.vth-btn{gap:9px;border-radius:12px;}
/* border-STYLE, not just color, needs restoring: `.vth button{border:none}` zeroes
   out style+width+color together, so a variant that only sets border-color (below)
   would still show no border at all without this — color alone can't paint a border
   whose style is "none". */
.vth-btn.vth-btn{border-style:solid;border-width:1px;}
.vth-btn--sm{height:40px;padding:0 16px;font-size:14px;border-radius:10px;}
.vth-btn--md{height:48px;padding:0 22px;font-size:15px;}
.vth-btn--xs{height:34px;padding:0 12px;font-size:13px;border-radius:9px;gap:6px;}
.vth-btn.vth-btn--primary{background:var(--vth-blue);color:var(--text-on-blue);border-color:var(--vth-blue);}
.vth-btn.vth-btn--primary:hover{background:var(--vth-blue-hover);color:var(--text-on-blue);border-color:var(--vth-blue-hover);}
.vth-btn.vth-btn--secondary{background:transparent;color:var(--vth-blue);border-color:var(--vth-blue);}
.vth-btn.vth-btn--ghost{background:#fff;color:var(--text-secondary);border-color:var(--border-default);}
.vth-btn.vth-btn--ghost:hover{background:var(--surface-muted);}
.vth-btn.vth-btn--danger{background:var(--color-error);color:#fff;border-color:var(--color-error);}
/* Disabled primary. vth-reskin.css only has `.vth-btn:disabled{opacity:.5}`, which
   on a saturated blue renders a washed-out lilac that reads as a rendering fault
   rather than a deliberate state — visible on Verify training, whose submit is
   disabled until a code is typed and is therefore the first thing on the page.
   The design carries a real token for this (`--tc-buttons-disabled-primary`, a
   light blue with muted text); its values are used here. Specificity is (0,4,0) to
   clear `.vth-btn:disabled` at (0,2,0). `pointer-events:none` from that rule still
   applies — only the colour changes. */
.vth .vth-btn.vth-btn--primary:disabled,
.vth .vth-btn.vth-btn--primary.is-disabled{
  opacity:1;background:#DAE9FF;color:var(--text-muted);border-color:#DAE9FF;
}
/* Icon-only button. vth-reskin.css's `.vth-btn--icon{padding:0;width:44px}` gives a
   width but NO height, and zeroes the padding that would otherwise have produced one
   — so with no size modifier alongside it (which is how every modal close button in
   this module is written) the button collapsed to the icon's line box and rendered as
   a flat 44x18 pill. Squared off here, and matched to whichever size modifier is
   present when there is one. */
.vth-btn.vth-btn--icon{width:36px;height:36px;padding:0;border-radius:10px;flex:0 0 auto;}
.vth-btn.vth-btn--icon.vth-btn--xs{width:34px;height:34px;border-radius:9px;}
.vth-btn.vth-btn--icon.vth-btn--sm{width:40px;height:40px;}
.vth-btn.vth-btn--icon.vth-btn--md{width:48px;height:48px;}

/* ---- Headings ---- */
/* A third leak, found by rendering the page rather than reading the cascade: the
   platform theme sets `h1,h2,h3,h4{text-transform:capitalize}` on the BARE elements
   (themes/the_training_hub/new_themes/css/style.css). vth-reset.css resets margin,
   weight, line-height and colour on headings inside `.vth` but not text-transform,
   so every heading in this module has been silently title-cased — "Verify a
   certificate" rendered as "Verify A Certificate", and the same for every card
   title and section heading on every reports page. `.vth h2` is (0,1,1) and clears
   the theme's (0,0,1). */
.vth h1,.vth h2,.vth h3,.vth h4,.vth h5,.vth h6{text-transform:none;}

/* ---- Label + form controls ---- */
.vth-label{font-size:13px;font-weight:var(--weight-medium);color:var(--text-primary);}
.vth .vth-input.vth-input,.vth .vth-select.vth-select,.vth .vth-textarea.vth-textarea{
  height:44px;padding:0 12px;border:1.5px solid var(--border-default);border-radius:10px;
  font-size:14px;background:#fff;box-shadow:none;
}
.vth .vth-textarea.vth-textarea{height:auto;min-height:96px;padding:10px 12px;}
.vth .vth-input.vth-input:focus,.vth .vth-select.vth-select:focus,.vth .vth-textarea.vth-textarea:focus{
  border-color:var(--vth-blue);box-shadow:0 0 0 3px rgba(25,42,193,.12);
}


/* ---- Icon glyphs ----
   vth/components/icon.blade.php now emits a Hugeicons FONT glyph inside its
   `.vth-icon` wrapper instead of an inline <svg>. The wrapper carries the caller's
   pixel size as both its box and its font-size, so the glyph just inherits it —
   `.hgi-NN` utilities are deliberately not used, because callers pass sizes
   (19, 21, 26…) that no utility enumerates.

   `.vth{line-height:1.5}` from vth-reset.css would otherwise give the glyph a line
   box taller than its own box and push it off-centre inside chips and circular
   buttons; `line-height:1` + `display:block` keeps it centred. Colour still comes
   from `color`, exactly as currentColor did for the SVGs, so every existing tint
   rule keeps working untouched. */
.vth .vth-icon > .hgi-stroke{font-size:inherit;line-height:1;display:block;font-style:normal;}

/* Small pills need an explicit tight line-height: vth-reset.css's page-wide
   `.vth{line-height:1.5}` is right for body copy but inflates anything small and
   pill-shaped that does not set its own. */
.vth-kicker,.vth-steplbl{line-height:1;}


/* The dropdown trigger and its internal search box are real <button>/<input type=
   "text"> elements too — same fix, same reasoning as above. The search box gets its
   own class (vth-dropdown__search-input, added in vthSearchSelect.js's template)
   since ".vth-dropdown__search input" alone is only (0,1,1) — a class+element combo
   still can't clear the input reset's (0,2,1). */
.vth-dropdown__btn.vth-dropdown__btn{background:#fff;border:1.5px solid var(--border-default);border-radius:10px;}
.vth-dropdown__btn.vth-dropdown__btn:hover{border-color:var(--vth-blue);}
.vth-dropdown__btn.vth-dropdown__btn.is-open{border-color:var(--vth-blue);box-shadow:0 0 0 3px rgba(25,42,193,.12);}
.vth .vth-dropdown__search-input.vth-dropdown__search-input{
  height:38px;border:1.5px solid var(--border-default);border-radius:9px;background:#fff;
  padding:0 10px 0 36px;font-size:13.5px;
}
.vth .vth-dropdown__search-input.vth-dropdown__search-input:focus{border-color:var(--vth-blue);}

/* ============================================================
   Searchable dropdown — the markup vthSearchSelect.js renders
   ============================================================ */
/* ---- Searchable dropdown ("sdrop") ---- */
.vth-dropdown{position:relative;}
.vth-dropdown__btn{width:100%;height:44px;border:1.5px solid var(--border-default);border-radius:10px;padding:0 var(--space-3);background:#fff;font-family:var(--font-sans);font-size:var(--type-size-xs);color:var(--text-primary);display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;}
.vth-dropdown__btn:hover{border-color:var(--vth-blue);}
.vth-dropdown__btn.is-open{border-color:var(--vth-blue);box-shadow:0 0 0 3px rgba(25,42,193,.12);}
.vth-dropdown__btn .v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vth-dropdown__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border-light);border-radius:14px;box-shadow:var(--shadow-lg);z-index:65;padding:var(--space-2);display:flex;flex-direction:column;gap:6px;}
.vth-dropdown__search{position:relative;}
.vth-dropdown__search .vth-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.vth-dropdown__search input{width:100%;height:38px;border:1.5px solid var(--border-default);border-radius:var(--radius-sm);padding:0 10px 0 36px;font-family:var(--font-sans);font-size:13.5px;}
.vth-dropdown__search input:focus{outline:none;border-color:var(--vth-blue);}
.vth-dropdown__list{max-height:216px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.vth-dropdown__item{border:none;background:none;font-family:var(--font-sans);font-size:13.5px;color:var(--text-secondary);padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;display:flex;align-items:center;gap:9px;width:100%;}
.vth-dropdown__item:hover{background:var(--surface-muted);color:var(--text-primary);}
.vth-dropdown__item.is-active{background:var(--surface-blue-soft);color:var(--vth-blue);font-weight:var(--weight-semibold);}
.vth-dropdown__none{padding:14px 11px;font-size:var(--type-size-xs);color:var(--text-subtle);}


/* Search field with a leading icon — the design's `.srch`.
   `.vth-search` was used by the markup but had NO rule anywhere, so the icon simply
   sat in the normal flow above the input instead of inside it.
   The icon partial wraps its SVG in `<span class="vth-icon">`, so that span is what
   has to be positioned — not the svg. The input's left padding needs (0,3,0) to
   clear vth-reset.css's `.vth input[type=text]{padding:0}`, which is (0,2,1). */
.vth-search{position:relative;}
.vth-search > .vth-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;z-index:1;}
.vth .vth-search .vth-input.vth-input{padding-left:40px;}

/* ---- Hero banner ---- */
.vth-hero{display:flex;align-items:center;gap:var(--space-5);background:linear-gradient(120deg,var(--vth-blue-dark),var(--vth-blue));color:#fff;border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);}
.vth-hero__icon{width:54px;height:54px;border-radius:var(--radius-lg);background:rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
/* color set explicitly (not inherited) — Materialize styles h1-h6 directly, and a
   directly-matched declaration always beats an inherited one regardless of specificity */
.vth-hero h2{margin:0 0 4px;font-size:24px;line-height:30px;font-weight:var(--weight-semibold);color:#fff;}
.vth-hero p{margin:0;font-size:var(--type-size-xs);line-height:1.5;color:rgba(255,255,255,.82);max-width:640px;}

/* ---- Card title (design's ".h-sub": 16px/24px/600 — smaller than the vth-h1..h4
   typography scale, which starts at 24px, so it needs its own class here) ---- */
.vth-card-title{margin:0;font-size:16px;line-height:24px;font-weight:var(--weight-semibold);color:var(--text-primary);}

/* ---- Card overflow utility — .vth-card sets overflow:hidden (vth-reskin.css),
   which clips any dropdown popover that opens past the card's edge. Apply this
   modifier to any .vth-card that contains a .vth-dropdown/.vth-search-select. ---- */
.vth-card--overflow-visible{overflow:visible;}

/* ---- Wide content must scroll inside its own card, never widen the page ----
   The design wraps every over-wide table in its own `overflow-x:auto` box
   (`<div class="cm-scroll">`). Without `min-width:0` the grid/flex item holding
   such a table refuses to shrink below its content, so the overflow lands on the
   page instead of the card and the whole layout gains a horizontal scrollbar. */
.vth-card,.vth-stepbox,.vth-lookup > *{min-width:0;}

/* ---- Report table (extends .vth-table from vth-reskin.css — that one is left
   untouched; this is a modifier + a "who" avatar/name/email cluster for learner
   rows, matching the design's .tbl/.who/.av/.whoname/.whomail) ---- */
.vth-table--report th{background:none;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:var(--weight-bold);color:var(--text-muted);border-bottom:1.5px solid var(--border-light);white-space:nowrap;}
.vth-table--report td{font-size:14px;color:var(--text-secondary);vertical-align:middle;}
.vth-table--report tr:last-child td{border-bottom:none;}

/* Wide tables scroll inside their own box, never widening the page. */
.vth-tblwrap{overflow-x:auto;}

/* Ellipsised table cell: the truncation goes on an inner block element, not the
   <td> — overflow on a table-cell is undefined in CSS 2.1. */
.vth-trunc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- Empty state ---- */
.vth-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:44px var(--space-6);}
.vth-empty__icon{width:60px;height:60px;border-radius:var(--radius-lg);background:var(--surface-muted);color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;}
.vth-empty h4{margin:0;font-size:var(--type-size-lg);font-weight:var(--weight-semibold);color:var(--text-primary);}
.vth-empty p{margin:0;max-width:520px;color:var(--text-subtle);font-size:var(--type-size-xs);}

/* ---- Text helpers ---- */
/* ---- Misc text helpers ---- */
.vth-kicker{font-size:11.5px;font-weight:var(--weight-medium);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);}
.vth-lnk{color:var(--vth-blue);font-weight:var(--weight-semibold);cursor:pointer;background:none;border:none;font-family:var(--font-sans);font-size:var(--type-size-xs);display:inline-flex;align-items:center;gap:6px;padding:0;}
.vth-lnk:hover{text-decoration:underline;}

/* One step below .vth-small (15px / --type-size-sm) for supporting lines that sit
   under a control — the design sets these at 13px, and 15px reads as body copy next
   to the field it is describing.

   Named to continue the existing scale (.vth-small -> .vth-xsmall) rather than
   inventing a parallel one. 13px is not a token: --type-size-xs is 14px and the next
   step down does not exist, while 13px is already used 15 times in this file, copied
   from the design source. Adding a token would mean editing vth-tokens.css, which
   this module does not own. */
.vth-xsmall{font-size:13px;line-height:1.5;}