/* WF — WinForms look for the MyKeuRosalia web port (Windows 7 classic/aero controls) */
:root {
    --font: 11px "Microsoft Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;
    --mdi-bg: #344768;
    --form-bg: #f8f8f8;
    --border: #abadb3;
    --btn-border: #707070;
    --sel-bg: #3399ff;
    --sel-fg: #ffffff;
    color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--mdi-bg); font: var(--font); color: #000; }
body { overflow: hidden; -webkit-font-smoothing: auto; }
#wf-root { position: fixed; inset: 0; }
.hidden { display: none !important; }
u { text-decoration: underline; }

/* ---------------- busy overlay ---------------- */
.wf-busy { position: fixed; inset: 0; z-index: 100000; display: none; cursor: progress; }
.wf-busy.on { display: block; }
.wf-busy.wait::after { content: ""; position: absolute; right: 14px; bottom: 30px; width: 18px; height: 18px; border: 3px solid #cfe3ff; border-top-color: #1f6fd1; border-radius: 50%; animation: wfspin .8s linear infinite; }
@keyframes wfspin { to { transform: rotate(360deg); } }

/* ---------------- forms ---------------- */
.wf-form { position: absolute; background: var(--form-bg); border: 1px solid #6d6d6d; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.wf-form.active { box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.wf-form[data-border="None"] { border: 0; box-shadow: none; }
.wf-form[data-border="Fixed3D"] { border: 2px outset #e3e3e3; }
.wf-caption { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 8px; background: linear-gradient(#dbe6f4, #c4d5ea); border-bottom: 1px solid #9fb3cc; cursor: default; user-select: none; font: 12px "Segoe UI", Tahoma, Arial, sans-serif; }
.wf-caption .x { width: 42px; height: 20px; margin-right: 4px; border: 1px solid #8b3a2f; border-radius: 0 0 4px 4px; background: linear-gradient(#e8a493, #c75050 50%, #b33a2c); color: #fff; font-size: 12px; cursor: pointer; }
.wf-client { position: relative; overflow: hidden; }
.wf-modal-back { position: fixed; inset: 0; z-index: 50000; background: rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; overflow: auto; }
.wf-modal-back > .wf-form { position: relative !important; left: auto !important; top: auto !important; }

/* every designer control is absolutely placed inside its container */
.wf-c { position: absolute; font: var(--font); }

/* Label */
.wf-Label, .wf-LinkLabel { white-space: pre; line-height: 13px; overflow: visible; background: transparent; user-select: none; }
.wf-Label:not(.autosize) { white-space: pre-wrap; overflow: hidden; }
.wf-Label[data-align$="Center"] { text-align: center; }
.wf-Label[data-align$="Right"] { text-align: right; }
.wf-Label[data-align^="Middle"] { display: flex; align-items: center; }
.wf-Label[data-align="MiddleCenter"] { justify-content: center; }
.wf-Label[data-align="MiddleRight"] { justify-content: flex-end; }
.wf-Label.disabled { color: #8d8d8d !important; }
.border-FixedSingle { border: 1px solid #000; }
.border-Fixed3D { border: 2px inset #e3e3e3; }

/* Button (Win7) */
.wf-Button { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 4px; border: 1px solid var(--btn-border); border-radius: 3px; background: linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%); color: #000; cursor: default; white-space: nowrap; overflow: hidden; }
.wf-Button:hover:not(:disabled) { border-color: #3c7fb1; background: linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%); }
.wf-Button:active:not(:disabled) { border-color: #2c628b; background: linear-gradient(#e5f4fc 0%, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%); }
.wf-Button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.wf-Button:disabled { color: #838383; border-color: #adb2b5; background: #f4f4f4; }
.wf-Button.has-img img { max-height: calc(100% - 4px); flex: none; image-rendering: auto; }
.wf-Button.has-img[data-imgalign="MiddleLeft"] { justify-content: space-between; }
.wf-Button.has-img[data-imgalign="MiddleLeft"] span { flex: 1; text-align: center; }
.wf-Button.has-img[data-imgalign="TopCenter"] { flex-direction: column; justify-content: center; }
.wf-Button:disabled img { filter: grayscale(1) opacity(.5); }

/* TextBox */
.wf-TextBox, .wf-MaskedTextBox, .wf-RichTextBox { border: 1px solid var(--border); background: #fff; }
.wf-TextBox:hover:not(.disabled), .wf-ComboBox:hover:not(.disabled) { border-color: #7eb4ea; }
.wf-TextBox:focus-within, .wf-ComboBox:focus-within { border-color: #569de5; }
.wf-TextBox input, .wf-TextBox textarea { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 2px; margin: 0; font: inherit; background: transparent; color: inherit; resize: none; }
.wf-TextBox textarea { padding: 1px 2px; }
.wf-TextBox.noborder { border-color: transparent; }
.wf-TextBox.disabled { background: #f0f0f0; border-color: #cccccc; }
.wf-TextBox.disabled input, .wf-TextBox.disabled textarea { color: #6d6d6d; -webkit-text-fill-color: #6d6d6d; }
.wf-TextBox.readonly input { background: #f0f0f0; }

/* ComboBox */
.wf-ComboBox { display: flex; border: 1px solid var(--border); background: #fff; height: 21px !important; }
.wf-ComboBox input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 2px; font: inherit; background: transparent; }
.wf-ComboBox.ddl { background: linear-gradient(#f2f2f2, #ebebeb 49%, #dddddd 50%, #cfcfcf); border-color: #707070; border-radius: 3px; }
.wf-ComboBox.ddl input { cursor: default; }
.wf-ComboBox .arrow { width: 17px; flex: none; position: relative; cursor: default; }
.wf-ComboBox .arrow::after { content: ""; position: absolute; left: 5px; top: 8px; border: 4px solid transparent; border-top: 4px solid #000; }
.wf-ComboBox:not(.ddl) .arrow { border-left: 1px solid transparent; }
.wf-ComboBox:not(.ddl):hover .arrow { background: linear-gradient(#eaf6fd, #a7d9f5); border-left-color: #3c7fb1; }
.wf-ComboBox.disabled { background: #f0f0f0; border-color: #ccc; }
.wf-ComboBox.disabled input { color: #6d6d6d; }
.wf-ComboBox.disabled .arrow::after { border-top-color: #a0a0a0; }
.wf-combo-list { position: absolute; z-index: 90000; background: #fff; border: 1px solid #646464; overflow-y: auto; font: var(--font); box-shadow: 1px 2px 4px rgba(0,0,0,.25); }
.wf-combo-list .it { padding: 1px 3px; white-space: nowrap; line-height: 15px; cursor: default; }
.wf-combo-list .it:hover, .wf-combo-list .it.sel { background: var(--sel-bg); color: var(--sel-fg); }

/* CheckBox / RadioButton */
.wf-CheckBox, .wf-RadioButton { display: flex; align-items: center; gap: 3px; white-space: nowrap; background: transparent; user-select: none; }
.wf-CheckBox input, .wf-RadioButton input { margin: 0; width: 13px; height: 13px; flex: none; }
.wf-CheckBox.check-right { flex-direction: row-reverse; justify-content: flex-end; }
.wf-CheckBox.disabled, .wf-RadioButton.disabled { color: #8d8d8d !important; }

/* GroupBox */
.wf-GroupBox { background: transparent; }
.wf-GroupBox::before { content: ""; position: absolute; inset: 6px 0 0 0; border: 1px solid #d5dfe5; border-radius: 3px; pointer-events: none; }
.wf-GroupBox > .cap { position: absolute; left: 6px; top: 0; padding: 0 2px; line-height: 13px; background: var(--gb-bg, #f8f8f8); white-space: nowrap; z-index: 1; }
.wf-GroupBox > .cap.empty { display: none; }

/* Panels */
.wf-Panel, .wf-FlowLayoutPanel { background: transparent; }
.wf-myPanelGradient { border: 1px solid #808080; }

/* PictureBox */
.wf-PictureBox { overflow: hidden; }
.wf-PictureBox img { display: block; }
.wf-PictureBox[data-sizemode="StretchImage"] img { width: 100%; height: 100%; }
.wf-PictureBox[data-sizemode="Zoom"] img { width: 100%; height: 100%; object-fit: contain; }
.wf-PictureBox[data-sizemode="CenterImage"] { display: flex; align-items: center; justify-content: center; }

/* DateTimePicker */
.wf-DateTimePicker { border: 1px solid var(--border); background: #fff; display: flex; height: 20px !important; }
.wf-DateTimePicker input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.wf-DateTimePicker .view { flex: 1; padding: 0 18px 0 2px; line-height: 18px; white-space: nowrap; overflow: hidden; position: relative; cursor: default; }
.wf-DateTimePicker .view::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 17px; background: linear-gradient(#f2f2f2, #cfcfcf); border-left: 1px solid #a5a5a5; }
.wf-DateTimePicker .view::before { content: ""; position: absolute; right: 5px; top: 7px; border: 4px solid transparent; border-top-color: #000; z-index: 1; }
.wf-DateTimePicker.disabled { background: #f0f0f0; color: #6d6d6d; }

/* ProgressBar */
.wf-ProgressBar { border: 1px solid #bcbcbc; background: #e6e6e6; border-radius: 2px; overflow: hidden; }
.wf-ProgressBar .bar { height: 100%; width: 0; background: linear-gradient(#bdf5b4, #3ec835 50%, #06b025); transition: width .15s; }

/* Tabs */
.wf-TabControl .tabs { display: flex; height: 21px; position: relative; z-index: 1; }
.wf-TabControl .tab { padding: 3px 8px 0; border: 1px solid #898c95; border-bottom: 0; margin-right: -1px; background: linear-gradient(#f2f2f2, #dcdcdc); cursor: default; }
.wf-TabControl .tab.sel { background: #fff; margin-top: -2px; height: 23px; }
.wf-TabControl .pages { position: absolute; inset: 20px 0 0 0; border: 1px solid #898c95; background: #fff; }
.wf-TabPage { position: absolute; inset: 0; }
.wf-TabPage.hidden-tab { display: none; }

/* DataGridView */
.wf-DataGridView { --grid-bg: #ababab; --alt-bg: #ffffff; --cell-bg: #ffffff; --cell-fg: #000; --head-fg: #000; --head-h: 35px; background: var(--grid-bg); border: 1px solid #828790; outline: 0; }
.wf-DataGridView.border-Fixed3D { border: 2px inset #e3e3e3; }
.wf-DataGridView .scroll { position: absolute; inset: 0; overflow: auto; }
.wf-DataGridView table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: var(--font); }
.wf-DataGridView th, .wf-DataGridView td { border-right: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; padding: 0 3px; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.wf-DataGridView thead th { position: sticky; top: 0; z-index: 1; height: var(--head-h); font: var(--head-font, var(--font)); font-weight: normal; text-align: left; color: var(--head-fg); background: linear-gradient(#ffffff, #f7f8fa 50%, #f1f2f4 51%, #f4f5f7); border-right-color: #d5d5d5; border-bottom-color: #d5d5d5; }
.wf-DataGridView.plain-headers thead th { background: var(--head-bg, #f0f0f0); }
.wf-DataGridView th.rh, .wf-DataGridView td.rh { width: 41px; padding: 0; text-align: center; color: #000; background: linear-gradient(to right, #f7f8fa, #eef0f3) !important; font-size: 9px; position: sticky; left: 0; }
.wf-DataGridView thead th.rh { z-index: 2; }
.wf-DataGridView td { height: 22px; background: var(--cell-bg); color: var(--cell-fg); cursor: default; }
.wf-DataGridView tr.alt td { background: var(--alt-bg); }
.wf-DataGridView tr.cur td:not(.rh) { background: var(--sel-bg); color: var(--sel-fg); }
.wf-DataGridView td.ar, .wf-DataGridView th.ar { text-align: right; }
.wf-DataGridView td.ac, .wf-DataGridView th.ac { text-align: center; }
.wf-DataGridView td.chk { text-align: center; }
.wf-DataGridView.disabled { opacity: .85; pointer-events: none; }
/* report grids: total row + pager (new) */
.wf-DataGridView.has-pager .scroll { bottom: 26px; }
.wf-DataGridView tfoot td { position: sticky; bottom: 0; z-index: 1; height: 22px; background: #eef3e0; font-weight: bold; border-top: 2px solid #7a8a5a; border-bottom: 0; }
.wf-DataGridView tfoot td.rh { z-index: 2; font-size: 11px; }
.wf-DataGridView tfoot td.lbl { overflow: visible; }
.wf-DataGridView tfoot td.rapat { font-weight: normal; letter-spacing: -.3px; padding: 0 1px; }
.wf-DataGridView .pager { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 3px; padding: 0 4px; background: #f0f0f0; border-top: 1px solid #a0a0a0; white-space: nowrap; overflow: hidden; }
.wf-DataGridView .pager button { font: var(--font); min-width: 22px; height: 20px; padding: 0 4px; border: 1px solid #adadad; border-radius: 2px; background: linear-gradient(#fdfdfd, #e6e6e6); cursor: default; }
.wf-DataGridView .pager button:disabled { color: #a0a0a0; }
.wf-DataGridView .pager button:not(:disabled):hover { background: #e5f1fb; border-color: #0078d7; }
.wf-DataGridView .pager .hal { padding: 0 4px; }
.wf-DataGridView .pager label { margin-left: 8px; }
.wf-DataGridView .pager select { font: var(--font); height: 20px; }
.wf-DataGridView .pager .info { margin-left: auto; padding-right: 2px; color: #444; }

/* ---------------- MessageBox (Win7) ---------------- */
.wf-modal-back.msg { z-index: 60000; background: transparent; }
.wf-msgbox { min-width: 190px; max-width: min(520px, 94vw); background: #fff; border: 1px solid #6d7c8f; border-radius: 6px 6px 0 0; box-shadow: 0 8px 26px rgba(0,0,0,.4); font: 12px "Segoe UI", Tahoma, Arial, sans-serif; position: relative; }
.wf-msgbox .title { height: 28px; display: flex; align-items: center; justify-content: space-between; padding-left: 9px; background: linear-gradient(#e3ecf7, #c9d9ee); border-radius: 5px 5px 0 0; border-bottom: 1px solid #a9bcd6; user-select: none; }
.wf-msgbox .title .x { width: 42px; height: 20px; margin-right: 5px; border: 1px solid #8b3a2f; border-radius: 0 0 4px 4px; background: linear-gradient(#e8a493, #c75050 50%, #b33a2c); color: #fff; cursor: pointer; }
.wf-msgbox .body { display: flex; gap: 12px; align-items: flex-start; padding: 22px 26px 22px 12px; }
.wf-msgbox .ico { width: 32px; height: 32px; flex: none; }
.wf-msgbox .ico svg { width: 32px; height: 32px; }
.wf-msgbox .txt { white-space: pre-wrap; padding-top: 7px; line-height: 1.35; color: #000; word-break: break-word; }
.wf-msgbox .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 12px; background: #f0f0f0; border-top: 1px solid #dfdfdf; }
.wf-msgbox .foot button { min-width: 75px; height: 23px; border: 1px solid #707070; border-radius: 3px; background: linear-gradient(#f2f2f2, #ebebeb 49%, #dddddd 50%, #cfcfcf); font: inherit; cursor: default; }
.wf-msgbox .foot button:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd, #d9f0fc 49%, #bee6fd 50%, #a7d9f5); }
.wf-msgbox .foot button:focus { outline: 1px dotted #000; outline-offset: -4px; border-color: #3399ff; }

/* ---------------- MDI shell (Frm_menu) ---------------- */
.wf-mdi { position: fixed; inset: 0; display: flex; flex-direction: column; }
.wf-menubar { display: flex; flex-wrap: wrap; background: linear-gradient(#f6f9fc, #e9eef6); border-bottom: 1px solid #b6bccc; user-select: none; position: relative; z-index: 20000; }
.wf-menubar > .mi { padding: 3px 7px; line-height: 15px; cursor: default; border: 1px solid transparent; margin: 1px 0; }
.wf-menubar > .mi:hover, .wf-menubar > .mi.open { background: #c1d2ee; border-color: #3399ff33; }
.wf-dropdown { position: fixed; z-index: 30000; min-width: 180px; background: #f0f0f0; border: 1px solid #979797; box-shadow: 2px 2px 3px rgba(0,0,0,.3); padding: 2px; font: var(--font); }
.wf-dropdown .di { display: flex; align-items: center; height: 22px; padding: 0 24px 0 0; position: relative; cursor: default; white-space: nowrap; border: 1px solid transparent; border-radius: 3px; }
.wf-dropdown .di .ic { width: 28px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.wf-dropdown .di .ic img { max-width: 16px; max-height: 16px; }
.wf-dropdown .di:hover:not(.disabled), .wf-dropdown .di.open { background: linear-gradient(#f1f7fe, #d6e8fd); border-color: #a8d8eb; }
.wf-dropdown .di.sub::after { content: ""; position: absolute; right: 8px; top: 7px; border: 4px solid transparent; border-left: 4px solid #000; }
.wf-dropdown .di.disabled { color: #8d8d8d; }
.wf-dropdown .di.disabled img { filter: grayscale(1) opacity(.5); }
.wf-dropdown .sep { height: 1px; margin: 3px 2px 3px 30px; background: #d7d7d7; border-bottom: 1px solid #fff; }
.wf-toolbar { display: flex; align-items: center; gap: 1px; padding: 1px 3px; background: linear-gradient(#fbfcfe, #e3e9f2); border-bottom: 1px solid #b6bccc; flex: none; }
.wf-toolbar .tb { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; cursor: default; }
.wf-toolbar .tb img { max-width: 20px; max-height: 20px; }
.wf-toolbar .tb:hover:not(.disabled) { background: linear-gradient(#fdf4d6, #f8dd8e); border-color: #e5c365; }
.wf-toolbar .tb.disabled img { filter: grayscale(1) opacity(.45); }
.wf-toolbar .sep { width: 1px; height: 19px; margin: 0 3px; background: #b6bccc; border-right: 1px solid #fff; }
.wf-desktop { position: relative; flex: 1; overflow: auto; background: var(--mdi-bg); }
.wf-statusbar { flex: none; height: 22px; display: flex; align-items: center; padding: 0 6px; background: #f0f0f0; border-top: 1px solid #d7d7d7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-hamburger { display: none; }

/* ---------------- Report viewer (Frm_preview / Crystal) ---------------- */
.rpt-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.rpt-tools { flex: none; display: flex; gap: 6px; align-items: center; padding: 4px 6px; background: linear-gradient(#fbfcfe, #e3e9f2); border-bottom: 1px solid #b6bccc; }
.rpt-tools button { height: 23px; border: 1px solid #707070; border-radius: 3px; background: linear-gradient(#f2f2f2, #ebebeb 49%, #dddddd 50%, #cfcfcf); font: var(--font); padding: 0 10px; }
.rpt-scroll { flex: 1; overflow: auto; background: #7f7f7f; padding: 16px; }
.rpt-page { background: #fff; width: 794px; min-height: 1123px; margin: 0 auto 16px; padding: 38px 40px; box-shadow: 0 2px 8px rgba(0,0,0,.4); font: 12px Arial, sans-serif; color: #000; }
.rpt-page .kop { text-align: center; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 4px; }
.rpt-page .kop .j0 { font-size: 16px; font-weight: bold; }
.rpt-page .kop .j1, .rpt-page .kop .j2 { font-size: 11px; }
.rpt-page .kop.ada-logo { position: relative; min-height: 58px; padding-left: 70px; padding-right: 70px; }
.rpt-page .kop .kop-logo { position: absolute; left: 0; top: 0; width: 58px; height: 58px; object-fit: contain; }
.rpt-page .judul { text-align: center; font-weight: bold; font-size: 13px; margin: 12px 0 8px; text-decoration: underline; }
.rpt-page .param { margin: 0 0 10px; border-collapse: collapse; }
.rpt-page .param td { padding: 1px 6px 1px 0; }
.rpt-page table.data { width: 100%; border-collapse: collapse; }
.rpt-page table.data th, .rpt-page table.data td { border: 1px solid #000; padding: 3px 5px; }
.rpt-page table.data th { background: #e8e8e8; }
.rpt-page table.data td.num { text-align: right; white-space: nowrap; }
.rpt-page table.data tfoot td { font-weight: bold; background: #f4f4f4; }
.rpt-page .cetak { margin-top: 14px; font-size: 10px; color: #444; display: flex; justify-content: space-between; }
@media print {
    @page { size: A4; margin: 12mm; }
    html, body { background: #fff !important; overflow: visible !important; height: auto; }
    body * { visibility: hidden; }
    .rpt-print, .rpt-print * { visibility: visible; }
    .rpt-print { position: absolute; left: 0; top: 0; width: 100%; }
    .rpt-print .rpt-page { box-shadow: none; margin: 0; padding: 0; width: auto; min-height: 0; }
}

/* ---------------- phone / tablet (< 1024px): stacked flow ---------------- */
@media (max-width: 1023px) {
    body { overflow: auto; }
    #wf-root { position: static; min-height: 100%; }
    .wf-mdi { position: static; min-height: 100vh; }
    .wf-menubar { position: sticky; top: 0; }
    .wf-hamburger { display: block; }
    .wf-desktop { overflow: visible; padding: 8px; }
    .wf-statusbar { height: auto; min-height: 22px; white-space: normal; padding: 3px 8px; font-size: 10px; }
    .wf-desktop > .wf-form { position: static !important; width: 100% !important; margin: 0 0 10px; }
    .wf-desktop > .wf-form:not(:last-child) { display: none; }
    .wf-modal-back { align-items: flex-start; padding: 8px; }
    .wf-modal-back > .wf-form { width: 100%; }
    .wf-form .wf-client { width: 100% !important; height: auto !important; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 8px; padding: 8px; }
    .wf-form .wf-c { position: relative !important; left: auto !important; top: auto !important; max-width: 100%; }
    .wf-form .wf-myPanelGradient, .wf-form .wf-Panel, .wf-form .wf-GroupBox, .wf-form .wf-TabControl, .wf-form .wf-DataGridView, .wf-form .wf-TabPage, .wf-form .wf-FlowLayoutPanel { width: 100% !important; height: auto !important; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px 8px; padding: 8px; }
    .wf-form .wf-GroupBox { padding-top: 18px; }
    .wf-form .wf-GroupBox::before { inset: 6px 0 0 0; }
    .wf-form .wf-Label { flex: 0 0 34%; white-space: normal; height: auto !important; width: auto !important; min-height: 0 !important; }
    .wf-form .wf-Label.autosize:only-child, .wf-form [data-name="lblJudul"] { flex: 1 1 100%; }
    .wf-form .wf-TextBox, .wf-form .wf-ComboBox, .wf-form .wf-DateTimePicker, .wf-form .wf-MaskedTextBox { flex: 1 1 55%; width: auto !important; min-width: 140px; height: 32px !important; }
    .wf-form .wf-TextBox input, .wf-form .wf-ComboBox input { font-size: 16px; }
    .wf-form .wf-TextBox:has(textarea) { height: 80px !important; }
    .wf-form .wf-ComboBox .arrow::after { top: 13px; }
    .wf-form .wf-DateTimePicker .view { line-height: 30px; font-size: 15px; }
    .wf-form .wf-DateTimePicker .view::before { top: 13px; }
    .wf-form .wf-Button { flex: 1 1 auto; width: auto !important; min-width: 72px; height: 36px !important; font-size: 13px; }
    .wf-form .wf-CheckBox, .wf-form .wf-RadioButton { flex: 0 1 auto; width: auto !important; height: 30px !important; font-size: 13px; }
    .wf-form .wf-CheckBox input, .wf-form .wf-RadioButton input { width: 18px; height: 18px; }
    .wf-form .wf-DataGridView { padding: 0; display: block; height: 55vh !important; min-height: 220px; }
    .wf-form .wf-DataGridView .scroll { position: absolute; }
    .wf-form .wf-DataGridView td { height: 32px; font-size: 13px; }
    .wf-form .wf-DataGridView.has-pager .scroll { bottom: 36px; }
    .wf-form .wf-DataGridView .pager { height: 36px; flex-wrap: nowrap; }
    .wf-form .wf-DataGridView .pager button { min-width: 30px; height: 28px; font-size: 14px; }
    .wf-form .wf-DataGridView .pager label { display: none; }
    .wf-form .wf-DataGridView .pager .info { font-size: 12px; }
    .wf-form .wf-PictureBox { flex: 0 0 auto; }
    .wf-form .wf-PictureBox.noimg { display: none; }
    .wf-form .wf-c.solo:not(.wf-Button) { flex: 1 1 100% !important; }
    .wf-form .wf-TabControl .pages { position: relative; inset: auto; width: 100%; }
    .wf-form .wf-TabControl .tabs { width: 100%; }
    .wf-combo-list .it { line-height: 34px; font-size: 15px; }
    .wf-menubar > .mi { padding: 10px 12px; font-size: 14px; }
    .wf-dropdown { max-width: 92vw; font-size: 14px; }
    .wf-dropdown .di { height: 38px; }
    .wf-toolbar { overflow-x: auto; }
    .wf-toolbar .tb { width: 38px; height: 38px; }
    .rpt-scroll { padding: 6px; }
    .rpt-page { width: 100%; min-height: 0; padding: 14px; }
}

/* Dock = Fill (e.g. form titles after ClassInitObject.AturLabelJudul) */
.wf-c.dock-fill { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; white-space: normal; }
@media (max-width: 1023px) { .wf-form .wf-c.dock-fill { min-height: 34px; flex: 1 1 100% !important; } }

/* ---------------- Ringkasan keuangan (dashboard on the empty MDI desktop) ---------------- */
.kd-dash { --kd-tx: #1d2533; --kd-mut: #5d6878; --kd-bd: #c9d1de; --kd-bg: #fff; --kd-track: #e4e8ef;
    box-sizing: border-box; width: 100%; padding: 16px 18px 20px; color: #fff; font: 13px/1.4 "Segoe UI", Tahoma, Arial, sans-serif; transition: opacity .15s; }
.kd-dash.kd-sibuk { opacity: .6; pointer-events: none; }
.kd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.kd-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .2px; }
.kd-ket { color: #c3cde0; font-size: 12px; margin-top: 2px; }
.kd-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-filter select, .kd-muat { font: 12px "Segoe UI", Tahoma, Arial, sans-serif; height: 26px; border: 1px solid #8e9ab0; border-radius: 3px; background: #fff; color: var(--kd-tx); padding: 0 6px; }
.kd-muat { cursor: pointer; background: #eef1f6; }
.kd-muat:hover { background: #fff; }
.kd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.kd-grid2 { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kd-card { position: relative; background: var(--kd-bg); color: var(--kd-tx); border: 1px solid var(--kd-bd); border-radius: 4px; padding: 11px 14px 12px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kd-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; background: var(--kd-ac); }
.kd-tagihan { --kd-ac: #2f5aa8; } .kd-bayar { --kd-ac: #2e8b57; } .kd-belum { --kd-ac: #c98a12; } .kd-telat { --kd-ac: #c23b32; }
.kd-bangunan { --kd-ac: #6b5ca5; } .kd-potongan { --kd-ac: #2a8a95; }
.kd-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--kd-mut); }
.kd-nilai { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-telat .kd-nilai { color: #a8291f; }
.kd-sub { font-size: 12px; color: var(--kd-mut); }
.kd-bar { height: 6px; background: var(--kd-track); border-radius: 3px; overflow: hidden; margin: 3px 0 2px; }
.kd-bar > span { display: block; height: 100%; background: var(--kd-ac); }
.kd-link { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font: 12px "Segoe UI", Tahoma, Arial, sans-serif; color: #2459b5; cursor: pointer; }
.kd-link:hover { text-decoration: underline; }
.kd-link::after { content: " ›"; }
.kd-tabel-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; margin-top: 10px; }
.kd-tabel-wrap > .kd-panel:first-child { grid-column: 1 / -1; }
.kd-panel { background: var(--kd-bg); color: var(--kd-tx); border: 1px solid var(--kd-bd); border-radius: 4px; padding: 10px 12px 8px; min-width: 0; }
.kd-panel h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--kd-mut); }
.kd-scroll { overflow-x: auto; }
.kd-tabel { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.kd-tabel th { text-align: right; font-weight: 600; color: var(--kd-mut); border-bottom: 1px solid var(--kd-bd); padding: 4px 8px; white-space: nowrap; }
.kd-tabel td { text-align: right; padding: 5px 8px; border-bottom: 1px solid #edf0f4; white-space: nowrap; vertical-align: top; }
.kd-tabel tr > :first-child, .kd-tabel .kd-kiri { text-align: left; }
.kd-tabel td.kd-kiri { white-space: normal; min-width: 140px; }
.kd-tabel td small { display: block; font-size: 11px; color: var(--kd-mut); }
.kd-tabel tbody tr:last-child td { border-bottom: 0; }
.kd-mini { display: inline-block; width: 54px; height: 6px; background: var(--kd-track); border-radius: 3px; overflow: hidden; margin-right: 6px; vertical-align: middle; }
.kd-mini > span { display: block; height: 100%; background: #2e8b57; }
.kd-kosong { text-align: center !important; color: var(--kd-mut); padding: 12px !important; }
.kd-catatan { margin-top: 10px; font-size: 11px; color: #b7c2d6; }
.kd-catatan .kd-muat { margin-left: 6px; }
@media (max-width: 900px) {
    .kd-tabel-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .kd-dash { padding: 4px 0 12px; }
    .kd-nilai { font-size: 19px; }
    .kd-filter, .kd-filter select { width: 100%; }
    .kd-filter select { flex: 1 1 100%; height: 34px; }
    .kd-muat { height: 34px; }
    /* wide tables become stacked rows: first cell = title, the rest = "label ... value" */
    .kd-scroll:has(> .kd-tumpuk) { overflow: visible; }
    .kd-tumpuk thead { display: none; }
    .kd-tumpuk, .kd-tumpuk tbody { display: block; }
    .kd-tumpuk tr { display: block; padding: 8px 0; border-bottom: 1px solid #edf0f4; }
    .kd-tumpuk tbody tr:last-child { border-bottom: 0; }
    .kd-tumpuk td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 1px 0; border: 0; white-space: normal; }
    .kd-tumpuk td::before { content: attr(data-l); color: var(--kd-mut); flex: none; }
    .kd-tumpuk td > .kd-v { text-align: right; min-width: 0; }
    .kd-tumpuk td small { display: inline; margin-left: 6px; }
    .kd-tumpuk tr > td:first-child { display: block; font-weight: 600; padding-bottom: 3px; }
    .kd-tumpuk tr > td:first-child::before, .kd-tumpuk td.kd-kosong::before { content: none; }
    .kd-tumpuk tr > td:first-child > .kd-v { text-align: left; }
    .kd-tumpuk td.kd-kiri { min-width: 0; }
    .kd-tumpuk td.kd-kiri small { display: block; margin: 0; }
}
@media (max-width: 1023px) {
    .wf-desktop:has(> .wf-form) > .kd-dash { display: none; }
}