/* Configure Alert (#alert-config-modal), reimagined in the buoy modal's language (buoy_modal.css). Look only: what it
   shows and does is app.js's, unchanged. Every rule is scoped by #alert-config-modal, over the base rules in app.css,
   which stay as they were.

   - Look: the panels' glass (app.css --bc-glass-*) at the buoy modal's 18 px corners and shadow; a header ruled off
     as the farm card's (oxy_forecast.css .oxy-fc-head): a bell in a tinted icon chip, an Oxanium title over a quiet
     meta line (both in index.html's header markup), the close a quiet 28 px icon button.
   - The steps: a stepper in the group strip's dark trough. Each step has a node: a ring with its number while it is
     out of reach, the brand-blue disc (the player's play disc) on the step to do next, a tinted chip with a tick once
     done; a hairline joins them, blue past the steps done. The step showing in the form is the strip's pick.
   - The form: fields and menus as the Profile tab's (troughs, the pick in its menus); rules as reading tiles, each
     led by its number in an icon chip; the rule being written a tile of its own; the latest reading as a reading
     tile in small; ALL / ANY the group strip; severity as five tiles, each with a meter that fills to its level in
     its own colour (--sev, from app.js SEVERITIES); recipients as rows, each led by its channel in an icon chip.
   - Buttons: the next step forward the brand's blue (buoy_modal.css .blue-pill-button.alarms-add); the rest quiet
     troughs; Delete and an armed Cancel ("Sure?") red. */

/* ── The panel ─────────────────────────────────────────────────────────────────────────────────────────── */
#alert-config-modal > .modal-backdrop { background: rgba(2, 6, 14, 0.55); }
#alert-config-modal .modal-content.alert-config-content {
    width: 780px;
    max-width: calc(100vw - 32px);
    max-height: min(86vh, 780px);
    padding: 18px 20px 0;
    overflow: hidden;   /* the body scrolls, under the header and over the foot */
    border-radius: 18px;
    background: var(--bc-glass-bg);
    -webkit-backdrop-filter: var(--bc-glass-blur);
    backdrop-filter: var(--bc-glass-blur);
    border: var(--bc-glass-border);
    box-shadow: var(--bc-glass-edge), 0 18px 44px rgba(0, 8, 22, 0.55);
    color: #e2e8f0;
    font-family: Manrope, system-ui, sans-serif;
    animation: ac-panel-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes ac-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
/* Every control takes the panel's font (a button or input otherwise keeps the browser's). */
#alert-config-modal :where(button, input) { font-family: inherit; }

/* ── The header: the bell in its chip, the title over its meta line, the close ─────────────────────────── */
#alert-config-modal .modal-header {
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
#alert-config-modal .ac-head-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 14px;
}
#alert-config-modal .ac-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#alert-config-modal .modal-title {
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #f8fafc;
}
#alert-config-modal .ac-head-meta {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.72);
}
/* The close: the buoy modal's, a quiet 28 px square keeping its x. */
#alert-config-modal .bc-btn-group { flex: none; align-self: flex-start; margin: -2px -6px 0 0; background: none; border: 0; border-radius: 0; overflow: visible; }
#alert-config-modal .bc-btn-group__btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(226, 232, 240, 0.65);
    transition: background-color 0.15s ease, color 0.15s ease;
}
#alert-config-modal .bc-btn-group__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
#alert-config-modal .bc-btn-group__btn i { font-size: 13px; }
#alert-config-modal .bc-btn-group__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────────────────── */
/* None of app.css's global button (navy fill, 18 px padding, clipped), nor its blue pill (gradient, 25 px corners,
   text shadow): each is set out below. A hidden one stays hidden (the name's Next Step, until it has 3 letters). */
#alert-config-modal :where(button) { isolation: auto; overflow: visible; line-height: 1.2; text-shadow: none; }
#alert-config-modal button[hidden] { display: none; }
#alert-config-modal :where(button):focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }
#alert-config-modal button.blue-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: none;
    filter: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
/* The quiet ones: a trough, ringed brighter on hover (Edit, + Add another, Add, Cancel). */
#alert-config-modal button.blue-pill-button,
#alert-config-modal button.blue-pill-button:hover,
#alert-config-modal button.blue-pill-button:active {
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}
#alert-config-modal button.blue-pill-button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); color: #ffffff; }
#alert-config-modal button.blue-pill-button:active:not(:disabled) { background: rgba(2, 10, 24, 0.7); }
/* app.css greys Cancel out with a filter; it is a quiet trough here, as the rest. */
#alert-config-modal .ac-btn-cancel.blue-pill-button:not(.ac-armed),
#alert-config-modal .ac-btn-cancel.blue-pill-button:not(.ac-armed):hover { filter: none; }
/* The next step forward: the brand's blue (Next Step, Set alert severity level, Save rule, Create alert / Save
   changes; + Add rule while there is none). */
#alert-config-modal button.blue-pill-button:is(.ac-name-save, .ac-goto-severity-btn, .ac-rule-save, .ac-btn-save),
#alert-config-modal .ac-rules-stage:has(.ac-rules-empty) button.blue-pill-button.ac-add-rule-btn {
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.3);
    color: #ffffff;
}
#alert-config-modal button.blue-pill-button:is(.ac-name-save, .ac-goto-severity-btn, .ac-rule-save, .ac-btn-save):hover:not(:disabled),
#alert-config-modal .ac-rules-stage:has(.ac-rules-empty) button.blue-pill-button.ac-add-rule-btn:hover {
    background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 22px rgba(46, 142, 255, 0.4);
    color: #ffffff;
}
#alert-config-modal button.blue-pill-button:is(.ac-name-save, .ac-goto-severity-btn, .ac-rule-save, .ac-btn-save):active:not(:disabled) {
    background: radial-gradient(circle at 50% 0%, #4b9dff, #2380f0 60%, #1a62c2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(46, 142, 255, 0.3);
}
/* The ones that move on carry an arrow (Font Awesome's, as the rest of the panel's icons). */
#alert-config-modal :is(.ac-name-save, .ac-goto-severity-btn) .text::after {
    content: "\f061";
    margin-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}
/* Saving: the blue, held while the spinner turns. */
#alert-config-modal button.blue-pill-button.ac-btn-save:disabled { opacity: 0.8; cursor: progress; }
/* Delete (the rule being edited): red, quiet until hovered. */
#alert-config-modal button.blue-pill-button.ac-rule-delete,
#alert-config-modal button.blue-pill-button.ac-rule-delete:active { background: transparent; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35); color: #fca5a5; }
#alert-config-modal button.blue-pill-button.ac-rule-delete:hover { background: rgba(239, 68, 68, 0.14); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.6); color: #fecaca; }
/* Cancel armed ("Sure?"): the same red, a second click discards. */
#alert-config-modal button.blue-pill-button.ac-btn-cancel.ac-armed,
#alert-config-modal button.blue-pill-button.ac-btn-cancel.ac-armed:hover {
    background: rgba(239, 68, 68, 0.18);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
    color: #fecaca;
    filter: none;
}
#alert-config-modal button.ac-disabled-while-saving { opacity: 0.4; cursor: not-allowed; }

/* ── The body: the steps at the left, the form beside them ─────────────────────────────────────────────── */
#alert-config-modal .alert-config-body {
    gap: 20px;
    min-height: 330px;   /* room for every step, and for a menu to open under the first fields */
    margin-right: -8px;
    padding: 0 8px 18px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
#alert-config-modal .alert-config-body::-webkit-scrollbar { width: 4px; }
#alert-config-modal .alert-config-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
#alert-config-modal .ac-form-col { gap: 16px; padding-top: 2px; }
#alert-config-modal .ac-stage { gap: 10px; }

/* ── The steps: a stepper in the group strip's trough ─────────────────────────────────────────────────── */
#alert-config-modal .ac-rail-mount { flex: 0 0 196px; min-width: 0; }
#alert-config-modal .ac-rail-list {
    gap: 0;
    padding: 6px;
    border-radius: 14px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    counter-reset: ac-step;
}
#alert-config-modal .ac-rail-step {
    --seg-in: rgba(148, 163, 184, 0.2);    /* the hairline into its node, from the step above */
    --seg-out: rgba(148, 163, 184, 0.2);   /* and out of it, to the step below */
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(var(--seg-in), var(--seg-in)) 21.25px 0 / 1.5px 6px no-repeat,
        linear-gradient(var(--seg-out), var(--seg-out)) 21.25px 38px / 1.5px calc(100% - 38px) no-repeat;
    counter-increment: ac-step;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#alert-config-modal .ac-rail-step:hover:not(.ac-rail-step--locked) { background-color: rgba(255, 255, 255, 0.05); }
/* Its node: a ring with the step's number while out of reach. */
#alert-config-modal .ac-rail-step::before {
    content: counter(ac-step);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
    color: rgba(148, 163, 184, 0.75);
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
/* The hairline from node to node (the step's background, above): blue past a step done; none above the first or
   below the last, and none through the pick, which the line meets at its edges. */
#alert-config-modal .ac-rail-step--done { --seg-out: rgba(96, 165, 250, 0.55); }
#alert-config-modal .ac-rail-step--done + .ac-rail-step { --seg-in: rgba(96, 165, 250, 0.55); }
#alert-config-modal .ac-rail-step:first-child { --seg-in: transparent; }
#alert-config-modal .ac-rail-step:last-child { --seg-out: transparent; }
#alert-config-modal .ac-rail-text { gap: 3px; padding-top: 1px; }
#alert-config-modal .ac-rail-label { font-size: 13px; font-weight: 700; line-height: 1.25; color: #f8fafc; }
#alert-config-modal .ac-rail-status { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: rgba(203, 213, 225, 0.72); }
/* Done: a tick in the tinted chip. */
#alert-config-modal .ac-rail-step--done::before {
    content: "\f00c";
    background: rgba(46, 142, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
    color: #60a5fa;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
}
#alert-config-modal .ac-rail-step--done .ac-rail-status { color: rgba(203, 213, 225, 0.72); }
/* Next to do: the brand-blue disc, its call in the brand's light blue. */
#alert-config-modal .ac-rail-step--active { border: 0; }
#alert-config-modal .ac-rail-step--active::before {
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(46, 142, 255, 0.45);
    color: #ffffff;
}
#alert-config-modal .ac-rail-step--active .ac-rail-status { color: #93c5fd; }
/* Out of reach: dim, its status (a dash) left out. */
#alert-config-modal .ac-rail-step--locked { opacity: 1; cursor: default; }
#alert-config-modal .ac-rail-step--locked .ac-rail-label { color: rgba(226, 232, 240, 0.45); }
#alert-config-modal .ac-rail-step--locked .ac-rail-status { visibility: hidden; }
/* The step showing in the form: the strip's pick. */
#alert-config-modal .alert-config-body:has(> .ac-form-col > [data-stage="name"]) .ac-rail-step[data-rail-target="name"],
#alert-config-modal .alert-config-body:has(> .ac-form-col > [data-stage="rules"]) .ac-rail-step[data-rail-target="rules"],
#alert-config-modal .alert-config-body:has(> .ac-form-col > [data-stage="severity"]) .ac-rail-step[data-rail-target="severity"],
#alert-config-modal .alert-config-body:has(> .ac-form-col > [data-stage="notifications"]) .ac-rail-step[data-rail-target="notifications"] {
    background: rgba(46, 142, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
}

/* ── Section titles and copy ──────────────────────────────────────────────────────────────────────────── */
#alert-config-modal .ac-rules-header-title,
#alert-config-modal .ac-sev-hint-title,
#alert-config-modal .ac-stage[data-stage="notifications"] > .ac-stage-label {
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
    text-transform: none;
    color: #f8fafc;
}

/* ── Fields: the Profile tab's troughs, one height ────────────────────────────────────────────────────── */
#alert-config-modal .ac-input,
#alert-config-modal .bc-select__trigger,
#alert-config-modal .ac-sp-trigger {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
#alert-config-modal .ac-input::placeholder { color: rgba(203, 213, 225, 0.45); font-weight: 500; }
#alert-config-modal .ac-input:hover:not([readonly]),
#alert-config-modal .bc-select__trigger:hover,
#alert-config-modal .ac-sp-trigger:hover { background: rgba(2, 10, 24, 0.5); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); color: #ffffff; }
#alert-config-modal .ac-input:focus,
#alert-config-modal .bc-select.bc-select--open .bc-select__trigger,
#alert-config-modal .ac-sp--open .ac-sp-trigger { outline: none; background: rgba(2, 10, 24, 0.6); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); }
#alert-config-modal .bc-select__trigger:focus-visible,
#alert-config-modal .ac-sp-trigger:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }
/* Invalid: red. */
#alert-config-modal .ac-input.ac-input--error,
#alert-config-modal .ac-input.ac-input-invalid { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.65); }
/* Read-only (the name once set): flat, no ring. */
#alert-config-modal .ac-input[readonly] { background: rgba(2, 10, 24, 0.3); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08); color: rgba(226, 232, 240, 0.75); cursor: default; }
/* Numbers are typed: no spinner. */
#alert-config-modal .ac-input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
#alert-config-modal .ac-input[type="number"]::-webkit-inner-spin-button,
#alert-config-modal .ac-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* A select's parts: its icon blue, its chevron slate (blue while open, turning); a placeholder quieter. */
#alert-config-modal .bc-select__trigger { gap: 9px; }
#alert-config-modal .bc-select__icon { color: #60a5fa; font-size: 13px; }
#alert-config-modal .bc-select__value--placeholder { color: rgba(203, 213, 225, 0.55); font-style: normal; font-weight: 600; }
#alert-config-modal .bc-select__chevron,
#alert-config-modal .ac-sp-chevron { margin-left: 2px; color: rgba(148, 163, 184, 0.8); font-size: 10px; transition: transform 0.15s ease, color 0.15s ease; }
#alert-config-modal .bc-select--open .bc-select__chevron,
#alert-config-modal .ac-sp--open .ac-sp-chevron { color: #60a5fa; }
#alert-config-modal .ac-sp--open .ac-sp-chevron { transform: rotate(180deg); }
/* Locked (a second rule's buoy, rule 1's): flat, its chevron a padlock. */
#alert-config-modal .bc-select[data-disabled="true"] { opacity: 1; }
#alert-config-modal .bc-select[data-disabled="true"] .bc-select__trigger,
#alert-config-modal .bc-select[data-disabled="true"] .bc-select__trigger:hover { background: rgba(2, 10, 24, 0.3); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08); color: rgba(226, 232, 240, 0.7); }
#alert-config-modal .bc-select[data-disabled="true"] .bc-select__icon { color: rgba(96, 165, 250, 0.6); }
#alert-config-modal .bc-select[data-disabled="true"] .bc-select__chevron::before { content: "\f023"; }
#alert-config-modal .bc-select[data-disabled="true"] .bc-select__chevron { font-size: 10px; color: rgba(148, 163, 184, 0.6); }
/* The sensor's trigger: "Group · Sensor", the group quieter. */
#alert-config-modal .ac-sp-trigger { justify-content: space-between; gap: 9px; }
/* The value clips to an ellipsis; a line-height over 1 keeps its descenders (the y of Oxygen) whole. */
#alert-config-modal .bc-select__value,
#alert-config-modal .ac-sp-crumb { line-height: 1.35; }
#alert-config-modal .ac-sp-crumb { gap: 7px; }
#alert-config-modal .ac-sp-crumb-group { color: rgba(203, 213, 225, 0.62); font-weight: 600; }
#alert-config-modal .ac-sp-crumb-sep { color: rgba(148, 163, 184, 0.5); }
#alert-config-modal .ac-sp-crumb-sensor { color: #f8fafc; font-weight: 700; }
#alert-config-modal .ac-sp-crumb-placeholder { color: rgba(203, 213, 225, 0.55); }

/* The menus: the Profile tab's list (the modal's navy, ringed), the choice the strip's pick. */
#alert-config-modal .bc-select__panel,
#alert-config-modal .ac-sp-panel {
    min-width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #08182f;   /* the Profile tab's list (rgba(8, 24, 48, 0.97)) made solid: it lies over text */
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 14px 34px rgba(0, 8, 22, 0.6);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
#alert-config-modal .ac-sp-panel { min-width: 260px; max-height: 236px; }
#alert-config-modal .bc-select__option,
#alert-config-modal .ac-sp-item {
    gap: 9px;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
#alert-config-modal .bc-select__option:hover,
#alert-config-modal .bc-select__option.bc-select__option--highlight,
#alert-config-modal .ac-sp-item:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
#alert-config-modal .bc-select__option--selected,
#alert-config-modal .bc-select__option--selected:hover,
#alert-config-modal .bc-select__option--selected.bc-select__option--highlight,
#alert-config-modal .ac-sp-item--selected,
#alert-config-modal .ac-sp-item--selected:hover { background: rgba(46, 142, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); color: #ffffff; }
#alert-config-modal .bc-select__option-icon { color: #60a5fa; font-size: 12px; }
#alert-config-modal .bc-select__option-meta,
#alert-config-modal .ac-sp-item-meta { color: rgba(148, 163, 184, 0.85); font-size: 11px; font-weight: 600; }
/* A menu's group heads (Thresholds, Ranges, Change over time): small labels, a hairline between groups. */
#alert-config-modal .bc-select__group {
    padding: 9px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: none;
    color: rgba(148, 163, 184, 0.8);
}
#alert-config-modal .bc-select__group:first-child { padding-top: 5px; }
#alert-config-modal .bc-select__group:not(:first-child) { margin-top: 4px; border-top: 1px solid rgba(148, 163, 184, 0.12); }
/* The sensor menu: a group per row with its count (a pill) and a chevron on; inside one, "Groups" to go back. */
#alert-config-modal .ac-sp-group-name { font-weight: 600; }
#alert-config-modal .ac-sp-group-count {
    padding: 2px 7px 3px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.75);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
#alert-config-modal .ac-sp-group-arrow { color: rgba(148, 163, 184, 0.7); font-size: 10px; }
#alert-config-modal .ac-sp-item:hover .ac-sp-group-arrow { color: #60a5fa; }
#alert-config-modal button.ac-sp-back {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 26px;
    margin: 0 0 4px;
    padding: 0 8px;
    border-radius: 7px;
    background: transparent;
    color: #60a5fa;
    font-size: 11.5px;
    font-weight: 700;
}
#alert-config-modal button.ac-sp-back:hover { background: rgba(255, 255, 255, 0.06); color: #93c5fd; }

/* ── The name ─────────────────────────────────────────────────────────────────────────────────────────── */
#alert-config-modal .ac-name-row { flex-wrap: wrap; gap: 8px; }
#alert-config-modal .ac-name-row .ac-input { flex: 1 1 240px; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
#alert-config-modal .ac-name-row .blue-pill-button { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13px; }
/* "Name is required." (app.js adds it after the field): under it, on its own line. */
#alert-config-modal .ac-name-row .ac-name-error { flex: 1 0 100%; order: 3; margin: 0 !important; padding-left: 2px; font-size: 11.5px !important; font-weight: 600; }
#alert-config-modal .ac-name-hint { margin: 0; padding-left: 2px; font-size: 12px; font-weight: 600; color: rgba(203, 213, 225, 0.6); }
#alert-config-modal .ac-name-hint em { font-style: normal; color: rgba(226, 232, 240, 0.85); }

/* ── The rules ────────────────────────────────────────────────────────────────────────────────────────── */
#alert-config-modal .ac-rules-stage { gap: 8px; }
#alert-config-modal .ac-rules-header { gap: 12px; min-height: 34px; margin-bottom: 2px; }
/* None yet: a tile with faint signal rings from its corner (the buoy status tile's), and + Add rule under it. */
#alert-config-modal .ac-rules-empty {
    align-items: center;
    gap: 6px;
    padding: 28px 28px 26px;
    border-radius: 14px;
    background:
        repeating-radial-gradient(circle at 100% 0%, transparent 0 26px, rgba(96, 165, 250, 0.07) 26px 27px, transparent 27px 52px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
#alert-config-modal .ac-rules-empty-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22), 0 0 22px rgba(46, 142, 255, 0.18);
    color: #60a5fa;
    font-size: 18px;
}
#alert-config-modal .ac-rules-empty-title { font-family: Oxanium, Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; color: #f8fafc; }
#alert-config-modal .ac-rules-empty-sub { max-width: 380px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: rgba(203, 213, 225, 0.72); }
#alert-config-modal .ac-rules-stage:has(.ac-rules-empty) .ac-rules-header { order: 2; justify-content: center; margin: 6px 0 0; }
#alert-config-modal .ac-rules-stage:has(.ac-rules-empty) .ac-add-rule-btn { margin: 0; }
#alert-config-modal .ac-rules-stage:has(.ac-rules-empty) .ac-rules-empty { order: 1; }
#alert-config-modal .ac-add-rule-btn { color: #bfdbfe; }

/* A rule set: a reading tile, its number in an icon chip, the whole tile opening it (a pen at its right says so). */
#alert-config-modal .ac-rule {
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
#alert-config-modal .ac-rule--saved { gap: 0; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
#alert-config-modal .ac-rule--saved:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
#alert-config-modal .ac-rule-summary-text {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 44px 10px 10px;
    border-radius: 14px;
    overflow: visible;
    white-space: normal;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #e2e8f0;
}
#alert-config-modal .ac-rule-summary-text::after {
    content: "\f304";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: rgba(203, 213, 225, 0.4);
    transition: color 0.15s ease;
}
#alert-config-modal .ac-rule--saved:hover .ac-rule-summary-text::after { color: #ffffff; }
#alert-config-modal .ac-rule-summary-text:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; border-radius: 14px; }
#alert-config-modal .ac-rule-summary-link { text-decoration: none; }
#alert-config-modal .ac-rule-summary-text:hover .ac-rule-summary-link,
#alert-config-modal .ac-rule-summary-text:focus-visible .ac-rule-summary-link { color: #ffffff; }
#alert-config-modal .ac-rule-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

/* The rule being written: a tile of its own; its fields in rows; Delete and Save rule at its foot. */
#alert-config-modal .ac-rule.ac-rule--editing {
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}
#alert-config-modal .ac-row { gap: 8px; margin-bottom: 10px; }
#alert-config-modal .ac-bs-row { align-items: center; }
#alert-config-modal .ac-triple-row { grid-template-columns: auto 104px 1fr; gap: 8px; align-items: center; }
#alert-config-modal .ac-triple-row--wide-value { grid-template-columns: auto 176px 1fr; }
#alert-config-modal .ac-range-inputs { gap: 6px; }
#alert-config-modal .ac-duration { gap: 8px; }
/* The latest reading for what is picked: a reading tile in small, its icon in a chip, its value in Oxanium. */
#alert-config-modal .ac-tel-hint {
    flex-wrap: nowrap;
    gap: 12px;
    margin: 2px 0 0;
    padding: 8px 14px 8px 8px;
    border: 0;
    border-radius: 12px;
    background: rgba(46, 142, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
    color: #e2e8f0;
    filter: none;
}
#alert-config-modal .ac-tel-sensor { flex: 1 1 auto; min-width: 0; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; font-size: 12.5px; font-weight: 700; color: #f8fafc; }
#alert-config-modal .ac-tel-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 13px;
}
#alert-config-modal .ac-tel-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}
#alert-config-modal .ac-tel-k { margin: 0; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: rgba(203, 213, 225, 0.62); }
#alert-config-modal .ac-tel-meta {
    margin-left: 0;
    padding: 3px 9px 4px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
    color: #bfdbfe;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
#alert-config-modal .ac-rule-footer { align-items: center; gap: 8px; margin-top: 14px; }
/* Save rule is held hidden (app.js) until the rule is whole; with no Delete beside it the foot is empty, so it folds
   away rather than leave a gap at the tile's foot, and opens when Save rule shows. */
#alert-config-modal .ac-rule-footer:not(:has(.ac-rule-delete)):has(> .ac-rule-save[style*="hidden"]) { display: none; }
#alert-config-modal .ac-rule-footer .ac-rule-delete { margin-right: auto; }
/* "Finish the open rule first.": a red note. */
#alert-config-modal .ac-edit-guard-msg {
    margin-top: 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
}

/* ALL / ANY: the group strip, the pick sliding between them. */
#alert-config-modal #ac-trigger-cwp {
    --cwp-tab-h: 32px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
#alert-config-modal #ac-trigger-cwp .cwp__indicator {
    top: 4px;
    width: calc((100% - 8px) / 2);
    border: 0;
    border-radius: 8px;
    background: rgba(46, 142, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
}
#alert-config-modal #ac-trigger-cwp .cwp__tab--1:checked ~ .cwp__indicator { left: 4px; }
#alert-config-modal #ac-trigger-cwp .cwp__tab--2:checked ~ .cwp__indicator { left: calc(4px + (100% - 8px) / 2); }
#alert-config-modal #ac-trigger-cwp .cwp__label { font-size: 12px; font-weight: 600; opacity: 1; color: rgba(226, 232, 240, 0.62); transition: color 0.15s ease; }
#alert-config-modal #ac-trigger-cwp .cwp__label strong { font-weight: 800; letter-spacing: 0.3px; }
#alert-config-modal #ac-trigger-cwp .cwp__label:hover { color: #f8fafc; }
#alert-config-modal #ac-trigger-cwp .cwp__tab:checked + .cwp__label { color: #ffffff; text-shadow: none; }
#alert-config-modal #ac-trigger-cwp .cwp__tab:focus-visible + .cwp__label { outline: 2px solid #2e8eff; outline-offset: -2px; border-radius: 8px; }

/* "Finished adding rules?": a band in the brand's blue, Set alert severity level at its right. */
#alert-config-modal .ac-rules-advance {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: rgba(46, 142, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
    text-align: left;
}
#alert-config-modal .ac-rules-advance-text { font-size: 13px; font-weight: 600; color: #e2e8f0; }

/* ── Severity: five tiles, each with a meter filled to its level in its own colour ─────────────────────── */
#alert-config-modal .ac-sev-hint { gap: 12px; padding: 0; }
#alert-config-modal .ac-severity-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
#alert-config-modal .ac-sev-pill {
    --off: rgba(148, 163, 184, 0.22);
    --b1: var(--sev); --b2: var(--off); --b3: var(--off); --b4: var(--off); --b5: var(--off);
    position: relative;
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 16px 6px 12px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#alert-config-modal .ac-sev-pill[data-sev="monitoring"] { --b2: var(--sev); }
#alert-config-modal .ac-sev-pill[data-sev="warning"]    { --b2: var(--sev); --b3: var(--sev); }
#alert-config-modal .ac-sev-pill[data-sev="critical"]   { --b2: var(--sev); --b3: var(--sev); --b4: var(--sev); }
#alert-config-modal .ac-sev-pill[data-sev="severe"]     { --b2: var(--sev); --b3: var(--sev); --b4: var(--sev); --b5: var(--sev); }
/* The meter: five bars rising left to right, as many lit as the level is high. */
#alert-config-modal .ac-sev-pill::before {
    content: "";
    width: 30px;
    height: 18px;
    background:
        linear-gradient(var(--b1), var(--b1)) 0 100% / 4px 28% no-repeat,
        linear-gradient(var(--b2), var(--b2)) 6.5px 100% / 4px 46% no-repeat,
        linear-gradient(var(--b3), var(--b3)) 13px 100% / 4px 64% no-repeat,
        linear-gradient(var(--b4), var(--b4)) 19.5px 100% / 4px 82% no-repeat,
        linear-gradient(var(--b5), var(--b5)) 26px 100% / 4px 100% no-repeat;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sev) 45%, transparent));
}
#alert-config-modal .ac-sev-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: rgba(226, 232, 240, 0.8); transition: color 0.15s ease; }
#alert-config-modal .ac-sev-pill:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sev) 60%, transparent); }
#alert-config-modal .ac-sev-pill:hover .ac-sev-label { color: #ffffff; }
/* Picked: tinted and ringed in its colour, glowing, a tick in its corner. */
#alert-config-modal .ac-sev-pill.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sev) 24%, transparent), color-mix(in srgb, var(--sev) 10%, transparent));
    box-shadow: inset 0 0 0 1.5px var(--sev), 0 0 20px color-mix(in srgb, var(--sev) 30%, transparent);
}
#alert-config-modal .ac-sev-pill.active .ac-sev-label,
#alert-config-modal .ac-sev-pill[data-sev="severe"].active .ac-sev-label,
#alert-config-modal .ac-sev-pill[data-sev="severe"]:hover .ac-sev-label { color: #ffffff; }
#alert-config-modal .ac-sev-pill.active::after {
    content: "\f00c";
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sev);
    color: #ffffff;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8px;
    line-height: 1;
}
#alert-config-modal .ac-sev-hint-sub { max-width: none; font-size: 12px; font-weight: 600; line-height: 1.5; color: rgba(203, 213, 225, 0.6); }

/* ── Recipients: a row each, its channel in an icon chip, "You" on your own; a field to add one under them ─ */
#alert-config-modal .ac-notifications { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; }
#alert-config-modal .ac-notif-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px 6px 6px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
#alert-config-modal .ac-notif-pill > i {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 12px;
}
#alert-config-modal .ac-notif-pill.ac-pill-self::after {
    content: "You";
    order: 1;
    flex: none;
    margin-left: auto;
    padding: 3px 9px 4px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
    color: #bfdbfe;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}
/* Its remove: a quiet 28 px icon button (a plain span in app.js, so it carries its own cursor). */
#alert-config-modal .ac-notif-pill-x {
    order: 2;
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.55);
    font-size: 17px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#alert-config-modal .ac-pill-self .ac-notif-pill-x { margin-left: 0; }
#alert-config-modal .ac-notif-pill-x:hover { background: rgba(239, 68, 68, 0.16); color: #fecaca; }
#alert-config-modal .ac-add-recipient-row { gap: 8px; margin-top: 4px; }
#alert-config-modal .ac-add-recipient-row .ac-add-recipient-input,
#alert-config-modal .ac-add-recipient-row .ac-webhook-secret-input { height: 36px; font-size: 13px; }
#alert-config-modal .ac-add-recipient-row .blue-pill-button { height: 36px; padding: 0 16px; }
#alert-config-modal .ac-add-recipient-error { margin: 0; padding-left: 2px; font-size: 12px; font-weight: 600; color: #fca5a5; }

/* ── The foot: Cancel and the save, ruled off ─────────────────────────────────────────────────────────── */
#alert-config-modal .alert-config-footer { margin: 0 -20px; padding: 14px 20px 16px; border-top: 1px solid rgba(148, 163, 184, 0.14); background: rgba(2, 10, 24, 0.18); }
#alert-config-modal .ac-footer-actions { gap: 8px; }
#alert-config-modal .ac-footer-actions .blue-pill-button { height: 38px; padding: 0 18px; border-radius: 12px; font-size: 13px; }
#alert-config-modal .ac-footer-actions .ac-btn-cancel { min-width: 84px; }

/* ── A phone: the steps a strip across the top, numbered nodes over their names ───────────────────────── */
@media (max-width: 640px) {
    #alert-config-modal .modal-content.alert-config-content { padding: 14px 14px 0; max-height: 92vh; }
    #alert-config-modal .alert-config-footer { margin: 0 -14px; padding: 12px 14px 14px; }
    #alert-config-modal .ac-head-meta { display: none; }
    #alert-config-modal .alert-config-body { flex-direction: column; align-items: stretch; gap: 14px; }
    #alert-config-modal .ac-rail-mount { position: static; flex: none; }
    #alert-config-modal .ac-rail-list { flex-direction: row; }
    #alert-config-modal .ac-rail-step { flex: 1 1 0; grid-template-columns: 1fr; justify-items: center; row-gap: 5px; padding: 8px 4px; text-align: center; }
    #alert-config-modal .ac-rail-list .ac-rail-step { background-image: none; }   /* no hairlines across a strip */
    #alert-config-modal .ac-rail-text { align-items: center; max-width: 100%; }
    #alert-config-modal .ac-rail-label { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    #alert-config-modal .ac-rail-status { display: none; }
    #alert-config-modal .ac-severity-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #alert-config-modal .ac-rules-advance { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    #alert-config-modal .modal-content.alert-config-content { animation: none; }
    #alert-config-modal .ac-rail-step, #alert-config-modal button.blue-pill-button, #alert-config-modal .bc-btn-group__btn,
    #alert-config-modal .ac-input, #alert-config-modal .bc-select__trigger, #alert-config-modal .ac-sp-trigger,
    #alert-config-modal .bc-select__chevron, #alert-config-modal .ac-sp-chevron, #alert-config-modal .ac-rule--saved,
    #alert-config-modal .ac-rule-summary-text::after, #alert-config-modal #ac-trigger-cwp .cwp__label,
    #alert-config-modal #ac-trigger-cwp .cwp__indicator, #alert-config-modal .ac-sev-pill, #alert-config-modal .ac-sev-label,
    #alert-config-modal .ac-notif-pill-x { transition: none; }
}