body{font-family:system-ui,Arial,sans-serif;margin:0;color:#1e293b;background:#f8fafc}header{padding:1rem 2rem;background:#172554;color:white}main{max-width:1100px;margin:2rem auto;padding:0 1rem}button{padding:.6rem 1rem;border:0;border-radius:5px;background:#1d4ed8;color:white;cursor:pointer}input{padding:.5rem;border:1px solid #94a3b8;border-radius:4px}label{display:block;margin-top:1rem}.ventanas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.ventana{background:white;border:1px solid #cbd5e1;border-radius:8px;padding:1rem;min-width:260px;flex:1}.ventana h2{margin:.2rem 0}.ventana button{margin-top:.5rem}

.app-header { display:flex; gap:1rem; align-items:center; }
.app-header label { margin-left:auto; }
.note { color:#666; font-size:.9rem; }

/* Metadata diagnostics */
.metadata-scroll { overflow-x: auto; margin-top: 1rem; }
.metadata-table { border-collapse: collapse; font-size: .85rem; width: 100%; }
.metadata-table th, .metadata-table td { border: 1px solid #cbd5e1; padding: .45rem; text-align: left; vertical-align: top; }
.metadata-table th { background: #e9edf4; }
.metadata-raw { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }

/* TASK-011: schema-driven, read-only windows */
.explorer-toolbar{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}
.explorer-toolbar label{margin:0}
.explorer-toolbar select{padding:.55rem;border:1px solid #94a3b8;border-radius:4px;min-width:240px}
.table-window{min-width:min(100%,380px);max-width:100%;box-sizing:border-box}
.table-window-heading{display:flex;justify-content:space-between;align-items:start;gap:1rem}
.table-window-heading button{margin:0;flex-shrink:0}

/* TASK-016: read-only metadata-driven form preview */
.form-preview{border:1px solid #cbd5e1;border-radius:8px;margin-top:1rem;padding:1rem;background:#f8fafc}
.form-preview-grid{display:flex;gap:1.25rem;flex-wrap:wrap}
.form-preview-grid>div{flex:1;min-width:200px}
.form-preview-field{display:flex;flex-direction:column;gap:.25rem;margin:.6rem 0}
.form-preview-field input,.form-preview-field textarea{width:100%;box-sizing:border-box;background:white;border:1px solid #cbd5e1;padding:.5rem}
.form-preview-field small{color:#64748b}

.draft-validation-error { color: #b42318; display: block; font-weight: 600; }

/* TASK-031 fix: keep INSERT confirmation visible and prevent wide SQL from expanding the window. */
.table-window, .form-preview { min-width:0; }
.update-plan-preview { min-width:0; max-width:100%; overflow-x:auto; }
.sql-preview { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.insert-confirm-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:.75rem 0; }
.insert-confirm-actions button { font-weight:700; }

/* TASK-034: level-2 modal, independent of the level-1 grid. */
.record-modal-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.65);display:flex;justify-content:center;align-items:center;padding:1rem;box-sizing:border-box}
.record-modal{width:min(1100px,100%);max-height:calc(100vh - 2rem);overflow-y:auto;overscroll-behavior:contain;margin:0;box-sizing:border-box;box-shadow:0 18px 60px rgba(0,0,0,.3);background:#fff}
.child-grids{display:grid;gap:1rem;margin-top:1.5rem}
.child-tab-group{border-top:1px solid #cbd5e1;padding-top:.75rem;min-width:0}
.child-grid{margin:.75rem 0;min-width:0}
.child-grid h5{margin:.5rem 0}

/* TASK-035: the same grid renderer is used at every nesting level. */
.nested-table-window{min-width:0;max-width:100%;padding:.65rem;margin:.5rem 0;border:1px solid #d4dbe5;border-radius:.5rem}
.nested-table-window .table-window-heading h2{font-size:1.05rem;margin:.25rem 0}
.child-grid{min-width:0;max-width:100%}
.child-grids{min-width:0;max-width:100%}

/* TASK-036: field and related grids share the same metadata-driven tab strip. */
.record-tabs{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:2px solid #94a3b8;margin:1rem 0 0}
.record-tabs button{border-radius:6px 6px 0 0;background:#e2e8f0;color:#1e293b;margin:0;padding:.65rem 1rem}
.record-tabs button.active{background:#1d4ed8;color:#fff}
.record-tab-content{padding:.75rem;min-width:0;background:rgba(255,255,255,.5);border:1px solid #cbd5e1;border-top:0;border-radius:0 0 6px 6px}
.record-tab-content .child-grid{margin:.5rem 0}

/* TASK-036 correction: no empty tab strip when the form has only the default section. */
.record-content-no-tabs{padding:.75rem 0;min-width:0;background:transparent}
.record-content-no-tabs .child-grid{margin:.5rem 0}

/* TASK-037: dynamic legacy MDI menu hierarchy and PR module shortcuts. */
.legacy-navigation{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap;margin:1rem 0;padding:.65rem;background:#e9edf5;border:1px solid #cbd5e1;border-radius:8px}
.legacy-menu-branch{position:relative;min-width:110px}
.legacy-menu-branch>summary{cursor:pointer;padding:.45rem .65rem;font-weight:600;list-style:revert}
.legacy-menu-children{padding:.35rem;display:flex;flex-direction:column;gap:.2rem;background:#fff;border:1px solid #cbd5e1;border-radius:6px;min-width:170px;max-width:min(90vw,420px)}
.legacy-menu-children .legacy-menu-children{margin-left:.7rem}
.legacy-menu-action{background:transparent;color:#172554;text-align:left;padding:.45rem .6rem;white-space:normal}
.legacy-menu-action:hover{background:#dbeafe}
.legacy-module-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}
.legacy-action-preview{border:1px solid #cbd5e1;border-radius:8px;padding:1rem;background:#fff;margin:.75rem 0}
.legacy-action-close{float:right}

/* TASK-038: integrated top bar, modules and inline creation row. */
.application-topbar{display:flex;align-items:center;gap:.75rem;padding:.55rem 1.25rem;min-height:3.5rem;flex-wrap:wrap}
.application-topbar .application-name{font-size:1.25rem;white-space:nowrap}
.application-topbar label{margin:0;font-size:.85rem}
.application-topbar select{padding:.35rem;border-radius:4px}
.application-topbar .topbar-navigation{margin:0;padding:0;border:0;background:transparent;gap:.15rem;flex:1;min-width:0;align-items:center}
.topbar-navigation .legacy-menu-branch{min-width:0}
.topbar-navigation .legacy-menu-branch>summary{color:white;list-style:none;white-space:nowrap}
.topbar-navigation .legacy-menu-branch>summary:hover{background:#1e40af;border-radius:4px}
.topbar-navigation .legacy-menu-children{position:absolute;top:100%;left:0;z-index:1500;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.topbar-navigation .legacy-menu-children .legacy-menu-children{position:static;box-shadow:none}
.topbar-user{margin-left:auto;white-space:nowrap}
.topbar-auth-button{background:#334155;white-space:nowrap}
.application-modules{background:#e9edf5;border-bottom:1px solid #cbd5e1;margin:0;padding:.6rem 1.25rem;align-items:center}
.module-table-picker{display:flex;gap:.4rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.module-table-picker label{margin:0}
.module-table-picker select{padding:.45rem;border:1px solid #94a3b8;border-radius:4px;max-width:240px}
.application-content{max-width:1200px;margin:1.25rem auto;padding:0 1rem}
.grid-new-record-row td{background:#f1f5f9;min-height:2rem}
.grid-new-record-row button{font-weight:600}
@media(max-width:850px){.application-topbar .topbar-navigation{order:3;flex-basis:100%}.module-table-picker{margin-left:0}}

/* TASK-039: circuit-scoped theme tokens, inherited by every nested modal/grid.
   A table's explicit CO= background remains inline and takes precedence. */
.application-shell{--page:#f8fafc;--panel:#fff;--soft:#e9edf5;--field:#fff;--ink:#1e293b;--muted:#64748b;--line:#cbd5e1;--header:#172554;--accent:#1d4ed8;--accent-hover:#1e40af;--action-ink:#fff;--new-row:#f1f5f9;--menu-ink:#172554;--input-ink:#1e293b;min-height:100vh;background:var(--page);color:var(--ink);padding-bottom:1px}
.application-shell.theme-night{--page:#101827;--panel:#1d293b;--soft:#29374c;--field:#182337;--ink:#e9eff9;--muted:#b7c6da;--line:#4a5c75;--header:#0b1220;--accent:#587dd4;--accent-hover:#7596e6;--action-ink:#fff;--new-row:#27374a;--menu-ink:#e9eff9;--input-ink:#e9eff9}
.application-shell.theme-crimson{--page:#641c37;--panel:#8b3550;--soft:#a9515c;--field:#f4c4a1;--ink:#fff0df;--muted:#ffe1c5;--line:#d68b7c;--header:#52132e;--accent:#d17a4c;--accent-hover:#e59b67;--action-ink:#29131d;--new-row:#b66567;--menu-ink:#fff0df;--input-ink:#3c1d29}
.application-shell .application-topbar{background:var(--header);color:#fff;gap:.75rem}
.application-shell .application-name{margin-right:clamp(1.25rem,3vw,3.5rem)}
.application-shell .topbar-navigation{flex:1 1 auto}
.application-shell .topbar-navigation .legacy-menu-branch>summary:hover{background:var(--accent-hover)}
.application-shell .topbar-preferences{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.application-shell .topbar-preferences select{max-width:125px}
.application-shell .topbar-user{margin-left:.5rem}
.application-shell .topbar-auth-button{background:var(--accent);color:var(--action-ink)}
.application-shell .application-modules,.application-shell .legacy-navigation:not(.topbar-navigation){background:var(--soft);border-color:var(--line)}
.application-shell .ventana,.application-shell .record-modal,.application-shell .form-preview,.application-shell .legacy-action-preview,.application-shell .auth-panel{background:var(--panel);color:var(--ink);border-color:var(--line)}
.application-shell .nested-table-window,.application-shell .record-tab-content,.application-shell .child-tab-group{border-color:var(--line)}
.application-shell .record-tab-content{background:transparent}
.application-shell .metadata-table th{background:var(--soft);color:var(--ink)}
.application-shell .metadata-table td,.application-shell .metadata-table th{border-color:var(--line)}
.application-shell .metadata-table td{color:var(--ink)}
.application-shell .grid-new-record-row td{background:var(--new-row)}
.application-shell button{background:var(--accent);color:var(--action-ink)}
.application-shell button:disabled{opacity:.6;cursor:not-allowed}
.application-shell input,.application-shell textarea,.application-shell select{background:var(--field);color:var(--input-ink);border:1px solid var(--line);border-radius:4px}
.application-shell .form-preview-field input,.application-shell .form-preview-field textarea{background:var(--field);border-color:var(--line);color:var(--input-ink)}
.application-shell .record-tabs{border-color:var(--line)}
.application-shell .record-tabs button{background:var(--soft);color:var(--ink)}
.application-shell .record-tabs button.active{background:var(--accent);color:var(--action-ink)}
.application-shell .legacy-menu-children{background:var(--panel);border-color:var(--line);color:var(--ink)}
.application-shell .legacy-menu-action{background:transparent;color:var(--menu-ink)}
.application-shell .legacy-menu-action:hover{background:var(--soft)}
.application-shell .note,.application-shell .form-preview-field small{color:var(--muted)}
/* Inline New Record action uses the same cell dimensions as ordinary rows. */
.application-shell .metadata-table tbody td{vertical-align:middle}
.application-shell .grid-new-record-row td{height:auto;min-height:0;padding:.45rem}
.application-shell .grid-new-record-row button{padding:.25rem .5rem;margin:0;font:inherit;line-height:1.2}
@media(max-width:850px){.application-shell .topbar-preferences{margin-left:auto}.application-shell .application-name{margin-right:.75rem}}

/* TASK-040: one responsive grid toolbar at every nesting level. */
.table-window .grid-toolbar-heading{display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.5rem);flex-wrap:wrap;margin-bottom:.75rem}
.table-window .grid-toolbar-title{flex:0 0 auto;margin:0;min-width:0}
.table-window .grid-toolbar-middle{display:flex;align-items:center;justify-content:center;flex:1 1 550px;min-width:0;gap:.5rem 1rem;flex-wrap:wrap}
.table-window .grid-toolbar-search,.table-window .grid-toolbar-pagination{display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap;min-width:0}
.table-window .grid-toolbar-search input{width:clamp(125px,15vw,220px);min-width:100px;box-sizing:border-box}
.table-window .grid-toolbar-search select{max-width:145px}
.table-window .grid-toolbar-pagination{font-size:.88rem;white-space:nowrap}
.table-window .grid-toolbar-pagination button,.table-window .grid-toolbar-search button{margin:0;padding:.4rem .55rem}
.table-window .grid-toolbar-count{margin-right:.25rem}
.table-window .grid-toolbar-close{flex:0 0 auto;margin:0 0 0 auto}
@media(max-width:850px){.table-window .grid-toolbar-heading{align-items:flex-start}.table-window .grid-toolbar-middle{order:3;flex-basis:100%;justify-content:flex-start}.table-window .grid-toolbar-search,.table-window .grid-toolbar-pagination{justify-content:flex-start}}

/* TASK-041: three stable header sections; navigation only for authenticated users. */
.application-shell .application-topbar {display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,2fr) minmax(max-content,1.6fr);align-items:center;column-gap:clamp(1.5rem,3vw,3rem);row-gap:.65rem}
.application-topbar .topbar-section {min-width:0;display:flex;align-items:center}
.application-topbar .topbar-brand {justify-content:flex-start}
.application-topbar .topbar-center {justify-content:center}
.application-topbar .topbar-right {justify-content:flex-end;gap:.65rem;flex-wrap:wrap}
.application-shell .application-topbar .topbar-navigation {flex:0 1 auto;justify-content:center;min-width:0}
.application-shell .application-topbar .topbar-user {margin-left:0}
.application-topbar .topbar-login {display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;margin:0}
.application-topbar .topbar-login input {width:clamp(95px,9vw,145px);min-width:0;box-sizing:border-box;padding:.35rem;border-radius:4px}
.topbar-login-error {margin:.4rem 1.25rem;color:var(--danger,#b91c1c)}
@media(max-width:1150px){.application-shell .application-topbar{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.application-topbar .topbar-right{grid-column:1/-1;justify-content:flex-end}.application-shell .application-topbar .topbar-navigation{order:initial;flex-basis:auto}}
@media(max-width:650px){.application-shell .application-topbar{grid-template-columns:1fr}.application-topbar .topbar-center,.application-topbar .topbar-right{grid-column:1;justify-content:flex-start}.application-topbar .topbar-right{flex-wrap:wrap}.application-shell .application-topbar .topbar-navigation{justify-content:flex-start}}

/* TASK-042: a three-zone header for every record modal. The body contains only tabs, fields and child grids. */
.record-modal-heading{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr) auto;align-items:start;gap:clamp(.75rem,2vw,1.5rem);margin-bottom:.75rem}
.record-modal-title{margin:.25rem 0;min-width:0;overflow-wrap:anywhere}
.record-modal-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .65rem;min-width:0}
.record-modal-actions>.table-search-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem}
.record-modal-actions>p{margin:.25rem 0}
.record-modal-actions>.update-plan-preview{flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box}
.record-modal-actions .sql-preview,.record-modal-actions pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.record-modal-actions .metadata-scroll{max-width:100%;overflow-x:auto}
.record-modal-close{justify-self:end;white-space:nowrap;margin:0}
@media(max-width:720px){.record-modal-heading{grid-template-columns:minmax(0,1fr) auto}.record-modal-actions{grid-column:1/-1;grid-row:2;justify-content:flex-start}.record-modal-close{grid-column:2;grid-row:1}}

/* HTML=1 fields share the existing record form layout and theme tokens. */
.form-preview-field .html-field-view{min-height:6rem;padding:.75rem;border:1px solid var(--line,#cbd5e1);border-radius:.3rem;background:var(--field,#fff);color:var(--input-ink,#111827);overflow-wrap:anywhere}
.form-preview-field .html-field-view img{max-width:100%;height:auto}
.form-preview-field .html-field-view table{border-collapse:collapse;max-width:100%}
.form-preview-field .html-field-view td,.form-preview-field .html-field-view th{border:1px solid var(--line,#cbd5e1);padding:.3rem}
.form-preview-field .jodit-container{max-width:100%;color:#111827}
.form-preview-field .jodit-workplace{min-height:200px}


/* TASK-047: Preserve Jodit's native SVG geometry and make its controls match
   Generic's compact, restrained toolbar styling. The app's global button rule
   must not impose its padding, solid background or colors on editor controls. */
.application-shell .form-preview-field .jodit-container {
    --jodit-color-background-default:var(--panel);
    --jodit-color-background-light-gray:var(--soft);
    --jodit-color-border:var(--line);
    --jodit-color-text:var(--ink);
    --jodit-color-icon:var(--ink);
    --jodit-color-button-background-hover:var(--soft);
    --jodit-color-button-background-active:var(--accent);
    --jodit-color-panel:var(--panel);
    max-width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--ink);
    overflow:visible;
}
.application-shell .form-preview-field .jodit-toolbar__box,
.application-shell .form-preview-field .jodit-toolbar-editor-collection,
.application-shell .form-preview-field .jodit-toolbar__box .jodit-toolbar-editor-collection {
    background:var(--soft);
    border-color:var(--line);
    color:var(--ink);
}
.application-shell .form-preview-field .jodit-toolbar__box {
    padding:5px 7px;
    border-radius:5px 5px 0 0;
}
.application-shell .form-preview-field .jodit-toolbar-button {
    margin:2px;
    border-radius:5px;
}
/* The selector intentionally includes `button` to override the global `button`
   rule without touching popup actions or the actual document content. */
.application-shell .form-preview-field .jodit-toolbar-button button.jodit-toolbar-button__button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    margin:0;
    padding:5px;
    border:1px solid var(--line);
    border-radius:5px;
    background:var(--panel);
    color:var(--ink);
    box-shadow:none;
    line-height:1;
    font-size:14px;
    transition:background-color .12s ease,border-color .12s ease;
}
/* Keep the icon's native stroke/fill definitions. In particular, NEVER force
   `svg path { fill: currentColor }`: many Jodit icons are stroke-based. */
.application-shell .form-preview-field .jodit-toolbar-button__button svg {
    width:18px;
    height:18px;
    max-width:100%;
    max-height:100%;
    color:inherit;
}
.application-shell .form-preview-field .jodit-toolbar-button button.jodit-toolbar-button__button:hover,
.application-shell .form-preview-field .jodit-toolbar-button button.jodit-toolbar-button__button:focus-visible {
    background:var(--soft);
    border-color:var(--accent);
    color:var(--ink);
}
.application-shell .form-preview-field .jodit-toolbar-button.jodit-toolbar-button_active button.jodit-toolbar-button__button,
.application-shell .form-preview-field .jodit-toolbar-button.jodit-toolbar-button_active button.jodit-toolbar-button__button:hover {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--action-ink);
}
.application-shell .form-preview-field .jodit-toolbar-button button.jodit-toolbar-button__button:disabled {
    opacity:.45;
    cursor:default;
}
/* Split/dropdown triggers need room without being clipped or painted blue. */
.application-shell .form-preview-field .jodit-toolbar-button__trigger {
    color:inherit;
}
.application-shell .form-preview-field .jodit-status-bar,
.application-shell .form-preview-field .jodit-status-bar a {
    background:var(--soft);
    color:var(--ink);
    border-color:var(--line);
}
.application-shell .form-preview-field .jodit-workplace {
    background:var(--field);
    border-color:var(--line);
}
/* Do not change the colors that the user applied to the HTML document. */
.application-shell .form-preview-field .jodit-wysiwyg {
    background:#fff;
    color:#1e293b;
}
.application-shell .form-preview-field .jodit-source {
    background:var(--field);
    color:var(--input-ink);
}
/* Grid HTML uses the same sanitizer as record view; constrain rich content to table cells. */
.application-shell .metadata-table .grid-html-content {min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;line-height:1.4}
.application-shell .metadata-table .grid-html-content img {max-width:100%;height:auto}
.application-shell .metadata-table .grid-html-content table {border-collapse:collapse;max-width:100%}
.application-shell .metadata-table .grid-html-content th,
.application-shell .metadata-table .grid-html-content td {border:1px solid var(--line);padding:.25rem}
.application-shell .metadata-table .grid-html-content p {margin:.25em 0}
.application-shell .metadata-table .grid-html-content hr {border:0;border-top:1px solid var(--line);margin:.5rem 0}

/* TASK-048: Contrast-aware text across all three themes and CO= surfaces.
   Text uses the actual nearest background, not the page theme, when CO= is set. */
.application-shell {--surface-ink:var(--ink);--on-soft:#172554;--on-header:#ffffff;--danger:#b42318}
.application-shell.theme-night {--on-soft:#e9eff9;--on-header:#ffffff;--danger:#ff9a93}
.application-shell.theme-crimson {--on-soft:#ffffff;--on-header:#ffffff;--danger:#ffe4a8}
.application-shell .ventana,.application-shell .record-modal {color:var(--surface-ink,var(--ink))}
.application-shell .ventana h1,.application-shell .ventana h2,.application-shell .ventana h3,
.application-shell .ventana h4,.application-shell .ventana h5,
.application-shell .record-modal h1,.application-shell .record-modal h2,
.application-shell .record-modal h3,.application-shell .record-modal h4,
.application-shell .record-modal h5 {color:inherit}
/* Panels with their own opaque background must use the panel's own ink. */
.application-shell .form-preview,.application-shell .legacy-action-preview {color:var(--ink)}
.application-shell .application-topbar {color:var(--on-header)}
.application-shell .application-topbar .topbar-navigation summary {color:var(--on-header)}
.application-shell .application-topbar .legacy-menu-children {color:var(--ink)}
.application-shell .application-modules,.application-shell .legacy-navigation:not(.topbar-navigation) {color:var(--on-soft)}
.application-shell .metadata-table th {color:var(--on-soft)}
.application-shell .metadata-table td {color:inherit}
.application-shell .metadata-table .grid-new-record-row td {color:var(--on-soft)}
.application-shell .record-tabs button:not(.active) {color:var(--on-soft)}
.application-shell .legacy-menu-action {color:var(--ink)}
.application-shell .note,.application-shell .form-preview-field small {color:var(--muted)}
.application-shell .draft-validation-error,.application-shell .topbar-login-error {color:var(--danger)}
.application-shell button,.application-shell button:hover {color:var(--action-ink)}
.application-shell .record-tabs button:not(.active) {color:var(--on-soft)}
.application-shell .legacy-menu-action,.application-shell .legacy-menu-action:hover {color:var(--ink)}
/* Jodit: the editable document stays white; its foreground must remain dark.
   User-selected HTML colors are intentionally preserved. */
.application-shell .form-preview-field .jodit-wysiwyg {background:#ffffff;color:#111827}
.application-shell .form-preview-field .jodit-container .jodit-toolbar-button button.jodit-toolbar-button__button {color:var(--ink)}
.application-shell .form-preview-field .jodit-container .jodit-toolbar-button.jodit-toolbar-button_active button.jodit-toolbar-button__button {color:var(--action-ink)}
/* Avoid inherited light ink on native input fields and HTML preview areas. */
.application-shell .html-field-view {color:var(--input-ink)}
.application-shell .form-preview-field input,.application-shell .form-preview-field textarea,
.application-shell .form-preview-field select {color:var(--input-ink)}

/* TASK-049: nested menu surfaces always use their own background and foreground. */
.application-shell .topbar-navigation .legacy-menu-children,
.application-shell .topbar-navigation .legacy-menu-children .legacy-menu-children {background:var(--panel);color:var(--ink);border-color:var(--line)}
.application-shell .topbar-navigation .legacy-menu-children .legacy-menu-branch>summary {color:var(--ink);background:transparent}
.application-shell .topbar-navigation .legacy-menu-children .legacy-menu-branch>summary:hover,
.application-shell .topbar-navigation .legacy-menu-children .legacy-menu-action:hover {background:var(--soft);color:var(--ink)}
.application-shell .topbar-navigation .legacy-menu-children .legacy-menu-action {color:var(--ink);background:transparent}
.report-window {margin:.75rem 0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);overflow:hidden}
.report-heading {display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr) auto;gap:1rem;align-items:center;background:var(--header);color:#fff;padding:.85rem 1rem}
.report-heading h2{font-size:1.1rem;margin:0;color:inherit}
.report-heading .report-status{color:#fff}
.report-variables{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.report-variables label{display:flex;flex-direction:column;gap:.25rem}
.report-variables input{background:var(--field);color:var(--input-ink);border:1px solid var(--line);padding:.4rem;border-radius:4px}
.report-result{overflow:auto;max-height:65vh;padding:.5rem}
.report-result table{border-collapse:collapse;width:100%;font-size:.9rem}
.report-result th,.report-result td{border:1px solid var(--line);padding:.4rem;text-align:left;white-space:pre-wrap}
.report-result th{background:var(--soft);color:var(--ink);position:sticky;top:0}
.report-result tbody tr:nth-child(even){background:var(--soft)}
.report-result .report-row-open{cursor:pointer}
.report-result .report-row-open:hover{outline:1px solid var(--accent)}
@media(max-width:750px){.report-heading{grid-template-columns:1fr auto}.report-heading .report-status{grid-column:1/-1;grid-row:2}}

.report-controls{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;padding:.65rem 1rem;border-bottom:1px solid var(--line)}
.report-controls button,.report-result button{background:var(--accent);color:#fff;border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem;cursor:pointer}
.report-controls button:disabled{opacity:.5;cursor:default}
.report-message{padding:.65rem 1rem}
.report-heading .report-status{justify-self:center}

/* Report-linked records use the shared modal without creating a parent grid window. */
.record-only-host { display: contents; }

/* TASK-057: keep window close buttons at the upper-right, independently of toolbar wrapping. */
.table-window .grid-toolbar-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.6rem 1rem}
.table-window .grid-toolbar-title{grid-column:1;grid-row:1;min-width:0;overflow-wrap:anywhere}
.table-window .grid-toolbar-close{grid-column:2;grid-row:1;justify-self:end;align-self:start;margin:0}
.table-window .grid-toolbar-middle{grid-column:1/-1;grid-row:2;min-width:0;flex-basis:auto;justify-content:center}
.table-window .grid-toolbar-search,.table-window .grid-toolbar-pagination{min-width:0}
.application-shell .window-close-icon,.window-close-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;min-width:2rem;padding:0;margin:0;border-radius:.35rem;font-size:1.5rem;font-weight:400;line-height:1;cursor:pointer}
.record-modal-heading{grid-template-columns:minmax(0,1fr) auto}
.record-modal-heading>.record-modal-close{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.record-modal-heading>.record-modal-actions{grid-column:1/-1;grid-row:2;min-width:0}
.report-heading{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.report-heading>h2{grid-column:1;grid-row:1;min-width:0;overflow-wrap:anywhere}
.report-heading>.report-close-icon{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.report-heading>.report-status{grid-column:1/-1;grid-row:2;justify-self:start}
@media(max-width:850px){.table-window .grid-toolbar-middle{grid-column:1/-1;grid-row:2;justify-content:flex-start}}
@media(max-width:720px){.record-modal-heading>.record-modal-actions{grid-column:1/-1;grid-row:2}.record-modal-heading>.record-modal-close{grid-column:2;grid-row:1}}

/* TASK-062: Date/time picker in level-2 record forms. */
.datetime-field{position:relative;display:flex;align-items:stretch;gap:.3rem;min-width:0}
.datetime-field>input{flex:1;min-width:0}
.form-preview-field .datetime-trigger{flex:0 0 2.4rem;border:1px solid var(--line,#cbd5e1);border-radius:4px;background:var(--panel,#fff);color:var(--ink,#111);cursor:pointer;font-size:1.1rem}
.datetime-picker{position:absolute;top:calc(100% + 4px);left:0;z-index:50;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;width:max-content;max-width:min(90vw,350px);padding:.7rem;background:var(--panel,#fff);color:var(--ink,#111);border:1px solid var(--line,#cbd5e1);border-radius:7px;box-shadow:0 8px 24px #0003}
.form-preview-field .datetime-picker input{width:auto;max-width:100%;min-width:0;color:var(--input-ink,#111);background:var(--field,#fff)}
.datetime-picker-actions{display:flex;gap:.35rem;width:100%;justify-content:flex-end}
.datetime-picker-actions button{padding:.3rem .65rem;border:1px solid var(--line,#cbd5e1);border-radius:4px;background:var(--field,#fff);color:var(--input-ink,#111);cursor:pointer}

/* TASK-065: Direct month calendar; no nested native date picker. */
.datetime-picker{display:block;width:288px;max-width:min(90vw,320px);padding:.7rem;box-sizing:border-box}
.datetime-calendar-heading{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.55rem;text-transform:capitalize}
.datetime-calendar-heading strong{font-size:.92rem;text-align:center}
.datetime-calendar-heading button{border:0;background:transparent;color:var(--ink,#111);font-size:1.5rem;cursor:pointer;min-width:2rem;min-height:2rem}
.datetime-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.datetime-weekday{font-size:.75rem;text-align:center;color:var(--ink,#111);opacity:.7;padding:.25rem 0}
.datetime-calendar-grid .datetime-day{display:grid;place-items:center;min-width:0;width:100%;aspect-ratio:1;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink,#111);cursor:pointer;padding:0;font-size:.85rem}
.datetime-calendar-grid .datetime-day:hover,.datetime-calendar-grid .datetime-day:focus-visible{background:var(--field,#edf2fa);border-color:var(--line,#cbd5e1)}
.datetime-calendar-grid .datetime-day.today{border-color:var(--line,#64748b);font-weight:700}
.datetime-calendar-grid .datetime-day.selected{background:#2454d8;color:#fff;border-color:#2454d8}
.datetime-time-label{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.85rem}
.form-preview-field .datetime-time-label input{width:145px;max-width:70%;padding:.3rem}
.datetime-picker-actions{margin-top:.6rem}

/* TASK-074: compact, single-line window headers. Close is independent of layout. */
.table-window .grid-toolbar-heading,
.record-modal-heading,
.report-heading {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,3fr);
    grid-template-rows:auto;
    align-items:center;
    column-gap:clamp(.5rem,1.5vw,1.25rem);
    padding-right:3rem;
}
.table-window .grid-toolbar-title,
.record-modal-heading>.record-modal-title,
.report-heading>h2 {
    grid-column:1;
    grid-row:1;
    min-width:0;
    margin:0;
}
.table-window .grid-toolbar-middle,
.record-modal-heading>.record-modal-actions,
.report-heading>.report-status {
    grid-column:2;
    grid-row:1;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    margin:0;
    justify-content:center;
}
.table-window .grid-toolbar-middle,
.record-modal-heading>.record-modal-actions {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    gap:.4rem .65rem;
}
.table-window .grid-toolbar-middle>*,
.record-modal-heading>.record-modal-actions>* {
    flex-shrink:0;
}
.table-window .grid-toolbar-search,
.table-window .grid-toolbar-pagination,
.record-modal-heading>.record-modal-actions>.table-search-controls {
    flex-wrap:nowrap;
}
.table-window .grid-toolbar-close,
.record-modal-heading>.record-modal-close,
.report-heading>.report-close-icon {
    position:absolute;
    top:0;
    right:0;
    grid-column:auto;
    grid-row:auto;
    margin:0;
    z-index:2;
}
.report-heading>.report-status {text-align:center;justify-self:stretch}
@media(max-width:850px) {
    .table-window .grid-toolbar-middle,
    .record-modal-heading>.record-modal-actions,
    .report-heading>.report-status {
        grid-column:2;
        grid-row:1;
        justify-content:center;
    }
}

/* TASK-075: give the middle controls more room; compact the search field. */
.table-window .grid-toolbar-heading,
.record-modal-heading,
.report-heading {
    grid-template-columns:minmax(0,.65fr) minmax(0,3.35fr);
}
.table-window .grid-toolbar-search input {
    width:clamp(105px,10vw,155px);
    min-width:100px;
}

/* TASK-082: preserve a compact single-row header while allowing long edit
   messages and confirmation details to wrap in the central area. */
.record-modal-heading>.record-modal-actions {
    flex-wrap:wrap;
    overflow-x:visible;
    overflow-y:visible;
    align-content:center;
    white-space:normal;
}
.record-modal-heading>.record-modal-actions>* {
    flex-shrink:1;
    min-width:0;
    max-width:100%;
}
.record-modal-heading>.record-modal-actions>p,
.record-modal-heading>.record-modal-actions>span,
.record-modal-heading>.record-modal-actions>.validation-message {
    white-space:normal;
    overflow-wrap:anywhere;
}
.record-modal-heading>.record-modal-actions>.update-plan-preview {
    flex:1 1 100%;
    width:100%;
    overflow-wrap:anywhere;
}

/* TASK-086: alarm windows live in a fixed right-hand dock, separate from center grids. */
/* TASK-087: full-width workspace with a real, non-floating right sidebar. */
.application-shell .application-content{max-width:none;width:100%;box-sizing:border-box;margin:1.25rem 0;padding:0 clamp(10px,1.2vw,24px)}
.application-workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(410px,30vw,560px);align-items:start;gap:16px;width:100%;min-width:0}
.application-workspace-main{min-width:0;width:100%;margin-top:0;align-content:start}
.application-workspace-main>.table-window,.application-workspace-main>.report-window{flex:1 1 100%;min-width:0;max-width:100%}
.dynamic-alarm-dock{position:static;min-width:0;width:100%;display:flex;flex-direction:column;gap:12px;overflow:visible}
.dynamic-alarm-window,.dynamic-alarm-dock>.dynamic-alarm-error{background:var(--panel,#fff);color:var(--ink,#1e293b);border:1px solid var(--line,#cbd5e1);border-radius:8px;box-shadow:0 2px 9px #0001;overflow:hidden;flex-shrink:0}
.dynamic-alarm-heading{background:#172554;color:#fff;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.dynamic-alarm-heading span{font-size:.75rem}.dynamic-alarm-scroll{overflow:auto;max-height:360px}.dynamic-alarm-window table{border-collapse:collapse;width:100%;font-size:.82rem}.dynamic-alarm-window th,.dynamic-alarm-window td{padding:6px 8px;border-bottom:1px solid #cbd5e1;text-align:left;white-space:nowrap}.dynamic-alarm-window button{padding:4px 8px}.dynamic-alarm-window small{display:block;padding:5px 10px}.dynamic-alarm-error{color:#b91c1c;padding:10px;overflow-wrap:anywhere}
@media(max-width:1050px){.application-workspace{grid-template-columns:minmax(0,1fr)}.dynamic-alarm-dock{width:100%}}