/* Regex Tester Styles */

/* General Styles */
.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.card-header {
    font-weight: bold;
}

/* Regex Pattern Input */
#regex-pattern {
    font-family: monospace;
    font-size: 16px;
}

.input-group-text {
    font-family: monospace;
    font-weight: bold;
}

/* Flags Section */
.form-check-inline {
    margin-right: 15px;
    margin-bottom: 10px;
}

/* Test String Area */
#test-string {
    font-family: monospace;
    font-size: 14px;
    min-height: 150px;
    resize: vertical;
}

/* Results Area */
#highlighted-text {
    font-family: monospace;
    font-size: 14px;
    min-height: 150px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    background-color: #f8f9fa;
}

.match-highlight {
    background-color: #ffeb3b;
    border-radius: 2px;
    padding: 2px 0;
}

.group-highlight {
    background-color: #81c784;
    border-radius: 2px;
    padding: 2px 0;
}

#match-details {
    font-family: monospace;
    max-height: 200px;
    overflow-y: auto;
}

.match-item {
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.match-index {
    font-weight: bold;
    color: #007bff;
}

.match-value {
    color: #28a745;
}

.match-position {
    color: #6c757d;
    font-size: 0.9em;
}

/* Quick Reference */
.card code {
    background-color: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

/* Error Styling */
.regex-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-check-inline {
        display: block;
        margin-right: 0;
    }
}