/* automation.css
 *
 * Automation Rules editor/table, Webhook Test Inbox, Scheduled Reports,
 * and Key Signal Thresholds styles, extracted from styles.css as part of
 * Stages 1, 4c, and 7b of the frontend modularization plan
 * (docs/planning/frontend-modularization-and-csp-hardening-plan.md).
 *
 * Scope matches js/modules/automation/{rules,webhooks,scheduled-reports,
 * key-signal-thresholds}.js exactly: rule CRUD, the rule editor wizard,
 * the rules table, the Webhook Test Inbox, the Scheduled Reports
 * list/wizard/run-history/PDF-preview, and the Key Signal Thresholds
 * list + wizard. It does NOT include the Admin tab's outbound-webhook
 * endpoint modal (a Stage 5 concern). The KST wizard reuses several base
 * classes here (.rule-editor-body, .rule-editor-form) by design; its own
 * #kst-wizard-modal-scoped overrides and `.kst-*`/`.dim-cell`/`.gate-pill`
 * selectors landed in this file too (Stage 7b), grouped in their own
 * section below rather than interleaved with Stage 1's rules. Generic
 * shared primitives Scheduled Reports also uses -- the .picker-* and
 * .wizard-chip* classes (also used by the Software Update Campaign
 * wizard and the Rule Editor's target picker), .summary-card,
 * .review-label, .review-value, and .seg -- stay in styles.css/core.css
 * rather than moving here, since they aren't Automation-tab-specific.
 * .review-row and .notify-callout* (the review-step container and its
 * warning/ok callout, as opposed to the plain label/value styling above)
 * are Automation-tab-specific -- both Rules' and Scheduled Reports' review
 * steps use them -- so they stay in this file (were already here from
 * Stage 1, not moved by Stage 4c).
 *
 * Load order: linked in index.html after core.css, before styles.css.
 */

/* Let Rules use page/subview scrolling rather than a nested table scrollbar. */
#automation-rules-view .metrics-table-container {
    max-height: none;
    overflow-y: visible;
}

/* Automation Rule editor: Rule Definition -> Actions -> Review, the same
   3-step wizard pattern as the report-schedule and campaign wizards.
   Separate class from .rpt-steps on purpose, matching the established
   per-feature convention (each wizard owns its own step-header classes). */
.rule-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.rule-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.rule-step-circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rule-step-connector {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.rule-step.active {
    color: var(--primary-color);
}

.rule-step.active .rule-step-circle {
    background: var(--primary-color);
}

.rule-step.done {
    color: var(--success-color);
}

.rule-step.done .rule-step-circle {
    background: var(--success-color);
}

.review-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.review-row:last-of-type {
    border-bottom: none;
}

.notify-callout {
    border-radius: 9px;
    padding: 0.75rem 0.9rem;
    margin-top: 1rem;
    font-size: 0.84rem;
}

.notify-callout.ok {
    background: color-mix(in srgb, var(--success-color) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, var(--white));
}

.notify-callout.warn {
    background: color-mix(in srgb, var(--warning-color) 12%, var(--white));
    border: 1px solid color-mix(in srgb, var(--warning-color) 45%, var(--white));
}

.notify-callout .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.notify-callout.ok .label {
    color: color-mix(in srgb, var(--success-color) 60%, var(--black));
}

.notify-callout.warn .label {
    color: color-mix(in srgb, var(--warning-color) 55%, var(--black));
}

.rule-editor-body {
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-right: -0.2rem;
    flex: 1;
    min-height: 0;
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

.rule-editor-actions {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.55rem;
    column-gap: 0.75rem;
}

.rule-editor-action-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.rule-enabled-footer {
    margin-right: 0.5rem;
}

.rule-enabled-footer label {
    font-weight: 600;
    color: var(--text-primary);
}

.rule-editor-message {
    width: 100%;
    order: -1;
}

.rule-editor-pane-hint {
    margin: 0 0 0.4rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}

/* Escalation folds into the Actions step as a contextual block — eligible
   only when the rule reduces to a single Active-alarm condition — instead
   of staying a separate tab that's disabled most of the time. */
.escalation-block {
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    padding: 0.9rem 1rem;
    margin-top: 1.1rem;
}

.escalation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.escalation-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.escalation-disabled-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* The escalation-enabled checkbox label is a direct child of its form-group
   too, but it's a checkbox label, not a field caption — keep it plain. */
#rule-escalation-row > label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rule-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rule-status-enabled {
    background: var(--success-bg);
    color: var(--success-text);
}

.rule-status-disabled {
    background: var(--cool-gray-8);
    color: var(--cool-gray-4);
}

.rule-escalation-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #ede9fe;
    color: #5b21b6;
    vertical-align: middle;
}

.rule-target-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--cool-gray-4);
    margin-right: 2px;
}

.rule-actions {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.rule-actions-cell {
    white-space: nowrap;
}

/* Rule editor pane form */
.rule-editor-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.rule-editor-form .form-group {
    margin-bottom: 0;
}

/* Field captions in this modal use the design's small uppercase caption
   treatment (matching .review-label/.notify-callout .label), not the
   app-wide bold label style — direct children only, so nested checkbox/role
   labels elsewhere in the modal are unaffected. */
.rule-editor-body .form-group > label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.35rem;
    display: block;
}

.rule-editor-body .form-group > label .form-optional {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Design's hint text (helper lines under Cooldown, Actions, Escalation)
   renders at 0.74rem, smaller than the app-wide .form-group small default
   of 0.875rem. Scoped to this modal. */
.rule-editor-body small {
    font-size: 0.74rem;
    line-height: 1.4;
}

/* All selects inside the rule editor match text input styling */
.rule-editor-form select {
    border-radius: 8px;
    background-color: var(--white);
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: auto;
}

.rule-editor-form select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Plain inputs/selects/picker-trigger/condition-row fields in this modal use
   the design's lighter control sizing (0.85rem/1px border) instead of the
   app-wide 1rem/2px default — matches the approved mockup, and the same
   lighter scale used throughout the report-schedule and campaign wizards. */
#rule-editor-modal input[type="text"],
#rule-editor-modal input[type="number"],
#rule-editor-modal input[type="url"],
#rule-editor-modal select,
#rule-editor-modal .picker-trigger,
#rule-editor-modal .rule-cond-logic,
#rule-editor-modal .rule-cond-metric,
#rule-editor-modal .rule-cond-op,
#rule-editor-modal .rule-cond-text-op,
#rule-editor-modal .rule-cond-val,
#rule-editor-modal .rule-cond-alarm-state {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-width: 1px;
}

/* Inline row: metric label + operator dropdown + threshold input */
.rule-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cool-gray-7);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* IFTTT action badge in rules table */
.rule-action-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 4px;
}

.rule-action-ifttt {
    background: #4f46e5;
    color: var(--white);
}

.rule-action-webhook {
    background: #0f766e;
    color: var(--white);
}

.rule-action-command {
    background: #b45309;
    color: var(--white);
}

.rule-action-slack {
    background: #4a154b;
    color: var(--white);
}

.rule-action-teams {
    background: #5059c9;
    color: var(--white);
}

.rule-trigger-actions-cell {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    min-width: 240px;
}

.rule-trigger-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rule-trigger-action-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
}

.rule-trigger-action-destination {
    word-break: break-word;
}

.rule-trigger-action-meta {
    color: var(--cool-gray-4);
    font-size: 0.72rem;
}

.rule-trigger-action-empty {
    color: var(--cool-gray-5);
}

.rule-editor-form .rule-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.3rem;
}

.rule-editor-form .rule-action-type-select {
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
}

.rule-editor-form .rule-action-webhook-input {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
}

.rule-editor-form .rule-action-ifttt-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 220px;
    min-width: 0;
}

.rule-editor-form .rule-action-ifttt-select {
    flex: 0 0 150px;
    width: 150px;
    min-width: 120px;
}

.rule-editor-form .rule-action-ifttt-input {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
}

.rule-editor-form .rule-action-command-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 230px;
    min-width: 0;
}

.rule-editor-form .rule-action-command-type-select {
    flex: 0 0 110px;
    width: 110px;
    min-width: 100px;
}

.rule-editor-form .rule-action-command-value-input {
    flex: 1 1 100px;
    width: auto;
    min-width: 0;
}

.rule-editor-form .rule-action-remove {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
}

.rule-editor-form .rule-action-remove:hover {
    color: var(--danger-color);
}

.rule-editor-form .rule-action-chat-status {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 0.875rem;
    padding: 4px 0;
}

/* Ghost buttons are meant to read as flat/outlined controls; the app-wide
   .btn box-shadow makes them look like they have a stray solid background
   floating under them. Scoped to the rule editor's small ghost buttons
   (+ Add Condition / + Add Action). */
.rule-editor-form .btn-ghost.btn-small {
    box-shadow: none;
    margin: 0.4rem 0 0.6rem;
    border-width: 1px;
}

/* Unified condition builder — no Simple/Advanced mode toggle. A rule is
   just a list of one or more conditions; a single condition looks exactly
   like what "Simple mode" used to be. Every row shares the same fixed-width
   column layout regardless of whether it's a sensor (operator + threshold)
   or an alarm (a static "is" label + Active/Inactive) — this is what keeps
   sensor and alarm rows visually aligned when they're mixed in one list. */
.rule-cond-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    flex-wrap: nowrap;
}

.rule-editor-form .rule-cond-row select {
    width: auto;
}

.rule-cond-logic {
    width: auto;
    flex: 0 0 60px;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

.rule-cond-metric {
    flex: 1;
    min-width: 0;
    max-width: 45%;
}

/* Operator column is a fixed 90px across every condition type (numeric select,
   text is/is-not select, alarm state select, and the plain alarm "is" label) so
   the metric field's leftover space — and therefore its rendered width — stays
   consistent row to row regardless of which condition type is showing. */
.rule-cond-op {
    flex: 0 0 90px;
    width: auto;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

.rule-cond-text-op {
    flex: 0 0 90px;
    width: auto;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

.rule-cond-is-label {
    flex: 0 0 90px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rule-cond-val {
    flex: 0 0 160px;
    min-width: 0;
    border-radius: 6px;
}

.rule-cond-alarm-state {
    flex: 0 0 90px;
    min-width: 0;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

.rule-cond-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
}

.rule-cond-remove:hover {
    color: var(--danger-color);
}

/* ── Webhook Test Inbox ─────────────────────────────────────────────────── */

.webhook-inbox-section {
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.webhook-inbox-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.webhook-inbox-header h3 {
    margin: 0;
}

.webhook-inbox-badge {
    background: var(--primary-color);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    line-height: 1.4;
}

.webhook-inbox-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.webhook-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
}

.webhook-url-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.webhook-test-url {
    flex: 1;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    word-break: break-all;
}

.webhook-entry {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.webhook-entry-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
}

.webhook-entry-body {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* ── Stage 1 hidden-convention support classes ──────────────────────────
 * Replace what used to be inline style="..." attributes (display:none
 * toggling now goes through the [hidden] attribute -- see core.css --
 * layout-only styling moves here). Grouped by the element(s) they came
 * from rather than alphabetically, to keep this section reviewable
 * against the markup it replaces. */

.webhook-inbox-description {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.rule-model-config-hint {
    margin-top: 0.35rem;
}

.rule-input-md {
    max-width: 140px;
}

.rule-input-sm {
    max-width: 80px;
}

.rule-escalation-row {
    margin-bottom: 0;
}

.rule-escalation-config {
    margin-top: 0.75rem;
    border-left: 3px solid var(--border-color);
    padding-left: 0.9rem;
}

.rule-esc-tier3-config {
    margin-top: 0.4rem;
}

.rule-esc-tier3-wrap {
    margin-top: 0.9rem;
}

.rule-esc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rule-esc-tier3-checkbox-label {
    font-size: 0.82rem;
}

.rule-esc-tier-heading-text {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rule-esc-tier-heading {
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}

.rule-esc-fire-after-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rule-esc-fire-after-label {
    font-size: 0.82rem;
    white-space: nowrap;
    margin: 0;
}

.rule-esc-minutes-label {
    font-size: 0.82rem;
}

.rule-esc-add-action-btn {
    margin-top: 0.3rem;
}

/* Keeps a removed condition row's AND/OR selector column aligned across
 * remaining rows -- the first row's logic selector must stay invisible
 * but still occupy its layout space, unlike [hidden] which removes an
 * element from layout entirely. Toggled via classList, not the hidden
 * attribute. */
.rule-cond-logic-hidden {
    visibility: hidden;
}

.rule-action-chat-warning {
    color: var(--warning-text, #92400e);
}

.rule-action-chat-select {
    width: 100%;
}

/* ── Scheduled Reports (Stage 4c) ─────────────────────────────────────── */

.schedule-chip-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.schedule-chip {
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-secondary);
    border-radius: 7px;
    padding: 0.4rem 0;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.schedule-chip:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.schedule-chip.active {
    border-color: var(--primary-color);
    background: rgba(0, 78, 154, 0.1);
    color: var(--primary-color);
}

.report-schedule-settings-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.report-schedule-settings-row label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

#report-schedule-runs-modal .modal-actions {
    margin-top: 0.75rem;
}

.report-schedule-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.report-schedule-filter-grid .form-group {
    margin-bottom: 0;
}

/* Report Type picker rows -- plain single-select buttons (unlike the Location/Device
   Type pickers' checkbox rows), styled after reports-subnav-btn so a locked row's pill
   badge (injected by initializeFeatureDesignationUi()) lands the same way it does in
   the Reports tab's sidebar. */
.report-schedule-type-row {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
}

.report-schedule-type-row:hover {
    background: var(--code-bg);
}

.report-schedule-type-row.selected {
    border-color: rgba(0, 78, 154, 0.25);
    background: rgba(0, 78, 154, 0.08);
    color: var(--primary-color);
}

.report-schedule-type-row[data-feature] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.report-schedule-filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    max-height: 130px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    background: var(--card-bg);
}

.report-schedule-filter-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0;
}

.report-schedule-contact-roles {
    max-height: none;
    overflow-y: visible;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    flex-wrap: nowrap;
    gap: 0.6rem;
}

.report-schedule-contact-roles label {
    white-space: nowrap;
}

.modal-box.modal-box-wide.modal-box-schedule-editor {
    width: min(750px, 96vw);
    max-width: none;
    max-height: min(820px, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* Plain inputs/selects/picker-triggers in this modal use the design's lighter
   control sizing (0.85rem/1px border), not the app-wide 1rem/2px default —
   otherwise every plain field (Name, Report Type, Location, Threshold
   Minutes, etc.) reads noticeably larger than the day/hour chips, Notify
   segmented buttons, and field captions, which were all copied verbatim from
   the same mockup at this smaller scale. Scoped to this modal only. */
.report-schedule-editor-body input[type="text"],
.report-schedule-editor-body input[type="number"],
.report-schedule-editor-body input[type="url"],
.report-schedule-editor-body select,
.report-schedule-editor-body .picker-trigger {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-width: 1px;
}

/* Field captions inside this modal use the design's small uppercase caption
   treatment (matching .review-label/.notify-callout .label below), not the
   app-wide bold label style — direct children only, so checkbox rows and
   inline role/contact labels elsewhere in the modal are unaffected. */
.report-schedule-editor-body .form-group > label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.35rem;
    display: block;
}

.report-schedule-editor-body .form-group > label .form-optional {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Design's ".hint" text (helper lines like "No roles selected..." and
   "Notifications include a deep link...") renders at 0.74rem, smaller than
   the app-wide .form-optional default of 0.8rem. Scoped to this modal. */
.report-schedule-editor-body .form-optional {
    font-size: 0.74rem;
    line-height: 1.4;
}

/* Report Schedule editor: Report Criteria -> Notification Settings -> Review,
   the same 3-step wizard pattern, kept as its own class per the same
   per-feature convention. */
.rpt-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.rpt-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.rpt-step-circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rpt-step-connector {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.rpt-step.active {
    color: var(--primary-color);
}

.rpt-step.active .rpt-step-circle {
    background: var(--primary-color);
}

.rpt-step.done {
    color: var(--success-color);
}

.rpt-step.done .rpt-step-circle {
    background: var(--success-color);
}

/* Hours of Day: single scrollable row of compact pills instead of a 6-col
   grid — fits more at a glance and scrolls for the rest, consistent with
   the campaign wizard's redesigned hour picker. */
.hour-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.3rem;
}

.hour-track {
    display: flex;
    gap: 0.375rem;
    width: max-content;
}

.hour-chip {
    flex: 0 0 auto;
    width: 55px;
    padding: 0.5rem 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--white);
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.hour-chip:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.hour-chip.active {
    border-color: var(--primary-color);
    background: rgba(0, 78, 154, 0.1);
    color: var(--primary-color);
}

.hour-scroll::-webkit-scrollbar {
    height: 5px;
}

.hour-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.report-schedule-editor-body {
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-right: -0.2rem;
    flex: 1;
    min-height: 0;
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

.report-schedule-tab-pane,
.rule-editor-tab-pane {
    /* Both shown/hidden via the [hidden] attribute --
       js/modules/automation/scheduled-reports.js (Stage 4c) and
       js/modules/automation/rules.js (Stage 1) respectively -- and both
       fall through to this empty rule's plain block default. */
}


.report-schedule-editor-body .form-row {
    gap: 0.75rem;
}

.report-schedule-editor-body .form-group {
    margin-bottom: 0.7rem;
}

#report-schedule-tab-notifications > .form-row,
#report-schedule-tab-notifications > div[id$="-row"] {
    margin-bottom: 0.7rem;
}

#report-schedule-tab-notifications label {
    margin-bottom: 0.35rem;
}

#report-schedule-tab-notifications .form-optional {
    line-height: 1.35;
}

#report-schedule-notification-recipients-row .form-row,
#report-schedule-notification-cooldown-row .form-row {
    align-items: flex-start;
}

#report-schedule-notification-recipients-row .form-group,
#report-schedule-notification-cooldown-row .form-group {
    margin-bottom: 0;
}

#report-schedule-notification-recipients-row .form-group small.form-optional {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    font-weight: 400;
}

.report-schedule-cooldown-help {
    margin-top: 1.55rem;
}

.report-schedule-editor-actions {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.55rem;
    column-gap: 0.75rem;
}

.report-schedule-editor-action-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.report-schedule-enabled-footer {
    margin-right: 0.5rem;
}

.report-schedule-enabled-footer label {
    font-weight: 600;
    color: var(--text-primary);
}

.modal-box-schedule-editor #report-schedule-message {
    margin: 0;
}

.report-schedule-editor-message {
    width: 100%;
    order: -1;
}

@media (max-width: 640px) {
    .modal-box-schedule-editor {
        width: 98vw;
        height: calc(100dvh - 0.75rem);
    }

    .report-schedule-editor-body .form-row {
        flex-direction: column;
        gap: 0;
    }

    .report-schedule-editor-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .report-schedule-editor-action-buttons {
        justify-content: flex-end;
    }
}

/* Stage 4c hidden-convention support / new utility classes */

.rpt-flex-1 {
    flex: 1;
}

.rpt-flex-2-4 {
    flex: 2.4;
}

.rpt-flex-0-190 {
    flex: 0 0 190px;
}

.rpt-max-180 {
    max-width: 180px;
}

.rpt-max-240 {
    max-width: 240px;
}

.rpt-max-220 {
    max-width: 220px;
}

.rpt-max-280 {
    max-width: 280px;
}

.rpt-mode-hint {
    margin-top: 0.35rem;
}

.rpt-text-sm-muted {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.rpt-table-message {
    text-align: center;
}

.rpt-table-message-muted {
    color: var(--text-secondary);
}

.rpt-table-message-danger {
    color: var(--danger-color);
}

.rpt-run-focused {
    background: rgba(17, 134, 255, 0.08);
}

.pdf-viewer-frame {
    width: 100%;
    flex: 1;
    min-height: 0;
    border: none;
}

/* Three classes (matching the element's actual class list) so this reliably beats
   .modal-box.modal-box-wide's 600px cap -- both rules have equal specificity otherwise,
   and dashboard.css's copy of that rule loads after this file, so it would silently win
   the cascade on load order alone despite being the less specific intent for this modal. */
.modal-box.modal-box-wide.modal-box-schedule-runs {
    max-width: 900px;
    width: min(96vw, 900px);
}

.modal-box.pdf-viewer-box {
    width: calc(100vw - 2rem);
    max-width: 1400px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-box.pdf-viewer-box .modal-header {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-box.pdf-viewer-box .modal-actions {
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
}

/* Key Signal Thresholds (Stage 7b) — genuinely static inline styles found
   during the extraction's style= sweep, moved here. The bulk of KST's own
   CSS (still in styles.css as of this pass) moves separately. */
.kst-wizard-title {
    margin-bottom: 0;
}

.kst-model-config-hint {
    margin-top: -0.9rem;
    margin-bottom: 1.35rem;
}

.kst-form-optional-inline {
    text-transform: none;
    letter-spacing: normal;
}

.kst-hysteresis-group {
    margin-bottom: 0.5rem;
}

.kst-hysteresis-input {
    max-width: 80px;
}

.kst-scope-highlight {
    color: var(--text-primary);
}

/* ── Key Signal Thresholds (Stage 7b) — moved from styles.css ──────────────
   .rule-editor-body/.rule-steps/etc. reused from Stage 1's Rule Editor CSS
   above; these are KST's own selectors. ── */

.dim-cell {
    color: var(--cool-gray-4);
    font-style: italic;
}

.gate-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: inherit;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--blue-green-8);
    color: var(--blue-green-3);
}

/* Key Signal Threshold wizard — section headings / bordered blocks / condition
   rows, matching docs/key-signal-threshold-modal-design.html exactly. */
.kst-modal-header {
    padding-bottom: 1rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-color);
}

/* .rule-editor-body carries its own padding-top (1.1rem), tuned for the
   Automation Rule editor where there's no .modal-header/border above it.
   Here that padding stacks on top of .rule-steps' own margin-bottom
   (1.25rem), producing a much bigger gap before the first field than the
   mockup's .modal-body (no padding-top at all — spacing comes solely from
   .ts-steps' margin-bottom). Zero it out, scoped to this modal. */
#kst-wizard-modal .rule-editor-body {
    padding-top: 0;
}

.kst-modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    max-width: 500px;
}

/* The rule editor's own caption treatment
   (.rule-editor-body .form-group > label — small-caps, 0.72rem) is specific
   to the Automation Rule editor's design and not what this wizard agreed to:
   normal-case, 0.88rem, weight 600, text-primary, matching the mockup's
   plain .form-group label exactly. Reusing .rule-editor-body/.rule-editor-form
   for layout/scroll/button chrome pulls that rule in by descendant selector,
   so it has to be overridden back here, scoped to this modal only. */
#kst-wizard-modal .rule-editor-body .form-group > label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* The mockup's vertical rhythm is plain block flow: adjacent margins collapse,
   so a single .form-group { margin-bottom: 1.35rem } (plus the occasional
   negative-margin nudge on a hint right under a row) produces the whole
   spacing scale. `.rule-editor-form`'s flex `gap` does NOT collapse with
   margins — gap and margin both apply and stack — so reusing it here at its
   original 14px on top of the mockup's own margins was compounding the two
   models into wider gaps than the design calls for. Set gap to 0 and let
   each block's own margin-bottom be the only source of vertical spacing
   (mirroring the mockup element-for-element), scoped to this modal only. */
#kst-wizard-modal .rule-editor-form {
    gap: 0;
}

#kst-wizard-modal .rule-editor-form .form-group {
    margin-bottom: 1.35rem;
}

/* Chrome/Safari tint autofilled text inputs with a light blue/yellow
   background by default (e.g. "Threshold Name" gets matched against a saved
   autofill value) — suppresses it so a filled-in field doesn't visually
   diverge from the design's plain-white inputs. Long transition delay is
   the standard trick to override the forced internal autofill style. */
#kst-wizard-modal input:-webkit-autofill,
#kst-wizard-modal input:-webkit-autofill:hover,
#kst-wizard-modal input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--white) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.kst-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue-green-3);
    margin-bottom: 0.6rem;
}

/* Hint/help text under a field — distinct from .form-optional's inline
   "(optional)" label marker, which this app already styles differently
   elsewhere and shouldn't be redefined globally. Matches the mockup's
   .form-hint exactly: lighter gray than body text, smaller, tighter
   line-height, no bottom margin of its own (when a hint sits inside a
   .form-group, the group's own margin-bottom provides the gap after it;
   the one hint that sits directly between sections outside any .form-group
   — Model Configuration's — gets margin-bottom set inline, same as the
   mockup does). */
.kst-form-hint {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--cool-gray-4);
    line-height: 1.45;
}

/* The inline "(optional)" marker inside a label — this app's global
   .form-optional (text-secondary/0.8rem) is used for other purposes
   elsewhere and shouldn't be redefined globally; scope the mockup's lighter
   cool-gray-4/0.78rem treatment to just this modal. */
#kst-wizard-modal .form-optional {
    color: var(--cool-gray-4);
    font-size: 0.78rem;
}

.kst-section-block {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.1rem 1.2rem 1.2rem;
    margin-bottom: 1.35rem;
    background: color-mix(in srgb, var(--cool-gray-9) 55%, var(--white));
}

.kst-section-block.gate-block {
    background: color-mix(in srgb, var(--blue-green-9) 70%, var(--white));
    border-color: color-mix(in srgb, var(--blue-green-4) 25%, var(--border-color));
}

.kst-section-block-intro {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
}

.kst-cond-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kst-cond-logic {
    flex: 0 0 60px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue-green-3);
    background: var(--blue-green-8);
    border-radius: 6px;
    padding: 0.5rem 0;
}

.kst-cond-logic.hidden-first {
    visibility: hidden;
}

.kst-cond-metric-fixed {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 2px dashed var(--border-color);
    border-radius: 7px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    background: var(--cool-gray-9);
}

.kst-cond-op,
.kst-cond-gate-op {
    flex: 0 0 90px;
    padding: 0.55rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    font-size: 0.88rem;
    background: var(--white);
    text-align: center;
    font-weight: 600;
}

.kst-cond-val,
.kst-cond-gate-val {
    flex: 0 0 140px;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    font-size: 0.88rem;
    background: var(--white);
}

.kst-cond-gate-metric {
    flex: 1.1;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    font-size: 0.88rem;
    background: var(--white);
}

.kst-cond-gate-val {
    flex: 1;
}

.kst-cond-gate-op {
    flex: 0 0 80px;
}

.kst-cond-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--cool-gray-4);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}

.kst-cond-remove:hover {
    color: var(--danger-color);
}

.kst-add-cond-btn {
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: 7px;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue-green-3);
    cursor: pointer;
    margin-top: 0.35rem;
}

.kst-summary-callout {
    border-radius: 9px;
    padding: 0.9rem 1rem;
    margin: 0.5rem 0 1.5rem;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--success-color) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, var(--white));
}

.kst-summary-callout .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: color-mix(in srgb, var(--success-color) 60%, var(--black));
}

.kst-summary-callout .body {
    color: var(--text-secondary);
    line-height: 1.55;
}

.kst-summary-callout .body strong {
    color: var(--text-primary);
}

.kst-summary-callout .scope-line {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--success-color) 25%, transparent);
    font-size: 0.78rem;
    color: var(--cool-gray-4);
}