/* ICAP configuration section — the pinned, collapsible panel at the top of the ICAP tab. Global
   stylesheet, linked from index.html; all rules are scoped to the .icfg-panel root and its icfg-
   prefixed classes. Follows the File reputation panel's house style so the two Protection settings
   surfaces read as one product. */

.icfg-panel {
    --icfg-primary: #43C2DA;
    --icfg-bg-input: #020B15;
    --icfg-text-secondary: rgba(255, 255, 255, 0.65);
    /* 0.55, not the 0.4 the mockup implies: composited on the panel background 0.4 measures
       3.82:1 and this token carries hints, section labels and the collapse control, all of which are
       body-size text that has to clear 4.5:1 (WCAG 1.4.3 AA). At 0.55 it measures 5.3:1. */
    --icfg-text-tertiary: rgba(255, 255, 255, 0.55);
    --icfg-text-muted: rgba(255, 255, 255, 0.2);
    --icfg-border: rgba(255, 255, 255, 0.12);
    --icfg-border-strong: rgba(255, 255, 255, 0.2);
    --icfg-border-subtle: rgba(255, 255, 255, 0.137);
    --icfg-success: #34D399;
    --icfg-warning: #FBBF24;
    --icfg-danger: #F87171;
    --icfg-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.17px;
}

.icfg-panel .icfg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
/* The card title, sized to match the sibling "Current ICAP settings" card rather than the UA-default
   h2 the ICAP settings page would otherwise apply (bug 206424). */
.icfg-panel .icfg-head h2 { font-weight: 700; margin: 0; }
.icfg-panel .icfg-sub { font-size: 13px; color: var(--icfg-text-tertiary); margin-top: 2px; max-width: 560px; }

.icfg-panel .icfg-divider { height: 1px; background: var(--icfg-border-subtle); margin: 22px 0; }

/* Collapsed summary: inline key/value pairs that wrap, as the mockup lays them out. */
.icfg-panel .icfg-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0 2px; }
.icfg-panel .icfg-kv { font-size: 13px; color: var(--icfg-text-secondary); }
.icfg-panel .icfg-kv b { color: #FFFFFF; font-weight: 600; }
.icfg-panel .icfg-summary-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.icfg-panel .icfg-btn-sm { padding: 5px 12px; font-size: 12px; line-height: 20px; }

/* Section grouping (Connection, Response caching, Processing behaviour). Kept at heading level h3 so
   they nest under the card's h2, and sized to the page's type scale rather than the prototype's small
   caps (bug 206424 items 11/12). */
.icfg-panel .icfg-section-label { font-size: 20px; font-weight: 700; color: #FFFFFF; margin: 8px 0 12px; }

/* Chevron toggle in the card head. */
.icfg-panel .icfg-chev-button { background: none; border: none; color: var(--icfg-text-tertiary); cursor: pointer; padding: 4px; border-radius: 4px; line-height: 1; }
.icfg-panel .icfg-chev-button:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.04); }
.icfg-panel .icfg-chev { transition: transform 0.15s; }
.icfg-panel .icfg-chev.open { transform: rotate(180deg); }

/* Enable / disable radio cards, for whether the ICAP server runs at all. Same shape as the File
   reputation panel's pair, so the two Protection settings surfaces read as one product. */
.icfg-panel .icfg-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icfg-panel .icfg-radio-card { position: relative; border: 1px solid var(--icfg-border); border-radius: 10px; padding: 20px 20px 22px; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.icfg-panel .icfg-radio-card:hover { border-color: var(--icfg-border-strong); }
.icfg-panel .icfg-radio-card:focus-visible { outline: 2px solid var(--icfg-primary); outline-offset: 2px; }
.icfg-panel .icfg-radio-card.selected { border-color: var(--icfg-primary); background: rgba(67, 194, 218, 0.05); }
.icfg-panel .icfg-radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--icfg-text-tertiary); margin: 0 auto 12px; display: block; transition: border-color 0.15s, box-shadow 0.15s; }
.icfg-panel .icfg-radio-card.selected .icfg-radio-dot { border-color: var(--icfg-success); box-shadow: inset 0 0 0 3px var(--icfg-success); }
.icfg-panel .icfg-radio-card h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.icfg-panel .icfg-rc-body { font-size: 13px; color: var(--icfg-text-secondary); }
/* Inert: the installation does not offer the choice, an autoscaler owns the replica count, or the
   first read has not answered. Dimmed and unclickable, and out of the tab order, which is why the
   reason sits below the pair as ordinary text rather than only on the cards. */
.icfg-panel .icfg-radio-cards.inert .icfg-radio-card { cursor: not-allowed; opacity: 0.5; }
.icfg-panel .icfg-radio-cards.inert .icfg-radio-card:hover { border-color: var(--icfg-border); }
/* The pair and the messages under it, above everything the ICAP server's settings configure. */
.icfg-panel .icfg-server-state { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

/* Switches, for the mTLS and response-caching controls. */
.icfg-panel .icfg-switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; }
.icfg-panel .icfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.icfg-panel .icfg-switch-track { display: block; width: 44px; height: 24px; background: var(--icfg-bg-input); border: 1px solid var(--icfg-border-strong); border-radius: 999px; transition: 0.15s; }
.icfg-panel .icfg-switch-knob { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background: var(--icfg-text-secondary); border-radius: 50%; transition: 0.15s; }
.icfg-panel .icfg-switch input:checked + .icfg-switch-track { background: rgba(67, 194, 218, 0.12); border-color: var(--icfg-primary); }
.icfg-panel .icfg-switch input:checked + .icfg-switch-track .icfg-switch-knob { transform: translateX(20px); background: var(--icfg-primary); }
.icfg-panel .icfg-switch input:disabled + .icfg-switch-track { opacity: 0.5; cursor: not-allowed; }
/* The real checkbox is 0x0 and transparent, so a browser's own focus ring lands on nothing. The track
   carries it instead. */
.icfg-panel .icfg-switch input:focus-visible + .icfg-switch-track { outline: 2px solid var(--icfg-primary); outline-offset: 2px; }
.icfg-panel .icfg-toggle-row { display: flex; align-items: end; gap: 104px; }
.icfg-panel .icfg-toggle-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--clr-primary-95); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The line under a toggle title reads as a subtitle, matching the "Current ICAP settings" sub (bug 206424 item 12). */
.icfg-panel .icfg-toggle-row .icfg-form-hint { font-size: 13px; }

/* Deploy-time values: shown as fields that cannot be typed into, with the tag the mockup uses. */
/* Not text-muted: at 1.87:1 the badge that explains why a control cannot be edited was the least
   legible thing on the panel. */
.icfg-panel .icfg-tag-readonly { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--icfg-text-secondary); border: 1px solid var(--icfg-border); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.icfg-panel .icfg-form-input[readonly] { background: rgba(255, 255, 255, 0.03); border-color: var(--icfg-border-subtle); color: var(--icfg-text-secondary); cursor: default; }

/* Certificate status line. */
.icfg-panel .icfg-cert-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--icfg-bg-input); border: 1px solid var(--icfg-border); border-radius: 4px; padding: 10px 12px; }
.icfg-panel .icfg-cert-status { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.icfg-panel .icfg-cert-status.ok { color: var(--icfg-success); }
.icfg-panel .icfg-cert-status.missing { color: var(--icfg-warning); }
/* The disc is painted per state rather than from currentColor: in the background property currentColor
   resolves from this element's own color, which is the dark knocked-out glyph, so disc and glyph came
   out the same shade and the icon was invisible (1.00:1). Same fix as .icfg-warning-icon below. */
.icfg-panel .icfg-cert-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--icfg-bg-input); flex-shrink: 0; }
.icfg-panel .icfg-cert-status.ok .icfg-cert-icon { background: var(--icfg-success); }
.icfg-panel .icfg-cert-status.missing .icfg-cert-icon { background: var(--icfg-warning); }

/* Radzen-style duration field. */
.icfg-panel .icfg-timespan { position: relative; display: flex; }
.icfg-panel .icfg-timespan .icfg-form-input { width: 100%; padding-right: 34px; }
.icfg-panel .icfg-timespan-icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--icfg-text-tertiary); pointer-events: none; }

.icfg-panel .icfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px 24px; padding-top: 1rem; padding-bottom: 1rem; }
/* min-width: 0 so a long value cannot widen its column past the fields beside it. */
.icfg-panel .icfg-form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icfg-panel .icfg-form-group.col-span { grid-column: 1 / -1; }
/* Matches the page's body-2 / #recommended-settings-info text rather than a bespoke size (bug 206424 item 12). */
.icfg-panel .icfg-form-label { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--clr-primary-95); line-height: 160%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icfg-panel .icfg-form-input { padding: 10px 12px; background: var(--icfg-bg-input); border: 1px solid var(--icfg-border); border-radius: 4px; color: #FFFFFF; font-size: 14px; outline: none; font-family: inherit; width: 100%; min-width: 0; }
.icfg-panel .icfg-form-input.mono { font-family: var(--icfg-mono); }
.icfg-panel .icfg-form-input:focus { border-color: var(--icfg-primary); }
/* A read-only field is focusable so its value can be selected and copied, but the cyan of an editable
   field would say it can be typed into. A ring rather than a border tint: .icfg-form-input sets
   outline: none, so the indicator is whatever this rule draws, and a 20%-white border over the
   read-only field's own background lands near 1.9:1 — under the 3:1 WCAG 1.4.11 floor for a focus
   indicator. The 65% white of --icfg-text-secondary clears it and reads as neither editable nor error. */
.icfg-panel .icfg-form-input[readonly]:focus-visible { outline: 2px solid var(--icfg-text-secondary); outline-offset: 2px; }
.icfg-panel .icfg-form-input.error { border-color: var(--icfg-danger); }
.icfg-panel .icfg-form-input::placeholder { color: var(--icfg-text-muted); }
.icfg-panel .icfg-form-input:disabled { color: var(--icfg-text-secondary); cursor: not-allowed; }
.icfg-panel .icfg-form-hint { font-size: 12px; color: var(--icfg-text-tertiary); }
.icfg-panel .icfg-error-text { font-size: 12px; color: var(--icfg-danger); display: flex; align-items: center; gap: 6px; }
/* Why a control cannot be operated: the amber the panel already uses for an inactive state, not the red
   of a failure. Nothing has gone wrong — the installation does not offer the choice — but an
   administrator looking for a control that is not there needs to find the reason, and grey body text is
   what they read past. The glyph carries it too, so the warning does not rest on colour alone
   (WCAG 1.4.1). */
.icfg-panel .icfg-warning-text { font-size: 12px; color: var(--icfg-warning); display: flex; align-items: center; gap: 6px; }
/* Named colours, not currentColor: in the background property it resolves from this element's own
   color, which is the dark knocked-out glyph — so the disc and the glyph painted the same dark shade
   and the "!" was invisible. .icfg-cert-icon above had the same bug and is fixed the same way. */
.icfg-panel .icfg-warning-icon { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; background: var(--icfg-warning); color: var(--icfg-bg-input); flex-shrink: 0; }

/* Save-outcome banner, shown under the section title where the values it applied to are. */
.icfg-banner { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--icfg-border); }
/* The banner icons are real <i> icons (bug 206424 item 15), normalised to the tooltip icon's ~16px so
   the info and alert glyphs render at one size. */
.icfg-banner i { width: 16px; height: 16px; flex-shrink: 0; }
.icfg-banner-ok { border-color: var(--icfg-success); color: var(--icfg-success); background: rgba(52, 211, 153, 0.06); }
.icfg-banner-error { border-color: var(--icfg-danger); color: var(--icfg-danger); background: rgba(248, 113, 113, 0.06); }
.icfg-banner-info { border-color: var(--icfg-primary); color: var(--icfg-primary); background: rgba(67, 194, 218, 0.06); }

/* The profile-to-policy settings below the configuration, while the appliance is unconfigured. Visible
   and inactive rather than hidden, with the reason stated in the card head. */
.icap-section-blocked { opacity: 0.55; }
.icap-section-blocked .icap-section-blocked-body { pointer-events: none; }
/* Clearing the cache is an operational action rather than one of these settings, so it stays available
   while they are inactive. It sits inside the blocked body, which would otherwise leave it working for
   a keyboard and dead for a mouse. */
.icap-section-blocked .icap-section-blocked-body #clear-cache-button { pointer-events: auto; }

/* Head of the current-settings card: title, reason and the active/inactive badge. */
.icap-current-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 4px; }
.icap-current-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.icap-current-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.icap-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.icap-status-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.icap-status-active { background: rgba(52, 211, 153, 0.12); color: #34D399; }
.icap-status-inactive { background: rgba(251, 191, 36, 0.12); color: #FBBF24; }
.icap-locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 24px; color: rgba(255, 255, 255, 0.4); font-size: 13px; }
.icap-locked h3 { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.65); margin: 0; }
.icap-locked p { font-size: 13px; max-width: 420px; margin: 0; }

/* Test connection, at the foot of the open form and beside Edit configuration on the summary. */
.icfg-test-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; margin-bottom: 8px; }
.icfg-test-result { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.icfg-test-icon { font-weight: 700; }
.icfg-test-ok { color: var(--icfg-success); }
.icfg-test-fail { color: var(--icfg-danger); }

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