/*
 * ============================================================
 * RC UI 3.0 — COMPONENTS
 * Shared component visual ownership.
 * ============================================================
 */

/* ------------------------------------------------------------
 * Utility drawer close buttons
 * Lucide is the only visual icon source.
 * ------------------------------------------------------------ */

body.rc-editor-open #rc-editor-modal
:is(
    #rc-close-templates,
    #rc-close-image-library,
    #rc-close-elements,
    #rc-close-qr
){
    width:var(--rc-drawer-close-size) !important;
    min-width:var(--rc-drawer-close-size) !important;
    max-width:var(--rc-drawer-close-size) !important;

    height:var(--rc-drawer-close-size) !important;
    min-height:var(--rc-drawer-close-size) !important;
    max-height:var(--rc-drawer-close-size) !important;

    padding:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid var(--rc-drawer-close-border) !important;
    border-radius:var(--rc-drawer-close-radius) !important;

    background:var(--rc-drawer-close-surface) !important;
    color:var(--rc-drawer-close-fg) !important;

    font-size:0 !important;
    line-height:1 !important;

    box-shadow:none !important;
    overflow:hidden !important;
}

/* Kill historical synthetic arrows / X marks. */
body.rc-editor-open #rc-editor-modal
:is(
    #rc-close-templates,
    #rc-close-image-library,
    #rc-close-elements,
    #rc-close-qr
)::before,
body.rc-editor-open #rc-editor-modal
:is(
    #rc-close-templates,
    #rc-close-image-library,
    #rc-close-elements,
    #rc-close-qr
)::after{
    display:none !important;
    content:none !important;
}

body.rc-editor-open #rc-editor-modal
:is(
    #rc-close-templates,
    #rc-close-image-library,
    #rc-close-elements,
    #rc-close-qr
) > .rc-icon{
    position:static !important;
    display:block !important;

    width:17px !important;
    min-width:17px !important;
    height:17px !important;
    min-height:17px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    color:currentColor !important;
}

/* ------------------------------------------------------------
 * Category select — RC UI owner
 * ------------------------------------------------------------ */

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select{
    width:100%;
    min-width:0;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__trigger{
    min-height:38px !important;
    padding:6px 34px 6px 9px !important;

    border:1px solid #cfd8e3 !important;
    border-radius:9px !important;

    background:#f8fafc !important;
    color:#172033 !important;

    box-shadow:none !important;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__placeholder{
    color:#64748b !important;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__arrow{
    right:11px !important;

    width:auto !important;
    height:auto !important;

    padding:0 !important;
    border:0 !important;

    background:transparent !important;
    color:#64748b !important;

    box-shadow:none !important;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__menu{
    border:1px solid #cfd8e3 !important;
    border-radius:10px !important;

    background:#ffffff !important;
    color:#172033 !important;

    box-shadow:0 14px 34px rgba(15,23,42,.16) !important;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__option:hover,
body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__option:focus-within{
    background:#eef5fb !important;
}

body.rc-editor-open #rc-editor-modal
#rc-save-template-modal .rcsd-category-select__chip{
    background:#e8f3fb !important;
    color:#185f87 !important;
    border:1px solid #c7dff0 !important;
    border-radius:6px !important;
}

body.rc-editor-open #rc-editor-modal #rc-save-template-modal .rcsd-category-select__trigger:focus-visible{
    border-color:var(--rc-blue) !important;
    outline:2px solid var(--rc-control-focus-ring) !important;
    outline-offset:1px !important;
}


/* ============================================================
 * RC UI 3.0 — BASIC OBJECTS UNIFIED CONTROLS
 *
 * Visibility / Lock / Rename / Up / Down now live in ONE
 * structural control rail. This removes the root cause of
 * primary/secondary action overlap.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-main{
    box-sizing:border-box !important;

    display:flex !important;

    align-items:center !important;

    min-width:0 !important;

    gap:8px !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-name-wrap{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-name-line{
    width:100% !important;
    min-width:0 !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-controls{
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;
    justify-content:flex-start !important;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;

    gap:6px !important;

    margin:0 !important;
    padding:0 !important;

    position:static !important;

    transform:none !important;

    overflow:visible !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-controls
:is(
    .rcsd-object-layer-primary-actions,
    .rcsd-object-layer-actions
){
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;
    justify-content:flex-start !important;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;

    gap:6px !important;

    margin:0 !important;
    padding:0 !important;

    position:static !important;
    inset:auto !important;

    transform:none !important;
}


/*
 * No structural margin may exist between the two action groups.
 */

body.rc-editor-open
#rc-editor-modal
#rc-basic-objects-popover
.rcsd-object-layer-controls
.rcsd-object-layer-actions{
    margin-left:0 !important;
}


/* ------------------------------------------------------------
 * Compact responsive modes
 * ------------------------------------------------------------ */

@media (max-width:719px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-basic-objects-popover
    .rcsd-object-layer-name-wrap{
        display:none !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-basic-objects-popover
    .rcsd-object-layer-controls{
        gap:5px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-basic-objects-popover
    .rcsd-object-layer-controls
    :is(
        .rcsd-object-layer-primary-actions,
        .rcsd-object-layer-actions
    ){
        gap:5px !important;
    }
}


@media (min-width:720px) and (max-width:899px) and (max-height:430px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-basic-objects-popover
    .rcsd-object-layer-name-wrap{
        display:none !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-basic-objects-popover
    .rcsd-object-layer-main{
        width:auto !important;

        display:flex !important;

        align-items:center !important;

        gap:8px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-basic-objects-popover
    .rcsd-object-layer-controls{
        gap:6px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-basic-objects-popover
    .rcsd-object-layer-controls
    :is(
        .rcsd-object-layer-primary-actions,
        .rcsd-object-layer-actions
    ){
        gap:6px !important;
    }
}