/* Custom styles for JSON Formatter (if any) */
/* The layout and editor styles are now inherited from tool-base.css */

/* Drag-and-drop overlay state for input panel */
#inputPanel.json-formatter-dragover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

/* Active button state for action buttons */
.controls .btn.active,
.controls .btn.btn-primary.active,
.controls .btn.btn-secondary.active {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39) !important;
    transform: translateY(-1px);
}

.controls .btn.active:hover,
.controls .btn.btn-primary.active:hover,
.controls .btn.btn-secondary.active:hover {
    background: #4f46e5 !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
}

/* Make btn-primary look like btn-secondary when not active */
.controls .btn.btn-primary:not(.active) {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: none !important;
}

.controls .btn.btn-primary:not(.active):hover {
    background: var(--bg-hover) !important;
    border-color: var(--primary-color) !important;
    transform: none !important;
}

/* Status message with close button */
.status-message {
    position: relative;
    padding-right: 2.5rem;
}

.status-message-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.status-message-close:hover {
    opacity: 1;
}