/* ============================================================
   vth-reskin.css — VTH ReSkin components (namespaced, scoped)
   All classes are prefixed `vth-` and only paint inside `.vth`, so
   they never collide with Materialize v0.100. Extend this file;
   never write bare element/`.class` selectors outside the scope.
   Requires: vth-tokens.css (vars), vth-fonts.css, vth-reset.css.
   ============================================================ */

/* ---- App shell / layout helpers ---- */
.vth-app{background:var(--surface-subtle);min-height:100%;}
.vth-container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6);}
.vth-grid{display:grid;gap:var(--space-6);}
.vth-row{display:flex;gap:var(--space-4);}
.vth-stack{display:flex;flex-direction:column;gap:var(--space-4);}
.vth-cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}

/* ---- Typography helpers ---- */
.vth-h1{font-size:var(--type-size-title-1);line-height:var(--type-leading-title-1);font-weight:var(--weight-semibold);}
.vth-h2{font-size:var(--type-size-title-3);line-height:var(--type-leading-title-3);font-weight:var(--weight-semibold);}
.vth-h3{font-size:var(--type-size-title-5);line-height:var(--type-leading-title-5);font-weight:var(--weight-semibold);}
.vth-h4{font-size:var(--type-size-title-6);line-height:var(--type-leading-title-6);font-weight:var(--weight-semibold);}
.vth-body{font-size:var(--type-size-base);line-height:var(--type-leading-base);font-weight:var(--weight-regular);}
.vth-small{font-size:var(--type-size-sm);line-height:var(--type-leading-sm);}
.vth-muted{color:var(--text-muted);}
.vth-eyebrow{font-size:var(--type-size-xs);line-height:var(--type-leading-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--vth-blue);}

/* ---- Buttons ---- */
.vth-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;text-decoration:none;}
.vth-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--type-size-sm);}
.vth-btn--md{height:44px;padding:0 var(--space-5);font-size:var(--type-size-base);}
.vth-btn--lg{height:52px;padding:0 var(--space-6);font-size:var(--type-size-lg);}
.vth-btn--pill{border-radius:var(--radius-pill);}
.vth-btn--icon{padding:0;width:44px;}
.vth-btn--primary{background:var(--vth-blue);color:var(--text-on-blue);}
.vth-btn--primary:hover{background:var(--vth-blue-hover);color:var(--text-on-blue);}
.vth-btn--primary:active{background:var(--vth-blue-focus);}
.vth-btn--secondary{background:transparent;color:var(--vth-blue);border-color:var(--vth-blue);}
.vth-btn--secondary:hover{background:var(--surface-blue-soft);}
.vth-btn--ghost{background:transparent;color:var(--text-primary);}
.vth-btn--ghost:hover{background:var(--surface-muted);}
.vth-btn--danger{background:var(--color-error);color:#fff;}
.vth-btn--danger:hover{background:var(--color-error-hover);}
.vth-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue);}
.vth-btn.is-disabled,.vth-btn:disabled{opacity:.5;pointer-events:none;}

/* ---- Cards ---- */
.vth-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;}
.vth-card__media{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-muted);}
.vth-card__body{padding:var(--space-6);}
.vth-card__title{font-size:var(--type-size-xl);line-height:var(--type-leading-xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-2);}
.vth-card__text{font-size:var(--type-size-base);line-height:var(--type-leading-base);color:var(--text-subtle);}
.vth-card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}

/* ---- Forms ---- */
.vth-field{display:flex;flex-direction:column;gap:var(--space-2);}
.vth-label{font-size:var(--type-size-sm);font-weight:var(--weight-medium);color:var(--text-secondary);}
.vth-input,.vth-textarea,.vth-select{width:100%;padding:10px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-page);font-family:var(--font-sans);font-size:var(--type-size-base);color:var(--text-primary);transition:border-color .15s ease,box-shadow .15s ease;}
.vth-input::placeholder,.vth-textarea::placeholder{color:var(--text-muted);}
.vth-input:focus,.vth-textarea:focus,.vth-select:focus{border-color:var(--vth-blue);box-shadow:var(--shadow-focus-blue);}
.vth-textarea{min-height:96px;resize:vertical;}
.vth-help{font-size:var(--type-size-xs);color:var(--text-muted);}
.vth-error{font-size:var(--type-size-xs);color:var(--color-error);}
.vth-field.is-error .vth-input,.vth-field.is-error .vth-textarea,.vth-field.is-error .vth-select{border-color:var(--color-error);}

/* ---- Badges / chips / tags ---- */
.vth-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);line-height:1.6;}
.vth-badge--neutral{background:var(--surface-muted);color:var(--text-subtle);}
.vth-badge--info{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-badge--success{background:#DDFBE7;color:var(--color-success);}
.vth-badge--warning{background:#FFF2D1;color:#8A5B00;}
.vth-badge--error{background:#FEE2E2;color:var(--color-error);}
.vth-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:var(--type-size-sm);background:var(--surface-page);}
.vth-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-muted);}

/* ---- Alerts ---- */
.vth-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--type-size-sm);border:1px solid transparent;}
.vth-alert--info{background:var(--surface-blue-soft);border-color:#BCD6FF;color:var(--vth-blue-dark);}
.vth-alert--success{background:#F0FDF4;border-color:#BDF5D1;color:var(--color-success);}
.vth-alert--warning{background:#FFFEEA;border-color:#FFF585;color:#8A5B00;}
.vth-alert--error{background:#FEF2F2;border-color:#FDCBCB;color:var(--color-error);}

/* ---- Tables ---- */
.vth-table{width:100%;border-collapse:collapse;font-size:var(--type-size-sm);}
.vth-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--weight-semibold);color:var(--text-subtle);border-bottom:1px solid var(--border-default);background:var(--surface-muted);}
.vth-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-light);color:var(--text-primary);}
.vth-table--hover tbody tr:hover{background:var(--surface-subtle);}
.vth-table--striped tbody tr:nth-child(even){background:var(--surface-subtle);}

/* ---- Navigation ---- */
.vth-navbar{display:flex;align-items:center;gap:var(--space-6);height:64px;padding:0 var(--space-6);background:var(--surface-page);border-bottom:1px solid var(--border-light);}
.vth-sidenav{width:260px;background:var(--surface-page);border-right:1px solid var(--border-light);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);}
.vth-navlink{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-md);color:var(--text-subtle);font-weight:var(--weight-medium);cursor:pointer;}
.vth-navlink:hover{background:var(--surface-muted);color:var(--text-primary);}
.vth-navlink.is-active{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border-light);}
.vth-tab{padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--text-subtle);border-bottom:2px solid transparent;cursor:pointer;}
.vth-tab.is-active{color:var(--vth-blue);border-bottom-color:var(--vth-blue);}

/* ---- Overlays (build ourselves; do not use Materialize JS modal) ---- */
.vth-modal__backdrop{position:fixed;inset:0;background:rgba(19,19,19,.5);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:1000;}
.vth-modal__panel{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;overflow:auto;}
.vth-modal__head{padding:var(--space-6);border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}
.vth-modal__body{padding:var(--space-6);}
.vth-modal__foot{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:var(--space-3);}

/* ---- Data display ---- */
.vth-stat-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-6);}
.vth-stat__value{font-size:var(--type-size-3xl);line-height:var(--type-leading-3xl);font-weight:var(--weight-bold);color:var(--text-primary);}
.vth-stat__label{font-size:var(--type-size-sm);color:var(--text-muted);}
.vth-progress{height:8px;background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden;}
.vth-progress__bar{height:100%;background:var(--vth-blue);border-radius:var(--radius-pill);}
.vth-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-muted);}
.vth-avatar--sm{width:28px;height:28px;}.vth-avatar--lg{width:64px;height:64px;}
.vth-spinner{width:24px;height:24px;border:3px solid var(--border-light);border-top-color:var(--vth-blue);border-radius:50%;animation:vth-spin .7s linear infinite;}
@keyframes vth-spin{to{transform:rotate(360deg);}}

/* ---- Icons ---- */
.vth-icon{width:24px;height:24px;display:inline-block;color:currentColor;flex:none;}
.vth-icon svg{width:100%;height:100%;display:block;}


/* ============================================================
   LEGACY-CLASS OVERRIDES — course catalogue (#courses_list)
   ------------------------------------------------------------
   Everything above is `.vth-*`, scoped to `.vth`, as this file's header requires.
   The block below is the one exception and is deliberately kept apart: it corrects
   pre-reskin components (.online-course-item, .multiple-check-box-select,
   .select-wrapper) that the reskin renders without the stylesheets those components
   were written against - f2fpublic.css, custom.css, sub_master(back).css are not
   loaded on reskin pages. Rewriting the components is a bigger job; until then this
   is the single place those corrections live, reaching the hub and all nine sector
   sites because the catalogue is one shared view. Scoped to #courses_list so the same
   components keep their existing look wherever those stylesheets ARE loaded.
   ============================================================ */
/* ---------- Course card titles -------------------------------------------- */
/* The theme clamps every card title to ONE line - style.css:846 sets
   display:-webkit-box + -webkit-line-clamp:1 + overflow:hidden - and its
   width:calc(100% - 30px) takes another 30px off that single line. Measured on the
   catalogue: the title box showed 34px where a four-line name needs 136px, so names
   ended in an ellipsis mid-word. At 390px most titles need three or four lines, and
   in landscape the title column is only ~394px of a 764px card, which is why it read
   as worse there. Cards are one per row at every width here, so no uniform card
   height is being protected: let the title wrap in full. */
#courses_list .online-course-item h3 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  width: 100%;
}
/* The theme already means to shrink card titles on phones (style.css:3499 asks for
   18px/26px) but that rule is not winning here, so a 24px title kept wrapping to four
   lines in a 244px-wide card. Same intent, stated where it applies. */
@media (max-width: 767px) {
  #courses_list .online-course-item h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ---------- Sectors dropdown (course-selector component) ------------------- */
/* The panel opened as a plain ~1400px-tall list that pushed the whole page down
   instead of floating over it: position:absolute, z-index, background, border and
   width:100% all live in f2fpublic.css:1192, which this page does not load. The only
   rule that reaches the panel here is the theme's `display:none`, so ng-show left it
   as an inline block with no positioning and no height limit. */
#courses_list .multiple-check-div { position: relative; }
#courses_list .multiple-check-box-select {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 99;
  /* Tied to the viewport as well as a fixed ceiling: 320px is taller than a phone in
     landscape (390px), where the panel hung 384px below the fold. */
  max-height: min(320px, 55vh);
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #e0e2e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  list-style: none;
}
#courses_list .multiple-check-box-select ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#courses_list .multiple-check-box-select li { padding: 4px 6px; }

/* Each sector row drew a wide red or grey ellipse above its name: the native radio was
   being stretched to the panel's full width, because the generic input rule in the
   loaded theme CSS reaches it while the rule that normally hides radios - Materialize's
   [type=radio]{position:absolute;opacity:0} - sits in a stylesheet this page does not
   load. A radio 300px wide simply paints as an oval. Give it a real 16px control on the
   same line as its label. */
#courses_list .multiple-check-box-select li:not(.multiple-search) {
  display: flex;
  align-items: center;
  gap: 10px;
}
#courses_list .multiple-check-box-select li:not(.multiple-search) input[type="radio"] {
  position: static;
  opacity: 1;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: #192ac1;
}
#courses_list .multiple-check-box-select li:not(.multiple-search) label {
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  cursor: pointer;
}
#courses_list .multiple-check-box-select li.multiple-search { padding: 2px 2px 8px; }
#courses_list .multiple-check-box-select li.multiple-search input {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #e0e2e8 !important;
  border-radius: 6px;
}

/* ---------- Level and Country selects ------------------------------------- */
/* These two are Materialize `material-select` fields, so they already open as proper
   dropdowns - the problem is that they do not look like the Sectors box they sit under.
   Measured side by side: Sectors is 60px tall, 18px type, 10px radius, #e0e2e8 border;
   Level and Country came out 50px, 14px, 6px radius and a border with no colour of its
   own. Match them to the Sectors box so the filter column reads as one control set. */
/* font-size and border-radius carry !important only because the catalogue view's own
   inline block sets them on every text input with !important
   (#courses_list input[type="text"] {font-size:14px!important;border-radius:6px!important}),
   and Materialize renders this select as input[type="text"]. Those inline rules belong in
   a stylesheet too; when they move here the !important can go. */
#courses_list .select-wrapper input.select-dropdown {
  height: 60px;
  line-height: 60px;
  font-size: 18px !important;
  border: 1px solid #e0e2e8;
  border-radius: 10px !important;
  padding: 0 20px;
  margin: 0;
  background: #fff;
  box-sizing: border-box;
}
/* Materialize draws the caret as a separate <span class="caret"> pinned to the right;
   the taller box needs it re-centred. */
#courses_list .select-wrapper .caret {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* The options panel gets the same frame as the Sectors panel above. */
#courses_list .select-wrapper .dropdown-content {
  max-height: min(320px, 55vh);
  border: 1px solid #e0e2e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
#courses_list .select-wrapper .dropdown-content li > span {
  font-size: 15px;
  color: #131313;
}