/* apikeys.css — API Key Manager specific styles */

/* ── Generate form ──────────────────────────────────────────── */
.apikey-form {
    margin-bottom: 24px;
}

.apikey-form-inner {
    background:    var(--color-bg-card, rgba(28,28,30,0.8));
    border:        1px solid var(--color-border, #38383A);
    border-radius: 14px;
    padding:       24px 28px;
}

.apikey-form-title {
    font-size:     16px;
    font-weight:   600;
    margin-bottom: 6px;
}

.apikey-form-desc {
    font-size:     13px;
    color:         var(--color-text-secondary, rgba(235,235,245,0.6));
    margin-bottom: 16px;
    line-height:   1.6;
}

.apikey-form-desc code {
    background:    var(--color-bg-secondary, #2C2C2E);
    padding:       1px 6px;
    border-radius: 4px;
    font-size:     12px;
}

.apikey-form-row {
    display:     flex;
    gap:         10px;
    align-items: center;
    flex-wrap:   wrap;
}

.apikey-input {
    flex:          1;
    min-width:     200px;
    padding:       10px 14px;
    background:    var(--color-bg-secondary, #2C2C2E);
    border:        1px solid var(--color-border, #38383A);
    border-radius: 10px;
    color:         var(--color-text-primary, #fff);
    font-family:   var(--font-family, 'Inter', sans-serif);
    font-size:     14px;
    outline:       none;
    transition:    border-color 0.15s;
}

.apikey-input:focus {
    border-color: var(--accent-color, #0A84FF);
    box-shadow:   0 0 0 3px rgba(10,132,255,0.15);
}

.apikey-input::placeholder {
    color: var(--color-text-tertiary, rgba(235,235,245,0.3));
}

.apikey-form-error {
    margin-top: 10px;
    font-size:  13px;
    color:      var(--color-red, #FF453A);
    min-height: 18px;
}

/* ── Key result ─────────────────────────────────────────────── */
.apikey-result {
    margin-bottom: 24px;
}

.apikey-result-inner {
    background:    rgba(48, 209, 88, 0.06);
    border:        1px solid rgba(48, 209, 88, 0.25);
    border-radius: 14px;
    padding:       24px 28px;
}

.apikey-result-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     14px;
    font-weight:   600;
    color:         #30D158;
    margin-bottom: 16px;
}

.apikey-value-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--color-bg-secondary, #1C1C1E);
    border:        1px solid var(--color-border, #38383A);
    border-radius: 10px;
    padding:       12px 16px;
    margin-bottom: 16px;
}

.apikey-value {
    flex:        1;
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size:   13px;
    color:       #30D158;
    word-break:  break-all;
    line-height: 1.6;
}

.apikey-copy-btn {
    padding:       7px 16px;
    background:    var(--color-bg-secondary, #2C2C2E);
    border:        1px solid var(--color-border, #38383A);
    border-radius: 8px;
    color:         var(--color-text-primary, #fff);
    font-family:   var(--font-family, 'Inter', sans-serif);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}

.apikey-copy-btn:hover { background: var(--accent-color, #0A84FF); }

.apikey-result-note {
    font-size:   12px;
    color:       var(--color-text-secondary, rgba(235,235,245,0.6));
    line-height: 1.9;
}

.apikey-result-note code {
    background:    var(--color-bg-secondary, #2C2C2E);
    padding:       2px 8px;
    border-radius: 4px;
    font-size:     11px;
    color:         var(--color-text-primary, #fff);
}

/* ── Table states ───────────────────────────────────────────── */
.apikey-loading {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         32px;
    color:           var(--color-text-secondary, rgba(235,235,245,0.6));
    font-size:       14px;
}

.apikey-spinner {
    width:         20px;
    height:        20px;
    border:        2px solid var(--color-border, #38383A);
    border-top-color: var(--accent-color, #0A84FF);
    border-radius: 50%;
    animation:     spin 0.7s linear infinite;
    flex-shrink:   0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.apikey-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             14px;
    padding:         48px 32px;
    color:           var(--color-text-tertiary, rgba(235,235,245,0.3));
    font-size:       14px;
    text-align:      center;
}

/* ── Revoke button ──────────────────────────────────────────── */
.apikey-revoke-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       5px 12px;
    background:    transparent;
    border:        1px solid var(--color-border, #38383A);
    border-radius: 8px;
    color:         var(--color-text-secondary, rgba(235,235,245,0.6));
    font-family:   var(--font-family, 'Inter', sans-serif);
    font-size:     12px;
    font-weight:   500;
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s, background 0.15s;
}

.apikey-revoke-btn:hover {
    border-color: var(--color-red, #FF453A);
    color:        var(--color-red, #FF453A);
    background:   rgba(255, 69, 58, 0.08);
}

/* ── Secondary button ───────────────────────────────────────── */
.dash-secondary-btn {
    padding:       10px 18px;
    background:    transparent;
    border:        1px solid var(--color-border, #38383A);
    border-radius: 10px;
    color:         var(--color-text-secondary, rgba(235,235,245,0.6));
    font-family:   var(--font-family, 'Inter', sans-serif);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s;
}

.dash-secondary-btn:hover {
    border-color: var(--color-text-secondary, rgba(235,235,245,0.6));
    color:        var(--color-text-primary, #fff);
}