/* Viewport Styling */
/* 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 */

/* Body Styling */
body {
    font-family: 'Manrope', sans-serif;
  }
/* End Body 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: 0.25rem;
    /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);*/
    margin-top: 0.5rem;
    min-width: 8rem;
    padding: 0.25rem 0;
    background-color: var(--text-light);
}

/* 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 */


/* Banner Section */
#banner-section {
  padding-top: 4px;
}
#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);
    overflow: auto;
}
/* End Box Shadow */


/* 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:10px;
  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:.35rem 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:8px;    /* gap from bottom */
  left:8px;      /* same gap from left  */
  right:8px;     /* 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) */

/* 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; }