/* WinForms look: Segoe UI 9pt, gray control background, white inputs */
:root {
    --control: #f0f0f0;
    --border: #adadad;
    --group: #d5dfe5;
    --log-height: 34vh;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    background: var(--control);
    color: #000;
}

body { display: flex; flex-direction: column; }

/* ---------- menu strip (Form1) ---------- */
.menu-strip {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border-bottom: 1px solid #dadada;
    padding: 1px 4px;
    flex: none;
}

.menu { position: relative; }

.menu-title {
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 8px;
    font: inherit;
    cursor: default;
}

.menu-title:hover { background: #cce8ff; border-color: #99d1ff; }

.menu-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 190px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .25);
    padding: 2px;
}

.menu-drop a {
    display: block;
    padding: 4px 24px;
    color: #000;
    text-decoration: none;
}

.menu-drop a:hover, .menu-drop a.active { background: #91c9f7; }

.menu-hint { margin-left: auto; color: #777; }

/* ---------- page area and log panel (screen wide) ---------- */
.page-area {
    flex: 1 1 auto;
    overflow: auto;
    padding: 6px;
    min-height: 0;
}

.log-panel {
    flex: none;
    height: var(--log-height);
    display: flex;
    flex-direction: column;
    border-top: 3px double #999;
    background: #fff;
    resize: vertical;
    overflow: hidden;
}

.log-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 3px 6px;
    background: var(--control);
    border-bottom: 1px solid #ccc;
}

.log-count { margin-left: auto; color: #666; }

.log-table { overflow: auto; flex: 1; }

.log-table table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 16px; /* WinForms log list: Segoe UI 12pt */
}

.log-table th {
    position: sticky;
    top: 0;
    background: #f7f7f7;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    font-weight: normal;
    text-align: left;
    padding: 1px 6px;
}

.log-table td { padding: 0 6px; white-space: pre; }
.log-table tr.sel td { background: #0078d7; color: #fff; }
.c-time { width: 190px; }
.c-level { width: 110px; }
.c-topic { width: 160px; }

.l-fatal { color: darkred; }
.l-error { color: red; }
.l-warning { color: darkorange; }
.l-debug { color: gray; }
.l-received { background: orange; }
.l-published { background: greenyellow; color: darkolivegreen; }
.l-error-status { background: mistyrose; color: red; font-weight: bold; }

/* ---------- controls ---------- */
button {
    font: inherit;
    background: #e1e1e1;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1px 6px;
}

button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
button:disabled { color: #a0a0a0; }
button img { vertical-align: middle; pointer-events: none; }

input, textarea, select {
    font: inherit;
    border: 1px solid #7a7a7a;
    background: #fff;
    border-radius: 0;
    padding: 1px 3px;
}

input[readonly], textarea[readonly] { background: var(--control); }
input:disabled, select:disabled, textarea:disabled { background: var(--control); color: #6d6d6d; }

input[type=checkbox], input[type=radio] { margin: 0 4px 0 0; vertical-align: -2px; }

/* ---------- forms ported with absolute WinForms coordinates ---------- */
.wf-form { position: relative; background: var(--control); }
.wf { position: absolute; margin: 0; }
.wf-check { display: flex; align-items: center; white-space: nowrap; }
.wf-label { white-space: nowrap; }
.wf-btn { padding: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
textarea.wf { resize: none; }

.wf-group {
    border: 1px solid var(--group);
    border-radius: 3px;
}

.wf-group > .wf-group-title {
    position: absolute;
    top: -8px;
    left: 6px;
    padding: 0 2px;
    background: var(--control);
    white-space: nowrap;
}

.wf-tabs { }
.wf-tab-headers { position: absolute; left: 0; top: 0; display: flex; height: 22px; }

.wf-tab-header {
    border: 1px solid #d9d9d9;
    border-bottom: none;
    background: var(--control);
    padding: 2px 8px;
    margin-right: -1px;
    font: inherit;
}

.wf-tab-header.active { background: #fff; position: relative; top: -2px; height: 24px; border-color: #adadad; }
.wf-tabpage { background: #fff; border: 1px solid #adadad; }

/* ---------- notices ---------- */
.notice {
    position: fixed;
    right: 16px;
    top: 36px;
    z-index: 100;
    max-width: 420px;
    background: #fff8e1;
    border: 1px solid #e0b000;
    padding: 8px 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

.notice b { display: block; margin-bottom: 4px; }
.notice button { margin-top: 6px; }

.blocked {
    background: #fff;
    border: 1px solid #e0b4b4;
    color: #9f3a38;
    padding: 10px;
    max-width: 640px;
}

/* ---------- home (Form1) ---------- */
.form1 { max-width: 860px; }
.grp { border: 1px solid var(--group); border-radius: 3px; }
.form1-grid { display: grid; grid-template-columns: 80px 1fr; gap: 4px 6px; align-items: center; }
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.topics { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px; }
.hint { color: #555; }

@media (max-width: 700px) {
    .form1-grid { grid-template-columns: 1fr; }
    .topics { grid-template-columns: 1fr auto; }
}

fieldset.wf { padding: 0; min-width: 0; }
fieldset.wf-panel { border: none; }
fieldset.wf-tabs { border: none; }

.wf-checklist {
    background: #fff;
    border: 1px solid #7a7a7a;
    overflow: auto;
    padding: 1px 2px;
}

.wf-checklist .wf-check { display: flex; }

.wf-grid {
    background: #ababab;
    border: 1px solid #7a7a7a;
    overflow: auto;
}

.wf-grid table { border-collapse: collapse; background: #fff; width: max-content; min-width: 100%; }
.wf-grid th { background: #f0f0f0; border: 1px solid #d0d0d0; font-weight: normal; padding: 1px 4px; text-align: left; position: sticky; top: 0; }
.wf-grid td { border: 1px solid #e0e0e0; padding: 1px 4px; white-space: pre; }
.wf-grid td.center { text-align: center; }
.wf-grid tr.sel td { background: #0078d7; color: #fff; }

/* ---------- global error handler (PageErrorBoundary, #blazor-error-ui) ---------- */
.page-error {
    margin: 12px;
    padding: 10px 12px;
    border: 1px solid #c62828;
    background: #fdecea;
    color: #000;
    max-width: 1000px;
}
.page-error-title { font-weight: bold; color: #c62828; margin-bottom: 4px; }
.page-error-message { margin-bottom: 6px; word-break: break-word; }
.page-error pre { max-height: 240px; overflow: auto; background: #fff; border: 1px solid var(--border); padding: 6px; font-size: 11px; white-space: pre-wrap; }
.page-error-buttons { margin-top: 8px; display: flex; gap: 6px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 8px 12px;
    background: #c62828;
    color: #fff;
}
#blazor-error-ui a { color: #fff; font-weight: bold; margin-left: 12px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

.wf-listbox {
    background: #fff;
    border: 1px solid #7a7a7a;
    overflow: auto;
    padding: 1px 0;
}

.wf-listbox .wf-list-item {
    cursor: default;
    padding: 0 3px;
    white-space: nowrap;
}

.wf-listbox .wf-list-item.sel {
    background: #0078d7;
    color: #fff;
}

/* ---------- context menu (ContextMenuStrip) and MessageBox questions ---------- */
.wf-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.wf-menu {
    position: fixed;
    z-index: 201;
    min-width: 120px;
    background: #f2f2f2;
    border: 1px solid #a0a0a0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    padding: 2px 0;
}

.wf-menu-item {
    cursor: default;
    padding: 3px 20px;
    white-space: nowrap;
}

.wf-menu-item:hover { background: #cce8ff; }
.wf-menu-item.disabled { color: #a0a0a0; }
.wf-menu-item.disabled:hover { background: none; }

.wf-menu-sep {
    border-top: 1px solid #d0d0d0;
    margin: 3px 2px;
}

.wf-question-backdrop { background: rgba(0, 0, 0, .15); }

.notice.wf-question {
    z-index: 201;
    right: auto;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    min-width: 260px;
}

.notice.wf-question button { margin-right: 6px; min-width: 60px; }