/* Classic WinForms look: Microsoft Sans Serif 8.25pt on SystemColors.Control. The six SMAX forms
   set no fonts or colours of their own, so these defaults are the whole visual design. */
html, body { margin: 0; height: 100%; overflow: hidden; }
body, input, select, button, textarea {
    font-family: "Microsoft Sans Serif", Tahoma, "Segoe UI", sans-serif;
    font-size: 11px;
    color: #000;
}
#app { height: 100%; }
.wf-loading { padding: 24px; }

.wf-desktop { position: absolute; inset: 0; background: #ababab; overflow: auto; }
.wf-desktop.wf-busy, .wf-desktop.wf-busy * { cursor: wait !important; }
/* z-index makes the area a stacking context, so a window raised by smax.js can never cover the
   shell's menu drop-downs or the message box. */
.wf-desktop-area { position: absolute; top: 24px; bottom: 22px; left: 0; right: 0; overflow: auto; z-index: 1; }

.wf-window {
    position: absolute; background: #f0f0f0; border: 1px solid #5a7edc;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .45);
}
.wf-titlebar {
    height: 24px; line-height: 24px; padding: 0 2px 0 8px; display: flex; align-items: center;
    background: linear-gradient(#0a5fe3, #0a48c4); color: #fff; font-weight: bold; font-size: 12px;
    user-select: none; cursor: default;
}
.wf-titlebar span { flex: 1; white-space: nowrap; overflow: hidden; }
.wf-close {
    width: 21px; height: 19px; padding: 0; border: 1px solid #fff; border-radius: 3px;
    background: #d9442c; color: #fff; font-weight: bold; line-height: 1;
}
.wf-form { position: relative; background: #f0f0f0; overflow: hidden; --wf-back: #f0f0f0; }
.wf-form > *, .wf-abs { position: absolute; box-sizing: border-box; }

/* A WinForms label is opaque: where an auto-sized value runs into the next column, the label in
   front hides the overflow. The background plus the generated z-index reproduce that. */
.wf-label { white-space: pre; line-height: 13px; background: var(--wf-back); overflow: hidden; text-overflow: ellipsis; }
.wf-text { border: 1px solid #7a7a7a; padding: 1px 2px; background: #fff; margin: 0; }
.wf-text:disabled, .wf-text[readonly] { background: #f0f0f0; color: #6d6d6d; }
textarea.wf-text { resize: none; }
.wf-button {
    border: 1px solid #adadad; background: #e1e1e1; padding: 0; margin: 0; white-space: pre-line;
    overflow: hidden;
}
.wf-button:hover:enabled { background: #e5f1fb; border-color: #0078d7; }
.wf-button:active:enabled { background: #cce4f7; }
.wf-button:disabled { color: #838383; }
.wf-combo { border: 1px solid #7a7a7a; background: #fff; padding: 0; margin: 0; }
.wf-listbox { border: 1px solid #7a7a7a; background: #fff; padding: 0; margin: 0; overflow-y: auto; }
.wf-check { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.wf-check input { margin: 0; width: 13px; height: 13px; }
.wf-group-border { position: absolute; inset: 6px 0 0 0; border: 1px solid #dcdcdc; pointer-events: none; }
.wf-group-caption { position: absolute; left: 8px; top: 0; padding: 0 2px; background: #f0f0f0; line-height: 13px; white-space: nowrap; }
.wf-tabs-head { position: absolute; left: 2px; top: 0; height: 21px; display: flex; }
/* Tab headers are buttons so that Tab reaches them and Enter or Space selects them. */
.wf-tab {
    padding: 3px 6px 0; border: 1px solid #adadad; border-bottom: none; background: #f0f0f0;
    margin: 2px 0 0; cursor: default; white-space: nowrap; height: 19px; box-sizing: border-box;
}
.wf-tab:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.wf-tab.wf-active { background: #fff; margin-top: 0; padding-top: 5px; height: 21px; }
.wf-tabs-body { position: absolute; left: 0; right: 0; top: 21px; bottom: 0; border: 1px solid #adadad; background: #fff; }
.wf-tabpage { position: absolute; background: #fff; --wf-back: #fff; }
.wf-progress { margin: 0; }

.wf-menustrip {
    position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center;
    background: #f5f6f7; padding-left: 2px; z-index: 10;
}
.wf-menu { position: relative; padding: 4px 7px; cursor: default; outline: none; }
.wf-menu:hover, .wf-menu:focus-within { background: #cce8ff; }
.wf-menu-drop {
    display: none; position: absolute; left: 0; top: 22px; min-width: 170px; background: #f2f2f2;
    border: 1px solid #a0a0a0; padding: 2px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .3); z-index: 20;
}
.wf-menu:focus-within > .wf-menu-drop { display: block; }
/* Menu commands are buttons so that Tab reaches them and Enter or Space runs them. */
.wf-menu-item {
    display: block; width: 100%; padding: 4px 24px 4px 28px; border: 0; background: none;
    text-align: left; white-space: nowrap;
}
.wf-menu-item:hover, .wf-menu-item:focus { background: #cce8ff; outline: none; }
.wf-menu-sep { height: 1px; background: #d7d7d7; margin: 3px 0 3px 26px; }
.wf-statusstrip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; align-items: center;
    gap: 6px; padding-left: 4px; background: #f0f0f0; border-top: 1px solid #d7d7d7;
}

.wf-grid { background: #ababab; border: 1px solid #7a7a7a; overflow: auto; outline: none; }
.wf-grid-inner { min-height: 100%; }
.wf-grid-head {
    display: flex; position: sticky; top: 0; z-index: 2; height: 22px; background: #f0f0f0;
    border-bottom: 1px solid #a0a0a0;
}
.wf-grid-head span, .wf-grid-row span {
    flex: none; box-sizing: border-box; padding: 4px 4px 0; height: 22px; overflow: hidden;
    white-space: pre; border-right: 1px solid #a0a0a0;
}
.wf-grid-row { display: flex; height: 22px; background: #fff; border-bottom: 1px solid #a0a0a0; box-sizing: border-box; }
.wf-grid-row.wf-selected { background: #0078d7; color: #fff; }
.wf-grid-rowhdr { width: 24px; background: #f0f0f0; }
.wf-grid-row.wf-selected .wf-grid-rowhdr { color: #000; }

.wf-modal { position: absolute; inset: 0; z-index: 100000; background: transparent; }
.wf-msgbox-text { padding: 22px 28px 18px; white-space: pre-wrap; min-width: 140px; max-width: 420px; background: #fff; }
.wf-msgbox-foot { padding: 10px 12px; text-align: right; background: #f0f0f0; }
.wf-msgbox-foot .wf-button { position: static; width: 75px; height: 23px; }
.wf-login { position: relative; width: 284px; height: 132px; }