/* File reputation panel — layout and styling ported from the design mockup
   (docs/Requirements/Reversing-Labs-Settings/preview.html). Global stylesheet, linked from index.html;
   all rules are scoped to the .rl-panel root and its rl- prefixed classes. */

.rl-panel {
    --rl-primary: #43C2DA;
    --rl-bg-input: #020B15;
    --rl-text-secondary: rgba(255, 255, 255, 0.65);
    --rl-text-tertiary: rgba(255, 255, 255, 0.4);
    --rl-text-muted: rgba(255, 255, 255, 0.2);
    --rl-border: rgba(255, 255, 255, 0.12);
    --rl-border-strong: rgba(255, 255, 255, 0.2);
    --rl-border-subtle: rgba(255, 255, 255, 0.06);
    --rl-success: #34D399;
    --rl-warning: #FBBF24;
    --rl-danger: #F87171;
    --rl-danger-strong: #EF4444;
    --rl-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;
    color: #FFFFFF;
}

/* Header (mirrors Threat prediction: title + "Powered by") */
.rl-panel .rl-tab-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
.rl-panel .rl-tab-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
.rl-panel .rl-sub { font-size: 14px; color: var(--rl-text-secondary); margin-top: 4px; max-width: 560px; }
.rl-panel .rl-powered-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rl-text-secondary); white-space: nowrap; }
.rl-panel .rl-powered-by b { color: #FFFFFF; }
.rl-panel .rl-logo { height: 20px; width: auto; }

.rl-panel .rl-section-head { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.rl-panel .rl-divider { height: 1px; background: var(--rl-border-subtle); margin: 24px 0; }

/* Enable / disable radio cards */
.rl-panel .rl-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rl-panel .rl-radio-card { position: relative; border: 1px solid var(--rl-border); border-radius: 10px; padding: 20px 20px 22px; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.rl-panel .rl-radio-card:hover { border-color: var(--rl-border-strong); }
.rl-panel .rl-radio-card.selected { border-color: var(--rl-primary); background: rgba(67, 194, 218, 0.05); }
.rl-panel .rl-radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rl-text-tertiary); margin: 0 auto 12px; display: block; transition: border-color 0.15s, box-shadow 0.15s; }
.rl-panel .rl-radio-card.selected .rl-radio-dot { border-color: var(--rl-success); box-shadow: inset 0 0 0 3px var(--rl-success); }
.rl-panel .rl-radio-card h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.rl-panel .rl-rc-body { font-size: 13px; color: var(--rl-text-secondary); }

/* Connection section */
.rl-panel .rl-system-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rl-text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rl-border-subtle); border-radius: 6px; padding: 6px 12px; margin-bottom: 16px; }
.rl-panel .rl-conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
/* min-width: 0 so a grid item cannot be widened past its column by its content: a long value in one
   field used to push the fields beside it out of view (WI 205338). */
.rl-panel .rl-form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-panel .rl-form-group.col-span { grid-column: 1 / -1; }
.rl-panel .rl-form-group.narrow { max-width: 220px; }
.rl-panel .rl-form-label { font-size: 13px; font-weight: 500; color: var(--rl-text-secondary); }
.rl-panel .rl-form-input { padding: 10px 12px; background: var(--rl-bg-input); border: 1px solid var(--rl-border); border-radius: 4px; color: #FFFFFF; font-size: 14px; outline: none; font-family: inherit; width: 100%; min-width: 0; }
.rl-panel .rl-form-input.mono { font-family: var(--rl-mono); }
.rl-panel .rl-form-input:focus { border-color: var(--rl-primary); }
.rl-panel .rl-form-input.error { border-color: var(--rl-danger); }
.rl-panel .rl-form-input::placeholder { color: var(--rl-text-muted); }
/* A read-only field has to read as a value on show rather than one to type into: an input that only
   differs by its text colour still invites a click (PR 29199 review). The panel background, softer border
   and unchanged border on focus say the field is not for typing in, and the padlock says why. It stays
   focusable so the URL can still be selected and copied. */
.rl-panel .rl-form-input[readonly] { background: rgba(255, 255, 255, 0.03); border-color: var(--rl-border-subtle); color: var(--rl-text-secondary); cursor: default; }
.rl-panel .rl-form-input[readonly]:focus { border-color: var(--rl-border-strong); }
.rl-panel .rl-locked { position: relative; display: flex; }
.rl-panel .rl-locked .rl-form-input { padding-right: 38px; }
.rl-panel .rl-lock { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--rl-text-tertiary); pointer-events: none; }
.rl-panel .rl-form-hint { font-size: 13px; color: var(--rl-text-secondary); }
.rl-panel .rl-error-text { font-size: 12px; color: var(--rl-danger); font-weight: 600; }

.rl-panel .rl-pw { position: relative; display: flex; }
.rl-panel .rl-pw .rl-form-input { padding-right: 68px; }
.rl-panel .rl-pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--rl-text-tertiary); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 13px; }
.rl-panel .rl-pw-toggle:hover:not(:disabled) { color: #FFFFFF; background: rgba(255, 255, 255, 0.04); }
.rl-panel .rl-pw-toggle:disabled { cursor: not-allowed; opacity: 0.5; }

.rl-panel .rl-test-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.rl-panel .rl-test-result { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.rl-panel .rl-test-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.rl-panel .rl-test-ok { color: var(--rl-success); }
.rl-panel .rl-test-ok .rl-test-icon { background: var(--rl-success); color: #020B15; }
.rl-panel .rl-test-warn { color: var(--rl-warning); }
.rl-panel .rl-test-warn .rl-test-icon { background: var(--rl-warning); color: #020B15; }
.rl-panel .rl-test-fail { color: var(--rl-danger); }
.rl-panel .rl-test-fail .rl-test-icon { background: var(--rl-danger-strong); color: #FFFFFF; }

.rl-panel .rl-section-disabled { opacity: 0.45; pointer-events: none; }

@media (max-width: 1000px) {
    .rl-panel .rl-conn-grid { grid-template-columns: 1fr; }
    .rl-panel .rl-radio-cards { grid-template-columns: 1fr; }
}

/* Save-outcome banner, rendered inside the panel under the tab title where the approved mockup puts it:
   above the card it read as a page-level message about something else (PR 29176 review). The colours stay
   literal rather than using the --rl-* variables, so the banner survives being moved again. */
.rl-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
/* The tab head already carries its own bottom margin, so this only has to separate the banner from the
   enable/disable cards below it. */
.rl-panel .rl-banner { margin-bottom: 20px; }
.rl-banner .rl-banner-icon { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.rl-banner-ok { color: #34D399; border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.08); }
.rl-banner-ok .rl-banner-icon { background: #34D399; color: #020B15; }
.rl-banner-error { color: #F87171; border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); }
.rl-banner-error .rl-banner-icon { background: #EF4444; color: #FFFFFF; }
/* A refusal the administrator resolves in their secrets manager is guidance, so it borrows the callout's
   palette rather than the red of a failure they could retry here (WI 205330). */
.rl-banner-info { color: #43C2DA; border-color: rgba(67, 194, 218, 0.5); background: rgba(67, 194, 218, 0.08); }
.rl-banner-info .rl-banner-icon { background: #43C2DA; color: #020B15; font-style: normal; }

.rl-panel .rl-lookup-note { margin-top: 10px; }
/* Externally-managed credential: an informational badge and callout, styled as guidance rather than as a
   failure (the administrator resolves it in their secrets manager; there is nothing here to retry). */
.rl-panel .rl-badge { margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--rl-primary); border: 1px solid var(--rl-primary); background: rgba(67, 194, 218, 0.1); vertical-align: middle; }
.rl-panel .rl-callout { margin: 14px 0 4px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--rl-border); background: rgba(67, 194, 218, 0.06); }
.rl-panel .rl-callout-head { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rl-panel .rl-callout-body { font-size: 13px; line-height: 1.55; color: var(--rl-text-secondary); }