/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — JWT Decoder — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── JWT textarea ──────────────────────────────────────────────────────────── */
.jwt-textarea {
    width:           100%;
    min-height:      120px;
    max-height:      280px;
    border:          1.5px solid var(--border);
    border-radius:   10px;
    padding:         0.875rem 1rem;
    font-family:     'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size:       0.8125rem;
    line-height:     1.6;
    color:           var(--text);
    background:      var(--bg);
    resize:          vertical;
    transition:      border-color 0.15s, box-shadow 0.15s;
    box-sizing:      border-box;
    word-break:      break-all;
    margin-bottom:   0.5rem;
}
.jwt-textarea:focus {
    outline:         none;
    border-color:    var(--accent);
    box-shadow:      0 0 0 3px rgba(232,98,42,0.12);
}
.jwt-textarea::placeholder {
    color:           var(--muted);
    font-style:      italic;
}

/* ── Amber warning banner — always visible ─────────────────────────────────── */
.jwt-warning-banner {
    display:         flex;
    align-items:     flex-start;
    gap:             0.625rem;
    background:      #fffbeb;
    border:          1.5px solid #fbbf24;
    border-radius:   10px;
    padding:         0.75rem 1rem;
    font-size:       0.875rem;
    font-weight:     600;
    color:           #92400e;
    line-height:     1.5;
    margin-bottom:   1.25rem;
}
.jwt-warning-banner .warn-icon {
    font-size:       1.1rem;
    flex-shrink:     0;
    margin-top:      0.05rem;
}

/* ── Error banner ─────────────────────────────────────────────────────────── */
.jwt-error-banner {
    background:      #fef2f2;
    border:          1.5px solid #fca5a5;
    border-radius:   10px;
    color:           #b91c1c;
    font-size:       0.875rem;
    font-weight:     600;
    padding:         0.75rem 1rem;
    margin-top:      0.75rem;
    line-height:     1.5;
}

/* ── Privacy note ─────────────────────────────────────────────────────────── */
.jwt-privacy-note {
    font-size:       0.8125rem;
    color:           var(--muted);
    font-weight:     500;
    margin-top:      0.625rem;
    margin-bottom:   0;
}

/* ── Output section ───────────────────────────────────────────────────────── */
.jwt-output-section {
    border-top:      1.5px solid var(--border);
    margin-top:      1.25rem;
    padding-top:     1.25rem;
    display:         flex;
    flex-direction:  column;
    gap:             1rem;
}

/* ── JWT panel (header / payload / signature) ─────────────────────────────── */
.jwt-panel {
    background:      #fafaf9;
    border:          1.5px solid var(--border);
    border-radius:   10px;
    overflow:        hidden;
}
.jwt-panel-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.625rem 1rem;
    background:      #f1f0ec;
    border-bottom:   1.5px solid var(--border);
    gap:             0.5rem;
    flex-wrap:       wrap;
}
.jwt-panel-title {
    font-size:       0.8125rem;
    font-weight:     700;
    color:           var(--muted);
    letter-spacing:  0.06em;
    text-transform:  uppercase;
}
.jwt-panel-copy {
    padding:         0.2rem 0.625rem;
    border:          1.5px solid var(--border);
    border-radius:   999px;
    background:      var(--bg);
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--muted);
    cursor:          pointer;
    font-family:     'IBM Plex Sans', sans-serif;
    transition:      border-color 0.15s, color 0.15s;
}
.jwt-panel-copy:hover     { border-color: var(--accent); color: var(--accent); }
.btn-success-flash        { border-color: #16a34a !important; color: #16a34a !important; }

.jwt-panel-body {
    padding:         1rem;
    overflow-x:      auto;
}

/* ── JSON syntax highlight ────────────────────────────────────────────────── */
.jwt-json-code {
    font-family:     'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size:       0.8125rem;
    line-height:     1.7;
    white-space:     pre;
    margin:          0;
    color:           var(--text);
}
.jwt-json-key     { color: #0369a1; font-weight: 700; }
.jwt-json-string  { color: #15803d; }
.jwt-json-number  { color: #c026d3; }
.jwt-json-bool    { color: #d97706; font-weight: 700; }
.jwt-json-null    { color: #6b7280; font-weight: 700; }

/* ── Signature note ───────────────────────────────────────────────────────── */
.jwt-sig-note {
    font-size:       0.8125rem;
    color:           var(--muted);
    font-style:      italic;
    margin-top:      0.5rem;
    margin-bottom:   0;
}

/* ── Human-readable fields ────────────────────────────────────────────────── */
.jwt-human-fields {
    background:      #f8faff;
    border:          1.5px solid #bfdbfe;
    border-radius:   10px;
    padding:         0.875rem 1rem;
}
.jwt-human-title {
    font-size:       0.8125rem;
    font-weight:     700;
    color:           #1d4ed8;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    margin-bottom:   0.75rem;
}
.jwt-human-row {
    display:         flex;
    align-items:     flex-start;
    gap:             0.5rem;
    flex-wrap:       wrap;
    padding:         0.3rem 0;
    border-bottom:   1px solid #dbeafe;
    font-size:       0.875rem;
}
.jwt-human-row:last-child { border-bottom: none; }
.jwt-human-label {
    font-weight:     700;
    color:           var(--muted);
    flex-shrink:     0;
    min-width:       9rem;
}
.jwt-human-value {
    color:           var(--text);
    font-family:     'SFMono-Regular', 'Consolas', monospace;
    font-size:       0.8125rem;
    word-break:      break-word;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.jwt-status {
    display:         inline-flex;
    align-items:     center;
    gap:             0.25rem;
    font-size:       0.8125rem;
    font-weight:     700;
    border-radius:   999px;
    padding:         0.2rem 0.625rem;
}
.jwt-status--valid   { background: #dcfce7; color: #15803d; }
.jwt-status--expired { background: #fee2e2; color: #b91c1c; }
.jwt-status--no-exp  { background: #fef3c7; color: #92400e; }

/* ── Time remaining ───────────────────────────────────────────────────────── */
.jwt-time-remaining {
    font-size:       0.8125rem;
    font-weight:     600;
}
.jwt-time-remaining--valid   { color: #15803d; }
.jwt-time-remaining--expired { color: #b91c1c; }
.jwt-time-remaining--warning { color: #92400e; }

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