/* File: css/modal.css */
/**
 * Purpose: Styling for the draggable modal window. Ensures theme variables are applied.
 * Fixes potential text selection during drag.
 * Adds styling for manual mode toggles.
 * Adds styling for visual setting groups and new Reset Settings button.
 *
 * Version History:
 * - v1.0 - Initial creation.
 * - v1.1 - Ensure modal opens centered using transform.
 * - v1.2 - Disable transitions during drag via .is-dragging class.
 */

 .modal {
    position: fixed;
    /* Initial Centering: Handled by JS (_setInitialPosition) setting transform on open */
    /* Fallback position if JS fails */
    left: 10px; top: 10px;
    width: 90%;
    max-width: 400px;
    /* Use theme variables for styling */
    background-color: var(--container-bg); /* Use main container bg */
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--overlay-shadow); /* Use overlay shadow */
    z-index: 1000;
    overflow: hidden; /* Changed from visible */
    opacity: 1; /* Start fully visible (JS handles fade if needed) */
    /* Define transitions EXCEPT when dragging */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.modal.is-dragging {
    /* Disable transitions during drag to prevent interference */
    transition: none !important;
}

.modal.hidden {
    display: none;
    /* Or use opacity for fade-out (requires JS timing changes) */
    /* opacity: 0; */
    /* pointer-events: none; */
}

.modal-header {
    padding: 10px 15px;
    /* Slightly darker/lighter shade of container bg */
    background-color: var(--input-area-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none; /* Prevent text selection on header */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-title {
    font-size: 1.2em;
    font-weight: bold;
    color: inherit; /* Inherit from modal */
    pointer-events: none; /* Prevent title interfering with drag */
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    color: var(--text-color); /* Inherit from modal */
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent; /* Prevent highlight on mobile tap */
    transition: opacity 0.2s ease;
}

.modal-close-button:hover {
    opacity: 1;
}

.modal-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: inherit; /* Inherit from modal */
    max-height: 70vh; /* Limit height to prevent overflow on small screens */
    overflow-y: auto; /* Allow vertical scrolling if content exceeds max-height */
}

/* NEW: Styling for generic settings group */
.settings-group {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px 12px;
    margin-bottom: 5px; /* Consistent bottom margin */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between items within group */
}

.settings-group-label {
    font-weight: bold;
    font-size: 1.1em;
    color: inherit;
    margin-bottom: 5px; /* Space below group label */
    display: block; /* Make it block level */
    width: 100%;
    border-bottom: 1px dashed var(--border-color); /* Separator */
    padding-bottom: 5px;
    margin-bottom: 8px; /* Increased space after label */
}

/* Adjustments for items inside a group */
.settings-group label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    margin-bottom: -5px; /* Adjust spacing */
    color: inherit; /* Inherit from modal */
}

.settings-group input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--button-primary-bg); /* Use theme color */
    margin-top: 2px; /* Small space above slider */
}

.settings-group .settings-toggle-row {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 0; /* Remove extra top margin */
     padding-left: 0; /* Remove extra indent */
}

.settings-group .settings-toggle-row label {
    margin-bottom: 0;
    width: auto; /* Let label take its content width */
    justify-content: flex-start; /* Align label text left */
    color: inherit; /* Inherit from modal */
}

.settings-group input[type="checkbox"] {
    transform: scale(1.4);
    cursor: pointer;
    accent-color: var(--button-primary-bg); /* Use theme color */
    margin-left: auto; /* Push checkbox to the right */
    flex-shrink: 0;
}


/* Key mapping row adjustment within group */
.settings-group .key-mapping-row {
    margin-bottom: 5px; /* Reduce bottom margin for key rows */
}

/* Style range thumbs/track if needed, using variables */
.modal-content input[type="range"]::-webkit-slider-thumb {
    background: var(--button-primary-bg);
}
.modal-content input[type="range"]::-moz-range-thumb {
     background: var(--button-primary-bg);
}
/* ... add more vendor prefixes if necessary */

/* Styling for Button Group */
.settings-group.button-group {
    border: none; /* Remove border for button-only group */
    padding: 5px 0 0 0; /* Adjust padding */
    gap: 10px; /* Space between buttons */
}

/* General style for buttons within modal content */
.settings-action-button {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    text-align: center;
}

/* NEW: Reset Settings Button Style */
#reset-settings-button {
    background-color: var(--button-secondary-bg); /* Use secondary color */
    color: var(--button-text-color);
    border-color: var(--border-color);
}

#reset-settings-button:hover {
    background-color: var(--button-secondary-hover-bg);
}

/* Reset Progress Button Specific Style */
#reset-progress-button {
    background-color: var(--char-incorrect-bg); /* Use danger theme color */
    color: var(--char-incorrect-color);
    border-color: transparent; /* Or make it match bg */
}

#reset-progress-button:hover {
    filter: brightness(0.9);
    background-color: var(--char-incorrect-bg); /* Keep bg on hover */
}

/* --- Usage Example --- */
/*
// Apply modal styles by linking this CSS file in the HTML head:
// <link rel="stylesheet" href="css/modal.css">
//
// Example HTML Structure for a modal (from index.html):
// <div id="settings-modal" class="modal hidden">
//     <div class="modal-header" id="settings-modal-header"> ... </div>
//     <div class="modal-content"> ... </div>
// </div>
//
// JavaScript (modal.js) handles showing/hiding by toggling the 'hidden' class.
// JavaScript adds the 'is-dragging' class during drag operations to disable transitions.
*/