/* =============================================================================
   Competency Assessment modal + its trigger button

   RESTYLED TO THE VTH DESIGN SYSTEM. Every colour, size, radius and space below is
   a token from css/vth-reskin/vth-tokens.css, which layouts/app.blade.php links on
   EVERY page (line 637) — so this file can consume them wherever the modal appears.

   SCOPE, AND WHY IT IS WIDER THAN ONE PAGE. The modal is included once globally
   (app.blade.php:596) and opened from about ten views, reskinned AND pre-reskin.
   There is one modal, so there is one look: restyling it here updates all of them
   together rather than leaving the component in two states.

   ICONS ARE LEFT AS THE LEGACY `lms-*` FONT ON PURPOSE. Hugeicons is NOT loaded
   globally — only the platform head links it (the_training_hub/inc/head_new:17) —
   so swapping these would render empty boxes wherever the modal opens on a public
   page. The markup keeps its glyphs; only their colour and frame change here.
   ============================================================================= */

/* ---- Shell ---------------------------------------------------------------- */
.competency-modal{max-width:775px;margin:0 auto !important;padding:0 !important;
  background:var(--surface-card);border-radius:var(--radius-xl);
  font-family:var(--font-sans);color:var(--text-primary);}
.competency-modal .modal-content{padding:var(--space-5) !important;
  max-height:calc(100vh - 260px) !important;}

/* ---- Header --------------------------------------------------------------- */
.competency-modal .modal-header{display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--space-3);padding:var(--space-5);
  background:var(--surface-subtle);border-bottom:1px solid var(--border-light);}
.competency-modal .header-left{display:flex;align-items:center;gap:var(--space-3);}
.competency-modal .modal-header .title{margin:0;font-size:var(--type-size-lg);
  line-height:1.3;font-weight:var(--weight-semibold);color:var(--text-primary);}
.competency-modal .modal-header p,
.competency-modal .modal-header .subtitle{margin:0;font-size:var(--type-size-xxs);
  line-height:1.2;color:var(--text-subtle);}
/* PURPLE, matching the Competency Assessment badge that opens it. The badge is
   purple in the design system (--badge-purple-*), and the modal arriving in a
   different colour than the control that summoned it reads as a different feature. */
.competency-modal .icon-badge{width:48px;min-width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:var(--badge-purple-bg);}
.competency-modal .icon-badge i{font-size:26px;color:var(--badge-purple-ink);}
.competency-modal .modal-header .modal-close{display:inline-flex;align-items:center;
  justify-content:center;width:36px;height:36px;flex-shrink:0;
  border-radius:50%;color:var(--text-subtle);cursor:pointer;
  transition:background .15s ease,color .15s ease;}
.competency-modal .modal-header .modal-close:hover{background:var(--surface-muted);
  color:var(--text-primary);}

/* ---- Body ----------------------------------------------------------------- */
.competency-modal p{margin:0;font-size:var(--type-size-xs);line-height:1.6;
  color:var(--text-secondary);}
.competency-modal .content-section{margin-bottom:var(--space-5);}
.competency-modal .info-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-3);}
.competency-modal .info-row:last-child{margin-bottom:0;}
.competency-modal .info-icon-box{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;min-width:30px;border-radius:50%;}
.competency-modal .info-icon-box i{font-size:16px;}
.competency-modal .info-icon-box-1{background:var(--surface-blue-soft);}
.competency-modal .info-icon-box-1 i{color:var(--vth-blue);}
.competency-modal .info-icon-box-2{background:var(--badge-yellow-bg);}
.competency-modal .info-icon-box-2 i{color:var(--badge-yellow-ink);}

.competency-modal .section-title{margin:0;font-size:var(--type-size-base);line-height:1.2;
  font-weight:var(--weight-semibold);color:var(--text-primary);}
.competency-modal .section-subtitle{margin-bottom:var(--space-3);
  font-size:var(--type-size-xxs);color:var(--text-subtle);}

/* ---- Option cards --------------------------------------------------------- */
.competency-modal .option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);margin-top:var(--space-3);}
.competency-modal .option-card{height:100%;padding:var(--space-3);
  background:var(--surface-subtle);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);transition:box-shadow .15s ease,border-color .15s ease;}
.competency-modal .option-card:hover{box-shadow:var(--shadow-md);}
.competency-modal .option-icon-area{display:flex;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-2);}
.competency-modal .option-icon-box{width:30px;height:30px;min-width:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-card);border-radius:var(--radius-md);}
.competency-modal .option-card i{margin-bottom:0;font-size:15px;color:var(--vth-blue);}
.competency-modal .option-card h6{margin:0;font-size:var(--type-size-base);line-height:1.5;
  font-weight:var(--weight-semibold);color:var(--text-primary);}
.competency-modal .option-card a{color:var(--text-link);word-break:break-word;}

/* ---- Footer --------------------------------------------------------------- */
.competency-modal .modal-footer{display:flex;justify-content:flex-end;align-items:center;
  margin:0 !important;padding:var(--space-4) var(--space-5) !important;
  border-top:1px solid var(--border-light);background:var(--surface-card);}
/* SECONDARY, not primary. The markup carries `.btn-red`, which the public theme
   paints with its own `--primary-color` — currently the LEGACY teal #12828F, not the
   design system's primary — so the one dismiss action in the footer was arriving as a
   filled call-to-action in a colour the rest of the page no longer uses. A white
   button is what the design system gives a "Close".

   !important is unavoidable here and nowhere else in this rule: the theme sets
   `.btn{border-radius:30px !important}` (style.css) and `.btn-red{background:...}`,
   and style.css is not ours to edit. Scoped to this modal's footer, so no other
   `.btn` on any page is affected. */
.competency-modal .modal-footer .btn{display:inline-flex;align-items:center;
  justify-content:center;height:44px;padding:0 var(--space-4);
  border-radius:var(--radius-md) !important;font-family:var(--font-sans);
  font-size:var(--type-size-xxs);font-weight:var(--weight-semibold);line-height:1;
  text-transform:none;letter-spacing:0;
  background:var(--btn-white-bg) !important;color:var(--btn-white-ink) !important;
  border:1px solid var(--border-light) !important;box-shadow:var(--shadow-xs) !important;}
.competency-modal .modal-footer .btn:hover{background:var(--surface-muted) !important;}

/* ---- The trigger button --------------------------------------------------- */
/* LEFT EXACTLY AS IT WAS, DELIBERATELY. The design system's competency badge is
   purple, and on the reskinned course-detail pages it already is — but that badge is
   `.vth-coursebadge--competency`, a different element. `.competency-btn` is the LEGACY
   trigger, rendered by the <competency-question> Angular component on ten other views,
   FOUR OF WHICH ARE PRE-RESKIN (course/index, leraner_course, instructor_courses_list,
   new_sector_pages_design/courses/index). Repainting it purple would restyle those four
   untouched pages, which the brief for this module does not cover.

   The six reskinned listings each pin this button's padding, radius and font-size with
   !important in their own <style> block, so only the four legacy pages would have taken
   the geometry anyway — an inconsistent half-change. Making the legacy trigger match the
   badge is a real design-system question; it is raised in HANDOVER.md as a PO decision
   rather than made silently here. */
.competency-btn { display: inline-flex; align-items: center; cursor: pointer; gap: 5px; padding: 7px 10px; box-shadow: 1px 2px 16px rgba(0, 0, 0, 0.1); border-radius: 18px; color: #C9980B; font-weight: 600;white-space: nowrap;font-size: 10px;line-height: 12px;text-transform: capitalize;}
.competency-btn i{font-size: 12px;}
.competency-btn:hover { background-color: #C9980B; color: white; }
/* The logged-out trigger. Live only on the four pre-reskin views above; the six
   reskinned ones override font-size and padding with !important. */
.no_class.competency-btn{font-size: 10px;line-height: 12px; padding: 8px 10px;}

/* ---- Logged-out variant --------------------------------------------------- */
/* One step up the SAME type scale, not a second set of sizes. The logged-out modal
   is a marketing surface and reads larger; it used to jump from 12px to 18px body
   and 20px to 24px title, which made the two variants look like two components. */
.competency-modal.no_class{width:70%;max-width:820px;margin:0 auto !important;
  max-height:calc(100vh - 90px);overflow:hidden;}
.competency-modal.no_class .modal-content{max-height:calc(100vh - 300px) !important;
  overflow-y:auto;overflow-x:hidden;}
.competency-modal.no_class p{font-size:var(--type-size-base);line-height:1.6;}
.competency-modal.no_class .modal-header .title{font-size:var(--type-size-title-6);}
.competency-modal.no_class .section-title{font-size:var(--type-size-xl);}
.competency-modal.no_class .option-card h6{font-size:var(--type-size-lg);}
.competency-modal.no_class .option-icon-box{width:40px;height:40px;min-width:40px;}
.competency-modal.no_class .option-icon-box i{font-size:20px;}
.competency-modal.no_class .modal-footer{height:auto;
  padding:var(--space-4) var(--space-6) !important;}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:992px){
  .competency-modal{width:90%;}
  .competency-modal .option-grid{grid-template-columns:minmax(0,1fr);}
  .competency-modal.no_class{width:90%;max-height:calc(100vh - 200px);}
  .competency-modal.no_class .modal-content{max-height:calc(100vh - 400px) !important;}
}
@media (max-width:1280px) and (orientation:landscape){
  .competency-modal.no_class{max-height:calc(100vh - 200px);}
  .competency-modal.no_class .modal-content{max-height:calc(100vh - 400px) !important;
    overflow-y:auto;}
}
@media (max-width:768px) and (orientation:landscape){
  .competency-modal.no_class{max-height:calc(100vh - 80px);}
  .competency-modal.no_class .modal-content{max-height:calc(100vh - 420px) !important;}
}
@media (max-width:600px){
  .competency-modal{margin:0 auto !important;max-height:calc(100vh - 150px) !important;}
  .competency-modal .modal-header{padding:var(--space-4);}
  .competency-modal .modal-content{padding:var(--space-4) !important;
    max-height:calc(100vh - 320px) !important;}
  .competency-modal .modal-footer{padding:var(--space-4) !important;
    justify-content:stretch;}
  .competency-modal .modal-footer .btn{width:100%;}
  .competency-modal .header-left{align-items:flex-start;}
  .competency-modal .icon-badge{width:40px;height:40px;min-width:40px;}
  .competency-modal .icon-badge i{font-size:22px;}
  .competency-modal .modal-header .title{font-size:var(--type-size-lg);}
  .competency-modal .option-grid{grid-template-columns:minmax(0,1fr);width:100%;}
  .competency-modal .option-card{min-width:0;padding:var(--space-4);}
  .competency-modal.no_class{width:90%;}
  .competency-modal.no_class p{font-size:var(--type-size-xs);}
  .competency-modal.no_class .option-card h6{font-size:var(--type-size-base);}
  /* The .no_class title needs its own mobile rule: `.competency-modal.no_class
     .modal-header .title` out-specifies the shared mobile rule above, so without this
     the logged-out heading stayed at 24px on a 288px-wide modal. */
  .competency-modal.no_class .modal-header .title{font-size:var(--type-size-xl);}
  .competency-modal.no_class .section-title{font-size:var(--type-size-lg);}
}