/* Edit Mode Styles - Only active when edit mode is enabled */

/* Edit controls on skill modifiers */
.edit-mode-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.edit-mode-btn {
    background-color: #4299e1;
    color: #fff;
    border: none;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.edit-mode-btn:hover {
    background-color: #3182ce;
}

.edit-mode-btn.danger {
    background-color: #f56565;
}

.edit-mode-btn.danger:hover {
    background-color: #e53e3e;
}

.edit-mode-inc,
.edit-mode-dec {
    background-color: #4299e1;
    color: #fff;
    border: 1px solid #3182ce;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.2;
    min-width: 24px;
    font-weight: bold;
}

.edit-mode-inc:hover,
.edit-mode-dec:hover {
    background-color: #3182ce;
}

.edit-mode-value {
    min-width: 40px;
    text-align: center;
    font-weight: bold;
}

/* Modal styles */
.edit-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.edit-modal-content {
    background-color: #2d3748;
    margin: 10% auto;
    padding: 20px;
    border: 2px solid #4a5568;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    color: #e2e8f0;
}

.edit-modal-close {
    color: #a0aec0;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.edit-modal-close:hover,
.edit-modal-close:focus {
    color: #fff;
}

.edit-modal h3 {
    margin: 0 0 20px 0;
    color: #e2e8f0;
}

.edit-modal-body label {
    display: block;
    margin: 10px 0 5px 0;
    font-weight: 500;
    color: #cbd5e0;
}

.edit-modal-body input {
    width: 100%;
    padding: 0 0 0 10px;
    border: 1px solid #4a5568;
    border-radius: 4px;
    background-color: #1a202c;
    color: #e2e8f0;
    font-size: 14px;
    box-sizing: border-box;
    height: 35px;
}

/* Make arrows slightly larger in WebKit-based browsers */
.edit-modal-body input[type=number]::-webkit-inner-spin-button {
    width: 33px; /* Adjust as needed */
    height: 33px; /* Adjust as needed */
}

.edit-modal-body input:focus {
    outline: none;
    border-color: #4299e1;
}

/* Modifier name select dropdown */
.mod-name-select-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

#mod-name-filter {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4a5568;
    border-radius: 4px;
    background-color: #1a202c;
    color: #e2e8f0;
    font-size: 14px;
    box-sizing: border-box;
}

#mod-name-filter:focus {
    outline: none;
    border-color: #4299e1;
}

#mod-name-select {
    width: 100%;
    border: 1px solid #4a5568;
    border-radius: 4px;
    background-color: #1a202c;
    color: #e2e8f0;
    font-size: 14px;
    box-sizing: border-box;
    max-height: 200px;
    overflow-y: auto;
}

#mod-name-select option {
    padding: 6px 12px;
    cursor: pointer;
}

#mod-name-select option:hover {
    background-color: #2d3748;
}

#mod-name-select:focus {
    outline: none;
    border-color: #4299e1;
}

.edit-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.edit-modal-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

#edit-modal-save {
    background-color: #48bb78;
    color: #fff;
}

#edit-modal-save:hover {
    background-color: #38a169;
}

#edit-modal-cancel {
    background-color: #4a5568;
    color: #fff;
}

#edit-modal-cancel:hover {
    background-color: #5a6678;
}

/* Export button */
#export-skills-btn {
    background-color: #805ad5;
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 8px;
    transition: background-color 0.2s;
}

#export-skills-btn:hover {
    background-color: #6b46c1;
}

/* Add mod button in header */
.skill-detail-box h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#add-mod-btn {
    background-color: #48bb78;
    color: #fff;
    border: none;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

#add-mod-btn:hover {
    background-color: #38a169;
}

/* Edit Controls Container at top of left column */
.edit-controls {
    background-color: #2d3748;
    border: 2px solid #4a5568;
    margin-bottom: 10px;
    flex: .5;
    max-height: 145px;
}

.edit-controls .innerContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.edit-mode-toggle-btn {
    background-color: #4a5568;
    color: #fff;
    border: 2px solid #718096;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    margin: 0;
}

.edit-mode-toggle-btn:hover {
    background-color: #5a6678;
    border-color: #8192a6;
}

.edit-mode-toggle-btn.active {
    background-color: #48bb78;
    border-color: #38a169;
}

.export-btn {
    background-color: #805ad5;
    color: #fff;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s;
    width: 100%;
    margin: 0;
}

.export-btn:hover {
    background-color: #6b46c1;
}

/* Profession Filter Styles */
.filter-btn {
    background-color: transparent;
    color: #fff;
    border: 1px solid #4299e1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.2s;
}

.filter-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.filter-btn:hover {
    background-color: #3182ce;
    border-color: #3182ce;
}

.filter-btn.active {
    background-color: #48bb78;
    border-color: #38a169;
}

.profession-filter-dropdown {
    padding: 10px;
    background-color: #2d3748;
    border-radius: 4px;
    margin-bottom: 10px;
}

.profession-filter-dropdown select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4a5568;
    border-radius: 4px;
    background-color: #1a202c;
    color: #e2e8f0;
    font-size: 14px;
    cursor: pointer;
}

.profession-filter-dropdown select:focus {
    outline: none;
    border-color: #4299e1;
}

/* Adjust My Skill Modifiers header to accommodate filter button */
.skill-modifiers h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Highlight edited and added mods */
.mod-edited {
    background-color: rgba(251, 191, 36, 0.15);
    border-left: 3px solid #fbbf24;
    padding-left: 8px !important;
}

.mod-added {
    background-color: rgba(72, 187, 120, 0.15);
    border-left: 3px solid #48bb78;
    padding-left: 8px !important;
}

.mod-edited .edit-mode-value,
.mod-added .edit-mode-value {
    color: #fbbf24;
    font-weight: bold;
}

.mod-added p:first-child::after {
    content: " (NEW)";
    color: #48bb78;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 4px;
}