/* Quiz Results Custom Styles */
@import url('https://cdn.jsdelivr.net/npm/uikit@3.14.1/dist/css/uikit.min.css');
.quiz-result-btn {
    font-size: 1.1rem;
    padding: 0.7em 1.5em;
    max-width: 220px;
    width: 100%;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.quiz-feedback-btn {
    margin-bottom: 0;
    font-weight: 600;
}
.quiz-feedback-text {
    font-size: 1.05rem;
    color: #222;
    background: #f7f7fa;
    border-radius: 6px;
    padding: 0.4em 0.8em;
    margin-top: 4px;
    display: inline-block;
    word-break: break-word;
    max-width: 100%;
}
.quiz-pill{
    display: inline-block;
    padding: 0.45em 0.8em;
    border-radius: 999px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 86px;
    text-align: center;
}
.quiz-feedback-pill{ font-size: 0.9rem; padding: 0.35em 0.7em; }
.answer-text{ font-size: 1rem; color: #1c1c1c; padding-left: 8px; }
/* .cardet-quiz .question { margin-bottom: 20px; } .feedback { background: #eef; padding: 10px; margin: 10px 0; border-left: 4px solid #88c; } */



#quiz-competence{
    color: #33333A;
    font-weight: bold;
}
#quiz-framework{
    color:#000000;
    font-size: 59px;
}

.next-section, .prev-section{
    background-color:#4A916A !important;
    color:#FFFFFF !important;
    font-size:1rem !important;
}

.cardet-quiz input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #800080;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.cardet-quiz input[type="radio"]:checked {
    background-color: #7451c8;
  
}
.cardet-quiz input[type="radio"]:checked::after {

    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 4px auto;
    border-radius: 50%;
    /* background: #fff; */
}
.cardet-quiz input[type="radio"]:focus {
    box-shadow: 0 0 0 2px #d1a3e6;
}
.framework-btn-EntreComp {
    background-color:#4A916A !important;
    color:#FFFFFF !important;
    width: 200px;
}
.framework-btn-GreenComp{
    background-color:#BAE8AA;
    color:#FFFFFF !important;
    width: 200px;
}
.framework-btn-DigComp{
    background-color:#7451C8;
    color:#FFFFFF !important;
    width: 200px;
   
}
.cardet-quiz-results ul li.framework-li-DigComp::marker{
    color: #7451C8;
    font-size: 2rem;
}
.cardet-quiz-results ul li.framework-li-EntreComp::marker{
    color: #4A916A;
    font-size: 2rem;
}

.cardet-quiz-results ul li.framework-li-GreenComp::marker{
    color: #BAE8AA;
    font-size: 2rem;
}

/* Chart + legend layout for framework summary */
.framework-chart-wrap { width: 100%; height: 220px; max-width: 420px; margin: 0 auto; }
.framework-chart-wrap canvas { width: 100% !important; height: 100% !important; }
@media (min-width: 640px) { .framework-chart-wrap { height: 320px; } }

.framework-summary-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.framework-summary-legend li { align-items: center; display: flex; gap: 12px; font-weight: 600; color: #222; }

/* Small visual tweak so legend items align with existing pills */
.framework-summary-legend li::marker { display: none; }

/* Colored legend dot */
.framework-legend-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.framework-dot-DigComp { background-color: #7451C8; }
.framework-dot-EntreComp { background-color: #4A916A; }
.framework-dot-GreenComp { background-color: #BAE8AA; }

/* Force stacking for very narrow devices (e.g. 290px width) */
@media (max-width: 420px) {
    /* Make grid children full-width */
    .cardet-quiz-results [uk-grid] > *,
    .cardet-quiz-results .uk-grid > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Ensure width utility classes don't override */
    .cardet-quiz-results .uk-width-auto,
    .cardet-quiz-results .uk-width-expand {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make pills display block and more readable */
    .cardet-quiz-results .quiz-pill {
        display: inline-block;
        width: auto;
        min-width: 0;
        margin-bottom: 8px;
    }

    .cardet-quiz-results .answer-text,
    .cardet-quiz-results .quiz-feedback-text {
        display: block !important;
        padding-left: 0 !important;
    }
}

/* Collapsible attempt summary styling */
.cardet-quiz-attempt { margin-bottom: 18px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.cardet-quiz-attempt summary { list-style: none; cursor: pointer; padding: 8px 12px; display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%); }
.cardet-quiz-attempt summary::-webkit-details-marker { display: none; }
.cardet-quiz-attempt summary:focus { outline: none; box-shadow: 0 0 0 3px rgba(74,145,106,0.12); }
.cardet-quiz-attempt .cardet-quiz-results { padding: 12px 14px 18px; }

/* Attempt summary specific styles */
.attempt-summary { padding: 10px 14px; }
.attempt-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #7451C8; color: #fff; font-weight: 700; font-size: 0.95rem; }
.attempt-label { font-weight: 700; margin-left: 10px; color: #222; }
.attempt-action { margin-left: auto; color: #666; font-size: 0.95rem; }
.cardet-quiz-attempt[open] summary { background: linear-gradient(180deg, #f7f9f8 0%, #f2f6f3 100%); }
.cardet-quiz-attempt summary:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }



.quiz-competence {
  width: 50%;          /* fixed half of the table */
  white-space: normal; /* allow wrapping inside this cell */
  word-break: break-word; /* prevent overflow on long words */
  border-right: 1px solid #ccc;
  padding-right: 8px;
}

.quiz-score {
  width: 50%;          /* the other half */
  text-align: center;   
  padding-left: 8px;
}

.quiz-competence.standout {
  font-weight: bold;         /* makes text bold */
  background-color: #f5f5f5; /* subtle gray background */
  color: #333;               /* darker text color for contrast */
  padding: 6px 10px;         /* adds spacing */
  font-size:1rem;

}

/* Add horizontal padding for learning-path and results containers */
.cardet-learning-path-page,
.cardet-quiz-results {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

/* Slightly more breathing room on wider screens */
@media (min-width: 768px) {
    .cardet-learning-path-page,
    .cardet-quiz-results {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Ensure tables keep consistent left/right cell padding */
.cardet-table th,
.cardet-table td {
    padding-left: 12px;
    padding-right: 12px;
}

/* Keep existing small-device overflow behaviour but reduce extra padding there */
@media (max-width: 420px) {
    .cardet-learning-path-page,
    .cardet-quiz-results {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.cardet-learning-accordion .uk-accordion-title.cardet-week-title {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.cardet-learning-accordion .uk-accordion-title.cardet-week-title .learning-week-badge {
    flex: 0 0 auto;
}

/* ensure accordion content has light bg in contrast to header */
.cardet-learning-accordion .uk-accordion-content {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* small-screen tweak */
@media (max-width: 640px) {
    .cardet-learning-accordion .uk-accordion-title.cardet-week-title {
        padding: 10px;
    }
}

/* Responsive improvements for learning-path accordion and tables */

/* Make accordion header wrap nicely and stay full width */
.cardet-learning-accordion .uk-accordion-title.cardet-week-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
}

/* Ensure accordion content breathes */
.cardet-learning-accordion .uk-accordion-content {
    padding: 12px 8px 18px;
}

/* Keep horizontal scroll on very small screens but provide stacked view below */
@media (max-width: 720px) {
    /* hide table header and stack rows as cards */
    .cardet-table thead { display: none; }
    .cardet-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 8px;
        background: #fff;
    }
    .cardet-table td {
        display: flex;
        width: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
    }
    /* first column as label style */
    .cardet-table td:first-child {
        flex: 0 0 40%;
        max-width: 40%;
        font-weight: 700;
        color: #222;
        background: transparent;
        padding-right: 12px;
        align-items: flex-start;
    }
    /* second column as content */
    .cardet-table td:last-child {
        flex: 1 1 60%;
        max-width: 60%;
    }

    /* Reduce padding / badge size for small devices */
    .cardet-week-title .learning-week-badge {
        width: 10px;
        height: 10px;
    }
}

/* For very small narrow screens allow horizontal scroll as fallback */
@media (max-width: 420px) {
    .cardet-learning-accordion .uk-overflow-auto,
    .cardet-quiz-results .uk-overflow-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cardet-table td {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Ensure lists in action cell wrap and look tidy */
.cardet-learning-accordion .action-cell ul,
.cardet-learning-accordion .action-cell li {
    margin: 6px 0;
    padding-left: 18px;
    line-height: 1.45;
}

/* Small visual tweak to separate each accordion content area on mobile */
@media (max-width: 720px) {
    .cardet-learning-accordion .uk-accordion-content {
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        margin-bottom: 10px;
    }
}

/* Learning path container: restore sensible horizontal padding */
.cardet-learning-path-page {
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 72px; /* room for bottom-right actions */
    box-sizing: border-box;
    max-width: 100%;
}

/* a bit more breathing room on wider screens */
@media (min-width: 768px) {
    .cardet-learning-path-page {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Actions area (Download + Refresh) placed bottom-right inside the learning path card */
.cardet-learning-path-page .learning-actions {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}

/* Make buttons compact and prevent wrapping */
.cardet-learning-path-page .learning-actions .uk-button {
    white-space: nowrap;
    padding: 8px 12px;
}

/* On small screens actions flow below content and align to the right */
@media (max-width: 640px) {
    .cardet-learning-path-page {
        padding-bottom: 96px;
    }
    .cardet-learning-path-page .learning-actions {
        position: static;
        margin-top: 12px;
        justify-content: flex-end;
        width: 100%;
        box-sizing: border-box;
        padding-right: 12px;
    }
}

/* Slight spacing/tuck so actions don't overlap header on small/very large content */
@media (min-width: 1200px) {
    .cardet-learning-path-page .learning-actions {
        right: 24px;
        bottom: 24px;
    }
}

/* table cell padding adjustments to match reduced horizontal padding */
.cardet-table th,
.cardet-table td {
    padding-left: 10px;
    padding-right: 10px;
}

/* Excel-like feel: slightly bolder header, subtle row tint already applied inline */
.cardet-table thead th {
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 2px solid rgba(0,0,0,0.06);
}

/* Keep competence column visually distinct on small screens */
@media (max-width: 720px) {
    .cardet-table td:first-child {
        font-weight: 700;
        color: #222;
    }
}

/* Ensure accordion content contrast */
.cardet-learning-accordion .uk-accordion-content {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
}

/* Print helpers: when printing the learning-path keep colors and expand accordion */
@media print {
    /* show only export target when helper class present (already added) */
    body.cardet-print-learning-path * { visibility: hidden !important; }
    body.cardet-print-learning-path #learning-path,
    body.cardet-print-learning-path #learning-path * { visibility: visible !important; }

    /* allow color backgrounds to print (WebKit/Chromium) */
    body.cardet-print-learning-path,
    body.cardet-print-learning-path #learning-path,
    body.cardet-print-learning-path .cardet-learning-accordion,
    body.cardet-print-learning-path .cardet-week-title,
    body.cardet-print-learning-path .cardet-table th,
    body.cardet-print-learning-path .cardet-table td,
    body.cardet-print-learning-path .cardet-table tr {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure accordion content is visible in print */
    body.cardet-print-learning-path .uk-accordion-content {
        display: block !important;
        max-height: none !important;
        visibility: visible !important;
    }

    /* Make table header visually strong like Excel */
    body.cardet-print-learning-path .cardet-table thead th {
        font-weight: 700;
        -webkit-print-color-adjust: exact !important;
    }

    /* Page margins */
    @page { margin: 12mm; }
}

.next-section{background-color: #4A916A;
    
color:white;
font-size: 1.2rem;
}
.prev-section{
    font-size:1.2rem !important;
    background-color: #7451c8 !important;
}
.submit-btn{
    background-color: #4A916A;
    color:white;
    font-size:1.2rem;
}

/* Learning Path acordeon */


.uk-accordion-title::before {
  background-image: url("images/accordion-plus.svg") !important;
  background-size: 26px;
}



.uk-open > .uk-accordion-title::before {
  background-image: url("images/accordion-minus.svg") !important;
  background-size: 26px;
}