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

@media (max-width: 767px) {

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

    .standard-page-content:has(#users) .segment-construct-widget {
        --seg-primary: #3499FD;
        --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;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 14px !important;
        background: #FFF !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;
        max-width: 100%;
    }


    /* =========================
       Main layout
       ========================= */

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

    .standard-page-content:has(#users)
    .segment-construct-widget
    .segment-rule
    > .pull-left {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }

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

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

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

    .standard-page-content:has(#users)
    .segment-construct-widget
    .rules-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =========================
       Rule cards
       ========================= */

    /*
     * Keep GetCourse's native AND/OR tree geometry.
     * Style only the actual condition cards.
     */
    .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: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--seg-border) !important;
        border-radius: 11px !important;
        background: #FFF !important;
        box-shadow: none !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;
    }

    .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 8px !important;
        color: var(--seg-text) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 650 !important;
    }


    /* =========================
       Wrappers
       ========================= */

    .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 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }




    /* Align all controls inside each leaf card. */
    .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 — scoped to segment only
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .select2-container {
        display: 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;
    }

    .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 11px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !important;
        background-image: none !important;
        color: #475467 !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-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-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;
    }


    /* =========================
       Inputs
       ========================= */

    .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
    textarea,

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    select:not([style*="display: none"]):not(.select2-offscreen) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0 11px !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;
    }


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

    .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: 7px !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .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: 1fr !important;
        gap: 7px !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 11px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 9px !important;
        background: #FFF !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;
        opacity: 1 !important;
    }


    /* =========================
       Operators
       Never override visibility/display logic
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget
    > .control-buttons {
        z-index: 20 !important;
        padding: 4px !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: 3px !important;
        padding: 4px 7px !important;
        border: 1px solid var(--seg-border-strong) !important;
        border-radius: 7px !important;
        background: #FFF !important;
        color: #667085 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }


    /* =========================
       Condition menus
       ========================= */

    .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: min(340px, calc(100vw - 28px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        max-height: min(420px, 62vh) !important;
        margin-top: 5px !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
    .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-size: 13px !important;
        box-shadow: none !important;
        outline: 0 !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: 40px !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
        color: #475467 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    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;
    }


    /* =========================
       Action buttons
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .action-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        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 {
        width: 100% !important;
        max-width: 100% !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 {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }


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

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget {
        border-color: #D7E7F7 !important;
        border-radius: 10px !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: 42px !important;
        height: 28px !important;
        margin-top: -14px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        border: 1px solid #BFDDF8 !important;
        border-radius: 7px !important;
        background: #EAF4FF !important;
        color: #2F79B8 !important;
        font-family: Manrope, Arial, sans-serif !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 5px rgba(52, 153, 253, .08) !important;
    }


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

    .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
       ========================= */

    .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) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0 11px !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;
    }


    /* =========================
       RULE PARAMETER DROPDOWNS
       ========================= */

    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-rule-widget:not(.logic-rule-andrule)
    button.dropdown {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        margin: 9px 0 0 !important;
        padding: 0 34px 0 11px !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;
        text-align: left !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
    .caret {
        position: absolute !important;
        top: 50% !important;
        right: 13px !important;
        margin: -3px 0 0 !important;
        border-top-color: #98A2B3 !important;
    }


    /* =========================
       MOBILE DEEP NESTING
       ========================= */

    /*
     * Keep native AND/OR geometry, but reduce only excessive horizontal
     * indentation so deeply nested conditions remain usable on narrow screens.
     */
    .standard-page-content:has(#users)
    .segment-construct-widget
    .logic-rule-plugin
    .logic-andrule-widget
    > ul.children {
        margin-left: 0 !important;
        padding-left: 14px !important;
    }

    .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: 100% !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;
    }

    .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-size: 13px !important;
    }


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

    .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)
    .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)
    .segment-construct-widget
    .dropdown.open
    > .dropdown-menu {
        z-index: 100500 !important;
    }


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

    .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;
    }

}