/* Placeholder stylesheet for Lexis SRS */
.ysp-practice-table {
  font-family: sans-serif;
}

.ysp-start-practice-button {
  background-color: #0a9396;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.ysp-start-practice-button:hover {
  background-color: #00767a;
}

@media screen and (max-width: 768px) {
  .ysp-practice-table,
  .ysp-practice-table thead,
  .ysp-practice-table tbody,
  .ysp-practice-table th,
  .ysp-practice-table td,
  .ysp-practice-table tr {
    display: block;
    width: 100%;
  }

  .ysp-practice-table thead {
    display: none;
  }

  .ysp-practice-table td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .ysp-practice-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #0a9396;
  }
}

.ysp-cefr-button.active {
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
}

.cefr-badge {
    display: inline-block;
    padding: 3px 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}
.cefr-a2 { background-color: #28a745; }
.cefr-b1 { background-color: #17a2b8; }
.cefr-b2 { background-color: #6f42c1; }
.cefr-c1 { background-color: #dc3545; }

/* Enhanced CSS for better mobile support */
.swal2-html-container {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
}

.ysp-selection-button {
    position: fixed !important;
    z-index: 999999 !important; /* Very high z-index */
    padding: 10px 14px !important;
    font-size: 16px !important;
    background-color: #0a9396 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight on mobile */
    touch-action: manipulation !important; /* Improve touch behavior */
}

/* Ensure text is selectable on Android */
body, p, div, span, li, td, th, h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: text;
    user-select: text;
}

/* Ensure sweet alert containers allow selection */
.swal2-container, .swal2-popup, .swal2-content {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Eye Icon Styles */
.view-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 5px;
    color: #fff;
}

.eye-stub {
    background-color: #6c757d; /* Grey */
}

.eye-srs1 {
    background-color: #007bff; /* Blue */
}

.eye-srs2 {
    background-color: #28a745; /* Green */
}

.eye-srs3 {
    background-color: #ffc107; /* Yellow */
}

.eye-srs4 {
    background-color: #dc3545; /* Red */
}

.eye-complete {
    background-color: #17a2b8; /* Teal */
}

.view-card-icon:hover {
    opacity: 0.8;
}

/* SRS Task Modal Styles */
.practice-task-modal {
    position: relative;
}

.corner-badge-left {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #4CAF50;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.corner-badge-right {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #2196F3;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Ensure title doesn't overlap with badges */
.swal2-popup.practice-task-modal .swal2-title {
    margin-top: 40px;
}

/* Optional: Add stage indicator style */
.stage-indicator {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* Blur incorrect options - make them clearly unselectable */
.task-review-modal .option-item:not(.correct-option) {
    opacity: 0.4;
    filter: blur(1px);
    cursor: not-allowed;
    pointer-events: none;
}

/* Remove hover effect from incorrect options */
.task-review-modal .option-item:not(.correct-option):hover {
    background: transparent;
    border-color: transparent;
}

/* Make correct options stand out more */
.task-review-modal .option-item.correct-option {
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.2);
}

/* Enhanced hover for correct options only */
.task-review-modal .option-item.correct-option:hover {
    background: #c8e6c9;
    border-color: #4caf50;
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
}

/* Hide selection indicator for incorrect options */
.task-review-modal .option-item:not(.correct-option) .selection-indicator {
    display: none;
}

/* Optional: Add a subtle "disabled" text to incorrect options */
.task-review-modal .option-item:not(.correct-option)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}