:root { font-family: Inter, Segoe UI, Arial, sans-serif; color: #182230; background: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #17243a; color: white; padding: 18px 28px; }
header h1 { margin: 0; font-size: 21px; }
header p { margin: 5px 0 0; color: #c3cee0; font-size: 13px; }
main { max-width: 1440px; margin: 22px auto; padding: 0 20px 30px; }
.columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 18px; align-items: start; }
.primary-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.primary-column > .panel { min-width: 0; }
.panel { background: white; border: 1px solid #dce2eb; border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px #1c2b4410; }
.panel h2 { margin: 0 0 12px; font-size: 16px; }
textarea { width: 100%; min-height: 390px; resize: vertical; border: 1px solid #cbd4e1; border-radius: 8px; padding: 14px; font: 13px/1.55 Consolas, monospace; color: #e7edf7; background: #17243a; tab-size: 4; }
button { border: 0; border-radius: 7px; padding: 10px 16px; background: #2563eb; color: white; font-weight: 600; cursor: pointer; margin-top: 12px; }
button.secondary { background: #e8edf5; color: #26364e; margin-left: 8px; }
.status { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: #eef2f8; font-size: 13px; }
.error { background: #fff0f0; color: #9b1c1c; }
.success { background: #eaf8ef; color: #17643a; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 Consolas, monospace; background: #f5f7fb; padding: 10px; border-radius: 7px; }
.schema { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.classbox { border: 1px solid #aebbd0; border-radius: 8px; overflow: hidden; font-size: 13px; }
.classbox strong { display: block; padding: 8px 10px; background: #eaf0fa; }
.classbox span { display: block; padding: 7px 10px; border-top: 1px solid #e6eaf0; font-family: Consolas, monospace; }
.hint { color: #64748b; font-size: 12px; line-height: 1.5; }
@media(max-width: 850px) { .columns { grid-template-columns: 1fr; } }

/* Blazor zobrazí tento panel pouze při neošetřené chybě.
   Bez výchozího display:none by byl viditelný hned po načtení stránky. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff3cd;
    color: #664d03;
    padding: 0.8rem 3.5rem 0.8rem 1.25rem;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .reload {
    color: #664d03;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.35rem;
    right: 0.75rem;
    margin: 0;
    padding: 0.25rem 0.55rem;
    background: transparent;
    color: #664d03;
    font-size: 1.25rem;
}

.runtime-objects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 12px 0 18px;
}
.runtime-object {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #b8c7df;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    background: #fbfdff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .88rem;
}
.runtime-object strong {
    margin: -10px -10px 4px;
    padding: 8px 10px;
    background: #e8eef8;
    font-family: system-ui, sans-serif;
}
.runtime-link, .change-entry {
    padding: 7px 9px;
    margin: 5px 0;
    border-radius: 6px;
    background: #f0f4fa;
    font-size: .9rem;
}
.runtime-link small { color: #687991; }

.object-graph-scroll {
    overflow: auto;
    max-height: min(72vh, 820px);
    margin: 10px -4px 18px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background-color: #fbfcfe;
    background-image: radial-gradient(#d7dfeb 1px, transparent 1px);
    background-size: 16px 16px;
}
.object-graph { display: block; min-width: 100%; height: auto; }
.object-edge path { fill: none; stroke: #64748b; stroke-width: 2; }
.object-edge text { font: 11px system-ui, sans-serif; fill: #475569; paint-order: stroke; stroke: #fbfcfe; stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; }
.object-node rect { fill: #fff; stroke: #9aabc2; stroke-width: 1.4; filter: drop-shadow(0 2px 3px #1e293b18); }
.object-node .object-node-header { fill: #e8eef8; stroke: none; }
.object-node-title { font: 600 12px system-ui, sans-serif; fill: #1e293b; }
.object-node-attribute { font: 11px ui-monospace, Consolas, monospace; fill: #334155; }
.object-node-more { font: italic 10px system-ui, sans-serif; fill: #64748b; }

/* Metamodel editor */
.model-editor { margin-bottom: 18px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h2, .section-heading h3 { margin: 0; }
.section-heading.compact { align-items: center; }
.model-count { color: #64748b; font-size: 12px; white-space: nowrap; }
.model-layout { display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.class-list { border-right: 1px solid #e2e8f0; padding-right: 14px; }
.class-list h3, .class-editor h3, .association-editor h3 { margin: 0 0 10px; font-size: 14px; }
.class-select { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 6px; padding: 9px 10px; background: #f5f7fb; color: #243247; border: 1px solid #e2e8f0; text-align: left; }
.class-select.selected { background: #eaf1ff; border-color: #8eaff8; color: #1746a2; }
.class-select small { margin-top: 3px; color: #64748b; font-weight: 400; }
.inline-create { display: flex; gap: 5px; margin-top: 12px; }
.inline-create input { min-width: 0; width: 100%; }
.inline-create button { margin: 0; padding: 7px 12px; }
.model-editor input, .model-editor select { min-width: 0; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 9px; background: white; color: #1e293b; font: inherit; }
.rename-row { margin: 8px 0 12px; }
.rename-row input { width: min(100%, 330px); }
.button-row { display: flex; gap: 6px; }
button.small { margin: 0; padding: 6px 9px; font-size: 12px; }
button.danger { background: #feecec; color: #a12626; }
button.ghost { min-width: 30px; background: transparent; color: #9b3434; font-size: 18px; padding: 2px 8px; }
.attribute-list { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.attribute-row, .association-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid #edf0f5; }
.attribute-row:last-child, .association-row:last-child { border-bottom: 0; }
.attribute-row div, .association-row div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.attribute-row strong, .association-row strong { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.attribute-row span, .association-row span { color: #64748b; font-size: 12px; }
.class-editor h4 { margin: 14px 0 8px; font-size: 13px; }
.attribute-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 7px; }
.attribute-form button, .association-form button { margin: 0; white-space: nowrap; }
.association-editor { border-top: 1px solid #e2e8f0; margin-top: 18px; padding-top: 15px; }
.association-list { border: 1px solid #e2e8f0; border-radius: 8px; margin: 10px 0; }
.association-form { display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr auto; gap: 8px; align-items: end; }
.association-form label { display: flex; flex-direction: column; gap: 4px; color: #64748b; font-size: 11px; }
.editor-message { margin-top: 12px; border-radius: 7px; padding: 9px 11px; font-size: 13px; }
.editor-error { color: #9b1c1c; background: #fff0f0; }
.editor-success { color: #17643a; background: #eaf8ef; }
.empty-state { color: #64748b; padding: 22px; background: #f8fafc; border-radius: 8px; }
.association-summary { font-size: 12px; color: #475569; }
@media(max-width: 900px) { .attribute-form, .association-form { grid-template-columns: 1fr 1fr; } }
@media(max-width: 600px) { .model-layout { grid-template-columns: 1fr; } .class-list { border-right: 0; border-bottom: 1px solid #e2e8f0; padding: 0 0 12px; } .section-heading { flex-direction: column; } .attribute-form, .association-form { grid-template-columns: 1fr; } }

.collection-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--text, inherit);
    font-size: .9rem;
}
.collection-option input { width: auto; margin: 0; }


/* Diagram selector and UML class diagram */
.diagram-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.diagram-heading h2 { margin: 0; }
.diagram-tabs { display: flex; gap: 5px; padding: 3px; border: 1px solid #dbe3ef; border-radius: 9px; background: #f4f7fb; }
.diagram-tabs button { margin: 0; padding: 7px 11px; border-radius: 6px; background: transparent; color: #526176; font-size: 12px; }
.diagram-tabs button.active { background: #fff; color: #1746a2; box-shadow: 0 1px 3px #17243a20; }
.class-diagram-scroll { overflow: auto; max-height: min(72vh, 820px); margin: 8px -4px 8px; padding: 8px 4px; border: 1px solid #e2e8f0; border-radius: 9px; background-color: #fbfcfe; background-image: radial-gradient(#d7dfeb 1px, transparent 1px); background-size: 16px 16px; }
.class-diagram { display: block; min-width: 0; max-width: none; height: auto; }
.diagram-toolbar { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.diagram-toolbar button { min-width: 34px; margin: 0; padding: 5px 10px; border: 1px solid #d7e0ed; border-radius: 6px; background: #f7f9fc; color: #334155; font-size: 13px; }
.diagram-toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.diagram-zoom-value { min-width: 48px; color: #64748b; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.class-association-line { fill: none; stroke: #475569; stroke-width: 2.4; stroke-linecap: round; }
.class-association-name { font: 600 11px system-ui, sans-serif; fill: #334155; text-anchor: middle; paint-order: stroke; stroke: #fbfcfe; stroke-width: 4px; stroke-linejoin: round; }
.class-association-multiplicity { font: 10px system-ui, sans-serif; fill: #475569; text-anchor: middle; paint-order: stroke; stroke: #fbfcfe; stroke-width: 4px; }
.class-node rect { fill: #fff; stroke: #8fa2bd; stroke-width: 1.4; filter: drop-shadow(0 2px 3px #1e293b18); }
.class-node-header { fill: #e8eef8; stroke: none; }
.class-node-title { font: 600 13px system-ui, sans-serif; fill: #1e293b; }
.class-node-divider { stroke: #dbe3ef; stroke-width: 1; }
.class-node-attribute { font: 11px ui-monospace, Consolas, monospace; fill: #334155; }
.class-node-empty { font: italic 11px system-ui, sans-serif; fill: #94a3b8; }
.class-diagram-legend { display: flex; flex-wrap: wrap; gap: 14px; color: #64748b; font-size: 11px; }
@media(max-width: 600px) { .diagram-heading { align-items: flex-start; flex-direction: column; } .diagram-tabs { width: 100%; } .diagram-tabs button { flex: 1; } }

.diagram-drag-hint { margin-left: auto; color: #64748b; font-size: 11px; }
.class-node { touch-action: none; user-select: none; }
.class-node.dragging { cursor: grabbing !important; }
.class-node.dragging rect { stroke: #2563eb; stroke-width: 2; }

/* Main application workspace tabs */
.workspace-main { max-width: 1440px; margin: 22px auto; padding: 0 20px 30px; }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 5px; border: 1px solid #dbe3ef; border-radius: 11px; background: #eaf0f8; }
.workspace-tabs button { margin: 0; padding: 10px 16px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #42536b; font-size: 13px; }
.workspace-tabs button.active { background: #fff; color: #1746a2; border-color: #dbe3ef; box-shadow: 0 1px 3px #17243a18; }
.script-workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 18px; align-items: start; }
.script-editor { width: 100%; min-height: 58vh; resize: vertical; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.script-sidebar { display: grid; gap: 18px; min-width: 0; }
.script-sidebar .panel { margin: 0; }
.diagram-workspace { min-height: calc(100vh - 190px); }
.diagram-workspace .class-diagram-scroll,
.diagram-workspace .object-graph-scroll { max-height: calc(100vh - 265px); min-height: calc(100vh - 320px); }
.diagram-workspace .class-diagram-scroll { margin-top: 12px; }
.workspace-main.diagrams-active { max-width: none; width: 100%; margin: 12px auto 0; padding: 0 20px 20px; }
.workspace-main.diagrams-active .workspace-tabs { margin-bottom: 12px; }
.workspace-main.diagrams-active .diagram-workspace { min-height: calc(100vh - 145px); }
.workspace-main.diagrams-active .class-diagram-scroll,
.workspace-main.diagrams-active .object-graph-scroll { max-height: calc(100vh - 220px); min-height: calc(100vh - 270px); }
@media(max-width: 900px) { .script-workspace { grid-template-columns: 1fr; } .script-editor { min-height: 48vh; } }
@media(max-width: 600px) { .workspace-main { padding-left: 12px; padding-right: 12px; } .workspace-tabs { display: grid; grid-template-columns: 1fr 1fr; } .workspace-tabs button { padding: 9px 7px; } .workspace-main.diagrams-active { padding-left: 10px; padding-right: 10px; } .diagram-workspace .class-diagram-scroll, .diagram-workspace .object-graph-scroll { min-height: 65vh; max-height: 70vh; } }

/* Object Workspace */
.object-workspace { min-height: 72vh; }
.object-workspace-layout { display: grid; grid-template-columns: minmax(230px, 0.75fr) minmax(0, 2fr); gap: 18px; min-height: 58vh; }
.object-browser, .object-inspector { min-width: 0; border: 1px solid #dbe3ef; border-radius: 10px; padding: 14px; background: #fff; }
.object-browser h3, .object-inspector h3 { margin-top: 0; }
.object-list-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 7px; padding: 10px 12px; text-align: left; color: #26364d; background: #f7f9fc; border: 1px solid #e1e7f0; border-radius: 8px; }
.object-list-item:hover { border-color: #9bb6e8; background: #f0f5ff; }
.object-list-item.selected { border-color: #4779cf; background: #edf4ff; box-shadow: inset 3px 0 #4779cf; }
.object-list-item span, .object-list-item small { color: #64748b; font-size: 12px; }
.object-list-item small { margin-top: 4px; }
.object-aliases { color: #52637b; font-size: 13px; }
.object-attributes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.object-attribute-row { min-width: 0; padding: 12px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fbfcfe; overflow-wrap: anywhere; }
.object-attribute-row strong { display: block; }
.object-attribute-type { display: block; margin: 3px 0 8px; color: #718096; font-size: 11px; }
@media(max-width: 760px) { .object-workspace-layout { grid-template-columns: 1fr; } .object-browser { max-height: 35vh; overflow: auto; } }

/* Object Workspace: named collections and navigable collection members. */
.collection-list-item { border-left: 3px solid #7b91b8; }
.collection-preview { margin: 8px 0 18px; padding: 10px; border: 1px solid #dce4ef; border-radius: 8px; background: #fbfcff; }
.collection-preview h4 { margin: 0 0 8px; }
.collection-member { margin-bottom: 5px; padding: 7px 9px; }
.collection-value { padding: 5px 7px; font-family: ui-monospace, monospace; font-size: 12px; }
.attribute-collection-content { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.collection-count { color: #64748b; font-size: 12px; }
.inline-object-link { align-self: flex-start; padding: 3px 7px; border: 1px solid #dce4ef; border-radius: 5px; background: #f5f8fd; color: #315b9b; text-align: left; }
.inline-object-link:hover { background: #eaf1fc; border-color: #9bb6e8; }


/* Tabulkové zobrazení obsahu pojmenovaných kolekcí v Object Workspace. */
.collection-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border, #dce4ef); border-radius: 8px; }
.collection-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.collection-table th { position: sticky; top: 0; padding: 9px 11px; background: var(--surface-secondary, #f1f4f8); color: var(--text-secondary, #526174); font-weight: 650; white-space: nowrap; }
.collection-table td { padding: 8px 11px; border-top: 1px solid var(--border, #e5eaf0); vertical-align: top; }
.collection-table tbody tr:hover { background: var(--surface-hover, #f7f9fc); }
.collection-table td:first-child { width: 42px; color: var(--text-secondary, #738094); font-variant-numeric: tabular-nums; }
.collection-object-link { border: 0; padding: 0; background: transparent; color: var(--accent, #2563eb); font: inherit; font-weight: 650; cursor: pointer; text-align: left; }
.collection-object-link:hover { text-decoration: underline; }
.type-chip { display: inline-block; padding: 2px 7px; border-radius: 5px; background: var(--surface-secondary, #eef2f7); font-size: 11px; white-space: nowrap; }