/* CidiLabs DesignPlus CSS for Local Development
 * This file recreates the styling and functionality of CidiLabs DesignPlus components
 * for local testing outside of Canvas LMS environment
 */

/* ========================================
 * CIDILABS CORE CLASSES
 * These are foundational Canvas classes that work across all CidiLabs components
 * ======================================== */

/* dp-has-icon - Core icon positioning system (flexbox approach) */
.dp-has-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* FontAwesome icon styling for all activities */
.dp-has-icon .fas,
.dp-has-icon .fa,
.dp-has-icon i {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
}

/* H4 general styling */
h4 {
    display: inline-block;
    margin: 0;
    line-height: 1.0;
    text-align: left;
    font-size: 1.5rem;
}

/* Fix for h4 elements with dp-has-icon class - use flex instead of inline-block */
h4.dp-has-icon {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
}

/* Disable any ::before pseudo-elements for h4 with dp-has-icon - use real FontAwesome icons instead */
h4.dp-has-icon::before {
    display: none !important;
    content: none !important;
}

/* Override for flipcards - they have custom positioning */
.dp-flip-card .dp-has-icon .fas,
.dp-flip-card .dp-has-icon .fa,
.dp-flip-card .dp-has-icon i,
.dp-flip-card .dp-has-icon .dp-icon.fas.fa-question-circle {
    position: absolute !important;
    left: 50% !important;
    top: -30px !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    background-color: white !important;
    color: #1d2757 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #1d2757 !important;
    z-index: 10 !important;
    line-height: normal !important;
    margin-bottom: 0 !important;
}

/* Ensure the :before pseudo-element for question mark is styled correctly on flipcards */
.dp-flip-card .dp-has-icon .dp-icon.fas.fa-question-circle:before {
    content: "?" !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 36px !important;
    background-color: transparent !important;
    color: #1d2757 !important;
    border-radius: 0 !important;
    font-size: 35px !important;
    font-weight: bold !important;
    margin: 0 !important;
}

.dp-has-icon .fa-sort-numeric-down::before {
    content: "⇅";
    font-family: inherit;
    font-style: normal;
    color: inherit;
}

/* dp-icon-content - Core content hiding */
.dp-icon-content {
    display: none !important;
}

/* Core icon accessibility and responsive */
.dp-has-icon:focus::before,
.dp-has-icon:hover::before {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .dp-has-icon {
        padding-left: 25px;
    }

    .dp-has-icon::before,
    .dp-has-icon .fas,
    .dp-has-icon .fa {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 14px;
    }
}

/* ========================================
 * Normal Whole page styles
 * These are Canvas level style settings that are being mimicked for local testing
 * ======================================== */

body {
    font-family: "Lato", "Segoe UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: #333;
}

@media (max-width: 768px) {
    .dp-popover-content {
        width: 95%;
        max-width: 95%;
        padding: 15px;
    }
}

/* ========================================
 * CIDILABS DESIGNPLUS COMPONENT STYLES
 * Component-specific styling and interactive functionality
 * ======================================== */

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}



/* ===========================================
   BUTTON TABS VERTICAL STYLES
   =========================================== */

/* Button Tabs Vertical Styles */
.dp-panels-wrapper.dp-tabs-buttons-vertical {
    display: flex;
    border: none;
    border-radius: 8px;
    overflow: visible;
}

/* Tab Navigation Sidebar */
.dp-tabs-buttons-vertical .dp-tab-nav {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background-color: #fff;
    padding: 8px;
    gap: 4px;
}

.dp-tabs-buttons-vertical .dp-panel-heading {
    margin: 0;
    padding: 15px 20px;
    background-color: #1d2757;
    color: white;
    border: none;
    border-bottom: 1px solid #14193e;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 20px;
    font-weight: normal;
    text-align: left;
    position: relative;
    display: block;
    width: 100%;
}

.dp-tabs-buttons-vertical .dp-panel-heading:hover {
    background-color: #14193e;
}

.dp-tabs-buttons-vertical .dp-panel-heading.active {
    background-color: #14193e;
    color: white;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #ccc;
}

/* Icon positioning for button tabs */
.dp-tabs-buttons-vertical .dp-has-icon::before {
    color: white;
}

/* Content Area */
.dp-tabs-buttons-vertical .dp-content-area {
    flex: 1;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-left: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 0;
    min-height: fit-content;
}

.dp-tabs-buttons-vertical .dp-panel-content {
    padding: 16px 20px;
    background-color: white;
    display: none;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.5;
    color: #333;
}

.dp-tabs-buttons-vertical .dp-panel-content.active {
    display: block;
}

/* Hide original panel groups - we'll restructure in JS */
.dp-tabs-buttons-vertical .dp-panel-group {
    display: none;
}

/* Color Variations */
.dp-panel-color-dp-primary .dp-panel-heading {
    background-color: #1d2757;
}

.dp-panel-color-dp-primary .dp-panel-heading.active,
.dp-panel-color-dp-primary .dp-panel-heading:hover {
    background-color: #14193e;
}

/* Secondary Color (Lone Star Red) for Active Tab */
.dp-panel-active-color-dp-secondary .dp-panel-heading.active {
    background-color: #d13138;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #ccc;
}

.dp-panel-active-color-dp-secondary .dp-panel-heading.active:hover {
    background-color: #b12b32;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dp-tabs-buttons-vertical {
        flex-direction: column;
    }

    .dp-tabs-buttons-vertical .dp-panel-group {
        flex-direction: column;
    }

    .dp-tabs-buttons-vertical .dp-panel-heading {
        min-width: auto;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}

/* ===========================================
   FLIPCARDS STYLES
   =========================================== */

/* Container styling */
.dp-column-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Flip Card Container */
.dp-flip-card {
    background-color: transparent;
    perspective: 1000px;
    height: 250px;
    cursor: pointer;
    position: relative;
}

/* Hide core icon system for flip cards - they use FontAwesome icons */
.dp-flip-card .dp-has-icon::before {
    display: none !important;
}

/* Add flip icon to card container */
.dp-flip-card::after {
    content: "↻";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    line-height: 28px;
    background-color: white;
    color: #1d2757;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #1d2757;
    z-index: 100;
}

.dp-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.dp-flip-card.flipped .dp-flip-card-inner {
    transform: rotateY(180deg);
}

.dp-front-card,
.dp-back-card {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.dp-back-card {
    transform: rotateY(180deg);
}

/* Card Styling */
.dp-card {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.cp-bg-dp-primary {
    background-color: #1d2757;
    color: white;
}

.dp-back-card .dp-card {
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
}

.card-body {
    padding: 15px 20px 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.2;
}

.card-text {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

.dp-back-card .card-text {
    opacity: 1;
    color: #333;
}

/* Responsive spacing for flipcards */
@media (max-width: 767px) {
    .dp-column-container .col-sm-12 {
        margin-bottom: 40px;
    }

    .dp-column-container .col-sm-12:last-child {
        margin-bottom: 0;
    }
}

/* Icon Styling */
.dp-icon.fas.fa-question-circle {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
    color: white;
}

.dp-has-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
}

/* Flip icon styling - removed duplicate ::after rules */

/* Font Awesome Icon Replacement */
.dp-icon.fas.fa-question-circle:before {
    content: "?";
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    background-color: #ffffff;
    color: #1d2757;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 3px;
}

/* ===========================================
   MODALS STYLES
   =========================================== */

/* Modal Trigger Button */
.dp-popover-trigger {
    background-color: transparent;
    color: #337ab7;
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    display: inline;
    font-size: inherit;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.dp-popover-trigger:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
    color: #23527c;
    text-decoration: none;
}

/* Modal Content - Hidden by default */
.dp-popover-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f7f7f7;
    border: 1px solid #A9A9A9;
    border-radius: 8px !important;
    padding: 20px;
    width: 600px;
    max-width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* Modal Content when visible */
.dp-popover-content.show {
    display: block;
}

/* Modal Overlay Background */
.dp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.dp-modal-overlay.show {
    display: block;
}

/* Close Button */
.dp-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-modal-close:hover {
    color: #333;
}

/* Typography inside modals */
.dp-popover-content h6 {
    color: #1d2757;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 15px;
}

.dp-popover-content h6:first-child {
    margin-top: 0;
}

.dp-popover-content p {
    color: #333;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* ===========================================
   ORDER ITEMS STYLES
   =========================================== */

/* Order Items Styles */
/* Core Order Items wrapper and structure */
.dp-order-wrapper {
    position: relative;
    display: block;
    border-radius: 10px 10px 0 0 !important;
}

.dp-order-wrapper h4 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}

.dp-order-wrapper p {
    margin: 0 0 15px 0;
    font-size: 16px;
}

/* Core dp-order list styling */
.dp-order {
    list-style: none;
    padding: 15px;
    margin: 15px auto;
    background: white;
    border-radius: 8px;
}

.dp-order.dp-order-text {
    max-width: 400px;
}

/* Component-specific icon positioning */
.dp-order-wrapper .dp-has-icon {
    color: white;
}

.dp-order-wrapper .dp-has-icon::before,
.dp-order-wrapper .dp-has-icon .fas,
.dp-order-wrapper .dp-has-icon i {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.dp-order.dp-order-text {
    list-style: none !important;
    padding: 15px !important;
    margin: 15px auto !important;
}

.dp-order.dp-order-text li {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 8px 0;
    cursor: move;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.dp-order.dp-order-text li.correct {
    border-color: #28a745;
}

.dp-order.dp-order-text li.correct::after {
    content: "✓";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
    background: white;
    border: 2px solid #28a745;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dp-order.dp-order-text li:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dp-order.dp-order-text li.dragging {
    opacity: 0.6;
    transform: scale(0.95);
}

.dp-order-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-radius: 0 0 10px 10px;
    border: 1px solid #dee2e6;
    border-top: none;
    width: 100%;
    max-width: none;
    transition: background-color 0.3s ease;
    position: relative;
}

/* Success state for control panel */
.dp-order-controls.success {
    background-color: #d4f4dd;
    border-color: #28a745;
    justify-content: space-between;
    gap: 20px;
}

.dp-order-controls.success .dp-order-check {
    display: none;
}

.dp-order-controls.success .dp-order-controls-left {
    justify-content: flex-start;
    flex: none;
}

.dp-order-controls.success .dp-order-score {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.dp-order-controls.success .dp-order-timer {
    margin-left: auto;
}

.dp-order-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dp-order-controls-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dp-order-score {
    display: none;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #155724;
    font-size: 16px;
}

.dp-order-controls.success .dp-order-score {
    display: flex;
}

.dp-order-score-bar {
    background-color: #28a745;
    height: 10px;
    border-radius: 5px;
    width: 80px;
    position: relative;
}

.dp-order-score-text {
    font-size: 16px;
    font-weight: 700;
    color: #155724;
}

.dp-order-check,
.dp-order-reset {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dp-order-check {
    background-color: #1d2757;
    color: white;
}

.dp-order-check:hover {
    background-color: #14193e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dp-order-reset {
    background-color: #6c757d;
    color: white;
}

.dp-order-reset:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dp-order-timer {
    color: #495057;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dp-order-timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

.dp-order-info-icon {
    cursor: help;
    opacity: 0.6;
    color: #6c757d;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
}

/* Back to Index Button */
.back-to-index {
    display: inline-block;
    background-color: #1d2757;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: background-color 0.2s ease;
}

.back-to-index:hover {
    background-color: #14193e;
    text-decoration: none;
    color: white;
}

/* ===========================================
   ORDER ITEMS RESPONSIVE STYLES
   =========================================== */

@media (max-width: 768px) {
    .dp-order-controls {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .dp-order-buttons {
        justify-content: center;
        order: 1;
    }

    .dp-order-timer {
        justify-content: center;
        order: 2;
    }
}

/* ===========================================
   MATCH ITEMS COMPONENT STYLES
   =========================================== */

/* Main white container for unmatched items */
.dp-unmatched-items {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

/* Items to Match header styling */
.dp-unmatched-items .unmatched-items-header {
    color: #333;
    margin-bottom: 15px;
}

/* Individual draggable items */
.dp-match-text dt,
.dp-match-text dd {
    display: inline-block;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 5px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    transition: all 0.3s ease;
}

/* Item states */
.dp-match-text dt:hover,
.dp-match-text dd:hover {
    background-color: #e9ecef;
}

.dp-match-text dt.selected,
.dp-match-text dd.selected {
    background-color: #cce5ff;
    border-color: #007bff;
}

.dp-match-text dt.matched,
.dp-match-text dd.matched {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.dp-match-text dt.disabled,
.dp-match-text dd.disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Matched Items section */
.dp-matched-items {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    min-height: 80px;
}

.dp-matched-items h4 {
    color: #333;
    margin-bottom: 15px;
}

/* Matched pair display */
.matched-pair {
    display: inline-flex;
    background-color: white;
    border: 2px solid #28a745;
    border-radius: 6px;
    margin: 5px;
    overflow: hidden;
}

.matched-pair .pair-item {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #d4edda;
    color: #155724;
}

.matched-pair .pair-item:first-child {
    border-right: 1px solid #28a745;
}

/* Checkmark animation */
.checkmark {
    color: #28a745;
    font-weight: bold;
    margin-left: 5px;
}

/* Match Items control panel */
.match-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #dee2e6;
}

.match-controls-left {
    display: flex;
    gap: 10px;
}

.match-controls .btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.match-controls .btn-check {
    background-color: #1d2757;
    color: white;
}

.match-controls .btn-check:hover {
    background-color: #0f1a3a;
}

.match-controls .btn-reset {
    background-color: #6c757d;
    color: white;
}

.match-controls .btn-reset:hover {
    background-color: #5a6268;
}

.match-controls .timer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #495057;
}

.match-controls .timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
}

/* Success state for completed game */
.match-controls.game-complete {
    background-color: #d4f4dd;
    border-color: #28a745;
}

.match-controls.game-complete .btn-check {
    display: none;
}

.match-controls-success {
    display: none;
    align-items: center;
    gap: 20px;
}

.match-controls.game-complete .match-controls-success {
    display: flex;
}

.score-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.score-bar {
    background-color: #28a745;
    height: 8px;
    border-radius: 4px;
    min-width: 100px;
}

.attempts-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #495057;
}

.attempts-badge {
    background-color: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* ===========================================
   SELECT ALL COMPONENT STYLES
   =========================================== */

/* Main container for Select All activity */
.dp-si-sa {
    position: relative;
    border-radius: 10px;
}

/* Header and instruction text styling */
.dp-si-sa h4 {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}

.dp-si-sa p {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 1.4;
}

/* Icon styling for Select All */
.dp-si-sa .dp-has-icon .fas.fa-mouse-pointer {
    color: white;
    font-size: 18px;
    margin-right: 10px;
}

/* Selectable items list container */
.dp-sa-list {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-radius: 8px;
}

/* Individual selectable items */
.dp-sa-list li {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover state for selectable items */
.dp-sa-list li:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Selected state for items */
.dp-sa-list li.selected {
    background-color: #cce5ff;
    border-color: #007bff;
    color: #004085;
}

/* Correct items when revealed/checked */
.dp-sa-list li.dp-sa-correct.revealed {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

/* Checkmark for correct selections */
.dp-sa-list li.dp-sa-correct.revealed::after {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 8px;
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
    background: white;
    border: 2px solid #28a745;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Incorrect selections */
.dp-sa-list li.incorrect {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* X mark for incorrect selections */
.dp-sa-list li.incorrect::after {
    content: "✗";
    position: absolute;
    top: 5px;
    right: 8px;
    color: #dc3545;
    font-weight: bold;
    font-size: 16px;
    background: white;
    border: 2px solid #dc3545;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .dp-sa-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dp-sa-list {
        grid-template-columns: 1fr;
    }
}

/* Control Panel Section */
.dp-sa-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid #dee2e6;
    transition: background-color 0.3s ease;
}

/* Success state for control panel */
.dp-sa-controls.success {
    background-color: #d4edda;
    border-color: #28a745;
    justify-content: space-between;
    align-items: center;
}

.dp-sa-controls.success .dp-sa-check {
    display: none;
}

.dp-sa-controls.success .dp-sa-score {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.dp-sa-controls.success .dp-sa-timer {
    margin-left: auto;
}

.dp-sa-controls-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Control buttons styling */
.dp-sa-check,
.dp-sa-reset {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dp-sa-check {
    background-color: #1d2757;
    color: white;
}

.dp-sa-check:hover {
    background-color: #14193e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dp-sa-reset {
    background-color: #6c757d;
    color: white;
}

.dp-sa-reset:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Timer section */
.dp-sa-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

.dp-sa-timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

.dp-sa-info-icon {
    cursor: help;
    opacity: 0.6;
    color: #6c757d;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
}

/* Score display for success state */
.dp-sa-score {
    display: none;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #155724;
    font-size: 16px;
}

.dp-sa-controls.success .dp-sa-score {
    display: flex;
}

.dp-sa-score-text {
    font-size: 16px;
    font-weight: 700;
    color: #155724;
}

/* Responsive design for control panel */
@media (max-width: 768px) {
    .dp-sa-controls {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .dp-sa-controls-left {
        justify-content: center;
        order: 1;
    }

    .dp-sa-timer {
        justify-content: center;
        order: 2;
    }
}

/* Control Panel Section */
.dp-sa-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid #dee2e6;
    transition: background-color 0.3s ease;
}

/* Success state for control panel */
.dp-sa-controls.success {
    background-color: #d4f4dd;
    border-color: #28a745;
    justify-content: space-between;
    gap: 20px;
}

.dp-sa-controls.success .dp-sa-check {
    display: none;
}

.dp-sa-controls-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Control buttons styling */
.dp-sa-check,
.dp-sa-reset {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dp-sa-check {
    background-color: #1d2757;
    color: white;
}

.dp-sa-check:hover {
    background-color: #14193e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dp-sa-reset {
    background-color: #6c757d;
    color: white;
}

.dp-sa-reset:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Timer section */
.dp-sa-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

.dp-sa-timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

.dp-sa-info-icon {
    cursor: help;
    opacity: 0.6;
    color: #6c757d;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
}

/* Score display for success state */
.dp-sa-score {
    display: none;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #155724;
    font-size: 16px;
}

.dp-sa-controls.success .dp-sa-score {
    display: flex;
}

.dp-sa-score-text {
    font-size: 16px;
    font-weight: 700;
    color: #155724;
}

/* Responsive design for control panel */
@media (max-width: 768px) {
    .dp-sa-controls {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .dp-sa-controls-left {
        justify-content: center;
        order: 1;
    }

    .dp-sa-timer {
        justify-content: center;
        order: 2;
    }
}

/* Additional Select All score bar styling */
.dp-sa-score-bar {
    background-color: #28a745;
    height: 8px;
    border-radius: 4px;
    width: 80px;
    position: relative;
}

/* ===========================================
   SORT ITEMS COMPONENT STYLES
   =========================================== */

/* Main sort items container */
.dp-si-sort-pool {
    position: relative;
    border-radius: 10px;
}

/* Header and instruction text styling */
.dp-si-sort-pool h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}

.dp-si-sort-pool p {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 1.4;
}

/* Icon styling for Sort Items */
.dp-si-sort-pool .dp-has-icon .fas.fa-exchange-alt {
    color: white;
    font-size: 18px;
    margin-right: 10px;
}

/* Sort content container */
.dp-si-sort-content {
    margin-top: 15px;
}

/* Answer Bank and Bucket styling with white backgrounds */
.dp-si-sort-bucket {
    background-color: white !important;
    border-radius: 10px;
    margin-bottom: 15px;
    position: relative;
}

/* Bucket content area */
.dp-si-sort-bucket-content {
    padding: 15px;
}

/* Bucket headers */
.dp-si-sort-bucket-header {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Answer Bank specific styling */
.dp-si-sort-answer-bank {
    margin-bottom: 20px;
}

/* Lists inside buckets */
.dp-si-sort-bucket ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual sortable items */
.dp-si-item-text {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: move;
    user-select: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.dp-si-item-text:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dragging state */
.dp-si-item-text.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Bootstrap grid adjustments for sort items */
.dp-si-sort-pool .row {
    margin: 0;
    gap: 15px;
}

.dp-si-sort-pool .col-md-6 {
    padding-left: 8px;
    padding-right: 8px;
    flex: 1;
    max-width: calc(50% - 7.5px);
}

/* Ensure buckets are evenly distributed */
.dp-si-sort-pool .container-fluid {
    padding: 0;
}

/* Better spacing for bucket containers */
.dp-si-sort-bucket:not(.dp-si-sort-answer-bank) {
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

/* Make sure bucket content fills available space */
.dp-si-sort-bucket:not(.dp-si-sort-answer-bank) .dp-si-sort-bucket-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Allow bucket lists to grow */
.dp-si-sort-bucket:not(.dp-si-sort-answer-bank) ul {
    flex: 1;
    align-content: flex-start;
}

/* Drag and drop visual feedback */
.dp-si-sort-bucket.drag-over {
    background-color: #f0f8ff !important;
    border-color: #007bff !important;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3) !important;
}

/* Ensure Answer Bank is easily distinguishable */
.dp-si-sort-answer-bank {
    border-width: 3px !important;
}

/* Dragging state visual feedback */
.dp-si-item-text.dragging {
    opacity: 0.6;
    transform: scale(0.95);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===========================================
   SORT ITEMS CONTROL PANEL STYLES
   =========================================== */

/* Main control panel container */
.sort-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid #dee2e6;
    gap: 20px;
}

/* Left side controls */
.sort-controls-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Control buttons styling */
.sort-controls .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sort-controls .btn-sort-check {
    background-color: #1d2757;
    color: white;
}

.sort-controls .btn-sort-check:hover {
    background-color: #14193e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sort-controls .btn-sort-shuffle {
    background-color: #6c757d;
    color: white;
}

.sort-controls .btn-sort-shuffle:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sort-controls .btn-sort-reset {
    background-color: #6c757d;
    color: white;
}

.sort-controls .btn-sort-reset:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Timer section */
.sort-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

.sort-timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

.sort-info-icon {
    cursor: help;
    opacity: 0.6;
    color: #6c757d;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
}

/* Responsive design for control panel */
@media (max-width: 768px) {
    .sort-controls {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .sort-controls-left {
        justify-content: center;
        order: 1;
    }

    .sort-timer {
        justify-content: center;
        order: 2;
    }
}

/* ===========================================
   SORT ITEMS SUCCESS STATE STYLES
   =========================================== */

/* Success state control panel - matches Canvas green success panel */
.sort-controls.sort-success {
    background-color: #d4f4dd !important;
    border-color: #28a745 !important;
}

/* Ensure success state layout is maintained */
.sort-controls.sort-success .sort-controls-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Success state Reset button styling */
.sort-controls.sort-success .btn-sort-reset {
    background-color: #1d2757;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sort-controls.sort-success .btn-sort-reset:hover {
    background-color: #14193e;
}

/* Success state items with checkmarks */
.dp-si-item-text.sort-success-item {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    position: relative;
}

.success-checkmark {
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
}

/* Score display in success state */
.sort-score-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #155724;
    font-size: 16px;
}

.sort-score-bar {
    background-color: #28a745;
    height: 8px;
    border-radius: 4px;
    width: 100px;
    position: relative;
}

.sort-score-text {
    font-size: 16px;
    font-weight: 700;
    color: #155724;
}

/* Success state timer styling */
.sort-controls.sort-success .sort-timer {
    color: #495057;
    font-weight: 500;
}

.sort-controls.sort-success .sort-timer-display {
    background-color: #343a40;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}