:root {
    --selected-color: #ffeb3b;
    --opacity-color:  #ffeb3b4b;
}

body {
    font-family: Arial, sans-serif;
}

.controls {
    margin: 20px 0;
}

#highlightMode {
    margin-left: 10px;
    padding: 5px;
}

table {
    border-collapse: collapse;
    margin: 1rem 0;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    min-width: 50px;
}

table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

#syllableTable td {
    cursor: pointer;
    transition: background-color 0.2s;
}

#syllableTable td:hover {
    background-color: var(--opacity-color);
}

#wordsTable td:hover {
    background-color: var(--opacity-color);
}

.selected {
    font-weight: bold;
}

/* Table 1 highlighting */
#syllableTable td.selected {
    background-color: var(--selected-color);
}

/* Table 2 highlighting */
#wordsTable td.highlight {
    background-color: var(--selected-color) !important;
}

#wordsTable td {
    position: relative;
}

/* Add to existing CSS */
#syllableTable td {
    position: relative;
    padding-right: 25px; /* Space for badge */
}

.words-container, .selected-syllables-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px; /* Add this line */
}

.selected-syllables {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 50px;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 4px;
}

.syllable-order {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #2196F3;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
}

#syllableTable td.selected .syllable-order {
    display: flex;
}

.draggable-syllable {
    padding: 8px 16px;
    background-color: var(--selected-color); /* Yellow from table 1 */
    color: rgba(0, 0, 0, 0.87);
    border-radius: 20px; /* Circle shape */
    cursor: move;
    position: relative;
    transition: transform 0.2s;
    font-weight: bold; /* Match table 1 selected style */
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Add this line */
}

.draggable-syllable:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.order-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #2196F3; /* Blue from table 1 badges */
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: normal;
    pointer-events: none;
}

/* Add protocol container styles */
.protocol-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Protocol table specific styles */
#protocolTable th,
#protocolTable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    min-width: 50px;
}

#protocolTable th {
    background-color: #f5f5f5;
    font-weight: 600;
}

#protocolTable td:hover {
    background-color: var(--opacity-color);
}

/* Protocol controls styling */
.protocol-container .controls {
    margin: 20px 0;
}

.protocol-container input[type="number"] {
    margin-left: 10px;
    padding: 5px;
    width: 60px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.protocol-container label {
    font-weight: normal;
    margin-right: 15px;
}

.order-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px dashed #ccc;
    min-height: 50px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }
  .order-list .draggable-syllable {
    cursor: move;
  }