/**
 * Known Universe: LearnDash List Courses CSS
 *
 * CSS For LearnDash Courses GRID and World Course Manager Features
 * 08-06-2026: Renamed from learndash-builder.css to ku-course-manager.css.
 *             A CodeSnippets fix dequeues any stylesheet whose internal name
 *             contains "learndash" on pages with no real LearnDash content, to
 *             stop the actual LearnDash plugin's CSS loading site-wide. This
 *             file's old name/handle also contained "learndash", so it was
 *             being caught and removed by that same snippet on the Learning
 *             Management dashboard tool, even though it's this plugin's own
 *             file, not LearnDash's. Renaming removes the accidental match.
 * 04-29-2026: Moved some CSS from CodeSnippets into this file
 *             Fixed buttons on the Course Management tab
 *             Fixed text size in Manage Members table
 * 04-12-2026: Format the MY COURSES text in the card to match the World's "Courses" tab
 *             and change breadcrumbs for MY COURSES to: My Worlds > My Courses > Course Name
 *             and fix Question Mark Hover message
 * 04-11-2026: Formats breadcrumbs for the LD interface
 * 02-15-2026: Updated to include new Course Manager Features CSS
 * 02-09-2026: ChatGPT: Updated for the new Request Access button and the new Course Access Manager layouts.
 * 06-14-2025: ChatGPT: This CSS is a partner to the LearnDash List Courses Shortcode snippet. It controls 
 *            the display of course cards we create from the shortcode.
 */

/* Wrapper for the full course grid */
.ku-course-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  margin-top: 15px;
}
/* Remove top spacing from BuddyBoss group tab content */
#buddypress #item-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure the course grid itself isn't creating the gap */
.ku-course-grid {
  margin-top: -15px !important; /* Adjust this value as needed */
}


/* Individual course card */
.ld-course-card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  padding: 16px;
  width: 300px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ld-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* Thumbnail section */
.ld-course-thumb img {
  border-radius: 6px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Title */
.ld-course-title a {
  text-decoration: underline;
  font-size: 15px;
  color: #4188B7;
  margin-bottom: 12px;
}

/* World course grid: center course title text */
.ku-course-grid .ld-course-title {
  text-align: center;
}

.ld-course-title a:hover {
  color: #DD9933;
  text-decoration: underline;
  margin-bottom: 12px;
}

/* Lesson count */
.ld-lesson-count {
  margin-top: 14px;
  font-size: 14px;
  font-weight: bold;
  color: #6A8E22;
}

/* Completion progress */
.ld-course-progress {
  margin-top: 0px;
  font-size: 13px;
  color: #6A8E22;
}

/* Request Access button spacing */
.ld-course-request-access {
  margin-top: 16px;
}

/* Instructor info */
.ld-course-author {
  margin-top: 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
  text-decoration: italic;
  color: #122b46;
}

.ld-course-author img {
  border-radius: 50%;
  margin-right: 8px;
}

/* Remove spacing from parent containers if present */
.group-single .group-home-wrap,
.group-single .group-tabs-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ******************************************************************
 * **** Manage Access Hide till Member Table Exists  ****************
 * ****************************************************************** */

#nonu_cwm_access_modal {
    display: none !important;
}

#nonu_cwm_access_modal.is-open {
    display: block !important;
}


/* ******************************************************************
 * **** WORLD COURSE MANAGER ACCESS MODAL HEADER ********************
 * ****************************************************************** */

#nonu_cwm_access_dialog .nonu-cwm-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    border-top: 1px solid #d9d9d9 !important;
    border-bottom: 0 !important;

    padding-top: 10px !important;
    padding-bottom: 10px !important;

    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

#nonu_cwm_access_dialog .nonu-cwm-modal-header .nonu-title {
    margin: 0 !important;
}

#nonu_cwm_access_close.nonu-cwm-modal-close {
    background: #122B46 !important;
    border: 1px solid #122B46 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    min-width: 38px !important;
    height: auto !important;
}

#nonu_cwm_access_close.nonu-cwm-modal-close:hover,
#nonu_cwm_access_close.nonu-cwm-modal-close:focus {
    background: #ffffff !important;
    color: #122B46 !important;
    border-color: #122B46 !important;
}


/* ******************************************************************
 * **** ACCESS MODAL: ERROR MESSAGE SPACING *************************
 * ****************************************************************** */

#nonu_cwm_access_modal .notice,
#nonu_cwm_access_modal .notice-error,
#nonu_cwm_access_modal .nonu-error,
#nonu_cwm_access_modal .nonu-error-message {
    margin-bottom: 60px !important;
}

#nonu_cwm_access_modal .notice,
#nonu_cwm_access_modal .nonu-error-message {
    padding: 10px 12px;
    border-radius: 6px;
}


/* ******************************************************************
 * **** BUTTON SYSTEM COLORS (ALL COURSE BUTTONS)  ******************
 * ****************************************************************** */

.nonu-world-course-access .button,
.nonu-world-course-access .button-primary,
.nonu-world-course-access .button-secondary {
  background-color: #122B46 !important;
  border-color: #122B46 !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-height: auto !important;
}

.nonu-world-course-access .button:hover,
.nonu-world-course-access .button:focus,
.nonu-world-course-access .button-primary:hover,
.nonu-world-course-access .button-primary:focus,
.nonu-world-course-access .button-secondary:hover,
.nonu-world-course-access .button-secondary:focus {
  background-color: #ffffff !important;
  border-color: #122B46 !important;
  color: #122B46 !important;
}

/* ******************************************************************
 * **** WORLD COURSE MANAGER BUTTON SYSTEM **************************
 * ****************************************************************** */

#nonu-cwm .button,
#nonu-cwm .button-primary,
#nonu-cwm .button-secondary,
#nonu-cwm .nonu-btn,
#nonu-cwm button,
#nonu-cwm input[type="submit"],
#nonu-cwm input[type="button"] {
    background-color: #122B46 !important;
    color: #ffffff !important;
    border: 1px solid #122B46 !important;

    padding: 6px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;

    margin-bottom: 10px !important;
}

/* Hover / Focus */
#nonu-cwm .button:hover,
#nonu-cwm .button:focus,
#nonu-cwm .button-primary:hover,
#nonu-cwm .button-primary:focus,
#nonu-cwm .button-secondary:hover,
#nonu-cwm .button-secondary:focus,
#nonu-cwm .nonu-btn:hover,
#nonu-cwm .nonu-btn:focus,
#nonu-cwm button:hover,
#nonu-cwm button:focus,
#nonu-cwm input[type="submit"]:hover,
#nonu-cwm input[type="submit"]:focus,
#nonu-cwm input[type="button"]:hover,
#nonu-cwm input[type="button"]:focus {
    background-color: #ffffff !important;
    color: #122B46 !important;
    border-color: #122B46 !important;
}

/* ******************************************************************
 * **** ENROLLMENT MODE SPACING         *****************************
 * ****************************************************************** */

#nonu-cwm .nonu-enrollment-mode {
  margin: 0 0 12px 0 !important;
  padding-top: 4px !important;
}

#nonu-cwm .nonu-enrollment-mode legend {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

#nonu-cwm .nonu-enrollment-mode label {
  display: block !important;
  margin: 0 0 4px 0 !important;
}

#nonu-cwm .nonu-enrollment-mode .nonu-action {
  display: inline-block !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

#nonu-cwm .nonu-enrollment-mode br {
  display: none !important;
}

/* ******************************************************************
 * **** WORLD COURSE MANAGER MEMBER TABLE FONT SIZE *****************
 * ****************************************************************** */

#nonu-cwm .nonu-member-table,
#nonu-cwm .nonu-member-table th,
#nonu-cwm .nonu-member-table td,
#nonu-cwm .nonu-member-table label,
#nonu-cwm .nonu-member-table input,
#nonu-cwm .nonu-member-table select,
#nonu-cwm .nonu-member-table button,
#nonu-cwm .nonu-member-table span {
  font-size: 14px !important;
}

/* ******************************************************************
 * **** BREADCRUMB (NEW) *********************************************
 * ****************************************************************** */

.nonu-ld-breadcrumb {
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

.nonu-ld-breadcrumb a {
    text-decoration: underline;
    color: #122B46;
}

.nonu-ld-breadcrumb a:hover {
    color: #DD9933;
}

/* ******************************************************************
 * **** MY COURSES TITLE SPACING ************************************
 * ****************************************************************** */

#page .bb-course-title {
    margin-bottom: 12px;
    text-align: center;
}

#page .bb-course-title a {
    max-height: none !important;
    margin-bottom: 12px;
    color: #4188B7 !important;
    text-decoration: underline !important;
}

#page .bb-course-title a:hover {
    color: #DD9933 !important;
    text-decoration: underline !important;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE - Hover Question Mark Formatting ************
 * ****************************************************************** */

#page .ir-send-doubts button,
#page .ir-message-doubts button {
    text-transform: none !important;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE BUTTON COLORS *******************************
 * ****************************************************************** */

.ir-button,
.ir-send-doubts button,
.ir-message-doubts button {
    background-color: #122B46 !important;
    border: 1px solid #122B46 !important;
    color: #ffffff !important;
}

/* Hover state */
.ir-button:hover,
.ir-send-doubts button:hover,
.ir-message-doubts button:hover {
    background-color: #ffffff !important;
    border-color: #122B46 !important;
    color: #122B46 !important;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE PANEL TABS **********************************
 * ****************************************************************** */

.mantine-Tabs-tab .mantine-Tabs-tabLabel {
    font-size: 14px !important;
}

.ir-text-colour.ir-light-primary-colour.mantine-Tabs-tab {
    background-color: #122B46 !important;
    color: #ffffff !important;
    border: 1px solid #122B46 !important;
    margin-right: 5px !important;
}

.ir-text-colour.ir-light-primary-colour.mantine-Tabs-tab:hover {
    background-color: #ffffff !important;
    color: #122B46 !important;
    border-color: #122B46 !important;
}

.ir-text-colour.ir-light-primary-colour.mantine-Tabs-tab[aria-selected="true"] {
    background-color: #122B46 !important;
    color: #ffffff !important;
    border-color: #122B46 !important;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE NO-BG BUTTON SPACING ************************
 * ****************************************************************** */

.ir-primary-colour.ir-button-no-bg {
    background-color: #ffffff !important;
    color: #122B46 !important;
    border: 1px solid #122B46 !important;
    padding: 8px 14px !important;
}

.ir-primary-colour.ir-button-no-bg:hover,
.ir-primary-colour.ir-button-no-bg:focus {
    background-color: #122B46 !important;
    color: #ffffff !important;
    border-color: #122B46 !important;
}

/* Keep label/icon aligned with button color */
.ir-primary-colour.ir-button-no-bg .mantine-Button-label,
.ir-primary-colour.ir-button-no-bg .mantine-Button-icon,
.ir-primary-colour.ir-button-no-bg svg {
    color: inherit !important;
}

/* Add a little space between icon and text */
.ir-primary-colour.ir-button-no-bg .mantine-Button-inner {
    gap: 8px;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE BUTTON VARIANTS *****************************
 * ****************************************************************** */

/* Filled primary button */
.ir-primary-bg.ir-button {
    background-color: #122B46 !important;
    color: #ffffff !important;
}

.ir-primary-bg.ir-button:hover,
.ir-primary-bg.ir-button:focus {
    background-color: #ffffff !important;
    color: #122B46 !important;
}

/* Keep label aligned with filled button color */
.ir-primary-bg.ir-button .mantine-Button-label,
.ir-primary-bg.ir-button .mantine-Button-icon,
.ir-primary-bg.ir-button svg {
    color: inherit !important;
}

/* ******************************************************************
 * **** INSTRUCTOR ROLE GROUPS CARD TITLE ONLY **********************
 * ****************************************************************** */

.mantine-Card-cardSection .mantine-fnamcj .ir-heading-color {
    font-size: 15px;
    color: #841516;
    font-weight: 500;
    line-height: 1.5;
}


    /******************************************************************
     ***  LEARNDASH COURSE BANNER OVERLAY UPDATES
     ***  Softens the Overlay to allow for brighter images
     ******************************************************************/
     
     /* Soften the overlay instead of removing it */

    .bb-learndash-banner::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.4); /* adjust opacity */
      pointer-events: none;
    }

    /*******************************************************************
     ***  CUSTOM FONT FOR LEARNDASH BANNERS
     *******************************************************************/
     
     /* Course banner title */
    .bb-learndash-banner .entry-title {
      font-family: 'Inter', sans-serif !important;
      font-weight: 600; /* adjust to 400/700 for lighter/heavier */
      letter-spacing: 0.5px; /* optional for readability */
    }

    /* Course content section headings */
    .ld-section-heading h2,
    .ld-lesson-section-heading {
      font-family: 'Inter', sans-serif !important;
    }

    /* General LearnDash course item titles */
    .ld-item-title span {
      font-family: 'Inter', sans-serif !important;
    }

    
/* ******************************************************************
 * **** SEARCH / FILTER ROW SPACING ABOVE MEMBER TABLE **************
 * ****************************************************************** */

#nonu-cwm .nonu-member-controls {
  margin-bottom: 10px !important;
}



/* ******************************************************************
 * **** WORLD COURSE MANAGER CHECKBOX + RADIO COLORS ****************
 * ****************************************************************** */

#nonu-cwm input[type="checkbox"],
#nonu-cwm input[type="radio"],
.nonu-world-course-access input[type="checkbox"],
.nonu-world-course-access input[type="radio"],
#nonu_cwm_access_modal input[type="checkbox"],
#nonu_cwm_access_modal input[type="radio"] {
    accent-color: #122B46 !important;
    cursor: pointer;
}




/* ******************************************************************
 * **** WORLD COURSE MANAGER MEMBER TABLE ROW HEIGHT ****************
 * ******************************************************************
 * Matches the World Roles table rhythm:
 * - Header cells: 10px 12px, 14px font
 * - Body cells: 10px 12px, 14px font
 */

#nonu-cwm .nonu-member-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px !important;
}

#nonu-cwm .nonu-member-table th {
    background: #122B46 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
}

#nonu-cwm .nonu-member-table td {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    vertical-align: top !important;
}

#nonu-cwm .nonu-member-table label,
#nonu-cwm .nonu-member-table input,
#nonu-cwm .nonu-member-table select,
#nonu-cwm .nonu-member-table button,
#nonu-cwm .nonu-member-table span {
    font-size: 14px !important;
    line-height: 1.4 !important;
}




/* ******************************************************************
 * **** SWIPE HINT VISIBILITY ***************************************
 * ******************************************************************
 * Swipe hints should only appear on phones/tablets.
 * This block is intentionally near the end so it wins over earlier rules.
 */

@media (min-width: 769px) {
    .nonu-swipe-hint,
    .ku-swipe-hint,
    .ku-collaborator-access-swipe-hint,
    .ku-world-role-definitions-swipe-hint,
    .ku-world-role-assignments-swipe-hint {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .nonu-swipe-hint,
    .ku-swipe-hint,
    .ku-collaborator-access-swipe-hint,
    .ku-world-role-definitions-swipe-hint,
    .ku-world-role-assignments-swipe-hint {
        display: block;
    }
}




/* ******************************************************************
 * **** WORLD COURSE MANAGER SCROLLBAR COLORS ***********************
 * ******************************************************************
 * Matches the World Roles table scrollbar styling.
 */

#nonu-cwm,
#nonu-cwm .nonu-member-table-wrapper,
.nonu-world-course-access,
#nonu_cwm_access_modal {
    scrollbar-width: auto;
    scrollbar-color: #EDC993 #F3F3F3;
}

#nonu-cwm::-webkit-scrollbar,
#nonu-cwm .nonu-member-table-wrapper::-webkit-scrollbar,
.nonu-world-course-access::-webkit-scrollbar,
#nonu_cwm_access_modal::-webkit-scrollbar {
    height: 14px;
    width: 14px;
}

#nonu-cwm::-webkit-scrollbar-track,
#nonu-cwm .nonu-member-table-wrapper::-webkit-scrollbar-track,
.nonu-world-course-access::-webkit-scrollbar-track,
#nonu_cwm_access_modal::-webkit-scrollbar-track {
    background: #F3F3F3;
    border-radius: 8px;
}

#nonu-cwm::-webkit-scrollbar-thumb,
#nonu-cwm .nonu-member-table-wrapper::-webkit-scrollbar-thumb,
.nonu-world-course-access::-webkit-scrollbar-thumb,
#nonu_cwm_access_modal::-webkit-scrollbar-thumb {
    background: #EDC993;
    border-radius: 8px;
    border: 2px solid #F3F3F3;
}

#nonu-cwm::-webkit-scrollbar-thumb:hover,
#nonu-cwm .nonu-member-table-wrapper::-webkit-scrollbar-thumb:hover,
.nonu-world-course-access::-webkit-scrollbar-thumb:hover,
#nonu_cwm_access_modal::-webkit-scrollbar-thumb:hover {
    background: #C9851F;
}

/* ==========================================================
   Dashboard Help Zones
   ==========================================================
   Elementor containers used as dashboard help zones should use:
   - CSS class: ku-dashboard-help-zone
   - CSS ID:    ku-help-{tool}

   Example:
   ?ku_tool=events shows #ku-help-events.

   Live pages hide inactive Help Zones. Elementor edit mode keeps
   all Help Zones visible so the containers can be edited.
*/

body:not(.elementor-editor-active) .ku-dashboard-help-zone:not(.ku-dashboard-help-zone-active) {
	display: none !important;
}

body.elementor-editor-active .ku-dashboard-help-zone {
	display: block !important;
	opacity: 1 !important;
	outline: 2px dashed #DD9933;
	padding: 12px;
	margin-bottom: 12px;
}

/* Empty-state message shown in place of the Available Courses list when the
   selected Host has no courses to assign. Larger and bold so it's clearly
   the answer to "why is this list empty," not just another line of fine
   print. Matches Dianne's 08-06-2026 mockup. Indent and #841516 color
   added 08-06-2026 per Dianne's follow-up. */
#nonu_cwm_empty_message {
	font-size: 16px;
	font-weight: 700;
	color: #841516;
	padding-left: 10px;
}