/* Servagya-Payroll web: Visual FoxPro 9 desktop look (Themes = .F., Windows classic).
   Geometry comes from the original .scx files; this sheet only supplies what FoxPro
   drew by default (3-D borders, button faces, title bars, menus). */

:root {
  --face: #d4d0c8;          /* classic 3-D face (COLOR_BTNFACE) */
  --hi: #ffffff;            /* 3-D highlight */
  --light: #d4d0c8;
  --shadow: #808080;        /* 3-D shadow */
  --dark: #404040;          /* 3-D dark shadow */
  --title1: #0a246a;        /* active caption gradient */
  --title2: #a6caf0;
  --menu-sel: #0a246a;
  --screen: #ffffff;        /* _SCREEN background */
}

html, body { height: 100%; margin: 0; }
body.vfp-body { background: var(--screen); font-family: Arial, Helvetica, sans-serif; font-size: 9pt; overflow: hidden; user-select: none; }

/* ---------------------------------------------------------------- _SCREEN */
.vfp-screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.vfp-screen-title { height: 22px; line-height: 22px; padding: 0 6px; color: #fff; font: bold 9pt Tahoma, Arial, sans-serif;
  background: linear-gradient(90deg, var(--title1), var(--title2)); display: flex; align-items: center; gap: 6px; white-space: pre; overflow: hidden; }
.vfp-screen-title img { width: 16px; height: 16px; }
.vfp-desktop { position: relative; flex: 1; overflow: hidden; background: var(--screen); }
.vfp-statusbar { height: 20px; line-height: 18px; border-top: 1px solid var(--shadow); background: var(--face); padding: 0 6px; font: 8pt Tahoma, Arial, sans-serif; display: flex; gap: 18px; }
.vfp-statusbar span { border: 1px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); padding: 0 6px; margin: 1px 0; }

/* ---------------------------------------------------------------- menu (_MSYSMENU) */
.vfp-menubar { display: flex; background: var(--face); border-bottom: 1px solid var(--shadow); height: 20px; font: 8pt Tahoma, Arial, sans-serif; position: relative; z-index: 9000; }
.vfp-pad { padding: 2px 8px; cursor: default; color: #000; border: 1px solid transparent; }
.vfp-pad.open, .vfp-pad:focus { background: var(--menu-sel); color: #fff; outline: none; }
.vfp-popup { position: absolute; background: var(--face); border: 2px outset var(--hi); box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  min-width: 160px; padding: 2px 0; z-index: 9001; font: 8pt Tahoma, Arial, sans-serif; }
.vfp-bar { padding: 3px 24px 3px 18px; white-space: nowrap; cursor: default; position: relative; color: #000; }
.vfp-bar.sel { background: var(--menu-sel); color: #fff; }
.vfp-bar.sub::after { content: "\25B6"; position: absolute; right: 6px; font-size: 7pt; top: 4px; }
.vfp-bar.pending { color: #000; }
.vfp-bar.pending::before { content: ""; position: absolute; left: 6px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #c08000; }
.vfp-bar.sel.pending::before { background: #ffd060; }

/* ---------------------------------------------------------------- windows */
.vfp-layer { position: absolute; inset: 0; }
.vfp-modal-mask { position: absolute; inset: 0; background: transparent; }
.vfp-window { position: absolute; background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--shadow); padding: 2px; }
.vfp-titlebar { height: 18px; display: flex; align-items: center; gap: 4px; padding: 0 2px; color: #fff;
  background: linear-gradient(90deg, var(--title1), var(--title2)); font: bold 8pt Tahoma, Arial, sans-serif; cursor: default; }
.vfp-window.inactive .vfp-titlebar { background: linear-gradient(90deg, #808080, #c0c0c0); color: #d4d0c8; }
.vfp-titleicon { width: 16px; height: 16px; }
.vfp-titletext { flex: 1; white-space: nowrap; overflow: hidden; }
.vfp-titlebtns { display: flex; gap: 2px; }
.vfp-tb { width: 16px; height: 14px; background: var(--face); border: 1px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi); padding: 0; position: relative; }
.vfp-tb-close::before { content: "\00D7"; position: absolute; inset: -3px 0 0 0; font: bold 12px Arial; color: #000; text-align: center; }
.vfp-tb-close:disabled::before { color: var(--shadow); text-shadow: 1px 1px 0 var(--hi); }
.vfp-tb-min::before { content: ""; position: absolute; left: 4px; bottom: 3px; width: 6px; height: 2px; background: #000; }
.vfp-tb-max::before { content: ""; position: absolute; left: 3px; top: 2px; width: 8px; height: 7px; border: 1px solid #000; border-top-width: 2px; }
.vfp-client { position: relative; overflow: hidden; background-repeat: repeat; background-position: 0 0; }

/* every FoxPro control */
.vfp-c { position: absolute; box-sizing: border-box; margin: 0; }
.vfp-hidden { display: none !important; }

.vfp-label { overflow: hidden; line-height: normal; padding: 0; }
.vfp-label u { text-decoration: underline; }

.vfp-textbox, .vfp-spinner, .vfp-combobox, .vfp-editbox {
  border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow);
  box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--light);
  padding: 1px 3px; outline: none; border-radius: 0; }
.vfp-textbox.vfp-plain { border: 1px solid #000; box-shadow: none; }
.vfp-textbox:disabled, .vfp-spinner:disabled, .vfp-combobox:disabled, .vfp-editbox:disabled,
.vfp-textbox[readonly] { color: #6d6d6d; background-color: var(--face) !important; }
.vfp-textbox:focus, .vfp-combobox:focus, .vfp-editbox:focus, .vfp-spinner:focus { background-color: #ffffe0; }
.vfp-editbox { resize: none; overflow: auto; }
select.vfp-combobox { padding: 0 1px; }

.vfp-button { background: var(--face); border: 1px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi);
  box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--light); padding: 0 2px; cursor: default;
  display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
.vfp-button img { max-height: calc(100% - 4px); }
.vfp-button:active:not(:disabled) { border-color: var(--dark) var(--hi) var(--hi) var(--dark); box-shadow: inset 1px 1px 0 var(--shadow); padding: 1px 1px 0 3px; }
.vfp-button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.vfp-button:disabled { color: var(--shadow) !important; text-shadow: 1px 1px 0 var(--hi); }
.vfp-button:disabled img { filter: grayscale(1) opacity(.5); }
.vfp-button.vfp-invisible { background: transparent; border: none; box-shadow: none; }
.vfp-button.vfp-invisible span { visibility: hidden; }

.vfp-commandgroup, .vfp-optiongroup { border: 2px groove var(--hi); }
.vfp-option { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.vfp-option input { margin: 0; }

.vfp-listbox { border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); overflow-y: auto; overflow-x: hidden; outline: none; }
.vfp-list-row { display: flex; white-space: nowrap; cursor: default; line-height: 15px; }
.vfp-list-row > span { overflow: hidden; text-overflow: clip; padding: 0 2px; border-right: 1px solid #c0c0c0; box-sizing: border-box; }
.vfp-list-row.sel { background: #0a246a; color: #fff; }
.vfp-listbox:focus .vfp-list-row.sel { outline: 1px dotted #ffff00; outline-offset: -1px; }

.vfp-pageframe { }
.vfp-tabs { display: flex; height: 24px; position: relative; z-index: 2; padding-left: 2px; }
.vfp-tab { background: var(--face); border: 1px solid; border-color: var(--hi) var(--dark) transparent var(--hi); border-bottom: none;
  padding: 2px 8px 0; margin-top: 3px; height: 21px; cursor: default; white-space: nowrap; }
.vfp-tab.active { margin-top: 0; height: 25px; padding-top: 3px; position: relative; z-index: 3; }
.vfp-pages { position: absolute; top: 24px; left: 0; right: 0; bottom: 0; border: 2px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi); background: var(--face); }
.vfp-pages.notabs { top: 0; }
.vfp-page { position: absolute; inset: 0; display: none; background-repeat: repeat; }
.vfp-page.active { display: block; }

.vfp-grid { border: 1px solid var(--dark); overflow: hidden; }
.vfp-grid-scroll { position: absolute; inset: 0; overflow: auto; }
.vfp-grid table { border-collapse: collapse; table-layout: fixed; }
.vfp-grid th { background: var(--face); border: 1px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); font-weight: normal; padding: 0 2px;
  position: sticky; top: 0; white-space: nowrap; overflow: hidden; z-index: 1; }
.vfp-grid td { border: 1px solid #c0c0c0; padding: 0; height: 16px; overflow: hidden; white-space: nowrap; }
.vfp-grid td input { width: 100%; height: 100%; border: none; padding: 0 2px; font: inherit; background: transparent; box-sizing: border-box; outline: none; }
.vfp-grid tr.cur td { background: #0a246a; color: #fff; }
.vfp-grid tr.cur td input { color: #fff; }
.vfp-grid tr.cur td input:focus { background: #ffffe0; color: #000; }

.vfp-shape.vfp-3d { border: 1px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); box-shadow: inset 1px 1px 0 var(--hi), 1px 1px 0 var(--shadow); }
.vfp-shape.vfp-flat { border: 1px solid #000; }
.vfp-line { pointer-events: none; }
.vfp-image { pointer-events: none; }

/* ---------------------------------------------------------------- MESSAGEBOX() */
.vfp-msg .vfp-client { background: var(--face); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 14px; min-width: 260px; max-width: 520px; }
.vfp-msg-body { display: flex; gap: 14px; align-items: flex-start; font: 8pt Tahoma, Arial, sans-serif; white-space: pre-wrap; }
.vfp-msg-icon { width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font: bold 20px/32px Arial; text-align: center; }
.vfp-msg-icon.stop { background: #e00000; }
.vfp-msg-icon.question { background: #2050c0; }
.vfp-msg-icon.exclam { background: #f0c000; color: #000; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); line-height: 38px; }
.vfp-msg-icon.info { background: #2050c0; font-family: Georgia, serif; }
.vfp-msg-btns { display: flex; justify-content: center; gap: 8px; }
.vfp-msg-btns .vfp-button { position: static; width: 75px; height: 23px; font: 8pt Tahoma, Arial, sans-serif; }

/* wait window / progress (DO PWAIT) */
.vfp-wait { position: absolute; right: 12px; top: 12px; background: #ffffe1; border: 1px solid #000; padding: 6px 12px; font: 8pt Tahoma, Arial, sans-serif; z-index: 9500; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }

/* banner shown on screens whose behaviour is scheduled for a later phase */
.vfp-preview-note { position: absolute; left: 0; right: 0; bottom: 0; background: #ffffe1; color: #000; border-top: 1px solid #000;
  font: 8pt Tahoma, Arial, sans-serif; padding: 2px 6px; z-index: 50; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.vfp-label[data-disabled="1"] { color: #808080 !important; text-shadow: 1px 1px 0 #fff; }
.vfp-page[inert] .vfp-textbox, .vfp-page[inert] .vfp-combobox, .vfp-page[inert] .vfp-editbox { color: #6d6d6d; background-color: var(--face) !important; }
.vfp-grid td { padding: 0 2px; }
.vfp-grid tr.cur td { background: #0a246a; color: #fff; }
.vfp-grid-editor { position: absolute; z-index: 5; box-sizing: border-box; border: 1px solid #000; padding: 0 2px; font: inherit; background: #ffffe0; outline: none; }
.vfp-grid:focus { outline: 1px dotted #000; }
img.vfp-image:not([src]), img.vfp-image[src=""] { visibility: hidden; }