/* Viewport Styling */
  /* iOS safe-area: prevent status bar push in landscape when using viewport-fit=cover */
  :root {
      /* expose safe-area insets as vars (0 on non-iOS) */
      --sat: env(safe-area-inset-top);
      --sar: env(safe-area-inset-right);
      --sab: env(safe-area-inset-bottom);
      --sal: env(safe-area-inset-left);
  }
  body {
      /* legacy iOS 11 fallback */
      padding-top: constant(safe-area-inset-top);
      /* ensure at least a small gap even if top inset is 0 in landscape */
      padding-top: max(var(--sat), 8px);
      /* keep content full-bleed horizontally; apply side insets only to fixed bars if needed */
      padding-left: 0;
      padding-right: 0;
      /* still respect the home indicator area on the bottom */
      padding-bottom: var(--sab);

      /* Overide to 0 to see if that gets rid of issue at bottom and top */
      padding-top: 0;
      padding-bottom: 0;
  }

  /* In mobile landscape, add a small side gap while still honoring safe areas */
  @media (orientation: landscape) and (pointer: coarse) {
      body {
          padding-left: 16px;
          padding-right: 16px;
      }
  }

/* Only for iPhones (or devices with a max device width of 935px) in landscape orientation */
@media only screen and (max-device-width: 935px) and (orientation: landscape) {
/*@media only screen and (orientation: landscape) {*/
    .viewport {
        padding-left: 3rem !important;
    }
}
@media (min-width: 1200px) {
    .viewport {
    padding-left: calc((100vw - 1100px) / 2) !important;
    padding-right: calc((100vw - 1100px) / 2) !important;
    }
}
/* End Viewport Styling */

/* Font for sub headings in the banner text */
.font-weight-lighter {
    font-weight: 250 !important;
}
/* End Font for sub headings in the banner text */

/* Font Styling */
  * {
    font-family: "Inter", sans-serif;
  }
  /* body {
    font-family: 'Manrope', sans-serif;
  } */
/* End Font Styling */

/* Modal Styling */
  .modal-content {
    border-radius: 27px;
  }
/* end Modal Styling */

/* Nav Bar Styling */
/* Make the right-side icon list flex-aligned */
.nav-icons {
    display: flex;
    align-items: center;
}

/* Ensure any “clickable” element shows a pointer */
.cursor-pointer {
    cursor: pointer;
}

/* Logo sizing */
.navbar-brand img {
    width: 150px;                /* same as Courses */
    height: auto;
    display: block;
}

/* Avatar icon styling */
.nav-icons .nav-link .fa-circle-user {
    font-size: 42px;             /* match Courses page */
    line-height: 1;              /* vertical centering */
    /*color: var(--text-dark);  */   /* use your variable for dark text */
}

/* Hide the little dropdown arrow */
.nav-link.dropdown-toggle::after {
    display: none !important;
}

/* Dropdown container */
.dropdown-menu {
    
    border: 1px solid rgba(0, 0, 0, 0.15);
    /*border-radius: 27px;*/
    border-radius: 16px;
    /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);*/
    margin-top: 0rem;

    min-width: 8rem;
    padding: 0 0;
    /*padding-top: 0.25rem;*/
    background-color: var(--text-light);
    overflow: hidden;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2) !important; /* ensure no override */
} 

/* User dropdown sizing: allow one-line username/role and fit content */
.navbar .dropdown-menu {
  /* grow to content while respecting a sensible minimum */
  width: max-content;
  min-width: 160px;            /* wider than Bootstrap's 10rem */
  max-width: 90vw;             /* avoid overflowing the viewport on small screens */
  right: 0;                    /* ensure right alignment when used without dropdown-menu-right */
  left: auto;                  /* override any left positioning */
}

/* Prevent wrapping for the header lines */
.navbar .dropdown-menu .user-menu-header,
.navbar .dropdown-menu .user-menu-header .user-menu-name,
.navbar .dropdown-menu .user-menu-header .user-menu-role {
  white-space: nowrap;
}

/* Optional: keep other dropdown items wrapping normally */
.navbar .dropdown-menu .dropdown-item {
  white-space: normal;
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    transition: background-color 0.2s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--neutral-1);
    color: var(--text-dark);
}
/* Force top menu active underline to use brand-1 */
.navbar .nav-link { 
  text-decoration: none;                 /* prevent UA underline */
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  border-bottom: 2px solid var(--brand-1); /* consistent brand underline */
}
/* End Nav Bar Styling */

/* Impersonation banner */
.impersonation-banner {
  background: #fff4d6;
  border: 1px solid #f2c94c;
  color: #7a4d00;
  padding: 0.75rem 1rem;
  margin: 0 auto 1rem;
  /*width: min(960px, calc(100% - 2rem)); */
  /*border-radius: 999px;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
  flex-wrap: wrap;
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.08);*/
}
.impersonation-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 220px;
}
.impersonation-banner__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}
.impersonation-banner .btn-return-admin {
  /*border-radius: 999px;*/
  border-color: #7a4d00;
  color: #7a4d00;
  padding: 0.35rem 1.2rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  background: transparent;
  border-radius: 2em;
}
.impersonation-banner .btn-return-admin:hover,
.impersonation-banner .btn-return-admin:focus {
  background: transparent;
  color: #5c3000;
  border-color: #7a4d00;
  box-shadow: none;
}
@media (max-width: 576px) {
  .impersonation-banner {
    flex-direction: column;
    align-items: stretch;
    border-radius: 24px;
  }
  .impersonation-banner .btn-return-admin {
    width: 100%;
    text-align: center;
  }
}
/* End Impersonation banner */

/* Tables – shared admin look */
:root {
  --table-background-color: var(--neutral-1);
  --table-line-color: var(--text-light);
  --table-line-inset: 16px; /* aligns with first-column padding */
  --table-first-col-padding-left: calc(var(--table-line-inset) + 8px);
}

/* Base table surface and rounding */
.table {
  background: var(--table-background-color);
  border-radius: 16px;
  overflow: hidden; /* clip hover backgrounds to rounded corners */
  /* ensure no inter-cell gaps so row separators render as one continuous line */
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  position: relative; /* anchor side masks to the table box so they don't extend below */
}

/* Remove default borders; draw our own inset separators */
.table th { border-top: 0 transparent; }
.table td { border-top: 0 !important; }
.table thead th { border-bottom: 0 !important; }
.table thead { position: relative; }
.table thead::after {
  /* We now let the first body row draw the divider; disable this to avoid a double line */
  content: none;
  position: absolute;
  left: var(--table-line-inset);
  right: var(--table-line-inset);
  bottom: 0;
  height: 2px;
  background: var(--table-line-color);
  pointer-events: none;
}

/* Between-row separators: draw a 2px line at the TOP of each cell using a pseudo-element */
.table tbody td { position: relative; border-top: 0 !important; }
.table tbody td::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--table-line-color);
  pointer-events: none;
  z-index: 1; /* ensure it paints above cell backgrounds/content in Safari */
}
/* Create left/right insets only on the outer cells so lines stay continuous between columns */
.table tbody td:first-child::before {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent var(--table-line-inset),
    var(--table-line-color) var(--table-line-inset),
    var(--table-line-color) 100%
  );
}
.table tbody td:last-child::before {
  background: linear-gradient(
    to right,
    var(--table-line-color) 0,
    var(--table-line-color) calc(100% - var(--table-line-inset)),
    transparent calc(100% - var(--table-line-inset)),
    transparent 100%
  );
}
/* Single-column tables: inset both sides */
.table tbody td:only-child::before {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent var(--table-line-inset),
    var(--table-line-color) var(--table-line-inset),
    var(--table-line-color) calc(100% - var(--table-line-inset)),
    transparent calc(100% - var(--table-line-inset)),
    transparent 100%
  );
}
/* Keep top-of-row separators on all body rows so the penultimate/last rows are divided */

/* Remove separators for specific tables */
#css-variables-table tbody td::before { content: none !important; }

/* Payments: remove the line between a parent row and its details row (hide details row top line) */
#paymentsTable tbody tr.payment-details td::before { content: none !important; }

/* Removed side masks: insets are now applied only on first/last cells' line pseudos
   so content and hover backgrounds can span edge-to-edge without being clipped. */

/* First column: add extra padding so text starts right of the divider line */
.table thead th:first-child,
.table tbody td:first-child,
.table tfoot th:first-child,
.table tfoot td:first-child {
  padding-left: var(--table-first-col-padding-left) !important;
}

/* Horizontally scrollable table wrapper with rounded corners that react to scroll position */
.table-scroll {
  width: 100%;
  overflow: hidden;           /* both axes hidden by default */
  overflow-x: auto;           /* restore horizontal scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 16px;        /* match table radius if needed */
}
.table-scroll.not-at-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.table-scroll.at-right      { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.table-scroll:not(.at-right){ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.table-scroll.at-left       { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.table-scroll:not(.at-left) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Actions column sizing for admin lists */
#coursesTable th:last-child,
#coursesTable td:last-child,
#pathwaysTable th:last-child,
#pathwaysTable td:last-child {
  width: 170px;
  min-width: 170px;
  white-space: nowrap;
  text-align: center;
}
#coursesTable col.actions-col { width: 170px; }
#pathwaysTable col.actions-col { width: 170px; }
/* End tables – shared admin look */

/* Rounded bits Styling */
.inner-rounded {
  border-radius: 16px;
}
/* End Rounded bits Styling */

/* Banner Section */
#banner-section {
  padding-top: 4px;
}
#banner-section .banner-inner,
.banner-section .banner-inner {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2));
  color: var(--text-light);
}
/* Use the same shadow as the enroll box via .box-shadow, but clip to radius */
#banner-section .banner-inner.box-shadow {
  border-radius: 27px;                               /* match utility */
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2) !important; /* ensure no override */
  /*overflow: hidden;*/ /* override .box-shadow’s overflow:auto for clean rounded corners */
}
/* End Banner Section */


/* Editible Fields */
.editable-container {
    position: relative;
}
.editable {
    border: 1px dashed transparent;
    outline: none;
    transition: border-color 0.2s ease-in-out;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: -5px;
}
/* In edit mode, show a white dashed border on hover/focus */
.editable-mode .editable.editable-light:hover,
.editable-mode .editable.editable-light:focus {
    border-color: var(--text-color-light);
}
.editable-mode .editable.editable-dark:hover,
.editable-mode .editable.editable-dark:focus {
    border-color: var(--text-color-dark);
}
/* keep dashed when focused */
.editable-mode .editable:focus {
    outline: none;            /* remove solid UA ring */
    border-style: dashed;
    border-width: 1px;
    /*border-color: #333;*/
}
.editable-mode .editable.editable-light:focus {
    border-color: var(--text-color-light);
}
.editable-mode .editable.editable-dark:focus {
    border-color: var(--text-color-dark);
}
/* make the wrapper a positioning context */
.editable-container {
    position: relative;
}

/* the little pencil circle */
.edit-icon {
    position: absolute;
    top: 7px;
    right: -28px;
    font-size: 16px;
    color: var(--brand-2);
    background-color: var(--brand-neutral);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: none;
    z-index: 10;
}

/* the little pencil circle */
.edit-icon-unclipped {
    position: absolute;
    top: 7px;
    right: -28px;
    font-size: 16px;
    color: var(--brand-2);
    background-color: var(--brand-neutral);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: none;
    z-index: 10;
}

/* mobile tweak */
@media (max-width: 991.98px) {
    .edit-icon {
        right: -26px;
        border-radius: 50% 0 0 50%;
        clip-path: inset(0 2px 0 0);
    }
}

/* only show in edit mode */
.editable-mode .edit-icon {
    display: inline !important;
}  

/* only show in edit mode */
.editable-mode .edit-icon-unclipped {
    display: inline !important;
}  

[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--neutral-3);
    /*     color: var(--neutral-4); */
    /* you can also add pointer-events: none; if needed */
}
/* When we’re showing the placeholder, force the dashed border back to white */
.editable.is-placeholder:hover,
.editable.is-placeholder:focus {
  border-color: var(--text-light) !important;
}
/* End Editible Fields */

/* Thumbnail Images */
/* Banner Section Thumbnail */
.img-rounded {
    border-radius: 16px;
}

/* Enroll Column Thumbnail */
.img-small-rounded {
    border-radius: 16px;
}
/* End Thumbnail Images */

/* Thumbnail Images Buttons */
.thumb-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.thumb-action {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;                /* exactly like the pencil */
    padding: 6px;                   /* ditto */
    background-color: rgba(255,255,255,0.85);
    border-radius: 50%;             /* circle around the icon */
    /* padding no longer needed—icon is centered via flex */
    cursor: pointer;
    font-size: 1rem;
    color: var(--brand-2);
    transition: background-color .2s;
}
.thumb-action:hover {
    background-color: rgba(255,255,255,1);
}

/* position the two buttons in the top-right corner */
.thumb-action.upload {
    top: -15px;    /* same vertical as .edit-icon 10px */
    right: 50px; /* whatever lines up next to the thumbnail */
  }
  .thumb-action.delete {
    top: -15px;
    right: 15px;
    color: #c00;
  }
/* End Thumbnail Images Buttons */


/* Box Shadow */
.box-shadow {
    border-radius: 27px;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
  /* Important: keep overflow visible here so iOS Safari doesn't square off rounded shadows
     when inner content reflows (e.g., Bootstrap tab switches). We'll clip overflow on inner
     wrappers instead to avoid horizontal scrollbars. */
  overflow: visible;
}
/* End Box Shadow */

/* Clip negative-margin wrappers (used to balance gutters) so we don't introduce horizontal scrollbars
   while preserving rounded shadows on the outer .box-shadow container. */
.banner-inner .reverse-px-2,
.banner-inner .reverse-px-3 {
  overflow: hidden;
  /* inherit rounding so inner backgrounds don't peek past corners during reflow */
  border-radius: inherit;
}

/* Clip helper: use inside a rounded .box-shadow container to keep children clipped without
   toggling overflow on the outer element (which breaks iOS rounded shadows during reflow). */
.banner-inner .clip-rounded {
  overflow: hidden;
  border-radius: inherit;
  /* Stabilize compositing on iOS */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Disable Bootstrap's fade animation inside banner containers to avoid WebKit rounding artifacts
   when tab panes toggle visibility. */
.banner-inner .tab-content > .tab-pane { transition: none !important; }
.banner-inner .tab-content > .active { display: block; }
.banner-inner .tab-content > .tab-pane.fade { opacity: 1 !important; }

/* Extra safety for WebKit: ensure the rounded border is honored during repaints */
.banner-inner {
  border-radius: 27px; /* mirror .box-shadow radius */
  -webkit-border-radius: 27px; /* mirror .box-shadow radius */
}


/* Tippy.js “brand” theme */
.tippy-box[data-theme~='brand'] {
  background-color: var(--brand-1);
  color:            var(--text-light);
  border-radius:    8px;
  box-shadow:       0 4px 12px rgba(0,0,0,0.2);
  text-align:       center;
  pointer-events: auto !important;
  /*position: absolute !important;*/
  z-index: 10000 !important;   /* above the overlay at 9998 */
}
.tippy-box[data-theme~='brand'] .tippy-arrow {
  /* arrow inherits the box background */
  color: var(--brand-1);
}
/* End Tippy.js “brand” theme */


/* make the page non-interactive when the confirm tip is open */
body.tippy-confirm-open > *:not(.tippy-box[data-theme~='brand']) {
  pointer-events: none !important;
}


/* Round the corners of the progress bar correctly in the course and pathway detail pages */
/* Round only the bottom corners to match .img-rounded (12px) */
.thumbnail-container .progress {
  background: var(--text-light) !important;  /* white */
  opacity: 0.8 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden; /* clip the inner .progress-bar */
}

/* Ensure the bar itself stays square in its corners */
.thumbnail-container .progress-bar {
  background-color: var(--brand-highlight) !important;
  opacity: 0.8 !important;
  border-radius: 0;
}
/* end Round the corners of the progress bar correctly in the course and pathway detail pages */

/* progress bar in pathway page tasks */
/* make the thumb‐slot a positioning container */
.task-list .thumb-slot {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* match your grid item rounding */
}

/* the grey “track” */
.task-list .thumb-slot .thumbnail-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;               /* same as your card bars */
  background: var(--text-light);
  opacity: 0.8;
}

/* the colored fill */
.task-list .thumb-slot .thumbnail-progress .progress-bar {
  width: 0;
  height: 100%;
  background-color: var(--brand-highlight);
  border-radius: 0;
  transition: width 0.3s ease;
}
/* end progress bar in pathway page tasks */

/* Zubble Back Button */
.btn.zubble-button-back {
  background: var(--text-light);
  color: var(--text-dark);
  border-radius: 9999px;
  padding-left: 15px;
  padding-right: 15px;
  outline: 1px solid var(--text-dark);
}
.btn.zubble-button-back:hover,
.btn.zubble-button-back:focus,
.btn.zubble-button-back:focus-visible {
  background: var(--text-light);
  color: var(--text-dark);
  /*outline: 2px solid var(--text-dark);*/
  box-shadow: 0 0 0 3px var(--neutral-1);
}
.btn.zubble-button-back:active {
  background: var(--neutral-1);
  color: var(--text-dark);
  /*outline: 2px solid var(--text-dark);*/
  box-shadow: 0 0 0 3px var(--neutral-2);
}
/* end Zubble Back Button */

/* Task Free/Paid Switches in pathways edit mode */
/* Task Free/Paid Switches in pathways edit mode */

/* 1) switch knob + track when “on” */
.custom-control-input:checked + .custom-control-label::before {
  background-color: var(--brand-1) !important;
  border-color:     var(--brand-1) !important;
}

/* 2) switch label text when “on” */
/* .custom-control-input:checked + .custom-control-label {
  color: var(--brand-1) !important;
} */

/* 3) focus ring on the switch itself */
.custom-control-input:focus + .custom-control-label::before {
  box-shadow: 0 0 0 .2rem var(--brand-highlight) !important;
}
/* end Task Free/Paid Switches in pathways edit mode */

/* Completed banner for course and pathway thumbnails */
.thumbnail-container {
  position: relative; /* ensure the ribbon is positioned relative to this */
  overflow: hidden;    /* clip the ribbon at the image edge */
  /*border-radius:12px;*/  /* ← match the image’s rounding      */
}
.thumbnail-container .completed-banner {
  display: none;
  position: absolute;
  top: 75px;
  right: -20px;
  padding: 0.25rem 1.75rem;
  /*background: var(--brand-4);*/
  /* if --brand-highlight is semi-transparent, use a solid color here: */
  background-color: var(--brand-4);
  /* force fully opaque */
  /* opacity: 1 !important; */
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  transform: rotate(45deg);
  transform-origin: top right;
  z-index: 5;
}
.thumbnail-container.completed .completed-banner {
  display: block;
}
/* end Completed banner for course and pathway thumbnails */

/* ── Task‐level “Completed” ribbon ── */
.task-list li .thumb-slot {
  position: relative;
  overflow: hidden;   /* clip the ribbon at the thumb edge */
}

.task-list li.completed .thumb-slot::before {
  content: "Completed";
  position: absolute;
  top: 45px;           /* tweak vertically */
  right: -19px;       /* tweak horizontally */
  width: 90px;       /* adjust length */
  height: 12px;       /* ribbon thickness */
  line-height: 12px;  /* center text vertically */
  padding: 0;          /* remove any extra padding */
  background: var(--brand-1);
  color: var(--text-light);
  font-size: 0.4rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); /* trapezoid */
  transform: rotate(45deg);
  transform-origin: top right;
  z-index: 2;
}
/* end Task‐level “Completed” ribbon */



/* dynamic spacing below about secition in course and pathway detail pages */

#about-section:empty {
  margin-bottom: 0 !important;
}
/* #about-section:not(:empty) {
  margin-bottom: 1.5rem;
} */
/* @media (min-width: 992px) {
  #about-section:not(:empty) {
    margin-bottom: 3rem;
  }
} */
/* end dynamic spacing below about secition in course and pathway detail pages */


/* background for URL pathway tasks thumbnails */
.url-thumb-wrap {
    background: var(--text-light);
}
.url-thumb-icon {
    color: var(--brand-highlight);
}
/* end  



/* <zubble-progress> component */
zubble-progress {
  height:16px;
  outline:1px solid transparent; 
  /*outline-width:1px; */         /* same as before                */
  color:var(--brand-1);       /* progress-bar colour            */
  /*background-color:var(--brand-neutral);*/ /* track colour */

  /* 40 % opaque version of --brand-neutral */
  /*background-color: rgb(from var(--brand-neutral) r g b / .4);*/
  /*
  background-color: rgb(from var(--text-light) r g b / .45);
  */
  /*background-color: blue;*/
  /*background-color:var(--brand-contrast-neutral);*/ /* rail / track colour */
  /*background-color:var(--text-color-dark);*/

  
}
/* end <zubble-progress> component */


/* Avatar menu dropdown */
.user-menu-header {padding:.50rem 1rem .50rem}
.user-menu-name   {font:600 .9rem/1 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#111}
.user-menu-role   {font:400 .75rem/1 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#6c757d}
.user-menu-divider{margin:0}
.user-menu-name, .user-menu-role { display: block; }
.user-menu-role { margin-top: 3px; }
/* end Avatar menu dropdown */

/* For pathway and course page main thumbnail */
.thumbnail-container{
  position:relative; 
}
.learner-progress{
  position:absolute;
  bottom:12px;    /* gap from bottom */
  left:12px;      /* same gap from left  */
  right:12px;     /* same gap from right */
  width:auto !important;   /* cancel w-100 */
  z-index:3;
}
/* end For pathway and course page main thumbnail */

/* Button styling - for now this is for the actions of the pathways in the admin tab, though should be on actions on courses in admin tab too and any other similar buttons */
/* Circular icon buttons (for Actions columns) */
.btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  background-color: rgba(255,255,255,0.85);  /* like .thumb-action */
  color: var(--brand-2);
  border: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.btn-icon-circle:hover,
.btn-icon-circle:focus {
  background-color: rgba(255,255,255,1);
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--brand-highlight);
}
.btn-icon-circle i {
  font-size: 1rem; /* match .thumb-action icon size */
}
.btn-icon-circle.delete {
  color: #c00;     /* like .thumb-action.delete */
}
/* end Button styling */

/* Remove tap highlight and focus ring on the avatar link (mobile) */
@media (hover: none) and (pointer: coarse) {
  .navbar .dropdown-toggle,
  .navbar .dropdown-toggle *,
  .navbar .nav-icons .nav-link,
  .navbar .nav-icons .nav-link * {
    -webkit-tap-highlight-color: transparent !important;
  }
  .navbar .dropdown-toggle:focus,
  .navbar .dropdown-toggle:active,
  .navbar .dropdown-toggle:focus-visible,
  .navbar .nav-icons .nav-link:focus,
  .navbar .nav-icons .nav-link:active,
  .navbar .nav-icons .nav-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  /* if the trigger is a button */
  .navbar .dropdown-toggle.btn {
    background: transparent !important;
    border: 0 !important;
  }
}
/* end Remove tap highlight and focus ring on the avatar link (mobile) */

/* Desktop Safari/Chrome: suppress blue focus ring on mouse click for avatar
   while preserving keyboard-visible focus. Also ensure no ring when open. */
@media (hover: hover) and (pointer: fine) {
  /* Remove outline for mouse-initiated focus only */
  .navbar .nav-item.dropdown .nav-link:focus:not(:focus-visible),
  .navbar .nav-icons .nav-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
  /* When the dropdown is open, don’t draw a ring from UA styles */
  .navbar .nav-item.dropdown.show .nav-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Fallback for browsers without :focus-visible (e.g., older Safari):
   when the dropdown is open, suppress the UA focus ring on the toggle */
.navbar .nav-item.dropdown.show > .nav-link:focus,
.navbar .nav-item.dropdown.show > .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Unify styling: My Courses tabs (#tabsMenu) ↔ top app menu (Learn/Browse/Admin) */
/* Base: neutral text, no background, reserved underline space, tighter gap */
#tabsMenu .nav-link {
  position: relative;
  display: inline-flex;                 /* shrink to content width */
  align-items: center;
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important; /* reserve space to prevent layout shift */
  padding-bottom: 10px !important;                 /* match top menu gap to underline */
  padding-left: 0 !important;                      /* no horizontal padding so underline == content */
  padding-right: 0 !important;
  margin-right: 1.25rem;                           /* spacing between tabs */
  gap: .25rem;                                     /* icon/text spacing */
}
/* Hover/focus: keep neutral */
#tabsMenu .nav-link:hover,
#tabsMenu .nav-link:focus,
#tabsMenu .nav-link:active {
  color: inherit !important;
  background: transparent !important;
}
/* Active: bold + brand-highlight underline that extends left/right beyond text */
#tabsMenu .nav-link.active,
#tabsMenu .show > .nav-link,
#tabsMenu .nav-link[aria-current="page"] {
  font-weight: 700 !important;
}
#tabsMenu .nav-link.active::after,
#tabsMenu .show > .nav-link::after,
#tabsMenu .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;                                  /* underline just the content box */
  right: 0;
  bottom: 0;                               /* align with bottom edge of the link */
  height: 2px;
  background-color: var(--brand-highlight); /* match top menu underline */
  border-radius: 1px;
}

/* Ensure the tabs row itself doesn’t add extra spacing */
#tabsMenu { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Remove grey divider under the tabs (Bootstrap nav-tabs and common cases) */
#tabsMenu,
#tabsMenu.nav-tabs {
  border-bottom: 0 !important;   /* kills the default nav-tabs line */
  box-shadow: none !important;
}
/* If an <hr> is used directly after the tabs, hide it */
#tabsMenu + hr { display: none !important; }

/* Admin tabs: match top menu underline spacing */
#tabsMenuAdmin .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important; /* reserve space */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 10px !important;                 /* same gap as top menu */
  gap: .25rem;
}
#tabsMenuAdmin .nav-link i { color: inherit !important; }
#tabsMenuAdmin .nav-link.active,
#tabsMenuAdmin .show > .nav-link,
#tabsMenuAdmin .nav-link[aria-current="page"] { font-weight: 700 !important; }
#tabsMenuAdmin .nav-link.active i,
#tabsMenuAdmin .show > .nav-link i { color: var(--brand-highlight) !important; }
#tabsMenuAdmin .nav-link.active::after,
#tabsMenuAdmin .show > .nav-link::after,
#tabsMenuAdmin .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                               /* align to link bottom edge */
  height: 2px;
  background-color: var(--brand-highlight); /* same underline color */
  border-radius: 1px;
}

/* Icons: neutral by default, highlight on active */
#tabsMenu .nav-link i { color: inherit !important; }
#tabsMenu .nav-link.active i,
#tabsMenu .show > .nav-link i { color: var(--brand-1) !important; }