/* ================================================================
 * ListDome — Listeo Notifications Preferences / LD Style
 * Visual-only override for Listeo SMS Notifications Plus preference UI.
 * No notification, subscription, SMS, Web Push or save logic is changed.
 * ================================================================ */

#dashboard .listeo-np-prefs-box {
    overflow: hidden !important;
    background: #122149 !important;
    border: 1px solid rgba(56, 182, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
}

#dashboard .listeo-np-prefs-box > h4.gray {
    margin: 0 !important;
    padding: 18px 22px !important;
    background: #122149 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(56, 182, 255, 0.18) !important;
}

#dashboard .listeo-np-prefs-box > h4.gray,
#dashboard .listeo-np-prefs-box > h4.gray * {
    color: #ffffff !important;
}

#dashboard .listeo-np-prefs-box > .dashboard-list-box-static {
    padding: 20px !important;
    background: #081023 !important;
    color: #ffffff !important;
}

#dashboard .listeo-np-prefs {
    margin: 0 !important;
    color: #ffffff !important;
    --listeo-np-accent: #A737FF;
}

#dashboard .listeo-np-prefs .listeo-np-intro {
    margin: 0 0 18px !important;
    color: #aebbd1 !important;
}

/* Master SMS + current-device push cards. */
#dashboard .listeo-np-prefs .listeo-np-device,
#dashboard .listeo-np-prefs .listeo-np-sms-master {
    gap: 14px !important;
    margin: 0 0 14px !important;
    padding: 16px 18px !important;
    background: #122149 !important;
    border: 1px solid rgba(56, 182, 255, 0.20) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

#dashboard .listeo-np-prefs .listeo-np-device-icon,
#dashboard .listeo-np-prefs .listeo-np-group-icon {
    background: #0b1731 !important;
    border: 1px solid rgba(167, 55, 255, 0.34) !important;
    color: #38B6FF !important;
}

#dashboard .listeo-np-prefs .listeo-np-device.is-on .listeo-np-device-icon {
    background: rgba(56, 182, 255, 0.12) !important;
    border-color: rgba(56, 182, 255, 0.42) !important;
    color: #38B6FF !important;
}

#dashboard .listeo-np-prefs .listeo-np-device.is-blocked .listeo-np-device-icon {
    background: rgba(255, 101, 101, 0.12) !important;
    border-color: rgba(255, 101, 101, 0.38) !important;
    color: #ff8b8b !important;
}

#dashboard .listeo-np-prefs .listeo-np-sms-master label,
#dashboard .listeo-np-prefs .listeo-np-device-text strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#dashboard .listeo-np-prefs .listeo-np-device-status {
    margin-top: 2px !important;
    color: #9aaac3 !important;
}

#dashboard .listeo-np-prefs .listeo-np-device-button,
#dashboard .listeo-np-prefs .listeo-np-device-button.button,
#dashboard .listeo-np-prefs .listeo-np-actions .button {
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #A737FF 0%, #7D4BE2 62%, #38B6FF 130%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(167, 55, 255, 0.24) !important;
    text-shadow: none !important;
}

#dashboard .listeo-np-prefs .listeo-np-device-button:hover,
#dashboard .listeo-np-prefs .listeo-np-device-button:focus,
#dashboard .listeo-np-prefs .listeo-np-actions .button:hover,
#dashboard .listeo-np-prefs .listeo-np-actions .button:focus {
    color: #ffffff !important;
    filter: brightness(1.06) !important;
    transform: translateY(-1px);
}

/* Group accordions. */
#dashboard .listeo-np-prefs .listeo-np-group {
    margin: 0 0 12px !important;
    overflow: hidden !important;
    background: #0e1935 !important;
    border: 1px solid rgba(125, 75, 226, 0.24) !important;
    border-radius: 14px !important;
}

#dashboard .listeo-np-prefs .listeo-np-group > .listeo-np-head {
    padding: 16px 18px !important;
    background: #122149 !important;
    border-radius: 14px !important;
    color: #ffffff !important;
}

#dashboard .listeo-np-prefs .listeo-np-group[open] > .listeo-np-head {
    background: #14264f !important;
    border-bottom: 1px solid rgba(56, 182, 255, 0.16) !important;
    border-radius: 14px 14px 0 0 !important;
}

#dashboard .listeo-np-prefs .listeo-np-group > .listeo-np-head:hover {
    background: #182b57 !important;
}

#dashboard .listeo-np-prefs .listeo-np-head-title strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#dashboard .listeo-np-prefs .listeo-np-head-desc,
#dashboard .listeo-np-prefs .listeo-np-chevron,
#dashboard .listeo-np-prefs .listeo-np-all-label,
#dashboard .listeo-np-prefs .listeo-np-col-label,
#dashboard .listeo-np-prefs .listeo-np-mobile-label {
    color: #9aaac3 !important;
}

#dashboard .listeo-np-prefs .listeo-np-group-content {
    background: #0d1833 !important;
    border-radius: 0 0 14px 14px !important;
}

#dashboard .listeo-np-prefs .listeo-np-channel-header {
    background: rgba(56, 182, 255, 0.035) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#dashboard .listeo-np-prefs .listeo-np-rows > .listeo-np-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
}

#dashboard .listeo-np-prefs .listeo-np-rows > .listeo-np-row:hover {
    background: rgba(167, 55, 255, 0.075) !important;
}

#dashboard .listeo-np-prefs .listeo-np-row-label {
    color: #f6f8ff !important;
}

/* Keep native switch mechanics; only map its palette to LD. */
#dashboard .listeo-np-prefs .listeo-np-check input.switch_1 {
    background-color: #2a3858 !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

#dashboard .listeo-np-prefs .listeo-np-check input.switch_1:checked {
    background-color: #A737FF !important;
    border-color: #A737FF !important;
}

#dashboard .listeo-np-prefs .listeo-np-check input.switch_1:indeterminate {
    background-color: #7D4BE2 !important;
    border-color: #7D4BE2 !important;
}

#dashboard .listeo-np-prefs .listeo-np-check input.switch_1::after {
    background: #ffffff !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.28) !important;
}

#dashboard .listeo-np-prefs :is(summary, input, button):focus-visible {
    outline: 2px solid #38B6FF !important;
    outline-offset: 3px !important;
}

#dashboard .listeo-np-prefs .listeo-np-actions {
    margin-top: 18px !important;
}

#dashboard .listeo-np-prefs .listeo-np-actions .button {
    min-height: 40px !important;
    padding: 9px 18px !important;
}

/* Plugin success/error notices inside the preferences form. */
#dashboard .listeo-np-prefs .notification {
    border-radius: 12px !important;
    border: 1px solid rgba(56,182,255,0.20) !important;
    background: #122149 !important;
    color: #ffffff !important;
}

#dashboard .listeo-np-prefs .notification p,
#dashboard .listeo-np-prefs .notification a {
    color: #ffffff !important;
}

@container (max-width: 600px) {
    #dashboard .listeo-np-prefs-box > .dashboard-list-box-static {
        padding: 14px !important;
    }

    #dashboard .listeo-np-prefs .listeo-np-device,
    #dashboard .listeo-np-prefs .listeo-np-sms-master,
    #dashboard .listeo-np-prefs .listeo-np-group > .listeo-np-head,
    #dashboard .listeo-np-prefs .listeo-np-channel-header,
    #dashboard .listeo-np-prefs .listeo-np-rows > .listeo-np-row {
        padding: 14px !important;
    }
}

/* ================================================================
 * v0.1.305 — Notification preference accordions: full LD surfaces
 * Apply the LD dark treatment to EVERY expanded preference group,
 * including the native UL/LI surfaces that Listeo/Bootstrap can
 * otherwise repaint white after the accordion header.
 * Visual only; no preference/subscription/save logic changed.
 * ================================================================ */
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group[open] {
    background-color: #0d1833 !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group > .listeo-np-group-content,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group[open] > .listeo-np-group-content {
    background: #0d1833 !important;
    background-color: #0d1833 !important;
    color: #ffffff !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-channel-header {
    background: #101e3d !important;
    background-color: #101e3d !important;
    color: #ffffff !important;
    border-bottom-color: rgba(56, 182, 255, 0.16) !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-rows,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group ul.listeo-np-rows {
    background: #0d1833 !important;
    background-color: #0d1833 !important;
    color: #ffffff !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-rows > li.listeo-np-row,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group ul.listeo-np-rows > li {
    background: #0d1833 !important;
    background-color: #0d1833 !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.075) !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-rows > li.listeo-np-row:hover,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group ul.listeo-np-rows > li:hover {
    background: rgba(167, 55, 255, 0.09) !important;
    background-color: rgba(167, 55, 255, 0.09) !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-row-label,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-all-label,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-col-label,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-mobile-label {
    color: #f6f8ff !important;
}

#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-all-label,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-col-label,
#dashboard .dashboard-list-box.listeo-np-prefs-box .listeo-np-prefs .listeo-np-group .listeo-np-mobile-label {
    color: #aebbd1 !important;
}

/* ================================================================
 * v0.1.306 — Web Push permission help tooltip
 * Small contextual help beside "Enable on this device". Supports
 * hover/focus on desktop and tap-to-open on touch devices.
 * ================================================================ */
#dashboard .listeo-np-prefs [data-listeo-np-device] {
    position: relative !important;
}

#dashboard .listeo-np-prefs .ld-push-help {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: -4px !important;
}

#dashboard .listeo-np-prefs .ld-push-help-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(56, 182, 255, 0.36) !important;
    border-radius: 999px !important;
    background: #0b1731 !important;
    color: #38B6FF !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: help !important;
    transform: none !important;
    filter: none !important;
}

#dashboard .listeo-np-prefs .ld-push-help-button:hover,
#dashboard .listeo-np-prefs .ld-push-help-button:focus-visible,
#dashboard .listeo-np-prefs .ld-push-help.is-open .ld-push-help-button {
    border-color: rgba(167, 55, 255, 0.72) !important;
    background: rgba(167, 55, 255, 0.14) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(167, 55, 255, 0.10) !important;
}

#dashboard .listeo-np-prefs .ld-push-help-tooltip {
    position: absolute !important;
    z-index: 99999 !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    width: max-content !important;
    max-width: 340px !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(56, 182, 255, 0.26) !important;
    border-radius: 11px !important;
    background: #081023 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}

#dashboard .listeo-np-prefs .ld-push-help-tooltip::after {
    content: '' !important;
    position: absolute !important;
    right: 10px !important;
    top: 100% !important;
    border: 7px solid transparent !important;
    border-top-color: #081023 !important;
}

#dashboard .listeo-np-prefs .ld-push-help:hover .ld-push-help-tooltip,
#dashboard .listeo-np-prefs .ld-push-help:focus-within .ld-push-help-tooltip,
#dashboard .listeo-np-prefs .ld-push-help.is-open .ld-push-help-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

@container (max-width: 600px) {
    #dashboard .listeo-np-prefs .ld-push-help {
        margin-left: 0 !important;
    }

    #dashboard .listeo-np-prefs .ld-push-help-tooltip {
        position: fixed !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 24px !important;
        width: auto !important;
        max-width: none !important;
        padding: 13px 15px !important;
        font-size: 13px !important;
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.52) !important;
    }

    #dashboard .listeo-np-prefs .ld-push-help-tooltip::after {
        display: none !important;
    }
}