/***** Onboarding Screen CSS *****/

.spectra-onboarding-screen {
    background: var(--snow1-color);
    min-height: 100vh;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.onboarding-page {
    margin: 20px 0;
    gap: 20px;
}

.steps-sidebar {
    background: var(--white-color);
    border: 1px solid rgba(207, 216, 227, 0.7);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.04);
    padding: 22px 16px;
}

.heading-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-950);
    line-height: 1.4;
}

.steps-sidebar.collapsed {
    width: 72px;
}

.create-first-monitor {
    border-radius: 8px;
    background-color: var(--white-color);
    box-shadow: 0 3px 15px 0 rgba(254, 127, 45, 0.10);
    padding: 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.onboarding-container {
    width: 650px;
    height: 550px;
    margin: 0 auto;
    gap: 50px;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.or-divider hr {
    flex: 1;
    border-top: 1px solid var(--divider);
    margin: 0;
}

.or-divider .or-text {
    font-size: 14px;
    color: var(--secondary-color);
    padding: 0 8px;
}

/* inbox page css*/

.inbox-action-buttons {
    display: flex;
    width: min-content;
    justify-content: center;
    padding: 20px 40px;
    align-items: center;
    gap: 50px;
    border-top: 0.5px solid rgba(254, 127, 45, 0.20);
    border-bottom: 0.5px solid rgba(254, 127, 45, 0.20);
}

.inbox-action-buttons img {
    height: 90px;
}

/* choose plan */

.plan-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(254, 127, 45, 0.16);
}

.plan-radio {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-card.active .plan-radio::after {
    content: "\2713";
    color: var(--white-color);
    background: var(--primary-color);
    border-radius: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-title {
    font-weight: 700;
    color: var(--deep-navy-blue);
}

.plan-divider {
    border: 1px dashed var(--primary-color);
    opacity: 50%;
}

/***** personal-details-dashboard Page CSS *****/

.personal-details-page {
    --dashboard-header-height: 55px;
    --dashboard-footer-height: 55px;
    background: var(--light-grayish-blue);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.personal-details-shell {
    flex: 1;
    height: calc(100vh - var(--dashboard-header-height) - var(--dashboard-footer-height));
    min-height: 0;
    padding: 15px;
    display: flex;
    gap: 15px;
    overflow: hidden;
}

.onboarding-main-card {
    background: var(--white-color);
    border: 1px solid rgba(207, 216, 227, 0.7);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.04);
}

.onboarding-progress-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(207, 216, 227, 0.55);
}

.onboarding-progress-header p {
    font-size: 13px;
    color: var(--gray-color);
}

.onboarding-steps {
    margin-top: 14px;
}

.onboarding-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 24px;
}

.onboarding-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    left: 16px;
    width: 2px;
    height: calc(100% - 10px);
    background: var(--gray-color);
}

.onboarding-step.completed:not(:last-child)::after {
    background: var(--secondary-color);
}

.step-marker {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--gray-color);
    background: var(--white-color);
    color: var(--gray-color);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.onboarding-step.active .step-marker {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.step-marker.complete {
    font-size: 14px;
}

.step-copy {
    display: flex;
    flex-direction: column;
    padding-top: 3px;
}

.step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-color);
}

.step-subtitle {
    font-size: 12px;
    color: var(--gray-color);
}

.onboarding-step.active .step-title,
.onboarding-step.active .step-subtitle,
.onboarding-step.completed .step-title,
.onboarding-step.completed .step-subtitle {
    color: var(--secondary-color);
}

.onboarding-main-card {
    height: 100%;
    min-height: 0;
    padding: 30px;
    overflow-y: auto;
    overflow-x: hidden;
}

.personal-details-content {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.plans-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: space-between;
    height: -webkit-fill-available;
}

.required-mark {
    color: var(--bright-red);
}

.personal-details-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    min-height: var(--dashboard-footer-height);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(207, 216, 227, 0.8);
    padding: 10px 16px;
}

.monitor-select-dropdown {
    position: relative;
    width: 100%;
}

/* Website monitoring section panels */

.breadcrumb-links {
    font-size: 14px;
    font-weight: 400;
    color: var(--slate-400);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-links:hover {
    color: var(--slate-950);
}

.breadcrumb .semibold,
.breadcrumb-current {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-950);
}

/* Separator ">" between breadcrumb items (unclassed <p> or <span>) */
.breadcrumb > p:not(.semibold),
.breadcrumb > span:not(.semibold) {
    font-size: 11px;
    font-weight: 400;
    color: var(--slate-400);
    margin: 0;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.wm-panel {
    border: 1px solid var(--pale-blue);
    border-radius: 3px;
    background: var(--white-color);
    overflow: visible;
}

.wm-panel__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bs-border-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.wm-panel__title {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin: 0;
}

.wm-connectivity-results__title {
    font-size: 13px;
    color: var(--secondary-color);
}

.wm-connectivity-results__time {
    font-size: 12px;
    color: rgba(138, 138, 138, 0.9);
    white-space: nowrap;
}

.wm-connectivity-results__subtitle {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(138, 138, 138, 0.9);
    margin-top: 12px;
}

.wm-connectivity-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wm-metric-card {
    width: 90px;
    min-height: 72px;
    border-radius: 8px;
    border: 1px solid rgba(207, 216, 227, 0.85);
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px;
    text-align: center;
}

.wm-metric-card__accent--avg {
    color: rgba(33, 188, 21, 0.95);
}

.wm-metric-card__accent--min {
    color: rgba(5, 44, 84, 0.95);
}

.wm-metric-card__accent--max {
    color: rgba(254, 127, 45, 0.95);
}

.wm-metric-card__accent--loss {
    color: rgba(5, 44, 84, 0.55);
}

.wm-metric-card__accent--up {
    color: rgba(33, 188, 21, 0.95);
}

.wm-metric-card__label {
    font-size: 11px;
    color: rgba(138, 138, 138, 0.9);
}

.wm-connectivity-region-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Port monitoring: Test Connection (scoped so ping page isn't affected) */
.page-port-monitoring #wmConnectivityPanel .wm-panel__title--eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(138, 138, 138, 0.9);
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-success-card {
    border: 1px solid rgba(33, 188, 21, 0.35);
    background: rgba(33, 188, 21, 0.06);
    border-radius: 10px;
    padding: 18px 18px 16px;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-success-card__top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(33, 188, 21, 0.95);
    flex: 0 0 auto;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-success-card__title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(5, 44, 84, 0.95);
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-success-card__sub {
    font-size: 13px;
    color: rgba(5, 44, 84, 0.72);
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-stat {
    border-radius: 8px;
    background: rgba(5, 44, 84, 0.04);
    padding: 12px 14px;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-stat__label {
    font-size: 12px;
    color: rgba(138, 138, 138, 0.9);
    margin-bottom: 4px;
}

.page-port-monitoring #wmConnectivityPanel .pm-conn-stat__value {
    font-size: 15px;
    font-weight: 700;
    color: rgba(5, 44, 84, 0.95);
}

.wm-region-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(207, 216, 227, 0.85);
    background: rgba(246, 246, 248, 0.35);
}

.wm-region-row--ok {
    border-color: rgba(33, 188, 21, 0.35);
    background: rgba(33, 188, 21, 0.06);
}

.wm-region-row__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wm-region-code {
    width: 26px;
    height: 22px;
    border-radius: 6px;
    background: var(--white-color);
    border: 1px solid rgba(207, 216, 227, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.wm-region-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wm-region-row__right {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.wm-region-meta {
    font-size: 12px;
    color: rgba(138, 138, 138, 0.9);
    white-space: nowrap;
}

.wm-region-latency {
    font-size: 12px;
    font-weight: 700;
    color: rgba(33, 188, 21, 0.95);
    white-space: nowrap;
}

.wm-region-latency--warn {
    color: rgba(254, 127, 45, 0.95);
}

.wm-region-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(207, 216, 227, 0.95);
}

.wm-region-row--ok .wm-region-status {
    background: rgba(33, 188, 21, 0.95);
}

.wm-region-checking {
    font-size: 12px;
    color: rgba(138, 138, 138, 0.9);
    white-space: nowrap;
}

.wm-connectivity-loading {
    pointer-events: none;
    opacity: 0.65;
    filter: grayscale(40%);
}

.primary-btn.wm-connectivity-loading {
    background: rgba(207, 216, 227, 0.95);
    border-color: rgba(207, 216, 227, 0.95);
    color: var(--white-color);
}

.wm-panel__body {
    padding: 16px 18px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.wm-panel .monitor-card-head-parent {
    border: 0;
    padding: 0;
}

/* Heartbeat monitoring: Setup card — values match Spectra Design/heartbeat_monitor.html
   .hb-url-section / .hb-url-* / .hb-method-* / .status-params / .sp-* */
.page-heartbeat-monitoring .hb-url-card {
    border-radius: 10px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0D2040 0%, #1E3A5F 100%);
    border: none;
    color: rgba(255, 255, 255, 0.92);
}

.page-heartbeat-monitoring .hb-url-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.page-heartbeat-monitoring .hb-url-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-heartbeat-monitoring .hb-url-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 7px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    font-family: 'SF Mono', Monaco, ui-monospace, Consolas, 'Courier New', monospace;
}

.page-heartbeat-monitoring .hb-url-input:focus-visible {
    outline: 2px solid rgba(254, 127, 45, 0.55);
    outline-offset: 2px;
}

/* Copy URL button — orange CTA matching reference's .hb-copy-btn (9×16 / 12px / 600) */
.page-heartbeat-monitoring .hb-url-card__row .tertiary-btn {
    padding: 9px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.page-heartbeat-monitoring .hb-url-card__help {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.page-heartbeat-monitoring .hb-url-card__help .semibold,
.page-heartbeat-monitoring .hb-url-card__help strong {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
}

.page-heartbeat-monitoring .hb-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

/* Method pills — small rounded badges matching reference's .hb-method-badge
   (3×10 padding / 10px / 600 / 100px radius / colored translucent palettes) */
.page-heartbeat-monitoring .hb-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
}

.page-heartbeat-monitoring .hb-method--get {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.15);
    color: #86EFAC;
}

.page-heartbeat-monitoring .hb-method--post {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.15);
    color: #93C5FD;
}

.page-heartbeat-monitoring .hb-method--head {
    border-color: rgba(168, 85, 247, 0.2);
    background: rgba(168, 85, 247, 0.15);
    color: #D8B4FE;
}

.page-heartbeat-monitoring .hb-method-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
}

.page-heartbeat-monitoring .hb-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 16px 0 12px;
}

/* OPTIONAL STATUS PARAMETERS — tighten the row gutter (Bootstrap .row.g-3 is 16px) */
.page-heartbeat-monitoring .hb-url-card .row.g-3 {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
    margin-top: 0 !important;
}

/* Status param cards — reference's .sp-card (10×12 / 8px radius / rgba bg) */
.page-heartbeat-monitoring .hb-param-card {
    height: 100%;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.page-heartbeat-monitoring .hb-param-title {
    font-family: 'SF Mono', Monaco, ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 3px;
}

.page-heartbeat-monitoring .hb-param-title--start {
    color: #93C5FD;
}

.page-heartbeat-monitoring .hb-param-title--complete {
    color: #86EFAC;
}

.page-heartbeat-monitoring .hb-param-title--fail {
    color: #FCA5A5;
}

.page-heartbeat-monitoring .hb-param-desc {
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
}

.page-heartbeat-monitoring .hb-schedule-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-heartbeat-monitoring .hb-toggle-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    background: #f8fbff;
    width: fit-content;
}

.page-heartbeat-monitoring .hb-toggle-tab {
    border: 0;
    background: transparent;
    color: #657c9d;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-heartbeat-monitoring .hb-toggle-tab.active {
    background: var(--secondary-color);
    color: var(--white-color);
}

.page-heartbeat-monitoring .hb-schedule-pane {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.page-heartbeat-monitoring .hb-schedule-pane.active {
    display: flex;
}

.page-heartbeat-monitoring .hb-toggle-tab:focus-visible,
.page-heartbeat-monitoring .hb-code-copy:focus-visible,
.page-heartbeat-monitoring .hb-alert-check:focus-visible {
    outline: 2px solid rgba(254, 127, 45, 0.55);
    outline-offset: 3px;
}

.page-heartbeat-monitoring .hb-schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Compact value + unit row — input ~100px, unit dropdown ~150px (not full width) */
.page-heartbeat-monitoring .hb-field-controls {
    display: grid;
    grid-template-columns: 100px 150px;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
}

.page-heartbeat-monitoring .hb-field-controls--single {
    grid-template-columns: 150px;
}

.page-heartbeat-monitoring .hb-schedule-note {
    border: 1px solid var(--pale-blue);
    border-radius: 10px;
    background: #f8fbff;
    padding: 12px 14px;
}

.page-heartbeat-monitoring .hb-cron-expression-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    border: 1px solid var(--pale-blue);
    border-radius: 12px;
    background: var(--white-color);
    padding: 11px 14px;
}

.page-heartbeat-monitoring .hb-cron-expression-input {
    min-width: 0;
    color: var(--secondary-color);
    font-weight: 600;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.page-heartbeat-monitoring .hb-cron-expression-input:focus {
    outline: none;
    box-shadow: none;
}

.page-heartbeat-monitoring .hb-cron-humanized {
    min-width: 180px;
    color: #58749f;
    text-align: right;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.page-heartbeat-monitoring .hb-cron-pill {
    border: 1px solid var(--pale-blue);
    border-radius: 999px;
    background: var(--white-color);
    color: #5f7395;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    line-height: 1.15;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-heartbeat-monitoring .hb-cron-pill.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.page-heartbeat-monitoring .hb-note-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 10px;
}

.page-heartbeat-monitoring .hb-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.page-heartbeat-monitoring .hb-timeline-step {
    text-align: center;
}

.page-heartbeat-monitoring .hb-timeline-bar {
    height: 5px;
    border-radius: 999px;
    margin-bottom: 6px;
}

/* Timeline step text — tighter than the default font-13/font-12 inline classes */
.page-heartbeat-monitoring .hb-timeline-step .font-13,
.page-heartbeat-monitoring .hb-timeline-step > div:nth-child(2) {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0F172A;
    line-height: 1.3;
}

.page-heartbeat-monitoring .hb-timeline-step .text-muted.font-12,
.page-heartbeat-monitoring .hb-timeline-step > div:nth-child(3) {
    font-size: 11px !important;
    color: #64748B !important;
    line-height: 1.4;
}

.page-heartbeat-monitoring .hb-timeline-bar--green {
    background: #aee9c3;
}

.page-heartbeat-monitoring .hb-timeline-bar--yellow {
    background: #f1d467;
}

.page-heartbeat-monitoring .hb-timeline-bar--red {
    background: #f7c6c7;
}

.page-heartbeat-monitoring .hb-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #b9e8c5;
    border-radius: 8px;
    background: #eefcf1;
    color: #126e3a;
    font-size: 12px;
}

.page-heartbeat-monitoring .hb-summary-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff1c7;
    color: #d29c1e;
    font-size: 10px;
    flex: 0 0 auto;
}

.page-heartbeat-monitoring .hb-code-tabs {
    border-bottom: 1px solid var(--pale-blue);
    gap: 28px;
    margin-bottom: 0;
}

.page-heartbeat-monitoring .hb-code-tabs .nav-link {
    padding: 0 0 10px;
    font-size: 12px;
    color: var(--text-label-color);
    border: 0;
    background: transparent;
    white-space: nowrap;
}

.page-heartbeat-monitoring .hb-code-tabs .nav-link.active {
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
}

.page-heartbeat-monitoring .hb-code-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #111b33;
    border: 1px solid rgba(12, 35, 64, 0.08);
}

.page-heartbeat-monitoring .hb-code-copy {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    min-width: 72px;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
}

.page-heartbeat-monitoring .hb-code-pane {
    display: none;
}

.page-heartbeat-monitoring .hb-code-pane.active {
    display: block;
}

.page-heartbeat-monitoring .hb-code-pane[hidden] {
    display: none !important;
}

.page-heartbeat-monitoring .hb-code-scroll {
    max-height: 240px;
    overflow: auto;
}

.page-heartbeat-monitoring .hb-code-block {
    margin: 0;
    padding: 14px 16px;
    color: var(--white-color);
    font-size: 12px;
    background: transparent;
    white-space: pre;
}

.page-heartbeat-monitoring .hb-code-block .code-comment {
    color: #60708e;
}

.page-heartbeat-monitoring .hb-code-block .code-line {
    color: #68f0a9;
}

.page-heartbeat-monitoring .hb-code-block .code-key {
    color: #f3d26f;
}

.page-heartbeat-monitoring .hb-alert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-heartbeat-monitoring .hb-alert-card {
    border: 1px solid #d9e3f1;
    border-radius: 14px;
    padding: 16px;
    background: #f9fbff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.page-heartbeat-monitoring .hb-alert-card.is-active {
    border-color: var(--secondary-color);
    background: var(--pale-blue-gray);
    box-shadow: inset 0 0 0 1px rgba(5, 44, 84, 0.06);
}

.page-heartbeat-monitoring .hb-alert-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-heartbeat-monitoring .hb-alert-icon {
    font-size: 22px;
}

.page-heartbeat-monitoring .hb-alert-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .page-heartbeat-monitoring .hb-schedule-grid {
        grid-template-columns: 1fr;
    }

    .page-heartbeat-monitoring .hb-alert-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .page-heartbeat-monitoring .hb-toggle-tabs {
        width: 100%;
    }

    .page-heartbeat-monitoring .hb-toggle-tab {
        flex: 1 1 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-heartbeat-monitoring .hb-field-controls {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .page-heartbeat-monitoring .hb-cron-expression-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-heartbeat-monitoring .hb-cron-humanized {
        min-width: 0;
        text-align: left;
        justify-content: flex-start;
    }

    .page-heartbeat-monitoring .hb-timeline {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-heartbeat-monitoring .hb-code-tabs {
        gap: 16px;
        overflow: auto;
        flex-wrap: nowrap;
    }
}

.wm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.wm-accordion .accordion-item {
    overflow: hidden;
    background: var(--white-color);
    border-top: 1px solid #efefef;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
}

.accordion-header:focus-visible{
    outline: none;
}

.wm-accordion .accordion-button {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    background: var(--white-color);
    box-shadow: none;
    border: 0;
}

.wm-accordion .accordion-button:not(.collapsed) {
    border-bottom: 1px solid rgba(207, 216, 227, 0.8);
}

.wm-accordion .accordion-button:focus {
    box-shadow: none;
}

.wm-accordion .accordion-body {
    padding: 14px 16px;
}

.wm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 100px;
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
    color: var(--slate-950);
    font-size: 11px;
    font-weight: 500;
}

.wm-chip img {
    flex: 0 0 auto;
}

/* Country / region code prefix inside a region chip */
.wm-chip__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 4px;
    background: var(--slate-200);
    color: var(--slate-600);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 3px;
    line-height: 1.4;
}

.wm-chip__close {
    border: 0;
    background: transparent;
    padding: 0 2px;
    margin-left: 2px;
    cursor: pointer;
    color: var(--slate-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    transition: color 0.12s ease;
}

.wm-chip__close:hover {
    color: var(--red-500);
}

.wm-chip__close svg { width: 8px; height: 8px; }

.wm-chip__close svg path {
    fill: currentColor;
}

.wm-header-remove {
    width: 32px;
    height: 32px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    background: var(--white-color);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    justify-self: end;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wm-header-remove::before {
    content: "\00D7";
    font-size: 16px;
    line-height: 1;
    color: var(--slate-400);
}

.wm-header-remove svg {
    display: block;
}

.wm-header-remove svg path {
    fill: currentColor;
}

.wm-header-remove:hover {
    border-color: var(--red-500);
    background: var(--red-50);
}

.wm-header-remove:hover::before {
    color: var(--red-500);
}

.wm-chip--add {
    background: var(--white-color);
    border: 1.5px dashed var(--slate-300);
    color: var(--slate-400) !important;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.wm-chip--add:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color) !important;
}

/* Form wrapper — caps the form width at 820px, left-aligned with the breadcrumb.
   Matches reference's `.form-wrap { max-width: 820px }` pattern. */
.form-wrap {
    width: 100%;
    max-width: 820px;
    align-self: flex-start;
}


.wm-divider-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--slate-400);
    font-size: 11px;
    font-weight: 400;
}

.wm-soon .row.g-3 {
    cursor: not-allowed;
}

.wm-divider-label::before,
.wm-divider-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--slate-100);
}

.wm-soon-tile {
    border: 1px solid var(--slate-100);
    border-radius: 9px;
    background: var(--white-color);
    padding: 12px;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 0.55;
    pointer-events: none;
    text-align: center;
}

.wm-soon-tile__name {
    font-weight: 500;
    color: var(--slate-600);
    font-size: 11px;
}

.wm-soon-tile__sub {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--slate-100);
    color: var(--slate-400);
    line-height: 1.4;
}

.wm-soon-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    background: #FEF9C3;
    color: #854D0E;
    border: none;
    line-height: 1.4;
}

.wm-actions {
    padding: 2px 2px 0;
}

.accordion-button span {
    color: var(--white-color);
}

/* Website monitoring URL protocol dropdown tweaks */
/* ============================================
   Form-panel helper text / inline hints / + Add buttons (token-aligned)
   Scoped to .wm-panel so we don't disturb other Bootstrap text-muted use.
   ============================================ */

/* Helper text below inputs */
.wm-panel small.text-muted,
.wm-panel small.text-muted.font-12,
.wm-panel small.font-12,
.wm-panel .text-muted.font-12.fw-normal {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--slate-400) !important;
    line-height: 1.4 !important;
    margin-top: 3px;
    display: inline-block;
}

/* Inline label hint — "— give it a descriptive name", "— what counts as UP" */
.wm-panel label .text-muted,
.wm-panel label .text-muted.font-12 {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--slate-400) !important;
    margin-left: 2px;
}

/* "+ Add X" links inside form panels */
.wm-panel .text-secondary-blue.font-14,
.wm-accordion .text-secondary-blue.font-14 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--slate-600) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.wm-panel .text-secondary-blue.font-14:hover,
.wm-accordion .text-secondary-blue.font-14:hover {
    color: var(--secondary-color) !important;
}

/* ============================================
   Rich notification channel accordion header
   icon + name + Active badge + visual toggle
   ============================================ */

.wm-channel-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.wm-channel-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.wm-channel-icon--email { background: #DBEAFE; }
.wm-channel-icon--slack { background: #E0E7FF; }

.wm-channel-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-950);
    flex: 1;
    text-align: left;
}

.wm-channel-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: #DCFCE7;
    color: #15803D;
    letter-spacing: 0.02em;
}

/* ============================================
   Notification channel cards — plain-div version
   matching reference's `.ac / .ac-hdr / .ac-body` pattern
   ============================================ */
.wm-channel {
    border: 1px solid var(--slate-200);
    border-radius: 9px;
    overflow: hidden;
    background: var(--white-color);
}

.wm-channel-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--slate-50);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.wm-channel-hdr:hover {
    background: var(--slate-100);
}

.wm-channel-body {
    padding: 14px;
    border-top: 1px solid var(--slate-200);
    background: var(--white-color);
}

.wm-channel-expand {
    font-size: 11px;
    color: var(--slate-400);
    transition: transform 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 4px;
}

.wm-channel-expand.open {
    transform: rotate(180deg);
}

/* Inline link inside small/helper text (e.g. "Slack Apps → Incoming Webhooks →") */
.wm-inline-link {
    color: var(--primary-color) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.wm-inline-link:hover {
    color: #EA6C0A !important;
    text-decoration: underline !important;
}

/* Round checkbox-style "on/off" indicator for notification channels.
   Matches reference's `.ac-toggle.on::after { content: '✓' }` pattern. */
.wm-channel-toggle-pill {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--slate-300);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.wm-channel-toggle-pill.on {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.wm-channel-toggle-pill.on::after {
    content: '✓';
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* Keep Bootstrap accordion-button styled but allow our header layout */
.accordion-button.wm-channel-btn {
    background: var(--slate-50) !important;
    padding: 11px 14px;
    gap: 10px;
}

/* Push the Active badge + indicator to the right of the header */
.wm-channel-name {
    margin-right: auto;
}

/* Custom checkbox styling for alert toggles inside a channel body
   ("Alert on DOWN", "Alert on RECOVERY", "Repeat while DOWN"). */
.wm-channel-body input[type="checkbox"],
.wm-accordion .accordion-body input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--slate-300);
    border-radius: 4px;
    background: var(--white-color);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.wm-channel-body input[type="checkbox"]:checked,
.wm-accordion .accordion-body input[type="checkbox"]:checked {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.wm-channel-body input[type="checkbox"]:checked::after,
.wm-accordion .accordion-body input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.wm-channel-body input[type="checkbox"]:focus-visible,
.wm-accordion .accordion-body input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.accordion-button.wm-channel-btn:not(.collapsed) {
    background: var(--slate-100) !important;
    color: var(--slate-950);
    box-shadow: none;
}

/* ============================================
   URL field — proto select + url input share one border
   (matches reference's url-wrap pattern)
   ============================================ */
.wm-url-wrap {
    display: flex;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--input-bg-empty);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wm-url-wrap:focus-within {
    border: 1.5px solid var(--secondary-color);
    background: var(--input-bg-filled);
    box-shadow: var(--focus-ring);
}

.wm-url-wrap .wm-url-proto {
    padding: 7px 26px 7px 10px !important;
    background-color: var(--slate-100) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--input-text) !important;
    border: none !important;
    border-right: 1px solid var(--slate-200) !important;
    border-radius: 0 !important;
    outline: none !important;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.4;
}

.wm-url-wrap .wm-url-proto:focus {
    box-shadow: none !important;
}

.wm-url-wrap .wm-url-input {
    flex: 1;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 400;
    color: var(--input-text);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
}

.wm-url-wrap .wm-url-input::placeholder {
    color: var(--placeholder-color);
}

/* ============================================
   Accordion-button text visibility fix
   Ensures "Keyword check" and "Custom request headers" labels render
   in the chosen brand color even after Bootstrap variable changes.
   ============================================ */
.wm-accordion .accordion-button {
    color: var(--slate-950) !important;
    background: var(--white-color);
}

.wm-accordion .accordion-button:not(.collapsed) {
    color: var(--slate-950) !important;
    background: var(--white-color) !important;
}

/* Override the global `.accordion-button span { color: white }` rule that
   was making "Keyword check" / "Custom request headers" invisible. */
.wm-accordion .accordion-button span {
    color: var(--slate-950) !important;
}

.wm-accordion .accordion-button .text-muted {
    color: var(--slate-400) !important;
}

/* Shrink the Bootstrap accordion chevron (default 20px) to match
   the 13px label text. */
.wm-accordion .accordion-button::after {
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
    flex-shrink: 0;
}

/* ============================================
   Keyword check — segmented tabs + bare input
   in one bordered wrap (token-aligned)
   ============================================ */
.wm-kw-wrap {
    border: 1px solid var(--input-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wm-kw-wrap:focus-within {
    border: 1.5px solid var(--secondary-color);
    box-shadow: var(--focus-ring);
}

.wm-kw-tabs {
    display: flex;
    border-bottom: 1px solid var(--slate-200);
}

.wm-kw-tab {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    color: var(--slate-600);
    background: var(--slate-50);
    transition: background 0.12s ease, color 0.12s ease;
    border: none;
    font-family: inherit;
}

.wm-kw-tab.active {
    background: var(--white-color);
    color: var(--secondary-color);
    font-weight: 500;
}

.wm-kw-tab:first-child {
    border-right: 1px solid var(--slate-200);
}

.wm-kw-tab:hover:not(.active) {
    background: var(--slate-100);
    color: var(--slate-950);
}

.wm-kw-inp {
    width: 100%;
    padding: 8px 11px;
    border: none;
    font-size: 13px;
    color: var(--input-text);
    background: var(--white-color);
    outline: none;
    font-family: inherit;
}

.wm-kw-inp::placeholder {
    color: var(--placeholder-color);
}
/* Protocol-prefix dropdown (http:// / https://) — slightly darker than the input next to it */
.wm-url-proto .http-drpdwn,
.wm-url-proto .http-drpdwn:hover,
.wm-url-proto .http-drpdwn:focus,
.wm-url-proto .http-drpdwn:active {
    background-color: var(--slate-100) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-right: 1px solid var(--slate-200) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 7px 10px !important;
}

.wm-url-proto .http-drpdwn:hover {
    background-color: var(--slate-200) !important;
}

.wm-url-proto .http-drpdwn .selected-option-label {
    font-size: 12px;
    color: var(--input-text);
    font-weight: 400;
}

.wm-url-proto .dropdown-menu {
    min-width: 100%;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--pale-blue);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(10, 10, 10, 0.12);
}

.wm-url-proto .dropdown-item {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
}

.monitor-btn {
    display: flex;
    gap: 20px;
    cursor: pointer;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--bright-gray);
    background: var(--white-color);
}

.countrydropdown-list {
    display: none;
    list-style: none;
    padding: 8px;
    margin: 8px 0 0;
    position: absolute;
    width: -webkit-fill-available;
    background: var(--white-color);
    border: 1px solid var(--bright-gray);
    border-radius: 8px;
    z-index: 5;
    overflow: hidden;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(10, 10, 10, 0.08);
}

.keywords-incident-dropdown .dropdown-options li,
.countrydropdown-list li {
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
}

.keywords-incident-dropdown .dropdown-options li:hover,
.countrydropdown-list li:hover {
    background: var(--light-grayish-blue);
}

.keywords-incident-dropdown .dropdown-options li.selected,
.countrydropdown-list li.selected {
    background: var(--seashell-color);
}

.option-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    min-width: 44px;
    min-height: 22px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--silver-color);
    transition: 0.3s;
    border-radius: 100px;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 3.85px;
    background-color: var(--white-color);
    transition: 0.3s;
    border-radius: 50%;
}

.switch input:checked+.slider {
    background-color: var(--primary-color);
}

.switch input:checked+.slider:before {
    transform: translateX(20px);
}

.switch-box {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.port-sub-fields {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.keywords-incident-dropdown {
    position: relative;
    width: -webkit-fill-available;
    user-select: none;
}

.keywords-incident-dropdown .dropdown-selected {
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    outline: none;
    border-radius: 8px;
    border: 1px solid rgba(254, 127, 45, 0.20);
    background: var(--seashell-color);
    display: flex;
    padding: 10px;
    align-items: center;
    font-size: 15px;
    color: var(--secondary-color);
    width: -webkit-fill-available;
}

.keywords-incident-dropdown .dropdown-arrow {
    transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
}

.keywords-incident-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.keywords-incident-dropdown .dropdown-options {
    position: absolute;
    width: -webkit-fill-available;
    top: calc(100% + 8px);
    margin: 0;
    padding: 8px;
    background: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--bright-gray);
    box-shadow: 0 8px 20px rgba(10, 10, 10, 0.08);
    overflow: hidden;
    opacity: 0;
    display: none;
    transition: max-height 260ms ease, opacity 180ms ease;
    z-index: 3;
    flex-direction: column;
    gap: 3px;
}

.keywords-incident-dropdown.open .dropdown-options {
    max-height: fit-content;
    opacity: 1;
    display: flex;
}

.keywords-incident-dropdown .dropdown-options li {
    font-size: 14px;
}

.keywords-incident-dropdown span.selected-text {
    text-align: left;
}

.request-body-tabs li {
    font-size: 12px;
}

.auth-type label {
    font-size: 14px;
}

.monitor-inner-page {
    width: 80%;
}

/* Home page CSS */

/******sidebar CSS**********/


/***** monitor-first Page CSS *****/

.monitor-first-layout {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 0;
}

.monitor-checklist-card {
    width: 100%;
    max-width: 590px;
}

.monitor-checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.monitor-checklist-header h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
}

.monitor-checklist-header span {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-400, #94A3B8);
    letter-spacing: 0.02em;
}

.monitor-checklist-progress {
    width: 100%;
    height: 3px;
    background: rgba(207, 216, 227, 0.8);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}

.monitor-checklist-progress .progress-active {
    display: block;
    width: 28%;
    height: 100%;
    background: var(--primary-color);
}

.monitor-checklist-items {
    display: flex;
    flex-direction: column;
}

.monitor-checklist-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(207, 216, 227, 0.9);
}

.monitor-checklist-item:last-child {
    border-bottom: 0;
}

.monitor-checklist-status {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(207, 216, 227, 1);
}

.monitor-checklist-copy h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 2px;
}

.monitor-checklist-copy p {
    font-size: 11px;
    color: #64748B;
    margin: 0;
    line-height: 1.4;
}

.monitor-checklist-link {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.monitor-checklist-link::after {
    content: "\2192";
    margin-left: 6px;
}

.monitor-empty-state {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.monitor-empty-divider {
    width: 140px;
    height: 2px;
    background: rgba(207, 216, 227, 0.8);
}

.monitor-empty-illustration img {
    width: 220px;
    max-width: 100%;
    filter: saturate(0.9);
}

.monitor-empty-copy p:first-child {
    margin-bottom: 8px;
}

/* Override the inline .font-20 utility for the hero "Add your first Monitor" */
.monitor-empty-copy .font-20 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--secondary-color);
    line-height: 1.3;
}

.monitor-empty-copy .font-14 {
    font-size: 12px !important;
    color: #64748B;
    font-weight: 400 !important;
    line-height: 1.5;
}

.monitor-empty-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   Status dashboard tightening — preview card + feature grid
   Shares the monitor-first-page body class with monitor-dashboard.
   Scoped via specific class hierarchies so it doesn't bleed.
   ────────────────────────────────────────────────────────────── */

/* Status preview card body — tighter row spacing + smaller labels */
.monitor-empty-state .monitor-card-parent {
    padding: 14px 16px;
}

.monitor-empty-state .monitor-card-parent > .d-flex > p.fw-bold,
.monitor-empty-state .monitor-card-parent p.fw-bold.secondary-color {
    font-size: 13px;
    font-weight: 600 !important;
}

/* "All systems operational" status badge in the preview card */
.monitor-empty-state .monitor-card-parent .status-badge {
    font-size: 11px !important;
    font-weight: 600;
    padding: 3px 10px !important;
    letter-spacing: 0.02em;
}

/* Feature grid cards — Custom subdomain / 90-day uptime / etc. */
.monitor-empty-state .row.g-3 {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.monitor-empty-state .row.g-3 .monitor-card-parent {
    padding: 10px 12px !important;
}

.monitor-empty-state .row.g-3 .monitor-card-parent p.fw-bold {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 1px !important;
    line-height: 1.3;
}

.monitor-empty-state .row.g-3 .monitor-card-parent p.font-14 {
    font-size: 11px !important;
    color: #64748B !important;
    line-height: 1.4;
}

.monitor-empty-state .row.g-3 .monitor-card-parent img,
.monitor-empty-state .row.g-3 .monitor-card-parent svg {
    width: 18px;
    height: 18px;
}

/* "Powered by Spectra" footer caption */
.monitor-empty-state .monitor-card-parent > p.font-12.gray-color.text-center {
    font-size: 10px !important;
    color: #94A3B8 !important;
    margin-top: 4px;
}

.welcome-content {
    position: relative;
    z-index: 1;
}

/* Monitor page css */

.small-reset-btn,
.go-to-monitor-btn,
.post-btn,
#testNotificationBtn,
.resume-btn,
.set-up-mync-btn {
    padding: 10px 15px !important;
}

.monitor-card-head-parent {
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    background: var(--white-color);
    padding: 20px 20px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wm-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wm-segmented__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(207, 216, 227, 0.9);
    background: var(--white-color);
    color: var(--secondary-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.wm-segmented__pill::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(138, 138, 138, 0.75);
    background: transparent;
    box-sizing: border-box;
}

.wm-segmented__pill:hover {
    border-color: var(--secondary-color);
}

.wm-segmented__option input:focus-visible+.wm-segmented__pill {
    outline: 2px solid rgba(254, 127, 45, 0.55);
    outline-offset: 2px;
}

.wm-segmented__option input:checked+.wm-segmented__pill {
    background: rgba(5, 44, 84, 0.06);
    border-color: rgba(5, 44, 84, 0.25);
}

.wm-segmented__option input:checked+.wm-segmented__pill::before {
    border-color: rgba(5, 44, 84, 0.9);
    background: rgba(5, 44, 84, 0.9);
}

/* Clean text-pill segmented control — used by API monitor's Auth-type radios
   and Ping monitor's Address-type radios. Both pages share identical pill
   styling (5×12 padding, 11px / 500 / slate-600, no radio dot, navy when
   checked). Port/SSL/Heartbeat/Website pages still use the radio-dot variant
   from the base `.wm-segmented__pill` rule elsewhere in this stylesheet. */
body.page-api-monitoring .wm-segmented__pill,
body.page-ping-monitoring .wm-segmented__pill {
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
    gap: 0;
}

body.page-api-monitoring .wm-segmented__pill::before,
body.page-ping-monitoring .wm-segmented__pill::before {
    display: none;
}

body.page-api-monitoring .wm-segmented__pill:hover,
body.page-ping-monitoring .wm-segmented__pill:hover {
    border-color: #94A3B8;
}

body.page-api-monitoring .wm-segmented__option input:checked + .wm-segmented__pill,
body.page-ping-monitoring .wm-segmented__option input:checked + .wm-segmented__pill {
    border-color: #0D2040;
    background: #EDF2FF;
    color: #0D2040;
    font-weight: 600;
}

body.page-api-monitoring .wm-segmented__option input:focus-visible + .wm-segmented__pill,
body.page-ping-monitoring .wm-segmented__option input:focus-visible + .wm-segmented__pill {
    outline: 2px solid rgba(13, 32, 64, 0.25);
    outline-offset: 2px;
}

/* Port monitor — Quick select common-service pills (matches reference .pp / .pp-icon / .pp-name / .pp-port).
   Compact rounded pills with emoji + name + monospace port number. */
.quick-select-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qs-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.qs-pill:hover {
    border-color: #0D2040;
    background: #EDF2FF;
    color: #0D2040;
}

.qs-pill.active {
    border-color: #0D2040;
    background: #0D2040;
    color: #fff;
}

.qs-pill__icon {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.qs-pill__name {
    font-size: 11px;
    font-weight: 500;
}

.qs-pill__port {
    font-family: 'SF Mono', ui-monospace, Monaco, 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #0F172A;
}

.qs-pill:hover .qs-pill__port {
    color: #0D2040;
}

.qs-pill.active .qs-pill__name,
.qs-pill.active .qs-pill__port {
    color: #fff;
}

/* SSL threshold pills (60 / 30 / 14 / 7 / 3 days) — color follows data-tone
   only when .active. Default state is uniform white/slate regardless of tone. */
.ssl-threshold-chip {
    padding: 6px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ssl-threshold-chip:hover {
    border-color: #94A3B8;
    color: #0F172A;
}

/* Active state — color by tone */
.ssl-threshold-chip.active {
    color: #fff;
    font-weight: 600;
}

.ssl-threshold-chip.active[data-tone="secondary"] {
    background: #0D2040;
    border-color: #0D2040;
}

.ssl-threshold-chip.active[data-tone="secondary"]:hover {
    background: #1E3A5F;
    border-color: #1E3A5F;
}

.ssl-threshold-chip.active[data-tone="warning"] {
    background: #B45309;
    border-color: #B45309;
}

.ssl-threshold-chip.active[data-tone="warning"]:hover {
    background: #92400E;
    border-color: #92400E;
}

.ssl-threshold-chip.active[data-tone="danger"] {
    background: #B91C1C;
    border-color: #B91C1C;
}

.ssl-threshold-chip.active[data-tone="danger"]:hover {
    background: #991B1B;
    border-color: #991B1B;
}

/* "Alert immediately if certificate becomes invalid" card — soft-red wrapper
   that frames the critical toggle in a separate visual zone */
.ssl-invalid-alert-card {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 12px 16px;
}

.ssl-invalid-alert-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #B91C1C;
    line-height: 1.3;
}

.ssl-invalid-alert-card__sub {
    font-size: 12px;
    color: #DC2626;
    opacity: 0.8;
    line-height: 1.5;
    margin-top: 2px;
}

/* SSL / Domain expiry subtype cards — compact reference dimensions (.stc).
   Matches Spectra Design/ssl_monitor.html exactly: 14×16 padding, 2px slate-200
   border, smaller icon box, navy selected state with #EDF2FF bg. */
.ssl-subtype-card.plan-card {
    border: 2px solid var(--slate-200, #E2E8F0) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    background: var(--white-color) !important;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    cursor: pointer;
}

.ssl-subtype-card.plan-card:hover {
    border-color: var(--slate-400, #94A3B8) !important;
    background: #FAFBFC !important;
}

/* Selected state — navy border + light navy bg (was orange via .plan-card.active) */
.ssl-subtype-card.plan-card.active,
.ssl-subtype-card.plan-card.selected-plan,
.ssl-subtype-card.plan-card.active:hover {
    border-color: var(--deep-navy-blue, #0D2040) !important;
    background: #EDF2FF !important;
}

/* Icon box — compact 36×36, fills navy when selected */
.ssl-subtype-card .bg-light.rounded-2 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.ssl-subtype-card .bg-light.rounded-2 svg {
    width: 18px;
    height: 18px;
}

.ssl-subtype-card.active .bg-light.rounded-2,
.ssl-subtype-card.selected-plan .bg-light.rounded-2 {
    background-color: var(--deep-navy-blue, #0D2040) !important;
}

.ssl-subtype-card.active .bg-light.rounded-2 svg path,
.ssl-subtype-card.selected-plan .bg-light.rounded-2 svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Title — 13px / 600 / navy (matches reference .stc-name) */
.ssl-subtype-card .fw-semibold.secondary-color.font-14 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    line-height: 1.3;
}

/* Description — 11px / slate-600 (matches reference .stc-desc) */
.ssl-subtype-card .text-muted.font-13 {
    font-size: 11px !important;
    color: #64748B !important;
    line-height: 1.5;
    margin-top: 2px;
}

/* Feature pills inside the card — small square chips (.stc-feat) */
.ssl-subtype-card .wm-badge {
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
    letter-spacing: 0.01em;
}

/* Radio dot — top-right small navy-filled circle when selected
   (overrides the existing plan-radio orange tick) */
.ssl-subtype-card .plan-radio {
    position: absolute !important;
    top: 12px;
    right: 12px;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--slate-300, #CBD5E1) !important;
    background: transparent !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ssl-subtype-card.active .plan-radio,
.ssl-subtype-card.selected-plan .plan-radio {
    background: var(--deep-navy-blue, #0D2040) !important;
    border-color: var(--deep-navy-blue, #0D2040) !important;
}

.ssl-subtype-card.active .plan-radio::after,
.ssl-subtype-card.selected-plan .plan-radio::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Per-region results rows — compact dimensions matching reference ping_monitor
   .ping-region-row (7×10 padding / 7px radius / 12px text / 5px row gap). */
#wmConnectivityRegionList {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#wmConnectivityRegionList > div {
    padding: 7px 10px !important;
    border-radius: 7px !important;
    gap: 8px !important;
    min-height: 0;
}

/* Region code badge ("IN", "SG", "DE", …) — tighter pill */
#wmConnectivityRegionList > div > div:first-child > span:first-child {
    width: 22px !important;
    height: 18px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* Region name (Mumbai, India / Singapore / …) — 12px / 500 / slate-950 */
#wmConnectivityRegionList > div > div:first-child > span.fw-semibold {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #0F172A;
    line-height: 1.3;
}

/* "0% loss" meta text — 10px slate-400 */
#wmConnectivityRegionList > div > div:last-child > small.text-muted {
    font-size: 10px !important;
    color: #94A3B8 !important;
}

/* Latency value (136ms / 82ms / …) — 12px / 600 monospace */
#wmConnectivityRegionList > div > div:last-child > small.fw-bold {
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'SF Mono', ui-monospace, Monaco, 'Courier New', monospace;
    line-height: 1.2;
}

/* Latency color mapping — fast (<120ms) green, medium (>=120ms) orange */
#wmConnectivityRegionList > div > div:last-child > small.text-success {
    color: #22C55E !important;
}

#wmConnectivityRegionList > div > div:last-child > small.text-warning {
    color: #F97316 !important;
}

/* Status dot — 8×8 circle (was already 8px inline; keep) */
#wmConnectivityRegionList > div > div:last-child > span[aria-hidden] {
    width: 8px !important;
    height: 8px !important;
}

/* Host + port grouped input — matches reference port_monitor's .host-port-wrap
   (slate-300 border, slate-50 bg, navy 1.5px border + white bg + 3px ring on focus-within) */
.host-port-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    overflow: hidden;
    background: #F8FAFC;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.host-port-wrap:focus-within {
    border-color: #0D2040;
    border-width: 1.5px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.07);
}

.host-port-sep {
    width: 1px;
    background: #E2E8F0;
    align-self: stretch;
    flex-shrink: 0;
}

/* Host input — flex-grows, transparent so the wrap's bg shows through */
.host-port-wrap .host-inp {
    flex: 1;
    padding: 8px 11px;
    font-size: 13px;
    color: #0F172A;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.host-port-wrap .host-inp::placeholder {
    color: #94A3B8;
}

/* Port number input — 80px wide, centered, navy 600 monospace */
.host-port-wrap .port-inp {
    width: 80px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0D2040;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'SF Mono', Monaco, ui-monospace, 'Courier New', monospace;
    text-align: center;
    flex-shrink: 0;
    -moz-appearance: textfield;
}

.host-port-wrap .port-inp::placeholder {
    color: #94A3B8;
    font-weight: 400;
    font-family: inherit;
}

/* Hide native number spinner arrows on the port input — keeps the field clean */
.host-port-wrap .port-inp::-webkit-outer-spin-button,
.host-port-wrap .port-inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.monitor-card-parent {
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    background: var(--white-color);
    margin-bottom: 10px;
    padding: 20px 30px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.monitor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.monitor-divider {
    border: 1px solid var(--divider);
    border-style: dashed;
    width: -webkit-fill-available;
    border-bottom: 0;
}

.status-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-percentage {
    font-weight: 500;
    min-width: 50px;
    font-size: 12px;
}

.status-badge {
    padding: 4px 6px;
    font-weight: 500;
    border-radius: 6px;
    font-size: 10px;
    display: inline-block;
    color: var(--white-color);
}

span.status-badge.monitor-status-pill {
    width: 60px;
    text-align: center;
    border: 1px solid;
    border-radius: 20px;
}

.status-badge.up {
    border-color: var(--green-color) !important;
    background: rgba(33, 188, 21, 0.06);
    color: var(--green-color);
}

.status-badge.down {
    border-color: var(--red-color) !important;
    background: rgba(255, 67, 70, 0.06);
    color: var(--red-color);
}

.bg-status-down {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    border: 0.6px solid var(--red-color);
    background: var(--red-color);
    height: -webkit-fill-available;
    width: 100px;
}

/* filter section css */

.filter-dropdown {
    position: relative;
    display: inline-block;
}

.filter-toggle {
    cursor: pointer;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    height: 40px;
    background: var(--white-color);
    border: 1px solid var(--gray-blue);
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-grayish-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 240px;
    background: var(--white-color);
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 10px;
    z-index: 1000;
}

label.drpdwn-label.d-flex.align-items-center.gap-2:hover {
    background-color: var(--bright-gray);
}

/* Test Notification Dropdown Styles */

.test-notification-dropdown {
    position: relative;
}

.test-notification-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white-color);
    border: 1px solid var(--pale-blue);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    min-width: 380px;
}

.test-notification-menu.show {
    display: block;
}

.user-avatar-notification {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

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

.test-notification-btn {
    width: 100%;
    justify-content: center;
}

.test-notification-btn svg {
    width: 18px;
    height: 18px;
}

/* Date Range Picker Styles */

.calendar-menu {
    width: auto;
}

.date-range-close {
    font-size: 20px;
    padding: 0;
}

.sendtoggle:checked {
    background-color: var(--secondary-color);
    border: var(--secondary-color);
}

.calendar-day {
    flex: 0 0 calc(14.28% - 6px);
    text-align: center;
    padding: 4px 0;
}

.calendar-day-selected {
    background: var(--secondary-color);
    color: var(--white-color) !important;
    border-radius: 6px;
}

.date-range-select {
    border: 1px solid var(--pale-blue);
    border-radius: 6px;
    padding: 10px;
}

.date-range-input {
    flex: 1;
    border: 1px solid var(--pale-blue);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.filter-menu label,
.filter-menu p {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 5px;
    font-size: 14px;
    color: var(--dark-grayish-blue);
    cursor: pointer;
}

.filter-menu label:hover,
.filter-menu p:hover {
    background-color: var(--light-grey);
}

.filter-reset {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: -webkit-fill-available !important;
    padding: 10px 15px !important;
}

/* menu css */

.custom-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    min-width: 238px;
    background: var(--white-color);
    border: 1px solid var(--pale-blue);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(12, 35, 64, 0.12);
    z-index: 1000;
    padding: 8px 0;
}

.monitors-drop-down {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.monitor-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
    border-radius: 8px;
}

.monitor-tab a {
    width: -webkit-fill-available;
    height: auto;
    padding: 5px;
}

.monitor-items :hover {
    background-color: var(--light-grey);
}

.monitor-items {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.monitors-drop-down p {
    padding: 0;
}

.monitors-drop-down p:hover {
    background-color: transparent;
}

/* Menu items */

.menu-toggle {
    cursor: pointer;
    width: 20px;
}

.custom-dropdown-menu .dropdown-item {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--dark-grayish-blue);
    text-decoration: none;
    transition: 0.2s ease;
}

.custom-dropdown-menu .dropdown-item:hover {
    background-color: var(--anti-flash-white);
}

/*****Single Monitor Page*****/

/* collapsible start*/

.cursor-pointer {
    cursor: pointer;
}

.collapse-arrow {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}

[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}

/* collapsible ends */

.disabled-all {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(100%);
}

.single-monitor-page .monitor-btn {
    border: 1px solid var(--bright-gray);
    background: var(--white-color);
    padding: 15px;
}

.single-monitor-page input.custom-input,
.single-monitor-page button.dropdown-selected {
    border: 1.5px solid rgba(204, 204, 204, 0.60);
    background: var(--white-color);
}

/***** Add Monitor (Type Selection) *****/

.single-monitor-page.add-monitor-page .add-monitor-intro {
    max-width: 900px;
}

.single-monitor-page.add-monitor-page .monitor-type-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(207, 216, 227, 0.7);
    background: var(--white-color);
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.single-monitor-page.add-monitor-page .monitor-type-card:hover {
    transform: translateY(-1px);
    border-color: var(--secondary-color);
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.06);
}

.single-monitor-page.add-monitor-page .monitor-type-card:focus-visible {
    outline: 2px solid rgba(254, 127, 45, 0.55);
    outline-offset: 3px;
}

.single-monitor-page.add-monitor-page .monitor-type-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(254, 127, 45, 0.16);
}

.single-monitor-page.add-monitor-page .monitor-type-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.single-monitor-page.add-monitor-page .monitor-type-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(254, 127, 45, 0.22);
    background: var(--light-orange);
    color: var(--primary-color);
    font-size: 16px;
}

.single-monitor-page.add-monitor-page .monitor-type-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
}

.single-monitor-page.add-monitor-page .monitor-type-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-color);
}

.single-monitor-page.add-monitor-page .monitor-type-chips {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-monitor-page.add-monitor-page .monitor-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(5, 44, 84, 0.85);
    background: rgba(246, 246, 248, 0.95);
    border: 1px solid rgba(207, 216, 227, 0.8);
    white-space: nowrap;
}

.region-box {
    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 0.6px solid #F4F4F4;
    background: #F4F4F4;
    font-size: 12px;
}

.flag-icon {
    width: 20px;
    height: auto;
    border-radius: 3px;
}

/* Key-Value Pairs Table Styles */

.key-value-table {
    border-left: none;
    border-right: none;
}

.key-value-table th,
.key-value-table td {
    border-left: none;
    border-right: none;
    border-bottom-color: inherit !important;
}

.key-value-table thead th {
    border-top: none;
}

.key-value-table tbody tr:last-child td {
    border-bottom: none;
}

.key-value-table .delete-btn {
    color: var(--red-color);
    cursor: pointer;
}

.key-value-table .delete-btn:hover {
    opacity: 0.8;
}

.key-value-table .delete-col-header {
    width: 50px;
}

/* Delete Confirmation Modal Styles */

.modal-dialog {
    max-width: 450px;
}

#deleteConfirmModal .modal-dialog,
#cancelSubscriptionModal .modal-dialog,
#upgradeUnlockModal .modal-dialog,
#transferOwnershipModal .modal-dialog {
    max-width: 560px;
}

#deleteConfirmModal .modal-content,
#cancelSubscriptionModal .modal-content,
#upgradeUnlockModal .modal-content,
#transferOwnershipModal .modal-content {
    border-radius: 16px;
    border: none;
    position: relative;
    box-shadow: 0 18px 60px rgba(5, 44, 84, 0.18);
    padding: 8px 8px 12px;
}

#deleteConfirmModal .delete-modal-icon,
#cancelSubscriptionModal .delete-modal-icon,
#upgradeUnlockModal .delete-modal-icon,
#transferOwnershipModal .delete-modal-icon {
    width: 64px;
    height: 64px;
    background-color: #ff4a4d;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 18px;
}

#deleteConfirmModal .delete-modal-icon svg,
#cancelSubscriptionModal .delete-modal-icon svg,
#upgradeUnlockModal .delete-modal-icon svg,
#transferOwnershipModal .delete-modal-icon svg
 {
    width: 34px;
    height: 34px;
}

#deleteConfirmModal .modal-body,
#cancelSubscriptionModal .modal-body,
#upgradeUnlockModal .modal-body,
#transferOwnershipModal .modal-body {
    text-align: center;
    padding: 20px 36px 0;
}

#deleteConfirmModal .modal-title,
#cancelSubscriptionModal .modal-title,
#upgradeUnlockModal .modal-title,
#transferOwnershipModal .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 14px;
}

#deleteConfirmModal .delete-confirm-text,
#cancelSubscriptionModal .delete-confirm-text,
#upgradeUnlockModal .delete-confirm-text,
#transferOwnershipModal .delete-confirm-text {
    font-size: 16px;
    color: var(--secondary-color);
    margin-bottom: 0;
}

#deleteConfirmModal .delete-item-name,
#cancelSubscriptionModal .delete-item-name,
#upgradeUnlockModal .delete-item-name,
#transferOwnershipModal .delete-item-name {
    color: var(--primary-color);
    font-weight: 600;
}

#deleteConfirmModal .delete-warning-text,
#cancelSubscriptionModal .delete-warning-text,
#upgradeUnlockModal .delete-warning-text,
#transferOwnershipModal .delete-warning-text {
    font-size: 16px;
    color: var(--secondary-color);
    margin-bottom: 0;
}

#deleteConfirmModal .modal-footer,
#cancelSubscriptionModal .modal-footer,
#upgradeUnlockModal .modal-footer,
#transferOwnershipModal .modal-footer {
    border-top: none;
    padding: 28px 36px 18px;
    justify-content: center;
    gap: 20px !important;
}

#deleteConfirmModal .btn-cancel,
#cancelSubscriptionModal .btn-cancel,
#upgradeUnlockModal .btn-cancel,
#transferOwnershipModal .btn-cancel {
    min-width: 188px;
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 16px;
    font-weight: 500;
    padding: 0 28px !important;
}

#configureGoogleChatModal .btn-cancel,
#configureSlackModal .btn-cancel,
#configureEmailModal .btn-cancel,
#configureMSTeamsModal .btn-cancel,
#inviteModal .btn-cancel,
#configureDiscordModal .btn-cancel,
#configureWebhookModal .btn-cancel,
#deleteConfirmModal .btn-cancel,
#cancelSubscriptionModal .btn-cancel,
#upgradeUnlockModal .btn-cancel,
#transferOwnershipModal .btn-cancel {
    background-color: var(--white-color) !important;
    border: 1px solid var(--silver-color) !important;
    color: var(--secondary-color) !important;
    border-radius: 12px !important;
    padding: 0 28px !important;
}

#deleteConfirmModal .btn-cancel:hover,
#cancelSubscriptionModal .btn-cancel:hover,
#upgradeUnlockModal .btn-cancel:hover,
#transferOwnershipModal .btn-cancel:hover {
    opacity: 0.95;
}

#deleteConfirmModal .btn-delete-confirm,
#cancelSubscriptionModal .btn-delete-confirm,
#upgradeUnlockModal .btn-delete-confirm,
#transferOwnershipModal .btn-delete-confirm {
    background-color: #ff4a4d;
    color: var(--white-color);
    border: none;
    min-width: 188px;
    height: 50px !important;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    padding: 0 28px !important;
}

#deleteConfirmModal .btn-delete-confirm:hover,
#cancelSubscriptionModal .btn-delete-confirm:hover,
#upgradeUnlockModal .btn-delete-confirm:hover,
#transferOwnershipModal .btn-delete-confirm:hover {
    opacity: 0.9;
    background-color: #ff4a4d;
    color: var(--white-color);
}

#deleteConfirmModal .btn-delete-confirm:disabled,
#deleteConfirmModal .tertiary-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

#transferOwnershipModal .delete-modal-icon,
#transferOwnershipModal .btn-delete-confirm,
#transferOwnershipModal .btn-delete-confirm:hover {
    background-color: var(--primary-color);
}

#deleteConfirmModal .btn-close,
#cancelSubscriptionModal .btn-close,
#upgradeUnlockModal .btn-close,
#transferOwnershipModal .btn-close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    opacity: 1;
    background-size: 18px;
    top: 15px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#deleteConfirmModal .btn-close:hover,
#upgradeUnlockModal .btn-close:hover,
#transferOwnershipModal .btn-close:hover {
    opacity: 0.8;
}

#upgradeUnlockModal .delete-modal-icon,
#upgradeUnlockModal .btn-delete-confirm,
#upgradeUnlockModal .btn-delete-confirm:hover {
    background-color: var(--secondary-color);
}

/* ---- Tag Input ---- */

input.checkbox[type=checkbox],
input.radio[type=radio] {
    background: transparent;
    border: 1px solid var(--silver-color);
    cursor: pointer;
    margin: 0;
}

input.checkbox:checked,
input.radio:checked {
    background: var(--primary-color);
    margin: 0%;
    color: var(--white-color);
}

input.checkbox:focus,
input.radio:focus {
    box-shadow: none;
}

input[type="range"] {
    width: 100%;
    height: 6px;
    appearance: none;
    background: var(--light-grey);
    border-radius: 5px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    margin-top: -4px;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

/* Custom arrow */

.dropdown-arrow {
    width: 14px;
    height: 14px;
}

.countrydropdown {
    gap: 6px;
}

.countrydropdown-list li a {
    padding: 0;
    color: var(--black-color);
}

.countrydropdown-list li a:hover,
.countrydropdown-list li a:focus {
    background: transparent;
}

.countrydropdown-list li a:active {
    background: transparent;
    color: var(--black-color);
}

/* Incidents page css */

.report-incdn-btn,
.secondary-btn .report-incdn-btn,
.create-sts-btn {
    padding: 10px 12px !important;
}

/* hover entire dark row */

.search-tab {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    background-color: var(--bright-gray);
    width: 100%;
}

.search-tab input {
    color: var(--dark-grey);
    font-size: 14px;
    background-color: transparent;
    border: none;
    width: -webkit-fill-available;
}

.search-tab input:focus-visible {
    outline: none;
}

.incidents-table .status-badge {
    font-size: 14px;
}

.status-ongoing {
    background-color: var(--red-color);
}

.status-resolved {
    background-color: var(--green-color);
}

.table td {
    position: static !important;
}

.monitor-summary-chip {
    border: 1px solid var(--pale-blue);
    background: var(--white-color);
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-color);
}

.monitor-summary-chip.is-active {
    background: rgba(41, 94, 217, 0.06);
    border-color: #295ed9;
    color: #295ed9;
}

.monitor-summary-chip__count {
    font-size: 12px;
}

.monitor-summary-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.monitor-summary-chip.is-up {
    border-color: var(--green-color);
    background: rgba(33, 188, 21, 0.06);
    color: var(--green-color);
}

.monitor-summary-chip.is-up .monitor-summary-chip__dot {
    background: var(--green-color);
}

.monitor-summary-chip.is-active .monitor-summary-chip__dot {
    background: #295ed9;
}

/* Keep each status chip's own dot colour when it is also active/selected */
.monitor-summary-chip.is-up.is-active .monitor-summary-chip__dot {
    background: var(--green-color);
}

.monitor-summary-chip.is-down.is-active .monitor-summary-chip__dot {
    background: var(--red-color);
}

.monitor-summary-chip.is-expiring.is-active .monitor-summary-chip__dot {
    background: var(--primary-color);
}

.monitor-summary-chip.is-paused.is-active .monitor-summary-chip__dot {
    background: #94a3b8;
}

.monitor-summary-chip.is-down {
    border-color: var(--red-color);
    background: rgba(255, 67, 70, 0.06);
    color: var(--red-color);
}

.monitor-summary-chip.is-down .monitor-summary-chip__dot {
    background: var(--red-color);
}

.monitor-summary-chip.is-expiring {
    border-color: rgba(254, 127, 45, 0.28);
    background: rgba(254, 127, 45, 0.08);
    color: #b56320;
}

.monitor-summary-chip.is-expiring .monitor-summary-chip__dot {
    background: var(--primary-color);
}

.monitor-summary-chip.is-warning {
    border-color: rgba(234, 179, 8, 0.35);
    background: rgba(234, 179, 8, 0.08);
    color: #92710a;
}

.monitor-summary-chip.is-warning .monitor-summary-chip__dot {
    background: #eab308;
}

.monitor-summary-chip.is-paused {
    border-color: rgba(138, 138, 138, 0.22);
    background: #f8fafc;
    color: #6b7280;
}

.monitor-summary-chip.is-paused .monitor-summary-chip__dot {
    background: #94a3b8;
}

.monitor-search {
    min-width: 280px;
    max-width: 280px;
}

.monitor-toolbar-icon {
    flex: 0 0 auto;
    display: block;
}

.monitor-filter-option {
    width: 100%;
    font-size: 12px;
    color: var(--secondary-color);
    cursor: pointer;
    background: transparent !important;
    margin-bottom: 0;
}

.monitor-filter-option .checkbox {
    margin-top: 0;
    flex: 0 0 auto;
}

.monitor-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--slate-100, #F1F5F9);
}

/* Uppercase section heading shown inside filter dropdowns
   (e.g., "FILTER BY ROLE" on team-members, "FILTER BY STATUS" on monitor list) */
.filter-section-heading {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 8px 12px 6px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

/* Checkboxes inside filter dropdowns — navy when checked (matches reference).
   Overrides Bootstrap's .form-check-input:checked which would otherwise force blue/orange. */
.monitor-filter-menu input[type="checkbox"],
.monitor-filter-menu .form-check-input {
    accent-color: #0D2040;
}

.monitor-filter-menu .form-check-input:checked,
.monitor-filter-menu input[type="checkbox"]:checked {
    background-color: #0D2040 !important;
    border-color: #0D2040 !important;
}

.monitor-filter-menu .form-check-input:focus,
.monitor-filter-menu input[type="checkbox"]:focus {
    border-color: #0D2040 !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 32, 64, 0.18) !important;
}

/* Filter option rows — edge-to-edge hover like the 3-dot dropdown items.
   Higher specificity + !important to beat .custom-dropdown-menu .dropdown-item:hover
   (which would otherwise paint --anti-flash-white #f3f4f6 instead of slate-50). */
.monitor-filter-menu .monitor-filter-option,
.monitor-filter-menu label.dropdown-item.monitor-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    background: transparent;
    transition: background 0.1s ease;
}

.monitor-filter-menu .monitor-filter-option:hover,
.monitor-filter-menu label.dropdown-item.monitor-filter-option:hover {
    background: #F8FAFC !important;
}

/* Neutralise the legacy `.monitor-items :hover { background: var(--light-grey) }`
   rule that paints every descendant on hover — we only want the row to highlight.
   Excludes inputs (checkboxes) so the navy :checked background stays.
   Handles both HTML structures:
     - team-members: <label class="monitor-items monitor-filter-option">
     - monitor-list: <label class="dropdown-item monitor-filter-option"><div class="monitor-items">
*/
.monitor-filter-menu .monitor-filter-option *:not(input),
.monitor-filter-menu .monitor-filter-option *:not(input):hover {
    background-color: transparent !important;
}

.monitor-filter-menu .monitor-tab {
    gap: 0;
}

/* Reset/Apply filter buttons — pad them inward so they don't touch the menu edges */
.monitor-filter-menu .monitor-filter-actions {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
}

/* Section label inside the 3-dot row menu — "Settings" / "Actions"
   become uppercase eyebrow labels matching the reference design. */
.monitor-filter-menu .monitors-drop-down > p.text-muted,
.monitor-filter-menu .monitors-drop-down > p {
    font-size: 10px !important;
    font-weight: 600;
    color: #94A3B8 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 12px 3px;
    margin: 0;
    line-height: 1.4;
}

/* Menu item — reference uses plain slate-50 hover with no accent bar.
   See: Spectra Design/monitor_list.html .dd-item:hover{background:#F8FAFC} */
.monitor-filter-menu .monitor-tab .dropdown-item {
    padding: 7px 12px;
    border-radius: 0;
    transition: background 0.1s ease;
}

.monitor-filter-menu .monitor-tab .dropdown-item:hover,
.monitor-filter-menu .monitor-tab .dropdown-item:focus {
    background: var(--slate-50, #F8FAFC);
}

/* Danger menu items get a soft red tint on hover instead of slate */
.monitor-filter-menu .monitor-tab .dropdown-item.delete-btn:hover,
.monitor-filter-menu .monitor-tab .dropdown-item.delete-btn:focus {
    background: #FFF5F5;
}

/* Divider between sections — reference's .dd-section + .dd-section { border-top: 1px solid #F1F5F9 } */
.monitor-filter-menu > li + li > .monitors-drop-down {
    border-top: 1px solid #F1F5F9;
}

/* Dropdown container — matches reference's .dropdown (190px wide, 9px radius, soft shadow) */
.monitor-filter-menu {
    overflow: hidden;
    padding: 0 !important;
    border-radius: 9px;
    min-width: 190px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Section wrapper — reference's .dd-section { padding: 4px 0 } */
.monitor-filter-menu > li > .monitors-drop-down {
    padding: 4px 0;
}

/* Tables that host row dropdowns — escape every level of overflow:
   Bootstrap's .table-responsive (overflow-x: auto), .custom-table
   (overflow: hidden for rounded corners), and any intermediate wrapper.
   Applied to members, monitor-list, and status-list pages. */
.members-section .table-responsive,
.members-section > .border.rounded-3,
.members-section .custom-table,
.members-section .table,
.page-monitors .table-responsive,
.page-monitors .custom-table,
.page-monitors .table,
.page-monitors .border.rounded-3,
.page-monitors .list-table {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* td: keep position: static so .menu-dots (position: relative) is the menu's
   containing block. The :not(.checkbox-cell) keeps checkbox cells from breaking. */
.members-section td,
.page-monitors td {
    position: static !important;
}

/* Lift the open 3-dot trigger and its dropdown above sibling rows so the
   menu clearly floats on top of the table instead of sitting inside it. */
.members-section .menu-dots.open,
.page-monitors .menu-dots.open {
    z-index: 1100;
}

.members-section .menu-dots .custom-dropdown-menu,
.page-monitors .menu-dots .custom-dropdown-menu {
    z-index: 1100;
    /* Stronger shadow so the floating panel reads as separate from the table */
    box-shadow: 0 12px 32px rgba(13, 32, 64, 0.18);
}

/* "Open upward" — flips the dropdown to anchor its bottom edge to the
   trigger's top edge when there isn't room below in the viewport.
   The `.menu-up` class is toggled by monitor.js at click time. */
.members-section .menu-dots.menu-up .custom-dropdown-menu,
.page-monitors .menu-dots.menu-up .custom-dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Search inputs — white bg + compact reference dimensions (7px / 12px / 7px radius).
   Applied to members, monitor-list, status-list. */
.members-section .search-tab,
.members-section .monitor-search,
.page-monitors .search-tab,
.page-monitors .monitor-search {
    background-color: #fff !important;
    border: 1px solid var(--slate-200);
    padding: 6px 10px !important;
    border-radius: 7px !important;
}

.members-section .search-tab input,
.page-monitors .search-tab input {
    font-size: 12px !important;
}

/* Filter / sort / "Filter by role" trigger buttons — white bg + compact reference
   dimensions (7px 12px / 12px font / 7px radius / no fixed height). */
.members-section .filter-btn.bg-light,
.members-section .filter-btn,
.page-monitors .filter-btn.bg-light,
.page-monitors .filter-btn,
.page-monitors .sort-btn {
    background-color: #fff !important;
    border: 1px solid var(--slate-200) !important;
    height: auto !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 7px !important;
}

.members-section .filter-btn:hover,
.page-monitors .filter-btn:hover,
.page-monitors .sort-btn:hover {
    border-color: var(--slate-400) !important;
}

/* Compact Active/Invited/Pending status pill in the members table */
.members-section .status-badge,
.members-section .monitor-status-pill,
.members-section .alert-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    letter-spacing: 0.02em;
}

/* Compact "✓ Enabled" 2FA indicator */
.members-section .checkmark {
    font-size: 11px !important;
    font-weight: 600;
}

/* Compact role pill — Admin / Billing Admin / Member */
.members-section td .badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    letter-spacing: 0.02em;
}

/* Inner row: icon + label — reference's .dd-item is 12px / 500 / #0F172A / gap 9px */
.monitor-filter-menu .monitor-items {
    font-size: 12px !important;
    font-weight: 500;
    color: #0F172A;
    gap: 9px;
}

/* Icon — reference's .dd-item svg is 13px with 0.6 opacity */
.monitor-filter-menu .monitor-items img,
.monitor-filter-menu .monitor-items svg {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.6;
}

.monitor-filter-menu .monitor-items p {
    color: inherit;
    line-height: 1.4;
}

/* Danger menu item — reference's .dd-item.danger { color: #B91C1C } */
.monitor-filter-menu .dropdown-item.delete-btn.text-danger .monitor-items,
.monitor-filter-menu .dropdown-item.delete-btn.text-danger .monitor-items p {
    color: #B91C1C !important;
}

/* Compact filter-action buttons — smaller padding so Reset/Apply
   match the reference's tight footer (currently .filter-reset is 10/15 padding) */
.monitor-filter-menu .monitor-filter-actions .filter-reset {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    margin-top: 0 !important;
}

/* Override the "Apply filters" button to navy inside filter dropdowns —
   matches reference. Higher specificity beats theme.css's `.primary-btn`. */
.monitor-filter-menu .monitor-filter-actions .primary-btn,
.monitor-filter-menu .monitor-filter-actions .primary-btn.filter-reset {
    background: var(--deep-navy-blue) !important;
    border-color: var(--deep-navy-blue) !important;
    color: var(--white-color) !important;
    font-weight: 600 !important;
}

.monitor-filter-menu .monitor-filter-actions .primary-btn:hover,
.monitor-filter-menu .monitor-filter-actions .primary-btn.filter-reset:hover {
    background: #1E3A5F !important;
    border-color: #1E3A5F !important;
}

.monitor-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.monitor-tag {
    border: 1px solid #dbe5ef;
    background: #f8fbff;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.2;
    color: #64748b;
}

.monitor-inline-alert {
    margin-top: 4px;
    font-weight: 500;
    color: var(--red-color);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.monitor-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.monitor-type-pill.is-http {
    color: #f97316;
    background: #fff7ed;
    border-color: #fdba74;
}

.monitor-type-pill.is-ping {
    background: rgba(22, 163, 74, 0.07);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
}

.monitor-type-pill.is-api {
    color: #0f9f8f;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.monitor-type-pill.is-heartbeat {
    color: #319f0f;
    background: #f2fdec;
    border-color: #73e76e;
}

.monitor-type-pill.is-port {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #d8b4fe;
}

.monitor-type-pill.is-ssl {
    color: #e11d48;
    background: #fff1f2;
    border-color: #fda4af;
}

.status-badge.monitor-status-pill.status-expiring {
    color: #b45309;
    background: #fff7ed;
    border-color: #fdba74;
}

.status-badge.monitor-status-pill.status-paused {
    color: #64748b;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.status-badge.monitor-status-pill.status-not-started {
    color: #6366f1;
    background: #eef2ff;
    border-color: #a5b4fc;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
}

.page-monitors .status-bar {
    width: 160px;
}

.page-monitors .status-bar .uptime-bars {
    width: 160px;
    height: 20px;
    margin: 0;
    padding: 0;
    gap: 2px;
    border-radius: 0;
    background-color: transparent;
}

.page-monitors .status-bar .uptime-bar {
    width: 2.5px;
    height: 15px;
    border-radius: 1.25px;
}

.page-monitors .status-bar .uptime-bar.is-down {
    background-color: var(--red-color);
}

.page-monitors .status-bar .uptime-bar.is-paused {
    background-color: #cbd5e1;
}

@media (max-width: 991.98px) {
    .page-monitors .monitor-search {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .page-monitors .monitor-summary-chip {
        width: auto;
    }
}

.custom-table th,
.custom-table td {
    vertical-align: middle;
    font-size: 14px;
    background-color: var(--white-color);
    white-space: nowrap;
}

.page-monitors .custom-table th,
.page-monitors .custom-table td,
.page-monitors .list-table th,
.page-monitors .list-table td {
    font-size: 12px;
    padding: 9px 12px !important;
}

.page-monitors .custom-table th {
    font-size: 11px;
}

.custom-table th {
    background-color: #F8FAFC;
    color: #94A3B8 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #E2E8F0 !important;
}

.custom-table {
    border-radius: 8px;
    overflow: hidden;
}

/* When overflow:hidden is removed on a table (so row dropdowns can escape),
   the rounded outer corners stop clipping the inner th/td backgrounds. Apply
   matching radius to the first/last corner cells so the slate-50 thead bg
   follows the curve and there's no page-bg bleed-through at the corners. */
.custom-table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

.custom-table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

.custom-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.custom-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.page-status-dashboard .table-responsive,
.page-status-dashboard .custom-table {
    overflow: visible;
}

.checkbox-cell {
    padding-left: 17px !important;
    width: 60px;
}

/* Status on view page css */

.service-status-card {
    border: 1px solid var(--bright-gray);
    background: var(--white-color);
    border-radius: 8px;
    display: flex;
    padding: 15px;
    align-items: flex-start;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
}

.system-percentage {
    color: var(--green-color);
}

/* Integration page css */

.integration-tabs .tab-content .item.show {
    display: flex;
}

.integration-tabs .tab-content .item {
    display: none;
    border: 1px solid var(--pale-blue);
    border-radius: 20px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 calc(100% / 3 - 15px);
    max-width: calc(100% / 3 - 15px);
    text-align: center;
    justify-content: space-between;
}

.integration-tabs .nav-tabs {
    border-radius: 100px;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    border: 0;
    padding: 4px;
    background: var(--white-color);
}

.integration-tabs .nav-tabs .nav-link.active {
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 100px;
    border: 0;
    transition: linear .2s;
}

.integration-tabs .nav-link:hover {
    border: 0;
    margin: 0;
    outline: 0;
}

.integration-tabs .nav-link {
    color: var(--secondary-color);
    margin-bottom: 0;
    border: 0;
    transition: linear .2s;
}

.integration-tabs .nav-item:focus-visible {
    outline: 0;
}

span.upgrade-box {
    display: flex;
    gap: 5px;
    padding: 8px;
    background: var(--misty-rose);
    border-radius: 8px;
    font-size: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.integration-tabs .tab-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.api-buttons-div {
    display: flex;
    justify-content: center;
    padding: 40px;
    gap: 20px;
}

span.upgrade-box a {
    text-decoration: underline;
    font-weight: 500;
}

/* Add status page css */

.page-add-status .wm-panel__head {
    border-bottom: 0;
    padding: 18px 20px 0;
}

.page-add-status .wm-panel__title {
    border-bottom: 1px solid var(--pale-blue);
    padding-bottom: 12px;
    width: 100%;
}

.solo-available-text {
    display: flex;
    height: -webkit-fill-available;
    padding: 8px 15px;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: var(--light-orange);
}

.upload-placeholder {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Account settings page css */

.info-card,
.holiday-card,
.timezone-card {
    border-radius: 12px;
    background: var(--white-color);
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0%;
}

.calendar-input-group {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 15px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--bright-gray);
}

input.calendar-input {
    border-radius: 0px;
    border: none;
    width: 100% !important;
    padding: 6px 0;
    font-size: 14px;
}

input.calendar-input:focus {
    border-color: var(--white-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
}

/* Organization page css */

.settings-org {
    max-width: -webkit-fill-available !important;
    align-items: start !important;
    text-align: left !important;
    border: none !important;
}

.org-container-main {
    flex-direction: column;
    background: var(--white-color);
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Teams page css */

.teams-div-main {
    display: flex;
    border: 1px solid var(--pale-blue);
    border-radius: 11px;
    padding: 15px;
    justify-content: space-between;
}

.text-2-teams {
    font-size: 14px;
}

.org-container-main.transparent-bg {
    background-color: transparent;
}

.members-table {
    max-width: -webkit-fill-available !important;
}

.members-table th {
    text-align: left;
    padding: 15px 30px;
    border-bottom: none;
}

.members-table td {
    padding: 20px 30px;
    text-align: left;
}

.roles-div {
    max-width: -webkit-fill-available !important;
    align-items: start !important;
    text-align: left !important;
    border: none !important;
    background-color: var(--white-color);
}

.opacity-50 {
    opacity: 0.5 !important;
}

.bordered-container {
    padding: 15px;
    border: 1px solid var(--pale-blue);
    border-radius: 5px;
}

/***** Workspace Dropdown CSS *****/

.workspace-dropdown {
    background-color: var(--white-color);
    border: 1px solid var(--bright-gray);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(10, 10, 10, 0.08);
    position: absolute !important;
    top: 100% !important;
    right: auto !important;
    margin-top: 13px !important;
    padding: 8px 0;
    z-index: 1000;
    transform: none !important;
    width: -webkit-fill-available;
}

.workspace-dropdown .dropdown-item {
    color: var(--secondary-color);
    font-size: 14px;
}

.workspace-dropdown .dropdown-item:hover,
.workspace-dropdown .dropdown-item:focus {
    background-color: var(--seashell-color);
    color: var(--secondary-color);
}

.workspace-dropdown .dropdown-item:active {
    background-color: var(--light-orange);
    color: var(--secondary-color);
}

/* monitor details page css */

.hour-drpdwn {
    width: auto;
    min-width: 150px;
}

.appears-on {
    justify-content: space-between;
}

/* resume btn toggle */

.resume-btn {
    background-color: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    height: 44px;
    padding: 0 16px;

    transition: background-color 0.3s ease;
}

.resume-btn.active {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Status Cards Container */

.status-cards-container {
    display: flex;
    gap: 16px;
    width: 100%;
}

.secondary-text {
    color: var(--gray-color);
    font-size: 12px;
}

.status-card {
    flex: 1;
    border: 1px solid var(--pale-blue);
    background: var(--white-color);
    border-radius: 8px;
    padding: 20px;
    height: -webkit-fill-available;
}

#statusDomainPanel .status-domain-layout {
    width: 100%;
}

#statusDomainPanel .status-domain-block {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#statusDomainPanel .status-domain-block--muted {
    background: transparent;
}

#statusDomainPanel .status-domain-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#statusDomainPanel .status-domain-input-wrap {
    width: 100%;
}

#statusDomainPanel .status-domain-input-group {
    align-items: stretch;
}

#statusDomainPanel .status-domain-input {
    min-height: 44px;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    box-shadow: none;
}

#statusDomainPanel .status-domain-input:focus {
    box-shadow: none;
}

#statusDomainPanel .status-domain-suffix {
    min-height: 44px;
    border: 1.5px solid rgba(204, 204, 204, 0.6);
    border-left: 1px solid rgba(207, 216, 227, 0.9);
    border-radius: 0 10px 10px 0;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
}

#statusDomainPanel .status-domain-meta {
    justify-content: space-between;
}

/* Header */

.monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0;
}

.monitor-avatar {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitor-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
}

.monitor-sub {
    font-size: 14px;
    color: var(--gray-color);
    margin: 2px 0 0 0;
}

.monitor-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.monitor-link:hover {
    color: var(--secondary-color);
}

/* Buttons */

.monitor-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Uptime Bars */

.uptime-bars {
    height: 20px;
    background-color: var(--light-grayish-blue);
    border-radius: 2px;
    /* margin: 12px 0; */
    display: flex;
    gap: 4px;
    padding: 6px 6px 4px 6px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.uptime-bar {
    width: 5.074px;
    height: 16.912px;
    background-color: var(--green-color);
    border-radius: 2px;
    flex: none;
}

.chart-placeholder {
    height: 200px;
    background-color: var(--light-grayish-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Response Time helpers */

.rt-y-axis {
    width: 80px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-color);
}

.rt-chart-area {
    min-height: 200px;
}

.rt-x-axis {
    font-size: 12px;
    color: var(--secondary-color);
}

/* Small helper classes for uptime/stat cards */

.muted-small {
    font-size: 12px;
    color: var(--gray-color);
    font-weight: 500;
    margin-bottom: 0;
}

.big-number {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0;
}

/* Incidents table */

table.monitor-incidents {
    font-size: 12px;
    width: 100%;
    border-collapse: collapse;
}

table.monitor-incidents thead th {
    text-align: left;
    padding: 10px 10px 10px 0px;
    color: var(--gray-color);
    font-weight: 500;
    border-bottom: 1px dashed var(--pale-blue);
}

table.monitor-incidents tbody tr {
    border-bottom: 1px dashed var(--pale-blue);
}

table.monitor-incidents td {
    padding: 10px 10px 10px 0px;
    vertical-align: middle;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-weight: 700;
}

/* Sign-in and SSO helpers */

.monitor-divider-vertical {
    border-left: 1px solid var(--secondary-color);
    height: 82px;
    margin: 0 10px;
    align-self: center;
}

/* Domain & SSL section helpers */

.dashed-divider {
    border-top: 1px solid var(--divider);
}

.upgrade-badge {
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
}

.upgrade-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.monitor-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
}

.monitor-status-dot-up {
    background: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12);
}

.monitor-status-dot-down {
    background: var(--red-color);
    box-shadow: 0 0 0 4px rgba(255, 67, 70, 0.12);
}

.monitor-status-dot-status-paused {
    background: #374151;
    box-shadow: 0 0 0 4px rgba(55, 65, 81, 0.12);
}

.monitor-detail-modern .status-card,
.monitor-detail-modern .monitor-card-parent {
    height: 100%;
    align-items: flex-start;
}

.monitor-detail-mini-card {
    padding: 16px;
    gap: 8px;
    margin-bottom: 0;
}

.monitor-detail-mini-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(254, 127, 45, 0.10);
}

.monitor-detail-locked {
    background: var(--anti-flash-white);
}

.monitor-detail-small-btn {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 12px;
    width: fit-content;
}

.monitor-detail-chart-card {
    gap: 16px;
}

.monitor-detail-range {
    display: inline-flex;
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white-color);
}

.monitor-detail-range button {
    border: 0;
    border-right: 1px solid var(--pale-blue);
    background: transparent;
    color: var(--gray-color);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
}

.monitor-detail-range button:last-child {
    border-right: 0;
}

.monitor-detail-range button.active {
    background: var(--secondary-color);
    color: var(--white-color);
}

.monitor-detail-chart {
    height: 190px;
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--snow1-color));
    padding: 12px;
}

.monitor-detail-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

.monitor-detail-grid-line {
    stroke: #E8EEF5;
    stroke-width: 1;
}

.monitor-detail-chart-fill {
    fill: url(#monitorDetailChartGradient);
}

.monitor-detail-chart-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linecap: round;
}

.monitor-detail-chart-point {
    fill: var(--white-color);
    stroke: var(--primary-color);
    stroke-width: 3;
}

.monitor-detail-region-bar {
    height: 7px;
    min-width: 120px;
    max-width: 150px;
    border-radius: 20px;
    background: var(--anti-flash-white);
    overflow: hidden;
}

.monitor-detail-region-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green-color);
}

.monitor-detail-region-bar span.down {
    background: var(--red-color);
}

.monitor-detail-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.monitor-detail-pill.success {
    color: var(--green-color);
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
}

.monitor-detail-pill.danger {
    color: var(--red-color);
    background: var(--misty-rose);
    border: 1px solid var(--bright-red);
}

.monitor-detail-pill.warning {
    color: #92400E;
    background: #FFF7E6;
    border: 1px solid #FED7AA;
}

.monitor-detail-incidents td,
.monitor-detail-incidents th {
    white-space: nowrap;
}

.monitor-detail-uptime-bars .uptime-bar-down {
    background: var(--red-color);
}

/* monitor details page css */

.response-tabs {
    border-bottom: 1px solid #E5E5E5;
    gap: 20px;
}

.response-tab-link {
    border: none;
    background: none;
    padding: 12px 0;
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    transition: all 0.2s ease;
}

.response-tab-link:hover:not(.active) {
    color: #666666;
}

.copy-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.replay-tab-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Metadata Section */

.metadata-label {
    font-weight: 500 !important;
    color: var(--secondary-color) !important;
}

.metadata-input-wrapper {
    position: relative;
}

.metadata-copy-btn {
    position: absolute;
    right: 12px;
    top: 55%;
}

/* Timeline Section */

.timeline-events {
    position: relative;
    padding-left: 40px;
}

.timeline-events::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E5E5E5;
}

.timeline-event {
    display: flex;
    position: relative;
}

.timeline-marker {
    position: absolute;
    left: -39px;
    top: 0;
}

/* Timeline Comment Input */

.user-avatar-sm {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
}

.timeline-post-list {
    color: var(--secondary-color);
    padding-left: 20px;
}

/* Comment Box with Icon Inside */

.comment-attach-icon {
    position: absolute;
    right: 12px;
    top: 45%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

/* choose plan */

.plan-card {
    border-radius: 16px;
    border: 1px solid rgba(5, 44, 84, 0.30);
    padding: 18px;
    height: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.price {
    font-weight: 500;
    color: var(--primary-color);
}

.price small {
    color: var(--deep-navy-blue);
    display: block;
}

.features {
    margin-top: 24px;
}

.features li {
    margin-bottom: 5px;
    color: var(--deep-navy-blue);
    font-size: 14px;
}

.border-b {
    border-bottom: 1px dashed var(--silver-color);
    width: -webkit-fill-available;
    margin-top: 5px;
}

/* help tooltip css */

.tooltip.custom-tooltip .tooltip-inner {
    background-color: var(--secondary-color) !important;
    color: var(--white-color);
    font-size: 11px !important;
    font-weight: 400;
    line-height: 1.45;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    max-width: 240px;
}

/* Email link inside the help tooltip — slightly emphasized but same compact size */
.tooltip.custom-tooltip .tooltip-inner a {
    font-size: 11px !important;
    color: var(--white-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tooltip.monitor-type-tooltip .tooltip-inner {
    background-color: var(--secondary-color) !important;
    color: var(--white-color);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px;
    max-width: 320px;
}

.tooltip {
    pointer-events: auto;
}

/* status detail page css */

.setting-bsc-info-first-card {
    justify-content: flex-start;
}

.setting-bsc-info {
    align-items: normal !important;
}

/* Remove default nav link underline and padding */

.nav-link {
    position: relative;
    padding-bottom: 0.5rem;
    color: #000;
    cursor: pointer;
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.nav-link:hover {
    color: #FF6600;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    /* border-color: transparent; */
    background-color: transparent;
    box-shadow: none;
}

/* filter drpdwn */

ul.dropdown-menu.mt-1.show {
    padding: 10px;
    min-width: max-content;
    border: 1px solid var(--pale-blue);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.drpdwn-label .dropdown-menu li {
    color: var(--black-color) !important;
}

.drpdwn-label {
    padding: 10px 5px;
}

.drpdwn-h {
    overflow: auto;
    scrollbar-width: none;
}

/* pagination */

/* Pagination row that sits OUTSIDE the table card on its own slate-100 bg.
   No border, no white surface — just a row of buttons + the count summary. */
.list-pagination {
    padding: 10px 4px 0;
    background: transparent;
}

.list-pagination__summary {
    font-size: 12px;
    color: var(--gray-color, #64748B);
}

/* When the row wraps (e.g. narrow tablets), `justify-content: space-between` becomes
   inert per line, so the nav would otherwise fall to flex-start. Stack to a column
   with summary aligned left and nav aligned right via `align-self`. */
@media (max-width: 768px) {
    .list-pagination {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .list-pagination > nav {
        align-self: flex-end;
    }

    .list-pagination__summary {
        align-self: flex-start;
    }
}

/* ============================================================
   COMMON DATA-TABLE PATTERN
   Apply by giving the surrounding markup these classes / structure:

     <div class="data-toolbar"> ... search / filters / sort / bulk ... </div>
     <div class="data-surface">
       <table class="custom-table"> ... </table>
     </div>
     <div class="list-pagination"> ... </div>

   `custom-table` already exists and is the table itself. `data-surface`
   wraps it in the white rounded card. `data-toolbar` and
   `list-pagination` sit on the page background above/below.

   First column (.checkbox-cell or first th/td) is reserved for selection.
   Last column (containing .menu-dots) is reserved for row actions.
   Both get fixed compact widths so the middle columns can flex naturally.
   ============================================================ */

/* Toolbar — page bg, no card surface. Use directly on the existing
   .d-flex toolbar wrappers or as a standalone class. */
.data-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: transparent;
}

/* White card that wraps the table. */
.data-surface {
    background: var(--white-color);
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    overflow: visible;
}

/* URL links inside list tables — underline on hover so they read as clickable.
   Bootstrap's .text-decoration-none class strips the default underline; this
   rule reinstates one on :hover/:focus for any .primary-color link in a table cell. */
.custom-table td a.primary-color:hover,
.custom-table td a.primary-color:focus,
.custom-table td a.primary-color:hover + span.primary-color,
.custom-table td a.primary-color:focus + span.primary-color {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* First column — checkbox / avatar selection cell. Reserve ~44px. */
.custom-table th:first-child,
.custom-table td:first-child,
.custom-table .checkbox-cell {
    width: 44px !important;
    padding-left: 16px !important;
    padding-right: 8px !important;
}

/* Last column — row actions (3-dot menu). Reserve ~56px and right-align. */
.custom-table th:last-child,
.custom-table td:last-child {
    width: 56px !important;
    padding-right: 16px !important;
    padding-left: 8px !important;
    text-align: right;
}

/* The .menu-dots trigger sits at the end of its td — anchor it right */
.custom-table td:last-child .menu-dots {
    margin-left: auto;
}

/* Compact pagination buttons — 30×30, 12px text, 6px radius (reference values). */
.list-pagination__pages .page-link {
    min-width: 30px !important;
    width: 30px;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    border: 1px solid var(--slate-200) !important;
    color: var(--gray-color, #475569) !important;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.list-pagination__pages .page-link:hover {
    border-color: var(--deep-navy-blue) !important;
    color: var(--deep-navy-blue) !important;
}

.list-pagination__pages .page-item.active .page-link {
    background-color: var(--deep-navy-blue) !important;
    border-color: var(--deep-navy-blue) !important;
    color: var(--white-color) !important;
}

.list-pagination__pages .page-item.disabled .page-link {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Compact warning / info alert — used for SSL expiry, plan limits, etc.
   Doubled `.compact-alert.compact-alert` raises specificity to (0,2,0) so we
   beat Bootstrap's .alert / .alert-warning / .alert-dismissible rules without
   needing !important on every property. */
.compact-alert.compact-alert {
    padding: 8px 12px;
    border-radius: 8px;
    border-color: #FDE68A;
    background-color: #FFFBEB;
}

.compact-alert__text {
    font-size: 12px;
    color: #92400E;
    line-height: 1.5;
    margin: 0;
}

.compact-alert__text strong {
    font-weight: 700;
    color: #78350F;
}

.compact-alert__text a {
    color: #92400E;
    font-weight: 600;
    text-decoration: none;
}

.compact-alert__text a:hover {
    text-decoration: underline;
}

.compact-alert.compact-alert .btn-close {
    /* Flow the X in the flex row instead of Bootstrap's absolute positioning */
    position: static;
    font-size: 10px;
    padding: 4px;
    margin: 0;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Drop the right padding .alert-dismissible reserves for the absolute close button */
.compact-alert.compact-alert.alert-dismissible {
    padding-right: 12px;
}

.compact-alert.compact-alert .btn-close:hover {
    opacity: 1;
}

/* Success variant — green info banner (e.g. Auto-attach note) */
.compact-alert.compact-alert--success {
    background-color: #F0FDF4;
    border-color: #BBF7D0;
}

.compact-alert.compact-alert--success .compact-alert__text {
    color: #15803D;
}

.compact-alert.compact-alert--success .compact-alert__text strong {
    color: #14532D;
}

.compact-alert.compact-alert--success .compact-alert__text a {
    color: #15803D;
}

.pagination {
    align-items: center;
}

.pagination .page-item {
    display: flex;
}

.page-link {
    background-color: var(--white-color);
    color: var(--secondary-color);
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.page-item.disabled .page-link {
    opacity: 0.65;
}

.page-item.active .page-link {
    background-color: var(--secondary-color);
}

.badge {
    font-weight: 600;
}

.tooltip-inner a {
    font-weight: 500 !important;
}

.back-svg-btn {
    margin: 8px auto;
    padding: 8px !important;
}

/* Back to Main Menu — subtle ghost button, not a primary CTA */
.back-svg-btn.tertiary-btn {
    background: transparent !important;
    border: 1px solid var(--slate-200) !important;
    color: var(--deep-navy-blue) !important;
    padding: 8px 12px !important;
    padding: 8px 12px !important;
    width: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.back-svg-btn.tertiary-btn:hover {
    background: var(--slate-50) !important;
    border-color: var(--slate-400) !important;
}

.back-svg-btn.tertiary-btn svg path {
    fill: var(--deep-navy-blue);
}

.back-svg-btn .back-to-main.text-white {
    color: var(--deep-navy-blue) !important;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

/* side-menu-differentiator */

.settings-bg {
    background-color: var(--side-menu-differentiator);
}

/* filters */

.card-body {
    border: none !important;
}

.list-table,
.list-table tr,
.list-table td,
.list-table th,
.incidents-table,
.incidents-table tr,
.incidents-table td,
.incidents-table th {
    color: var(--secondary-color) !important;
}

.pagination li a {
    border-radius: 4px;
}

.list-table tr,
.list-table td,
.list-table th,
.incidents-table tr,
.incidents-table td,
.incidents-table th {
    padding: 10px 12px !important;
}

.list-table tbody tr:last-child td,
.list-table tbody tr:last-child th {
    border-bottom: 0 !important;
}

.table-header {
    width: -webkit-fill-available;
    overflow: auto;
}

.http-drpdwn:hover {
    background-color: var(--slate-200) !important;
    color: var(--input-text);
}

.input-group-prepend button {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 6px 0px 0px 6px;
}

.page-api-monitoring .am-test-response-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #0F172A;
    border: 0;
}

.page-api-monitoring .am-test-response-meta {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #DCFCE7;
    color: #15803D;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    z-index: 1;
    white-space: nowrap;
}

.page-api-monitoring .am-test-code-scroll {
    max-height: 240px;
    overflow-x: auto;
    overflow-y: auto;
    min-width: 0;
}

.page-api-monitoring .am-test-code-block {
    margin: 0;
    padding: 28px 14px 12px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.7;
    background: transparent;
    white-space: pre;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    min-width: 0;
}

.page-api-monitoring .am-test-assertions__title {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-600);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.page-api-monitoring .am-test-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-radius: 6px;
    background: #F0FDF4;
    color: #15803D;
    padding: 6px 10px;
    font-size: 11px;
}

.page-api-monitoring .am-test-result-item+.am-test-result-item {
    margin-top: 5px;
}

.am-endpoint-group {
    align-items: stretch;
}

.am-endpoint-group>.dropdown {
    display: flex;
}

.am-endpoint-group>.dropdown>button {
    height: auto;
    padding: 8px 14px;
    border-radius: 0;
}

.am-endpoint-group>.dropdown:first-child>button {
    border-radius: 8px 0 0 8px;
}

.am-endpoint-group>.dropdown.wm-url-proto>button {
    border-left: 0;
}

.am-endpoint-group>input.custom-input {
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

.business-badge {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.time-drpdwn {
    overflow: hidden;
    font-size: 12px;
}

.checkmark {
    color: var(--primary-color);
    font-size: 16px;
    line-height: 1;
    margin-left: 16px;
    flex: 0 0 auto;
}

.dropdown-menu.dropdown-item {
    color: var(--secondary-color);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.alert-badge {
    width: fit-content;
    background-color: var(--primary-color-badge);
    padding: 0 10px;
    font-weight: 500;
    font-size: 12px;
    border: 1px solid var(--primary-color);
}

.h-265px {
    height: 265px !important;
}

/* invite member popup */

.invite-member-role-popup {
    width: 560px;
    max-width: 560px;
}

#inviteModal .modal-content,
#editMemberModal .modal-content,
#changeRoleModal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(12, 35, 64, 0.14);
}

#inviteModal .invite-modal-header,
#editMemberModal .invite-modal-header,
#changeRoleModal .invite-modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(207, 216, 227, 0.75);
}

#inviteModal .invite-modal-title,
#editMemberModal .invite-modal-title,
#changeRoleModal .invite-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 0;
}

#inviteModal .invite-modal-subtitle,
#editMemberModal .invite-modal-subtitle,
#changeRoleModal .invite-modal-subtitle {
    font-size: 12px;
    line-height: 1.5;
    color: #64748B !important;
    margin-top: 2px;
}

#inviteModal .btn-close {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(207, 216, 227, 0.95);
    border-radius: 10px;
    background-size: 10px;
    opacity: 1;
    box-shadow: none;
}

#inviteModal .invite-modal-body,
#editMemberModal .invite-modal-body,
#changeRoleModal .invite-modal-body {
    padding: 18px 22px 22px;
    gap: 16px !important;
}

#inviteModal .invite-modal-plan-alert {
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #FDE68A !important;
    background-color: #FFFBEB !important;
    line-height: 1.5;
}

#inviteModal .invite-modal-plan-alert > span[aria-hidden] {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

#inviteModal .invite-modal-plan-alert p {
    font-size: 12px !important;
    color: #92400E;
    margin: 0;
}

#inviteModal .invite-modal-plan-alert p strong {
    font-weight: 700;
    color: #78350F;
}

#inviteModal .invite-modal-plan-alert p a {
    color: #92400E;
    font-weight: 600;
}

#inviteModal .invite-modal-section {
    gap: 8px !important;
}

#inviteModal .invite-modal-label {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 4px;
}

#inviteModal .invite-note-textarea {
    min-height: 64px;
    padding: 8px 11px;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background: #F8FAFC;
    font-size: 12px;
    line-height: 1.5;
    color: #0F172A;
    resize: none;
}

#inviteModal .invite-note-textarea:focus {
    border-color: #0D2040;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.07);
    outline: none;
}

/* Email tag input (chip-style) — matches reference's .email-tag-wrap */
#inviteModal .invite-modal-email-input {
    min-height: 40px;
    padding: 5px 8px;
    gap: 5px !important;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: text;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#inviteModal .invite-modal-email-input:focus-within {
    border-color: #0D2040;
    border-width: 1.5px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.07);
}

#inviteModal .invite-modal-help {
    font-size: 10px;
    line-height: 1.5;
    color: #94A3B8 !important;
    margin-top: 2px;
}

#inviteModal .invite-modal-placeholder {
    font-size: 13px;
    line-height: 1;
    color: #98a6bb !important;
}

/* Email chip — reference's .email-tag */
#inviteModal .invite-email-badge {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: #0D2040 !important;
    background: #EDF2FF !important;
    border: 1px solid #BFDBFE !important;
    padding: 3px 8px !important;
    border-radius: 100px !important;
}

#inviteModal .email-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    white-space: nowrap;
}

#inviteModal .email-tag-x {
    color: #7f95b7;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

#inviteModal .email-tag-inp {
    flex: 1 1 160px;
    min-width: 160px;
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 4px 0;
    font-size: 13px;
    color: var(--secondary-color);
    background: transparent;
}

#inviteModal .email-tag-inp:focus {
    outline: none;
    box-shadow: none;
}

#inviteModal .email-tag-inp::placeholder {
    color: #98a6bb;
    opacity: 1;
}

#inviteModal .invite-role-label-wrap img {
    width: 14px;
    height: 14px;
}

#inviteModal .invite-role-grid {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

/* Role card — matches reference Spectra Design/invite_member.html .role-card
   default:  1.5px slate-200 border, slate-50 bg, 9px radius, 10/12 padding
   hover:    slate-400 border, very-light bg #FAFBFC
   selected: navy border, light-navy #EDF2FF bg, filled navy radio */
#inviteModal .invite-role-card {
    min-height: 112px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1.5px solid var(--slate-200, #E2E8F0) !important;
    background: var(--slate-50, #F8FAFC);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    gap: 0;
    user-select: none;
}

#inviteModal .invite-role-card:hover {
    border-color: var(--slate-400, #94A3B8) !important;
    background: #FAFBFC;
}

#inviteModal .invite-role-card-active,
#inviteModal .invite-role-card-active:hover {
    background: #EDF2FF !important;
    border: 1.5px solid var(--deep-navy-blue, #0D2040) !important;
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.08);
}

/* Role card content — matches reference's .rc-icon / .rc-name / .rc-desc */
#inviteModal .invite-role-icon {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 4px;
}

#inviteModal .invite-role-title {
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 2px;
}

#inviteModal .invite-role-description {
    font-size: 10px;
    line-height: 1.4;
    color: #64748B !important;
}

#inviteModal .invite-role-badges {
    gap: 4px !important;
    margin-top: 6px;
}

/* Role badge — small square pill (3px radius, not rounded-pill) matching reference's .rc-perm */
#inviteModal .invite-role-badge {
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    letter-spacing: 0.01em;
}

/* Green/blue/gray badge palettes — reference's .rcp-green / .rcp-blue / .rcp-gray */
#inviteModal .invite-role-badge.bg-success-subtle,
#inviteModal .invite-role-badge.text-success {
    background: #F0FDF4 !important;
    color: #15803D !important;
    border-color: #BBF7D0 !important;
}

#inviteModal .invite-role-badge.bg-primary-subtle,
#inviteModal .invite-role-badge.text-primary {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

#inviteModal .invite-role-badge.bg-light,
#inviteModal .invite-role-badge.text-secondary {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

#inviteModal .invite-role-check .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-color: var(--slate-300, #CBD5E1);
    background: var(--white-color);
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

/* Selected radio — filled navy with white dot inside (matches reference .rc-radio.selected) */
#inviteModal .invite-role-check .form-check-input:checked {
    background-color: var(--deep-navy-blue, #0D2040) !important;
    border-color: var(--deep-navy-blue, #0D2040) !important;
}

#inviteModal .invite-role-check .form-check-input:focus {
    border-color: var(--deep-navy-blue, #0D2040) !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 32, 64, 0.15) !important;
}

#inviteModal .invite-note-toggle {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0F172A;
    font-size: 12px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px !important;
}

#inviteModal .invite-note-toggle-icon {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #94A3B8;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#inviteModal .invite-note-toggle .semibold {
    font-size: 12px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.4;
}

#inviteModal .invite-note-toggle .font-14 {
    font-size: 10px !important;
    color: #94A3B8;
    font-weight: 400;
    line-height: 1.4;
}

#inviteModal .invite-note-content {
    padding-top: 8px;
}

/* Footer — matches reference's .modal-footer (slate-50 bg, slate-100 top border) */
#inviteModal .invite-modal-footer,
#editMemberModal .invite-modal-footer,
#changeRoleModal .invite-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #F1F5F9;
    gap: 10px !important;
    background: #F8FAFC;
}

/* Cancel — matches reference's .btn-secondary */
#inviteModal .invite-modal-cancel-btn {
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 13px;
    color: #0F172A;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#inviteModal .invite-modal-cancel-btn:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
}

/* Send invite — matches reference's .btn-primary (flex:1, padding 10px, 13px / 600 / orange) */
#inviteModal .invite-modal-send-btn {
    flex: 1;
    padding: 10px;
    background: #F97316;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

#inviteModal .invite-modal-send-btn:hover {
    background: #EA6C0A;
    transform: translateY(-1px);
}

#inviteModal .invite-modal-send-btn:active {
    transform: translateY(0);
}

/* "View full permissions comparison" toggle — matches reference's .perms-toggle */
#inviteModal [data-bs-target="#permissionsComparison"] {
    padding: 8px 0 0;
    margin-top: 12px;
    border-top: 1px solid #F1F5F9;
    cursor: pointer;
    user-select: none;
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
}

#inviteModal [data-bs-target="#permissionsComparison"] .semibold {
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
}

#inviteModal [data-bs-target="#permissionsComparison"] .font-12 {
    font-size: 10px !important;
    color: #94A3B8;
    transition: transform 0.15s ease;
}

#inviteModal [data-bs-target="#permissionsComparison"][aria-expanded="true"] .font-12 {
    transform: rotate(180deg);
}

#inviteModal #permissionsComparison {
    margin-top: 10px;
}

#inviteModal #permissionsComparison .table-responsive {
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    overflow: hidden;
}

/* Permissions table — matches reference's .pt (navy header, group rows, etc.) */
.permission-table,
.permission-table tr,
.permission-table td,
.permission-table th {
    border: none !important;
}

#inviteModal .permission-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 0;
}

#inviteModal .permission-table thead tr {
    background: #0D2040;
}

#inviteModal .permission-table thead th {
    padding: 7px 10px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    background: transparent !important;
}

#inviteModal .permission-table thead th:first-child {
    text-align: left;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    text-transform: none;
    letter-spacing: 0;
}

#inviteModal .permission-table thead th p {
    margin: 0;
    color: inherit !important;
    font-size: inherit !important;
}

#inviteModal .permission-table tbody tr {
    border-bottom: 1px solid #F8FAFC !important;
}

#inviteModal .permission-table tbody tr:last-child {
    border-bottom: none !important;
}

#inviteModal .permission-table tbody tr:nth-child(even) {
    background: #F8FAFC;
}

#inviteModal .permission-table tbody td {
    padding: 6px 10px !important;
    color: #0F172A !important;
    font-size: 11px !important;
    text-align: center;
    vertical-align: middle;
    background: transparent !important;
}

#inviteModal .permission-table tbody td:first-child {
    text-align: left;
    color: #475569 !important;
    font-weight: 400;
}

/* Section rows ("Monitors", "Alerts", etc.) — uppercase group labels */
#inviteModal .permission-table tbody tr.section-row {
    background: #F1F5F9 !important;
}

#inviteModal .permission-table tbody tr.section-row td {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 10px !important;
    background: #F1F5F9 !important;
    text-align: left;
}

/* Orange tick — matches reference's .check-yes green color (but keep brand orange for ticks) */
#inviteModal .permission-table .orange-tick::before {
    color: #F97316 !important;
}

.orange-tick::before {
    content: "";
    background-image: url(../images/tick.svg);
    position: relative;
    height: 12px;
    width: 14px;
    background-size: contain;
    background-repeat: no-repeat;
}

.dash::before {
    content: "";
    background-image: url(../images/dash.svg);
    position: relative;
    height: 12px;
    width: 14px;
    background-size: contain;
    background-repeat: no-repeat;
}

.permission-table tr th:nth-child(2),
.permission-table tr td:nth-child(2) {
    background-color: var(--invite-member-active);
}

/* alert popup */

.alert-popup {
    max-width: 650px;
}

.alert-card {
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    height: 95px;
}

.alert-card img {
    height: 30px;
    width: 30px;
}

.alert-card:hover {
    background-color: var(--invite-member-active);
}

.webhook-sample-payload {
    max-height: 160px !important;
    height: 160px;
    overflow: auto;
}

.role-table {
    border: 1px solid var(--light-grey);
}

.role-table tr,
.role-table td,
.role-table th {
    color: var(--secondary-color);
}

.table-pagination {
    position: relative;
    z-index: 0;
}

.submenu-heading-icon {
    padding-left: 13px;
}

/* billing */

.billing_check img {
    height: 18px;
    width: 18px;
}

/* Current Plan hero — applies the dark gradient card and re-skins spacing/headings for billing. */
.billing-page-content .hb-url-card {
    border-radius: 10px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #0D2040 0%, #1E3A5F 100%);
    border: none;
    color: rgba(255, 255, 255, 0.92);
}

.billing-page-content .hb-url-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.billing-page-content .hb-url-card.gap-3 {
    gap: 10px !important;
}

.billing-page-content .hb-url-card > .border-top {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.billing-page-content .hb-param-card {
    height: 100%;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.billing-page-content .billing-plan-heading {
    font-size: 28px;
    line-height: 1.15;
}

.billing-page-content .hb-url-card .secondary-btn {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    padding: 8px 18px;
}

.billing-page-content .hb-url-card .secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
}

.billing-page-content .billing-cycle-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
}

.billing-page-content .progress {
    height: 3px;
}

.billing-page-content .progress-bar {
    height: 3px;
}

.billing-page-content .billing-card-icon {
    width: 38px;
    height: 38px;
    background: #DBEAFE;
    color: var(--secondary-color);
    flex: 0 0 auto;
}

.billing-page-content .billing-total-row {
    background: #F8FAFC;
    border-radius: 8px;
    margin: 2px -4px -4px;
    padding: 12px 10px !important;
}

.billing-page-content .billing-total-row span {
    font-weight: 800 !important;
    color: var(--secondary-color) !important;
}

.billing-page-content #billingTotalAmount {
    color: var(--primary-color) !important;
    font-size: 18px;
    font-weight: 800 !important;
}

.billing-page-content #billingCountryDropdown img {
    width: 10px;
    height: auto;
}

.billing-page-content .billing-paid-badge {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
    font-weight: 600;
}

.billing-page-content .billing-subscription-row {
    flex-wrap: nowrap;
}

.billing-page-content .billing-subscription-copy {
    min-width: 0;
}

.billing-page-content .billing-invoices-scroll {
    padding: 16px 18px;
}

/* Invoice / Payments table — uses shared .list-table / .custom-table; match the
   monitor-list compact sizing (12px body, 11px header) and give the first/last
   cells extra inset so content doesn't hug the panel's rounded edges. */
.billing-page-content .custom-table th,
.billing-page-content .custom-table td,
.billing-page-content .list-table th,
.billing-page-content .list-table td {
    font-size: 12px;
    padding: 11px 14px !important;
}

.billing-page-content .custom-table th {
    font-size: 11px !important;
}

.billing-page-content .custom-table th:first-child,
.billing-page-content .custom-table td:first-child,
.billing-page-content .list-table th:first-child,
.billing-page-content .list-table td:first-child {
    padding-left: 20px !important;
}

.billing-page-content .custom-table th:last-child,
.billing-page-content .custom-table td:last-child,
.billing-page-content .list-table th:last-child,
.billing-page-content .list-table td:last-child {
    padding-right: 20px !important;
}

/* Pagination footer — lives inside .wm-panel__body so it reads as part of the
   same card surface as the table, separated by a thin slate divider. */
.billing-page-content .billing-invoice-pagination {
    padding: 12px 20px;
    border-top: 1px solid var(--slate-200);
    background: #fff;
}

/* ============================================================
   Configure-channel modals (alerts.html) — keep inputs on slate-50 across
   empty / filled / focus states, and tighten the title+subtitle header. */
#configureEmailModal .modal-content input.custom-input,
#configureSlackModal .modal-content input.custom-input,
#configureDiscordModal .modal-content input.custom-input,
#configureGoogleChatModal .modal-content input.custom-input,
#configureMSTeamsModal .modal-content input.custom-input,
#configureWebhookModal .modal-content input.custom-input {
    background: var(--input-bg-empty) !important;
    background-color: var(--input-bg-empty) !important;
}

#configureEmailModal .modal-content input.custom-input:focus,
#configureSlackModal .modal-content input.custom-input:focus,
#configureDiscordModal .modal-content input.custom-input:focus,
#configureGoogleChatModal .modal-content input.custom-input:focus,
#configureMSTeamsModal .modal-content input.custom-input:focus,
#configureWebhookModal .modal-content input.custom-input:focus,
#configureEmailModal .modal-content input.custom-input:not(:placeholder-shown),
#configureSlackModal .modal-content input.custom-input:not(:placeholder-shown),
#configureDiscordModal .modal-content input.custom-input:not(:placeholder-shown),
#configureGoogleChatModal .modal-content input.custom-input:not(:placeholder-shown),
#configureMSTeamsModal .modal-content input.custom-input:not(:placeholder-shown),
#configureWebhookModal .modal-content input.custom-input:not(:placeholder-shown) {
    background: var(--input-bg-empty) !important;
    background-color: var(--input-bg-empty) !important;
}

/* Header — title 16px semibold navy, subtitle 12px slate-400. */
#configureEmailModal h5,
#configureSlackModal h5,
#configureDiscordModal h5,
#configureGoogleChatModal h5,
#configureMSTeamsModal h5,
#configureWebhookModal h5 {
    font-size: 16px !important;
    line-height: 1.3 !important;
}

#configureEmailModal h5 + small,
#configureSlackModal h5 + small,
#configureDiscordModal h5 + small,
#configureGoogleChatModal h5 + small,
#configureMSTeamsModal h5 + small,
#configureWebhookModal h5 + small {
    color: #94A3B8 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Labels above each field — tighter than h5, navy, 13px. */
#configureEmailModal .form-label,
#configureSlackModal .form-label,
#configureDiscordModal .form-label,
#configureGoogleChatModal .form-label,
#configureMSTeamsModal .form-label,
#configureWebhookModal .form-label {
    font-size: 13px !important;
    margin-bottom: 6px;
}

/* ============================================================
   Invoice detail slide-over (Bootstrap offcanvas, right side)
   Opens when an invoice row is clicked from the Invoice / Payments table.
   ============================================================ */
.invoice-detail-panel {
    width: 480px;
}

.invoice-detail-panel .invoice-detail-header {
    padding: 20px 22px 18px;
    align-items: flex-start;
    border-bottom: 1px solid var(--slate-200);
}

.invoice-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F1F5F9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.invoice-detail-icon--paid {
    background: #DCFCE7;
}

.invoice-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.3;
}

.invoice-detail-subtitle {
    font-size: 13px;
    color: var(--slate-400, #94A3B8);
}

.invoice-detail-body {
    overflow-y: auto;
}

/* Pink alert banner — overdue state. */
.invoice-detail-alert {
    margin: 16px 22px;
    padding: 12px 16px;
    background: #FEE2E2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-detail-alert__text {
    font-size: 13px;
    font-weight: 600;
    color: #1F2937;
}

.invoice-detail-alert__cta {
    background: #fff;
    border: 1px solid var(--slate-300);
    border-radius: 7px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-color);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.invoice-detail-alert__cta:hover {
    background: var(--slate-50);
    border-color: var(--slate-400);
}

/* Detail / cost sections — separated by hairline divider. */
.invoice-detail-section {
    padding: 18px 22px;
    border-bottom: 1px solid var(--slate-200);
}

.invoice-detail-section:last-of-type {
    border-bottom: 0;
}

.invoice-detail-field__label {
    font-size: 12px;
    color: var(--slate-400, #94A3B8);
    font-weight: 400;
}

.invoice-detail-field__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
}

.invoice-detail-field__value--muted {
    color: var(--slate-400, #94A3B8);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.invoice-detail-link {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
}

.invoice-detail-link:hover {
    text-decoration: underline;
}

.invoice-detail-section__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0 0 4px;
}

.invoice-detail-section__subtitle {
    font-size: 13px;
    color: var(--slate-400, #94A3B8);
    margin: 0 0 14px;
}

.invoice-detail-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--slate-600);
    padding: 6px 0;
}

.invoice-detail-line--total {
    font-weight: 700;
    color: var(--secondary-color);
}

.invoice-detail-divider {
    height: 1px;
    background: var(--slate-200);
    margin: 10px 0;
}

/* Sticky footer with Download PDF CTA. */
.invoice-detail-footer {
    padding: 16px 22px 24px;
}

.invoice-detail-download {
    width: 100%;
    background: #fff;
    border: 1px solid var(--slate-300);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.invoice-detail-download:hover {
    background: var(--slate-50);
    border-color: var(--slate-400);
}

.billing-page-content .billing-invoice-row-tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

.billing-page-content .billing-invoice-row-tr:hover td {
    background: var(--slate-50);
}

.billing-page-content .billing-invoice-chev {
    color: #94A3B8;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

/* Outlined status pills — Upcoming (slate), Overdue (red), Paid (green). */
.billing-page-content .invoice-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid currentColor;
    background: transparent;
    line-height: 1.5;
}

.billing-page-content .invoice-status-pill--upcoming {
    color: #64748B;
}

.billing-page-content .invoice-status-pill--overdue {
    color: #DC2626;
}

.billing-page-content .invoice-status-pill--paid {
    color: #15803D;
}

.billing-page-content .billing-invoice-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.billing-page-content .billing-invoice-date {
    flex: 0 0 112px;
}

.billing-page-content .billing-invoice-desc {
    min-width: 0;
}

.billing-page-content .billing-invoice-amount {
    flex: 0 0 72px;
    text-align: right;
}

.billing-page-content .billing-paid-badge {
    flex: 0 0 54px;
    width: 54px;
    justify-content: center;
}

.billing-page-content .billing-pdf-link {
    flex: 0 0 32px;
    text-align: right;
}

.billing-page-content .billing-current-plan-text {
    border-top: 1px solid var(--pale-blue);
    padding-top: 12px;
}

.billing-page-content .billing-upgrade-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.billing-page-content .billing-upgrade-card {
    padding-top: 24px;
}

.billing-page-content .plan-card.active {
    background: #fff5ee;
}

.billing-page-content .plan-card>button,
.billing-page-content .plan-card>.billing-current-plan-text {
    margin-top: auto !important;
}

@media only screen and (max-width: 799.98px) {
    .billing-page-content .billing-invoices-scroll {
        overflow-x: auto;
    }

    .billing-page-content .billing-invoices-scroll .billing-invoice-row {
        gap: 12px !important;
        min-width: 500px;
    }
}

/***** monthly-plan-page Page CSS *****/

.billing-toggle {
    gap: 5px;
    border: 1px solid rgba(207, 216, 227, 0.9);
    border-radius: 12px;
    background: var(--white-color);
    padding: 5px;
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.04);
}

.billing-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
}

.billing-toggle-btn.active {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 3px 10px rgba(254, 127, 45, 0.35);
}

.billing-save-note {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px 0 8px;
    white-space: nowrap;
}

/* ============================================
   Plan pricing (monthly/annual toggle) + popular ribbon + per-card CTA
   ============================================ */

/* "Save 2 months" pill inside the Annual toggle button */
.billing-save-pill {
    display: inline-block;
    background: #DCFCE7;
    color: #15803D;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: 6px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    line-height: 1.4;
}

.billing-toggle-btn.active .billing-save-pill {
    background: #fff;
    color: #15803D;
}

/* Plan price block — swap monthly/annual based on .annual-active on container */
.plan-price {
    margin: 0;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
}

.plan-price-annual {
    display: none;
}

.plans-container.annual-active .plan-price-monthly {
    display: none;
}

.plans-container.annual-active .plan-price-annual {
    display: inline;
}

.plan-annual-note {
    display: none;
    font-size: 13px;
    font-weight: 400;
    color: #0f172a;
    margin-top: 0;
    line-height: 1.2;
}

.plans-container.annual-active .plan-annual-note {
    display: block;
}

.plan-annual-note del {
    color: var(--slate-400);
    text-decoration: line-through;
    margin-right: 2px;
}

.plan-period {
    display: inline;
    color: var(--slate-600);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 0;
}

/* Per-card CTA — pinned to bottom of card */
.plan-card {
    display: flex;
    flex-direction: column;
    /* Stretch to full column height so CTAs across cards land on the same baseline */
    height: 100%;
}

.plan-cta {
    /* !important needed to beat Bootstrap .mt-3 utility on the button */
    margin-top: auto !important;
    width: 100%;
    justify-content: center;
}

/* Guaranteed gap above CTA — features ul carries Bootstrap .mb-0 which needs overriding */
.plan-card .features {
    margin-bottom: 16px !important;
}

/* Popular plan visual hierarchy */
.plan-card.plan-card--popular {
    border: 1.5px solid var(--secondary-color);
    box-shadow: 0 12px 24px rgba(13, 32, 64, 0.10);
    position: relative;
    overflow: visible;
}

.plan-card.plan-card--popular.active {
    border-color: var(--primary-color);
}

.plan-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 100px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(254, 127, 45, 0.30);
}

@media (min-width: 1200px) {
    .plan-card.plan-card--popular {
        transform: translateY(-8px);
    }
}

/* "Everything in [previous], plus:" intro line above feature lists */
.features-intro {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 16px 0 8px;
    line-height: 1.4;
}

/* Feature list typography */
.features li {
    font-size: 13px;
    color: var(--slate-950);
    line-height: 1.6;
}

/* ============================================
   Feature comparison table (monthly-plan-page)
   ============================================ */
.compare-wrap {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(207, 216, 227, 0.7);
}

/* Expandable toggle — Compare all features */
.compare-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    color: var(--deep-navy-blue);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.compare-toggle:hover {
    border-color: var(--slate-400);
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.06);
}

.compare-toggle:focus-visible {
    outline: none;
    border-color: var(--deep-navy-blue);
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.15);
}

.compare-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-toggle-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-navy-blue);
}

.compare-toggle-sub {
    font-size: 12px;
    color: var(--gray-color);
    font-weight: 400;
}

.compare-toggle-icon {
    flex-shrink: 0;
    color: var(--slate-600);
    transition: transform 0.2s ease;
}

.compare-toggle[aria-expanded="true"] .compare-toggle-icon {
    transform: rotate(180deg);
}

/* Add spacing between toggle and the expanded table */
#compareFeatures.show,
#compareFeatures.collapsing {
    margin-top: 12px;
}

.compare-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    background: var(--white-color);
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--slate-950);
    margin: 0;
}

.compare-table thead th {
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 12px 16px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.compare-th-price {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

.compare-table tbody td {
    padding: 11px 16px;
    border-top: 1px solid var(--slate-200);
    background: var(--white-color);
    vertical-align: middle;
    line-height: 1.4;
}

.compare-table tbody td:first-child {
    font-weight: 500;
    color: var(--slate-600);
    white-space: nowrap;
}

.compare-table tbody tr:first-child td {
    border-top: 0;
}

.compare-table tbody tr:hover td {
    background: var(--slate-50);
}

.compare-table thead th:first-child {
    text-align: left;
    width: 36%;
}

.compare-table thead th:not(:first-child) {
    width: 16%;
}

.compare-table td:not(:first-child) {
    text-align: center;
}

/* ===== Compare table — grouped parent / sub-feature rows ===== */

.compare-table tr.compare-parent-row > td {
    background: #f3f6fb !important;
    font-weight: 700 !important;
    color: #0D2040;
    font-size: 13px;
    border-top: 2px solid #e5e7eb !important;
}

.compare-table tr.compare-parent-row:first-child > td {
    border-top: none !important;
}

.compare-table tr.compare-parent-row td:not(:first-child) {
    font-weight: 600 !important;
}

.compare-table tr.compare-sub-row > td:first-child {
    padding-left: 30px;
    color: #6b7280;
    font-size: 12px;
    position: relative;
}

.compare-table tr.compare-sub-row > td:first-child::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: #d1d5db;
    display: block;
}

.cmp-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff3e8;
    color: #f97316;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.cmp-dash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f0f1f3;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.compare-no {
    color: var(--slate-400);
}

.compare-yes {
    color: var(--slate-950);
    font-weight: 500;
}


.plan-copy {
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-color);
    margin: 0;
    min-height: 2.6em;
    line-height: 1.2;
}

.plan-radio.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.popular-badge {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
}



.addons-wrap {
    border-top: 1px solid rgba(207, 216, 227, 0.7);
    padding-top: 16px;
    padding-bottom: 24px;
}

.addons-heading {
    margin-bottom: 12px;
}

.addons-heading p {
    font-size: 12px;
    color: var(--gray-color);
    margin: 0;
}

.addon-box {
    height: 100%;
    background: #fbfcfe;
    border: 1px solid rgba(207, 216, 227, 0.85);
    border-radius: 10px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.addon-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-color);
}

.addon-box h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.addon-box p {
    font-size: 13px;
    color: var(--gray-color);
    margin-bottom: 4px;
}

.addon-price {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(254, 127, 45, 0.4);
    border-radius: 8px;
    background: #fff7f1;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    padding: 5px 10px;
}

.addon-price small {
    color: var(--gray-color);
    font-size: 14px;
}

/* Panel head — make .wm-panel__title read as a 16px Title Case section heading
   (default is a 10px eyebrow, but the h2 markup on billing makes it render larger)
   and tighten the description below it. */
.billing-page-content .wm-panel__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

/* Sub-section heading inside a panel body (e.g. "Tax details", "Address details" in Billing details).
   14px semibold navy with a thin slate divider underneath. */
.billing-page-content .billing-section-heading {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--slate-200);
}

/* Subscription card — tighter typography + compact Cancel button. */
.billing-page-content .billing-subscription-copy .font-16 {
    font-size: 14px !important;
}

.billing-page-content .billing-subscription-copy .font-14 {
    font-size: 12px !important;
}

.billing-page-content .billing-subscription-row .btn-outline-danger {
    padding: 5px 18px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
}

/* Billing summary panel — compact line items so the card reads as a tight receipt. */
.billing-page-content .billing-summary .wm-panel__body .font-14 {
    font-size: 12px !important;
}

.billing-page-content .billing-summary .wm-panel__body .font-16 {
    font-size: 13px !important;
}

.billing-page-content .billing-summary #billingTotalAmount {
    font-size: 15px;
}

.billing-page-content .billing-section-heading h6 {
    font-size: 14px;
}

/* Keep filled inputs on the slate-50 empty-state background so pre-filled fields
   (e.g. company name, billing email) match the empty placeholders visually. */
.billing-page-content input.custom-input:not(:placeholder-shown),
.billing-page-content textarea:not(:placeholder-shown),
.billing-page-content input.custom-input.filled,
.billing-page-content textarea.filled {
    background: var(--input-bg-empty) !important;
}

.billing-page-content .wm-panel__head > p {
    font-size: 12px !important;
    line-height: 1.5;
}

/* Add-on card text scale — tighter than the default font-16/14 in markup. */
.billing-page-content [data-addon-item] h6 {
    font-size: 13px !important;
    line-height: 1.35;
}

.billing-page-content [data-addon-item] .primary-color.semibold {
    font-size: 12px !important;
}

.billing-page-content [data-addon-item] > p {
    font-size: 11px !important;
    line-height: 1.45;
}

.billing-page-content [data-addon-item] [data-addon-qty] {
    font-size: 13px !important;
}

/* Add-on stepper — compact 28×28 square buttons (override the chunky .secondary-btn px-3 py-2). */
.billing-page-content [data-addon-item] [data-addon-decrement],
.billing-page-content [data-addon-item] [data-addon-increment] {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--secondary-color);
    flex-shrink: 0;
}

/* Add CTA — compact navy (default .primary-btn is brand orange + 8px 20px padding). */
.billing-page-content [data-addon-item] [data-addon-apply] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 6px;
}

.billing-page-content [data-addon-item] [data-addon-apply]:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    opacity: 0.92;
}

/***** billing-details-dashboard Page CSS *****/

.billing-details-content {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.billing-details-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.billing-form-section h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.billing-section-divider {
    border-top: 1px solid var(--light-grey);
    margin-bottom: 10px;
}

/***** workspace-setup-page Page CSS *****/

.workspace-setup-content {
    width: 100%;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.workspace-title-empty,
.workspace-support-copy-empty {
    display: none;
}

.workspace-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 1px minmax(320px, 0.95fr);
    gap: 32px;
    align-items: start;
}

.workspace-grid-divider {
    align-self: stretch;
    width: 1px;
    min-height: 100%;
    background: var(--light-grey);
}

.workspace-results-card {
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
    padding: 20px;
}

.workspace-create-column {
    height: -webkit-fill-available;
}

.workspace-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--light-grey);
}

.workspace-item:last-of-type {
    border-bottom: 0;
}

.workspace-item.extra-workspace {
    display: none;
}

.workspace-results-card.expanded .workspace-item.extra-workspace {
    display: flex;
}

.workspace-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.workspace-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workspace-item-copy p {
    font-size: 14px;
    color: var(--gray-color);
}

.workspace-item-copy p.workspace-meta-line,
.workspace-item-copy p.workspace-admin-line {
    font-size: 12px;
    color: var(--slate-400, #94A3B8);
    margin: 0;
    line-height: 1.5;
}

.workspace-meta-sep {
    margin: 0 4px;
    opacity: 0.6;
}

.workspace-plan-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 2px;
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}

.workspace-plan-tag--free {
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}

.workspace-plan-tag--essential {
    background: rgba(59, 130, 246, 0.12);
    color: #1D4ED8;
}

.workspace-plan-tag--pro {
    background: rgba(254, 127, 45, 0.14);
    color: #C2410C;
}

.workspace-plan-tag--proplus {
    background: rgba(124, 58, 237, 0.14);
    color: #6D28D9;
}

.workspace-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.workspace-action-note {
    font-size: 10px;
    color: var(--slate-400, #94A3B8);
    text-align: right;
    max-width: 200px;
    line-height: 1.4;
}

.workspace-action-note--limit {
    color: #DC2626;
}

/* Disabled "Request to join" — keep the tertiary look but dim it. */
.workspace-item-action .tertiary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* "Requested" button — green outlined confirmation state. */
.workspace-requested-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    border: 1px solid #BBF7D0;
    background: #F0FDF4;
    color: #15803D;
    font-size: 13px;
    font-weight: 500;
    cursor: not-allowed;
}

.workspace-requested-btn:disabled {
    opacity: 1;
}

.workspace-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 500;
}

.workspace-show-more-btn img {
    width: 14px;
    transition: transform 0.2s ease;
}

.workspace-results-card.expanded .workspace-show-more-btn img {
    transform: rotate(180deg);
}

.workspace-create-panel {
    min-height: 100%;
    border: 2px dashed var(--light-grey);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 30px;
    text-align: center;
}

.workspace-create-form {
    margin-top: 28px;
    text-align: left;
}

body.workspace-empty-state .workspace-title-default,
body.workspace-empty-state .workspace-support-copy-default,
body.workspace-empty-state .workspace-results-card,
body.workspace-empty-state .workspace-grid-divider {
    display: none;
}

body.workspace-empty-state .workspace-title-empty,
body.workspace-empty-state .workspace-support-copy-empty {
    display: block;
}

body.workspace-empty-state .workspace-setup-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

body.workspace-empty-state .workspace-results-column {
    width: 100%;
    max-width: 560px;
    gap: 0 !important;
}

body.workspace-empty-state .workspace-create-column {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

/* Settings pages */

.settings-info-banner {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px !important;
    border-radius: 8px;
}

.settings-info-banner__icon {
    width: 18px;
    height: 18px;
    background: #1D4ED8;
    color: var(--white-color);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.settings-info-banner__text {
    color: #1E40AF;
    font-size: 12px;
    line-height: 1.55;
}

.settings-info-banner__text strong {
    font-weight: 700;
    color: #1E3A8A;
}

/* Settings-panel modifier — bigger mixed-case title (reference's .sec-title),
   tighter head/body padding. Scoped so monitor pages keep the eyebrow style. */
.wm-panel.settings-panel .wm-panel__head {
    padding: 16px 20px 12px;
}

.wm-panel.settings-panel .wm-panel__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-navy-blue);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

.wm-panel.settings-panel .wm-panel__head > p {
    font-size: 12px !important;
    color: var(--gray-color);
    margin-top: 3px !important;
    line-height: 1.5;
}

.wm-panel.settings-panel .wm-panel__body {
    padding: 16px 20px 18px;
}

.settings-2fa-card,
.settings-channel-row {
    display: block;
}

.settings-2fa-card {
    padding: 24px;
}

.settings-2fa-icon {
    width: 56px;
    height: 56px;
    background: #fff2e8;
    border: 1px solid #ffe2c5;
}

.settings-session-current {
    background: #eef5ff;
    border: 1px solid #b8d4ff;
}

.settings-session-device-icon {
    width: 44px;
    height: 44px;
}

.settings-session-badge {
    background: #dff7df;
    color: #1f8b4c;
}

.organization-page .welcome-content>p.mediumbold,
.organization-page .welcome-content>.row.g-4.mt-0.gap-4 {
    display: none !important;
}

.org-switch-active .slider {
    background-color: var(--secondary-color);
}

.settings-channel-row {
    padding: 16px 18px;
}

.settings-channel-icon {
    width: 30px;
    height: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.settings-channel-icon--email {
    background: #dce8ff;
    color: #5b7cff;
}

.settings-channel-icon--slack {
    background: #e7e0ff;
    color: #7c61d8;
}

.settings-badge-default {
    background: #eef3ff;
    color: #4d6cff;
}

.alert-card-clickable {
    cursor: pointer;
}

/* New css */

.old-price {
    text-decoration: line-through;
    color: var(--gray-color);
    margin-right: 8px;
    font-size: 14px;
}

.personal-dropdown-btn {
    max-height: min(320px, calc(100vh - 140px));
    overflow-x: hidden;
}

.onboarding-complete-page .onboarding-main-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

span.text-end.badge.rounded-pill.monitor-summary-chip.is-expiring.d-flex.align-items-center.font-10.p-2,
span.text-end.badge.rounded-pill.monitor-summary-chip.is-up.d-flex.align-items-center.font-10.p-2 {
    height: max-content;
    width: max-content;
}

.menu-dots {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

/* Hover — soft white box with slate border (matches reference's .dot-menu:hover) */
.menu-dots:hover {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

/* Open (menu showing) — navy-tinted box with navy border (matches .dot-menu.open) */
.menu-dots.open {
    background: #EDF2FF;
    border-color: #0D2040;
}

.menu-dots.open:hover {
    background: #EDF2FF;
    border-color: #0D2040;
}

/* Page header — matches reference's .page-title / .page-sub */
.roles-page-title {
    font-size: 20px !important;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}

.roles-page-subtitle {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.5;
    max-width: 520px;
    margin-top: 4px;
}

/* Enterprise badge — matches reference's .enterprise-badge */
.roles-enterprise-btn {
    background: #F5F3FF !important;
    border: 1px solid #DDD6FE !important;
    color: #6D28D9 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: 7px !important;
    white-space: nowrap;
    margin-top: 2px;
}

.roles-enterprise-btn:hover,
.roles-enterprise-btn:focus {
    background: #EDE9FE !important;
    color: #6D28D9 !important;
    border-color: #DDD6FE !important;
}

.roles-enterprise-btn img {
    width: 12px;
    height: 12px;
    display: block;
}

/* Role card icon — matches reference's .rc-icon (38×38 / 9px radius) */
.roles-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 18px;
}

.roles-icon-box img {
    width: 18px;
    height: 18px;
    display: block;
}

.roles-icon-box-admin {
    background: #EDF2FF;
    color: #1D4ED8;
}

.roles-icon-box-billing {
    background: #F5F3FF;
    color: #6D28D9;
}

.roles-icon-box-member {
    background: #ECFDF5;
    color: #047857;
}

.roles-icon-box-viewer {
    background: #F8FAFC;
    color: #64748B;
}

.roles-compare-title {
    font-size: 16px;
    color: #0D2040;
}

.roles-page .accordion-button::after {
    margin-left: 12px;
    width: 12px;
    height: 12px;
    background-size: 12px;
}

.roles-card-meta {
    flex-shrink: 0;
    margin-left: auto;
}

.roles-avatar-stack {
    display: inline-flex;
    align-items: center;
    min-width: 26px;
}

.roles-avatar,
.roles-member-avatar {
    width: 26px;
    height: 26px;
    border: 2px solid var(--white-color);
    border-radius: 50%;
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.roles-avatar+.roles-avatar {
    margin-left: -7px;
}

.roles-member-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.roles-page .roles-member-avatar+div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.roles-page .roles-member-avatar+div .font-13,
.roles-page .roles-member-avatar+div .font-12 {
    line-height: 1.2;
}

.roles-avatar-admin {
    background: var(--secondary-color);
}

.roles-avatar-purple {
    background: #7C3AED;
}

.roles-avatar-green {
    background: #047857;
}

.roles-avatar-gray {
    background: #94A3B8;
}

.roles-avatar-empty {
    color: #CBD5E1;
    font-size: 11px;
    font-style: italic;
    white-space: nowrap;
}

.roles-detail-grid {
    border-top: 1px solid #F1F5F9;
    padding-top: 16px;
}

.roles-detail-col-permissions {
    border-right: 1px solid #F1F5F9;
}

/* Role card name (Admin, Billing Admin, …) — matches reference's .rc-name */
.roles-page .accordion-button > div > div > div > span.semibold {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
}

/* Role card scope pill (Full access / Billing + view / …) — .rc-scope */
.roles-page .accordion-button .badge.rounded-pill {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    letter-spacing: 0.01em;
}

/* Role card description — .rc-desc */
.roles-page .accordion-button p.font-12.gray-color {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.45;
}

/* Permissions / Members column titles — .perms-col-title / .members-col-title */
.roles-page .roles-detail-col p.text-uppercase.gray-color {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}

/* Group labels inside permissions list — .perm-group-label */
.roles-page .roles-detail-col p.secondary-text.text-uppercase {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.roles-perm-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 11px !important;
    line-height: 1.3;
    padding: 3px 0;
}

.roles-perm-icon {
    min-width: 15px;
    height: 15px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.roles-perm-yes {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
}

.roles-perm-no {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #CBD5E1;
}

.roles-perm-view {
    min-width: 15px;
    height: 15px;
    padding: 5px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    font-size: 8px;
    line-height: 1;
    text-align: center;
}

.roles-compare-card {
    overflow: hidden;
}

/* Comparison table — matches reference's .ct (navy header, white text, uppercase) */
.roles-comparison-table thead th {
    background: #0D2040 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 9px 14px !important;
    text-align: left;
}

/* First column header (Permission) — softened opacity per reference */
.roles-comparison-table thead th:first-child {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 10px !important;
    letter-spacing: 0;
}

.roles-comparison-table tbody td {
    padding: 7px 14px !important;
    border-bottom: 1px solid #F8FAFC !important;
    font-size: 11px !important;
    color: #64748B;
}

.roles-comparison-table tbody tr:not(.section-row):nth-child(odd) td {
    background: var(--white-color) !important;
}

.roles-comparison-table tbody tr:not(.section-row):nth-child(even) td {
    background: #F8FAFC !important;
}

.roles-comparison-table .roles-perm-view {
    margin-left: auto;
    margin-right: auto;
}

.roles-comparison-table .section-row td {
    color: #94A3B8 !important;
    background: #F1F5F9 !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 14px !important;
}

.roles-table-mark {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.roles-table-yes {
    color: var(--green-color);
}

.roles-table-no {
    color: #CBD5E1;
}

@media only screen and (max-width: 991.98px) {
    .roles-detail-col-permissions {
        border-right: 0;
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .roles-detail-col .ps-lg-4,
    .roles-detail-col .pe-lg-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
td.billing-col.tick.secondary-color.font-14, td.tick.secondary-color.font-14{
    text-align: center;
}
.monitor-card-head-parent.roles-compare-card.p-0 > :first-child {
  padding: 14px 14px 12px;
}

/* ============ Account Settings — profile photo row ============ */
.profile-photo-row {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--slate-200);
}

.profile-avatar {
    flex-shrink: 0;
}

.profile-name {
    font-size: 16px;
    color: var(--deep-navy-blue);
}

.profile-email {
    font-size: 12px;
    color: var(--gray-color);
    font-family: 'SF Mono', ui-monospace, monospace;
}

.profile-photo-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* ============ Account Settings — danger zone card ============ */
.danger-zone {
    background: #FFF5F5;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 16px 18px;
}

.danger-zone-title {
    font-size: 12px;
    font-weight: 600;
    color: #B91C1C;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.danger-zone-btn {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid #E24B4A;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    color: #B91C1C;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.danger-zone-btn:hover {
    background: #FFE4E4;
    border-color: #B91C1C;
}

/* Solid red variant — for the most destructive action in a danger zone */
.danger-zone-btn--solid {
    background: #B91C1C;
    color: var(--white-color);
    border-color: #B91C1C;
}

.danger-zone-btn--solid:hover {
    background: #991B1B;
    border-color: #991B1B;
    color: var(--white-color);
}

/* Multi-row danger zone — row separator + tight vertical rhythm */
.danger-zone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(254, 202, 202, 0.45);
    flex-wrap: wrap;
}

.danger-zone-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.danger-zone-row:first-child {
    padding-top: 0;
}

.danger-zone-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--deep-navy-blue);
    margin: 0;
}

.danger-zone-row__sub {
    font-size: 11px;
    color: var(--gray-color);
    margin: 2px 0 0;
    line-height: 1.5;
}

/* ============================================================
   Team members page (.pending-section + .members-*)
   ============================================================ */

/* Pending join requests card — light blue surface above the members table */
.pending-section {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 14px 16px;
}

.pending-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
}

.pending-section__icon {
    font-size: 14px;
    line-height: 1;
}

.pending-section__title {
    font-size: 13px;
    font-weight: 600;
    color: #1D4ED8;
}

.pending-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 100px;
    background: #1D4ED8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.pending-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(191, 219, 254, 0.5);
}

.pending-row__info {
    flex: 1;
    min-width: 0;
}

.pending-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--deep-navy-blue);
    margin: 0;
    line-height: 1.4;
}

.pending-row__email {
    font-size: 11px;
    font-weight: 400;
    color: var(--slate-400);
    margin-left: 4px;
}

.pending-row__meta {
    font-size: 11px;
    color: var(--gray-color);
    margin: 2px 0 0;
    line-height: 1.4;
}

.pending-row__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pending-row__approve {
    padding: 6px 14px;
    background: var(--deep-navy-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}

.pending-row__approve:hover {
    background: #1E3A5F;
}

.pending-row__decline {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-color);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.pending-row__decline:hover {
    border-color: #E24B4A;
    color: #B91C1C;
}

/* Member avatar — colored circle with white initials */
.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.member-avatar--navy   { background: var(--deep-navy-blue); }
.member-avatar--purple { background: #7C3AED; }
.member-avatar--green  { background: #047857; }
.member-avatar--orange { background: #F97316; }
.member-avatar--blue   { background: #1D4ED8; }
.member-avatar--gray   { background: #475569; }

/* "Team members (4)" heading row — standalone above the toolbar/table */
.members-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.members-heading__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.members-heading__title h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--deep-navy-blue);
    line-height: 1.3;
}

.members-heading__count {
    font-size: 13px;
    color: var(--slate-400);
    font-weight: 400;
}

/* Member limit notice — shown in the heading row when MaxTeamMembers is reached */
.member-limit-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff8f0;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.4;
}

.member-limit-notice svg {
    flex-shrink: 0;
    color: #f97316;
}

.member-limit-notice a {
    color: #ea580c;
    font-weight: 600;
    text-decoration: underline;
}

.members-heading button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Settings inputs — match reference: always slate-50 background (white on focus).
   Selector includes .wm-panel + .settings-panel to bump specificity above
   theme.css's `input.custom-input.bg-white:not(:placeholder-shown)` rule,
   which would otherwise win because theme.css loads after style.css. */
.wm-panel.settings-panel input.custom-input.bg-white,
.wm-panel.settings-panel input.custom-input.grey-border {
    background: var(--input-bg-empty) !important;
}

.wm-panel.settings-panel input.custom-input.bg-white:focus,
.wm-panel.settings-panel input.custom-input.grey-border:focus,
.wm-panel.settings-panel input.custom-input.bg-white:focus-visible,
.wm-panel.settings-panel input.custom-input.grey-border:focus-visible {
    background: var(--input-bg-filled) !important;
}

/* Disabled input — magic-link auth email field */
input.custom-input:disabled {
    background: var(--slate-100, #F1F5F9) !important;
    color: var(--slate-400) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Date/time inputs — slate-50 bg always (white on focus), and picker
   indicator pinned to the right edge. Selectors include .bg-white /
   .grey-border to beat the (0,3,1) specificity of the filled-state rule
   in theme.css that otherwise forces white. */
input.custom-input.bg-white[type="datetime-local"],
input.custom-input.bg-white[type="date"],
input.custom-input.bg-white[type="time"],
input.custom-input.bg-white[type="month"],
input.custom-input.bg-white[type="week"],
input.custom-input.grey-border[type="datetime-local"],
input.custom-input.grey-border[type="date"],
input.custom-input.grey-border[type="time"],
input.custom-input.grey-border[type="month"],
input.custom-input.grey-border[type="week"] {
    background: var(--input-bg-empty) !important;
}

input.custom-input.bg-white[type="datetime-local"]:focus,
input.custom-input.bg-white[type="date"]:focus,
input.custom-input.bg-white[type="time"]:focus,
input.custom-input.bg-white[type="month"]:focus,
input.custom-input.bg-white[type="week"]:focus,
input.custom-input.grey-border[type="datetime-local"]:focus,
input.custom-input.grey-border[type="date"]:focus,
input.custom-input.grey-border[type="time"]:focus,
input.custom-input.grey-border[type="month"]:focus,
input.custom-input.grey-border[type="week"]:focus {
    background: var(--input-bg-filled) !important;
}

/* Date/time inputs — remove the global `display: flex` from .custom-input so
   Chrome's native shadow DOM layout runs (picker indicator sits at the right
   edge by default). Reference uses plain inputs with no flex override. */
input.custom-input[type="datetime-local"],
input.custom-input[type="date"],
input.custom-input[type="time"],
input.custom-input[type="month"],
input.custom-input[type="week"] {
    display: inline-block !important;
}

input.custom-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input.custom-input[type="date"]::-webkit-calendar-picker-indicator,
input.custom-input[type="time"]::-webkit-calendar-picker-indicator,
input.custom-input[type="month"]::-webkit-calendar-picker-indicator,
input.custom-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

input.custom-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input.custom-input[type="date"]::-webkit-calendar-picker-indicator:hover,
input.custom-input[type="time"]::-webkit-calendar-picker-indicator:hover,
input.custom-input[type="month"]::-webkit-calendar-picker-indicator:hover,
input.custom-input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ============ Security — 2FA card ============ */
.twofa-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--slate-50, #F8FAFC);
    border: 1px solid var(--slate-200);
    border-radius: 9px;
}

.twofa-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--deep-navy-blue);
}

.twofa-card-desc {
    font-size: 11px;
    color: var(--gray-color);
    line-height: 1.55;
}

/* Navy CTA — matches reference's .twofa-setup-btn */
.twofa-setup-btn {
    padding: 7px 14px;
    background: var(--deep-navy-blue);
    color: var(--white-color);
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}

.twofa-setup-btn:hover {
    background: #1E3A5F;
    color: var(--white-color);
}

.tfa-step__verify-input.tfa-input--error {
    border-color: #DC2626;
    background: #FEF2F2;
    color: #DC2626;
}

.tfa-step__verify-input.tfa-input--error:focus {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

@keyframes tfa-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.tfa-shake {
    animation: tfa-shake 0.45s ease;
}

/* 2FA status pill — gray "Not enabled" / green "On" / green "Setting up..." */
.twofa-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}

.twofa-badge--off {
    background: var(--slate-100, #F1F5F9);
    color: var(--slate-600);
}

.twofa-badge--on,
.twofa-badge--progress {
    background: #DCFCE7;
    color: #15803D;
}

/* ============ Security — Active session items ============ */
.session-item {
    background: var(--slate-50, #F8FAFC);
    border: 1px solid var(--slate-200);
    transition: background 0.1s ease;
}

.session-item:hover {
    background: #FAFBFC;
}

.session-item--current {
    background: #EDF2FF;
    border-color: #BFDBFE;
}

.session-item--current:hover {
    background: #EDF2FF;
}

/* Active sessions — typography overrides scoped inside .session-item.
   Beats `.font-14`/`.font-12` utility classes (which carry !important). */
.session-item h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--deep-navy-blue);
    line-height: 1.4;
}

.session-item p {
    font-size: 11px !important;
    color: var(--slate-400);
    line-height: 1.5;
    margin-top: 2px;
}

.session-item .settings-session-badge {
    font-size: 9px !important;
    font-weight: 600;
    padding: 2px 7px !important;
    background: #DCFCE7;
    color: #15803D;
    letter-spacing: 0.02em;
}

/* Tighten the device icon to match the reference's compact session row */
.session-item .settings-session-device-icon {
    width: 36px;
    height: 36px;
}

/* ============ Alerts — channel rows ============ */
/* Dashed-border ghost "+ Add" button — matches reference's .add-channel-btn */
.add-channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1.5px dashed var(--slate-300, #CBD5E1);
    border-radius: 7px;
    background: transparent;
    color: var(--gray-color);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.add-channel-btn:hover {
    border-color: var(--deep-navy-blue);
    color: var(--deep-navy-blue);
}

/* Channel row typography — compact, reference-aligned. Scoped to
   .settings-channel-row inside settings-panel so monitor pages are unaffected. */
.settings-panel .settings-channel-row h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--deep-navy-blue);
    line-height: 1.4;
}

.settings-panel .settings-channel-row p {
    font-size: 11px !important;
    color: var(--slate-400);
    line-height: 1.5;
    margin-top: 2px;
    font-family: 'SF Mono', ui-monospace, monospace;
    word-break: break-all;
}

.settings-panel .settings-channel-row .settings-badge-default {
    font-size: 9px !important;
    font-weight: 600;
    padding: 1px 7px !important;
    background: #EDF2FF;
    color: #1D4ED8;
    letter-spacing: 0.02em;
}

/* ============================================================
   Reusable confirm modal (.confirm-modal)
   Driven by data-* attributes on the trigger button:
     data-confirm-title      Title text (default: "Are you sure?")
     data-confirm-message    Lead-in text before the highlighted item
     data-confirm-item       The thing being acted on (rendered in a pill)
     data-confirm-warning    Subtle warning line below message
     data-confirm-action     Action button label (default: "Confirm")
     data-confirm-variant    "danger" | "warning" | "primary"  (default: danger)
   ============================================================ */
.confirm-modal .modal-dialog {
    max-width: 420px;
}

.confirm-modal__content {
    position: relative;
    background: var(--white-color);
    border-radius: 14px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(13, 32, 64, 0.18);
    pointer-events: auto;
}

.confirm-modal__close,
#editMemberModal .confirm-modal__close,
#changeRoleModal .confirm-modal__close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--slate-400);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.confirm-modal .confirm-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.confirm-modal__close:hover,
#editMemberModal .confirm-modal__close:hover,
#changeRoleModal .confirm-modal__close:hover {
    background: var(--slate-100);
    color: var(--slate-950);
}

.confirm-modal__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--deep-navy-blue);
    margin: 0 0 8px;
    line-height: 1.3;
}

.confirm-modal__message {
    font-size: 13px;
    color: var(--gray-color);
    line-height: 1.55;
    margin: 0 0 6px;
}

.confirm-modal__item {
    display: inline-block;
    color: var(--deep-navy-blue);
    font-weight: 600;
    background: var(--slate-100, #F1F5F9);
    padding: 1px 7px;
    border-radius: 5px;
    margin: 0 2px;
}

.confirm-modal__warning {
    font-size: 11px;
    color: var(--slate-400);
    margin: 0 0 22px;
    line-height: 1.4;
}

.confirm-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-modal__cancel {
    min-width: 110px;
    padding: 9px 18px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: var(--white-color);
    color: var(--deep-navy-blue);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.confirm-modal__cancel:hover {
    background: var(--slate-50);
    border-color: var(--slate-400);
}

.confirm-modal__action {
    min-width: 110px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    color: var(--white-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}

/* === Variant: danger (default) — used for destructive actions === */
.confirm-modal--danger .confirm-modal__icon {
    background: #FEE2E2;
    color: #DC2626;
}

.confirm-modal--danger .confirm-modal__action {
    background: #DC2626;
}

.confirm-modal--danger .confirm-modal__action:hover {
    background: #B91C1C;
}

/* === Variant: warning — used for "are you sure?" non-destructive flows === */
.confirm-modal--warning .confirm-modal__icon {
    background: #FEF3C7;
    color: #D97706;
}

.confirm-modal--warning .confirm-modal__action {
    background: #D97706;
}

.confirm-modal--warning .confirm-modal__action:hover {
    background: #B45309;
}

/* === Variant: primary — used for confirmations like transfer/upgrade === */
.confirm-modal--primary .confirm-modal__icon {
    background: #EDF2FF;
    color: var(--deep-navy-blue);
}

.confirm-modal--primary .confirm-modal__action {
    background: var(--deep-navy-blue);
}

.confirm-modal--primary .confirm-modal__action:hover {
    background: #1E3A5F;
}

/* Hide message/item/warning lines when their slot has no content */
.confirm-modal__message:empty,
.confirm-modal__warning:empty {
    display: none;
}

/* Compact channel row spacing + smaller Edit/Delete action buttons */
.settings-panel .settings-channel-row {
    padding: 10px 14px !important;
    background: var(--slate-50, #F8FAFC);
    border: 1px solid var(--slate-200);
    border-radius: 9px;
}

.settings-panel .settings-channel-row .secondary-btn,
.settings-panel .settings-channel-row .btn-outline-danger {
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    font-weight: 500;
}

/* Toggle switch should sit compact next to action buttons */
.settings-panel .settings-channel-row .switch {
    transform: scale(0.85);
    transform-origin: center;
}

/* Compact ghost revoke button on each session row */
.session-revoke-btn {
    padding: 5px 12px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-color);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.session-revoke-btn:hover:not(:disabled) {
    border-color: #E24B4A;
    color: #B91C1C;
    background: #FFF5F5;
}

.session-revoke-btn--self,
.session-revoke-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "Revoke all other sessions" — red ghost danger button */
.session-revoke-all-wrap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
}

.session-revoke-all-btn {
    padding: 7px 14px;
    border: 1px solid #FECACA;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #B91C1C;
    background: #FFF5F5;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.session-revoke-all-btn:hover {
    border-color: #B91C1C;
    background: #FFE4E4;
}

/* ============================================
   API endpoint monitor — page-scoped alignment
   to match Spectra reference (api_monitor.html)
   ============================================ */

/* Request body tabs wrapper — drop the visible card border/padding;
   reference shows the textarea alone with its own border. */
.page-api-monitoring #amBodyTabContent.tab-content {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Inner monospace editor frame — match reference body-editor:
   slate-50 bg, slate-200 border, 7px radius, navy focus ring. */
.page-api-monitoring #amBodyTabContent .bg-light {
    background: var(--slate-50) !important;
    border: 1px solid var(--slate-200);
    border-radius: 7px;
    padding: 0 !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-api-monitoring #amBodyTabContent .bg-light:focus-within {
    border-color: var(--secondary-color);
    border-width: 1.5px;
    background: var(--white-color) !important;
    box-shadow: var(--focus-ring);
}

.page-api-monitoring #amBodyTabContent .bg-light textarea.custom-input {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    min-height: 90px;
    box-shadow: none !important;
    resize: vertical;
}

.page-api-monitoring #amBodyTabContent .bg-light textarea.custom-input:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* "None" pane info strip — slate-50 placeholder card */
.page-api-monitoring #amBodyNone > .bg-light {
    background: var(--slate-50) !important;
    border: 1px solid var(--slate-200);
    border-radius: 7px;
    color: var(--slate-400) !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
}

/* Request body tab buttons — clean underline tabs, 12px label */
.page-api-monitoring .request-body-tabs.nav-tabs {
    border-bottom: 1px solid var(--slate-200) !important;
    gap: 0;
}

.page-api-monitoring .request-body-tabs .nav-link {
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--slate-600) !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.page-api-monitoring .request-body-tabs .nav-link:hover {
    color: var(--slate-950) !important;
}

.page-api-monitoring .request-body-tabs .nav-link.active {
    color: var(--secondary-color) !important;
    border-bottom-color: var(--secondary-color) !important;
    background: transparent !important;
}

/* Bootstrap's global .nav-link.active::after underline adds a 3px bar — remove it for these tabs */
.page-api-monitoring .request-body-tabs .nav-link.active::after {
    display: none;
}

/* Compact slim assertion rows — make the bootstrap rows visually align
   to the reference's tight assert-row grid. */
.page-api-monitoring #amAssertionsPanel .wm-panel__body > .row.g-2 {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.page-api-monitoring #amAssertionsPanel .row.g-2 .dropdown > button.btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1.4;
}

.page-api-monitoring #amAssertionsPanel .row.g-2 input.custom-input,
.page-api-monitoring #amAssertionsPanel .row.g-2 select.custom-input {
    padding: 7px 9px !important;
    font-size: 12px !important;
    height: auto !important;
}

.page-api-monitoring #amAssertionsPanel .row.g-2 .selected-option-label {
    font-size: 12px;
}

/* "Remove" button in assertion rows — make it a 28x28 ghost button */
.page-api-monitoring #amAssertionsPanel .row.g-2 > .col-md-1 > button.btn {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 1px solid var(--slate-200) !important;
    border-radius: 6px !important;
    background: var(--white-color) !important;
    color: var(--slate-400) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-api-monitoring #amAssertionsPanel .row.g-2 > .col-md-1 > button.btn:hover {
    border-color: var(--red-500) !important;
    background: var(--red-50) !important;
}

.page-api-monitoring #amAssertionsPanel .row.g-2 > .col-md-1 > button.btn svg path {
    fill: currentColor;
}

/* Column header row above the assertion grid — 10px slate-400 caps */
.page-api-monitoring #amAssertionsPanel .wm-panel__body > .row.g-2:first-of-type small.text-muted.font-12 {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--slate-400) !important;
    text-transform: none;
    letter-spacing: 0;
}


/* Send test request button — compact navy CTA per reference */
.page-api-monitoring #amSendTestRequestBtn.primary-btn {
    padding: 7px 16px;
    background: var(--secondary-color);
    color: var(--white-color);
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

/* Slim notification-channel checkbox labels — 11px slate-600 */
.page-api-monitoring .wm-channel-body label .font-12 {
    font-size: 11px !important;
    color: var(--slate-600);
}

/* Header rows on API monitor — keep the global 32×32 .wm-header-remove size
   so the recipients delete button matches website-monitoring exactly. */

/* ===========================================================
   Add Status Page — alignment with reference design (page-scoped)
   =========================================================== */

/* Page header — matches reference .page-title / .page-sub (20px/600/0F172A + 12px/64748B) */
.page-add-status .status-page-title {
    font-size: 20px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}

.page-add-status .status-page-subtitle {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    margin-top: 4px;
}

/* Logo upload preview — matches reference 36×36 / 8px radius */
.page-add-status .status-logo-preview {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    flex-shrink: 0;
}

/* Brand colour swatches — reference uses 26×26 / 6px radius */
.page-add-status .color-swatch-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.page-add-status .color-swatch-btn:hover {
    transform: scale(1.08);
}

.page-add-status .color-swatch-btn.active {
    border-color: #0D2040;
    box-shadow: 0 0 0 2px rgba(13, 32, 64, 0.2);
}

/* Custom-colour trigger — small pill matching reference .color-custom */
.page-add-status .status-color-custom-trigger {
    padding: 4px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
    background: #F8FAFC;
    line-height: 1.4;
}

.page-add-status .status-color-custom-trigger:hover {
    background: #F1F5F9;
}

.page-add-status .status-color-custom-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #E2E8F0;
    display: inline-block;
}

/* Live preview column — let the Bootstrap grid drive its width naturally */
.page-add-status .status-preview-col {
    /* no max-width cap — column fills its grid slot */
}

.page-add-status .status-preview-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
}

/* Custom domain section — collapsible header + horizontal upgrade gate.
   Header row with globe icon + hint + chevron, content area is the upgrade card. */
.page-add-status .custom-domain-section {
    border-top: 1px solid var(--slate-100, #F1F5F9);
    padding-top: 12px;
    margin-top: 12px;
}

.page-add-status .custom-domain-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
}

.page-add-status .custom-domain-toggle__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--deep-navy-blue, #0F172A);
}

.page-add-status .custom-domain-toggle__hint {
    font-size: 11px;
    font-weight: 400;
    color: #94A3B8;
    margin-left: 2px;
}

.page-add-status .custom-domain-toggle__chev {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.page-add-status .custom-domain-toggle[aria-expanded="true"] .custom-domain-toggle__chev {
    transform: rotate(180deg);
}

/* Upgrade gate — horizontal card with lock icon + title/desc + Upgrade CTA */
.page-add-status .custom-domain-upgrade-gate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
}

.page-add-status .custom-domain-upgrade-gate__copy {
    flex: 1;
    min-width: 0;
}

.page-add-status .custom-domain-upgrade-gate__title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    line-height: 1.4;
}

.page-add-status .custom-domain-upgrade-gate__desc {
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.5;
    margin-top: 1px;
}

.page-add-status .custom-domain-upgrade-gate__btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: #F97316;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.page-add-status .custom-domain-upgrade-gate__btn:hover {
    background: #EA6C0A;
}

/* Subdomain input — matches reference add_status_page.html .subdomain-row
   (slate-50 bg, slate-300 border, navy 1.5px + white + 3px ring on focus-within) */
.page-add-status .subdomain-row {
    display: flex;
    align-items: stretch;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    overflow: hidden;
    background: #F8FAFC;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-add-status .subdomain-row:focus-within {
    border-color: #0D2040;
    border-width: 1.5px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.07);
}

.page-add-status .subdomain-row .subdomain-inp {
    flex: 1;
    padding: 8px 11px;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'SF Mono', Monaco, ui-monospace, Consolas, 'Courier New', monospace;
    font-size: 13px;
    color: #0F172A;
    min-width: 0;
}

.page-add-status .subdomain-row .subdomain-inp::placeholder {
    color: #94A3B8;
    font-family: inherit;
}

.page-add-status .subdomain-row .subdomain-suffix {
    padding: 8px 12px;
    font-family: 'SF Mono', Monaco, ui-monospace, Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: #64748B;
    background: #F1F5F9;
    border-left: 1px solid #E2E8F0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Availability indicator on the right edge — green by default, red for "taken" */
.page-add-status .subdomain-row .subdomain-check {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #15803D;
    background: #F0FDF4;
    border-left: 1px solid #E2E8F0;
    display: none;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.page-add-status .subdomain-row .subdomain-check.show {
    display: inline-flex;
}

.page-add-status .subdomain-row .subdomain-check.subdomain-check--taken {
    color: #B91C1C;
    background: #FEF2F2;
}

/* Live preview service rows — matches reference's .lp-svc / .lp-svc-name / .lp-svc-pct */
.page-add-status .status-preview-svc {
    padding: 6px 0;
}

.page-add-status .status-preview-svc + .status-preview-svc {
    /* No divider line between sample rows — keep the preview clean */
    border-top: none;
}

.page-add-status .status-preview-svc__name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #0F172A;
}

/* Percentage value inside the service row — 10px / 600 / green (or red when down) */
.page-add-status .status-preview-svc .font-12.semibold {
    font-size: 10px !important;
    font-weight: 600 !important;
}

.page-add-status .status-preview-svc .secondary-color {
    color: #15803D !important;
}

.page-add-status .status-preview-svc .text-danger {
    color: #B91C1C !important;
}

/* Status dot — 7×7 (overrides the inline style="width:8px;height:8px;") */
.page-add-status .status-preview-svc .rounded-circle {
    width: 7px !important;
    height: 7px !important;
}

/* Incident-history empty box inside the live preview card */
.page-add-status .status-preview-incident-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 14px;
}

.page-add-status .status-preview-incident-title {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.4;
}

.page-add-status .status-preview-incident-sub {
    font-size: 11px;
    color: #64748B;
    line-height: 1.4;
}

/* "Powered by Spectra" footer text */
.page-add-status .status-preview-footer {
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.4;
}

/* Logo helper text — "PNG, SVG · max 1 MB · 128×128 recommended" */
.page-add-status .status-logo-help {
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.5;
}

/* Compact "Upload logo" button — slim ghost (replaces the chunky .secondary-btn) */
.page-add-status .status-upload-logo-btn {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--deep-navy-blue, #0D2040);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.page-add-status .status-upload-logo-btn:hover {
    background: var(--slate-50, #F8FAFC);
    border-color: var(--slate-400, #94A3B8);
}

.page-add-status .status-preview-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 2px;
}

.page-add-status .status-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-add-status .status-preview-url {
    font-size: 10px;
    color: #94A3B8;
    font-family: 'SF Mono', Monaco, monospace;
}

/* Preview header logo — reference 28×28 / 14px font */
.page-add-status .status-preview-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Push the preview column flush-left to its 380px max-width on xl+ */
@media (min-width: 1200px) {
    .page-add-status .status-preview-col {
        margin-left: auto;
    }
}

/* ============================================================
   URL & domain, Access & visibility, Page options — align with
   reference (.sec / .ff / .tog-row) on the add-status page only.
   Scoped under body.page-add-status so other pages stay unaffected.
   ============================================================ */

/* Reference form-label: 11px / 500 / slate-600, ~0.01em tracking */
body.page-add-status .status-form-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--slate-600, #475569);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Reference helper: 10px / slate-400 / line-height 1.5 */
body.page-add-status .status-helper-text {
    font-size: 10px;
    color: var(--slate-400, #94A3B8);
    line-height: 1.5;
}

/* Upgrade-gate text inside the Custom domain collapse — match helper sizing */
body.page-add-status .status-domain-upgrade-text {
    font-size: 11px;
    color: var(--slate-600, #475569);
    line-height: 1.5;
}

/* ── URL & domain ───────────────────────────────────────────
   The Subdomain input row currently runs at 44px tall with
   14px suffix text — reference is 13px/8×11. Trim it back. */
body.page-add-status #statusDomainPanel .status-domain-input {
    min-height: 38px;
    border-radius: 7px 0 0 7px;
    font-size: 13px;
    padding: 8px 11px;
}

body.page-add-status #statusDomainPanel .status-domain-suffix {
    min-height: 38px;
    border-radius: 0 7px 7px 0;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-600, #64748B);
    background: var(--slate-100, #F1F5F9);
}

/* status-domain-block — no card surface, flow inline with the panel body */
body.page-add-status #statusDomainPanel .status-domain-block {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    gap: 8px;
}

/* ── Access & visibility radio cards ────────────────────────
   Reference layout: icon top-left + radio top-right (absolute),
   title + description below. Navy border + #EDF2FF bg when selected. */
body.page-add-status .status-access-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 14px 16px 14px 16px;
    border: 1.5px solid var(--slate-200, #E2E8F0);
    border-radius: 9px;
    background: var(--white-color, #fff);
    transition: border-color .12s, background .12s, box-shadow .12s;
    margin-bottom: 0;
    user-select: none;
}

body.page-add-status .status-access-card:hover {
    border-color: var(--slate-400, #94A3B8);
    background: #FAFBFC;
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked) {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.08);
}

/* Hide the native radio input — we use .status-access-radio-dot as the visible affordance */
body.page-add-status .status-access-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Top-left emoji icon */
body.page-add-status .status-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 10px;
}

/* Top-right radio dot (visual surrogate for the hidden native radio) */
body.page-add-status .status-access-radio-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--slate-300, #CBD5E1);
    background: transparent;
    transition: background .12s, border-color .12s;
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot {
    background: var(--deep-navy-blue, #0D2040);
    border-color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

body.page-add-status .status-access-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-navy-blue, #0F172A);
    line-height: 1.3;
}

body.page-add-status .status-access-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.45;
}

/* ── Page options toggle rows ──────────────────────────────
   Reference: 13px / 500 / slate-950 label, 11px / 64748B sub. */
body.page-add-status #statusOptionsPanel .status-tog-lbl {
    font-size: 13px;
    font-weight: 500;
    color: var(--deep-navy-blue, #0F172A);
    line-height: 1.4;
}

body.page-add-status #statusOptionsPanel .status-tog-sub {
    font-size: 11px;
    color: var(--slate-500, #64748B);
    line-height: 1.5;
}

/* Toggle row vertical rhythm — reference uses ~6px vertical padding
   between rows separated by 1px slate-100 dividers. Tighten the
   inner flex gap so dividers do the visual work. */
body.page-add-status #statusOptionsPanel .wm-panel__body > .d-flex.flex-column {
    gap: 10px;
}

/* ── Inputs in these three sections — slate-50 background always
       (matches reference .inp / .subdomain-row), white on focus.
       Specificity bumped above theme.css's bg-white-when-filled rule. */
body.page-add-status #statusDomainPanel input.custom-input.bg-white,
body.page-add-status #statusDomainPanel input.custom-input.grey-border,
body.page-add-status #statusAccessPanel input.custom-input.bg-white,
body.page-add-status #statusAccessPanel input.custom-input.grey-border {
    background: var(--input-bg-empty) !important;
}

body.page-add-status #statusDomainPanel input.custom-input.bg-white:focus,
body.page-add-status #statusDomainPanel input.custom-input.grey-border:focus,
body.page-add-status #statusAccessPanel input.custom-input.bg-white:focus,
body.page-add-status #statusAccessPanel input.custom-input.grey-border:focus {
    background: var(--input-bg-filled) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Monitors-to-display panel — Approach 1 (Tag groups + search panel)
   All rules scoped to body.page-add-status so no other page is affected.
   Class prefix `.sm-` = "status monitors".
   ════════════════════════════════════════════════════════════════════ */

/* Blue info banner variant — reuses .compact-alert padding/radius. */
body.page-add-status .compact-alert.compact-alert--info {
    background-color: #EFF6FF;
    border-color: #BFDBFE;
}

body.page-add-status .compact-alert.compact-alert--info .compact-alert__text {
    color: #1E40AF;
}

/* ── Sub-section 2: Add by tag group ── */
body.page-add-status .sm-group-section {
    gap: 8px;
}

body.page-add-status .sm-group-label {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
}

body.page-add-status .sm-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.page-add-status .sm-gc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--slate-200, #E2E8F0);
    border-radius: 8px;
    background: var(--slate-50, #F8FAFC);
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
}

body.page-add-status .sm-gc:hover {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-gc.all-sel {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-gc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

body.page-add-status .sm-gc-count {
    font-size: 10px;
    font-weight: 400;
    color: var(--slate-400, #94A3B8);
    margin-left: 2px;
}

body.page-add-status .sm-gc-check {
    font-size: 10px;
    display: none;
}

body.page-add-status .sm-gc.all-sel .sm-gc-check {
    display: inline;
}

body.page-add-status .sm-gc.all-sel .sm-gc-count {
    display: none;
}

/* ── Sub-section 3: Selected strip ── */
body.page-add-status .sm-sel-strip {
    background: var(--slate-50, #F8FAFC);
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 9px;
    padding: 12px 14px;
}

body.page-add-status .sm-sel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

body.page-add-status .sm-sel-title {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

body.page-add-status .sm-sel-count {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    border: 1px solid #BFDBFE;
    padding: 2px 8px;
    border-radius: 100px;
    line-height: 1.2;
}

body.page-add-status .sm-sel-clear {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    color: var(--slate-600, #64748B);
    text-decoration: underline;
    cursor: pointer;
}

body.page-add-status .sm-sel-clear:hover {
    color: #B91C1C;
}

body.page-add-status .sm-sel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
}

body.page-add-status .sm-sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #BFDBFE;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: var(--deep-navy-blue, #0D2040);
    cursor: default;
}

body.page-add-status .sm-sel-chip-drag {
    font-size: 10px;
    color: var(--slate-300, #CBD5E1);
    cursor: grab;
    margin-right: -2px;
    line-height: 1;
}

body.page-add-status .sm-sel-chip-drag:active {
    cursor: grabbing;
}

body.page-add-status .sm-sel-chip-icon {
    font-size: 11px;
    line-height: 1;
}

body.page-add-status .sm-sel-chip-x {
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    font-size: 13px;
    line-height: 1;
    color: var(--slate-400, #94A3B8);
    cursor: pointer;
    font-family: inherit;
}

body.page-add-status .sm-sel-chip-x:hover {
    color: #B91C1C;
}

body.page-add-status .sm-sel-empty {
    font-size: 11px;
    color: var(--slate-400, #94A3B8);
    font-style: italic;
}

body.page-add-status .sm-reorder-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--slate-400, #94A3B8);
}

/* ── Sub-section 4: Search + Filter row ── */
body.page-add-status .sm-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-add-status .sm-search-wrap {
    position: relative;
    flex: 1;
}

body.page-add-status .sm-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--slate-400, #94A3B8);
}

body.page-add-status .sm-search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 7px;
    background: var(--slate-50, #F8FAFC);
    color: var(--slate-950, #0F172A);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: all 0.15s ease;
}

body.page-add-status .sm-search-input::placeholder {
    color: var(--slate-400, #94A3B8);
}

body.page-add-status .sm-search-input:focus {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.06);
}

body.page-add-status .sm-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 7px;
    background: #fff;
    color: var(--slate-600, #64748B);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

body.page-add-status .sm-filter-btn:hover {
    border-color: var(--deep-navy-blue, #0D2040);
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-filter-btn.active {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    color: var(--deep-navy-blue, #0D2040);
}

/* ── Sub-section 5: Filter chips ── */
body.page-add-status .sm-filter-chips {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--slate-100, #F1F5F9);
}

body.page-add-status .sm-filter-chips.show {
    display: flex;
}

body.page-add-status .sm-fc {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 100px;
    background: var(--slate-50, #F8FAFC);
    color: var(--slate-600, #64748B);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

body.page-add-status .sm-fc:hover {
    border-color: var(--deep-navy-blue, #0D2040);
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-fc.act {
    border-color: var(--deep-navy-blue, #0D2040);
    background: var(--deep-navy-blue, #0D2040);
    color: #fff;
}

body.page-add-status .sm-fc-sep {
    width: 1px;
    height: 16px;
    background: var(--slate-200, #E2E8F0);
    margin: 0 4px;
}

/* ── Sub-section 6: Results panel ── */
body.page-add-status .sm-results-panel {
    display: none;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 9px;
    overflow: hidden;
    margin-top: 0;
}

body.page-add-status .sm-results-panel.show {
    display: block;
}

body.page-add-status .sm-rp-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--slate-50, #F8FAFC);
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

body.page-add-status .sm-rp-hdr-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--slate-600, #64748B);
}

body.page-add-status .sm-rp-count {
    font-weight: 600;
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-rp-sel-all {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-color, #F97316);
    text-decoration: underline;
    cursor: pointer;
}

body.page-add-status .sm-rp-close {
    background: none;
    border: none;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--slate-400, #94A3B8);
    cursor: pointer;
}

body.page-add-status .sm-rp-close:hover {
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-rp-list {
    max-height: 220px;
    overflow-y: auto;
}

body.page-add-status .sm-rp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--slate-50, #F8FAFC);
    cursor: pointer;
    transition: background 0.1s ease;
}

body.page-add-status .sm-rp-item:last-child {
    border-bottom: none;
}

body.page-add-status .sm-rp-item:hover {
    background: #FAFBFC;
}

body.page-add-status .sm-rp-item.selected {
    background: #F0F5FF;
}

body.page-add-status .sm-rp-cb {
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--slate-300, #CBD5E1);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: transparent;
    background: #fff;
    transition: all 0.12s ease;
}

body.page-add-status .sm-rp-cb.on {
    background: var(--deep-navy-blue, #0D2040);
    border-color: var(--deep-navy-blue, #0D2040);
    color: #fff;
}

body.page-add-status .sm-rp-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

body.page-add-status .sm-rp-body {
    flex: 1;
    min-width: 0;
}

body.page-add-status .sm-rp-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-950, #0F172A);
}

body.page-add-status .sm-rp-url {
    font-size: 10px;
    color: var(--slate-400, #94A3B8);
    font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

body.page-add-status .sm-rp-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.page-add-status .sm-rp-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--slate-100, #F1F5F9);
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 3px;
    font-size: 9px;
    color: #475569;
}

body.page-add-status .sm-rp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #22C55E; /* up — green */
}

body.page-add-status .sm-rp-dot.sm-rp-dot--down {
    background: #EF4444; /* down — red */
}

/* Type badges */
body.page-add-status .sm-type-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

body.page-add-status .sm-tb-http {
    background: #FFF5EE;
    color: #C2410C;
    border-color: #FED7AA;
}

body.page-add-status .sm-tb-api {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}

body.page-add-status .sm-tb-port {
    background: #F5F3FF;
    color: #6D28D9;
    border-color: #DDD6FE;
}

body.page-add-status .sm-tb-hb {
    background: #E1F5EE;
    color: #0F6E56;
    border-color: #6EE7B7;
}

body.page-add-status .sm-tb-ssl {
    background: #FFF1F2;
    color: #BE123C;
    border-color: #FECDD3;
}

/* Pagination */
body.page-add-status .sm-rp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--slate-50, #F8FAFC);
    border-top: 1px solid var(--slate-100, #F1F5F9);
}

body.page-add-status .sm-rp-pg-info {
    font-size: 11px;
    color: var(--slate-600, #64748B);
}

body.page-add-status .sm-rp-pg-btns {
    display: flex;
    gap: 4px;
}

body.page-add-status .sm-rp-pg-btn {
    padding: 3px 8px;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 5px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

body.page-add-status .sm-rp-pg-btn:hover:not(:disabled):not(.act) {
    border-color: var(--deep-navy-blue, #0D2040);
    color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .sm-rp-pg-btn.act {
    background: var(--deep-navy-blue, #0D2040);
    border-color: var(--deep-navy-blue, #0D2040);
    color: #fff;
}

body.page-add-status .sm-rp-pg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Empty state inside results list */
body.page-add-status .sm-rp-empty {
    padding: 20px;
    text-align: center;
    color: var(--slate-400, #94A3B8);
    font-size: 12px;
}

.active-option {
    background-color: var(--anti-flash-white, #f1f1f1) !important;
}

.checkmark {
    color: var(--primary-color);
    font-size: 16px;
    line-height: 1;
}

/* ── Avatar Crop / Image Editor Modal ─────────────────────────────────────── */
.avatar-crop-modal .modal-dialog {
    max-width: 520px;
}

.avatar-crop-modal .modal-content {
    border-radius: 14px;
    border: none;
    overflow: hidden;
    font-family: "Golos Text", sans-serif;
}

.avatar-crop-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

.avatar-crop-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color, #0D2040);
    margin: 0;
}

.avatar-crop-modal__close {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--slate-500, #64748B);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.avatar-crop-modal__close:hover {
    background: var(--slate-100, #F1F5F9);
    color: var(--secondary-color, #0D2040);
}

.avatar-crop-modal__body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.avatar-crop-modal__canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 360px;
    background: var(--slate-100, #F1F5F9);
    border-radius: 10px;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
}

.avatar-crop-modal__canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.avatar-crop-modal__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.avatar-crop-modal__zoom-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.avatar-crop-modal__zoom-label {
    font-size: 13px;
    color: var(--slate-600, #475569);
    white-space: nowrap;
    font-weight: 500;
}

.avatar-crop-modal__zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #fff;
    color: var(--secondary-color, #0D2040);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.avatar-crop-modal__zoom-btn:hover {
    border-color: var(--primary-color, #F97316);
    color: var(--primary-color, #F97316);
}

.avatar-crop-modal__zoom-slider {
    flex: 1;
    accent-color: var(--primary-color, #F97316);
    height: 4px;
    cursor: pointer;
}

.avatar-crop-modal__reset-btn {
    padding: 0 14px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #fff;
    color: var(--slate-600, #475569);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.avatar-crop-modal__reset-btn:hover {
    border-color: var(--secondary-color, #0D2040);
    color: var(--secondary-color, #0D2040);
}

.avatar-crop-modal__hint {
    font-size: 12px;
    color: var(--slate-400, #94A3B8);
    text-align: center;
    margin: 0;
}

.avatar-crop-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--slate-100, #F1F5F9);
}

/* ── Profile avatar — image rendering normalisation ─────────────────────────
   Ensures the photo always fills the rounded container cleanly so the
   background colour never shows as a ring around the image.              */
.profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;   /* clips the image to the same curve as its parent */
    border: none;
    outline: none;
    flex-shrink: 0;
}

/* Applied (server-side + JS) whenever a real image is showing.
   Suppresses the coloured background so it cannot bleed through. */
.profile-avatar.avatar-has-img {
    background: transparent !important;
}

/* ── Table thead/tbody separator fix ────────────────────────────────────────
   Bootstrap 5 (newer builds) applies
     .table > :not(:first-child) { border-top: 2px solid currentcolor }
   On .list-table / .custom-table, currentcolor resolves to --secondary-color
   (#0D2040) because those classes force a dark text colour, producing a thick
   dark line under the header.  Reset it to match the subtle 1px slate line
   that .custom-table th { border-bottom } already provides.               */
.custom-table > :not(:first-child),
.list-table   > :not(:first-child) {
    border-top: 1px solid #E2E8F0 !important;
}

/* ============================================================
   Two-factor authentication setup wizard (.tfa-*)
   ============================================================ */
.tfa-wizard .wm-panel__body {
    padding: 0 !important;
}

.tfa-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #2563EB;
    text-decoration: none;
    transition: background 0.12s ease;
}

.tfa-back-link:hover {
    background: #EFF6FF;
    color: #1E40AF;
}

.tfa-intro {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    max-width: 760px;
}

.tfa-app-link {
    color: #2563EB;
    text-decoration: none;
    font-weight: 500;
}

.tfa-app-link:hover {
    color: #1E40AF;
    text-decoration: underline;
}

.tfa-step {
    display: flex;
    gap: 24px;
    padding: 24px 28px;
    align-items: flex-start;
}

.tfa-step__visual {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    position: relative;
}

.tfa-step__content {
    flex: 1;
    min-width: 0;
}

.tfa-step__label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
}

.tfa-step__title {
    font-size: 17px;
    font-weight: 700;
    color: #0D2040;
    margin: 0 0 10px;
}

.tfa-step__body {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

.tfa-step__list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
}

.tfa-step__inline-link {
    font-size: 12.5px;
    color: #2563EB;
    text-decoration: none;
    font-weight: 500;
}

.tfa-step__inline-link:hover {
    text-decoration: underline;
}

.tfa-step-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 0 28px;
}

/* Step 1 visual: two phones with locks */
.tfa-step__phone {
    width: 56px;
    height: 90px;
    border-radius: 9px;
    background: #fff;
    border: 2px solid #CBD5E1;
    position: relative;
    box-shadow: 0 4px 12px rgba(13, 32, 64, 0.08);
}

.tfa-step__phone::before {
    content: "";
    position: absolute;
    inset: 8px 6px 10px;
    border-radius: 4px;
    background: #F1F5F9;
}

.tfa-step__phone::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    width: 18px;
    height: 22px;
    transform: translateX(-50%);
    background: #F97316;
    border-radius: 4px 4px 2px 2px;
    box-shadow: 0 -7px 0 -2px transparent, inset 0 0 0 1px #fff;
}

.tfa-step__phone--1 {
    transform: translateY(6px) rotate(-8deg);
    margin-right: -16px;
    z-index: 1;
}

.tfa-step__phone--2 {
    transform: translateY(-6px) rotate(8deg);
    z-index: 0;
}

/* Step 2 visual: QR code card */
.tfa-step__qr {
    width: 170px;
    height: 170px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(13, 32, 64, 0.06);
}

/* Step 3 visual: phone showing PIN dots */
.tfa-step__verify-card {
    width: 130px;
    height: 90px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid #CBD5E1;
    box-shadow: 0 4px 12px rgba(13, 32, 64, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tfa-step__verify-screen {
    background: #0F172A;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tfa-step__verify-dots {
    display: flex;
    gap: 6px;
}

.tfa-step__verify-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F97316;
}

.tfa-step__verify-dots span:nth-child(n+4) {
    background: #475569;
}

/* Verify form */
.tfa-step__verify-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
}

.tfa-step__verify-input {
    width: 160px;
    height: 40px;
    border-radius: 7px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: #0D2040;
    text-align: center;
    font-family: 'SF Mono', Monaco, ui-monospace, monospace;
}

.tfa-step__verify-input:focus {
    outline: none;
    border-color: #0D2040;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.08);
    background: #fff;
}

.tfa-step__verify-btn {
    background: #CBD5E1;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    transition: background 0.12s ease;
}

.tfa-step__verify-btn:not(:disabled) {
    background: #F97316;
    cursor: pointer;
}

.tfa-step__verify-btn:not(:disabled):hover {
    background: #EA6C0A;
}

.tfa-step__hint {
    font-size: 11.5px;
    color: #94A3B8;
    margin-top: 10px;
}

/* Store badges */
.tfa-store-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tfa-store-badge {
    display: inline-flex;
    flex-direction: column;
    background: #0D2040;
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.1;
    transition: background 0.12s ease;
}

.tfa-store-badge:hover {
    background: #1E3A5F;
    color: #fff;
}

.tfa-store-badge__sub {
    font-size: 9px;
    opacity: 0.75;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tfa-store-badge__name {
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}

/* Manual key fallback */
.tfa-step__manual {
    font-size: 12.5px;
}

.tfa-step__manual summary {
    cursor: pointer;
    color: #2563EB;
    font-weight: 500;
    list-style: none;
    user-select: none;
}

.tfa-step__manual summary::-webkit-details-marker {
    display: none;
}

.tfa-step__manual summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}

.tfa-step__manual[open] summary::before {
    content: "▾ ";
}

.tfa-step__manual-key {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    flex-wrap: wrap;
}

.tfa-step__manual-label {
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tfa-step__manual-code {
    font-family: 'SF Mono', Monaco, ui-monospace, monospace;
    font-size: 12px;
    color: #0D2040;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    letter-spacing: 0.04em;
    flex: 1;
    min-width: 180px;
}

.tfa-step__manual-copy {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #0D2040;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.tfa-step__manual-copy:hover {
    background: #F1F5F9;
    border-color: #0D2040;
}

@media (max-width: 768px) {
    .tfa-step {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .tfa-step__visual {
        flex: 0 0 auto;
        min-height: 0;
    }
}

/* ============================================================
   Getting started banner (.gs-banner)
   ============================================================ */
.gs-banner {
    width: 100%;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gs-banner--constrained {
    max-width: 460px;
}

.gs-banner.gs-banner--dismissed {
    display: none;
}

.gs-banner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.gs-banner__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.gs-banner__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0D2040, #1E3A5F);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.gs-banner__info {
    flex: 1;
    min-width: 0;
}

.gs-banner__title {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gs-banner__pill {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: #EDF2FF;
    color: #1D4ED8;
}


.gs-banner__sub {
    font-size: 11px;
    color: #64748B;
    margin: 2px 0 0;
}

.gs-banner__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.gs-banner__progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
}

.gs-banner__mini-bar {
    width: 80px;
    height: 4px;
    background: #F1F5F9;
    border-radius: 2px;
    overflow: hidden;
}

.gs-banner__mini-fill {
    height: 4px;
    border-radius: 2px;
    background: #F97316;
    transition: width 0.4s ease;
}

.gs-banner__percent {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
}


/* ============================================================
   Incident Management — shared, list, post-incident, detail
   ============================================================ */

/* Incident detail delete modal */
:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .modal-dialog {
    max-width: 460px;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .modal-content.incident-delete-modal {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--white-color);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    animation: incidentDeleteModalIn 0.18s ease;
}

body:is(.page-incident-detail, .page-incidents) .modal-backdrop.show {
    background: #0D2040;
    opacity: 0.45;
}

@keyframes incidentDeleteModalIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #F1F5F9;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__icon {
    width: 42px;
    height: 42px;
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #FFF5F5;
    font-size: 20px;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__info {
    flex: 1;
    min-width: 0;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__title {
    margin: 0;
    color: #0F172A;
    font-size: 15px;
    font-weight: 600;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__subtitle {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.5;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__close {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: #94A3B8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__close:hover {
    color: #0D2040;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__body {
    padding: 18px 22px;
    text-align: left;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__warnings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 14px;
    padding-left: 0;
    list-style: none;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__warnings li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 12px;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__warnings span {
    flex-shrink: 0;
    font-size: 12px;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__label {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__hint {
    margin: 0 0 8px;
    color: #94A3B8;
    font-size: 10px;
    font-style: italic;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__input {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid #E24B4A;
    border-radius: 7px;
    outline: none;
    background: #FFF5F5;
    color: #B91C1C;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__input::placeholder {
    color: #FECACA;
    font-weight: 400;
    letter-spacing: 0;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__footer {
    display: flex;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #F1F5F9;
    background: #F8FAFC;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__keep,
:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__delete {
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__keep {
    padding: 10px 18px;
    border: 1px solid #CBD5E1;
    background: var(--white-color);
    color: #0F172A;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__keep:hover {
    background: #F8FAFC;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__delete {
    flex: 1;
    padding: 10px;
    border: 0;
    background: #B91C1C;
    color: var(--white-color);
    opacity: 0.5;
    transition: background 0.15s ease, opacity 0.15s ease;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__delete:not(:disabled) {
    opacity: 1;
}

:is(.page-incident-detail, .page-incidents) #deleteConfirmModal .incident-delete-modal__delete:not(:disabled):hover {
    background: #991B1B;
}

/* Shared incident styles */

.report-incdn-btn,
.secondary-btn .report-incdn-btn,
.create-sts-btn {
    padding: 10px 12px !important;
}

.search-tab {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    background-color: var(--bright-gray);
    width: 100%;
}

.search-tab input {
    color: var(--dark-grey);
    font-size: 14px;
    background-color: transparent;
    border: none;
    width: -webkit-fill-available;
}

.search-tab input:focus-visible {
    outline: none;
}

.incidents-table .status-badge {
    font-size: 14px;
}

.status-ongoing {
    background-color: var(--red-color);
}

.status-resolved {
    background-color: var(--green-color);
}

@keyframes incidentPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* Incidents list page */

.page-incidents .search-tab {
    max-width: 300px;
}

.page-incidents .report-incdn-btn {
    min-height: 40px;
    white-space: nowrap;
}

.page-incidents .incidents-page-strip {
    margin: -20px -12px 0;
    padding: 14px 24px;
    border-bottom: 1px solid #E2E8F0;
    background: var(--white-color);
}

.page-incidents .incidents-page-icon {
    width: 38px;
    height: 38px;
    border: 1px solid #FECACA;
    border-radius: 9px;
    background: #FFF5F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-incidents .incident-live-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #B91C1C;
    font-weight: 700;
}

.page-incidents .incident-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E24B4A;
    animation: incidentPulse 1s infinite;
}

.page-incidents .incident-outline-btn {
    height: 40px;
    padding: 8px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    background: var(--white-color);
    color: var(--secondary-color);
}

.page-incidents .incident-outline-btn img {
    margin-right: 6px;
}

.page-incidents .incident-stat-card {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: var(--white-color);
}

.page-incidents .incident-stat-card-alert {
    border-color: #FECACA;
    background: linear-gradient(135deg, #FFF5F5, var(--white-color));
}

.page-incidents .incident-stat-label {
    margin-bottom: 8px;
    color: #94A3B8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-incidents .green-color {
    color: var(--green-color);
}

.page-incidents .incident-trend-bad {
    color: #B91C1C;
    font-weight: 700;
}

.page-incidents .incident-trend-good {
    color: #15803D;
    font-weight: 700;
}

.page-incidents .filter-row {
    margin-bottom: 10px;
}

.page-incidents .incident-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 999px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.12s ease;
    user-select: none;
}

.page-incidents .incident-filter-chip span {
    font-size: 10px;
    opacity: 0.7;
}

.page-incidents .incident-filter-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.page-incidents .incident-filter-chip.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.page-incidents .incident-filter-chip:hover {
    border-color: #94A3B8;
    color: #0F172A;
}

.page-incidents .incident-filter-chip.active:hover {
    color: var(--white-color);
}

.page-incidents .incident-filter-chip-red {
    color: #B91C1C;
}

.page-incidents .incident-filter-chip-red.active {
    background: #B91C1C;
    border-color: #B91C1C;
    color: var(--white-color);
}

.page-incidents .incident-filter-chip-amber {
    color: #92400E;
}

.page-incidents .incident-filter-chip-amber.active {
    background: #F59E0B;
    border-color: #F59E0B;
    color: var(--white-color);
}

.page-incidents .incident-filter-chip-green {
    color: #15803D;
}

.page-incidents .incident-filter-chip-green.active {
    background: #15803D;
    border-color: #15803D;
    color: var(--white-color);
}

.page-incidents .table-width {
    max-width: 100%;
}

.page-incidents .incident-toolbar {
    margin-top: -2px;
}

.page-incidents .incident-search {
    max-width: 340px;
    flex: 1 1 260px;
    border: 1px solid #E2E8F0;
    background: var(--white-color);
}

.page-incidents .incident-table-card {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: var(--white-color);
}

.page-incidents .incidents-table {
    border: 0;
    min-width: 980px;
}

.page-incidents .incident-status-col {
    width: 130px;
}

.page-incidents .incident-main-col {
    width: auto;
}

.page-incidents .incident-regions-col {
    width: 140px;
}

.page-incidents .incident-started-col {
    width: 115px;
}

.page-incidents .incident-duration-col {
    width: 120px;
}

.page-incidents .incident-notified-col {
    width: 95px;
}

.page-incidents .incident-actions-col {
    width: 84px;
}

.page-incidents .incidents-table th {
    background: #F8FAFC !important;
    color: #94A3B8 !important;
    font-size: 10px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-incidents .incidents-table td {
    padding: 11px 14px !important;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12px;
}

.page-incidents .incident-table-row {
    cursor: pointer;
}

.page-incidents .incident-row-highlight td {
    background: #FFFAF5;
}

.page-incidents .incident-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.page-incidents .incident-status-pill span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.page-incidents .incident-status-active {
    border-color: #FECACA;
    background: #FFF5F5;
    color: #B91C1C;
}

.page-incidents .incident-status-active span {
    background: #E24B4A;
    animation: incidentPulse 1s infinite;
}

.page-incidents .incident-status-monitoring {
    border-color: #FDE68A;
    background: #FFFBEB;
    color: #92400E;
}

.page-incidents .incident-status-monitoring span {
    background: #F59E0B;
}

.page-incidents .incident-status-resolved {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #15803D;
}

.page-incidents .incident-status-resolved span {
    background: #22C55E;
}

.page-incidents .incident-title {
    display: inline-block;
    margin-bottom: 3px;
    color: #0F172A;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.page-incidents .incident-title:hover {
    color: var(--primary-color);
}

.page-incidents .incident-meta,
.page-incidents .incident-region-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.page-incidents .incident-monitor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748B;
    font-size: 11px;
}

.page-incidents .incident-monitor i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.page-incidents .incident-severity,
.page-incidents .incident-type,
.page-incidents .incident-region-list span {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
}

.page-incidents .incident-region-list span {
    background: #F8FAFC;
    color: #475569;
}

.page-incidents .incident-severity-critical {
    border-color: #FECACA;
    background: #FFF5F5;
    color: #B91C1C;
}

.page-incidents .incident-severity-major {
    border-color: #FDE68A;
    background: #FFFBEB;
    color: #92400E;
}

.page-incidents .incident-severity-minor {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
}

.page-incidents .incident-type {
    border-radius: 4px;
}

.page-incidents .incident-type-http {
    border-color: #FED7AA;
    background: #FFF5EE;
    color: #C2410C;
}

.page-incidents .incident-type-api {
    border-color: #A7F3D0;
    background: #ECFDF5;
    color: #047857;
}

.page-incidents .incident-type-port {
    border-color: #DDD6FE;
    background: #F5F3FF;
    color: #6D28D9;
}

.page-incidents .incident-type-ping {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
}

.page-incidents .incident-type-ssl {
    border-color: #FECDD3;
    background: #FFF1F2;
    color: #BE123C;
}

.page-incidents .incident-duration-active {
    color: #B91C1C;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
}

.page-incidents .incident-row-btn {
    padding: 4px 8px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    color: var(--secondary-color);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.page-incidents .incident-row-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.page-incidents .incident-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.page-incidents .incident-table-row:hover .incident-row-actions,
.page-incidents .incident-table-row:focus-within .incident-row-actions {
    opacity: 1;
}

.page-incidents .incidents-table .status-badge {
    min-width: 92px;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 700;
}

.page-incidents .status-ongoing::after {
    content: "Active";
}

.page-incidents .status-resolved::after {
    content: "Resolved";
}

.page-incidents .incidents-table tbody tr:hover td {
    background: #FAFBFC;
}

/* Incident list — pagination column overrides */
.page-incidents .incidents-table th:first-child,
.page-incidents .incidents-table td:first-child {
    width: 130px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.page-incidents .incidents-table th:last-child,
.page-incidents .incidents-table td:last-child {
    width: 84px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Post-incident page */

.page-post-incident .post-incident-info {
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    background: #FFFBEB;
    color: #92400E;
    font-size: 12px;
    line-height: 1.6;
}

.page-post-incident .post-incident-info__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F59E0B;
    color: var(--white-color);
    font-size: 11px;
    font-weight: 800;
    flex: 0 0 18px;
}

.page-post-incident .post-incident-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
}

.page-post-incident .post-incident-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.page-post-incident .post-incident-section,
.page-post-incident .post-incident-preview {
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: var(--white-color);
    overflow: hidden;
}

.page-post-incident .post-incident-section__head,
.page-post-incident .post-incident-preview__head {
    padding: 13px 16px;
    border-bottom: 1px solid #F1F5F9;
}

.page-post-incident .post-incident-section__body,
.page-post-incident .post-incident-preview__body {
    padding: 16px;
}

.page-post-incident .post-incident-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.page-post-incident .post-incident-field:last-child {
    margin-bottom: 0;
}

.page-post-incident .post-incident-field label {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
}

.page-post-incident .post-incident-field label span {
    color: #E24B4A;
}

.page-post-incident .post-incident-input {
    min-height: 38px;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 13px;
}

.page-post-incident .post-incident-input:focus {
    border-color: #0D2040;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.07);
}

.page-post-incident .post-incident-helper {
    color: #94A3B8;
    font-size: 10px;
    line-height: 1.5;
}

.page-post-incident .post-incident-card-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.page-post-incident .post-incident-choice {
    min-height: 82px;
    padding: 10px 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    color: #0F172A;
    text-align: left;
    transition: all 0.12s ease;
}

.page-post-incident .post-incident-choice__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border-radius: 50%;
    color: #B91C1C;
    font-size: 14px;
    font-weight: 800;
}

.page-post-incident .post-incident-choice__icon.is-critical,
.page-post-incident .post-incident-choice__icon.is-major,
.page-post-incident .post-incident-choice__icon.is-minor {
    border: 3px solid var(--white-color);
    box-shadow: 0 0 0 1px #E2E8F0;
}

.page-post-incident .post-incident-choice__icon.is-critical {
    background: #E24B4A;
}

.page-post-incident .post-incident-choice__icon.is-major {
    background: #F59E0B;
}

.page-post-incident .post-incident-choice__icon.is-minor {
    background: #3B82F6;
}

.page-post-incident .post-incident-choice strong,
.page-post-incident .post-incident-choice small {
    display: block;
}

.page-post-incident .post-incident-choice strong {
    font-size: 12px;
    font-weight: 700;
}

.page-post-incident .post-incident-choice small {
    margin-top: 4px;
    color: #64748B;
    font-size: 10px;
    line-height: 1.4;
}

.page-post-incident .post-incident-choice:hover,
.page-post-incident .post-incident-choice.active {
    border-color: #0D2040;
    background: #EDF2FF;
}

.page-post-incident .post-incident-choice-danger.active {
    border-color: #E24B4A;
    background: #FFF5F5;
}

.page-post-incident .post-incident-monitor-search {
    max-width: 100%;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.page-post-incident .post-incident-monitor-list {
    max-height: 225px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.page-post-incident .post-incident-monitor {
    display: grid;
    grid-template-columns: 16px 8px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #F8FAFC;
    cursor: pointer;
}

.page-post-incident .post-incident-monitor:last-child {
    border-bottom: 0;
}

.page-post-incident .post-incident-monitor:hover {
    background: #FAFBFC;
}

.page-post-incident .post-incident-monitor__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-post-incident .post-incident-monitor strong {
    color: #0F172A;
    font-size: 12px;
}

.page-post-incident .post-incident-monitor small {
    color: #94A3B8;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-post-incident .post-incident-monitor .incident-type {
    margin-top: 1px;
}

.page-post-incident .post-incident-monitor__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.page-post-incident .post-incident-monitor__dot.is-down {
    background: #E24B4A;
}

.page-post-incident .post-incident-monitor__dot.is-up {
    background: #22C55E;
}

.page-post-incident .post-incident-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #F8FAFC;
}

.page-post-incident .post-incident-toggle:last-child {
    border-bottom: 0;
}

.page-post-incident .post-incident-toggle strong,
.page-post-incident .post-incident-toggle small {
    display: block;
}

.page-post-incident .post-incident-toggle strong {
    color: #0F172A;
    font-size: 12px;
}

.page-post-incident .post-incident-toggle small {
    margin-top: 2px;
    color: #94A3B8;
    font-size: 10px;
}

.page-post-incident .post-incident-toggle > span:first-child {
    min-width: 0;
}

.page-post-incident .post-incident-preview {
    position: sticky;
    top: 16px;
    align-self: start;
}

.page-post-incident .post-incident-preview__head span {
    color: #94A3B8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-post-incident .post-incident-preview__logo {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0D2040;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 700;
}

.page-post-incident .post-incident-preview__banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid #FECACA;
    border-radius: 7px;
    background: #FFF5F5;
    color: #B91C1C;
    font-size: 11px;
}

.page-post-incident .post-incident-preview__message {
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    color: #64748B;
    font-size: 11px;
    line-height: 1.6;
}

.page-post-incident .post-incident-email {
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    background: #F8FAFC;
}

.page-post-incident .post-incident-email strong,
.page-post-incident .post-incident-email span {
    display: block;
    font-size: 11px;
}

.page-post-incident .post-incident-email span {
    margin-top: 5px;
    color: #64748B;
    line-height: 1.5;
}

.page-post-incident .post-incident-email .primary-btn {
    min-height: 28px;
    padding: 5px 12px;
    border: none;
    border-radius: 5px;
    background: #0D2040;
    color: var(--white-color);
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .page-post-incident .post-incident-layout {
        grid-template-columns: 1fr;
    }

    .page-post-incident .post-incident-preview {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .page-post-incident .post-incident-card-row {
        grid-template-columns: 1fr;
    }

    .page-post-incident .post-incident-monitor {
        grid-template-columns: 16px 8px minmax(0, 1fr);
    }

    .page-post-incident .post-incident-monitor .incident-type {
        grid-column: 3;
        justify-self: start;
    }
}

/* Incident detail page */

.page-incident-detail .incident-detail-ref {
    padding-top: 0;
}

.page-incident-detail .incident-detail-strip {
    border-radius: 11px;
    padding: 12px 24px 14px;
    border-bottom: 1px solid #E2E8F0;
    background: var(--white-color);
}

.page-incident-detail .incident-detail-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-incident-detail .incident-detail-icon-danger {
    border: 1px solid #FECACA;
    background: #FFF5F5;
}

.page-incident-detail .incident-detail-icon-resolved {
    border: 1px solid #BBF7D0;
    background: #F0FDF4;
}

.page-incident-detail .incident-detail-title {
    color: #0F172A;
    font-size: 15px;
    font-weight: 600;
}

.page-incident-detail .incident-detail-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #64748B;
    font-size: 12px;
}

.page-incident-detail .incident-detail-action {
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.page-incident-detail .incident-detail-action-orange {
    background: #F97316 !important;
    border-color: #F97316 !important;
    color: var(--white-color) !important;
}

.page-incident-detail .incident-detail-action-navy {
    background: #0D2040 !important;
    border-color: #0D2040 !important;
    color: var(--white-color) !important;
}

.page-incident-detail .incident-detail-active-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #FECACA;
    border-radius: 9px;
    background: #FFF5F5;
    color: #B91C1C;
    font-size: 12px;
    font-weight: 600;
}

.page-incident-detail .incident-detail-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E24B4A;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.18);
    animation: incidentPulse 1s infinite;
    flex-shrink: 0;
}

.page-incident-detail .incident-detail-active-banner .primary-btn {
    margin-left: auto;
    border: none;
    border-radius: 6px;
    background: #B91C1C;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.page-incident-detail .incident-detail-active-banner.is-monitoring {
    border: 1px solid #FECACA;
    background: #FFF5F5;
    color: #92400E;
}

.page-incident-detail .incident-detail-active-banner.is-resolved {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #166534;
}

.page-incident-detail .incident-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 14px;
}

.page-incident-detail .incident-detail-left,
.page-incident-detail .incident-detail-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-incident-detail .incident-detail-card,
.page-incident-detail .incident-side-card {
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: var(--white-color);
}

.page-incident-detail .incident-detail-card {
    padding: 18px 20px;
}

.page-incident-detail .incident-detail-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
}

.page-incident-detail .incident-detail-meta-grid > div {
    padding-right: 20px;
    margin-right: 20px;
    margin-bottom: 8px;
    border-right: 1px solid #F1F5F9;
}

.page-incident-detail .incident-detail-meta-grid > div:last-child {
    border-right: 0;
}

.page-incident-detail .incident-detail-meta-grid p {
    margin-bottom: 2px;
    color: #94A3B8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-incident-detail .incident-detail-meta-grid strong {
    color: #0F172A;
    font-size: 13px;
    font-weight: 500;
}

.page-incident-detail .incident-detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.page-incident-detail .incident-detail-card-head span {
    color: #94A3B8;
    font-size: 11px;
}

.page-incident-detail .incident-timeline {
    position: relative;
}

.page-incident-detail .incident-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #F1F5F9;
}

.page-incident-detail .incident-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}

.page-incident-detail .incident-timeline-dot {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    border: 3px solid var(--white-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FECACA;
    z-index: 1;
    flex: 0 0 16px;
}

.page-incident-detail .incident-timeline-dot.red {
    background: #E24B4A;
}

.page-incident-detail .incident-timeline-dot.active {
    background: #E24B4A;
}

.page-incident-detail .incident-timeline-dot.monitoring {
    background: #F59E0B;
    box-shadow: 0 0 0 2px #FDE68A;
}

.page-incident-detail .incident-timeline-dot.resolved {
    background: #22C55E;
    box-shadow: 0 0 0 2px #BBF7D0;
}

.page-incident-detail .incident-timeline-dot.blue {
    background: #E24B4A;
    box-shadow: 0 0 0 2px #FECACA;
}

.page-incident-detail .incident-timeline-card {
    flex: 1;
    padding: 12px 14px;
    border-radius: 9px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.page-incident-detail .incident-timeline-card.latest.status-investigating,
.page-incident-detail .incident-timeline-card.latest.status-identified,
.page-incident-detail .incident-timeline-card.latest.status-monitoring {
    background: #FFF5F5;
    border-color: #FECACA;
}

.page-incident-detail .incident-timeline-card.latest.status-resolved {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.page-incident-detail .incident-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.page-incident-detail .incident-timeline-top strong {
    color: #0F172A;
    font-size: 12px;
}

.page-incident-detail .incident-timeline-top span,
.page-incident-detail .incident-timeline-author {
    color: #343434;
    font-size: 10px;
}

.page-incident-detail .incident-timeline-card p {
    color: #475569;
    font-size: 12px;
    line-height: 1.6;
}

.page-incident-detail .incident-timeline-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-incident-detail .incident-timeline-author span {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0D2040;
    color: var(--white-color);
    font-size: 7px;
    font-weight: 700;
}

.page-incident-detail .incident-timeline-author em {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--primary-color);
    color: var(--white-color);
    font-style: normal;
}

.page-incident-detail .incident-update-box {
    margin-top: 16px;
    padding: 14px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 9px;
    background: #F8FAFC;
}

.page-incident-detail .incident-update-pill {
    padding: 8px 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    background: var(--white-color);
    color: var(--secondary-color);
    font-size: 13px;
    font-weight: 500;
    width: max-content;
}

.page-incident-detail .incident-update-pill.active {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--white-color);
}

.page-incident-detail .incident-update-box textarea {
    min-height: 94px;
    resize: vertical;
}

.page-incident-detail .incident-notify-toggle {
    cursor: pointer;
    user-select: none;
}

.page-incident-detail .incident-update-box .tertiary-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.page-incident-detail .incident-update-pill-green {
    color: #15803D;
}

.page-incident-detail .incident-side-card {
    overflow: hidden;
    padding: 0 0 10px 0;
}

.page-incident-detail .incident-side-head {
    padding: 11px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #0F172A;
    font-size: 12px;
    font-weight: 500;
}

.page-incident-detail .incident-affected-row,
.page-incident-detail .incident-side-kv,
.page-incident-detail .incident-notification-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 14px;
    border-bottom: 1px solid #F8FAFC;
    font-size: 12px;
}

.page-incident-detail .incident-affected-row {
    justify-content: flex-start;
    align-items: flex-start;
}

.page-incident-detail .incident-affected-row > span {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.page-incident-detail .incident-affected-row strong,
.page-incident-detail .incident-notification-row strong {
    color: #0F172A;
    font-size: 12px;
}

.page-incident-detail .incident-affected-row p,
.page-incident-detail .incident-side-kv span,
.page-incident-detail .incident-notification-row span {
    margin: 0;
    color: #64748B;
    font-size: 12px;
}

.page-incident-detail .incident-notification-row em {
    color: #15803D;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.page-incident-detail .incident-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.page-incident-detail .incident-status-pill span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.page-incident-detail .incident-status-active {
    border-color: #FECACA;
    background: #FFF5F5;
    color: #B91C1C;
}

.page-incident-detail .incident-status-monitoring {
    border-color: #FDE68A;
    background: #FFFBEB;
    color: #92400E;
}

.page-incident-detail .incident-status-monitoring span:first-child {
    background: #F59E0B;
}

.page-incident-detail .incident-status-resolved {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #166534;
}

.page-incident-detail .incident-status-resolved span:first-child {
    background: #22C55E;
}

.page-incident-detail .incident-severity,
.page-incident-detail .incident-type {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 7px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.3;
}

.page-incident-detail .incident-type {
    border-radius: 4px;
}

.page-incident-detail .incident-severity-critical {
    border-color: #FECACA;
    background: #FFF5F5;
    color: #B91C1C;
}

.page-incident-detail .incident-severity-major {
    border-color: #FED7AA;
    background: #FFF7ED;
    color: #C2410C;
}

.page-incident-detail .incident-severity-minor {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
}

.page-incident-detail .incident-type-http {
    border-color: #FED7AA;
    background: #FFF5EE;
    color: #C2410C;
}

.page-incident-detail .incident-type-api {
    border-color: #A7F3D0;
    background: #ECFDF5;
    color: #047857;
}

.page-incident-detail .incident-type-ssl {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #166534;
}

.page-incident-detail .incident-type-port {
    border-color: #DDD6FE;
    background: #F5F3FF;
    color: #6D28D9;
}

.page-incident-detail .incident-type-ping,
.page-incident-detail .incident-trend-bad {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
    padding: 5px;
    border-radius: 5px;
}

@media (max-width: 991.98px) {
    .page-incident-detail .incident-detail-grid {
        grid-template-columns: 1fr;
    }
}

.page-incident-detail .min-w-0 {
    min-width: 0;
}

.gs-banner__chevron {
    font-size: 20px;
    color: #94A3B8;
    transition: transform 0.2s ease;
}

.gs-banner__chevron.open {
    transform: rotate(180deg);
}

.gs-banner__dismiss {
    background: transparent;
    border: 0;
    font-size: 20px;
    color: #94A3B8;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.gs-banner__dismiss:hover {
    color: #B91C1C;
    background: #FFF5F5;
}

.gs-banner__body {
    border-top: 1px solid #F1F5F9;
    padding: 4px 16px 12px;
    display: none;
}

.gs-banner__body.open {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Invitation — Sidebar badge, empty state, invite cards & help block
   ============================================================ */

/* Sidebar "Invitations" badge — small orange pill on the right of the row. */
.sidebar-link-badge {
    background: #F97316;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 100px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 0;
    flex-shrink: 0;
}

/* Empty state on invitation.html — shown when the user has no pending invites. */
.invite-empty {
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.invite-empty__icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invite-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: #0D2040;
    margin: 0;
}

.invite-empty__body {
    font-size: 13px;
    color: #64748B;
    line-height: 1.6;
    max-width: 460px;
}

.invite-empty__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.invite-empty__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F97316;
    color: #fff;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease;
}

.invite-empty__cta-primary:hover {
    background: #EA6C0A;
    color: #fff;
}

.invite-empty__cta-secondary {
    color: #2563EB;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.invite-empty__cta-secondary:hover {
    color: #1E40AF;
    text-decoration: underline;
}

/* ============================================================
   Workspace invitations — used on accept-invitation page (Case 2 in invite flow).
   Each pending invite is rendered as an .invite-card with header / body / footer.
   ============================================================ */
.invite-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.invite-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.invite-card:hover {
    box-shadow: 0 6px 20px rgba(13, 32, 64, 0.08);
}

.invite-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 14px;
    flex-wrap: wrap;
}

.invite-card__workspace {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.invite-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.invite-card__avatar--blue { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.invite-card__avatar--orange { background: linear-gradient(135deg, #F97316, #EA580C); }
.invite-card__avatar--green { background: linear-gradient(135deg, #15803D, #166534); }
.invite-card__avatar--purple { background: linear-gradient(135deg, #7C3AED, #5B21B6); }

.invite-card__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invite-card__name {
    font-size: 16px;
    font-weight: 700;
    color: #0D2040;
}

.invite-card__sub {
    font-size: 12px;
    color: #64748B;
}

.invite-card__sub strong {
    color: #0D2040;
    font-weight: 600;
}

.invite-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.invite-role-tag--admin {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.invite-role-tag--member {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.invite-role-tag--viewer {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.invite-role-tag--billing {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.invite-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.invite-card__time,
.invite-card__expiry {
    font-size: 11px;
    color: #94A3B8;
}

.invite-card__expiry {
    color: #92400E;
    font-weight: 500;
}

.invite-card__body {
    padding: 0 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite-card__stats {
    display: flex;
    gap: 24px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-radius: 8px;
}

.invite-card__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.invite-card__stat-num {
    font-size: 16px;
    font-weight: 700;
    color: #0D2040;
}

.invite-card__stat-label {
    font-size: 10px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.invite-card__message {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    font-style: italic;
    padding: 10px 14px;
    border-left: 3px solid #E2E8F0;
    background: #FAFBFC;
    border-radius: 0 6px 6px 0;
}

.invite-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #FAFBFC;
    border-top: 1px solid #E2E8F0;
    flex-wrap: wrap;
}

.invite-card__decline,
.invite-card__cancel-request {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.invite-card__decline:hover,
.invite-card__cancel-request:hover {
    background: #FEF2F2;
    border-color: #B91C1C;
    color: #B91C1C;
}

.invite-card__accept {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0D2040;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.05s ease;
}

.invite-card__accept:hover {
    background: #1E3A5F;
}

.invite-card__accept:active {
    transform: scale(0.98);
}

/* "How invitations work" help block at the bottom. */
.invite-help {
    background: #F1F5F9;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid #E2E8F0;
}

.invite-help__title {
    font-size: 13px;
    font-weight: 700;
    color: #0D2040;
    margin: 0 0 8px;
}

.invite-help__list {
    font-size: 12px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    padding-left: 18px;
}

.invite-help__list li {
    list-style-type: disc !important;
}

.invite-help__list strong {
    color: #0D2040;
}

.invite-help__list a {
    color: #2563EB;
    text-decoration: none;
}

.invite-help__list a:hover {
    color: #1E40AF;
    text-decoration: underline;
}

.gs-banner__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #F8FAFC;
}

.gs-banner__item:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.gs-banner__item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.gs-banner__check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.gs-banner__check.done {
    background: #0D2040;
    border-color: #0D2040;
}

.gs-banner__check svg {
    display: none;
}

.gs-banner__check.done svg {
    display: block;
}

.gs-banner__item-txt {
    min-width: 0;
}

.gs-banner__item-name {
    font-size: 12px;
    font-weight: 500;
    color: #0F172A;
    transition: color 0.2s ease;
}

.gs-banner__item-name.done {
    color: #94A3B8;
    text-decoration: line-through;
}

.gs-banner__item-sub {
    font-size: 10px;
    color: #94A3B8;
    margin-top: 1px;
    line-height: 1.45;
}

.gs-banner__cta {
    font-size: 11px;
    font-weight: 600;
    color: #F97316;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.gs-banner__cta:hover {
    color: #EA6C0A;
    text-decoration: underline;
}

.gs-banner__cta.done {
    color: #15803D;
    cursor: default;
}

.gs-banner__cta.done:hover {
    text-decoration: none;
    color: #15803D;
}

/* ============================================================
   Invite role grid (.invite-role-grid .invite-role-*)
   ============================================================ */
.invite-role-grid .invite-role-label-wrap img {
    width: 14px;
    height: 14px;
}

.invite-role-grid .invite-role-grid {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.invite-role-grid .invite-role-card {
    min-height: 112px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1.5px solid var(--slate-200, #E2E8F0) !important;
    background: var(--slate-50, #F8FAFC);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    gap: 0;
    user-select: none;
}

.invite-role-grid .invite-role-card:hover {
    border-color: var(--slate-400, #94A3B8) !important;
    background: #FAFBFC;
}

.invite-role-grid .invite-role-card-active,
.invite-role-grid .invite-role-card-active:hover {
    background: #EDF2FF !important;
    border: 1.5px solid var(--deep-navy-blue, #0D2040) !important;
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.08);
}

.invite-role-grid .invite-role-icon {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 4px;
}

.invite-role-grid .invite-role-title {
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 2px;
}

.invite-role-grid .invite-role-description {
    font-size: 10px;
    line-height: 1.4;
    color: #64748B !important;
}

.invite-role-grid .invite-role-badges {
    gap: 4px !important;
    margin-top: 6px;
}

.invite-role-grid .invite-role-badge {
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    letter-spacing: 0.01em;
}

.invite-role-grid .invite-role-badge.bg-success-subtle,
.invite-role-grid .invite-role-badge.text-success {
    background: #F0FDF4 !important;
    color: #15803D !important;
    border-color: #BBF7D0 !important;
}

.invite-role-grid .invite-role-badge.bg-primary-subtle,
.invite-role-grid .invite-role-badge.text-primary {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

.invite-role-grid .invite-role-badge.bg-light,
.invite-role-grid .invite-role-badge.text-secondary {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

.invite-role-grid .invite-role-check .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-color: var(--slate-300, #CBD5E1);
    background: var(--white-color);
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.invite-role-grid .invite-role-check .form-check-input:checked {
    background-color: var(--deep-navy-blue, #0D2040) !important;
    border-color: var(--deep-navy-blue, #0D2040) !important;
}

.invite-role-grid .invite-role-check .form-check-input:focus {
    border-color: var(--deep-navy-blue, #0D2040) !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 32, 64, 0.15) !important;
}

/* ============================================================
   Status page detail (.page-status-detail) — access input
   overrides shared with page-add-status
   ============================================================ */
body.page-add-status .status-form-label,
body.page-edit-status .status-form-label,
body.page-status-detail .status-form-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--slate-600, #475569);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

body.page-add-status .status-helper-text,
body.page-edit-status .status-helper-text,
body.page-status-detail .status-helper-text {
    font-size: 10px;
    color: var(--slate-400, #94A3B8);
    line-height: 1.5;
}

body.page-add-status .status-access-card,
body.page-edit-status .status-access-card,
body.page-status-detail .status-access-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 14px 16px 14px 16px;
    border: 1.5px solid var(--slate-200, #E2E8F0);
    border-radius: 9px;
    background: var(--white-color, #fff);
    transition: border-color .12s, background .12s, box-shadow .12s;
    margin-bottom: 0;
    user-select: none;
}

body.page-add-status .status-access-card:hover,
body.page-edit-status .status-access-card:hover,
body.page-status-detail .status-access-card:hover {
    border-color: var(--slate-400, #94A3B8);
    background: #FAFBFC;
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked),
body.page-edit-status .status-access-card:has(input[type="radio"]:checked),
body.page-status-detail .status-access-card:has(input[type="radio"]:checked) {
    border-color: var(--deep-navy-blue, #0D2040);
    background: #EDF2FF;
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.08);
}

body.page-add-status .status-access-radio-input,
body.page-edit-status .status-access-radio-input,
body.page-status-detail .status-access-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

body.page-add-status .status-access-icon,
body.page-edit-status .status-access-icon,
body.page-status-detail .status-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 10px;
}

body.page-add-status .status-access-radio-dot,
body.page-edit-status .status-access-radio-dot,
body.page-status-detail .status-access-radio-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--slate-300, #CBD5E1);
    background: transparent;
    transition: background .12s, border-color .12s;
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot,
body.page-edit-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot,
body.page-status-detail .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot {
    background: var(--deep-navy-blue, #0D2040);
    border-color: var(--deep-navy-blue, #0D2040);
}

body.page-add-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot::after,
body.page-edit-status .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot::after,
body.page-status-detail .status-access-card:has(input[type="radio"]:checked) .status-access-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

body.page-add-status .status-access-name,
body.page-edit-status .status-access-name,
body.page-status-detail .status-access-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-navy-blue, #0F172A);
    line-height: 1.3;
}

body.page-add-status .status-access-desc,
body.page-edit-status .status-access-desc,
body.page-status-detail .status-access-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.45;
}

body.page-add-status #statusDomainPanel input.custom-input.bg-white,
body.page-add-status #statusDomainPanel input.custom-input.grey-border,
body.page-add-status #statusAccessPanel input.custom-input.bg-white,
body.page-add-status #statusAccessPanel input.custom-input.grey-border,
body.page-edit-status #statusAccessPanel input.custom-input.bg-white,
body.page-edit-status #statusAccessPanel input.custom-input.grey-border,
body.page-status-detail #statusAccessPanel input.custom-input.bg-white,
body.page-status-detail #statusAccessPanel input.custom-input.grey-border {
    background: var(--input-bg-empty) !important;
}

body.page-add-status #statusDomainPanel input.custom-input.bg-white:focus,
body.page-add-status #statusDomainPanel input.custom-input.grey-border:focus,
body.page-add-status #statusAccessPanel input.custom-input.bg-white:focus,
body.page-add-status #statusAccessPanel input.custom-input.grey-border:focus,
body.page-edit-status #statusAccessPanel input.custom-input.bg-white:focus,
body.page-edit-status #statusAccessPanel input.custom-input.grey-border:focus,
body.page-status-detail #statusAccessPanel input.custom-input.bg-white:focus,
body.page-status-detail #statusAccessPanel input.custom-input.grey-border:focus {
    background: var(--input-bg-filled) !important;
}

/* ============================================================
   Status page detail (.page-status-detail) — entire component
   ============================================================ */
.page-status-detail .min-w-0 {
    min-width: 0;
}

.page-status-detail .status-detail-content {
    padding-top: 30px !important;
}

.page-status-detail .status-detail-strip {
    background: var(--white-color);
    padding: 16px 18px;
}

.page-status-detail .status-detail-logo,
.page-status-detail .status-detail-preview-logo {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--secondary-color);
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.page-status-detail .status-detail-preview-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}

.page-status-detail .status-detail-title {
    color: var(--slate-950, #0F172A);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.page-status-detail .status-detail-meta {
    color: var(--slate-600, #64748B);
    font-size: 12px;
}

.page-status-detail .status-detail-meta strong {
    color: var(--slate-950, #0F172A);
    font-weight: 600;
}

.page-status-detail .status-detail-navy-btn {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.page-status-detail .status-detail-navy-btn:hover {
    background: #1E3A5F !important;
    border-color: #1E3A5F !important;
}

.page-status-detail .status-detail-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
}

.page-status-detail .status-detail-icon-btn img {
    width: 16px;
    height: 16px;
}

.page-status-detail .status-detail-tabs {
    background: var(--white-color);
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 10px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.page-status-detail .status-detail-tabs .nav-link {
    border: 0;
    border-radius: 0;
    color: var(--slate-600, #64748B);
    font-size: 13px;
    font-weight: 500;
    padding: 11px 14px;
    white-space: nowrap;
}

.page-status-detail .status-detail-tabs .nav-link:hover,
.page-status-detail .status-detail-tabs .nav-link.active {
    color: var(--slate-950, #0F172A);
}

.page-status-detail .status-detail-tabs .nav-link.active {
    background: transparent;
}

.page-status-detail .status-detail-tabs .nav-link.active::after {
    height: 2px;
    background-color: var(--secondary-color);
}

.page-status-detail .status-detail-tab-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 100px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 9px;
    font-weight: 500;
}

.page-status-detail .status-detail-tab-badge--danger {
    background: #FFF5F5;
    color: #B91C1C;
}

.page-status-detail .status-detail-tab-content {
    padding-top: 16px;
}

.page-status-detail .status-detail-stat {
    padding: 14px 16px;
}

.page-status-detail .status-detail-stat-label {
    color: var(--slate-400, #94A3B8);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-status-detail .status-detail-stat-value {
    color: var(--slate-950, #0F172A);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.page-status-detail .status-detail-stat-value--warning {
    color: #F59E0B;
    font-size: 17px;
}

.page-status-detail .status-detail-trend {
    color: #15803D;
    font-size: 11px;
    font-weight: 600;
}

.page-status-detail .status-detail-alert .compact-alert__text a,
.page-status-detail .status-detail-info-alert .compact-alert__text {
    font-weight: 600;
}

.page-status-detail .status-detail-info-alert {
    display: flex;
    align-items: center !important;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #BFDBFE;
    border-radius: 9px;
    background: #EFF6FF;
    color: #1E40AF;
}

.page-status-detail .status-detail-info-alert::before {
    content: "i";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #1E40AF;
    color: #1E40AF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
}

.page-status-detail .status-detail-info-alert .compact-alert__text {
    font-size: 11px;
    font-weight: 400;
    color: #1E40AF;
}

.page-status-detail .wm-panel__title {
    color: var(--slate-950, #0F172A);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.page-status-detail .status-detail-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

.page-status-detail .status-detail-small-btn {
    padding: 5px 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.page-status-detail .status-detail-small-btn--resolved {
    border-color: #BBF7D0 !important;
    background: #F0FDF4 !important;
    color: #15803D !important;
}

.page-status-detail .status-detail-save-settings-btn--saved {
    background: #15803D !important;
    border-color: #15803D !important;
    color: var(--white-color) !important;
}

.status-detail-input-modal .confirm-modal__content {
    text-align: left;
}

.status-detail-input-modal .confirm-modal__title,
.status-detail-input-modal .confirm-modal__actions {
    text-align: center;
}

.page-status-detail .status-detail-list {
    display: flex;
    flex-direction: column;
}

.page-status-detail .status-detail-monitor-row,
.page-status-detail .status-detail-incident-row,
.page-status-detail .status-detail-subscriber-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--slate-50, #F8FAFC);
    transition: background-color 0.12s ease;
}

.page-status-detail .status-detail-monitor-row:hover,
.page-status-detail .status-detail-incident-row:hover,
.page-status-detail .status-detail-subscriber-row:hover {
    background: #FAFBFC;
}

.page-status-detail .status-detail-list > :last-child {
    border-bottom: 0;
}

.page-status-detail .status-detail-monitor-main,
.page-status-detail .status-detail-incident-main {
    flex: 1 1 auto;
    min-width: 0;
}

.page-status-detail .status-detail-row-title {
    color: var(--slate-950, #0F172A);
    font-size: 13px;
    font-weight: 500;
}

.page-status-detail .status-detail-service-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.page-status-detail .status-detail-service-dot--up {
    background: var(--green-color);
}

.page-status-detail .status-detail-service-dot--down {
    background: var(--red-color);
}

.page-status-detail .status-detail-drag {
    color: var(--slate-300, #CBD5E1);
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
    cursor: grab;
}

.page-status-detail .status-detail-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.page-status-detail .status-detail-bars span {
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: var(--green-color);
}

.page-status-detail .status-detail-bars span:nth-child(3n+2) {
    height: 11px;
}

.page-status-detail .status-detail-bars span:nth-child(3n) {
    height: 14px;
}

.page-status-detail .status-detail-bars--warn span:nth-last-child(-n+3) {
    background: var(--red-color);
}

.page-status-detail .status-detail-bars--sm {
    gap: 1px;
}

.page-status-detail .status-detail-bars--sm span {
    width: 2px;
    height: 6px;
}

.page-status-detail .status-detail-bars--sm span:nth-child(3n+2) {
    height: 8px;
}

.page-status-detail .status-detail-bars--sm span:nth-child(3n) {
    height: 10px;
}

.page-status-detail .status-detail-uptime {
    width: 38px;
    text-align: right;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
}

/* Blue/navy solid button — used for Cancel and similar actions */
.blue-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #0D2040;
    border: 1px solid #0D2040;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.blue-btn:hover {
    background: #0D2040;
    border-color: #0D2040;
    color: #ffffff;
}

.blue-btn:active {
    transform: scale(0.98);
}

.page-status-detail .status-detail-remove-btn {
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--slate-400, #94A3B8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.page-status-detail .status-detail-remove-btn:hover {
    border-color: #FECACA;
    background: #FFF5F5;
    color: #B91C1C;
}

.page-status-detail .status-detail-incident-row {
    align-items: flex-start;
    padding: 12px 16px;
}

.page-status-detail .status-detail-incident-badge-cell {
    flex: 0 0 112px;
    display: flex;
    align-items: flex-start;
}

.page-status-detail .status-detail-incident-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.page-status-detail .status-detail-incident-badge--active {
    background: #FFF5F5;
    border: 1px solid #FECACA;
    color: #B91C1C;
}

.page-status-detail .status-detail-incident-badge--resolved {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
}

.page-status-detail .status-detail-preview-stack,
.page-status-detail .status-detail-preview-card {
    top: 16px;
}

.page-status-detail .status-detail-preview-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-status-detail .status-detail-preview-card .wm-panel__body {
    padding: 14px;
}

.page-status-detail .status-detail-preview-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #FECACA;
    border-radius: 7px;
    background: #FFF5F5;
    color: #B91C1C;
    font-size: 11px;
    font-weight: 600;
}

.page-status-detail .status-detail-preview-alert svg {
    flex-shrink: 0;
}

.page-status-detail .status-detail-preview-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    color: var(--slate-950, #0F172A);
    font-size: 12px;
    font-weight: 500;
}

.page-status-detail .status-detail-preview-incident {
    padding: 8px 0;
}

.page-status-detail .status-detail-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--slate-50, #F8FAFC);
    font-size: 12px;
}

.page-status-detail .status-detail-info-row:last-child {
    border-bottom: 0;
}

.page-status-detail .status-detail-info-row > span {
    color: var(--slate-600, #64748B);
}

.page-status-detail .status-detail-info-row strong {
    color: var(--slate-950, #0F172A);
    font-weight: 600;
}

.page-status-detail .status-detail-info-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-status-detail .status-detail-subscriber-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

.page-status-detail .status-detail-search {
    max-width: 260px;
    background: var(--white-color) !important;
    border: 1px solid var(--slate-200, #E2E8F0);
    padding: 6px 10px !important;
}

.page-status-detail .status-detail-search input {
    font-size: 12px !important;
}

.page-status-detail .status-detail-subscriber-head,
.page-status-detail .status-detail-subscriber-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-status-detail .status-detail-subscriber-head {
    padding: 7px 16px;
    border-bottom: 1px solid var(--slate-200, #E2E8F0);
    background: var(--slate-50, #F8FAFC);
}

.page-status-detail .status-detail-subscriber-head span {
    color: var(--slate-400, #94A3B8);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-status-detail .status-detail-subscriber-head span:first-child,
.page-status-detail .status-detail-subscriber-row > span:first-child {
    flex: 1;
    min-width: 0;
}

.page-status-detail .status-detail-subscriber-head span:nth-child(2),
.page-status-detail .status-detail-subscriber-row > span:nth-child(2) {
    width: 80px;
    flex: 0 0 80px;
}

.page-status-detail .status-detail-subscriber-head span:nth-child(3),
.page-status-detail .status-detail-subscriber-row > span:nth-child(3) {
    width: 110px;
    flex: 0 0 110px;
    text-align: right;
}

.page-status-detail .status-detail-subscriber-head span:nth-child(4),
.page-status-detail .status-detail-subscriber-row > button {
    width: 24px;
    flex: 0 0 24px;
}

.page-status-detail .status-detail-subscriber-row {
    padding: 9px 16px;
    font-size: 12px;
    color: var(--slate-600, #64748B);
}

.page-status-detail .status-detail-sub-status {
    display: inline-flex;
    justify-content: center;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
}

.page-status-detail .status-detail-sub-status--confirmed {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.page-status-detail .status-detail-sub-status--pending {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

.page-status-detail .status-detail-form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--slate-600, #475569);
    font-size: 11px;
    font-weight: 600;
}

.page-status-detail .status-detail-color-swatch {
    width: 26px;
    height: 26px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--swatch);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.page-status-detail .status-detail-color-swatch:hover {
    transform: scale(1.08);
}

.page-status-detail .status-detail-color-swatch.active {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(13, 32, 64, 0.2);
}

.page-status-detail .status-detail-domain-row {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--slate-300, #CBD5E1);
    border-radius: 7px;
    background: var(--slate-50, #F8FAFC);
}

.page-status-detail .status-detail-domain-row:focus-within {
    border-color: var(--secondary-color);
    box-shadow: var(--focus-ring);
    background: var(--white-color);
}

.page-status-detail .status-detail-domain-row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 8px 11px !important;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px !important;
    color: var(--slate-950, #0F172A) !important;
    outline: 0;
}

.page-status-detail .status-detail-domain-row span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-left: 1px solid var(--slate-200, #E2E8F0);
    background: var(--slate-100, #F1F5F9);
    color: var(--slate-600, #64748B);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.page-status-detail .status-detail-upgrade-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #DDD6FE;
    border-radius: 7px;
    background: #F5F3FF;
    color: #6D28D9;
    font-size: 11px;
}

.page-status-detail .status-detail-upgrade-note a {
    color: #6D28D9;
    font-weight: 700;
    text-decoration: underline;
}

.page-status-detail .status-detail-upgrade-icon {
    display: inline-flex;
    color: #6D28D9;
    flex-shrink: 0;
}

.page-status-detail .status-detail-access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.page-status-detail .status-detail-password-field {
    margin-top: 10px;
}

.page-status-detail .status-detail-access-card {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1.5px solid var(--slate-200, #E2E8F0);
    border-radius: 8px;
    background: #F8FAFC;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.page-status-detail .status-detail-access-card:hover,
.page-status-detail .status-detail-access-card.selected,
.page-status-detail .status-detail-access-card:has(input:checked) {
    border-color: var(--secondary-color);
    background: #EDF2FF;
}

.page-status-detail .status-detail-access-card input {
    position: absolute;
    top: 14px;
    right: 14px;
    accent-color: var(--secondary-color);
}

.page-status-detail .status-detail-access-icon {
    font-size: 28px;
    display: inline-flex;
    margin-bottom: 8px;
}

.page-status-detail .status-detail-access-name {
    padding-right: 20px;
    color: var(--slate-950, #0F172A);
    font-size: 13px;
    font-weight: 600;
}

.page-status-detail .status-detail-access-desc {
    display: block;
    font-size: 11px;
    color: var(--slate-500, #64748B);
    font-weight: 400;
    line-height: 1.4;
    padding-right: 8px;
}

.page-status-detail .status-detail-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--slate-100, #F1F5F9);
}

.page-status-detail .status-detail-option-row:last-child {
    border-bottom: 0;
}

.page-status-detail .status-detail-danger-zone {
    padding: 14px 16px;
    border: 1px solid #FECACA;
    border-radius: 10px;
    background: #FFF5F5;
}

.page-status-detail .status-detail-danger-title {
    color: #B91C1C;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-status-detail .status-detail-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(254, 202, 202, 0.7);
}

.page-status-detail .status-detail-danger-row:last-child {
    border-bottom: 0;
}

.page-status-detail .status-detail-danger-btn {
    border-color: #E24B4A !important;
    color: #B91C1C !important;
    white-space: nowrap;
}

.page-status-detail .status-detail-tabs {
    border: 0;
    border-bottom: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 0;
    background: var(--white-color);
    padding: 0 24px;
    border-top: 1px solid var(--slate-200, #E2E8F0);
}

.page-status-detail .status-detail-tabs .nav-link {
    padding: 10px 16px;
}

.page-status-detail .status-detail-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.page-status-detail .status-detail-health-badge--up {
    background: rgba(33, 188, 21, 0.06);
    border-color: var(--green-color);
    color: var(--green-color);
}

.page-status-detail .status-detail-health-badge--up .status-detail-health-dot {
    background: var(--green-color);
}

.page-status-detail .status-detail-health-badge--partial {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

.page-status-detail .status-detail-health-badge--down {
    background: rgba(255, 67, 70, 0.06);
    border-color: var(--red-color);
    color: var(--red-color);
}

.page-status-detail .status-detail-health-badge--down .status-detail-health-dot {
    background: var(--red-color);
}

.page-status-detail .status-detail-health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F59E0B;
}

.page-status-detail .status-detail-strip .monitor-summary-chip {
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 600;
}

.page-status-detail .status-detail-strip .secondary-btn,
.page-status-detail .status-detail-strip .primary-btn {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.page-status-detail .status-detail-strip .status-detail-icon-btn {
    padding: 0 !important;
}

.page-status-detail .status-detail-preview-card .status-detail-preview-service {
    font-size: 11px;
}

.page-status-detail .status-detail-alert {
    align-items: center !important;
    padding: 9px 12px;
}

.page-status-detail .status-detail-alert .compact-alert__text {
    font-size: 11px;
    line-height: 1.6;
}

.page-status-detail .status-detail-alert svg {
    margin-top: 0 !important;
}

.page-status-detail .status-detail-alert .compact-alert__text a,
.status-detail-panel-head .code-text .gray-color a {
    text-decoration: underline;
}

.page-status-detail .status-detail-panel-head .font-12.gray-color,
.page-status-detail .status-detail-incident-row .font-12.gray-color {
    font-size: 11px !important;
}

.page-status-detail .status-detail-monitor-main .code-text {
    display: none;
}

.page-status-detail .status-detail-monitor-row {
    padding: 10px 16px;
}

.page-status-detail .status-detail-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.page-status-detail .status-detail-state-pill--up {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.page-status-detail .status-detail-state-pill--down {
    background: #FFF5F5;
    border-color: #FECACA;
    color: #B91C1C;
}

.page-status-detail .monitor-type-pill {
    min-width: 0;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.page-status-detail .monitor-type-pill.is-http {
    background: #FFF5EE;
    border-color: #FED7AA;
    color: #C2410C;
}

.page-status-detail .monitor-type-pill.is-api {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #047857;
}

.page-status-detail .monitor-type-pill.is-port {
    background: #F5F3FF;
    border-color: #DDD6FE;
    color: #6D28D9;
}

.page-status-detail .status-detail-ref-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 7px;
    background: var(--white-color);
    color: var(--slate-600, #475569);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.page-status-detail .status-detail-ref-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.page-status-detail .status-detail-ref-btn--orange {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.page-status-detail .status-detail-ref-btn--orange:hover {
    background: #EA6C0A;
    border-color: #EA6C0A;
    color: var(--white-color);
}

.page-status-detail #statusSettings .status-detail-panel-head a {
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .page-status-detail .status-detail-preview-stack,
    .page-status-detail .status-detail-preview-card {
        position: static;
    }

    .page-status-detail .status-detail-subscriber-head {
        display: none;
    }

    .page-status-detail .status-detail-subscriber-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .page-status-detail .status-detail-subscriber-row > :nth-child(3) {
        grid-column: 1 / -1;
    }

    .page-status-detail .status-detail-access-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .page-status-detail .status-detail-monitor-row,
    .page-status-detail .status-detail-incident-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .page-status-detail .status-detail-monitor-main,
    .page-status-detail .status-detail-incident-main {
        flex-basis: calc(100% - 32px);
    }

    .page-status-detail .status-detail-bars {
        order: 10;
    }

    .page-status-detail .status-detail-danger-row,
    .page-status-detail .status-detail-option-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-status-detail .status-detail-search {
        max-width: 100%;
    }
}

/* ============================================================
   Status monitor selector modal (.status-monitor-selector*)
   ============================================================ */
.status-monitor-selector-modal .modal-dialog {
    max-width: 700px;
}

.status-monitor-selector-modal .modal-content {
    border: 0;
    border-radius: 14px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.status-monitor-selector__header,
.status-monitor-selector__toolbar,
.status-monitor-selector__selected-bar,
.status-monitor-selector__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-monitor-selector__header {
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
}

.status-monitor-selector__title {
    color: #0F172A;
    font-size: 15px;
    font-weight: 600;
}

.status-monitor-selector__subtitle {
    color: #64748B;
    font-size: 11px;
    margin-top: 2px;
}

.status-monitor-selector__close {
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #94A3B8;
    font-size: 20px;
    line-height: 1;
}

.status-monitor-selector__toolbar {
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #F1F5F9;
}

.status-monitor-selector__search {
    position: relative;
    flex: 1;
    max-width: 280px;
}

.status-monitor-selector__search span {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 12px;
    pointer-events: none;
}

.status-monitor-selector__search input {
    width: 100%;
    padding: 7px 9px 7px 28px;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 12px;
    outline: none;
}

.status-monitor-selector__search input:focus {
    border-color: #0D2040;
    background: #fff;
}

.status-monitor-selector__tags,
.status-monitor-selector__bulk-actions,
.status-monitor-selector__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-monitor-selector__tags {
    gap: 5px;
    flex-wrap: wrap;
}

.status-monitor-selector__tag {
    padding: 4px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    background: #F8FAFC;
    color: #475569;
    font-size: 11px;
}

.status-monitor-selector__tag.active {
    border-color: #0D2040;
    background: #0D2040;
    color: #fff;
}

.status-monitor-selector__selected-bar {
    padding: 8px 20px;
    border-bottom: 1px solid #BFDBFE;
    background: #EDF2FF;
    color: #1D4ED8;
    font-size: 12px;
}

.status-monitor-selector__bulk-actions button {
    border: 0;
    background: transparent;
    color: #64748B;
    font-size: 12px;
    text-decoration: underline;
}

.status-monitor-selector__bulk-actions button:first-child {
    color: #F97316;
    font-weight: 600;
}

.status-monitor-selector__list {
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 0;
}

.status-monitor-selector__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #F8FAFC;
    background: #fff;
    cursor: pointer;
}

.status-monitor-selector__item:hover {
    background: #FAFBFC;
}

.status-monitor-selector__item.selected {
    background: #F0F5FF;
}

.status-monitor-selector__check {
    width: 15px;
    height: 15px;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 15px;
}

.status-monitor-selector__check.on {
    border-color: #0D2040;
    background: #0D2040;
}

.status-monitor-selector__icon {
    font-size: 15px;
    flex-shrink: 0;
}

.status-monitor-selector__body {
    flex: 1;
    min-width: 0;
}

.status-monitor-selector__name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0F172A;
    font-size: 13px;
    font-weight: 500;
}

.status-monitor-selector__url {
    max-width: 400px;
    overflow: hidden;
    color: #94A3B8;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-monitor-selector__tag-pill {
    display: inline-flex;
    padding: 1px 6px;
    border: 1px solid #E2E8F0;
    border-radius: 3px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 9px;
}

.status-monitor-selector__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.status-monitor-selector__type {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
}

.status-monitor-selector__type--http {
    background: #FFF5EE;
    border: 1px solid #FED7AA;
    color: #C2410C;
}

.status-monitor-selector__type--api {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
}

.status-monitor-selector__type--port {
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    color: #6D28D9;
}

.status-monitor-selector__type--heartbeat {
    background: #E1F5EE;
    border: 1px solid #6EE7B7;
    color: #0F6E56;
}

.status-monitor-selector__type--ssl {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    color: #BE123C;
}

.status-monitor-selector__empty {
    padding: 24px;
    color: #94A3B8;
    font-size: 12px;
    text-align: center;
}

.status-monitor-selector__footer {
    padding: 12px 20px;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    font-size: 12px;
}

.status-monitor-selector__footer strong {
    color: #0D2040;
}

.status-monitor-selector__cancel,
.status-monitor-selector__add {
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.status-monitor-selector__cancel {
    border: 1px solid #CBD5E1;
    background: #fff;
    color: #0F172A;
}

.status-monitor-selector__add {
    border: 0;
    background: #F97316;
    color: #fff;
    font-weight: 600;
}

/* ── Edit Member & Change Role modals — pixel-perfect overrides ──────────────── */

#editMemberModal .modal-dialog {
    max-width: 520px;
}

#changeRoleModal .modal-dialog {
    max-width: 720px;
}

#editMemberModal .modal-content,
#changeRoleModal .modal-content {
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(13, 32, 64, 0.18);
}

#editMemberModal .invite-modal-header,
#changeRoleModal .invite-modal-header {
    padding: 18px 22px 12px;
    border-bottom-color: #E2E8F0;
}

#editMemberModal .invite-modal-title,
#changeRoleModal .invite-modal-title {
    font-weight: 700;
}

#editMemberModal .invite-modal-body,
#changeRoleModal .invite-modal-body {
    padding: 18px 22px;
    gap: 0 !important;
}

#editMemberModal .invite-modal-subtitle,
#changeRoleModal .invite-modal-subtitle {
    font-size: 12.5px;
    margin: 0 0 14px !important;
}

#editMemberModal .form-label,
#changeRoleModal .form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

#editMemberModal .invite-modal-footer,
#changeRoleModal .invite-modal-footer {
    padding: 14px 22px 18px;
    border-top-color: #E2E8F0;
}

/* ── Status Detail – colour swatches & custom picker (Settings tab) ──────────
   These mirror the .page-add-status equivalents so the Settings tab inside
   the detail page renders identically to the create/edit page.
   ─────────────────────────────────────────────────────────────────────────── */
.page-status-detail .color-swatch-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.page-status-detail .color-swatch-btn:hover {
    transform: scale(1.08);
}

.page-status-detail .color-swatch-btn.active {
    border-color: #0D2040;
    box-shadow: 0 0 0 2px rgba(13, 32, 64, 0.2);
}

.page-status-detail .status-color-custom-trigger {
    padding: 4px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
    background: #F8FAFC;
    line-height: 1.4;
}

.page-status-detail .status-color-custom-trigger:hover {
    background: #F1F5F9;
}

.page-status-detail .status-color-custom-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #E2E8F0;
    display: inline-block;
}

/* ── Incidents page – Monitor & Date-range toolbar filter buttons ── */

/* Active state: button gets a light blue tint + brand border */
.page-incidents .filter-btn.incident-filter-active {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    background: #EFF6FF !important;
}

/* Monitor dropdown panel */
.page-incidents .incident-monitor-dropdown {
    min-width: 230px;
    padding: 0;
}

.page-incidents .incident-monitor-dropdown .monitor-filter-actions {
    padding: 8px 12px 12px;
    gap: 8px;
}

/* Date-range dropdown – highlight the selected preset */
.page-incidents .daterange-option.active {
    background: #F0F4FF;
    color: var(--secondary-color);
    font-weight: 600;
}


/* ============================================================
   ALERTS PAGE
   Channels tab / Your Notifications tab / Recent Activity tab
   ============================================================ */

/* ── Tab strip ──────────────────────────────────────────────── */
.alerts-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #F1F5F9;
    border-radius: 10px;
    margin: 0;
    list-style: none;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.alerts-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

.alerts-tab:hover {
    color: #0D2040;
}

.alerts-tab.active {
    background: #fff;
    color: #0D2040;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(13, 32, 64, 0.08);
}

.alerts-tab svg {
    flex-shrink: 0;
}

/* ── Tab 1: Channel row chips ───────────────────────────────── */
.channel-usage-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    background: #EFF6FF;
    color: #1D4ED8;
    letter-spacing: 0.02em;
}

.channel-last-fired {
    color: #94A3B8;
}

.channel-test-btn {
    background: #fff;
    color: #0D2040;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.channel-test-btn:hover {
    background: #F1F5F9;
    border-color: #0D2040;
}

/* ── Tab 1: SMS icon colour (Phase 3 contact method) ────────── */
.settings-channel-icon--sms {
    background: #FFF7ED;
    color: #C2410C;
}

/* ── Tab 2: Quiet hours — day-of-week chips ─────────────────── */
.quiet-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 100px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.quiet-day-chip:has(input:checked) {
    background: #EFF6FF;
    border-color: #2563EB;
    color: #1E40AF;
}

.quiet-day-chip input {
    width: 12px;
    height: 12px;
    accent-color: #2563EB;
}

/* ── Tab 2: Severity filter rows ────────────────────────────── */
.severity-row {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.severity-row:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.severity-row:has(input:checked) {
    border-color: #0D2040;
    background: #EFF6FF;
}

.severity-row input {
    grid-row: 1 / span 2;
    margin-top: 2px;
    accent-color: #0D2040;
}

.severity-row__title {
    font-size: 13px;
    font-weight: 700;
    color: #0D2040;
}

.severity-row__desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
}

/* ── Tab 2: Per-monitor mute rows ───────────────────────────── */
.mute-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #F1F5F9;
}

.mute-row:last-child {
    border-bottom: 0;
}

.mute-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #0D2040;
    flex-wrap: wrap;
}

.mute-row__type {
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.mute-row__muted-label {
    font-size: 10px;
    font-weight: 600;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    padding: 2px 7px;
    border-radius: 100px;
}

.mute-row--muted .mute-row__name {
    color: #64748B;
}

/* ── Tab 2: Monitor status dots (mute list + general use) ───── */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot--up     { background: #22C55E; }
.status-dot--down   { background: #E24B4A; }
.status-dot--paused { background: #94A3B8; }

/* ── Tab 2: Disabled contact method row (e.g. SMS Phase 3) ──── */
.prefs-channel--disabled {
    opacity: 0.65;
}

/* ── Tab 3: Time-range pill group ───────────────────────────── */
.alerts-activity-range {
    display: inline-flex;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.alerts-activity-range__btn {
    background: transparent;
    border: 0;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.alerts-activity-range__btn:hover {
    background: #F8FAFC;
    color: #0D2040;
}

.alerts-activity-range__btn.active {
    background: #0D2040;
    color: #fff;
    font-weight: 600;
}

.alerts-activity-range__btn + .alerts-activity-range__btn {
    border-left: 1px solid #E2E8F0;
}

.alerts-activity-filter {
    max-width: 180px;
    height: 34px;
    font-size: 12px;
}

/* ── Tab 3: Event type pills ────────────────────────────────── */
.alert-event {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid currentColor;
}

.alert-event--down { color: #B91C1C; }
.alert-event--up   { color: #15803D; }
.alert-event--warn { color: #92400E; }

/* ── Tab 3: Delivery status pills ───────────────────────────── */
.alert-deliver {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}

.alert-deliver--ok {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.alert-deliver--retry {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.alert-deliver--fail {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

/* ── Tab 3: Monitor name link ────────────────────────────────── */
.monitor-name-link {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.monitor-name-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}


/* ── Plus Jakarta Sans (bundled) — used on the invite-signup right panel ── */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   INVITE SIGNUP PAGE  (/Security/InviteSignup)
   ═══════════════════════════════════════════════════════════════ */

body.invite-signup-page {
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
    min-height: 100vh;
    color: #0D2040;
    margin: 0;
    padding: 0;
}

.invite-signup-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.invite-signup-card {
    width: 100%;
    max-width: 880px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(13, 32, 64, 0.10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

/* ── Left panel ───────────────────────────────────────────────── */
.invite-signup-left {
    padding: 36px 32px;
    background: linear-gradient(160deg, #0D2040 0%, #1E3A5F 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.invite-signup-logo {
    display: inline-flex;
    align-items: center;
    height: 28px;
}

.invite-signup-logo svg {
    height: 28px;
    width: auto;
    display: block;
}

.invite-signup-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invite-signup-headline {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.invite-signup-headline strong {
    color: #FDBA74;
    font-weight: 700;
}

.invite-signup-workspace {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.invite-signup-workspace__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F97316, #EA580C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}

/* Avatar colour variants */
.invite-signup-workspace__avatar--blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.invite-signup-workspace__avatar--green  { background: linear-gradient(135deg, #22C55E, #15803D); }
.invite-signup-workspace__avatar--red    { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.invite-signup-workspace__avatar--purple { background: linear-gradient(135deg, #A855F7, #7E22CE); }
.invite-signup-workspace__avatar--orange { background: linear-gradient(135deg, #F97316, #EA580C); }
.invite-signup-workspace__avatar--teal   { background: linear-gradient(135deg, #14B8A6, #0F766E); }

.invite-signup-workspace__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invite-signup-workspace__name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.invite-signup-workspace__sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-signup-stats {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.invite-signup-stats span strong {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

.invite-signup-perks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.55;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.invite-signup-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 400;
}

.invite-signup-perks svg {
    color: #86EFAC;
    flex-shrink: 0;
}

.invite-signup-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(249, 115, 22, 0.18);
    color: #FDBA74;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

/* ── Right panel ──────────────────────────────────────────────── */
.invite-signup-right {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.invite-signup-title {
    font-size: 22px;
    font-weight: 600;
    color: #0D2040;
    margin: 0;
}

.invite-signup-sub {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

.invite-signup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.invite-signup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.invite-signup-field label {
    font-size: 12px;
    font-weight: 600;
    color: #0D2040;
}

.invite-signup-field input {
    height: 40px;
    border-radius: 7px;
    border: 1px solid #CBD5E1;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #0D2040;
    width: 100%;
}

.invite-signup-field input:focus {
    outline: none;
    border-color: #0D2040;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.08);
}

.invite-signup-field input[readonly] {
    background: #F1F5F9;
    color: #475569;
    cursor: not-allowed;
}

.invite-signup-field__hint {
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.4;
}

.invite-signup-required {
    color: #EF4444;
}

.invite-signup-cta {
    background: #F97316;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.12s ease, transform 0.05s ease;
    width: 100%;
}

.invite-signup-cta:hover:not(:disabled) {
    background: #EA6C0A;
}

.invite-signup-cta:active:not(:disabled) {
    transform: scale(0.99);
}

.invite-signup-cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.invite-signup-legal {
    font-size: 11px;
    color: #94A3B8;
    text-align: center;
    line-height: 1.55;
    margin: 0;
}

.invite-signup-legal a {
    color: #2563EB;
    text-decoration: none;
}

.invite-signup-legal a:hover {
    text-decoration: underline;
}

.invite-signup-footer-link {
    font-size: 12px;
    color: #64748B;
    text-align: center;
    margin: 0;
}

.invite-signup-footer-link a {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
}

.invite-signup-footer-link a:hover {
    text-decoration: underline;
}

.invite-signup-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #0D2040;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    width: 100%;
}

.invite-signup-google:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
}

.invite-signup-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94A3B8;
    font-size: 11px;
}

.invite-signup-divider::before,
.invite-signup-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 760px) {
    .invite-signup-card {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .invite-signup-left {
        padding: 28px 24px;
    }

    .invite-signup-right {
        padding: 28px 24px;
    }
}

/* ============================================================
   Slack panel — merged Workspace+channel / Webhook
   ============================================================ */
.slack-panel-logo {
    height: 28px;
    width: 28px;
}
.slack-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #F1F5F9;
    border-radius: 10px;
    margin-bottom: 18px;
}
.slack-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.slack-mode-btn:hover {
    color: #0D2040;
}
.slack-mode-btn.is-active {
    background: #fff;
    color: #0D2040;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.slack-mode-btn__pill {
    display: inline-block;
    padding: 2px 8px;
    background: #EFF6FF;
    color: #1E40AF;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.slack-mode-btn.is-active .slack-mode-btn__pill {
    background: #DBEAFE;
}

/* Add new connection row */
.slack-add-row {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.slack-add-row__label {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}
.slack-add-row__controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: stretch;
}
@media (max-width: 768px) {
    .slack-add-row__controls {
        grid-template-columns: 1fr;
    }
}

.slack-add-control {
    position: relative;
}
.slack-add-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 14px;
    color: #0D2040;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.slack-add-select:hover:not(.is-disabled):not(:disabled) {
    border-color: #CBD5E1;
}
.slack-add-select:focus,
.slack-add-select[aria-expanded="true"] {
    outline: none;
    border-color: #0D2040;
    box-shadow: 0 0 0 3px rgba(13, 32, 64, 0.08);
}
.slack-add-select.is-disabled,
.slack-add-select:disabled {
    background: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
    opacity: 0.7;
}
.slack-add-select__value {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slack-add-select__caret {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: 8px;
}
.slack-add-select.is-filled .slack-add-select__value {
    color: #0D2040;
    font-weight: 500;
}

.slack-add-dropdown {
    min-width: 260px;
    max-width: 360px;
    width: max-content;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
}
.slack-add-dropdown__item,
.slack-add-dropdown__item--channel,
.slack-add-dropdown__add {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: #0D2040;
    font-size: 14px;
    transition: background 0.12s ease;
}
.slack-add-dropdown__item:hover,
.slack-add-dropdown__item--channel:hover,
.slack-add-dropdown__add:hover {
    background: #F1F5F9;
    color: #0D2040;
}
.slack-add-dropdown__add {
    color: #2563EB;
    font-weight: 600;
}
.slack-add-dropdown__add:hover {
    background: #EFF6FF;
    color: #1E40AF;
}
.slack-add-dropdown__add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #DBEAFE;
    color: #1E40AF;
    font-weight: 700;
    border-radius: 50%;
    font-size: 13px;
}

.slack-ws-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #3F0E40;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
    flex-shrink: 0;
}
.slack-channel-prefix {
    color: #64748B;
    font-size: 14px;
    font-weight: 600;
}
.slack-add-dropdown__item--channel .slack-channel-prefix {
    width: 18px;
    text-align: center;
}

.slack-add-btn {
    min-width: 84px;
    height: 40px;
    padding: 0 22px;
}
.slack-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Connected channels table */
.slack-connections__title {
    font-size: 14px;
    font-weight: 700;
    color: #0D2040;
    margin: 0 0 10px;
}
.slack-connections__count {
    color: #94A3B8;
    font-weight: 500;
}
.slack-connections-table {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}
.slack-connections-thead,
.slack-connections-row {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1.2fr 1fr 56px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}
.slack-connections-thead {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.slack-connections-row {
    background: #fff;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.12s ease;
}
.slack-connections-row:last-child {
    border-bottom: 0;
}
.slack-connections-row:hover {
    background: #FAFBFC;
}
.slack-connections-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.slack-connections-cell--actions {
    justify-content: flex-end;
}
.slack-connections-cell .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

@media (max-width: 992px) {
    .slack-connections-thead {
        display: none;
    }
    .slack-connections-row {
        grid-template-columns: 1fr auto;
        padding: 14px 16px;
        row-gap: 10px;
    }
    .slack-connections-cell {
        grid-column: 1 / -1;
    }
    .slack-connections-cell--actions {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }
    .slack-connections-cell::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 96px;
        font-size: 11px;
        font-weight: 700;
        color: #94A3B8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .slack-connections-cell[data-label=""]::before,
    .slack-connections-cell--actions::before {
        display: none;
    }
}

/* OAuth modal permission list */
.slack-oauth-perms {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 14px;
}
.slack-oauth-perms li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #334155;
    padding: 4px 0;
}
.slack-oauth-perms__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #DCFCE7;
    color: #15803D;
    font-weight: 700;
    border-radius: 50%;
    font-size: 11px;
}
.slack-oauth-btn {
    display: inline-flex;
    align-items: center;
}

/* Slack connection — compact status pill */
.slack-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
    border: 1px solid transparent;
    background: #F8FAFC;
    color: #475569;
}
.slack-status-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.slack-status-pill--active {
    background: #F0FDF4;
    color: #15803D;
    border-color: #BBF7D0;
}
.slack-status-pill--muted {
    background: #FFF7ED;
    color: #C2410C;
    border-color: #FED7AA;
}

/* ── Response-time chart redesign ─────────────────────────────────────── */
.rt-raw-label {
    font-size: 12px;
    color: var(--gray-color);
}

.rt-gaps-note {
    font-size: 12px;
    color: var(--gray-color);
}

.rt-chart-outer {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.rt-y-axis {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
}

.rt-y-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    color: var(--gray-color);
    text-align: center;
    white-space: nowrap;
    padding-bottom: 24px;
}

.rt-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--gray-color);
    text-align: right;
    height: 180px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    min-width: 36px;
}

.rt-chart-inner {
    flex: 1;
    min-width: 0;
}

.rt-svg-wrap {
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, var(--snow1-color));
    border: 1px solid var(--pale-blue);
}

.rt-svg-wrap svg {
    width: 100%;
    height: 180px;
    display: block;
}

.rt-chart-fill {
    fill: url(#rtGradient);
}

.rt-chart-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rt-chart-dot {
    fill: var(--white-color);
    stroke: var(--primary-color);
    stroke-width: 2;
}

.rt-grid-line {
    stroke: var(--pale-blue);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.rt-x-labels {
    position: relative;
    height: 20px;
    margin-top: 4px;
}

.rt-x-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--gray-color);
    white-space: nowrap;
}


/* ============================================================
   Live Status Page (public-facing)
   Scoped under .page-live-status. Class names ls-uptime-bar*
   are renamed from the design's uptime-bar* to avoid
   conflicting with the monitor-list page's CSS.
   ============================================================ */

.page-live-status {
    background: var(--snow1-color, #FFFCFA);
    min-height: 100vh;
}

.live-status-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/* ── Hero header ── */
.live-status-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px;
    border-radius: 16px;
    margin-bottom: 24px;
    background: linear-gradient(155deg, #0D2040 0%, #1E3A5F 100%);
    box-shadow: 0 18px 40px rgba(13, 32, 64, 0.18);
}

.live-status-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%, rgba(249, 115, 22, 0.22), transparent 55%);
    pointer-events: none;
}

.live-status-hero__top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.live-status-hero__logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.live-status-hero__logo-img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.live-status-hero__name {
    font-size: 19px;
    font-weight: 700;
    color: var(--white-color);
    margin: 0;
}

.live-status-hero__tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
    margin: 2px 0 0;
}

.live-status-live-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.live-status-live-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: liveStatusPulseGreen 1.8s ease-out infinite;
}

@keyframes liveStatusPulseGreen {
    0%   { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0); }
}

.live-status-hero__meta {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.live-status-hero__updated {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.live-status-hero__subscribe {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.live-status-hero__subscribe:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ── Overall health banner ── */
.live-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 24px;
}

.live-status-banner__icon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.6);
}

.live-status-banner--warn .live-status-banner__icon::after,
.live-status-banner--down .live-status-banner__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.live-status-banner--warn .live-status-banner__icon::after {
    animation: liveStatusPulseRingWarn 2s ease-out infinite;
}

.live-status-banner--down .live-status-banner__icon::after {
    animation: liveStatusPulseRingDown 2s ease-out infinite;
}

@keyframes liveStatusPulseRingWarn {
    0%   { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0); }
}

@keyframes liveStatusPulseRingDown {
    0%   { box-shadow: 0 0 0 0    rgba(220, 38, 38, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0    rgba(220, 38, 38, 0); }
}

.live-status-banner__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.live-status-banner__subtitle {
    font-size: 12px;
    color: #64748B;
    margin: 2px 0 0;
}

.live-status-banner--ok              { background: #F0FDF4; border-color: #BBF7D0; }
.live-status-banner--ok .live-status-banner__title   { color: #15803D; }
.live-status-banner--warn            { background: #FFFBEB; border-color: #FDE68A; }
.live-status-banner--warn .live-status-banner__title { color: #92400E; }
.live-status-banner--down            { background: #FFF5F5; border-color: #FECACA; }
.live-status-banner--down .live-status-banner__title { color: #B91C1C; }

/* ── Uptime summary stat cards ── */
.live-status-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.live-status-stat {
    position: relative;
    padding: 14px 16px 14px 20px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.live-status-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color), #FDBA74);
}

.live-status-stat:hover {
    box-shadow: 0 8px 20px rgba(13, 32, 64, 0.08);
    transform: translateY(-1px);
}

.live-status-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
    margin: 0 0 6px;
}

.live-status-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

@media (max-width: 620px) {
    .live-status-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Monitor rows ── */
.live-status-list {
    display: flex;
    flex-direction: column;
}

.live-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #EDF1F5;
    flex-wrap: wrap;
    transition: background 0.12s ease;
    color: inherit;
}

.live-status-row:hover      { background: #FBFBFC; }
.live-status-row:last-child { border-bottom: 0; }

a.live-status-row {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.live-status-row__icon-wrap {
    position: relative;
    flex-shrink: 0;
}

.live-status-row__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid;
}

.live-status-row__icon.is-http      { color: #f97316; background: #fff7ed; border-color: #fdba74; }
.live-status-row__icon.is-api       { color: #0f9f8f; background: #ecfdf5; border-color: #99f6e4; }
.live-status-row__icon.is-heartbeat { color: #319f0f; background: #f2fdec; border-color: #73e76e; }
.live-status-row__icon.is-port      { color: #7c3aed; background: #f5f3ff; border-color: #d8b4fe; }
.live-status-row__icon.is-ssl       { color: #e11d48; background: #fff1f2; border-color: #fda4af; }
.live-status-row__icon.is-ping      { color: #16a34a; background: rgba(22,163,74,0.07); border-color: rgba(22,163,74,0.25); }

.live-status-row__dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--white-color);
}

.live-status-row__dot--up {
    background: var(--green-color);
    box-shadow: 0 0 0 0 rgba(33, 188, 21, 0.5);
    animation: liveStatusPulseGreenSm 2.4s ease-out infinite;
}

.live-status-row__dot--down   { background: var(--red-color); }
.live-status-row__dot--paused { background: #CBD5E1; }

@keyframes liveStatusPulseGreenSm {
    0%   { box-shadow: 0 0 0 0   rgba(33, 188, 21, 0.45); }
    70%  { box-shadow: 0 0 0 5px rgba(33, 188, 21, 0); }
    100% { box-shadow: 0 0 0 0   rgba(33, 188, 21, 0); }
}

.live-status-row__main {
    flex: 1 1 180px;
    min-width: 0;
}

.live-status-row__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 0 2px;
}

.live-status-row__target {
    font-size: 11px;
    color: #94A3B8;
    margin: 0;
}

/* Uptime bars — 45-bar strip (ls-uptime-bars = design's .live-status-row .uptime-bars) */
.ls-uptime-bars {
    display: flex;
    align-items: center;
    width: 140px;
    height: 18px;
    padding: 0;
    gap: 1px;
    background: transparent;
    flex-shrink: 0;
    overflow: hidden;
}

.ls-uptime-bar {
    flex: 1 1 0;
    min-width: 1px;
    height: 14px;
    border-radius: 1px;
    background: var(--green-color);
}

.ls-uptime-bar.is-down    { background: var(--red-color); }
.ls-uptime-bar.is-no-data { background: #CBD5E1; }
.ls-uptime-bar.is-paused  { background: #CBD5E1; }

.live-status-row__uptime {
    min-width: 54px;
    width: auto;
    text-align: right;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.live-status-row__response {
    min-width: 54px;
    width: auto;
    max-width: 110px;
    text-align: right;
    font-size: 12px;
    color: #64748B;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 620px) {
    .ls-uptime-bars          { order: 10; width: 100%; }
    .live-status-row__response { display: none; }
}

/* Status pills — live status page */
.page-live-status span.status-badge.monitor-status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    letter-spacing: 0.03em;
}
/* UP / DOWN / Paused pills use the base .status-badge.up/.down styles (translucent tint + colored text)
   matching the design — no solid-fill overrides here. */

/* Monitor type pill — live status page overrides */
.page-live-status .monitor-type-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
}
.page-live-status .monitor-type-pill.is-http      { background: #fff7ed; color: #f97316; border-color: #fdba74; }
.page-live-status .monitor-type-pill.is-api       { background: #ecfdf5; color: #0f9f8f; border-color: #99f6e4; }
.page-live-status .monitor-type-pill.is-heartbeat { background: #f2fdec; color: #319f0f; border-color: #73e76e; }
.page-live-status .monitor-type-pill.is-port      { background: #f5f3ff; color: #7c3aed; border-color: #d8b4fe; }
.page-live-status .monitor-type-pill.is-ssl       { background: #fff1f2; color: #e11d48; border-color: #fda4af; }
.page-live-status .monitor-type-pill.is-ping      { background: rgba(22,163,74,0.07); color: #16a34a; border-color: rgba(22,163,74,0.25); }

/* ── Recent updates (incident) rows — vertical timeline ── */
.live-status-update-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 20px 22px;
}

.live-status-update-row:last-child { padding-bottom: 4px; }

.live-status-update-row__node {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.live-status-update-row__node::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: #EDF1F5;
}

.live-status-update-row:last-child .live-status-update-row__node::after { display: none; }

.live-status-update-row__node--active   { background: var(--red-color);   box-shadow: 0 0 0 3px rgba(255,67,70,0.15); }
.live-status-update-row__node--resolved { background: var(--green-color); box-shadow: 0 0 0 3px rgba(33,188,21,0.12); }

.live-status-update-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.live-status-update-badge--resolved { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.live-status-update-badge--active   { background: #FFF5F5; border-color: #FECACA; color: #B91C1C; }

/* ── Loading skeleton ── */
.live-status-skeleton-banner {
    padding: 18px 20px;
    margin-bottom: 24px;
}

.live-status-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid #EDF1F5;
}

.live-status-skeleton-row:last-child { border-bottom: 0; }

.live-status-skeleton-block {
    border-radius: 6px;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%);
    background-size: 400% 100%;
    animation: liveStatusShimmer 1.4s ease infinite;
}

@keyframes liveStatusShimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

.live-status-skeleton-block--avatar    { width: 38px; height: 38px; border-radius: 50%; }
.live-status-skeleton-block--title     { width: 160px; height: 14px; margin-bottom: 8px; }
.live-status-skeleton-block--subtitle  { width: 110px; height: 10px; }
.live-status-skeleton-block--dot       { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.live-status-skeleton-block--row-title { width: 150px; height: 12px; }
.live-status-skeleton-block--row-bars  { width: 140px; height: 14px; flex-shrink: 0; }
.live-status-skeleton-block--row-num   { width: 40px;  height: 12px; flex-shrink: 0; }

/* ── Empty state ── */
.live-status-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 48px 20px;
}

.live-status-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Footer ── */
.live-status-footer {
    text-align: center;
    margin-top: 28px;
}

/* ── Utility ── */
.min-w-0 { min-width: 0; }

/* ================================================================
   Live Status Monitor Detail page (.lsmd-*)
   ================================================================ */

/* ── Back button ── */
.lsmd-back-wrap {
    padding: 16px 0 4px;
}

.lsmd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.lsmd-back-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
    text-decoration: none;
}

/* ── Monitor identity card ── */
.lsmd-monitor-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 12px;
    background: var(--white-color);
    border: 1px solid var(--pale-blue);
    box-shadow: 0 2px 10px rgba(12, 35, 64, 0.04);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.lsmd-monitor-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.lsmd-monitor-icon.is-http      { background: #fff7ed; border: 1px solid #fdba74; color: #f97316; }
.lsmd-monitor-icon.is-api       { background: #ecfdf5; border: 1px solid #99f6e4; color: #0f9f8f; }
.lsmd-monitor-icon.is-port      { background: #f5f3ff; border: 1px solid #d8b4fe; color: #7c3aed; }
.lsmd-monitor-icon.is-ssl       { background: #fff1f2; border: 1px solid #fda4af; color: #e11d48; }
.lsmd-monitor-icon.is-heartbeat { background: #f0fdf4; border: 1px solid #73e76e;  color: #319f0f; }
.lsmd-monitor-icon.is-ping      { background: #f0fdf4; border: 1px solid rgba(22,163,74,.25); color: #16a34a; }

.lsmd-monitor-info {
    flex-grow: 1;
    min-width: 0;
}

.lsmd-monitor-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0 0 4px;
}

.lsmd-monitor-meta {
    font-size: 12px;
    color: #94A3B8;
    margin: 0;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lsmd-monitor-status {
    text-align: right;
    flex-shrink: 0;
}

.lsmd-monitor-status-time {
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 0;
}

.lsmd-monitor-status-check {
    font-size: 11px;
    color: #94A3B8;
    margin: 2px 0 0;
}

/* ── Response time chart ── */
.lsmd-chart-wrap {
    position: relative;
    overflow: hidden;
    padding: 6px 0 0;
}

.lsmd-chart-wrap svg { display: block; width: 100%; height: 190px; }

.lsmd-crosshair {
    position: absolute;
    top: 6px;
    bottom: 0;
    width: 1px;
    background: #CBD5E1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s;
}

.lsmd-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2563EB;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px #2563EB;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s;
}

.lsmd-tooltip {
    position: absolute;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(13, 32, 64, 0.22);
    transition: opacity 0.08s;
}

.lsmd-crosshair.vis,
.lsmd-dot.vis,
.lsmd-tooltip.vis { opacity: 1; }

/* ── Chart range tabs ── */
.lsmd-range-tabs { display: flex; gap: 4px; }

.lsmd-range-tab {
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--pale-blue, #E2E8F0);
    background: transparent;
    color: var(--slate-600, #475569);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.5;
}

.lsmd-range-tab:hover                  { background: #F8FAFC; }
.lsmd-range-tab.active                 { background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }

/* ── 90-day uptime bars (detail page) ── */
.ls-uptime-bars-90 {
    display: flex;
    height: 36px;
    padding: 0;
    gap: 1px;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    background: transparent;
    width: 100%;
}

.ls-uptime-bars-90 .ls-uptime-bar {
    flex: 1 1 0;
    min-width: 1.5px;
    height: 28px;
    border-radius: 2px;
    background: var(--green-color);
}

.ls-uptime-bars-90 .ls-uptime-bar.is-down    { background: var(--red-color); }
.ls-uptime-bars-90 .ls-uptime-bar.is-no-data { background: #CBD5E1; }

/* ── Incident filter tabs ── */
.lsmd-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.lsmd-filter-tab {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--pale-blue, #E2E8F0);
    background: transparent;
    color: var(--slate-600, #475569);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lsmd-filter-tab.active                    { background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }
.lsmd-filter-tab:hover:not(.active)        { background: #F8FAFC; }

@media (max-width: 560px) {
    .lsmd-monitor-card   { flex-direction: column; align-items: flex-start; }
    .lsmd-monitor-status { text-align: left; }
}


/* ============================================================
   Two-Factor Verification — OTP input boxes
   ============================================================ */
.otp-verify-form {
    width: 100%;
    max-width: 320px;
}

.otp-box-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.otp-box {
    width: 44px;
    height: 52px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg-empty);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--input-text);
    padding: 0;
}

.otp-box:not(:placeholder-shown) {
    background: var(--input-bg-filled);
}

.otp-box:focus,
.otp-box:focus-visible {
    outline: none;
    border: 1.5px solid var(--secondary-color);
    background: var(--input-bg-filled);
    box-shadow: var(--focus-ring);
}


/* ============================================================
   Add Monitor — plan-locked card & paid-plan badge
   ============================================================ */
.monitor-type-card.plan-locked > .monitor-type-card-top,
.monitor-type-card.plan-locked > .monitor-type-title,
.monitor-type-card.plan-locked > .monitor-type-desc,
.monitor-type-card.plan-locked > .monitor-type-chips {
    opacity: 0.5;
}

/* ============================================================
   Slack Workflow Builder — help icon button
   ============================================================ */
.slack-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.slack-guide-btn:hover { color: var(--secondary-color); }

/* ============================================================
   Slack Workflow Builder — offcanvas guide panel
   ============================================================ */
.slack-guide-offcanvas { width: 480px; }
@media (max-width: 576px) { .slack-guide-offcanvas { width: 100%; } }

.slack-guide-tabs { gap: 0; border-bottom: 1px solid var(--pale-blue, #E2E8F0); flex-wrap: nowrap; }
.slack-guide-tabs .nav-link {
    color: var(--slate-600, #475569);
    padding: 8px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 12px;
    white-space: nowrap;
    background: none;
}
.slack-guide-tabs .nav-link.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
    font-weight: 600;
    background: none;
}
.slack-guide-tabs .nav-link:hover:not(.active) { color: var(--secondary-color); background: none; }

.slack-guide-steps {
    list-style: none;
    counter-reset: sg-step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.slack-guide-steps li {
    counter-increment: sg-step;
    position: relative;
    padding-left: 34px;
}
.slack-guide-steps li::before {
    content: counter(sg-step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-step-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color-dark, #1e293b);
    margin-bottom: 3px;
}
.sg-step-body {
    display: block;
    font-size: 12px;
    color: #64748b;
    line-height: 1.55;
}

.sg-var-card {
    background: var(--snow1-color, #f8fafc);
    border: 1px solid var(--pale-blue, #E2E8F0);
    border-radius: 8px;
    padding: 14px;
}
.sg-var-name {
    background: rgba(99,102,241,0.1);
    color: var(--secondary-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}
.sg-var-type {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sg-var-example {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--pale-blue, #E2E8F0);
}
.sg-example-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--pale-blue, #E2E8F0);
}
.sg-example-pre {
    margin: 0;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--snow1-color, #f8fafc);
    color: var(--secondary-color-dark, #1e293b);
}

.sg-callout {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.55;
}
.sg-callout--info { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2); color: #1e40af; }
.sg-callout--warn { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.25); color: #92400e; }

.sg-tip-list { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.sg-tip-list li { font-size: 12px; color: #475569; line-height: 1.55; }

.monitor-plan-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(249, 115, 22, 0.08);
    color: #F97316;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid rgba(249, 115, 22, 0.25);
    margin-top: 8px;
    align-self: flex-start;
}