﻿/* Compact operational workspace, using the shared dashboard theme tokens. */
body.sf-pro-editor .sys-studio-primary-actions,
body.sf-pro-editor #sysimpleFormBuilder>.topbar:not(.sys-studio-header),
body.sf-pro-editor #sysimpleFormBuilder>#studioMainTabs,
body.sf-pro-editor #studioSchemaBar,
body.sf-pro-editor #btnDesign,
body.sf-pro-editor #btnPreview,
body.sf-pro-editor #btnPreviewRuntime,
body.sf-pro-editor #btnPreviewCanvasRuntime,
body.sf-pro-editor #btnApply,
body.sf-pro-editor #dirtyBadge,
body.sf-pro-editor #dirtyBadgeCanvas {display:none!important;}
.sf-pro-editor #studioDefinitionStatus:not(.error){font-size:11px;padding:3px 14px;}
.sf-pro-editor .sf-definition-bar{padding:8px 14px;gap:8px;min-height:50px;}
.sf-pro-editor #studioDefinitionName{font-size:15px;}
.sf-pro-editor #studioPanelDesigner>.wrap{grid-template-columns:220px minmax(300px,1fr) 330px;gap:0;}
.sf-pro-editor #sysimpleFormBuilder.sf-palette-collapsed #studioPanelDesigner>.wrap{grid-template-columns:minmax(300px,1fr) 330px;}
.sf-pro-editor .sf-palette-collapsed #studioPanelDesigner>.wrap>.pane:first-child{display:none;}
.sf-pro-editor #studioPanelDesigner>.wrap>.pane{padding:10px;}
.sf-pro-editor #studioPanelDesigner>.wrap>.pane.right{padding:0 8px 10px;border-left:1px solid var(--adm-border);}
.sf-pro-editor .pane.right>.card:first-child:has(#selHint:empty){display:none;}
.sf-pro-editor #canvasModeBar{padding:8px 12px;margin:0;border-width:0 0 1px;gap:8px;}
.sf-pro-editor .canvas-modebar-left,.sf-pro-editor .canvas-modebar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sf-pro-editor #canvasModeBar #zoomLabel{min-width:45px!important;padding:5px;}
.sf-pro-editor .sf-canvas-details{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:400;margin:0 8px 0 0;color:var(--adm-text-soft);}
.sf-pro-editor .sf-canvas-details input{margin:0;accent-color:var(--adm-primary);}
.sf-pro-editor #rootItems>.d-field,.sf-pro-editor #rootItems>.d-node{margin-bottom:10px;}
.sf-pro-editor #sysimpleFormBuilder .d-head{padding:6px 8px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-control-heading small{display:none;}
.sf-pro-editor #sysimpleFormBuilder .sf-control-state{display:flex;flex-wrap:wrap;gap:4px;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badges{grid-column:1/-1;gap:3px;align-items:center;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px!important;min-width:20px!important;min-height:20px!important;height:20px!important;padding:2px!important;border:1px solid transparent!important;border-radius:2px;background:transparent!important;color:var(--adm-text-dim);}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge svg{display:block;width:13px!important;min-width:13px!important;height:13px!important;flex-shrink:0;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge.is-active{color:var(--adm-primary)!important;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge.is-muted{color:var(--adm-text-dim)!important;opacity:.7;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge.is-warning{color:var(--adm-warning,#b87908)!important;background:var(--adm-warning-soft,var(--adm-surface-2))!important;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge.is-required{color:var(--adm-danger,#dd4b39)!important;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge:hover{background:var(--adm-surface-2)!important;border-color:var(--adm-primary)!important;}
.sf-pro-editor #sysimpleFormBuilder .sf-field-badge:focus-visible{outline:2px solid var(--adm-primary);outline-offset:2px;}
.sf-pro-editor #sysimpleFormBuilder .sf-visibility-note{width:auto;min-height:0;padding:2px 6px;font-size:10px;line-height:1.4;border-width:0 0 0 2px;background:var(--adm-warning-soft,var(--adm-surface-2));}
.sf-pro-editor #sysimpleFormBuilder .d-actions{opacity:0;transition:opacity .12s;}
.sf-pro-editor #sysimpleFormBuilder :is(.d-field,.d-node,.d-col):is(:hover,:focus-within,.selected)>.d-head>.d-actions{opacity:1;}
.sf-pro-editor #sysimpleFormBuilder .sf-live-control{padding:8px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-js-sample{max-height:48px;overflow:hidden;font-size:11px;}
.sf-pro-editor #sysimpleFormBuilder .sf-property-heading{position:sticky;top:0;z-index:5;padding:12px;background:var(--adm-panel);border-bottom:1px solid var(--adm-border);}
.sf-pro-editor .sf-property-heading h3{font-size:15px!important;margin:0 0 5px!important;line-height:1.4;}
.sf-pro-editor .sf-property-heading #pType{margin:0;font-size:11px;}
.sf-pro-editor .sf-property-tabs{position:static;gap:3px;grid-template-columns:repeat(3,minmax(0,1fr));}
.sf-pro-editor .sf-property-section{margin:0 0 10px;border-bottom:1px solid var(--adm-border);padding-bottom:8px;}
.sf-pro-editor .sf-property-section>summary{padding:8px 0;cursor:pointer;}
.sf-pro-editor .sf-palette-search{position:sticky;top:-10px;z-index:3;margin:0 0 10px;padding:10px;background:var(--adm-panel);}
.sf-pro-editor .sf-palette-search h3{margin:0 0 8px;}.sf-pro-editor .sf-palette-search label{font-size:11px;font-weight:400;}
.sf-pro-editor .sf-palette-search p{font-size:11px;margin:6px 0 0;}
.sf-pro-editor .sf-palette-group{margin:0 0 8px;padding:8px;}
.sf-pro-editor .sf-palette-group summary{font-weight:600;cursor:pointer;padding:4px 0;}
.sf-pro-editor .sf-palette-group .palette-item{margin:5px 0 0;padding:7px;min-height:34px;}
.sf-pro-editor .palette-item:focus-visible{outline:2px solid var(--adm-primary);outline-offset:1px;}
.sf-pro-editor [hidden]{display:none!important;}
.sf-pro-editor .sf-editor-tools-menu{position:relative;}
.sf-pro-editor .sf-editor-tools-menu>summary{cursor:pointer;border:1px solid var(--adm-border);padding:7px 12px;min-height:34px;background:var(--adm-panel);}
.sf-pro-editor .sf-editor-tools-panel{position:absolute;right:0;top:100%;z-index:50;width:260px;padding:10px;background:var(--adm-panel);border:1px solid var(--adm-border);box-shadow:0 4px 14px #0002;display:grid;gap:6px;}
.sf-pro-editor .sf-editor-tools-panel button{text-align:left;width:100%;}
.sf-pro-editor .sf-editor-advanced{display:grid;gap:5px;border-top:1px solid var(--adm-border);padding-top:10px;margin-top:5px;font-size:12px;}
@media(hover:none){.sf-pro-editor #sysimpleFormBuilder .d-actions{opacity:1;}}
@media(max-width:1150px){.sf-pro-editor #studioPanelDesigner>.wrap{grid-template-columns:185px minmax(260px,1fr) 290px;}.sf-pro-editor #sysimpleFormBuilder.sf-palette-collapsed #studioPanelDesigner>.wrap{grid-template-columns:minmax(260px,1fr) 290px;}.sf-pro-editor #canvasModeBar{flex-wrap:wrap;}}
@media(max-width:800px){.sf-pro-editor #studioPanelDesigner>.wrap,.sf-pro-editor #sysimpleFormBuilder.sf-palette-collapsed #studioPanelDesigner>.wrap{display:flex;flex-direction:column;overflow:auto;}.sf-pro-editor #studioPanelDesigner>.wrap>.pane:first-child{max-height:220px;flex:none;width:100%;}.sf-pro-editor #center{flex:none;min-height:420px;width:100%;}.sf-pro-editor #viewport{min-height:320px;max-height:60vh;}.sf-pro-editor #studioPanelDesigner>.wrap>.pane.right{flex:none;max-height:65vh;width:100%;}.sf-pro-editor .sf-definition-bar strong{flex-basis:calc(100% - 140px);}.sf-pro-editor #studioDefinitionState{font-size:11px;}.sf-pro-editor .sf-editor-tools-panel{left:0;right:auto;}.sf-pro-editor .sf-definition-bar{padding:6px 10px;}}

.sf-pro-editor .sf-editor-advanced #studioMainTabs{display:block;padding:0;border:0;}.sf-pro-editor .sf-editor-advanced .main-tabs-left,.sf-pro-editor .sf-editor-advanced .main-tabs-right{display:grid;gap:5px;}.sf-pro-editor .sf-editor-advanced .panel-note{display:none;}

.sf-pro-editor :is(.sf-property-section,.sf-palette-group)>summary::before{content:'▸';display:inline-block;width:14px;color:var(--adm-text-soft);}.sf-pro-editor :is(.sf-property-section,.sf-palette-group)[open]>summary::before{content:'▾';}
.sf-pro-editor :is(.sf-property-section,.sf-palette-group)>summary::marker{content:'';}
.sf-pro-editor .sf-property-row:has(input[type=checkbox]){display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;min-height:30px;}.sf-pro-editor .sf-property-row:has(input[type=checkbox]) label{margin:0;}.sf-pro-editor .sf-property-row:has(input[type=checkbox]) input{margin:0;}
.sf-pro-editor .sf-property-actions{display:flex;justify-content:flex-end;gap:6px;border-top:1px solid var(--adm-border);padding:10px 0;}

.sf-pro-editor #center:not(.mode-preview) #previewDeviceCanvas{display:none;}

/* Keep the form readable while editing; technical framing remains opt-in. */
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer{background:var(--adm-panel)!important;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.d-field,.d-node,.d-col){position:relative;border-color:transparent;background:transparent;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.d-field,.d-node,.d-col):hover{border-color:var(--adm-border);}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.d-field,.d-node,.d-col).selected{border-color:var(--adm-primary);}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .d-head{position:relative;display:flex;align-items:center;gap:6px;background:transparent;padding:3px 6px;min-height:26px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-control-heading{flex:1;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-control-heading strong{font-weight:500;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-field-badges{display:none;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .selected>.d-head{flex-wrap:wrap;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .selected>.d-head>.sf-field-badges{display:flex;flex-basis:100%;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .d-head>.drag-handle{position:absolute;left:-15px;opacity:0;z-index:3;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .d-head>.d-actions{position:absolute;right:4px;top:0;z-index:4;background:var(--adm-panel);}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.d-field,.d-node,.d-col):is(:hover,:focus-within,.selected)>.d-head>.drag-handle{opacity:1;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-live-control{padding:2px 6px 6px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .cols{padding:0;gap:12px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .dropzone{padding:4px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.sf-layout,.d-col)>.d-head{height:10px;min-height:10px;padding:0;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.sf-layout,.d-col)>.d-head>.sf-control-heading{visibility:hidden;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) :is(.sf-layout,.d-col):is(:hover,:focus-within,.selected)>.d-head>.sf-control-heading{visibility:visible;background:var(--adm-panel);position:absolute;z-index:3;font-size:11px;}
@media(hover:none){.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .d-head>.drag-handle{opacity:1;}}

.sf-pro-editor #sysimpleFormBuilder .sf-field-badge[data-property="IsSecure"]{width:auto!important;flex:0 0 auto;padding:2px 5px!important;gap:4px;font-size:11px;white-space:nowrap;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-field-badges:has([data-property="IsSecure"]){display:flex;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) .sf-field-badges:has([data-property="IsSecure"])>button:not([data-property="IsSecure"]){display:none;}

.sf-embedded-preview{margin:6px 0;padding:12px;border:1px solid var(--adm-border,#d2d6de);border-left:3px solid var(--adm-primary,#3c8dbc);background:var(--adm-surface,#fff);color:var(--adm-text,#263238);}
.sf-embedded-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.sf-embedded-open{min-height:34px;display:inline-flex;align-items:center;white-space:normal;}
.sf-embedded-note{display:block;font-size:12px;color:var(--adm-text-dim,#657786);margin:6px 0;}
.sf-embedded-fields,.sf-embedded-layout{display:grid;gap:10px;}
.sf-embedded-field{min-width:0;}
.sf-embedded-layout{padding:10px;border:1px solid var(--adm-border,#d2d6de);grid-template-columns:repeat(var(--embedded-columns,1),minmax(0,1fr));}
.sf-embedded-layout>.sf-embedded-caption{grid-column:1/-1;}
.sf-embedded-caption{display:block;margin-bottom:5px;font-size:12px;}
.sf-embedded-sample{min-height:34px;padding:8px;border:1px solid var(--adm-border,#d2d6de);background:var(--adm-surface-2,#f9fafb);font-size:12px;color:var(--adm-text-dim,#657786);}
.sf-embedded-content{overflow-wrap:anywhere;}
@media(max-width:700px){.sf-embedded-layout{grid-template-columns:1fr;}}

.sf-pro-editor #sysimpleFormBuilder #designer .d-field{background:var(--adm-panel,#fff);}
.sf-pro-editor #sysimpleFormBuilder #designer :is(.d-node,.d-col):hover{
    border-color:color-mix(in srgb,var(--adm-primary,#3c8dbc) 50%,var(--adm-border,#d2d6de));
}
.sf-pro-editor #sysimpleFormBuilder #designer :is(.d-node,.d-col).selected{border-color:var(--adm-primary,#3c8dbc);}

/* In normal design mode, keep the execution form's density and control geometry.
   Technical detail mode retains its explicit editing frames. */
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer{font:13px Arial,sans-serif;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is(.d-node,.d-col,.d-field){border-radius:2px;box-shadow:none;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .d-field{padding:0;margin:0 0 14px;background:transparent;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .d-field>.d-head{padding:0 0 5px;min-height:0;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .d-field>.d-head .sf-control-heading strong{font-size:13px;font-weight:700;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-design-type-icon{display:none;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-live-control{padding:0;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-live-control .form-control{
    min-height:34px;padding:6px 10px;border:1px solid var(--adm-border,#dce1e5);border-radius:2px;box-shadow:none;
    background:var(--adm-panel,#fff);color:var(--adm-text,#263238);font:13px Arial,sans-serif;
}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-live-control .btn{min-height:34px;padding:6px 10px;border-radius:2px;font-size:13px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-layout{padding:6px;margin:0 0 14px;border-color:transparent;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .d-col{padding:0 6px;min-height:34px;border-color:transparent;background:transparent;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .dropzone{padding:0;margin:0;border:0;border-radius:0;background:transparent;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .dropzone:has(>.dz-label){padding:10px;border:1px dashed var(--adm-border,#dce1e5);}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .dropzone.over{outline:2px dashed var(--adm-primary,#3c8dbc);outline-offset:2px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer [data-control-type="Box"],
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer [data-control-type="BoxExt"]{padding:0;margin:0 0 14px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is([data-control-type="Box"],[data-control-type="BoxExt"])>.d-head{padding:12px;border-bottom:1px solid var(--adm-border,#dce1e5);}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is([data-control-type="Box"],[data-control-type="BoxExt"])>.d-head strong{font-size:15px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is([data-control-type="Box"],[data-control-type="BoxExt"])>.dropzone{padding:12px;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-own-caption>.d-head{height:0;min-height:0;padding:0;z-index:4;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer .sf-own-caption>.d-head>.sf-control-heading{display:none;}
.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is(.d-node,.d-col,.d-field):is(:hover,:focus-within,.selected){border-color:var(--adm-primary,#3c8dbc);}

.sf-pro-editor #sysimpleFormBuilder:not(.sf-show-details) #designer :is(.d-field,.sf-layout,.d-col)>.d-head{border-bottom:0;margin-bottom:0;}

.sf-embedded-execution{padding:0;border:0;background:transparent;}
.sf-embedded-execution>.sf-embedded-heading{padding:4px 0;opacity:.65;}
.sf-embedded-execution:hover>.sf-embedded-heading{opacity:1;}
.sf-embedded-runtime{display:block;width:100%;height:40px;min-height:0;border:0;pointer-events:none;}
.sf-embedded-execution > [hidden]{display:none!important;}
.sf-runtime-surface{display:block;border:0;width:100%;min-height:80px;background:var(--adm-panel,#fff);}
/* Mode selection must remain distinct from the neutral toolbar buttons. */
.sf-pro-editor #sysimpleFormBuilder #canvasModeBar :is(#btnDesignCanvas,#btnPreviewCanvas)[aria-pressed="true"]{
    background:var(--adm-primary,#3c8dbc)!important;color:#fff!important;
    border-color:var(--adm-primary,#3c8dbc)!important;font-weight:700;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)!important;
}
.sf-pro-editor #sysimpleFormBuilder #sfTogglePalette[aria-expanded="true"]{
    border-color:var(--adm-primary,#3c8dbc)!important;
    box-shadow:inset 0 -3px 0 var(--adm-primary,#3c8dbc)!important;
}
.sf-pro-editor #sysimpleFormBuilder #canvasModeBar button:focus-visible{
    outline:2px solid var(--adm-primary,#3c8dbc);outline-offset:2px;
}
#rootItems>[role=status][hidden],#previewHost>[role=status][hidden]{display:none!important;}
/* The selected property tab remains distinct from hover and keyboard focus. */
.sf-pro-editor #sysimpleFormBuilder .sf-property-tabs [role="tab"][aria-selected="true"]{
    background:var(--adm-primary,#3c8dbc)!important;color:#fff!important;
    border-color:var(--adm-primary,#3c8dbc)!important;font-weight:700;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)!important;
}
.sf-pro-editor #sysimpleFormBuilder .sf-property-tabs [role="tab"]:focus-visible{
    outline:2px solid var(--adm-primary,#3c8dbc);outline-offset:2px;
}
