/* ═══════════════════════════════════════════════════════════════════════
   LUVEEDU POSTMAN — workspace-specific styles
   Built on top of the Luveedu UI library (library-v1.css).
   Only Postman-unique widgets live here (history items, method/status
   badges, the code editor). Everything else uses lv-* library classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── History items (sidebar is always dark #0f172a in both themes) ── */
.history-item {
    border: 1px solid #1e293b;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.12s cubic-bezier(0.2, 0, 0.2, 1), background 0.12s cubic-bezier(0.2, 0, 0.2, 1);
}

.history-item:hover {
    background: rgba(51, 65, 85, 0.5);
    border-color: #273753;
}

/* Delete button inside history items (emailsend table delete style) */
.delete-history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.12s ease;
}

.delete-history:hover { background: #fee2e2; }

/* ── HTTP method badges ── */
.method-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--lv-font-ui);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.method-get     { background: #ecfdf5; color: #059669; }
.method-post    { background: #eff6ff; color: #2563eb; }
.method-put     { background: #fffbeb; color: #d97706; }
.method-patch   { background: #faf5ff; color: #9333ea; }
.method-delete  { background: #fef2f2; color: #dc2626; }
.method-head    { background: #f4f4f5; color: #52525b; }
.method-options { background: #eef2ff; color: #4f46e5; }

body[data-theme='dark'] .method-get     { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
body[data-theme='dark'] .method-post    { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
body[data-theme='dark'] .method-put     { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
body[data-theme='dark'] .method-patch   { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; }
body[data-theme='dark'] .method-delete  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
body[data-theme='dark'] .method-head    { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
body[data-theme='dark'] .method-options { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

/* ── Response status badges ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--lv-font-ui);
}
.status-2xx { background: #ecfdf5; color: #059669; }
.status-3xx { background: #eff6ff; color: #2563eb; }
.status-4xx { background: #fffbeb; color: #d97706; }
.status-5xx { background: #fef2f2; color: #dc2626; }
.status-err { background: #f4f4f5; color: #52525b; }

body[data-theme='dark'] .status-2xx { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
body[data-theme='dark'] .status-3xx { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
body[data-theme='dark'] .status-4xx { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
body[data-theme='dark'] .status-5xx { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
body[data-theme='dark'] .status-err { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

/* ── Code editor / response viewers ── */
.pm-code {
    font-family: var(--lv-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    background: var(--lv-bg-surface-1);
    border: 1px solid var(--lv-border-muted);
    border-radius: 6px;
}

.pm-code-textarea {
    width: 100%;
    min-height: 160px;
    padding: 12px;
    font-family: var(--lv-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lv-text-primary);
    background: var(--lv-bg-surface-2);
    border: none;
    outline: 0;
    resize: vertical;
}

.pm-code-textarea::placeholder { color: var(--lv-text-disabled); }

.pm-response-pre {
    font-family: var(--lv-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 420px;
    color: var(--lv-text-secondary);
}

/* ── Avatar img helper (fills the .lv-avatar box) ── */
.lv-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Mobile (<640px) ─────────────────────────────────────────────────────
   URL card stacks (method on its own line), tables scroll horizontally,
   header text buttons collapse to icon-only. */
.pm-method-wrap { width: 128px; flex-shrink: 0; }

@media (max-width: 639px) {
    /* Method select on its own line; URL + Send below */
    .pm-method-wrap { width: 100%; flex-shrink: 1; }

    /* Tables scroll horizontally instead of squishing columns */
    .lv-table-wrap { overflow-x: auto; }
    .lv-table { min-width: 440px; }

    /* Header buttons become icon-only on phones */
    .pm-header-text { display: none; }
    .pm-header-login { width: 36px; padding: 0; justify-content: center; }
    .pm-header-icon-btn { width: 36px; padding: 0; justify-content: center; }
}

/* ── Editable header cells (plain text, double-click to edit) ── */
.header-key-cell,
.header-value-cell {
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty-cell placeholders ("eg. key" / "eg. value") */
.header-key-cell:empty::before,
.header-value-cell:empty::before {
    content: attr(data-placeholder);
    color: var(--lv-text-disabled);
}

.header-key-cell[contenteditable='true'],
.header-value-cell[contenteditable='true'] {
    white-space: normal;
    overflow: visible;
    background: var(--lv-bg-surface-3);
    outline: none;
}