/* Building blocks shared by the settings pages that turn a service on and off: the ICAP configuration
   panel and the Storage monitoring Settings tab. Global stylesheet, linked from index.html. The rules
   are scoped to a .settings-panel root, which also carries the tokens they read, so a page opts in by
   putting that class on its container. Page-specific layout stays in the page's own sheet. */

.settings-panel {
    --settings-primary: #43C2DA;
    --settings-bg-input: #020B15;
    --settings-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. */
    --settings-text-tertiary: rgba(255, 255, 255, 0.55);
    --settings-text-muted: rgba(255, 255, 255, 0.2);
    --settings-border: rgba(255, 255, 255, 0.12);
    --settings-border-strong: rgba(255, 255, 255, 0.2);
    --settings-border-subtle: rgba(255, 255, 255, 0.137);
    --settings-success: #34D399;
    --settings-warning: #FBBF24;
    --settings-danger: #F87171;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.17px;
}

/* Enable / disable radio cards, for whether a service runs at all. Same shape as the File reputation
   panel's pair, so the Protection settings surfaces read as one product. */
.settings-panel .settings-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-panel .settings-radio-card { position: relative; border: 1px solid var(--settings-border); border-radius: 10px; padding: 20px 20px 22px; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.settings-panel .settings-radio-card:hover { border-color: var(--settings-border-strong); }
.settings-panel .settings-radio-card:focus-visible { outline: 2px solid var(--settings-primary); outline-offset: 2px; }
.settings-panel .settings-radio-card.selected { border-color: var(--settings-primary); background: rgba(67, 194, 218, 0.05); }
.settings-panel .settings-radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--settings-text-tertiary); margin: 0 auto 12px; display: block; transition: border-color 0.15s, box-shadow 0.15s; }
.settings-panel .settings-radio-card.selected .settings-radio-dot { border-color: var(--settings-success); box-shadow: inset 0 0 0 3px var(--settings-success); }
.settings-panel .settings-radio-card h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.settings-panel .settings-rc-body { font-size: 13px; color: var(--settings-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. */
.settings-panel .settings-radio-cards.inert .settings-radio-card { cursor: not-allowed; opacity: 0.5; }
.settings-panel .settings-radio-cards.inert .settings-radio-card:hover { border-color: var(--settings-border); }
/* The pair and the messages under it. */
.settings-panel .settings-enable-state { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

.settings-panel .settings-error-text { font-size: 12px; color: var(--settings-danger); display: flex; align-items: center; gap: 6px; }
/* Why a control cannot be operated: amber 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). */
.settings-panel .settings-warning-text { font-size: 12px; color: var(--settings-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. */
.settings-panel .settings-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(--settings-warning); color: var(--settings-bg-input); flex-shrink: 0; }

/* Outcome banner: a save result, or why the page cannot be used as it stands. */
.settings-panel .settings-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(--settings-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. Pinned to the top, the icon sits above the first line
   of text, so it is pushed down to centre on that line (bug 207560). */
.settings-panel .settings-banner i { width: 16px; height: 16px; flex-shrink: 0; margin-top: calc((1lh - 16px) / 2); }
.settings-panel .settings-banner-ok { border-color: var(--settings-success); color: var(--settings-success); background: rgba(52, 211, 153, 0.06); }
.settings-panel .settings-banner-error { border-color: var(--settings-danger); color: var(--settings-danger); background: rgba(248, 113, 113, 0.06); }
.settings-panel .settings-banner-info { border-color: var(--settings-primary); color: var(--settings-primary); background: rgba(67, 194, 218, 0.06); }

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

/* Save outcome and progress modals: a centred card with a status mark, a title and a muted line, as the
   Storage monitoring prototype lays them out. The Modal component supplies the overlay and frame; open
   them with NoHeader so the card is the whole dialog. */
/* The dark theme pads every modal body (30-32px) and every <p> in it (24px below, 16px type), and gives
   a body holding a spinner a 30vh minimum. The card sets its own spacing, so those are switched off
   for a body that holds one. Specific enough to beat .new-styles .windowed-modal .windowed-modal-body. */
.windowed-modal .windowed-modal-body:has(.settings-modal) { padding: 0; gap: 0; min-height: 0; min-width: 0; display: block; }
.windowed-modal .windowed-modal-body .settings-modal p.settings-modal-title,
.windowed-modal .windowed-modal-body .settings-modal p.settings-modal-sub { padding-bottom: 0; line-height: 1.5; }
.windowed-modal .windowed-modal-body .settings-modal p.settings-modal-title { font-size: 15px; }
.windowed-modal .windowed-modal-body .settings-modal p.settings-modal-sub { font-size: 13px; }
.settings-modal { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 280px; padding: 32px 40px; text-align: center; }
.settings-modal-title { font-size: 15px; font-weight: 600; color: #FFFFFF; margin: 0; }
.settings-modal-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin: 0; }
.settings-modal-mark { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.settings-modal-mark img { width: 22px; height: 22px; }
.settings-modal-mark.success { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); }
.settings-modal-mark.error { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4); }
.settings-modal .button-group { margin-top: 8px; }
/* The portal spinner defaults to 12rem; the prototype's is 40px. */
.settings-modal-spinner { width: 40px; height: 40px; }
.settings-modal-spinner .spinner { --spinner-size: 40px; --spinner-thickness: 3px; }
.settings-modal-spinner img.loading-spinner { width: 40px; height: 40px; }