/* WebDevRequests — submit form + staff ticket board.
 * Tied into Style Studio: consumes the global theme tokens and the site's
 * component language (cards with gradient headers, pill badges, token inputs
 * with focus rings, gradient buttons, color-mix notice tints, gradient table
 * headers). Radii: 8px cards, 6px inputs/buttons, 999px pills. */

.webdevreq-form-wrap,
.webdevreq-board {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    color: var(--text-primary, #1a1a2e);
    font-family: inherit;
}

/* ── Shared card language ────────────────────────────────────────────────── */
.webdevreq-card-shell {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-card, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 4px 14px rgba(0,0,0,.08));
}
.webdevreq-card-header {
    background: linear-gradient(135deg, var(--accent-from, #667eea), var(--accent-to, #764ba2));
    color: var(--header-text, #fff);
    padding: 10px 14px;
    font-weight: 600;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.webdevreq-card-header h2 { margin: 0; font-size: 1.05rem; color: var(--header-text, #fff); }
.webdevreq-card-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.webdevreq-sub { margin: 0; color: var(--text-muted, #6b6b8a); font-size: 13px; }
.webdevreq-gate {
    max-width: 560px; margin: 24px auto; padding: 20px;
    background: var(--bg-card, #fff); border: 1px solid var(--border-card, #e0e0e0);
    border-radius: 8px; text-align: center; color: var(--text-primary, #1a1a2e);
    box-shadow: var(--card-shadow, 0 4px 14px rgba(0,0,0,.08));
}

/* ── Inputs (unified height across input + select + textarea) ────────────── */
.webdevreq-form input,
.webdevreq-form select,
.webdevreq-form textarea,
.webdevreq-filters input,
.webdevreq-filters select,
.wdr-edit-field select,
.wdr-edit-field input,
.wdr-notes {
    background: var(--input-bg, #fff);
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--input-border, #d0d0d8);
    border-radius: 6px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    line-height: 38px;
    height: 38px;
    box-sizing: border-box;
}
.webdevreq-form textarea, .wdr-notes {
    line-height: 1.5;
    height: auto;
    padding: 8px 12px;
    resize: vertical;
}
.webdevreq-form input { width: 100%; }
.webdevreq-form select,
.webdevreq-filters select,
.wdr-edit-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.webdevreq-form select { width: 100%; }
.webdevreq-form input:focus,
.webdevreq-form select:focus,
.webdevreq-form textarea:focus,
.webdevreq-filters input:focus,
.webdevreq-filters select:focus,
.wdr-edit-field select:focus,
.wdr-edit-field input:focus,
.wdr-notes:focus,
.webdevreq-rich-editor:focus {
    outline: none; border-color: var(--border-hover, #b8c2f5);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(102,126,234,.35));
}

/* ── Rich editors (inline images) ────────────────────────────────────────── */
.webdevreq-rich {
    border: 1px solid var(--input-border, #d0d0d8);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    overflow: hidden;
}
.webdevreq-rich-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--input-border, #d0d0d8);
    background: color-mix(in srgb, var(--text-primary, #1a1a2e) 5%, var(--input-bg, #fff));
}
.webdevreq-rich-img {
    font: inherit; font-size: 12px; cursor: pointer;
    padding: 3px 9px; border-radius: 5px;
    border: 1px solid var(--input-border, #d0d0d8);
    background: var(--bg-card, #fff); color: var(--text-primary, #1a1a2e);
}
.webdevreq-rich-hint { font-size: 11px; color: var(--text-muted, #6b6b8a); }
.webdevreq-rich-editor {
    min-height: 96px; padding: 10px 12px; font-size: 14px; line-height: 1.5;
    color: var(--text-primary, #1a1a2e); outline: none; word-break: break-word;
}
.webdevreq-rich-editor.is-dragover { background: var(--surface-hover, #eef1fb); }
.webdevreq-rich-editor:empty:before { content: attr(data-placeholder); color: var(--text-muted, #6b6b8a); }
.webdevreq-inline-img,
.wdr-detail-rich img {
    max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0;
    border: 1px solid var(--border-card, #e0e0e0); display: block;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.webdevreq-btn {
    background: var(--input-bg, #fff); color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--input-border, #d0d0d8);
    padding: 0 14px; height: 38px; border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer;
}
.webdevreq-btn:hover { background: var(--surface-hover, #eef1fb); border-color: var(--border-hover, #b8c2f5); }
.webdevreq-submit {
    padding: 9px 18px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    background: linear-gradient(135deg, var(--accent-from, #667eea), var(--accent-to, #764ba2));
    color: var(--header-text, #fff); font-weight: 600; font-size: 14px;
}
.webdevreq-submit:disabled { opacity: .5; cursor: default; }

/* ── Submit form layout ──────────────────────────────────────────────────── */
.webdevreq-form { display: flex; flex-direction: column; gap: 14px; }
.webdevreq-row { display: flex; flex-direction: column; gap: 6px; }
.webdevreq-row.two { flex-direction: row; gap: 14px; }
.webdevreq-row.two > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.webdevreq-form label { font-weight: 600; font-size: .85rem; color: var(--text-primary, #1a1a2e); }
.webdevreq-form .req { color: var(--notice-error, #c74646); }
.webdevreq-bug-only { display: flex; flex-direction: column; gap: 14px; }
.webdevreq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.webdevreq-thumb { position: relative; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-card, #e0e0e0); }
.webdevreq-thumb img { width: 100%; height: 100%; object-fit: cover; }
.webdevreq-thumb-rm { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; }
.webdevreq-actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.webdevreq-status { font-size: 13px; }
.webdevreq-status.ok  { padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--notice-success, #2f7d4f) 12%, var(--bg-card, #fff)); border: 1px solid color-mix(in srgb, var(--notice-success, #2f7d4f) 45%, transparent); color: var(--notice-success, #2f7d4f); }
.webdevreq-status.err { padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--notice-error, #c74646) 12%, var(--bg-card, #fff)); border: 1px solid color-mix(in srgb, var(--notice-error, #c74646) 45%, transparent); color: var(--notice-error, #c74646); }

/* ── Board filters ───────────────────────────────────────────────────────── */
.webdevreq-board-head { margin-bottom: 14px; }
.webdevreq-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.webdevreq-filters input[type="search"] { flex: 1; min-width: 200px; }
.webdevreq-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

/* ── Badges (pills, semantic color-mix tints) ────────────────────────────── */
.wdr-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; font-size: 11px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
    border: 1px solid var(--input-border, #d0d0d8);
    background: var(--input-bg, #fff); color: var(--text-muted, #6b6b8a);
}
.wdr-badge-type {
    background: linear-gradient(135deg, var(--accent-from, #667eea), var(--accent-to, #764ba2));
    color: var(--header-text, #fff); border-color: transparent;
}
/* Priority */
.wdr-badge-prio.wdr-prio-urgent { background: color-mix(in srgb, var(--notice-error, #c74646) 15%, var(--bg-card, #fff)); color: var(--notice-error, #c74646); border-color: color-mix(in srgb, var(--notice-error, #c74646) 45%, transparent); }
.wdr-badge-prio.wdr-prio-high   { background: color-mix(in srgb, var(--notice-warning, #b8881e) 15%, var(--bg-card, #fff)); color: var(--notice-warning, #b8881e); border-color: color-mix(in srgb, var(--notice-warning, #b8881e) 45%, transparent); }
.wdr-badge-prio.wdr-prio-normal { background: color-mix(in srgb, var(--accent-from, #667eea) 15%, var(--bg-card, #fff)); color: color-mix(in srgb, var(--accent-from, #667eea) 75%, var(--text-primary, #1a1a2e)); border-color: color-mix(in srgb, var(--accent-from, #667eea) 45%, transparent); }
/* Status */
.wdr-badge-status.wdr-st-completed { background: color-mix(in srgb, var(--notice-success, #2f7d4f) 15%, var(--bg-card, #fff)); color: var(--notice-success, #2f7d4f); border-color: color-mix(in srgb, var(--notice-success, #2f7d4f) 45%, transparent); }
.wdr-badge-status.wdr-st-pr_open   { background: color-mix(in srgb, var(--notice-success, #2f7d4f) 12%, var(--bg-card, #fff)); color: var(--notice-success, #2f7d4f); border-color: color-mix(in srgb, var(--notice-success, #2f7d4f) 40%, transparent); }
.wdr-badge-status.wdr-st-pending,
.wdr-badge-status.wdr-st-on_hold,
.wdr-badge-status.wdr-st-needs_confirm { background: color-mix(in srgb, var(--notice-warning, #b8881e) 15%, var(--bg-card, #fff)); color: var(--notice-warning, #b8881e); border-color: color-mix(in srgb, var(--notice-warning, #b8881e) 45%, transparent); }
.wdr-badge-status.wdr-st-new,
.wdr-badge-status.wdr-st-triaged,
.wdr-badge-status.wdr-st-in_progress,
.wdr-badge-status.wdr-st-issue_created { background: color-mix(in srgb, var(--accent-from, #667eea) 15%, var(--bg-card, #fff)); color: color-mix(in srgb, var(--accent-from, #667eea) 75%, var(--text-primary, #1a1a2e)); border-color: color-mix(in srgb, var(--accent-from, #667eea) 45%, transparent); }

/* ── Ticket table (Player List idiom) ────────────────────────────────────── */
.webdevreq-table-wrap {
    border: 1px solid var(--border-card, #e0e0e0); border-radius: 8px; overflow: hidden;
    background: var(--bg-card, #fff); box-shadow: var(--card-shadow, 0 4px 14px rgba(0,0,0,.08));
}
.webdevreq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.webdevreq-table thead th {
    text-align: left; padding: 9px 12px; user-select: none; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, var(--accent-from, #667eea), var(--accent-to, #764ba2));
    color: var(--header-text, #fff); font-weight: 600;
}
.webdevreq-table thead th:hover { filter: brightness(1.06); }
.webdevreq-table tbody td { padding: 8px 12px; border-top: 1px solid var(--border-card, #e0e0e0); color: var(--text-primary, #1a1a2e); vertical-align: middle; }
.webdevreq-table tbody tr.wdr-row { cursor: pointer; }
.webdevreq-table tbody tr.wdr-row:hover td { background: var(--surface-hover, #eef1fb); }
.webdevreq-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text-primary, #1a1a2e) 3%, transparent); }
.webdevreq-table tbody tr.wdr-row:hover td { background: var(--surface-hover, #eef1fb); }
.wdr-c-id { font-family: monospace; color: var(--text-muted, #6b6b8a); }
.wdr-c-subject { font-weight: 600; max-width: 340px; }
.webdevreq-loading, .webdevreq-empty, .webdevreq-err { padding: 18px; text-align: center; color: var(--text-muted, #6b6b8a); }
.webdevreq-err { color: var(--notice-error, #c74646); }

/* ── Detail modal ────────────────────────────────────────────────────────── */
body.wdr-modal-open { overflow: hidden; }
.webdevreq-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; }
.webdevreq-modal[hidden] { display: none; }
.webdevreq-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.webdevreq-modal-card { position: relative; width: 100%; max-width: min(1100px, 94vw); max-height: 92vh; overflow-y: auto; }
.webdevreq-modal-card .webdevreq-card-header { position: sticky; top: 0; z-index: 1; }
.wdr-modal-close { margin-left: 6px; background: rgba(255,255,255,.2); color: var(--header-text, #fff); border: none; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
.wdr-detail-body { gap: 14px; }
.webdevreq-card-title { margin: 0; font-size: 1.15rem; color: var(--text-primary, #1a1a2e); }
.webdevreq-card-meta { font-size: .82rem; color: var(--text-muted, #6b6b8a); }
.wdr-detail-block { display: flex; flex-direction: column; gap: 4px; }
.wdr-detail-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b6b8a); font-weight: 700; }
.wdr-detail-rich { font-size: 14px; line-height: 1.55; white-space: normal; word-break: break-word; }
.wdr-detail-rich p { margin: 0 0 8px; }
.webdevreq-card-url { font-size: .85rem; word-break: break-all; }
.webdevreq-card-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.webdevreq-card-shots img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-card, #e0e0e0); }
.webdevreq-card-links { display: flex; gap: 12px; }
.wdr-link { color: var(--link-color, #4f5fd4); font-size: .85rem; text-decoration: underline; }
.wdr-id { margin-left: auto; color: var(--header-text, #fff); opacity: .85; font-size: .85rem; }
.webdevreq-card-env { font-size: .72rem; color: var(--text-muted, #6b6b8a); opacity: .85; word-break: break-all; }

.webdevreq-card-edit { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-card, #e0e0e0); display: flex; flex-direction: column; gap: 8px; }
.wdr-edit-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wdr-edit-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; font-size: .78rem; color: var(--text-muted, #6b6b8a); }
.wdr-edit-actions { display: flex; align-items: center; gap: 10px; }
.wdr-save-msg { font-size: .82rem; color: var(--text-muted, #6b6b8a); }

@media (max-width: 640px) {
    .webdevreq-row.two { flex-direction: column; }
    .wdr-c-subject { max-width: 160px; }
}

/* ── Markdown editor field (submit form + edit modal) ────────────────────── */
.webdevreq-md { border: 1px solid var(--input-border, #d0d0d8); border-radius: 6px; background: var(--input-bg, #fff); overflow: hidden; }
.webdevreq-md-toolbar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--input-border, #d0d0d8); background: color-mix(in srgb, var(--text-primary, #1a1a2e) 5%, var(--input-bg, #fff)); }
.webdevreq-md-grow { flex: 1; }
.webdevreq-md-tab { font: inherit; font-size: 12px; cursor: pointer; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--input-border, #d0d0d8); background: var(--bg-card, #fff); color: var(--text-muted, #6b6b8a); }
.webdevreq-md-tab.is-active { background: linear-gradient(135deg, var(--accent-from, #667eea), var(--accent-to, #764ba2)); color: var(--header-text, #fff); border-color: transparent; }
.webdevreq-md-img { font: inherit; font-size: 12px; cursor: pointer; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--input-border, #d0d0d8); background: var(--bg-card, #fff); color: var(--text-primary, #1a1a2e); }
.webdevreq-md-input { width: 100%; box-sizing: border-box; min-height: 120px; border: none; background: transparent; color: var(--text-primary, #1a1a2e); padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; outline: none; }
.webdevreq-md-input.is-dragover { background: var(--surface-hover, #eef1fb); }
.webdevreq-md-preview { padding: 10px 12px; font-size: 14px; line-height: 1.55; min-height: 120px; }
.webdevreq-md-empty { color: var(--text-muted, #6b6b8a); }

/* ── Rendered markdown (preview + detail) ────────────────────────────────── */
.wdr-detail-rich, .webdevreq-md-preview { word-break: break-word; }
.wdr-detail-rich p, .webdevreq-md-preview p { margin: 0 0 8px; }
.wdr-detail-rich img, .webdevreq-md-preview img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; border: 1px solid var(--border-card, #e0e0e0); display: block; }
.wdr-detail-rich ul, .wdr-detail-rich ol, .webdevreq-md-preview ul, .webdevreq-md-preview ol { margin: 0 0 8px; padding-left: 22px; }
.wdr-detail-rich code, .webdevreq-md-preview code { background: color-mix(in srgb, var(--text-primary, #1a1a2e) 8%, transparent); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.wdr-code { background: var(--bg-page, #f0f0f0); border: 1px solid var(--border-card, #e0e0e0); border-radius: 6px; padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; font-size: 13px; }
.wdr-detail-rich blockquote, .webdevreq-md-preview blockquote { margin: 0 0 8px; padding: 4px 12px; border-left: 3px solid var(--accent-from, #667eea); color: var(--text-muted, #6b6b8a); }
.wdr-detail-rich h2, .wdr-detail-rich h3, .wdr-detail-rich h4 { margin: 8px 0 4px; }

/* ── Danger button + detail/edit actions ─────────────────────────────────── */
.webdevreq-btn.wdr-btn-danger { background: color-mix(in srgb, var(--notice-error, #c74646) 15%, var(--bg-card, #fff)); color: var(--notice-error, #c74646); border-color: color-mix(in srgb, var(--notice-error, #c74646) 45%, transparent); }
.webdevreq-btn.wdr-btn-danger:hover { background: color-mix(in srgb, var(--notice-error, #c74646) 25%, var(--bg-card, #fff)); }
.wdr-detail-actions { display: flex; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--border-card, #e0e0e0); }
.wdr-md-edit { font-family: ui-monospace, Menlo, monospace; font-size: 13px; min-height: 96px; }

/* ── Responsive field grid (submit form) ─────────────────────────────────── */
.webdevreq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.webdevreq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.webdevreq-field label { font-weight: 600; font-size: .85rem; color: var(--text-primary, #1a1a2e); }
.webdevreq-field input, .webdevreq-field select { width: 100%; }

/* ── Config page (scoped API key) ────────────────────────────────────────── */
.webdevreq-config-status { font-size: 14px; padding: 10px 12px; border-radius: 6px; background: var(--bg-page, #f0f0f0); border: 1px solid var(--border-card, #e0e0e0); color: var(--text-primary, #1a1a2e); }
.webdevreq-config-status code { background: color-mix(in srgb, var(--text-primary, #1a1a2e) 8%, transparent); padding: 1px 6px; border-radius: 4px; }
.webdevreq-keyreveal { margin-top: 4px; border: 1px solid color-mix(in srgb, var(--notice-warning, #b8881e) 45%, transparent); background: color-mix(in srgb, var(--notice-warning, #b8881e) 10%, var(--bg-card, #fff)); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.webdevreq-keyreveal-warn { font-size: 13px; color: var(--notice-warning, #b8881e); font-weight: 600; }
.webdevreq-keyreveal-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.webdevreq-keyreveal-val { flex: 1; min-width: 200px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; background: var(--input-bg, #fff); border: 1px solid var(--input-border, #d0d0d8); border-radius: 6px; padding: 8px 10px; color: var(--text-primary, #1a1a2e); }