/* ============================================================
   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. */
/* Second condition catches a phone held sideways, which is ~851px wide and so misses
   the width test - see the landscape block at the end of this file. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  #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;
}

/* ---------- Slide-out menu: items that could not be reached ---------------- */
/* Header rule, so it has to reach every page that draws a header - which is why this
   file is linked from layouts/app.blade.php rather than only from reskin-common-head:
   the nine sector pages do not include that partial, which is why the fix did not
   reach them at first.
   style.css:1514 pins the panel at top:86px but still gives it height:100vh, so it
   already ends 86px below the fold, and it sets no overflow at all. Portrait mostly
   hides that; in landscape the viewport is 393px tall while the accordion runs several
   times longer, so everything past the first few items was unreachable - the panel is
   position:fixed, so scrolling the page does not move it either. Ending it at the
   bottom of the screen and letting it scroll its own content fixes both, and returns
   the 86px portrait was also losing. Matched to the width band where the theme makes
   this a slide-out panel in the first place. */
@media (max-width: 1199px) {
  .nav-navbar.sidemenu {
    height: auto;
    bottom: 0;
    overflow-y: auto;
    /* Stops a flick at the panel's end from scrolling the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Course cards on a phone held sideways -------------------------- */
/* Every mobile rule for this card is keyed to width alone - max-width 600px in
   common_new_theme.css:1306, 767px in style.css:3320, 768px in the catalogue view.
   A phone in landscape reports ~851px wide (1080x2340 at dpr 2.75 = 851x393), so it
   clears all three and gets the desktop card: .course-full-info stays display:flex
   from common_new_theme.css:452 and the image keeps its fixed width, leaving the
   title column too narrow and pushing the card past the viewport.
   Height is what actually distinguishes a phone here, so match on it. A tablet in
   landscape is 768px tall and is not caught; a 500px-tall viewport wants the stacked
   card either way. Same declarations the theme already applies at 600px, so this only
   widens WHEN they apply, never WHAT they do. Scoped to .online-course-section, which
   is the card's own wrapper, so all fourteen views using it are covered from here. */
@media (orientation: landscape) and (max-height: 500px) {
  .online-course-section .course-full-info { flex-direction: column; }
  .online-course-section .course-image { margin-right: 0; }
  .online-course-section .course-image > img {
    width: 100%;
    min-width: 100%;
    height: 260px;
  }
  /* Stacking puts the title directly under the image, and the gap the theme adds for
     that (common_new_theme.css:1390) is inside its 600px block, so landscape never got
     it and the title sat flush against the image. Same 15px the theme uses. */
  .online-course-section .online-course-item .course-info { margin-top: 15px; }
  /* Badge rows and card buttons overflow the same way once the card is narrow. */
  .online-course-section .online-course-item .course-tags,
  .online-course-section .online-course-item .course-lebel,
  .online-course-section .online-course-item .another_tags { flex-wrap: wrap; }
  .online-course-section .online-course-item .btn {
    width: 100%;
    justify-content: center;
  }
}