/* Feedback link + dialog (Scripts/odeFeedback.js). Uses variables from odeCommon.css (fallbacks included). 10/7/2026 */

/* icon-only link; the accessible name comes from aria-label/title on the <a> - negative margin cancels the space before it in the markup so it sits close to the ? help icon */
a.odeFeedbackLink { display: inline-block; font-size: 17px; line-height: 1; padding: 2px 3px; margin-left: -1px; vertical-align: top; position: relative; top: -2px;
    color: var(--ode-accent-dark, #1f56b0); text-decoration: none; border-radius: 4px; }
a.odeFeedbackLink:hover, a.odeFeedbackLink:focus { color: var(--ode-accent, #2f6fd6); background: #eef3fb; text-decoration: none; }
a.odeFeedbackLink:focus { outline: 2px solid var(--ode-accent, #2f6fd6); outline-offset: 1px; }

.odeFb-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 10000; }
.odeFb-dialog { position: fixed; top: 60px; left: 50%; width: 440px; max-width: 94%; margin-left: -220px; z-index: 10001;
    box-sizing: border-box; background: #fff; color: var(--ode-text, #1f1f1f); border: 1px solid #d6d6d6; border-radius: 12px;
    padding: 16px 20px 18px 20px; font-family: var(--ode-font-ui, "Segoe UI", Arial, sans-serif); font-size: 14px; line-height: 1.4;
    text-align: left; box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.odeFb-dialog * { box-sizing: border-box; }
/* inherit the UI font on form controls only - never on <i> icons, which need the Font Awesome font */
.odeFb-dialog button, .odeFb-dialog input, .odeFb-dialog textarea, .odeFb-dialog label { font-family: inherit; }
.odeFb-head { overflow: hidden; margin-bottom: 12px; }
.odeFb-title { float: left; margin: 0; padding: 0; font-size: 18px; font-weight: 600; text-transform: none; color: var(--ode-text, #1f1f1f); }
.odeFb-close { float: right; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: #444; padding: 4px 6px; border-radius: 6px; }
.odeFb-close:hover { background: #f0f0f0; }

/* segmented bug / feature control - selected option gets a full strong border + tint + check */
.odeFb-seg { overflow: hidden; margin-bottom: 14px; }
.odeFb-seg button { float: left; width: 49%; padding: 8px 4px; font-size: 14px; cursor: pointer;
    background: #f4f4f4; color: var(--ode-text-secondary, #5f5f5f); border: 2px solid #d6d6d6; border-radius: var(--ode-radius, 8px); }
.odeFb-seg button + button { float: right; }
.odeFb-seg button .odeFb-check { visibility: hidden; margin-left: 4px; }
.odeFb-seg button.odeFb-bug.odeFb-sel { background: #fdecec; color: #8a1c1c; border-color: #c62828; font-weight: 600; }
.odeFb-seg button.odeFb-feat.odeFb-sel { background: #eaf5e4; color: #2e5e0e; border-color: #3b7d12; font-weight: 600; }
.odeFb-seg button.odeFb-sel .odeFb-check { visibility: visible; }

.odeFb-label { display: block; color: var(--ode-text-secondary, #5f5f5f); font-size: 13px; margin: 12px 0 5px 0; }
.odeFb-dialog textarea { width: 100%; height: 110px; font-size: 14px; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--ode-border, #c8c8c8); border-radius: var(--ode-radius, 8px); color: var(--ode-text, #1f1f1f); }
.odeFb-dialog input.odeFb-email { width: 100%; height: 36px; font-size: 14px; padding: 6px 10px;
    border: 1px solid var(--ode-border, #c8c8c8); border-radius: var(--ode-radius, 8px); color: var(--ode-text, #1f1f1f); }
.odeFb-dialog textarea:hover, .odeFb-dialog input.odeFb-email:hover { border-color: var(--ode-border-strong, #8a8a8a); }
.odeFb-crit { display: block; margin-top: 12px; font-size: 13px; color: var(--ode-text, #1f1f1f); cursor: pointer; }
.odeFb-crit input { vertical-align: -2px; margin: 0 6px 0 0; }
.odeFb-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.odeFb-error { color: #b00020; font-size: 13px; min-height: 18px; margin-top: 8px; }
.odeFb-actions { text-align: right; margin-top: 8px; }
.odeFb-btn { font-size: 14px; padding: 7px 16px; margin-left: 8px; cursor: pointer; border: 1px solid var(--ode-border-strong, #8a8a8a);
    border-radius: var(--ode-radius, 8px); background: #fff; color: var(--ode-text, #1f1f1f); }
.odeFb-btn:hover { background: #f4f4f4; }
.odeFb-btn-primary { background: var(--ode-accent, #2f6fd6); border-color: var(--ode-accent, #2f6fd6); color: #fff; font-weight: 600; }
.odeFb-btn-primary:hover { background: var(--ode-accent-dark, #1f56b0); }
.odeFb-btn[disabled] { opacity: 0.6; cursor: default; }

.odeFb-seg button:focus, .odeFb-dialog textarea:focus, .odeFb-dialog input:focus, .odeFb-btn:focus, .odeFb-close:focus {
    outline: 2px solid var(--ode-accent, #2f6fd6); outline-offset: 1px; }

.odeFb-done { text-align: center; padding: 16px 0 4px 0; }
.odeFb-done i { font-size: 36px; color: #3b7d12; }
.odeFb-done-title { font-size: 16px; font-weight: 600; margin-top: 6px; }
.odeFb-done-msg { color: var(--ode-text-secondary, #5f5f5f); font-size: 13px; margin-top: 4px; }