/* ============================
   New Dashboard
============================= */
.dashboard-hero1 {
  position: relative;
  background-color: var(--nav-bg-color);
  background-image: url("https://review.cortexa.co.uk/totara/bg_hub.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
}


/* OVERLAY CONTENT */
.dashboard-overlay1 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

/* TEXT */
.dashboard-text1 {
  margin: 0;
  font-size: 1.25rem;
  color: #38454f;
}

/* SEARCH FORM */
.dashboard-search1 {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.dashboard-search1 input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--nav-bg-color); /* green outline */
}

.dashboard-search1 button {
  padding: 10px 18px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  background-color: #51565c; /* Totara-style blue */
  color: #fff;
  cursor: pointer;
}

.dashboard-search1 button:hover {
  background-color: var(--nav-bg-color);
}


/* ============================
  featued links
============================= */
/* Reduce depth of Featured Links tiles */
.tiles .block-totara-featured-links-tile {
    min-height: 140px; /* adjust until it looks right */
    height: 140px;
}

/* Desktop: 5 wide */
.tiles .block-totara-featured-links-tile {
    width: 18%!important;
    flex-basis: 18%!important;
}

/* Tablet: 3 wide */
@media (max-width: 1024px) {
    .tiles .block-totara-featured-links-tile {
        width: 33.333%!important;
        flex-basis: 33.333%!important;
    }
}

/* Mobile: 2 wide */
@media (max-width: 640px) {
    .tiles .block-totara-featured-links-tile {
        width: 100%!important;
        flex-basis: 100%!important;
    }
}


/* ============================
   Learning Card Styling
============================= */
/* HTML Featured Links Block Styling */
.custom .my-featured-links1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 20px;
}

.custom .tile1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
    padding-bottom: 0;
}

.custom .tile1:hover {
    background-color: #e0e0e0;
    border-color: #999;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom .tile1 img.tile-image {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #ddd;
}

.custom .tile-content1 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.custom .tile1 h3 {
    font-size: 18px !important;
    padding-top: 10px;
}

.custom .tile1 p {
    font-size: 14px;
    color: #666;
    padding: 0 10px 10px;
}

.custom .tile1 a.tile-button1 {
    display: inline-block;
    background-color: #7f29a9;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    align-self: center;
}

.custom .tile1 a.tile-button1:hover {
    background-color: #cc3366;
}

/* Mobile */
@media (max-width: 768px) {
    .custom .my-featured-links1 {
        display: block;
    }
}

.page-heading {
    display: none;
}

/* ============================
   News&Announcements
============================= */
/* ============================================================
   CONSTRUCTION PRODUCT HUB — Latest Announcements Block
   Target: block_news_items
   ============================================================ */

/* ── Block shell ── */
.block_news_items.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;
}

/* ── Block header bar ── */
.block_news_items .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  padding: 12px 16px 11px;
  display:block;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* ── Block title ── */
.block_news_items .block-title h2,
.block_news_items .block-header h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 10px;
}

/* Add a decorative left accent line to the header */
.block_news_items .block-header {
  border-left: 3px solid var(--nav-tab-text-color);
}

/* ── Block content area ── */
.block_news_items .block-content {
  padding: 14px 16px;
}

/* ── "Add a new topic" link ── */
.block_news_items .newlink {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde6e4;
}

.block_news_items .newlink a {
  font-weight: 600;
  color: #3a7888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s ease;
}

.block_news_items .newlink a::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(58, 120, 136, 0.12);
  border-radius: 50%;
  font-weight: 700;
  color: #3a7888;
  line-height: 1;
}

.block_news_items .newlink a:hover {
  color: #2a5b68;
}

/* ── Remove default list styling ── */
.block_news_items ul.unlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Each news post item ── */
.block_news_items ul.unlist li.post {
  padding: 11px 12px;
  margin: 0 0 8px 0;
  border-radius: 6px;
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}

.block_news_items ul.unlist li.post:last-child {
  margin-bottom: 0;
}

.block_news_items ul.unlist li.post:hover {
  border-color: #3a7888;
  box-shadow: 0 2px 10px rgba(58, 120, 136, 0.1);
}

/* ── Post head (date + author row) ── */
.block_news_items ul.unlist li.post .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.block_news_items ul.unlist li.post .head .date {
  font-size: 10.5px;
  color: #8fa4aa;
  font-weight: 400;
}

/* Small separator dot between date and name */
.block_news_items ul.unlist li.post .head .date::after {
  content: '·';
  margin-left: 8px;
  color: #c5d5d2;
}

.block_news_items ul.unlist li.post .head .name {
  font-size: 10.5px;
  color: #8fa4aa;
  font-weight: 500;
}

/* ── Post title link ── */
.block_news_items ul.unlist li.post .info a {
  font-weight: 600;
  color: #252f36;
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color 0.18s ease;
}

.block_news_items ul.unlist li.post .info a:hover {
  color: #3a7888;
}

/* ── Add a subtle left coloured indicator per post ── */
.block_news_items ul.unlist li.post:nth-child(1) {
  border-left: 3px solid #4a9e7a; /* green — new content */
}

.block_news_items ul.unlist li.post:nth-child(2) {
  border-left: 3px solid #d4903a; /* amber — reminder/warning */
}

.block_news_items ul.unlist li.post:nth-child(3) {
  border-left: 3px solid #3a7888; /* teal — update */
}

/* If there are more posts beyond 3 */
.block_news_items ul.unlist li.post:nth-child(n+4) {
  border-left: 3px solid #b8cbc7; /* sage — general */
}

/* ── Footer "Older topics" link ── */
.block_news_items .block-content .footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dde6e4;
  text-align: right;
}

.block_news_items .block-content .footer a {
  font-weight: 500;
  color: #3a7888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s ease;
}

.block_news_items .block-content .footer a::after {
  content: '›';
  font-size: 14px;
  line-height: 1;
}

.block_news_items .block-content .footer a:hover {
  color: #2a5b68;
}

/* ── Action dropdown menu ── */
.block_news_items .moodle-actionmenu .menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 200px;
}

.block_news_items .moodle-actionmenu .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_news_items .moodle-actionmenu .menu li a:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_news_items .moodle-actionmenu .menu li a.editing_delete {
  color: #c25a5a;
}

.block_news_items .moodle-actionmenu .menu li a.editing_delete:hover {
  background: rgba(194, 90, 90, 0.06);
  color: #9e3c3c;
}

/* ============================================================
   CONSTRUCTION PRODUCT HUB — Upcoming Events Block
   Target: block_calendar_upcoming
   ============================================================ */

/* ── Block shell ── */
.block_calendar_upcoming.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;
}

/* ── Block header ── */
.block_calendar_upcoming .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  border-left: 3px solid var(--nav-tab-text-color);
  padding: 12px 16px 11px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* ── Block title ── */
.block_calendar_upcoming .block-title h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  padding-left: 10px;
}

/* ── Content area ── */
.block_calendar_upcoming .block-content {
  padding: 14px 16px;
}

/* ── Each event item ── */
.block_calendar_upcoming .event {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 10px 0;
  border-bottom: 1px solid #dde6e4;
  position: relative;
}

.block_calendar_upcoming .event:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.block_calendar_upcoming .event:first-of-type {
  padding-top: 0;
}

/* ── Date "calendar chip" — built from the .date div ── */
/* We reflow the layout so the date appears as a left-side date badge */
.block_calendar_upcoming .event {
  flex-wrap: wrap;
}

/* The event icon (person_calendar etc) */
.block_calendar_upcoming .event .icon {
  display: none; /* hide the default flex-icon — we use border colour instead */
}

/* ── Event title link ── */
.block_calendar_upcoming .event > a {
  font-weight: 600;
  color: #252f36;
  text-decoration: none;
  line-height: 1.4;
  display: block;
  width: 100%;
  margin-bottom: 4px;
  transition: color 0.18s ease;
  padding-left: 10px;
  border-left: 3px solid var(--nav-tab-text-color);
}

.block_calendar_upcoming .event > a:hover {
  color: #3a7888;
}

/* ── Date/time line ── */
.block_calendar_upcoming .event .date {
  font-size: 11px;
  color: #8fa4aa;
  line-height: 1.5;
  padding-left: 13px;
  width: 100%;
  margin: 0 !important;
}

/* Style the date link inside .date */
.block_calendar_upcoming .event .date a {
  color: #5a6e77;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s ease;
}

.block_calendar_upcoming .event .date a:hover {
  color: #3a7888;
}

/* Hide the » arrow — redundant with our layout */
.block_calendar_upcoming .event .date strong {
  display: none;
}

/* Replace with a cleaner time separator */
.block_calendar_upcoming .event .date br {
  display: none;
}

/* ── Colour-code events by type using the icon class ── */
/* c0 = user event → teal */
.block_calendar_upcoming .event:has(.c0) > a {
  border-left-color: #3a7888;
}

/* c1 = global event → sage */
.block_calendar_upcoming .event:has(.c1) > a {
  border-left-color: #b8cbc7;
}

/* c2 = course event → green */
.block_calendar_upcoming .event:has(.c2) > a {
  border-left-color: #4a9e7a;
}

/* c3 = group event → amber */
.block_calendar_upcoming .event:has(.c3) > a {
  border-left-color: #d4903a;
}

/* c4 = category event → secondary */
.block_calendar_upcoming .event:has(.c4) > a {
  border-left-color: #94b0aa;
}

/* ── Footer ── */
.block_calendar_upcoming .block-content .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dde6e4;
}

.block_calendar_upcoming .block-content .footer .gotocal a,
.block_calendar_upcoming .block-content .footer .newevent a {
  font-size: 11.5px;
  font-weight: 500;
  color: #3a7888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.18s ease;
}

.block_calendar_upcoming .block-content .footer .gotocal a:hover,
.block_calendar_upcoming .block-content .footer .newevent a:hover {
  color: #2a5b68;
}

/* "Go to calendar" gets a › arrow */
.block_calendar_upcoming .block-content .footer .gotocal a::after {
  content: '›';
  font-size: 14px;
  line-height: 1;
}

/* "New event" gets a + prefix */
.block_calendar_upcoming .block-content .footer .newevent a::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: rgba(58, 120, 136, 0.12);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #3a7888;
  line-height: 1;
}

/* Strip the "..." that Totara appends */
.block_calendar_upcoming .block-content .footer .gotocal,
.block_calendar_upcoming .block-content .footer .newevent {
  font-size: 0; /* hides the raw "..." text node */
}

.block_calendar_upcoming .block-content .footer .gotocal a,
.block_calendar_upcoming .block-content .footer .newevent a {
  font-size: 11.5px; /* restore font size on the  only */
}

/* ── Block controls (gear/move — when in edit mode) ── */
.block_calendar_upcoming .block-control-actions .menubar {
  align-items: center;
  gap: 4px;
}



.block_calendar_upcoming .block-control-actions a:hover,
.block_calendar_upcoming .block-control-actions span[role="button"]:hover {
  border-color: #3a7888;
  color: #3a7888;
}

/* ── Action dropdown menu ── */
.block_calendar_upcoming .moodle-actionmenu .menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 200px;
}

.block_calendar_upcoming .moodle-actionmenu .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_calendar_upcoming .moodle-actionmenu .menu li a:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_calendar_upcoming .moodle-actionmenu .menu li a.editing_delete {
  color: #c25a5a;
}

.block_calendar_upcoming .moodle-actionmenu .menu li a.editing_delete:hover {
  background: rgba(194, 90, 90, 0.06);
  color: #9e3c3c;
}

/* ============================================================
   CONSTRUCTION PRODUCT HUB — Current Learning Block
   Target: block_current_learning
   ============================================================ */

/* ── Block shell ── */
.block_current_learning.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;

}

/* ── Block header ── */
.block_current_learning .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  border-left: 3px solid var(--nav-tab-text-color);
  padding: 12px 16px 11px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* ── Block title ── */
.block_current_learning .block-title h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  padding-left:10px;
}

/* ── Content area ── */
.block_current_learning .block-content {
  padding: 0;
}

/* ── Tab content wrapper ── */
.block_current_learning .tab-content.current-learning-content {
  padding: 0;
}

.block_current_learning .panel-body.panel-body-content {
  padding: 14px 16px;
}

/* ══════════════════════════════════════════
   EMPTY STATE
   Shown when user has no current learning
══════════════════════════════════════════ */
.block_current_learning .current_learning-no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  margin: 0;
  color: #8fa4aa;
  line-height: 1.6;
  gap: 4px;
}

/* Add an icon above the empty state message */
.block_current_learning .current_learning-no-content::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background: rgba(58, 120, 136, 0.09);
  border-radius: 50%;
  margin-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233a7888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Link inside empty state */
.block_current_learning .current_learning-no-content a {
  color: #3a7888;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}

.block_current_learning .current_learning-no-content a:hover {
  color: #2a5b68;
  text-decoration: underline;
}

/* ══════════════════════════════════════════
   POPULATED STATE
   Styles for when learning items are present
   These classes are generated by Totara when
   the user has active learning assigned
══════════════════════════════════════════ */

/* ── Tab navigation (All / Courses / Programs etc) ── */
.block_current_learning .nav-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid #dde6e4;
  background: #f3f6f5;
  gap: 0;
}

.block_current_learning .nav-tabs li {
  margin: 0;
}

.block_current_learning .nav-tabs li a,
.block_current_learning .nav-tabs li button {
  display: block;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 500;
  color: #5a6e77;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

.block_current_learning .nav-tabs li a:hover,
.block_current_learning .nav-tabs li button:hover {
  color: #3a7888;
  border-bottom-color: #b8cbc7;
}

.block_current_learning .nav-tabs li.active a,
.block_current_learning .nav-tabs li.active button,
.block_current_learning .nav-tabs li a.active,
.block_current_learning .nav-tabs li button.active {
  color: #3a7888;
  border-bottom-color: #3a7888;
  font-weight: 600;
  background: transparent;
}

/* ── Learning item rows ── */
.block_current_learning .current-learning-item,
.block_current_learning .current_learning_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #dde6e4;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.block_current_learning .current-learning-item:first-child,
.block_current_learning .current_learning_item:first-child {
  padding-top: 0;
}

.block_current_learning .current-learning-item:last-child,
.block_current_learning .current_learning_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.block_current_learning .current-learning-item:hover,
.block_current_learning .current_learning_item:hover {
  opacity: 0.8;
}

/* ── Item icon/image ── */
.block_current_learning .current-learning-item .item-image,
.block_current_learning .current-learning-item .course-icon,
.block_current_learning .current_learning_item .item-image,
.block_current_learning .current_learning_item .course-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(58, 120, 136, 0.1);
}

/* ── Item title ── */
.block_current_learning .current-learning-item .item-name a,
.block_current_learning .current_learning_item .item-name a,
.block_current_learning .current-learning-item h4 a,
.block_current_learning .current-learning-item h3 a {
  font-size: 12.5px;
  font-weight: 600;
  color: #252f36;
  text-decoration: none;
  line-height: 1.35;
  display: block;
  transition: color 0.18s ease;
}

.block_current_learning .current-learning-item .item-name a:hover,
.block_current_learning .current_learning_item .item-name a:hover,
.block_current_learning .current-learning-item h4 a:hover,
.block_current_learning .current-learning-item h3 a:hover {
  color: #3a7888;
}

/* ── Item type label (Course / Program / Certification) ── */
.block_current_learning .current-learning-item .item-type,
.block_current_learning .current_learning_item .item-type,
.block_current_learning .current-learning-item .label,
.block_current_learning .current-learning-item small {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(58, 120, 136, 0.1);
  color: #2a5b68;
  margin-top: 3px;
}

/* ── Progress bar ── */
.block_current_learning .progress,
.block_current_learning .current-learning-item .progress {
  background: #dde6e4;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  box-shadow: none;
}

.block_current_learning .progress-bar,
.block_current_learning .current-learning-item .progress-bar {
  height: 100%;
  border-radius: 3px;
  background: #3a7888;
  transition: width 0.4s ease;
  box-shadow: none;
}

/* ── Due date text ── */
.block_current_learning .current-learning-item .duedate,
.block_current_learning .current_learning_item .duedate,
.block_current_learning .current-learning-item .date {
  font-size: 10.5px;
  color: #8fa4aa;
  margin-top: 3px;
}

/* Overdue state */
.block_current_learning .current-learning-item .duedate.overdue,
.block_current_learning .current-learning-item .overdue {
  color: #c25a5a;
  font-weight: 500;
}

/* Due soon state */
.block_current_learning .current-learning-item .duedate.duesoon,
.block_current_learning .current-learning-item .duesoon {
  color: #d4903a;
  font-weight: 500;
}

/* ── "View all" / footer link ── */
.block_current_learning .block-content .footer,
.block_current_learning .current-learning-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dde6e4;
  text-align: right;
}

.block_current_learning .block-content .footer a,
.block_current_learning .current-learning-footer a {
  font-size: 11.5px;
  font-weight: 500;
  color: #3a7888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.18s ease;
}

.block_current_learning .block-content .footer a::after,
.block_current_learning .current-learning-footer a::after {
  content: '›';
  font-size: 14px;
  line-height: 1;
}

.block_current_learning .block-content .footer a:hover,
.block_current_learning .current-learning-footer a:hover {
  color: #2a5b68;
}

/* ── Block controls (edit mode) ── */
.block_current_learning .block-control-actions .menubar {
  align-items: center;
  gap: 4px;
}


.block_current_learning .block-control-actions a:hover,
.block_current_learning .block-control-actions span[role="button"]:hover {
  border-color: #3a7888;
  color: #3a7888;
}

/* ── Action dropdown menu ── */
.block_current_learning .moodle-actionmenu .menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 200px;
}

.block_current_learning .moodle-actionmenu .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_current_learning .moodle-actionmenu .menu li a:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_current_learning .moodle-actionmenu .menu li a.editing_delete {
  color: #c25a5a;
}

.block_current_learning .moodle-actionmenu .menu li a.editing_delete:hover {
  background: rgba(194, 90, 90, 0.06);
  color: #9e3c3c;
}

/* ============================================================
   CONSTRUCTION PRODUCT HUB — Certifications (Current Compliance) Block
   Target: block_compliance_current_report / #inst38
   Add to: Totara Theme > Advanced Settings > Custom CSS
   ============================================================ */

/* ── Block shell ── */
.block_compliance_current_report.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;
}

/* ── Block header ── */
.block_compliance_current_report .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  border-left: 3px solid var(--nav-tab-text-color);
  padding: 12px 16px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* ── Block title ── */
.block_compliance_current_report .block-title h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  padding-left:10px;
}

/* ── Content area ── */
.block_compliance_current_report .block-content {
  padding: 0;
}

/* ── TUI root wrapper ── */
.block_compliance_current_report .tui-root {
  padding: 14px 16px;
}

/* ── Title row (contains "Organisations" header + actions dropdown) ── */
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReport__titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dde6e4;
}

/* ── Header section ("Organisations" title) ── */
.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportHeader {
  flex: 1;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportHeader__title {
  font-weight: 600;
  color: #5a6e77;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
    font-size: var(--font-h4-size)!important;
}

/* ── Actions dropdown button (three dots menu) ── */
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReport__dropdown .tui-btn {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 4px;
  color: #8fa4aa;
  padding: 4px 8px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReport__dropdown .tui-btn:hover {
  border-color: #3a7888;
  color: #3a7888;
}

/* ── Dropdown menu ── */
.block_compliance_current_report .tui-dropdown__menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 180px;
}

.block_compliance_current_report .tui-dropdownItem {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_compliance_current_report .tui-dropdownItem:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReport__dropdownItemContent {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* ══════════════════════════════════════════
   STAT CARDS (Overall compliant / non-compliant)
══════════════════════════════════════════ */
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReport__statCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard:hover {
  border-color: #b8cbc7;
  box-shadow: 0 2px 8px rgba(58, 120, 136, 0.08);
}

/* ── Stat card label ── */
.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard__label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8fa4aa;
  font-weight: 600;
  margin-bottom: 6px;

}

/* ── Stat card value ── */
.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard__body-value {
  font-weight: 700;
  color: #38454f;
  line-height: 1;
}

/* If the value is "--" (empty state), show it lighter */
.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard__body-value:has-text("--"),
.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard__body-value {
  color: #c5d5d2;
}

/* When populated with real numbers, use darker text */
.block_compliance_current_report .tui-block_compliance_ComplianceCurrentReportStatCard__body-value:not(:empty):not([aria-hidden="true"]) {
  color: #38454f;
}

/* ══════════════════════════════════════════
   PAGINATION CONTROLS (prev/next buttons)
══════════════════════════════════════════ */
.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 0;
}

/* Hide paging when there's no data (--hidden modifier) */
.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging--hidden {
  display: none;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging__infoText {
  color: #8fa4aa;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging__buttons {
  display: flex;
  gap: 6px;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging__buttons .tui-btn {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 4px;
  padding: 4px 8px;
  color: #8fa4aa;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging__buttons .tui-btn:not(:disabled):hover {
  border-color: #3a7888;
  color: #3a7888;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportPaging__buttons .tui-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════
   CHART AREA (compliance visualization)
══════════════════════════════════════════ */
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  padding: 16px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Empty state (no data available) ── */
.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
}

.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportEmptyState p {
  color: #8fa4aa;
  line-height: 1.6;
  margin: 0;
}

/* Add an icon above the empty state message */
.block_compliance_current_report .tui-block_compliance_current_report-ComplianceCurrentReportEmptyState::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  background: rgba(58, 120, 136, 0.09);
  border-radius: 50%;
  margin-bottom: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%233a7888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* ── Loader spinner (shown while data is loading) ── */
.block_compliance_current_report .tui-loader {
  min-height: 200px;
  align-items: center;
  justify-content: center;
}

/* ── Block controls (edit mode) ── */
.block_compliance_current_report .block-control-actions .menubar {
  display: flex;
  align-items: center;
  gap: 4px;
}


.block_compliance_current_report .block-control-actions a:hover,
.block_compliance_current_report .block-control-actions span[role="button"]:hover {
  border-color: #3a7888;
  color: #3a7888;
}

/* ── Action dropdown menu (block controls) ── */
.block_compliance_current_report .moodle-actionmenu .menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 200px;
}

.block_compliance_current_report .moodle-actionmenu .menu li a {
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_compliance_current_report .moodle-actionmenu .menu li a:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_compliance_current_report .moodle-actionmenu .menu li a.editing_delete {
  color: #c25a5a;
}

.block_compliance_current_report .moodle-actionmenu .menu li a.editing_delete:hover {
  background: rgba(194, 90, 90, 0.06);
  color: #9e3c3c;
}

/* ══════════════════════════════════════════
   POPULATED STATE STYLES
   (when certification data is present)
══════════════════════════════════════════ */

/* When the chart has actual data (not empty state), it may render
   various elements like bars, legends, tooltips. These would need
   to be styled if/when the data is populated. For now, we ensure
   the container has appropriate spacing and background. */

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart canvas,
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart svg {
  max-width: 100%;
  height: auto;
}

/* If Totara renders a table of certifications instead of/alongside chart */
.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart table {
  width: 100%;
  border-collapse: collapse;
}

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart table th {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8fa4aa;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #dde6e4;
}

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart table td {
  padding: 9px 10px;
  color: #252f36;
  border-bottom: 1px solid #f0f4f3;
}

.block_compliance_current_report .tui-block_compliance_current_report-complianceCurrentReportChart table tr:hover {
  background: rgba(58, 120, 136, 0.03);
}


/* ============================================================
   CONSTRUCTION PRODUCT HUB — Calendar Month Block
   Target: block_calendar_month / #inst96
   Add to: Totara Theme > Advanced Settings > Custom CSS
   ============================================================ */

/* ── Block shell ── */
.block_calendar_month.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;
}

/* ── Block header ── */
.block_calendar_month .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  border-left: 3px solid var(--nav-tab-text-color);
  padding: 12px 16px 11px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.block_calendar_month .block-title h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  padding-left: 10px;
  font-size: var(--font-h4-size) !important;
}

/* ── Content area ── */
.block_calendar_month .block-content {
  padding: 12px 14px 14px;
}

/* ══════════════════════════════════════════
   CALENDAR TABLE
══════════════════════════════════════════ */
.block_calendar_month .minicalendar.calendartable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

/* ── Caption (month name + navigation controls) ── */
.block_calendar_month .minicalendar caption {
  padding: 0 0 10px;
  text-align: center;
}

.block_calendar_month .calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
}

/* Current month link */
.block_calendar_month .calendar-controls .current {
  flex: 1;
  text-align: center;
}

.block_calendar_month .calendar-controls .current a {
  font-size: 13px;
  font-weight: 600;
  color: #38454f;
  text-decoration: none;
  transition: color 0.18s ease;
}

.block_calendar_month .calendar-controls .current a:hover {
  color: #3a7888;
}

/* Previous / Next arrows */
.block_calendar_month .calendar-controls .arrow_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  color: #8fa4aa;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
  font-size: 12px;
}

.block_calendar_month .calendar-controls .arrow_link:hover {
  border-color: #3a7888;
  color: #3a7888;
  background: rgba(58, 120, 136, 0.05);
}

.block_calendar_month .calendar-controls .arrow_link .arrow {
  line-height: 1;
  font-size: 14px;
}

/* Hide redundant screen-reader text */
.block_calendar_month .calendar-controls .hide,
.block_calendar_month .calendar-controls .accesshide,
.block_calendar_month .calendar-controls .clearer {
  display: none;
}

/* ── Weekday headers ── */
.block_calendar_month .minicalendar tr.weekdays {
  border-bottom: 1px solid #dde6e4;
}

.block_calendar_month .minicalendar tr.weekdays th {
  padding: 8px 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8fa4aa;
  text-align: center;
}

/* ── Day cells ── */
.block_calendar_month .minicalendar td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  height: 32px;
  width: 14.28%; /* 100% / 7 days */
  border: 1px solid transparent;
  position: relative;
}

/* Blank cells (outside current month) */
.block_calendar_month .minicalendar td.dayblank {
  background: transparent;
}

/* Regular day cells */
.block_calendar_month .minicalendar td.day {
  font-size: 12px;
  color: #252f36;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  background: #f3f6f5;
  border-color: #e8efed;
}

.block_calendar_month .minicalendar td.day:hover {
  background: rgba(58, 120, 136, 0.08);
  border-color: #b8cbc7;
}

/* Weekend cells */
.block_calendar_month .minicalendar td.weekend {
  background: #fafbfb;
}

.block_calendar_month .minicalendar td.weekend:hover {
  background: rgba(58, 120, 136, 0.05);
}

/* Today cell */
.block_calendar_month .minicalendar td.today {
  background: rgba(58, 120, 136, 0.12);
  border-color: #3a7888;
  font-weight: 600;
  color: #2a5b68;
}

.block_calendar_month .minicalendar td.today:hover {
  background: rgba(58, 120, 136, 0.18);
}

/* ── Days with events ── */
.block_calendar_month .minicalendar td.hasevent {
  font-weight: 600;
  position: relative;
}

/* Add a small dot indicator for days with events */
.block_calendar_month .minicalendar td.hasevent::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3a7888;
}

/* Event type colours via class names */
.block_calendar_month .minicalendar td.calendar_event_user::after {
  background: #3a7888; /* teal - user event */
}

.block_calendar_month .minicalendar td.calendar_event_course::after {
  background: #4a9e7a; /* green - course event */
}

.block_calendar_month .minicalendar td.calendar_event_group::after {
  background: #d4903a; /* amber - group event */
}

.block_calendar_month .minicalendar td.calendar_event_site::after {
  background: #b8cbc7; /* sage - site event */
}

/* If today has an event, make the dot white for contrast */
.block_calendar_month .minicalendar td.today.hasevent::after {
  background: #2a5b68;
}

/* ── Links inside day cells ── */
.block_calendar_month .minicalendar td.day a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px 2px;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.block_calendar_month .minicalendar td.day a:hover {
  color: #3a7888;
}

.block_calendar_month .minicalendar td.today a {
  color: #2a5b68;
}

/* Hide screen-reader only text */
.block_calendar_month .minicalendar .accesshide,
.block_calendar_month .minicalendar .sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   POPOVER (event details on hover)
══════════════════════════════════════════ */
.block_calendar_month .popover {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.14);
  max-width: 280px;
}

.block_calendar_month .popover-title {
  font-size: 11px;
  font-weight: 600;
  color: #5a6e77;
  padding: 8px 12px;
  border-bottom: 1px solid #dde6e4;
  background: #f3f6f5;
  border-radius: 6px 6px 0 0;
  margin: 0;
}

.block_calendar_month .popover-content {
  padding: 10px 12px;
  font-size: 12px;
  color: #252f36;
  line-height: 1.5;
}

.block_calendar_month .popover-content a {
  color: #3a7888;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s ease;
}

.block_calendar_month .popover-content a:hover {
  color: #2a5b68;
  text-decoration: underline;
}

/* Event icon in popover */
.block_calendar_month .popover-content .flex-icon {
  margin-right: 6px;
  color: #3a7888;
  vertical-align: middle;
}

/* "No events" text */
.block_calendar_month .popover-content:has-text("No events") {
  color: #8fa4aa;
  font-style: italic;
}

.block_calendar_month .popover__content {
  font-size: 12px;
  line-height: 1.5;
}

.block_calendar_month .popover__content div {
  padding: 2px 0;
}


/* ── Action dropdown menu ── */
.block_calendar_month .moodle-actionmenu .menu {
  background: #ffffff;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(56, 69, 79, 0.12);
  padding: 4px 0;
  min-width: 200px;
}

.block_calendar_month .moodle-actionmenu .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: #38454f;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block_calendar_month .moodle-actionmenu .menu li a:hover {
  background: #f3f6f5;
  color: #3a7888;
}

.block_calendar_month .moodle-actionmenu .menu li a.editing_delete {
  color: #c25a5a;
}

.block_calendar_month .moodle-actionmenu .menu li a.editing_delete:hover {
  background: rgba(194, 90, 90, 0.06);
  color: #9e3c3c;
}



/* ============================================================
   CONSTRUCTION PRODUCT HUB — Team Competency Proficiency Block
   Target: block_totara_competency_proficiency_gap
   ============================================================ */

/* ── Block shell ── */
.block_totara_competency_proficiency_gap.block {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(56, 69, 79, 0.08);
  overflow: hidden;
}

/* ── Header ── */
.block_totara_competency_proficiency_gap .block-header {
  background: #ffffff;
  border-bottom: 1px solid #dde6e4;
  border-left: 3px solid var(--nav-tab-text-color);
  padding: 12px 16px 11px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* ── Title ── */
.block_totara_competency_proficiency_gap .block-title h2 {
  font-weight: 600;
  color: #252f36;
  margin: 0;
  padding: 0;
  border: none;
  padding-left: 10px;
  font-size: var(--font-h4-size) !important;
}

/* ── Content ── */
.block_totara_competency_proficiency_gap .block-content {
  padding: 0;
}

/* Inner padding like compliance block */
.block_totara_competency_proficiency_gap .tui-root {
  padding: 14px 16px;
}

/* ============================================================
   STAT CARDS (Proficient / Not proficient)
   ============================================================ */

.block_totara_competency_proficiency_gap .tui-statCard {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.block_totara_competency_proficiency_gap .tui-statCard:hover {
  border-color: #b8cbc7;
  box-shadow: 0 2px 8px rgba(58, 120, 136, 0.08);
}

/* Label */
.block_totara_competency_proficiency_gap .tui-statCard__label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8fa4aa;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Value */
.block_totara_competency_proficiency_gap .tui-statCard__body-value {
  font-weight: 700;
  color: #38454f;
}

/* ============================================================
   FILTER BAR (Search + Filters)
   ============================================================ */

.block_totara_competency_proficiency_gap .tui-filterBarArea__bar {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}

/* Search input */
.block_totara_competency_proficiency_gap .tui-formInput {
  border: 1px solid #dde6e4;
  border-radius: 5px;
}

.block_totara_competency_proficiency_gap .tui-formInput:focus {
  border-color: #3a7888;
  outline: none;
}

/* Filter button */
.block_totara_competency_proficiency_gap .tui-btn {
  background: #f3f6f5;
  border: 1px solid #dde6e4;
  border-radius: 4px;
  color: #5a6e77;
  transition: all 0.18s ease;
}

.block_totara_competency_proficiency_gap .tui-btn:hover {
  border-color: #3a7888;
  color: #3a7888;
}

/* ============================================================
   SORT BAR
   ============================================================ */

.block_totara_competency_proficiency_gap .tui-sortBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  border-bottom: 1px solid #dde6e4;
  margin-bottom: 10px;
}

/* Count text */
.block_totara_competency_proficiency_gap .tui-sortBar__start {
  color: #8fa4aa;
  font-size: 12px;
}

/* Dropdown */
.block_totara_competency_proficiency_gap .tui-select__input {
  border: 1px solid #dde6e4;
  border-radius: 4px;
}

/* ============================================================
   EMPTY STATE / TABLE
   ============================================================ */

.block_totara_competency_proficiency_gap .tui-block_totara_competency_proficiency_gap-competencyGapTable {
  text-align: left;
  padding: 24px 16px;
  color: #8fa4aa;
  line-height: 1.6;
}

/* Add icon like your other empty states */
.block_totara_competency_proficiency_gap 
.tui-block_totara_competency_proficiency_gap-competencyGapTable::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  background: rgba(58, 120, 136, 0.09);
  border-radius: 50%;
  margin: 0 auto 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%233a7888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M12 4h9'/%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}




/* ============================================================
  Partner Dashboard
   ============================================================ */
#page-content{
    max-width: 1400px;
    margin: auto;
}

html, body {
  font-family: 'Poppins', sans-serif;
}

  :root {
    --ink: #0a0a0a;
    --paper: #f5f3ee;
    --paper-2: #ebe7df;
    --paper-3: #ffffff;
    --accent: #294C52;
    --accent-2: #b5cac6;
    --accent-3: #1a1aff;
    --line: rgba(10,10,10,0.12);
    --line-strong: rgba(10,10,10,0.85);
    --muted: rgba(10,10,10,0.6);
    --shadow-card: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px -12px rgba(10,10,10,0.12);
  }

  /* === Hero === */
  .hero {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    border-radius: 24px;
    padding: 56px 56px 48px;
    overflow: hidden;
    margin-bottom: 24px;
  }
  .hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }
  .hero-glow {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(41 76 82 / 45%) 0%, transparent 60%);
    top: -200px; right: -150px;
    filter: blur(40px);
    pointer-events: none;
  }
  .hero-glow-2 {
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(181 202 198 / 25%) 0%, transparent 60%);
    bottom: -150px; left: 30%;
    filter: blur(40px);
    pointer-events: none;
  }
 
  .hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
  }
 
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
  }
  .hero-badge .dot {
    width: 6px; height: 6px;
    background: var(--accent-2);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-2);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
 
  .hero h1 {
    font-family: 'Merriweather', serif;
    font-size: 72px!important;
    line-height: 0.95!important;
    font-weight: 400!important;
    letter-spacing: -0.02em!important;
    margin-bottom: 20px!important;
  }
  .hero h1 em {
    color: var(--accent);
    font-style: italic;
  }
  .hero h1 .underline {
    background: linear-gradient(transparent 60%, rgb(181 202 198 / 40%) 60%);
    padding: 0 4px;
  }
 
  .hero-sub {
    font-size: 17px;
    line-height: 1.5;
    color: rgba(245,243,238,0.75);
    margin-bottom: 32px;
    max-width: 480px;
  }
 
  .hero-cta-row { display: flex; gap: 12px; align-items: center; }
  .btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 14px 24px!important;
    border-radius: 100px!important;
    font-size: 14px!important;
    font-weight: 600!important;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 0.15s;
  }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-ghost {
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 14px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.06); }
 
  /* Hero video card */
  .video-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: transform 0.3s;
  }
  .video-card:hover { transform: scale(1.01); }
  .video-thumb {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%),
      url("data:image/svg+xml;utf8,");
    background-size: cover;
    display: flex;
    align-items: flex-end;
    padding: 24px;
  }
  .video-thumb-content {
    color: white;
    z-index: 1;
  }
  .video-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.85;
    margin-bottom: 6px;
  }
  .video-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    background: white;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    transition: transform 0.2s;
  }
  .video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
  .play-btn svg { width: 24px; height: 24px; margin-left: 4px; color: var(--ink); }
 
  /* === Stats Strip === */
  .stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
  }
  .stat {
    padding: 24px 28px;
    border-right: 1px solid var(--line);
    position: relative;
  }
  .stat:last-child { border-right: none; }
  .stat-num {
    font-family: 'Merriweather', serif;
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .stat-num .unit {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    color: var(--muted);
    font-weight: 500;
  }
  .stat-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
  .stat-trend {
    position: absolute;
    top: 24px; right: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #1a8a3a;
    background: rgba(26,138,58,0.1);
    padding: 2px 8px;
    border-radius: 6px;
  }
 
  /* === Section Layout === */
  .section-header {
    display: flex;
    justify-content: space-between!important;
    align-items: baseline!important;
    margin-bottom: 20px!important;
    margin-top: 40px!important;
  }
  .section-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.15em!important;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .section-title {
    font-family: 'Merriweather', serif;
    font-size: 40px!important;
    font-weight: 400!important;
    letter-spacing: -0.02em!important;
    line-height: 1.05!important;
  }
  .section-title em {
    font-style: italic;
    color: var(--accent);
  }
  .section-link {
    font-size: 13px!important;
    color: var(--ink)!important;
    text-decoration: none!important;
    border-bottom: 1px solid var(--ink)!important;
    padding-bottom: 1px;
  }
 
  /* === How It Works (3-step) === */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .step-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .step-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }
  .step-num {
    font-family: 'Merriweather', serif;
    font-size: 56px;
    font-style: italic;
    color: var(--paper-2);
    line-height: 1;
    margin-bottom: 16px;
  }
  .step-card h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .step-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
  }
  .step-card .step-icon {
    position: absolute;
    top: 24px; right: 24px;
    width: 36px; height: 36px;
    background: var(--paper);
    border-radius: 10px;
    display: grid; place-items: center;
  }
  .step-card .step-icon svg { width: 18px; height: 18px; }
 
  /* === Feature Bento Grid === */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 16px;
  }
  .bento-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
  }
  .bento-card:hover { transform: translateY(-2px); }
 
  .bento-tag {
    font-size: 10px!important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .bento-card h3 {
    font-size: 22px!important;
    font-weight: 600!important;
    letter-spacing: -0.015em!important;
    margin-bottom: 8px!important;
    line-height: 1.15!important;
  }
  .bento-card p {
    font-size: 13.5px!important;
    color: var(--muted);
    line-height: 1.55;
  }
 
  .b-large { grid-column: span 4; grid-row: span 2; background: var(--ink); color: var(--paper); }
  .b-large .bento-tag { color: var(--accent-2); }
  .b-large h3 { font-family: 'Merriweather', serif; font-size: 44px!important; font-weight: 400!important; line-height: 1!important; margin-bottom: 16px!important; }
  .b-large p { color: rgba(245,243,238,0.7); font-size: 15px!important; max-width: 380px!important; }
 
  .b-med { grid-column: span 2; }
  .b-med-tall { grid-column: span 2; grid-row: span 2; }
  .b-wide { grid-column: span 3; }
  .b-accent { background: var(--accent); color: white; }
  .b-accent .bento-tag { color: rgba(255,255,255,0.7); }
  .b-accent h3 { color: white; }
  .b-accent p { color: rgba(255,255,255,0.85); }
 
  .b-yellow { background: var(--accent-2); color: var(--ink); }
  .b-yellow .bento-tag { color: rgba(10,10,10,0.6); }
 
  /* Visual element inside large bento */
  .b-large-visual {
    position: absolute;
    bottom: -40px; right: -40px;
    width: 280px; height: 280px;
    opacity: 0.8;
  }
  .orbit {
    width: 100%; height: 100%;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    position: absolute;
    inset: 0;
    animation: rotate 30s linear infinite;
  }
  .orbit::before {
    content: '';
    width: 12px; height: 12px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px var(--accent);
  }
  .orbit-2 { transform: scale(0.7); animation-duration: 20s; animation-direction: reverse; }
  .orbit-2::before { background: var(--accent-2); box-shadow: 0 0 20px var(--accent-2); }
  .orbit-3 { transform: scale(0.45); animation-duration: 12s; }
  .orbit-3::before { background: white; box-shadow: 0 0 20px white; }
  @keyframes rotate { to { transform: rotate(360deg); } }
  .orbit-2 { animation: rotate-r 20s linear infinite; }
  @keyframes rotate-r { to { transform: scale(0.7) rotate(-360deg); } }
 
  /* No-list inside bento */
  .no-list { list-style: none; margin-top: 12px; }
  .no-list li {
    font-size: 13px!important;
    padding: 8px 0!important;
    border-top: 1px solid var(--line)!important;
    display: flex; align-items: center; gap: 8px!important;
    color: var(--ink);
  }
  .b-large .no-list li {
    border-color: rgba(255,255,255,0.1);
    color: rgba(245,243,238,0.85);
  }
  .no-list li::before {
    content: '✕';
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
  }
 
  /* Mini chart visual */
  .mini-bars {
    display: flex; align-items: flex-end; gap: 4px;
    height: 60px; margin-top: 16px;
  }
  .mini-bars .bar {
    flex: 1;
    background: var(--ink);
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
  }
  .b-yellow .mini-bars .bar { background: var(--ink); }
 
  /* === Why Choose === */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
  }
  .why-item {
    padding: 28px 32px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .why-item:nth-child(2n) { border-right: none; }
  .why-item:nth-last-child(-n+2) { border-bottom: none; }
 
  .why-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    padding-top: 4px;
  }
  .why-item h4 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .why-item p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
  }
 
  /* === CTA === */
  .cta {
    background: var(--ink);
    color: var(--paper);
    border-radius: 24px;
    padding: 64px 56px;
    margin-top: 48px;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 0%, rgb(181 202 198 / 15%) 0% 0%, transparent 50%);
    pointer-events: none;
  }
  .cta-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.2em!important;
    color: var(--accent-2)!important;
    margin-bottom: 16px!important;
    position: relative;
  }
  .cta h2 {
    font-family: 'Merriweather', serif;
    font-size: 64px!important;
    font-weight: 400!important;
    letter-spacing: -0.02em!important;
    line-height: 1!important;
    margin-bottom: 20px!important;
    position: relative;
  }
  .cta h2 em { color: var(--accent); font-style: italic; }
  .cta p {
    font-size: 16px!important;
    color: rgba(245,243,238,0.7)!important;
    max-width: 540px!important;
    margin: 0 auto 32px!important;
    position: relative;
  }
  .cta-row {
    display: flex; gap: 12px; justify-content: center!important;
    position: relative;
  }
 
  /* Footer */
  .footer {
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
  }
  .footer-links { display: flex; gap: 18px; }
  .footer-links a { color: var(--muted); text-decoration: none; }
  .footer-links a:hover { color: var(--ink); }
 
  /* Subtle entrance animations */
  .fade-up { animation: fadeUp 0.6s ease-out backwards; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .delay-1 { animation-delay: 0.05s; }
  .delay-2 { animation-delay: 0.1s; }
  .delay-3 { animation-delay: 0.15s; }
  .delay-4 { animation-delay: 0.2s; }
 
  /* Responsive */
  @media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero h1 { font-size: 56px!important; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stat { border-right: 1px solid var(--line); }
    .stat:nth-child(2n) { border-right: none; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .b-large, .b-med, .b-med-tall, .b-wide { grid-column: span 2; grid-row: auto; }
    .why-grid { grid-template-columns: 1fr; }
    .why-item { border-right: none; }
  }


  .breadcrumb-container {
    border-top-left-radius: 10px;
    background-color: #f5f3ee;
}

#page {
    background-color: #f5f3ee;
}

.block {
    background-color: #f5f3ee;
}