/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — JSON Formatter & Validator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Indent selector: segmented button group ────────────────────────────────── */
.indent-selector {
    display:     inline-flex;
    border:      1px solid var(--border);
    border-radius: 8px;
    overflow:    hidden;
    font-size:   0.8125rem;
    font-weight: 600;
}
.indent-btn {
    padding:     0.45rem 0.9rem;
    background:  #fff;
    border:      none;
    border-right: 1px solid var(--border);
    cursor:      pointer;
    color:       var(--text-secondary, #64748B);
    transition:  background 0.15s, color 0.15s;
    font-size:   0.8125rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
}
.indent-btn:last-child {
    border-right: none;
}
.indent-btn:hover {
    background: #f5f4f1;
    color:      var(--accent, #E8472F);
}
.indent-btn.active {
    background: var(--accent, #E8472F);
    color:      #fff;
}

/* ── Controls row (indent + action buttons) ─────────────────────────────────── */
.jf-controls-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin:      0.875rem 0;
}
.jf-controls-row .btn-ghost {
    font-size:   0.875rem;
    padding:     0.5rem 1rem;
}
.jf-controls-row .btn-primary {
    font-size:   0.875rem;
    padding:     0.5rem 1.25rem;
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
}

/* ── JSON textarea input ─────────────────────────────────────────────────────── */
.jf-input-wrap {
    position: relative;
}
.jf-textarea {
    width:        100%;
    min-height:   180px;
    max-height:   400px;
    resize:       vertical;
    font-family:  'SFMono-Regular', 'Consolas', 'Courier New', monospace;
    font-size:    0.8125rem;
    line-height:  1.6;
    color:        var(--text-primary, #0D1B2A);
    background:   #fafaf8;
    border:       1.5px solid var(--border, #E2E4E8);
    border-radius: 10px;
    padding:      0.875rem 1rem;
    outline:      none;
    box-sizing:   border-box;
    transition:   border-color 0.2s;
    tab-size:     4;
}
.jf-textarea:focus {
    border-color: var(--accent, #E8472F);
    background:   #fff;
}
.jf-textarea::placeholder {
    color:        #b0aea9;
    font-family:  'IBM Plex Sans', sans-serif;
    font-size:    0.875rem;
}

/* ── Char count label ────────────────────────────────────────────────────────── */
.jf-char-count {
    position:  absolute;
    bottom:    0.5rem;
    right:     0.75rem;
    font-size: 0.75rem;
    color:     var(--muted, #64748B);
    pointer-events: none;
    user-select: none;
}

/* ── Output panel ────────────────────────────────────────────────────────────── */
.jf-output-panel {
    margin-top:   1rem;
    border:       1.5px solid var(--border, #E2E4E8);
    border-radius: 10px;
    overflow:     hidden;
    background:   #fafaf8;
}
.jf-output-toolbar {
    display:      flex;
    align-items:  center;
    justify-content: space-between;
    padding:      0.5rem 0.875rem;
    background:   #f2f1ee;
    border-bottom: 1px solid var(--border, #E2E4E8);
    flex-wrap:    wrap;
    gap:          0.5rem;
}
.jf-output-toolbar-left {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
}
.jf-output-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.jf-status-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    font-size:     0.8rem;
    font-weight:   700;
    padding:       0.25rem 0.65rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.jf-status-badge.valid {
    background: #e8f7ee;
    color:      #1e7e44;
}
.jf-status-badge.invalid {
    background: #fdecea;
    color:      #c62828;
}
.jf-output-char-count {
    font-size: 0.75rem;
    color:     var(--muted, #64748B);
}
.jf-copy-btn,
.jf-download-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    font-size:     0.8rem;
    font-weight:   600;
    font-family:   inherit;
    padding:       0.3rem 0.7rem;
    border-radius: 6px;
    border:        1.5px solid var(--border, #E2E4E8);
    background:    #fff;
    color:         var(--text-primary, #0D1B2A);
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s;
}
.jf-copy-btn:hover,
.jf-download-btn:hover {
    background:    #f0ede8;
    border-color:  var(--accent, #E8472F);
    color:         var(--accent, #E8472F);
}
.jf-copy-btn.copied {
    background:    #e8f7ee;
    border-color:  #1e7e44;
    color:         #1e7e44;
}

/* ── Output <pre> with line numbers via CSS counter ─────────────────────────── */
.jf-output-pre {
    margin:       0;
    padding:      0;
    overflow-x:   auto;
    overflow-y:   auto;
    max-height:   480px;
    background:   transparent;
    counter-reset: jf-line;
}
.jf-output-pre code {
    display:       block;
    font-family:   'SFMono-Regular', 'Consolas', 'Courier New', monospace;
    font-size:     0.8125rem;
    line-height:   1.65;
    color:         var(--text-primary, #0D1B2A);
    white-space:   pre;
}
/* Each line rendered as a separate element by app.js */
.jf-line {
    display:    table-row;
    counter-increment: jf-line;
}
.jf-line::before {
    content:      counter(jf-line);
    display:      table-cell;
    width:        2.8rem;
    min-width:    2.8rem;
    padding:      0 0.75rem 0 0.875rem;
    text-align:   right;
    color:        #b0aea9;
    font-size:    0.75rem;
    user-select:  none;
    border-right: 1px solid var(--border, #E2E4E8);
    background:   #f2f1ee;
    line-height:  1.65;
    vertical-align: top;
}
.jf-line-content {
    display:     table-cell;
    padding:     0 1rem;
    white-space: pre;
    line-height: 1.65;
    vertical-align: top;
}

/* ── Error banner ────────────────────────────────────────────────────────────── */
.jf-error-banner {
    display:      flex;
    align-items:  flex-start;
    gap:          0.6rem;
    padding:      0.75rem 1rem;
    background:   #fdecea;
    border:       1.5px solid #f5c6c2;
    border-radius: 8px;
    color:        #c62828;
    font-size:    0.875rem;
    font-weight:  500;
    margin-top:   0.75rem;
    line-height:  1.5;
}
.jf-error-banner .jf-err-icon {
    flex-shrink: 0;
    margin-top:  0.1rem;
    font-size:   1rem;
}
.jf-error-banner[hidden] {
    display: none;
}

/* ── Placeholder state (empty output) ────────────────────────────────────────── */
.jf-output-placeholder {
    display:      flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
    padding:      2.5rem 1rem;
    color:        #b0aea9;
    font-size:    0.875rem;
    gap:          0.5rem;
    text-align:   center;
}
.jf-output-placeholder .jf-ph-icon {
    font-size:   2rem;
    opacity:     0.5;
}

/* ── Input section labels ────────────────────────────────────────────────────── */
.jf-label {
    display:     block;
    font-size:   0.8125rem;
    font-weight: 700;
    color:       var(--text-secondary, #64748B);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Validate-only: success message inside output panel ─────────────────────── */
.jf-validate-msg {
    padding:     1rem 1rem 1rem 1.25rem;
    font-size:   0.9rem;
    font-weight: 500;
    color:       #1e7e44;
}

/* cache-buster: 2026-05-24T05:06:05Z */