/* Extracted from app.html style block 1 */
/* Theme alignment only: keep your bindings/XML/JS untouched. */
body { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Shell layout: hide in-app header & binding library panel (DOM preserved for JS). */
.top-card{display:none !important;}
/* Keep bindings DOM for logic, but remove from view/layout. */
.left-panel{position:absolute !important; left:-10000px !important; top:0 !important; width:360px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important;}
/* Reflow main grid as 2 columns (canvas + right panel). */
.main{grid-template-columns: 1fr !important;}
/* ===== Rich text editor + canvas bubble ===== */
.df-rte-modal{
position:fixed;
inset:0;
z-index:20000;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(15,23,42,.45);
}
.df-rte-modal.open{ display:flex; }
.df-rte-shell{
width:min(980px, calc(100vw - 32px));
max-height:min(760px, calc(100vh - 32px));
display:flex;
flex-direction:column;
border-radius:18px;
overflow:hidden;
background:#fff;
box-shadow:0 24px 80px rgba(15,23,42,.28);
border:1px solid rgba(148,163,184,.35);
}
.df-rte-head,
.df-rte-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
background:#f8fafc;
border-bottom:1px solid rgba(148,163,184,.25);
}
.df-rte-foot{
border-top:1px solid rgba(148,163,184,.25);
border-bottom:none;
}
.df-rte-title{
font-size:14px;
font-weight:800;
color:#0f172a;
}
.df-rte-sub{
font-size:12px;
color:#64748b;
}
.df-rte-toolbar{
display:flex;
flex-wrap:wrap;
gap:5px;
padding:10px 14px;
border-bottom:1px solid rgba(148,163,184,.2);
background:#fff;
}
.df-rte-toolbar button{
appearance:none;
border:1px solid rgba(148,163,184,.35);
background:#fff;
color:#0f172a;
font:inherit;
font-weight:700;
min-width:32px;
height:32px;
padding:0 9px;
border-radius:9px;
font-size:11px;
cursor:pointer;
}
.df-rte-toolbar select{
height:32px;
border-radius:9px;
border:1px solid rgba(148,163,184,.35);
padding:0 10px;
font-size:11px;
background:#fff;
}
.df-rte-toolbar button:hover,
.df-rte-toolbar button:focus{
outline:none;
border-color:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.df-rte-editor-wrap{
padding:16px;
background:#fff;
}
.df-rte-editor{
min-height:300px;
max-height:420px;
overflow:auto;
border:1px solid rgba(148,163,184,.35);
border-radius:12px;
padding:14px 16px;
font-size:14px;
line-height:1.6;
color:#0f172a;
}
.df-rte-editor:focus{
outline:none;
border-color:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.df-rte-editor p,
.df-rte-editor div,
.df-rte-editor ul,
.df-rte-editor ol{
margin:0 0 8px;
}
.df-rte-editor ul,
.df-rte-editor ol{
padding-left:24px;
}
.df-rte-editor ul[data-bullet],
.df-richtext-bubble ul[data-bullet],
.df-rte-preview-inline ul[data-bullet]{
list-style:none;
padding-left:22px;
}
.df-rte-editor ol[data-num],
.df-richtext-bubble ol[data-num],
.df-rte-preview-inline ol[data-num]{
list-style:none;
padding-left:28px;
}
.df-rte-editor [data-df-list-marker],
.df-richtext-bubble [data-df-list-marker],
.df-rte-preview-inline [data-df-list-marker]{
display:inline-block;
white-space:pre;
color:inherit;
font:inherit;
text-decoration:inherit;
vertical-align:baseline;
}
.df-rte-editor [data-df-marker-kind="bullet"],
.df-richtext-bubble [data-df-marker-kind="bullet"],
.df-rte-preview-inline [data-df-marker-kind="bullet"]{
min-width:1.4em;
}
.df-rte-editor [data-df-marker-kind="number"],
.df-richtext-bubble [data-df-marker-kind="number"],
.df-rte-preview-inline [data-df-marker-kind="number"]{
min-width:2.4em;
text-align:right;
}
.df-rte-preview-inline,
.df-richtext-bubble{
width:100%;
border-radius:9px;
border:1px solid #bfc9d6;
background:#fff;
padding:8px 10px;
color:#0f172a;
overflow:auto;
overflow-wrap:anywhere;
min-height:64px;
}
.df-richtext-bubble p,
.df-richtext-bubble div,
.df-richtext-bubble ul,
.df-richtext-bubble ol,
.df-rte-preview-inline p,
.df-rte-preview-inline div,
.df-rte-preview-inline ul,
.df-rte-preview-inline ol{
margin:0 0 86
}
.df-richtext-bubble > :last-child,
.df-rte-preview-inline > :last-child{
margin-bottom:0;
}
.df-rte-editor u,
.df-richtext-bubble u,
.df-rte-preview-inline u,
.df-rte-editor [style*="text-decoration: underline"],
.df-richtext-bubble [style*="text-decoration: underline"],
.df-rte-preview-inline [style*="text-decoration: underline"],
.df-rte-editor [style*="text-decoration-line: underline"],
.df-richtext-bubble [style*="text-decoration-line: underline"],
.df-rte-preview-inline [style*="text-decoration-line: underline"],
.df-rte-editor [style*="underline"],
.df-richtext-bubble [style*="underline"],
.df-rte-preview-inline [style*="underline"]{
text-decoration-color:#000000 !important;
}
.field-card.richtext-card .field-control{
padding:0;
border:none;
background:transparent;
}
.field-card.richtext-card{ position: relative; z-index: 6; }
.field-card.richtext-card .field-top{
margin: 0 !important;
padding: 0 !important;
border-bottom: none !important;
height: 0 !important;
min-height: 0 !important;
}
.field-card.richtext-card .field-label-row{ display:none !important; }
.field-card.richtext-card .field-actions{
position:absolute !important;
top: 8px;
right: 8px;
}
.field-card.richtext-card .df-richtext-bubble{
margin-top: 18px;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
.field-card.richtext-card .resize-handle{
margin-top:10px;
}
/* Keep the row-pin overlay from showing through rich text/header cards. */
.field-card.richtext-card{
isolation:isolate;
}
.field-card.richtext-card::before{
content:"";
position:absolute;
left:12px;
right:12px;
top:10px;
height:24px;
background: var(--card, #ffffff);
border-radius:10px 10px 0 0;
pointer-events:none;
z-index:1;
}
.field-card.richtext-card .field-top,
.field-card.richtext-card .field-control,
.field-card.richtext-card .field-actions,
.field-card.richtext-card .resize-handle{
position:relative;
z-index:2;
}
/* Employee Property modals — macOS Settings layout (scrollable + compact) */
.ep-modal-overlay{
display:none;
position:fixed;
inset:0;
z-index:9999;
align-items:flex-start;
justify-content:center;
padding: 8px 12px 8px;
overflow-y:auto;
overscroll-behavior:contain;
}
.ep-modal-overlay.open{display:flex}
.ep-modal{
margin:0;
padding:0;
max-width:920px;
width:calc(100% - 24px);
max-height:calc(100vh - 16px);
display:flex;
flex-direction:column;
overflow:hidden;
}
.ep-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px 12px;
border-bottom:1px solid rgba(60,60,67,.14);
}
.ep-modal-title{font-size:14px;font-weight:800;color:#0f172a}
.ep-modal-header .icon-btn{
width:26px;
height:26px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px !important;
padding:0 !important;
}
.ep-modal-body{
padding:14px 16px 14px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.ep-modal-footer{
padding:12px 16px 14px;
border-top:1px solid rgba(60,60,67,.14);
background:rgba(245,245,247,.72);
display:flex;
justify-content:flex-end;
gap:10px;
}
.ep-modal input,.ep-modal select{
padding:9px 11px;
border-radius:11px;
font-size:11px;
}
.ep-modal .binding-item-row{
padding:10px 10px !important;
margin:10px 0 !important;
}
.ep-modal .panel-sub{margin:0 !important}
/* Modal positioning: align to top of iframe (below parent navbar line) */
.ep-modal-overlay{
padding-top: 0 !important;
}
.ep-modal-overlay.open{
display: flex !important;
}
.ep-modal{
margin: 0 auto !important;
}
/* Union Grid Columns modal — compact macOS table */
#ugColsModalOverlay .ep-modal{ max-width: 760px; }
#ugColsModalOverlay .ep-modal-body{ padding-top:12px; }
#ugColsModalOverlay .panel-sub{ color: rgba(60,60,67,.78); font-size: 12px; margin: 0 0 12px 0 !important; }
#ugColsModalOverlay .ug-cols-table{
border: 1px solid rgba(60,60,67,.14);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
#ugColsModalOverlay .ug-cols-table table{ width:100%; border-collapse:separate; border-spacing:0; }
#ugColsModalOverlay .ug-cols-table thead th{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .02em;
color: rgba(60,60,67,.78);
background: rgba(245,245,247,.72);
padding: 10px 12px;
position: sticky;
top: 0;
z-index: 2;
border-bottom: 1px solid rgba(60,60,67,.14);
}
#ugColsModalOverlay .ug-cols-table tbody td{
padding: 10px 12px;
border-bottom: 1px solid rgba(60,60,67,.10);
vertical-align: middle;
}
#ugColsModalOverlay .ug-cols-table tbody tr:last-child td{ border-bottom: none; }
#ugColsModalOverlay .ug-col-name{ width: 38%; }
#ugColsModalOverlay .ug-col-title{ font-weight: 700; color:#0f172a; font-size: 13px; }
#ugColsModalOverlay .ug-col-meta{ font-size: 12px; color: rgba(60,60,67,.64); margin-top: 2px; }
#ugColsModalOverlay .ug-col-req{ width: 18%; text-align: right; }
#ugColsModalOverlay input[data-ugc-caption]{
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
height: 34px;
}
#ugColsModalOverlay .toggle-chip{ padding: 6px 10px; }
/* --- Right inspector: reduce card soup; keep flat on light grey surface --- */
.card.right-panel{
background: rgba(15,23,42,.04) !important; /* grey outer */
border: none !important;
box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
}
.card.right-panel .right-panel-inner{
background: rgba(255,255,255,.92) !important; /* single white inner */
border: 1px solid rgba(15,23,42,.06) !important;
box-shadow: none !important;
}
.card.right-panel .prop-section{
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 12px 0 !important;
margin: 0 !important;
}
.card.right-panel .prop-section:first-child{ border-top: none !important; }
.card.right-panel .prop-section + .prop-section{ border-top: 1px solid rgba(15,23,42,.05) !important; }
.card.right-panel .field-summary-card{
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.card.right-panel .field-summary-title{
font-size: 15px !important;
font-weight: 650 !important;
}
.card.right-panel .ok-box{
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
color: rgba(15,23,42,.62) !important;
}
.card.right-panel .rules-box,
.card.right-panel .usedclass-item,
.card.right-panel .sim-box,
.card.right-panel .validation-item{
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
/* Option Filters editor (multiple tags, ANDed) */
.df-filter-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.df-filter-title{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
font-weight:700;
color:rgba(15,23,42,.92);
}
.df-filter-title-icon,
.df-filter-action-icon{
width:14px;
height:14px;
stroke:currentColor;
fill:none;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
}
.df-filter-title-icon{
width:15px;
height:15px;
color:rgba(15,23,42,.58);
}
.df-filter-add-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:999px;
font-weight:600;
}
.df-filter-add-btn .df-filter-action-icon{
width:13px;
height:13px;
}
.df-filters-editor{
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 16px;
padding: 12px;
background: rgba(255,255,255,0.86);
}
.df-filter-list{
display:flex;
flex-direction:column;
gap:12px;
}
.df-filter-card{
border:1px solid rgba(15,23,42,.08);
border-radius:12px;
background:#fff;
padding:12px;
box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.df-filter-block + .df-filter-block{
margin-top:10px;
}
.df-filter-label{
display:block;
margin:0 0 6px;
font-size:10px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(15,23,42,.48);
}
.df-filters-editor input,
.df-filters-editor select{
width:100%;
}
.df-filter-custom-name{
margin-top:8px;
}
.df-filter-caption{
margin-top:6px;
font-size:12px;
color:rgba(15,23,42,.58);
}
.df-filter-caption code{
font-size:12px;
}
.df-filter-rule-row{
display:grid;
grid-template-columns:minmax(120px, .8fr) minmax(0, 1.6fr);
gap:8px;
align-items:center;
}
.df-filter-actions-row{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:12px;
}
.df-filter-icon-btn{
width:30px;
height:30px;
color:rgba(15,23,42,.68);
background:rgba(238,242,247,.78);
border:1px solid rgba(15,23,42,.08);
}
.df-filter-icon-btn:hover{
background:#e7edf5;
}
.df-filter-empty{
display:grid;
gap:4px;
padding:6px 2px;
color:rgba(15,23,42,.58);
font-size:11px;
}
@media (max-width: 560px){
.df-filter-section-head{
align-items:flex-start;
flex-direction:column;
}
.df-filter-add-btn{
width:100%;
justify-content:center;
}
.df-filter-rule-row{
grid-template-columns:1fr;
}
.df-filter-actions-row{
justify-content:flex-start;
}
}
/* Extracted from app.html style block 2 */
:root {
--bg: #f4f6f8;
--card: #ffffff;
--line: #d7dde5;
--line-soft: #e8edf3;
--text: #1f2937;
--muted: #6b7280;
--blue: #2b6dad;
--blue-dark: #245b8e;
--blue-soft: #eef5fc;
--section: #3b6ea5;
--preview: #f3f4f6;
--danger: #d9534f;
--danger-dark: #b63c38;
--success: #198754;
--success-dark: #146c43;
--ghost: #eef2f7;
--drop: #d8e8fb;
--warning-bg: #fff7ed;
--warning-line: #fed7aa;
--warning-text: #9a3412;
--ok-bg: #ecfdf5;
--ok-line: #a7f3d0;
--ok-text: #065f46;
--soft-red: #fff1f2;
--soft-red-line: #fecdd3;
--soft-red-text: #9f1239;
--shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); }
body {
margin: 0;
padding: 14px 14px 74px; background: var(--bg);
font-family: Segoe UI, Arial, sans-serif;
color: var(--text);
}
.app {
max-width: 1920px;
margin: 0 auto;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 14px;
min-height: 100vh;
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow);
overflow: hidden;
}
.top-card { padding: 16px 18px; }
.top-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
h1 { margin: 0; font-size: 30px; line-height: 1.05; }
h2 { margin: 0; font-size: 16px; }
.subtext { margin: 8px 0 0; font-size: 13px; color: var(--muted); max-width: 1000px; }
.panel-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
background: var(--blue-soft);
color: var(--blue-dark);
border: 1px solid #d7e5f5;
font-size: 12px;
font-weight: 700;
}
.toolbar {
display: grid;
grid-template-columns: 1.1fr 0.7fr 0.42fr repeat(10, auto);
gap: 10px;
margin-top: 16px;
align-items: end;
}
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label { font-size: 12px; font-weight: 700; color: #334155; }
input, select, textarea {
width: 100%;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13px;
color: var(--text);
background: #fff;
}
textarea { min-height: 98px; resize: vertical; }
button {
border: none;
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
color: #fff;
background: var(--blue);
transition: .18s ease;
white-space: nowrap;
}
button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.secondary { background: #667085; }
.secondary:hover { background: #58657a; }
.success { background: var(--success); }
.success:hover { background: var(--success-dark); }
.danger { background: var(--danger); }
.danger:hover { background: var(--danger-dark); }
.ghost-btn { background: var(--ghost); color: var(--text); border: 1px solid var(--line); }
.ghost-btn:hover { background: #dfe7f1; }
.main {
display: grid;
grid-template-columns: 300px minmax(520px, 1fr) 380px;
gap: 14px;
min-height: calc(100vh - 220px);
}
.panel-head {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
background: #fbfcfd;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.panel-body { padding: 14px 16px; }
.left-body, .right-body { display: flex; flex-direction: column; gap: 12px; }
.scroll { max-height: calc(100vh - 332px); overflow: auto; padding-right: 4px; }
.topic-group, .tree-box, .prop-section, .rules-box, .usedclass-item, .sim-box, .validation-item {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}
.tree-box { padding: 12px; }
.topic-header {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: none;
background: #f8fafc;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 12px;
cursor: pointer;
}
.topic-header > span:first-child {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.topic-header:hover { background: #f1f5f9; transform: none; }
.topic-count {
flex: 0 0 auto;
min-width: 26px;
text-align: center;
font-size: 10px;
color: var(--muted);
background: #fff;
border: 1px solid var(--line);
padding: 2px 6px;
border-radius: 999px;
line-height: 1.2;
}
.topic-items { display: none; flex-direction: column; gap: 2px; padding: 6px 8px 8px; }
.topic-group.open .topic-items { display: flex; }
.binding-item {
border: 1px solid var(--line-soft);
border-radius: 10px;
background: #fff;
padding: 8px 10px;
cursor: grab;
transition: .14s ease;
}
.binding-item:hover { background: #fafcff; border-color: #cfe0f2; transform: translateY(-1px); }
.binding-item.compact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
}
.binding-main {
min-width: 0;
flex: 1;
font-size: 12px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.binding-subtle {
font-size: 10px;
color: var(--muted);
white-space: nowrap;
flex: 0 0 auto;
}
.binding-label { font-size: 13px; font-weight: 700; }
.binding-path { margin-top: 4px; font-size: 11px; color: var(--muted); word-break: break-word; }
.binding-results-title {
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
margin: 2px 0 6px;
}
.binding-badges, .field-meta, .tiny-actions, .quick-row, .rule-tags, .canvas-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
padding: 4px 7px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #475569;
}
.mini-badge.blue { background: var(--blue-soft); color: var(--blue-dark); border-color: #d7e5f5; }
.mini-badge.warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.mini-badge.danger { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.mini-badge.ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.canvas { background: var(--preview); }
.canvas-toolbar {
display: none;
}
.section-card {
background: #fff;
border: 1px solid transparent;
border-radius: 16px;
overflow: hidden;
margin-bottom: 12px;
transition: .14s ease;
}
.section-card:hover { border-color: var(--line-soft); box-shadow: none; }
.section-card.selected{ border-color: var(--blue); box-shadow: none; }
.section-card.dragging { opacity: .55; }
.section-head {
background: var(--section);
color: #fff;
padding: 12px 14px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
cursor: grab;
}
.section-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.section-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.section-sub { font-size: 11px; color: rgba(255,255,255,.84); }
.section-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.section-actions button {
padding: 6px 9px;
font-size: 11px;
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.25);
}
.section-actions button:hover { background: rgba(255,255,255,.28); }
.section-actions .delete-btn { background: rgba(217,83,79,.94); }
.section-actions .delete-btn:hover { background: rgba(182,60,56,.98); }
.section-body { padding: 14px; }
.section-inline-help {
border: 1px dashed #d7e5f5;
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 12px;
background: #f8fbff;
font-size: 12px;
color: #3b4f68;
}
.column-grid { display: grid; gap: 12px; }
.column-box {
min-height: 120px;
border: none;
border-radius: 0;
background: transparent;
padding: 0;
transition: .16s ease;
position: relative;
}
.column-box.drag-over {
background: rgba(43,109,173,.06);
outline: 1px dashed var(--blue);
outline-offset: 6px;
border-radius: 10px;
}
.column-box.is-empty {
min-height: 120px;
}
.column-title {
display: none;
}
.field-card {
border: 1px solid transparent;
border-radius: 14px;
background: #fff;
padding: 10px;
margin-bottom: 9px;
cursor: grab;
transition: .14s ease;
position: relative;
}
.field-card:last-child { margin-bottom: 0; }
.field-card:hover { border-color: var(--line-soft); box-shadow: none; }
.field-card.selected { border-color: var(--blue); box-shadow: none; }
.field-card.dragging { opacity: .45; }
.field-card{ z-index: 0; }
.field-card.menu-open{ z-index: 1000; }
.field-card .field-actions{ z-index: 1001; }
.field-card .kebab-menu{ z-index: 1002; }
/* DF-like subheader panel (PanelSubheader / IVPanel) */
.field-card.subheader-card{
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 10px 0 12px;
overflow: visible;
cursor: grab;
}
.field-card.subheader-card:hover{
box-shadow: none;
}
.field-card.subheader-card.selected{
border: none;
box-shadow: none;
}
.field-card.subheader-card .field-top{
background: transparent;
padding: 0 0 8px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(17,24,39,.35) !important;
}
/* Rich text headers also carry IVPanel, so stop subheader field-top from drawing a divider line. */
.field-card.richtext-card.subheader-card .field-top{
background: transparent;
padding: 0 !important;
margin: 0 !important;
border-bottom: none !important;
min-height: 0 !important;
height: 0 !important;
}
/* Label-less compact grids: keep a clean single-row shell with no internal scroll chrome. */
.field-card.compact-grid-card{
position:relative;
display:flex;
flex-direction:column;
min-height:0;
}
.field-card.compact-grid-card .field-top{
position:absolute;
top:8px;
right:8px;
left:auto;
width:auto;
z-index:2;
margin:0 !important;
padding:0 !important;
min-height:0 !important;
height:auto !important;
justify-content:flex-end;
pointer-events:none;
}
.field-card.compact-grid-card .field-label-row{display:none !important;}
.field-card.compact-grid-card .field-actions{
pointer-events:auto;
opacity:1;
}
.field-card.compact-grid-card .field-control{
flex:1 1 auto;
min-height:0;
margin-top:0;
overflow:visible !important;
}
.field-card.compact-grid-card .epgrid-preview,
.field-card.compact-grid-card .epgrid-shell{
overflow:visible !important;
}
.field-card.compact-grid-card .resize-handle{
display:block !important;
position:absolute;
right:10px;
bottom:10px;
margin-top:0 !important;
z-index:3;
}
.field-card.subheader-card .field-label{
font-size: 12px;
font-weight: 700;
color: rgba(17,24,39,.95);
letter-spacing: .2px;
}
.field-card.subheader-card .kebab-btn{
background: #f3f6fb;
border: 1px solid #dbe3ec;
}
.field-card.inline-help-card{
overflow: visible;
z-index: 2;
border-style: dashed;
background: #f8fbff;
padding: 10px 12px;
}
.field-card.inline-help-card .field-label{
font-weight: 800;
color: #4b5563;
display: none;
}
.field-card.inline-help-card .field-top{
display: none;
}
.field-card.inline-help-card .field-control{
width: 100%;
}
.df-inline-help-bubble{
width: 100%;
min-height: 22px;
color: #6b7280;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.subheader-inline-help{
margin-top: 6px;
}
/* Inline help should use the same selectable shell/actions as other field cards. */
.field-card.inline-help-card{
position: relative;
border-style: solid;
background: #fff;
padding: 10px;
}
.field-card.inline-help-card .field-top{
display: flex !important;
position: absolute;
top: 8px;
right: 8px;
left: auto;
width: auto;
z-index: 2;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
border-bottom: none !important;
justify-content: flex-end;
pointer-events: none;
}
.field-card.inline-help-card .field-label-row{
display: none !important;
}
.field-card.inline-help-card .field-actions{
position: static !important;
margin: 0 !important;
pointer-events: auto;
opacity: 1;
}
.field-card.inline-help-card .field-control{
width: 100%;
min-height: 24px;
margin-top: 0 !important;
padding-right: 34px;
}
.field-card.inline-help-card .df-inline-help-bubble{
display: block;
width: 100%;
min-height: 22px;
padding-top: 2px;
}
/* --- Compact grid tweaks (reduce vertical gaps) --- */
.phone-grid-inner{
gap: 2px;
align-items: start;
background: #f3f4f6;
position: relative;
}
.field-card.union-composite-member.union-composite-active,
.field-card.union-composite-member.union-composite-active:hover,
.field-card.union-composite-member.selected,
.field-card.union-composite-member.selected:hover{
border-color: transparent !important;
box-shadow: none !important;
}
.field-card.union-composite-member.union-composite-active .field-actions,
.field-card.union-composite-member.selected .field-actions,
.field-card.union-composite-member:not(.union-composite-anchor) .field-actions{
opacity:0 !important;
pointer-events:none !important;
}
.field-card.union-composite-member .resize-handle{
display:none !important;
}
.union-composite-selection-outline{
position:absolute;
pointer-events:none;
border:1px solid var(--blue);
border-radius:12px;
box-shadow:none;
box-sizing:border-box;
z-index:8;
}
.union-composite-selection-outline .union-composite-actions,
.union-composite-selection-outline .union-composite-actions *{
pointer-events:auto;
}
.union-composite-actions{
position:absolute;
top:10px;
right:12px;
z-index:2;
display:flex;
align-items:flex-start;
}
.union-composite-actions{
z-index:1001;
}
.union-composite-actions.menu-open{
z-index:1000;
}
.union-composite-actions .kebab-btn,
.union-composite-actions .kebab-btn:hover,
.union-composite-actions .kebab-btn:focus,
.union-composite-actions .kebab-btn:focus-visible,
.union-composite-actions .kebab-btn:active{
-webkit-appearance:none !important;
appearance:none !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
outline:none !important;
color:rgba(71,85,105,.96) !important;
line-height:1 !important;
cursor:pointer !important;
opacity:1 !important;
transform:none !important;
}
.union-composite-actions .kebab-btn .kebab-dots{
display:block;
font-size:14px;
font-weight:600;
line-height:1;
letter-spacing:0;
transform:none;
}
.union-composite-actions .kebab-menu{
position:absolute;
right:-4px;
top:calc(100% + 8px);
min-width:52px;
width:52px;
background:rgba(255,255,255,.98);
border:1px solid rgba(203,213,225,.92);
box-shadow:0 12px 24px rgba(15,23,42,.12);
border-radius:16px;
padding:8px 6px;
z-index:1002;
}
.union-composite-actions .kebab-item{
width:100%;
height:38px;
padding:0;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
border:1px solid transparent;
background:transparent;
color:var(--text);
border-radius:12px;
cursor:pointer;
}
.union-composite-actions .kebab-item + .kebab-item{
margin-top:4px;
}
.union-composite-actions .kebab-item:hover{
background:rgba(148,163,184,.10);
border-color:transparent;
}
.union-composite-actions .kebab-item:focus-visible{
outline:none;
background:rgba(148,163,184,.12);
border-color:rgba(148,163,184,.16);
}
.union-composite-actions .kebab-item svg{
width:15px;
height:15px;
display:block;
color:rgba(71,85,105,.92);
}
.union-composite-actions .kebab-item svg,
.union-composite-actions .kebab-item svg *{
fill:none;
stroke:currentColor;
stroke-width:1.85;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.union-composite-actions .kebab-item.danger svg{
color:#ef4444;
}
.field-card label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 5px; color: #374151; }
.field-control { margin-top: 4px; }
.field-control input:not([type="checkbox"]):not([type="radio"]),
.field-control select,
.field-control textarea {
width: 100%;
max-width: 240px;
padding: 4px 8px;
font-size: 12px;
line-height: 1.2;
color: #4b5563;
border: 1px solid #aeb7c4;
border-radius: 2px;
background: linear-gradient(#ffffff, #ededed);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}
.field-control input:not([type="checkbox"]):not([type="radio"]),
.field-control select {
min-height: 30px;
height: 30px;
}
.field-control textarea {
min-height: 64px;
padding: 6px 8px;
border-radius: 2px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.field-control input:not([type="checkbox"]):not([type="radio"]):focus,
.field-control select:focus,
.field-control textarea:focus{
outline: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
border-color: #7f8a98;
}
.checkbox-row { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.checkbox-row input[type="checkbox"] { width: auto; max-width: none; margin: 0; accent-color: var(--blue); cursor: pointer; }
.field-card.inline-checkbox-card{
position: relative;
padding-top: 0;
}
.field-card.inline-checkbox-card .field-top{
position: absolute;
top: 4px;
right: 8px;
width: auto;
z-index: 2;
padding: 0 !important;
margin: 0 !important;
border-bottom: none !important;
min-height: 0 !important;
height: auto !important;
justify-content: flex-end;
}
.field-card.inline-checkbox-card .field-control{
margin-top: 0;
padding-top: 0;
padding-right: 28px;
}
.field-card.inline-checkbox-card .checkbox-row-inline-label{
align-items: flex-start;
gap: 8px;
min-height: 0;
flex-wrap: nowrap;
}
.field-card.inline-checkbox-card .checkbox-row-inline-label input[type="checkbox"]{
margin-top: 2px;
flex: 0 0 auto;
}
.field-card.inline-checkbox-card .checkbox-inline-label{
display: block;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
letter-spacing: normal;
color: #374151;
}
.field-quick-actions {
position: absolute;
top: 8px;
right: 8px;
display: none;
gap: 5px;
flex-wrap: wrap;
justify-content: flex-end;
}
.field-card:hover .field-quick-actions,
.field-card.selected .field-quick-actions { display: flex; }
.field-quick-actions button { padding: 4px 7px; font-size: 10px; }
.helper { font-size: 12px; color: var(--muted); }
.empty-drop, .empty-selected { font-size: 13px; color: var(--muted); padding: 10px 2px 2px; }
.empty-drop { display: none; }
.empty-selected {
border: 1px dashed var(--line);
background: #fbfcfe;
border-radius: 14px;
padding: 14px;
}
.prop-section { padding: 12px; }
.field-summary-card {
border: 1px solid var(--line-soft);
border-radius: 14px;
background: #fbfdff;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.field-summary-title {
font-size: 16px;
font-weight: 800;
line-height: 1.2;
}
.field-summary-sub {
font-size: 12px;
color: var(--muted);
word-break: break-word;
}
.toggle-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.toggle-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
font-size: 12px;
font-weight: 700;
}
.toggle-chip input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--blue);
}
/* Button variant for chip-like actions (e.g., Edit Grid Columns…) */
button.toggle-chip{
appearance:none;
-webkit-appearance:none;
cursor:pointer;
font-family: inherit;
}
button.toggle-chip.btn-chip:hover{ background:#f8fafc; }
button.toggle-chip.btn-chip:active{ transform: translateY(1px); }
.editor-tabs{
display: flex;
gap: 8px;
align-items: center;
margin-top: 10px;
padding: 0;
background: transparent;
border: 0;
}
.editor-tabs::before{ content: none; }
.editor-tab{
appearance: none;
position: relative;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.86);
color: rgba(15,23,42,.78);
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 400; /* remove bold */
letter-spacing: .01em;
line-height: 1;
min-height: 32px;
width: auto;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-tab:hover{ background: rgba(255,255,255,.94); transform: none; }
.editor-tab.active{
background: #ffffff;
color: rgba(21,76,128,.96);
border-color: rgba(43,109,173,.22);
box-shadow: 0 1px 0 rgba(15,23,42,.06), inset 0 0 0 1px rgba(43,109,173,.14);
font-weight: 500;
}
.editor-tabs.editor-tabs-secondary{
margin-top: 8px;
}
.editor-tabs.editor-tabs-secondary .editor-tab{
padding: 7px 12px;
min-height: 32px;
font-weight: 400;
}
/* Force Automation Rules / Validation Builder to always be side-by-side */
.editor-tabs.editor-tabs-secondary{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.editor-tabs.editor-tabs-secondary .editor-tab{
width: 100%;
flex: none;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-pane {
display: none;
margin-top: 10px;
border-top: 1px solid var(--line-soft);
padding-top: 12px;
}
.editor-pane.active { display: block; }
.editor-pane[data-pane="advanced"] {
margin-top: 0;
border-top: 0;
padding-top: 0;
}
.advanced-setting-list {
display: grid;
gap: 12px;
margin-top: 10px;
}
.advanced-setting-card {
border: 1px solid rgba(148,163,184,.26);
border-radius: 16px;
background: rgba(255,255,255,.72);
padding: 12px;
display: grid;
gap: 10px;
}
.advanced-setting-head {
display: grid;
gap: 4px;
}
.advanced-setting-title {
font-size: 13px;
font-weight: 800;
color: #1e293b;
}
.advanced-setting-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.advanced-setting-actions button {
min-width: 88px;
}
.df-inline-action-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
min-height:40px;
padding:8px 14px;
border-radius:13px;
font-size:11px;
font-weight:600;
line-height:1;
letter-spacing:-0.01em;
color:rgba(15,23,42,.82);
background:rgba(255,255,255,.88);
border:1px solid rgba(15,23,42,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 1px 1px rgba(15,23,42,.03);
}
.df-inline-action-btn:hover{
background:rgba(244,247,251,.98);
color:rgba(15,23,42,.92);
transform:none;
}
.df-inline-action-btn:focus-visible{
outline:none;
border-color:rgba(0,122,255,.48);
box-shadow:0 0 0 3px rgba(0,122,255,.14), inset 0 1px 0 rgba(255,255,255,.88);
}
.df-inline-action-btn .df-inline-action-icon{
width:14px;
height:14px;
flex:0 0 auto;
stroke:currentColor;
fill:none;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.df-inline-action-btn-danger{
color:#b42318;
background:rgba(255,248,248,.94);
border-color:rgba(180,35,24,.16);
}
.df-inline-action-btn-danger:hover{
background:rgba(254,240,240,.98);
color:#912018;
}
.df-inline-action-btn span{
white-space:nowrap;
}
.advanced-setting-actions .df-inline-action-btn,
.rule-actions .df-inline-action-btn,
.validation-actions .df-inline-action-btn,
.quick-row .df-inline-action-btn{
min-width:0;
}
#dfFloatingInspector .advanced-setting-actions,
#dfFloatingInspector .rule-actions,
#dfFloatingInspector .validation-actions,
#dfFloatingInspector .quick-row{
gap:10px;
}
#dfFloatingInspector .quick-row{
align-items:center;
margin-bottom:10px;
}
#dfFloatingInspector .advanced-setting-actions .df-inline-action-btn,
#dfFloatingInspector .rule-actions .df-inline-action-btn,
#dfFloatingInspector .validation-actions .df-inline-action-btn,
#dfFloatingInspector .quick-row .df-inline-action-btn{
min-height:38px;
border-radius:12px;
padding:8px 14px;
font-size:11px;
}
.right-panel .panel-body { padding: 12px; }
/* macOS-like controls in the right inspector (Basic) */
.right-panel .prop-grid input,
.right-panel .prop-grid select,
.right-panel .prop-grid textarea {
padding: 9px 12px;
border-radius: 12px;
border: 1px solid rgba(148,163,184,.45);
background: rgba(255,255,255,.78);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.right-panel .prop-grid input:focus,
.right-panel .prop-grid select:focus,
.right-panel .prop-grid textarea:focus {
outline: none;
border-color: rgba(0,122,255,.65);
box-shadow: 0 0 0 3px rgba(0,122,255,.16), inset 0 1px 0 rgba(255,255,255,.75);
background: rgba(255,255,255,.92);
}
.right-panel .prop-grid select {
height: 32px;
padding: 0 10px;
border-radius: 10px;
font-size: 13px;
line-height: 32px;
}
.right-panel .prop-section {
padding: 10px;
border-radius: 12px;
}
.right-panel .field-summary-card {
padding: 12px;
border-radius: 14px;
}
.inline-help-card {
border: 1px dashed #cfe0f2;
border-radius: 14px;
background: #f8fbff;
margin-bottom: 12px;
overflow: hidden;
}
.inline-help-head {
padding: 9px 10px;
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
background: #f2f8ff;
border-bottom: 1px dashed #d7e5f5;
}
.inline-help-title {
font-size: 12px;
font-weight: 800;
color: #23415f;
}
.inline-help-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.inline-help-actions button {
padding: 5px 8px;
font-size: 11px;
border-radius: 8px;
background: #fff;
color: #23415f;
border: 1px solid #d7e5f5;
}
.inline-help-actions button:hover {
background: #eaf3ff;
}
.inline-help-body {
padding: 10px 12px;
font-size: 12px;
color: #3b4f68;
line-height: 1.45;
}
.right-panel .toggle-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.right-panel .toggle-chip {
width: 100%;
justify-content: flex-start;
}
.right-panel .editor-pane .two-col,
.right-panel .advanced-toggle .two-col,
.right-panel #validationBuilder .two-col,
.right-panel .summary-detail-list { display:grid; gap:6px; font-size:11px; color:var(--text); margin-top:10px; }
.summary-detail-list strong { color:#5b6474; font-weight:800; }
.summary-chip-row {
grid-template-columns: 1fr;
}
.right-panel .field-group input,
.right-panel .field-group select,
.right-panel .field-group textarea {
max-width: 100%;
}
.right-panel .tiny-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.right-panel .tiny-actions button {
width: 100%;
padding: 9px 10px;
}
.right-panel .logic-preview-box {
padding: 9px 10px;
}
.right-panel .prop-title {
margin-bottom: 8px;
}
.right-panel .editor-pane {
margin-top: 8px;
padding-top: 10px;
}
/* Compact selected-field editor */
.right-panel .field-summary-card {
padding: 10px;
gap: 6px;
}
.right-panel .field-summary-title {
font-size: 15px;
line-height: 1.15;
}
.right-panel .field-summary-sub {
font-size: 11px;
}
.right-panel .summary-detail-list {
gap: 2px;
font-size: 12px;
margin-top: 8px;
}
.right-panel .toggle-chip {
padding: 5px 8px;
font-size: 11px;
min-height: 34px;
}
.right-panel .editor-tabs {
flex-wrap: wrap;
gap: 6px;
}
.right-panel .editor-tab {
padding: 7px 6px;
font-size: 11px;
border-radius: 10px;
}
.right-panel .field-group {
gap: 2px;
}
.right-panel .field-group label {
font-size: 11px;
}
.right-panel .field-group input,
.right-panel .field-group select,
.right-panel .field-group textarea {
padding: 8px 10px;
font-size: 12px;
border-radius: 9px;
}
.right-panel .logic-preview-box {
padding: 8px 10px;
font-size: 11px;
}
.summary-detail-list { display:grid; gap:6px; font-size:11px; color:var(--text); margin-top:10px; }
.summary-detail-list strong { color:#5b6474; font-weight:800; }
.summary-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.summary-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
border: 1px solid var(--line);
background: #fff;
padding: 5px 8px;
border-radius: 999px;
}
.summary-chip strong { color: #334155; }
.logic-preview-box {
border: 1px dashed #d7e5f5;
background: #f8fbff;
border-radius: 12px;
padding: 10px 12px;
font-size: 12px;
color: #3b4f68;
}
.advanced-toggle {
margin-top: 10px;
border-top: 1px solid var(--line-soft);
padding-top: 10px;
}
.advanced-toggle summary {
cursor: pointer;
font-size: 12px;
font-weight: 700;
color: #334155;
}
.advanced-toggle summary:hover { color: var(--blue-dark); }
.prop-title { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.prop-grid { display: grid; gap: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ok-box, .warning-box, .error-box {
border-radius: 12px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.45;
}
.ok-box { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-text); }
.warning-box { background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--warning-text); }
.error-box { background: var(--soft-red); border: 1px solid var(--soft-red-line); color: var(--soft-red-text); }
.tree-list { display: flex; flex-direction: column; gap: 8px; }
.tree-section {
border: 1px solid var(--line-soft);
border-radius: 12px;
background: #fbfdff;
padding: 10px;
}
.tree-section.selected { border-color: var(--blue); background: #f8fbff; }
.tree-head {
display:none;
display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.tree-title { font-size: 13px; font-weight: 800; cursor: pointer; }
.tree-fields { display: grid; gap: 6px; }
.tree-field {
padding: 7px 9px;
border-radius: 10px;
border: 1px solid #e8edf3;
font-size: 12px;
cursor: pointer;
background: #fff;
}
.tree-field.selected { border-color: var(--blue); background: var(--blue-soft); }
.rule-card, .validation-item, .sim-box, .xml-box {
border: 1px solid var(--line-soft);
border-radius: 12px;
background: #fbfdff;
padding: 10px;
}
.rule-card { margin-top: 8px; }
.rule-summary, .validation-summary { font-size: 12px; line-height: 1.45; }
.rule-summary strong, .validation-summary strong { color: #0f172a; }
.rule-actions, .validation-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rule-actions button, .validation-actions button { padding: 5px 8px; font-size: 11px; }
.xml-box textarea {
min-height: 240px;
font-family: Consolas, monospace;
font-size: 12px;
line-height: 1.45;
background: #0f172a;
color: #dbeafe;
border: 1px solid #1e293b;
}
.hidden-input { display: none; }
@media (max-width: 1600px) {
.main { grid-template-columns: 290px 1fr; }
.right-panel { grid-column: 1 / -1; }
}
@media (max-width: 1300px) {
.toolbar { grid-template-columns: 1fr 1fr 1fr 1fr; }
.main { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
body { padding: 8px; }
h1 { font-size: 24px; }
.toolbar { grid-template-columns: 1fr 1fr; }
.section-head { flex-direction: column; align-items: flex-start; }
.two-col { grid-template-columns: 1fr; }
.editor-tabs { flex-wrap: wrap;
}
.right-panel .toggle-row, .right-panel .tiny-actions { grid-template-columns: 1fr; }
}
/* Selected Field XML snippet (blended) */
/* Selected Field XML snippet (quiet, macOS-ish) */
.sf-snippet{
margin-top: 10px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 12px;
overflow: hidden;
background: rgba(255,255,255,.70);
}
.sf-snippet-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
background: transparent;
border-bottom: 1px solid rgba(15,23,42,.06);
color: rgba(15,23,42,.72);
font-size: 12px;
font-weight: 500;
}.sf-snippet-head .btn-mini{
border: 1px solid var(--line);
background: var(--card);
color: var(--text);
padding: 6px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
}
.sf-snippet-body{
margin:0;
padding: 10px 12px;
max-height: 160px;
overflow:auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.35;
color: #0f172a;
white-space: pre;
}
/* --- UX polish: compact selected field header, chips, and tabs --- */
.field-summary-card { gap: 6px; }
.field-summary-title { font-size: 15px; }
.field-summary-sub { font-size: 11px; margin-top: -2px; }
.toggle-row { gap: 10px; margin-top: 4px; }
.toggle-chip { padding: 4px 8px; font-size: 11px; font-weight: 700; }
.toggle-chip input[type="checkbox"] { transform: scale(.95); }
.editor-tabs { gap: 10px; margin-top: 6px; }
.editor-mode-block{ margin-top: 10px; }
.editor-sections-block{ margin-top: 12px; }
.editor-group-label{
margin: 0 2px 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: rgba(15,23,42,.52);
}
.editor-mode-tabs{
margin-top: 0;
padding: 4px;
gap: 4px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 16px;
background: rgba(248,250,252,.78);
}
.editor-mode-tabs .editor-tab{
padding: 6px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: rgba(15,23,42,.62);
background: transparent;
border-color: transparent;
box-shadow: none;
}
.editor-mode-tabs .editor-tab.active{
background: rgba(255,255,255,.92);
color: rgba(15,23,42,.92);
border-color: rgba(15,23,42,.10);
box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.editor-sections-block .editor-tabs{ margin-top: 0; }
.editor-tabs-secondary{ margin-top: 0; }
.editor-tab { padding: 7px 8px; border-radius: 14px; }
.editor-mode-launchers{
display:inline-flex;
align-items:center;
gap:4px;
margin-top:0;
padding:4px;
border:1px solid rgba(15,23,42,.08);
border-radius:12px;
background:rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 1px 2px rgba(15,23,42,.05);
backdrop-filter:saturate(180%) blur(14px);
}
.editor-mode-trigger{
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:32px;
padding:0 12px;
border:0;
border-radius:9px;
background:transparent;
color:rgba(15,23,42,.68);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:-0.01em;
line-height:1;
box-shadow:none;
flex:0 0 auto;
}
.editor-mode-trigger:hover{
background:rgba(255,255,255,.60);
color:rgba(15,23,42,.84);
}
.editor-mode-trigger.active,
.editor-mode-trigger.open,
.editor-mode-trigger[aria-expanded="true"],
.editor-mode-trigger[data-visual-state="active"],
.editor-mode-trigger[data-visual-state="open"]{
background:rgba(255,255,255,.94);
color:rgba(15,23,42,.94);
box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06);
}
.editor-mode-launchers.menu-open .editor-mode-trigger[data-visual-state="inactive"]{
background:transparent !important;
color:rgba(15,23,42,.62) !important;
box-shadow:none !important;
border-color:transparent !important;
}
.editor-mode-launchers.menu-open .editor-mode-trigger[data-visual-state="inactive"]:hover{
background:transparent !important;
color:rgba(15,23,42,.62) !important;
}
.editor-mode-launchers.menu-open .editor-mode-trigger[data-visual-state="open"]{
background:rgba(255,255,255,.94) !important;
color:rgba(15,23,42,.94) !important;
box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06) !important;
}
.editor-mode-trigger-caret{
width:11px;
height:11px;
color:currentColor;
opacity:.56;
flex:0 0 auto;
}
.editor-mode-trigger.active .editor-mode-trigger-caret,
.editor-mode-trigger.open .editor-mode-trigger-caret,
.editor-mode-trigger[aria-expanded="true"] .editor-mode-trigger-caret{
opacity:.68;
}
.editor-mode-dropdown{
position:fixed;
z-index:100200;
min-width:188px;
padding:5px;
border-radius:12px;
border:1px solid rgba(15,23,42,.09);
background:rgba(255,255,255,.96);
box-shadow:0 14px 32px rgba(15,23,42,.12);
backdrop-filter:saturate(180%) blur(14px);
}
.editor-mode-dropdown[hidden]{ display:none !important; }
.editor-mode-dropdown-item{
width:100%;
appearance:none;
border:0;
background:transparent;
color:rgba(15,23,42,.74);
display:flex;
align-items:center;
justify-content:space-between;
gap:5px;
padding:8px 10px;
border-radius:9px;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:-0.01em;
line-height:1.2;
text-align:left;
cursor:pointer;
}
.editor-mode-dropdown-item:hover{
background:rgba(248,250,252,.88);
color:rgba(15,23,42,.88);
}
.editor-mode-dropdown-item-label{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.editor-mode-dropdown-item-icon{
width:12px;
height:12px;
color:rgba(15,23,42,.34);
flex:0 0 auto;
}
/* Phone grid layout */
.phone-frame{
border:1px solid var(--line);
border-radius:18px;
background: #f3f4f6;
padding:14px;
box-shadow: var(--shadow);
}
/* Hide popup-only editor markup in the right panel (kept for Floating Inspector). */
.right-panel #selectedFieldEditorPanel{ display:none !important; }
/* Popup-only: hide duplicate editor sections in the right panel (opened via popup chips instead). */
.right-panel #automationRulesSection,
.right-panel #validationBuilderSection{ display:none !important; }
/* Canvas wrapper: keep row ruler in a left gutter (outside scroll/clip) */
.phone-grid-wrap{
display:flex;
align-items:stretch;
width:100%;
}
.phone-grid-gutter{
flex: 0 0 42px;
position:relative;
}
.phone-grid{
flex: 1 1 auto;
min-width: 0; /* allow flex child to shrink without overflow */
}
/* ===== Row ruler (grid) ===== */
.df-row-ruler{
position:relative;
width:42px;
height:100%;
z-index:6;
overflow:hidden;
pointer-events:auto;
background: transparent;
font-variant-numeric: tabular-nums;
}
.df-row-ruler-inner{ position:relative; width:100%; height:100%; }
.df-row-ruler-item{
position:absolute;
left:0;
right:0;
width:auto;
appearance:none;
-webkit-appearance:none;
border:none;
border-radius:0;
background: transparent;
padding:5px 8px 0 6px;
font-size:11px;
font-weight: 500;
color: rgba(15,23,42,0.45);
line-height:1;
display:flex;
align-items:flex-start;
justify-content:flex-end;
user-select:none;
}
.df-row-ruler-item::after{
content:"";
position:absolute;
right:0;
top:0;
height:1px;
width:14px;
background: rgba(15,23,42,0.16);
}
.df-row-ruler-item::before{
content:"";
position:absolute;
right:0;
top:50%;
height:1px;
width:8px;
background: rgba(15,23,42,0.10);
}
.df-row-ruler-item{ cursor:pointer; }
.df-row-ruler-item.is-selected{
color: rgba(15,23,42,0.9);
}
.df-row-ruler-item.is-selected::after{
width:22px;
background: rgba(15,23,42,0.35);
}
.df-row-ruler-line{
position:absolute;
left:0;
right:0;
height:1px;
top:0;
background: rgba(15,23,42,0.22);
pointer-events:none;
opacity:0;
transition: opacity 120ms ease;
z-index:5;
}
.df-row-ruler-line.is-visible{ opacity:1; }
.df-row-ruler-item.is-major{ font-weight:700; }
.df-row-ruler-item.is-major::after{ width:20px; background: rgba(15,23,42,0.20); }
.df-row-ruler-item.is-major::before{ width:12px; background: rgba(15,23,42,0.12); }
.phone-grid{
position: relative;
border:1px solid var(--line);
border-radius:12px;
background: #f3f4f6;
overflow: auto;
resize: vertical;
min-height: 420px;
max-height: none;
}
.phone-grid-inner{
position: relative;
display:grid;
grid-auto-rows: var(--rowH, 32px);
gap: 2px;
padding: 12px;
min-height: 100%;
align-content:start;
background: #f3f4f6;
}
.phone-cell-highlight{
position:absolute;
pointer-events:none;
border:2px dashed rgba(37,99,235,0.55);
border-radius:12px;
background: rgba(37,99,235,0.08);
z-index: 5;
}
.field-card.grid-item{
width: 100%;
margin: 0;
position: relative;
z-index: 2;
}
.field-card.grid-item.menu-open{
z-index: 2000;
}
.field-card.grid-item.menu-open .field-actions{
z-index: 2001;
}
.field-card.grid-item.menu-open .kebab-menu{
z-index: 2002;
}
.resize-handle{
position:absolute;
right: 10px;
bottom: 10px;
width: 12px;
height: 12px;
border-radius: 6px;
border:1px solid var(--line);
background: rgba(2,6,23,0.06);
cursor: nwse-resize;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease, background-color .12s ease;
}
.field-card.selected .resize-handle{
background: rgba(37,99,235,0.18);
opacity: 1;
pointer-events: auto;
}
.field-card .field-top{ gap:10px; }
.field-card .field-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.field-card .field-btns button{
padding: 4px 8px;
font-size: 11px;
line-height: 1.1;
border-radius: 10px;
}
.field-card .field-actions{ margin-left:auto; position:relative; display:flex; align-items:center; }
.field-card .kebab-btn{
border: 1px solid var(--line);
background: var(--ghost);
color: var(--text);
border-radius: 10px;
padding: 2px 8px;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
}
.field-card:hover .kebab-btn,
.field-card.selected .kebab-btn{ opacity: 1; }
.field-card .kebab-menu{
position: absolute;
right: -4px;
top: calc(100% + 8px);
min-width: 52px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(203,213,225,.92);
box-shadow: 0 12px 24px rgba(15,23,42,.12);
border-radius: 16px;
padding: 8px 6px;
z-index: 50;
}
.field-card .kebab-item{
width: 100%;
text-align: left;
border: 1px solid transparent;
background: transparent;
color: var(--text);
border-radius: 12px;
padding: 8px 10px;
font-size: 12px;
cursor: pointer;
}
.field-card .kebab-item:hover{ background: rgba(148,163,184,.10); border-color: transparent; }
.field-card .kebab-item:focus-visible{
outline: none;
background: rgba(148,163,184,.12);
border-color: rgba(148,163,184,.16);
}
.field-card .kebab-item.danger{ color: var(--danger); }
.field-card .kebab-menu.icon-only{
min-width: 52px;
width: 52px;
padding: 8px 6px;
}
.field-card .kebab-menu.icon-only .kebab-item{
width: 100%;
height: 38px;
padding: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.field-card .kebab-menu.icon-only .kebab-item + .kebab-item{
margin-top: 4px;
}
.field-card .kebab-menu.icon-only .kebab-item svg{
width: 15px;
height: 15px;
display:block;
color: rgba(71,85,105,.92);
}
.field-card .kebab-menu.icon-only .kebab-item svg,
.field-card .kebab-menu.icon-only .kebab-item svg *{
fill: none;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.field-card .kebab-menu.icon-only .kebab-item.danger svg{
color: #ef4444;
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.field-card .field-label-row{ display:flex; align-items:center; gap:5px; min-width:0; }
.field-card .req-dot{ color: var(--danger); font-weight:900; }
.field-card .mini-flag{
font-size: 10px;
font-weight: 800;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--preview);
color: var(--muted);
}
.field-card .mini-flag.danger{ color: var(--danger-dark); border-color: rgba(217,83,79,0.35); background: rgba(217,83,79,0.06); }
.field-card .mini-flag.info{ color: var(--blue-dark); border-color: rgba(43,109,173,0.35); background: rgba(43,109,173,0.06); }
.toggle-chip.toggle-chip-icon{
gap: 8px;
}
.toggle-chip.toggle-chip-icon .chip-icon,
.toggle-chip.toggle-chip-icon svg{
width: 12px;
height: 12px;
display: inline-block;
flex: 0 0 auto;
stroke: currentColor;
stroke-width: 1.7;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.toggle-chip.toggle-chip-icon .chip-icon-danger{
color: var(--danger);
font-size: 15px;
font-weight: 900;
line-height: 1;
}
.field-card .field-top{
display:flex;
align-items:flex-start;
position:relative;
}
.field-card .field-label-row{
display:flex;
align-items:flex-start;
gap:4px;
min-width:0;
flex:1 1 auto;
padding-right:24px;
}
.field-card .field-label{
display:block;
min-width:0;
flex:1 1 auto;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.field-card .field-status-icons{
display: inline-flex;
align-items: center;
gap: 3px;
color: #9aa4b2;
flex: 0 0 auto;
margin-top: 1px;
}
.field-card .field-status-icon{
width: 10px;
height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #9aa4b2;
cursor: help;
}
.field-card .field-status-icon svg{
width: 10px;
height: 10px;
display: block;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.field-card.selected .field-status-icons,
.field-card.selected .field-status-icon{
color: #7f8a99;
}
.field-card .field-actions{
position:absolute;
top:0;
right:4px;
margin-left:0;
display:flex;
align-items:center;
opacity:0;
pointer-events:none;
transition: opacity .12s ease;
}
.field-card:hover .field-actions,
.field-card.selected .field-actions{
opacity:1;
pointer-events:auto;
}
.field-card .kebab-btn{
width:20px;
height:20px;
min-width:20px;
padding:0;
border-radius:999px;
font-size:11px;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
}
.field-card.selected .kebab-btn{
width:18px;
height:18px;
min-width:18px;
font-size:10px;
}
.field-card .field-control input,
.field-card .field-control textarea,
.field-card .field-control select{ width:100%; }
/* --- Visual polish: DF-like field cards + hover action menu --- */
:root{
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
body{ font-family: var(--font-sans); }
.field-card{
background: transparent !important;
border: 1px solid var(--line);
box-shadow: none !important;
border-radius: 12px;
padding: 10px 10px 12px;
}
.field-card.selected{
border-color: var(--blue);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 20%, transparent);
}
.field-card.two-row-canvas-field{
display:grid;
grid-template-rows:auto auto;
align-content:start;
align-items:start;
row-gap:4px;
}
.field-card.two-row-canvas-field .field-top{
margin-bottom:0;
}
.field-card.two-row-canvas-field .field-control{
align-self:start;
margin-top:0;
}
.field-card label{
display:block;
font-weight: 500;
font-size: 12px;
margin: 0 0 6px 0;
}
.field-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:5px;
}
.field-menu{
position: relative;
opacity: 0;
transition: opacity .12s ease;
}
.field-card:hover .field-menu,
.field-card.selected .field-menu{
opacity: 1;
}
.icon-btn{
border: 1px solid var(--line);
background: var(--card);
color: var(--text);
border-radius: 10px;
padding: 2px 6px;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.field-menu-pop{
position:absolute;
right:0;
top: calc(100% + 6px);
min-width: 140px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 12px;
padding: 6px;
display:none;
z-index: 40;
}
.field-menu.open .field-menu-pop{ display:block; }
.field-menu-pop button{
width:100%;
text-align:left;
border: 1px solid transparent;
background: transparent;
color: var(--text);
border-radius: 10px;
padding: 8px 10px;
cursor:pointer;
font-size: 13px;
}
.field-menu-pop button:hover{
background: var(--ghost);
border-color: var(--line);
}
.field-menu-pop button.danger{
color: var(--danger);
}
.column-box{
background: color-mix(in srgb, var(--card) 55%, var(--bg));
}
/* DF-like field label */
.field-label{
font-size: 12px;
font-weight: 500;
color: var(--muted);
letter-spacing: .1px;
}
.subheader-card .field-label{
font-size: 12px;
font-weight: 700;
color: var(--text);
letter-spacing: .2px;
}
/* Hide section headers (single-flow layout) */
.section-head{display:none !important;}
.sf-note{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.35}
.sf-note code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono','Courier New', monospace;}
/* --- Override: inline help tight under subheader line --- */
.phone-grid-inner{ gap: 0px !important; }
.field-card.subheader-card{ margin: 6px 0 2px !important; }
.field-card.inline-help-card{
position: relative;
padding: 0 10px 4px !important;
border: none !important;
background: transparent !important;
}
.field-card.inline-help-card .field-top{
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
border-bottom: none !important;
}
.field-card.inline-help-card .field-actions{
position: absolute !important;
top: 0px;
right: 6px;
}
.field-card.inline-help-card .helper{
margin: 0 !important;
padding: 0 !important;
}
/* --- Remove double-scrollbar in Designer Canvas: let inner phone grid scroll, not previewSections wrapper --- */
#previewSections.scroll{
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
}
/* --- User-requested hides (targeted) --- */
.top-card .pill-row{ display:none !important; }
.top-card h1{ display:none !important; }
.top-card .subtext{ display:none !important; }
#addSectionBtn{ display:none !important; }
/* Employee Property modal (UI only) — macOS glass */
.ep-modal-overlay{position:fixed;inset:0;z-index:9999;display:none}
.ep-modal-overlay.open{display:block}
.ep-modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
backdrop-filter:saturate(1.6) blur(10px);
-webkit-backdrop-filter:saturate(1.6) blur(10px);
}
.ep-modal{
position:relative;
margin:10vh auto;
max-width:920px;
width:calc(100% - 24px);
background:rgba(245,245,247,.82);
border:1px solid rgba(60,60,67,.22);
border-radius:18px;
box-shadow:0 24px 80px rgba(0,0,0,.18);
padding:18px;
backdrop-filter:saturate(1.8) blur(18px);
-webkit-backdrop-filter:saturate(1.8) blur(18px);
}
.ep-modal .ep-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.ep-modal label,.ep-modal .ep-label{
display:block;
font-size:12px;
font-weight:700;
margin:0 0 6px 2px;
color:#1d1d1f;
}
.ep-modal input,.ep-modal select{
width:100%;
padding:10px 12px;
border:1px solid rgba(60,60,67,.22);
border-radius:12px;
font-size:14px;
color:#1d1d1f;
background:rgba(255,255,255,.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.ep-modal input:focus,.ep-modal select:focus{
outline:none;
border-color: rgba(0,122,255,.55);
box-shadow: 0 0 0 3px rgba(0,122,255,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
.ep-modal .ep-col{flex:1;min-width:240px}
.ep-modal .ep-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.ep-modal .ep-actions button{border-radius:12px;padding:10px 14px}
.ep-modal .ep-options{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:8px 2px}
.ep-modal .ep-options label{display:flex;gap:5px;align-items:center;margin:0;font-size:11px;font-weight:700}
.ep-modal .ep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.ep-modal .ep-grid{grid-template-columns:1fr}}
.ep-modal .ep-error, #epError{
background: rgba(255,59,48,.12) !important;
border: 1px solid rgba(255,59,48,.28) !important;
color:#7f1d1d !important;
padding:10px 12px !important;
border-radius:12px !important;
font-weight:800 !important;
}
.ep-modal .binding-item-row{
background: rgba(255,255,255,.75) !important;
border:1px solid rgba(60,60,67,.16) !important;
border-radius:14px !important;
box-shadow:none !important;
}
.ep-modal .binding-item-row input,
.ep-modal .binding-item-row select{
background: rgba(255,255,255,.92) !important;
border-color: rgba(60,60,67,.18) !important;
}
.ep-modal button{
color:#1d1d1f !important;
background: rgba(255,255,255,.88) !important;
border:1px solid rgba(60,60,67,.18) !important;
border-radius:12px !important;
box-shadow:none !important;
}
.ep-modal button:hover{
background: rgba(60,60,67,.06) !important;
transform:none !important;
}
.ep-modal button.primary-btn,
.ep-modal button.success{
color:#fff !important;
background: rgba(0,122,255,.95) !important;
border-color: rgba(0,122,255,.45) !important;
}
.ep-modal button.primary-btn:hover,
.ep-modal button.success:hover{
background: rgba(0,122,255,1) !important;
}
.ep-modal button.secondary{
color:#1d1d1f !important;
background: rgba(255,255,255,.88) !important;
}
.ep-modal button.ghost-btn{
color:#1d1d1f !important;
background: rgba(255,255,255,.72) !important;
}
.ep-modal .icon-btn{
border:1px solid rgba(60,60,67,.18) !important;
background: rgba(255,255,255,.88) !important;
border-radius:12px !important;
}
.input-error{border-color:#ef4444!important; box-shadow:0 0 0 3px rgba(239,68,68,.15)!important;}
/* Visual-only runtime validation */
.rt-num-wrap .rt-error{margin-top:6px;font-size:12px;font-weight:700;color:#b91c1c}
input.invalid{border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;}
/* Binding Library grouping polish */
.binding-topic{margin-top:10px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.binding-topic-title{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f8fafc;font-weight:700}
.binding-topic-name{font-size:14px}
.binding-topic-badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:700}
.binding-topic-body{padding:10px 12px}
.binding-group{padding:6px 0;border-top:1px solid #eef2f7}
.binding-group:first-child{border-top:none}
.binding-group-header{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;padding:6px 2px;font-weight:700;font-size:11px;cursor:pointer}
.binding-group-name{text-transform:uppercase;letter-spacing:.04em;color:#0f172a}
.binding-caret{color:#64748b;font-size:12px}
.binding-group-panel{margin-top:6px}
.binding-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e7eef8;border-radius:12px;padding:10px 10px;margin:8px 0;background:#fff}
.binding-item-title{font-weight:400}
.btn-mini{padding:4px 8px;border-radius:8px;border:1px solid #d7dee9;background:#f8fafc;font-weight:700;cursor:pointer}
/* EmployeePropertyGrid preview (Dayforce-like) */
.epgrid-preview{
border: 1px solid var(--line);
border-radius: 14px;
padding: 10px;
background: #fff;
width: 100%;
box-sizing: border-box;
}
/* Make grid previews selectable as a single card (no interactive focus). */
.epgrid-preview-noevents, .epgrid-preview-noevents *{
pointer-events: auto;
}
.epgrid-title{
font-weight: 800;
font-size: 14px;
margin-bottom: 8px;
}
.epgrid-toolbar{
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.epgrid-toolbtn{
border: 1px solid var(--line);
background: #f8fafc;
padding: 6px 10px;
border-radius: 10px;
font-weight: 800;
font-size: 12px;
color: var(--text);
cursor: not-allowed;
opacity: .95;
}
.epgrid-shell{
border: none;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.epgrid-cell-date{
position: relative;
padding-right: 28px;
}
.epgrid-cell-date::after{
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: .65;
pointer-events: none;
}
.epgrid-table{
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
}
.epgrid-table th, .epgrid-table td{
border-bottom: 1px solid var(--line-soft);
border-right: none;
padding: 8px 10px;
vertical-align: top;
text-align: left;
}
/* Match DF field-label styling */
.epgrid-table th{
font-weight: 500;
color: var(--muted);
letter-spacing: .1px;
background: transparent;
border-bottom: none;
}
.epgrid-table th:last-child, .epgrid-table td:last-child{ border-right: none; }
.epgrid-table tbody tr:last-child td{ border-bottom: none; }
.epgrid-select-col{ width: 36px; padding: 0 6px; }
.epgrid-rowbox{
width: 14px;
height: 14px;
border: 1px solid var(--line-soft);
border-radius: 3px;
background: transparent;
margin-top: 2px;
}
/* Grid (Union/etc) preview cells: match regular field inputs (minimal, consistent) */
.mini-cell-input{
width: 100%;
height: 32px;
padding: 7px 8px;
font-size: 12px;
border: 1px solid #bfc9d6;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
pointer-events: auto;
}
.mini-cell-input[type="date"]{ padding-right: 30px; }
.epgrid-cell-input{
height: 28px;
border: none;
border-radius: 8px;
background: transparent;
}
/* Employee Property cards (canvas) — normalize to macOS skin */
.field-card.employee-property-card .field-control input,
.field-card.employee-property-card .field-control select{
border-color: rgba(60,60,67,.18) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.92) !important;
}
.field-card.employee-property-card .epgrid-preview{
border: 1px solid rgba(60,60,67,.16) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.82) !important;
padding: 10px !important;
}
.field-card.employee-property-card .epgrid-table th,
.field-card.employee-property-card .epgrid-table td{
border-color: rgba(60,60,67,.12) !important;
}
.field-card.employee-property-card .epgrid-cell-input{
border-color: rgba(60,60,67,.18) !important;
border-radius: 10px !important;
background: rgba(255,255,255,.92) !important;
}
.epgrid-text-input, .epgrid-date-input{
width: 100%;
height: 28px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0 10px;
background: #fff;
font: inherit;
font-size: 12px;
}
.epgrid-select-input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:11px;background:#fff}
/* --- EmployeePropertyGrid: keep preview inside selection bubble (no spill) --- */
.field-card.epg-card{
display: flex;
flex-direction: column;
min-height: 0;
}
.field-card.epg-card .field-control{
flex: 1 1 auto;
min-height: 0;
overflow: visible;
}
.field-card.epg-card .epgrid-preview{
width: 100%;
}
.field-card.epg-card .epgrid-shell{
overflow: visible;
}
.epgrid-text-input:disabled, .epgrid-date-input:disabled{
color: var(--text);
opacity: 1; /* keep readable in preview */
}
.epgrid-preview-control{
pointer-events: auto;
opacity:1;
background:#fff;
color: var(--text);
}
.epgrid-preview-control:focus{ outline:none; }
.epgrid-date-input{
padding-right: 34px;
}
/* ===== Paint-inspired chrome (layout-only) ===== */
.app {
grid-template-rows: auto 1fr auto; /* top card, main, statusbar */
}
.paint-menubar{
display:flex;
align-items:center;
gap:14px;
padding:10px 12px;
margin-top:14px;
border:1px solid var(--line-soft);
border-radius:12px;
background: linear-gradient(#ffffff, #f8fafc);
}
.paint-title{
font-weight:800;
font-size:14px;
letter-spacing:0.2px;
color:#0f172a;
}
.menu-shell{ position: relative; display:flex; align-items:center; }
.menu-toggle{
position:absolute;
opacity:0;
pointer-events:none;
}
.menu-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 12px;
border-radius:12px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
user-select:none;
font-weight:700;
font-size:11px;
color:#0f172a;
box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
.menu-btn:hover{ background:#f8fafc; }
.menu-icon{ font-size:14px; line-height:1; }
.menu-text{ font-size:11px; }
.menu-backdrop{
display:none;
}
.appmenu{
display:none;
position:absolute;
top:46px;
left:0;
width:320px;
padding:10px;
border-radius:16px;
border:1px solid var(--line);
background:#fff;
box-shadow: 0 18px 60px rgba(15,23,42,.18);
z-index: 1000;
}
#menuToggle:checked ~ .menu-backdrop{
display:block;
position:fixed;
inset:0;
z-index: 999;
background: transparent;
}
#menuToggle:checked ~ .appmenu{ display:block; }
.appmenu-header{
font-size:12px;
font-weight:800;
letter-spacing:.06em;
color:#475569;
padding:6px 8px 10px;
text-transform:uppercase;
}
.appmenu-section{ padding:6px; border-top:1px solid var(--line-soft); }
.appmenu-section:first-of-type{ border-top:none; }
.appmenu-title{
font-size:12px;
font-weight:800;
color:#334155;
margin-bottom:6px;
}
.appmenu button{
width:100%;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
padding:9px 10px;
border-radius:12px;
border:1px solid transparent;
background:transparent;
font-weight:700;
font-size:11px;
color:#0f172a;
cursor:pointer;
text-align:left;
}
.appmenu button:hover{
background:#f8fafc;
border-color: var(--line-soft);
}
.appmenu button::before{
content:"";
width:18px;
height:18px;
border-radius:6px;
background:#e2e8f0;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
color:#0f172a;
}
#addSectionBtn::before{ content:"＋"; }
#addInlineHelpBtn::before{ content:"?"; }
#addSubheaderBtn::before{ content:"≡"; }
#collapseAllBtn::before{ content:"▾"; }
#expandAllBtn::before{ content:"▸"; }
#undoBtn::before{ content:"↶"; }
#redoBtn::before{ content:"↷"; }
#loadProjectBtn::before{ content:"⤓"; }
#saveProjectBtn::before{ content:"💾"; }
#importXmlBtn::before{ content:"⇪"; }
#downloadBtn::before{ content:"⇩"; }
#clearBtn::before{ content:"✕"; background:#fee2e2; color:#7f1d1d; }
#clearBtn{ color:#7f1d1d; }
#clearBtn:hover{ background:#fff1f2; border-color:#fecdd3; }
/* Tighten top toolbar now that actions moved into the menu */
.toolbar.settings-toolbar{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:flex-end;
margin-top:12px;
padding-top:12px;
border-top:1px dashed var(--line-soft);
}
/* Statusbar at bottom (Paint-like, fixed + full width) */
.statusbar{
position: fixed;
left: 0;
right: 0;
bottom: 0;
transform: none;
z-index: 1000;
padding: 6px 12px;
background: #ffffff;
border-top: 1px solid var(--line);
border-radius: 0;
box-shadow: 0 -6px 18px rgba(15,23,42,0.06);
}
.statusbar.card{
border-radius: 0;
border-left: none;
border-right: none;
border-bottom: none;
box-shadow: none; /* statusbar uses its own subtle shadow */
}
.statusbar-inner{
display: flex;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px; /* avoids scrollbar overlap on some OSes */
}
.statusbar .field-group{
flex-direction: row;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
.statusbar .field-group label{
margin: 0;
font-size: 12px;
font-weight: 700;
color: #475569;
white-space: nowrap;
}
.statusbar select,
.statusbar input[type="number"]{
width: auto;
min-width: 64px;
height: 32px;
padding: 6px 10px;
border-radius: 10px;
font-size: 12px;
}
.statusbar input[type="range"]{
width: 200px;
height: 4px;
padding: 0;
}
.statusbar input[type="checkbox"]{
transform: translateY(1px);
}
/* Prevent global inputs from blowing up checkboxes/range */
input[type="checkbox"], input[type="radio"]{
width:auto !important;
padding:0 !important;
min-width:auto !important;
height:auto !important;
}
input[type="range"]{
width:auto;
padding:0 !important;
}
.card.top-card{ overflow: visible; }
/* --- Paint-style canvas height (rows) control: UI only --- */
#canvasHeightNumber{ display:none !important; } /* keep input for logic */
.paint-rowbar label{ display:none !important; }
.paint-rowbar-inner{
display:flex;
align-items:center;
gap:6px;
}
.paint-row-btn{
width:22px;
height:22px;
border-radius:6px;
border:1px solid var(--line);
background:#fff;
color:#0f172a;
font-weight:800;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 2px 10px rgba(15,23,42,0.06);
}
.paint-row-btn:active{ transform: translateY(1px); }
.paint-row-btn:focus{ outline: none; box-shadow:0 0 0 3px rgba(113,106,202,0.20), 0 4px 14px rgba(15,23,42,0.06); }
.paint-fit-btn{
width:22px;
height:22px;
border-radius:6px;
border:1px solid var(--line);
background:#fff;
color:#0f172a;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 2px 10px rgba(15,23,42,0.06);
}
.paint-fit-btn:active{ transform: translateY(1px); }
.paint-fit-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(113,106,202,0.20), 0 2px 10px rgba(15,23,42,0.06); }
.paint-fit-btn i{ font-size:14px; line-height:1; }
.paint-slider{
position:relative;
display:flex;
align-items:center;
}
#canvasHeight{
width:140px !important;
height:22px;
margin:0;
padding:0 !important;
background:transparent;
}
/* Compact slider track/thumb (Paint-like, Bhumlu tone) */
#canvasHeight{
-webkit-appearance:none;
appearance:none;
}
#canvasHeight::-webkit-slider-runnable-track{
height:3px;
border-radius:999px;
background:#e2e8f0;
}
#canvasHeight::-webkit-slider-thumb{
-webkit-appearance:none;
width:10px;
height:10px;
border-radius:999px;
background:#716aca;
border:2px solid #fff;
box-shadow:0 3px 10px rgba(15,23,42,0.18);
margin-top:-3px;
}
#canvasHeight::-moz-range-track{
height:3px;
border-radius:999px;
background:#e2e8f0;
}
#canvasHeight::-moz-range-thumb{
width:10px;
height:10px;
border-radius:999px;
background:#716aca;
border:2px solid #fff;
box-shadow:0 3px 10px rgba(15,23,42,0.18);
}
.paint-rows-inputwrap{ display:flex; align-items:center; }
.paint-rows-input{
width:56px;
height:22px;
border-radius:6px;
border:1px solid var(--line);
padding:0 8px;
font-weight:700;
font-size:12px;
color:#0f172a;
background:#fff;
}
.paint-rows-input:focus{
outline:none;
box-shadow:0 0 0 3px rgba(113,106,202,0.20);
border-color:rgba(113,106,202,0.55);
}
/* Bubble: show only when cursor is over the thumb */
#canvasRowsBubble{
position:absolute;
top:-36px;
left:0;
transform: translate(-50%, 4px) scale(0.96);
opacity:0;
visibility:hidden;
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
pointer-events:none;
will-change: transform, opacity;
}
#canvasRowsBubble.is-visible{
opacity:1;
visibility:visible;
transform: translate(-50%, 0) scale(1);
}
/* ===== Canvas Height rows bubble (stable) ===== */
.canvas-height-controls{ display:flex; gap:10px; align-items:center; }
.paint-range-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.paint-rows-bubble{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:68px;
min-height:30px;
padding:0 12px;
border-radius:9px;
background:linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
border:1px solid #d9dee7;
box-shadow:0 6px 16px rgba(15,23,42,0.12);
pointer-events:none;
user-select:none;
position:relative;
z-index:9999;
white-space:nowrap;
}
.paint-rows-bubble::after{
content:"";
position:absolute;
left:50%;
bottom:-5px;
width:8px;
height:8px;
background:#fbfbfd;
border-right:1px solid #d9dee7;
border-bottom:1px solid #d9dee7;
transform: translateX(-50%) rotate(45deg);
box-shadow:2px 2px 6px rgba(15,23,42,0.04);
}
#canvasRowsBubbleValue{
min-width:20px;
text-align:center;
font-size:11px;
font-weight:700;
line-height:1;
color:#0f172a;
letter-spacing:-0.01em;
}
.paint-rows-suffix{
font-size:12px;
font-weight:600;
line-height:1;
color:#64748b;
}
/* Bubble must not be clipped by cards */
.card{ overflow: visible; }
/* --- Flatten "Designer Canvas" framing: keep only the functional phone-grid viewport (UI only) --- */
.card.canvas > .panel-head { display: none !important; } /* remove header/title */
.card.canvas {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.card.canvas > .panel-body {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
#previewSections {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
/* remove extra outer phone frame border so we don't get "4 squares" */
.phone-frame{
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
/* keep ONE bhumlu-like container: the viewport */
.phone-grid{
border: 1px solid #dbe3ec !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06) !important;
}
/* --- Unify canvas surface color (remove two-tone background) --- */
.phone-grid{ background: #ffffff !important; }
.phone-grid-inner{ background: #ffffff !important; min-height: 100% !important; }
.phone-grid-inner{background: #ffffff !important;}
/* ===== Bhumlu-ish range styling (Canvas Height) ===== */
#canvasHeight{
accent-color: #716aca;
height: 6px !important;
}
#canvasHeight::-webkit-slider-runnable-track{
height: 6px;
border-radius: 999px;
background: #e5e7eb;
}
#canvasHeight::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 999px;
background: #716aca;
border: 3px solid #ffffff;
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18);
margin-top: -5px; /* center thumb on track */
}
#canvasHeight::-moz-range-track{
height: 6px;
border-radius: 999px;
background: #e5e7eb;
}
#canvasHeight::-moz-range-thumb{
width: 16px;
height: 16px;
border-radius: 999px;
background: #716aca;
border: 3px solid #ffffff;
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18);
}
/* === Shell override: remove inner scrollbar in canvas (use single page scroll) === */
.phone-grid{
overflow: visible !important;
scrollbar-width: none;
}
.phone-grid::-webkit-scrollbar{ width: 0; height: 0; }
/* Fix: ensure grid-item selection border draws on all sides (bottom edge could be suppressed by other rules) */
.field-card.grid-item.selected{
border-bottom: 1px solid var(--blue) !important;
}
/* --- Right panel macOS segmented polish (v31) --- */
.right-panel .prop-section { padding-top: 10px; }
/* Center the selected field cluster horizontally (no vertical centering). */
.right-panel .field-summary-card,
.right-panel .toggle-row,
.right-panel .editor-tabs{
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
/* Remove leftover "Selected Field" header spacing if any */
.right-panel .prop-section:first-child { padding-top: 6px; }
/* Smaller, calmer selected field typography */
.right-panel .field-summary-title{ font-size: 14px; font-weight: 800; }
.right-panel .field-summary-sub{ font-size: 11px; color: var(--muted); }
/* Softer Selected Field XML snippet (neutral, not blue) */
.sf-snippet{
border-color: var(--line-soft);
background: #fbfcfe;
}
.sf-snippet-head{
background: #f2f4f7;
border-bottom-color: var(--line-soft);
font-weight: 700;
font-size: 11px;
}
.sf-snippet-body{
max-height: 210px;
font-size: 12px;
line-height: 1.4;
}
/* Segmented control (macOS toolbar-style) for the right-panel tabs (v34) */
.right-panel .editor-tabs{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 4px;
margin-top: 8px;
background: #f2f4f7;
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.right-panel .editor-tabs-secondary{
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 8px;
}
.right-panel .editor-tab{
flex: initial !important;
width: auto !important;
border: 0 !important;
background: rgba(255,255,255,.55) !important;
border-radius: 11px;
padding: 8px 10px;
min-height: 34px;
font-size: 12px;
font-weight: 500; /* not bold */
letter-spacing: .01em;
color: rgba(17,24,39,.82);
text-align: center;
white-space: nowrap;
}
.right-panel .editor-tab:hover{
background: rgba(255,255,255,.75) !important;
}
.right-panel .editor-tab.active{
background: #ffffff !important;
color: rgba(17,24,39,.92);
box-shadow: 0 1px 2px rgba(17,24,39,.10);
}
/* Make the chip row (Required / Read only / Edit Grid Columns...) a bit tighter */
.right-panel .toggle-chip{
min-height: 30px;
padding: 4px 8px;
font-size: 11px;
}
.field-card.inline-policy-checkbox-card{
position:relative;
}
.field-card.inline-policy-checkbox-card .field-top{
position:absolute;
top:10px;
right:10px;
left:10px;
margin:0 !important;
padding:0 !important;
min-height:0 !important;
border-bottom:none !important;
z-index:2;
}
.field-card.inline-policy-checkbox-card .field-label-row{
display:none !important;
}
.field-card.inline-policy-checkbox-card .field-actions{
position:absolute !important;
top:0;
right:0;
margin-left:0;
}
.field-card.inline-policy-checkbox-card .field-control{
margin-top:0 !important;
padding-top:0 !important;
padding-right:28px !important;
}
.field-card.inline-policy-checkbox-card .checkbox-row-inline-policy{
display:flex;
align-items:flex-start;
gap:10px;
min-height:0;
flex-wrap:nowrap;
}
.field-card.inline-policy-checkbox-card .checkbox-row-inline-policy input[type="checkbox"]{
margin-top:2px;
flex:0 0 auto;
}
.field-card.inline-policy-checkbox-card .checkbox-inline-label{
display:block;
flex:1 1 auto;
min-width:0;
margin:0;
color:#374151;
font-family:inherit;
font-size:12px;
font-weight:500;
line-height:1.2;
letter-spacing:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* HR Policy Documents upload dropzone canvas preview */
.field-card.upload-download-card{
display:block !important;
padding:8px !important;
min-height:112px !important;
box-sizing:border-box;
overflow:visible;
}
.field-card.upload-download-card .field-top{
position:absolute !important;
top:8px;
right:8px;
left:8px;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
z-index:3;
pointer-events:none;
}
.field-card.upload-download-card .field-label-row{
display:none !important;
}
.field-card.upload-download-card .field-actions{
position:absolute !important;
top:0;
right:0;
margin:0 !important;
pointer-events:auto;
}
.field-card.upload-download-card .field-control{
height:100%;
min-height:96px;
margin:0 !important;
padding:0 !important;
display:flex;
align-items:stretch;
}
.field-card.upload-download-card .resize-handle{
right:8px;
bottom:8px;
z-index:4;
}
.df-upload-dropzone{
width:100%;
min-width:0;
min-height:96px;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border:1px solid #d4d4d8;
border-radius:0;
background:#f5f5f5;
color:#b9bec7;
}
.df-upload-dropzone-icon{
width:30px;
height:30px;
color:#b9bec7;
display:block;
}
.df-upload-dropzone-btn{
min-height:22px !important;
height:22px !important;
padding:3px 9px !important;
border-radius:4px !important;
border:1px solid #0b65c2 !important;
background:#1377d5 !important;
color:#ffffff !important;
font-size:11px !important;
font-weight:600 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* HR Policy Documents: span full canvas preview width even when the designer grid has extra columns. */
.field-card.upload-download-card{
grid-column: 1 / -1 !important;
}
/* --- Targeted fix: Inline Help should use the full selectable card bubble --- */
.field-card.inline-help-card{
position: relative !important;
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
margin: 0 0 12px !important;
min-height: 42px !important;
overflow: visible !important;
}
.field-card.inline-help-card:hover{
border-color: var(--line-soft) !important;
}
.field-card.inline-help-card.selected{
border-color: var(--blue) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 20%, transparent) !important;
}
.field-card.inline-help-card .field-top{
display: flex !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
border-bottom: none !important;
justify-content: flex-end !important;
background: transparent !important;
}
.field-card.inline-help-card .field-label-row{
display: none !important;
}
.field-card.inline-help-card .field-actions{
position: static !important;
margin: 0 !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.field-card.inline-help-card .field-control{
width: 100% !important;
min-height: 24px !important;
margin-top: 0 !important;
padding: 0 34px 0 0 !important;
}
.field-card.inline-help-card .df-inline-help-bubble,
.field-card.inline-help-card .helper{
display: block !important;
min-height: 24px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
}
/* Inline Help: no idle/hover outline; only selected state should show the blue shell. */
.field-card.inline-help-card{
border-color: transparent !important;
box-shadow: none !important;
background: transparent !important;
}
.field-card.inline-help-card:hover{
border-color: transparent !important;
box-shadow: none !important;
background: transparent !important;
}
.field-card.inline-help-card.selected{
border-color: var(--blue) !important;
background: #fff !important;
}
.field-card.inline-help-card .df-inline-help-bubble{
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}