/* ============================================================
   RC UI 3.0 — WORKSPACE + FOOTER/ZOOM FINAL OWNER
   ============================================================ */

body.rc-editor-open #rc-editor-modal .rc-editor-body{
    position:absolute !important;
    top:var(--rc-topbar-height) !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    display:grid !important;
    grid-template-columns:var(--rc-left-rail-width, 84px) var(--rc-active-utility-drawer-width) minmax(0, 1fr) !important;
    grid-template-rows:minmax(0, 1fr) !important;
    column-gap:0 !important;
    overflow:hidden !important;
    background:var(--rc-bg-main) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop{
    --rc-workspace-footer-height:80px;
}

body.rc-editor-open #rc-editor-modal .rc-editor-body > .rc-workspace{
    position:relative;
    grid-column:3 !important;
    min-width:0 !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:minmax(0, 1fr) var(--rc-workspace-footer-height) !important;
    overflow:hidden !important;
    background:var(--rc-bg-main) !important;
    margin-top:0 !important;
    margin-left:0 !important;
    width:auto !important;
}

body.rc-editor-open #rc-editor-modal .rc-canvas-area{
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:auto !important;
    background:#eef1f4 !important;
    scrollbar-gutter:auto;
    scrollbar-width:auto;
    scrollbar-color:var(--rc-scroll-thumb) var(--rc-scroll-track);
}

body.rc-editor-open #rc-editor-modal .rc-canvas-area::-webkit-scrollbar{
    width:10px;
    height:10px;
}

body.rc-editor-open #rc-editor-modal .rc-canvas-area::-webkit-scrollbar-track{
    background:var(--rc-scroll-track);
}

body.rc-editor-open #rc-editor-modal .rc-canvas-area::-webkit-scrollbar-thumb{
    border:2px solid var(--rc-scroll-track);
    border-radius:8px;
    background:var(--rc-scroll-thumb);
}

body.rc-editor-open #rc-editor-modal .rc-canvas-area::-webkit-scrollbar-thumb:hover{
    background:var(--rc-scroll-thumb-hover);
}

body.rc-editor-open #rc-editor-modal .rc-workspace > #rc-editor-bottom-status.rc-workspace-footer{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    max-width:none !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 14px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items:center !important;
    gap:16px !important;
    border:0 !important;
    border-top:1px solid var(--rc-border) !important;
    border-radius:0 !important;
    background:#fff !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    font-size:11px !important;
    font-weight:600 !important;
    pointer-events:auto !important;
    z-index:2 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace > #rc-editor-bottom-status.rc-workspace-footer{
    height:var(--rc-workspace-footer-height) !important;
    min-height:var(--rc-workspace-footer-height) !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    color:var(--rc-text-secondary) !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-document-size{
    color:var(--rc-text-primary) !important;
    font-size:11px !important;
    font-weight:650 !important;
    white-space:nowrap !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-legend,
body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-item{
    display:flex !important;
    align-items:center !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-legend{
    gap:12px !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-item{
    gap:5px !important;
    color:var(--rc-text-secondary) !important;
    font-size:10px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-marker{
    width:3px !important;
    height:12px !important;
    border-radius:2px !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-marker--bleed{
    background:var(--rc-print-bleed) !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-marker--cut{
    background:var(--rc-print-cut) !important;
}

body.rc-editor-open #rc-editor-modal #rc-bottom-template-info .rc-footer-guide-marker--safe{
    background:var(--rc-print-safe) !important;
}

body.rc-editor-open #rc-editor-modal .rc-footer-side-navigation{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-navigation{
    grid-column:2 !important;
    justify-self:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-thumbnail{
    width:82px !important;
    min-width:82px !important;
    height:68px !important;
    padding:3px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    border:1px solid transparent !important;
    border-radius:var(--rc-radius-sm) !important;
    background:transparent !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-thumbnail[hidden]{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-thumbnail:is(:hover, :focus-visible){
    border-color:var(--rc-border) !important;
    background:var(--rc-surface-2) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-thumbnail:focus-visible{
    outline:2px solid var(--rc-control-focus-ring) !important;
    outline-offset:1px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-thumbnail.is-active{
    border-color:var(--rc-blue) !important;
    background:#eff6ff !important;
    color:var(--rc-text-primary) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-preview{
    width:76px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border:1px solid var(--rc-border) !important;
    border-radius:4px !important;
    background:#eef1f4 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-preview img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:100% !important;
    object-fit:contain !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-footer-side-label{
    font-size:10px !important;
    font-weight:650 !important;
    line-height:1 !important;
}

body.rc-editor-open #rc-editor-modal .rc-workspace-zoom{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace-zoom #rc-zoom-out{order:1;}
body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace-zoom #rc-zoom-label{order:2;}
body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace-zoom #rc-zoom-slider{order:3;}
body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace-zoom #rc-zoom-in{order:4;}
body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-workspace-zoom #rc-zoom-reset{order:5;}

body.rc-editor-open #rc-editor-modal .rc-workspace-zoom button{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid var(--rc-border) !important;
    border-radius:var(--rc-radius-sm) !important;
    background:var(--rc-surface-1) !important;
    color:var(--rc-text-primary) !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:700 !important;
}

body.rc-editor-open #rc-editor-modal .rc-workspace-zoom button:is(:hover, :focus-visible){
    border-color:var(--rc-blue) !important;
    background:var(--rc-surface-3) !important;
}

body.rc-editor-open #rc-editor-modal .rc-workspace-zoom #rc-zoom-reset{
    width:auto !important;
    min-width:58px !important;
    padding-inline:10px !important;
}

body.rc-editor-open #rc-editor-modal #rc-zoom-label{
    min-width:42px !important;
    text-align:right !important;
    color:var(--rc-text-primary) !important;
    font-variant-numeric:tabular-nums;
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider{
    --rc-zoom-progress:20%;
    width:132px !important;
    min-width:80px !important;
    height:24px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    accent-color:var(--rc-blue);
    appearance:none;
    -webkit-appearance:none;
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider::-webkit-slider-runnable-track{
    height:4px;
    border-radius:4px;
    background:linear-gradient(to right, var(--rc-blue) 0, var(--rc-blue) var(--rc-zoom-progress), var(--rc-border) var(--rc-zoom-progress), var(--rc-border) 100%);
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider::-webkit-slider-thumb{
    width:16px;
    height:16px;
    margin-top:-6px;
    border:2px solid var(--rc-blue);
    border-radius:50%;
    background:#fff;
    appearance:none;
    -webkit-appearance:none;
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider::-moz-range-track{
    height:4px;
    border-radius:4px;
    background:var(--rc-border);
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider::-moz-range-progress{
    height:4px;
    border-radius:4px;
    background:var(--rc-blue);
}

body.rc-editor-open #rc-editor-modal #rc-zoom-slider::-moz-range-thumb{
    width:12px;
    height:12px;
    border:2px solid var(--rc-blue);
    border-radius:50%;
    background:#fff;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-editor-body{
    grid-template-columns:var(--rc-left-rail-width, 72px) var(--rc-active-utility-drawer-width) minmax(0, 1fr) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-canvas-area{
    padding:20px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-editor-body{
    grid-template-columns:minmax(0, 1fr) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-editor-body > .rc-workspace{
    grid-column:1 !important;
    grid-template-rows:minmax(0, 1fr) 38px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-canvas-area{
    padding:12px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-workspace > #rc-editor-bottom-status.rc-workspace-footer{
    display:flex !important;
    justify-content:center !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 0 66px !important;
    padding-inline:8px !important;
    gap:8px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-bottom-template-info{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-zoom-slider{
    width:88px !important;
    min-width:60px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-workspace-zoom{
    width:100% !important;
    justify-content:center !important;
}

/* ============================================================
   RC UI 3.0 — TABLET WORKSPACE FOOTER CONTRACT
   Preserve template information and zoom controls without overlap.
   ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-workspace > #rc-editor-bottom-status.rc-workspace-footer{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-width:0 !important;
    padding-inline:12px !important;
    gap:12px !important;
    overflow:hidden !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
#rc-bottom-template-info{
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-workspace-zoom{
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:6px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
#rc-zoom-label{
    min-width:34px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
#rc-zoom-slider{
    width:88px !important;
    min-width:64px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-workspace-zoom #rc-zoom-reset{
    min-width:52px !important;
    padding-inline:7px !important;
}

/* ============================================================
 * RC UI 3.0 — MOBILE WORKSPACE FOOTER CONTRACT
 * Footer belongs to the workspace width, not viewport centering.
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
.rc-workspace > #rc-editor-bottom-status.rc-workspace-footer{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
.rc-workspace > #rc-editor-bottom-status.rc-workspace-footer
.rc-workspace-zoom{
    min-width:0 !important;
    max-width:100% !important;
}


/* ============================================================
   RC UI 3.0 — MOBILE PORTRAIT SMARTBAR CLEARANCE
   Smart Bar is absolutely positioned above the canvas content.
   Reserve visual breathing room without changing landscape.
   ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
    .rc-canvas-area{
        padding-top:72px !important;
        padding-right:12px !important;
        padding-bottom:18px !important;
        padding-left:12px !important;
        box-sizing:border-box !important;
    }
}