/* GETCOURSE — SEGMENT CONSTRUCTOR / DESKTOP v1.5
   Pure CSS. No DOM/JS modifications.
*/

@media (min-width: 768px) {

    /* =========================
       Scope / variables
       ========================= */

    .standard-page-content:has(#users) .segment-construct-widget {
        --seg-primary: #3499FD;
        --seg-primary-hover: #218AF4;
        --seg-primary-soft: #EAF4FF;
        --seg-text: #171C26;
        --seg-text-secondary: #667085;
        --seg-text-muted: #98A2B3;
        --seg-border: #E8ECF2;
        --seg-border-strong: #DDE3EA;
        --seg-bg: #FFFFFF;
        --seg-bg-soft: #F7F9FC;
        --seg-danger: #D92D20;

        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-family: Manrope, Arial, sans-serif !important;
        color: var(--seg-text) !important;
        overflow: visible !important;
    }

    .standard-page-content:has(#users) .segment-construct-widget *,
    .standard-page-content:has(#users) .segment-construct-widget *::before,
    .standard-page-content:has(#users) .segment-construct-widget *::after {
        box-sizing: border-box;
    }


    /* =========================
       Segment top controls
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-selector-wrapper {
        width: min(520px, 100%) !important;
        max-width: 520px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .btn-new-rule,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .btn-reset {
        min-height: 36px !important;
        margin: 0 2px !important;
        padding: 0 10px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #3E7FAE !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .btn-new-rule:hover,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .btn-reset:hover {
        background: #F4F8FC !important;
        color: var(--seg-primary) !important;
    }


    /* =========================
       Rule area
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-rule {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #EEF1F5 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin {
        width: min(1080px, calc(100vw - 360px)) !important;
        max-width: 1080px !important;
        min-width: 680px !important;
        font-family: Manrope, Arial, sans-serif !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .login-context-widget,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .rules-container {
        max-width: 100% !important;
        font-family: Manrope, Arial, sans-serif !important;
    }


    /* =========================
       Native GetCourse rule cards
       Do not change rule hierarchy/visibility
       ========================= */

    /*
     * GetCourse owns the AND/OR tree geometry.
     * We style only actual condition cards, never structural and-rule nodes.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 760px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 12px !important;
        background: var(--seg-bg) !important;
        box-shadow: 0 2px 8px rgba(23, 28, 38, .025) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule).hovered {
        border-color: #CFE5FB !important;
        background: #FBFDFF !important;
        box-shadow: 0 3px 12px rgba(23, 28, 38, .04) !important;
    }

    /*
     * Structural groups keep their native GetCourse margins, padding,
     * connector lines and operator positioning.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-andrule {
        max-width: 100% !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    ul.children > li {
        max-width: 100% !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget > label {
        display: block !important;
        margin: 0 0 9px !important;
        color: var(--seg-text) !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        font-weight: 650 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget > .invert-label {
        margin: 1px 8px 0 0 !important;
        padding: 2px 6px !important;
        border: 1px solid #F5D0D3 !important;
        border-radius: 6px !important;
        background: #FFF7F7 !important;
        color: var(--seg-danger) !important;
        font-size: 10px !important;
        line-height: 15px !important;
        font-weight: 700 !important;
    }


    /* =========================
       Field wrappers
       Remove double borders without touching functionality
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .field-widget,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-wrapper {
        max-width: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .field-widget {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }




    /* Keep all actual controls aligned inside equal-width cards. */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    > .field-widget,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    .field-widget,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    .control-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =========================
       Select2 — ONLY inside segment constructor
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container {
        display: inline-block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        vertical-align: top !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container
    > .select2-choice {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 38px 0 12px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        background-image: none !important;
        color: #475467 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 40px !important;
        box-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container
    > .select2-choice
    .select2-chosen {
        margin-right: 0 !important;
        line-height: 40px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container
    > .select2-choice
    > .select2-arrow {
        display: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container
    > .select2-choice::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 1.5px solid var(--seg-text-muted) !important;
        border-bottom: 1.5px solid var(--seg-text-muted) !important;
        transform: translateY(-65%) rotate(45deg) !important;
        pointer-events: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container.select2-container-active
    > .select2-choice {
        border-color: var(--seg-primary) !important;
        box-shadow: 0 0 0 3px rgba(52, 153, 253, .10) !important;
    }

    /* Multi-select */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container-multi
    .select2-choices {
        min-height: 42px !important;
        padding: 4px 7px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container-multi
    .select2-search-choice {
        min-height: 28px !important;
        margin: 2px 5px 2px 0 !important;
        padding: 5px 8px 5px 23px !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 7px !important;
        background: var(--seg-bg-soft) !important;
        background-image: none !important;
        color: #475467 !important;
        box-shadow: none !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* Do not visually expose Select2 technical focus input. */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-focusser {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 1px !important;
        min-height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        border: 0 !important;
        opacity: 0 !important;
    }


    /* =========================
       Native inputs / selects
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    input.form-control,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    input[type="text"]:not(.select2-input):not(.select2-focusser),

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    input[type="number"],

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    textarea,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    select:not([style*="display: none"]):not(.select2-offscreen) {
        min-height: 42px !important;
        padding: 0 12px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        color: var(--seg-text) !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    input.form-control:focus,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    input[type="text"]:not(.select2-input):not(.select2-focusser):focus,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    textarea:focus,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    select:focus {
        border-color: var(--seg-primary) !important;
        box-shadow: 0 0 0 3px rgba(52, 153, 253, .10) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    textarea {
        min-height: 84px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        line-height: 1.45 !important;
        resize: vertical !important;
    }


    /* =========================
       Dates
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget {
        width: 100% !important;
        max-width: 100% !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget
    .manual-type-selected {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget
    .additional-controls {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget
    .date-type-selector {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .manual-selected-date:not(.with-time-checkbox) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .manual-selected-date
    > .from,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .manual-selected-date
    > .to {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .manual-selected-date
    > .from
    > input,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .manual-selected-date
    > .to
    > input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        color: var(--seg-text) !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 40px !important;
        box-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .with-time-checkbox.manual-selected-date {
        flex: 0 0 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 8px !important;
        background: var(--seg-bg-soft) !important;
        color: var(--seg-text-muted) !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .with-time-checkbox.manual-selected-date.checked {
        border-color: #CFE5FB !important;
        background: var(--seg-primary-soft) !important;
        color: var(--seg-primary) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .with-time-checkbox.manual-selected-date
    .fa {
        margin: 0 !important;
        font-size: 15px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .n-days-selected-wrap {
        margin-top: 8px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .n-days-selected-wrap
    label {
        margin-right: 10px !important;
        color: var(--seg-text-secondary) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .n-days-selected-wrap
    input {
        width: 90px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin-left: 5px !important;
        padding: 0 8px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 8px !important;
        background: #FFF !important;
        box-shadow: none !important;
    }


    /* =========================
       Operators / native controls
       Styling only — GetCourse controls visibility
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget
    > .control-buttons {
        z-index: 20 !important;
        padding: 5px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget
    > .control-buttons
    .btn {
        min-width: 30px !important;
        min-height: 28px !important;
        margin-right: 4px !important;
        padding: 4px 8px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 7px !important;
        background: #FFF !important;
        background-image: none !important;
        color: #667085 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
        text-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget
    > .control-buttons
    .btn:hover {
        border-color: #CFE5FB !important;
        background: var(--seg-primary-soft) !important;
        color: var(--seg-primary) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget
    > .control-buttons
    .btn-delete:hover {
        border-color: #F1D0D2 !important;
        background: #FFF7F7 !important;
        color: var(--seg-danger) !important;
    }


    /* =========================
       Native dropdown menu with condition search
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown {
        position: relative !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu {
        width: 350px !important;
        min-width: 350px !important;
        max-width: min(350px, calc(100vw - 32px)) !important;
        max-height: min(440px, 70vh) !important;
        margin-top: 6px !important;
        padding: 7px !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 12px !important;
        background: #FFF !important;
        box-shadow: 0 16px 42px rgba(23, 28, 38, .18) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 100500 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    > li,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    > li:first-child,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    > li:first-child {
        padding: 3px 3px 7px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    .search-input,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    .search-input {
        display: block !important;
        width: 100% !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 8px !important;
        background: #FFF !important;
        color: var(--seg-text) !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 12px !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    .search-input:focus,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    .search-input:focus {
        border-color: var(--seg-primary) !important;
        box-shadow: 0 0 0 3px rgba(52, 153, 253, .10) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    > li
    > a,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    .logic-action-link {
        display: block !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #475467 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    > li
    > a:hover,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    .logic-action-link:hover {
        background: var(--seg-primary-soft) !important;
        color: var(--seg-primary) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .control-buttons
    .dropdown-menu
    .nothing-found-label,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-actions-menu
    .nothing-found-label {
        margin-top: 7px !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
        background: #FFF8E7 !important;
        color: #8A6116 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }


    /* =========================
       Keep menu above left GetCourse navigation
       only while a segment dropdown is open
       ========================= */

    body:has(
        .standard-page-content:has(#users)
        .segment-construct-widget
        .logic-rule-plugin
        .control-buttons
        .dropdown.open
    )
    .gc-main-content {
        position: relative !important;
        z-index: 10000 !important;
    }

    body:has(
        .standard-page-content:has(#users)
        .segment-construct-widget
        .segment-actions-menu
    )
    .standard-page-content:has(#users)
    .segment-construct-widget {
        overflow: visible !important;
    }


    /* =========================
       Bottom action buttons
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons {
        margin-top: 12px !important;
        padding-left: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons
    > .btn-primary,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons
    > .btn-group
    > .btn {
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 9px !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons
    > .btn-primary,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons
    > .btn-group
    > .btn-success {
        border-color: var(--seg-primary) !important;
        background: var(--seg-primary) !important;
        color: #FFF !important;
    }


    /* =========================
       LOGICAL GROUPS / AND / OR
       ========================= */

    /*
     * Keep GetCourse's native geometry and connector lines.
     * Only change visual treatment of the group border and symbol.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget {
        border-color: #D7E7F7 !important;
        border-radius: 12px !important;
        background-color: rgba(248, 251, 255, .28) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget
    > .symbol {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 30px !important;
        margin-top: -15px !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        border: 1px solid #BFDDF8 !important;
        border-radius: 8px !important;
        background: #EAF4FF !important;
        color: #2F79B8 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 5px rgba(52, 153, 253, .08) !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget.hovered
    > .symbol {
        border-color: #9BCBF4 !important;
        background: #DDEFFF !important;
        color: #1768A5 !important;
    }


    /* =========================
       DATE TIME TOGGLE FIX
       ========================= */

    /*
     * GetCourse intentionally hides the checkbox and uses the clock icon
     * as the clickable control. Global checkbox styles on the users page
     * can override that inline display:none.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .with-time-checkbox.manual-selected-date
    > input[type="checkbox"] {
        display: none !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 1px !important;
        min-height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget
    .additional-controls {
        flex-wrap: nowrap !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .date-field-widget
    .date-type-selector {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .with-time-checkbox.manual-selected-date {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 42px !important;
    }


    /* =========================
       GENERIC GETCOURSE FIELD INPUTS
       ========================= */

    /*
     * Some GetCourse rules use non-standard type="type".
     * Style any ordinary input inside a field wrapper, while excluding
     * radios, checkboxes and Select2/search technical inputs.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .field-widget
    > .control-wrapper
    > input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser):not(.search-input) {
        min-height: 42px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        color: var(--seg-text) !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 40px !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .field-widget
    > .control-wrapper
    > input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser):not(.search-input):focus {
        border-color: var(--seg-primary) !important;
        box-shadow: 0 0 0 3px rgba(52, 153, 253, .10) !important;
    }


    /* =========================
       RULE PARAMETER DROPDOWNS
       e.g. "Указать параметры заказа"
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    button.dropdown {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-height: 38px !important;
        margin: 10px 0 0 !important;
        padding: 0 34px 0 12px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        background-image: none !important;
        color: #475467 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    button.dropdown:hover,
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    button.dropdown:focus {
        border-color: #BFDDF8 !important;
        background: #F8FBFF !important;
        color: var(--seg-primary) !important;
        outline: 0 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    button.dropdown
    .caret {
        position: absolute !important;
        top: 50% !important;
        right: 13px !important;
        margin: -3px 0 0 !important;
        border-top-color: #98A2B3 !important;
    }


    /* =========================
       DESKTOP WIDTH / DEEP NESTING
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-rule
    > .pull-left:first-child {
        width: min(1120px, calc(100vw - 330px)) !important;
        max-width: 1120px !important;
        min-width: 0 !important;
    }

    /*
     * Nested AND/OR groups naturally consume horizontal space.
     * The leaf card may use the full remaining branch width,
     * but is capped so very shallow rules do not become excessively wide.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget
    .logic-rule-widget:not(.logic-rule-andrule) {
        width: 100% !important;
        max-width: 760px !important;
    }

    @media (min-width: 768px) and (max-width: 1280px) {
        .standard-page-content:has(#users)
        .segment-construct-widget
        .logic-rule-plugin {
            width: min(860px, calc(100vw - 300px)) !important;
            min-width: 0 !important;
        }

        .standard-page-content:has(#users)
        .segment-construct-widget
        .segment-rule
        > .pull-left:first-child {
            width: min(900px, calc(100vw - 280px)) !important;
        }

        .standard-page-content:has(#users)
        .segment-construct-widget
        .logic-rule-plugin
        .logic-rule-widget:not(.logic-rule-andrule) {
            max-width: 680px !important;
        }
    }


    /* =========================
       NATIVE SELECTS
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    select:not(.select2-offscreen):not(.kv-hide) {
        appearance: none !important;
        -webkit-appearance: none !important;
        padding-right: 36px !important;
        background-color: #FFF !important;
        background-image:
            linear-gradient(45deg, transparent 50%, #667085 50%),
            linear-gradient(135deg, #667085 50%, transparent 50%) !important;
        background-position:
            calc(100% - 16px) 50%,
            calc(100% - 11px) 50% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        cursor: pointer !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    select:not(.select2-offscreen):not(.kv-hide)
    option {
        background: #FFF !important;
        color: #344054 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 13px !important;
    }


    /* =========================
       DROPDOWN CLIPPING FIX
       ========================= */

    /*
     * The GetCourse users grid wraps the segment constructor in several
     * containers with overflow rules. While a segment dropdown is open,
     * allow it to escape those clipping containers.
     */
    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open),

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    > .grid-view,

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    > .grid-view
    > .panel,

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .kv-panel-before,

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .panel-heading,

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .segment-construct-widget {
        overflow: visible !important;
    }

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .kv-panel-before {
        position: relative !important;
        z-index: 200 !important;
    }

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .segment-construct-widget {
        position: relative !important;
        z-index: 220 !important;
    }

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    #w7-container,

    .standard-page-content:has(#users)
    #users:has(.segment-construct-widget .dropdown.open)
    .table-responsive {
        position: relative !important;
        z-index: 1 !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .dropdown.open
    > .dropdown-menu {
        z-index: 100500 !important;
    }


    /* =========================
       FINAL PANEL CLIPPING FIX
       ========================= */

    /*
     * Actual GetCourse DOM:
     * #users > .grid-view > .panel.panel-default > .panel.default
     *
     * The users-page CSS sets overflow:hidden on BOTH panel layers.
     * The dropdown lives inside .kv-panel-before, so both layers must
     * allow overflow. The table keeps its own horizontal scrolling
     * inside #w7-container.
     */
    .standard-page-content:has(#users)
    #users
    > .grid-view
    > .panel.panel-default,

    .standard-page-content:has(#users)
    #users
    > .grid-view
    > .panel.panel-default
    > .panel.default {
        overflow: visible !important;
    }

    .standard-page-content:has(#users)
    #users
    > .grid-view
    > .panel.panel-default
    > .panel.default
    > .kv-panel-before {
        position: relative !important;
        z-index: 50 !important;
        overflow: visible !important;
    }

    .standard-page-content:has(#users)
    #users
    > .grid-view
    > .panel.panel-default
    > .panel.default
    > #w7-container {
        position: relative !important;
        z-index: 1 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget {
        position: relative !important;
        z-index: 60 !important;
        overflow: visible !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .dropdown.open
    > .dropdown-menu {
        z-index: 100500 !important;
    }

}