/* Notification wizard refresh: collapsible Customize panels, denser rows, readable secondary text, a Save bar that
   stays in reach, a preview that fits a phone and a step list that reads as clickable while editing. To restore the
   previous look, drop this file's <link> in index.html and revert the markup in notification-wizard.tpl.html,
   steps/customize/customize.tpl.html, steps/display/display.tpl.html and steps/display/display-conversion.tpl.html. */

/* Collapsible panels: the title is the toggle, the hint says what is inside while it is closed */
.step-content .step-panel.collapsible-panel > .title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    border-radius: 5px 5px 0 0;
    transition: background-color 150ms ease-out;
}

.step-content .step-panel.collapsible-panel > .title:hover {
    background-color: #faf7ff;
}

.step-content .step-panel.collapsible-panel > .title:focus {
    outline: none;
}

.step-content .step-panel.collapsible-panel > .title:focus-visible {
    outline: 2px solid #7725f3;
    outline-offset: -2px;
}

.step-content .step-panel.collapsible-panel > .title::after {
    content: '';
    flex: none;
    align-self: center;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #9a8fb0;
    border-bottom: 2px solid #9a8fb0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 200ms ease-out;
}

.step-content .step-panel.collapsible-panel:not(.is-open) > .title::after {
    transform: rotate(-45deg);
}

.step-content .step-panel.collapsible-panel .panel-hint {
    font-size: 13px;
    font-weight: 400;
    color: #6b7180;
}

.step-content .step-panel.collapsible-panel.is-open .panel-hint {
    display: none;
}

.step-content .step-panel.collapsible-panel:not(.is-open) > .title {
    border-bottom: none;
    border-radius: 5px;
}

.step-content .step-panel.collapsible-panel:not(.is-open) > :not(.title) {
    display: none !important;
}

/* Denser rows: 30 settings read as one list, not as three screens of padding */
.step-content.customize-step .step-panel > .section,
.message-step .step-content .step-panel > .section {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Secondary text that was too light to read (#888, #8b8b8b, #adadad, #ccc on white) */
.step-content.customize-step > p,
.step-content.customize-step .step-panel > .section p.description,
.step-content.customize-step .grey-text,
.step-content.customize-step .right-text-helper {
    color: #6b7180;
}

.step-content.customize-step ps-toggle .toggle-state:not(.on),
.message-step ps-toggle .toggle-state:not(.on) {
    color: #737885;
}

/* Filter Rules include/exclude selects match the height of every other control */
.step-content.customize-step select.sb-toggle {
    height: 38px !important;
    padding: 0 8px;
    border: 1px solid #ced4da;
    color: #495057;
}

/* Title options are long; let the Message step dropdown fit them */
.message-step ps-selectbox .sb-container {
    width: 330px;
    max-width: 100%;
}

/* Save and Next stay in reach while the step scrolls */
.ps-body .ps-content .step-nav-buttons-container {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -1px 0 #e2e4e8, 0 -6px 14px rgba(32, 36, 48, 0.06);
}

/* On a phone the preview joins the page above the settings instead of running off the right edge and covering the
   buttons, and the stacked buttons stay where they were rather than pinning a tall bar over the form */
@media (max-width: 767px) {
    .notification-live-preview {
        position: static;
        max-width: calc(100vw - 32px);
        margin: 0 16px 16px;
    }

    .notification-live-preview ps-bubble {
        display: block;
        max-width: 100%;
    }

    .ps-body .ps-content .step-nav-buttons-container {
        position: static;
        box-shadow: none;
    }
}

/* Step list: when editing, every step can be opened, so the others read as links instead of 30% ghosts */
.steps.steps-clickable .steps-item:not(.steps-item-active) * {
    opacity: 1;
    color: #5f6573 !important;
}

.steps.steps-clickable .steps-item:not(.steps-item-active) .steps-link:before {
    background: #a7a2b3;
}

.steps.steps-clickable .steps-item:not(.steps-item-active):hover {
    background: #fbf8ff;
}

.steps.steps-clickable .steps-item:not(.steps-item-active):hover * {
    color: #7725f3 !important;
}

.steps.steps-clickable .steps-item:not(.steps-item-active):hover .steps-link:before {
    background: #8526f3;
}

/* When creating, later steps cannot be opened from the list, so they should not promise a click */
.steps:not(.steps-clickable) .steps-item:not(.steps-item-active) {
    cursor: default;
}