/* === BlazorToolkit JSON Editor === */
/* All values reference --btk-* theme variables */

/* Buttons (shared by editor + viewer) */
.json-btn {
    padding: 6px 14px;
    border: 1px solid var(--btk-border);
    border-radius: var(--btk-radius);
    background: var(--btk-bg);
    color: var(--btk-text-label);
    font-family: var(--btk-font-family);
    font-size: var(--btk-font-size-base);
    cursor: pointer;
    transition: all var(--btk-transition);
}

.json-btn:hover {
    background: var(--btk-hover-bg);
}

.json-btn-active {
    background: var(--btk-primary);
    color: #fff;
    border-color: var(--btk-primary);
}

.json-btn-active:hover {
    background: var(--btk-primary-hover);
}

.json-btn-add {
    margin-top: 8px;
    border-style: dashed;
    color: var(--btk-primary);
    border-color: var(--btk-primary-border);
}

.json-btn-add:hover {
    background: var(--btk-primary-light);
}

.json-btn-danger {
    color: var(--btk-danger);
    border-color: var(--btk-danger-border);
    padding: 2px 8px;
    font-size: var(--btk-font-size-sm);
}

.json-btn-danger:hover {
    background: var(--btk-danger-light);
}

/* Fields */
.json-field {
    margin-bottom: 16px;
}

.json-field-label {
    display: block;
    font-size: var(--btk-font-size-md);
    font-weight: 600;
    color: var(--btk-text-label);
    margin-bottom: 4px;
}

.json-field-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.json-field-required {
    color: var(--btk-danger);
}

.json-field-description {
    display: block;
    font-size: var(--btk-font-size-sm);
    color: var(--btk-text-muted);
    margin-bottom: 4px;
}

.json-field-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--btk-border);
    border-radius: var(--btk-radius);
    font-size: var(--btk-font-size-md);
    font-family: var(--btk-font-family);
    color: var(--btk-text);
    background: var(--btk-bg);
    transition: border-color var(--btk-transition);
    box-sizing: border-box;
}

.json-field-input:focus {
    outline: none;
    border-color: var(--btk-border-focus);
    box-shadow: 0 0 0 3px var(--btk-focus-ring);
}

.json-field-error {
    display: block;
    font-size: var(--btk-font-size-sm);
    color: var(--btk-danger);
    margin-top: 4px;
}

/* Object nesting */
.json-object-content {
    border-left: 3px solid var(--btk-border-light);
    padding-left: 16px;
    margin-top: 8px;
}

/* Array */
.json-array-items {
    margin-top: 8px;
}

.json-array-item {
    border: 1px solid var(--btk-border-light);
    border-radius: var(--btk-radius);
    padding: 12px;
    margin-bottom: 8px;
    background: var(--btk-bg-inset);
}

.json-array-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.json-array-item-index {
    font-size: var(--btk-font-size-sm);
    font-weight: 600;
    color: var(--btk-text-muted);
}

/* Raw editor */
.json-raw-editor {
    width: 100%;
}

.json-raw-textarea {
    width: 100%;
    padding: 12px;
    font-family: var(--btk-font-family-mono);
    font-size: var(--btk-font-size-md);
    border: 1px solid var(--btk-border);
    border-radius: var(--btk-radius);
    background: var(--btk-code-bg);
    color: var(--btk-code-text);
    resize: vertical;
    box-sizing: border-box;
    line-height: var(--btk-line-height);
    tab-size: 2;
}

.json-raw-textarea:focus {
    outline: none;
    border-color: var(--btk-border-focus);
    box-shadow: 0 0 0 3px var(--btk-focus-ring);
}

.json-raw-error {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--btk-danger-light);
    border: 1px solid var(--btk-danger-border);
    border-radius: var(--btk-radius);
    color: var(--btk-danger);
    font-size: var(--btk-font-size-base);
}