:root {
  --desktop: #008080;
  --gray: #c0c0c0;
  --gray-dark: #808080;
  --gray-light: #ffffff;
  --titlebar-from: #10307c;
  --titlebar-to: #4a7fd6;
  --titlebar-text: #ffffff;
  --panel-navy: #16215c;
  --panel-purple: #3a1560;
  --panel-cream: #f2ecd0;
  --panel-lavender: #e2dcf2;
  --grid-head: #147a72;
  --text: #101010;
  --link: #003399;
  --field-bg: #ffffff;
  --field-border: #6b6b6b;
  --danger: #a11d1d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--desktop);
  color: var(--text);
  min-height: 100vh;
}

/* ---------- Desktop shell / main menu ---------- */
.desktop-shell { min-height: 100vh; padding-bottom: 40px; }

.app-titlebar {
  background: linear-gradient(180deg, var(--titlebar-from), var(--titlebar-to));
  color: var(--titlebar-text);
  padding: 6px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: bold; font-size: 13px;
  border-bottom: 2px solid #08183f;
}
.app-titlebar .app-title { display: flex; align-items: center; gap: 8px; }
.app-titlebar .win-dots { display: flex; gap: 4px; }
.app-titlebar .win-dots span {
  width: 14px; height: 14px; background: var(--gray); border: 1px solid #333;
  display: inline-block; text-align: center; line-height: 12px; font-size: 10px; color: #000;
}
.app-titlebar a { color: #fff; text-decoration: underline; font-weight: normal; font-size: 12px; }

.menubar {
  background: var(--gray);
  border-bottom: 2px solid var(--gray-dark);
  display: flex; gap: 2px; padding: 3px 8px;
  position: relative; z-index: 30;
  font-size: 13px;
}
.menubar > .menu-item { position: relative; }
.menubar > .menu-item > button {
  background: transparent; border: 1px solid transparent; color: #000;
  padding: 4px 10px; font-weight: bold; cursor: pointer; border-radius: 0;
}
.menubar > .menu-item > button:hover, .menubar > .menu-item.open > button {
  border: 1px solid #fff #808080 #808080 #fff; background: #d8d8d8;
}
.menu-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--gray-light); border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  padding: 3px 0;
}
.menu-item.open .menu-dropdown { display: block; }
.menu-dropdown button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: #000; padding: 5px 16px; font-size: 12.5px; cursor: pointer; border-radius: 0;
}
.menu-dropdown button:hover { background: var(--titlebar-to); color: #fff; }
.menu-dropdown hr { border: none; border-top: 1px solid var(--gray-dark); margin: 3px 6px; }

.desktop-body { padding: 30px 20px; display: flex; flex-direction: column; align-items: center; }
.brand-panel {
  background: var(--gray); border: 3px solid; border-color: #fff #404040 #404040 #fff;
  padding: 26px 40px; text-align: center; max-width: 560px; width: 100%;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.4);
}
.brand-panel h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: 0.5px; color: #10307c; }
.brand-panel .tagline { font-style: italic; color: #333; margin: 0 0 22px; font-size: 14px; }
.brand-panel .userline { font-size: 12px; color: #333; margin-bottom: 18px; }
.brand-panel .userline a { color: var(--link); }

.quick-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-buttons button {
  font-size: 14px; font-weight: bold; font-style: italic; padding: 14px 10px;
  background: var(--gray); border: 3px solid; border-color: #fff #404040 #404040 #fff;
  cursor: pointer; color: #10307c;
}
.quick-buttons button:active { border-color: #404040 #fff #fff #404040; }
.quick-buttons button:hover { background: #d8d8d8; }

/* ---------- Popups ---------- */
.popup-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 100; overflow-y: auto; padding: 30px 16px;
}
.popup-overlay.active { display: flex; align-items: flex-start; justify-content: center; }

.popup-window {
  display: none; background: var(--gray); width: 100%; max-width: 900px;
  border: 3px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.6);
  margin: 0 auto;
}
.popup-window.active { display: block; }

.popup-titlebar {
  background: linear-gradient(180deg, var(--titlebar-from), var(--titlebar-to));
  color: #fff; padding: 6px 10px; font-weight: bold; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.popup-titlebar .popup-close {
  background: var(--gray); color: #000; border: 1px solid #fff #404040 #404040 #fff;
  width: 20px; height: 18px; line-height: 16px; text-align: center; cursor: pointer;
  font-weight: bold; font-size: 12px; padding: 0;
}

.popup-toolbar {
  background: var(--gray); border-bottom: 1px solid var(--gray-dark);
  display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 8px;
}
.popup-toolbar button {
  background: var(--gray); border: 2px solid; border-color: #fff #404040 #404040 #fff;
  padding: 4px 9px; font-size: 11.5px; font-weight: bold; cursor: pointer; color: #000;
  border-radius: 0;
}
.popup-toolbar button:hover { background: #d8d8d8; }
.popup-toolbar button:active { border-color: #404040 #fff #fff #404040; }

.popup-body { padding: 14px; max-height: 72vh; overflow-y: auto; background: var(--gray); }

/* colored entity panels, matching legacy screens */
.entity-panel {
  border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 14px 16px;
  margin-bottom: 12px;
}
.entity-panel.c-customer { background: var(--panel-navy); }
.entity-panel.c-vendor { background: var(--panel-purple); }
.entity-panel.c-item { background: var(--panel-cream); }
.entity-panel .field-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.entity-panel .field-row label {
  font-style: italic; font-weight: bold; min-width: 150px; text-align: right;
  color: #fff; font-size: 13px;
}
.entity-panel.c-item .field-row label { color: #10307c; }
.entity-panel input, .entity-panel select {
  background: var(--field-bg); border: 2px solid; border-color: #404040 #fff #fff #404040;
  padding: 5px 7px; font-size: 13px; flex: 1; min-width: 140px; color: #000;
}
.entity-panel label.chk { display: flex; align-items: center; gap: 6px; min-width: auto; }

/* simple inline forms still used inside some popups (for flat masters) */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.inline-form label { font-size: 12.5px; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.inline-form input, .inline-form select {
  background: var(--field-bg); border: 2px solid; border-color: #404040 #fff #fff #404040;
  padding: 6px 8px; font-size: 13px; color: #000;
}
.inline-form input:focus, .inline-form select:focus { outline: 2px solid var(--titlebar-to); }

button {
  background: var(--gray); color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff;
  padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: bold; border-radius: 0;
}
button:hover { background: #d8d8d8; }
button:active { border-color: #404040 #fff #fff #404040; }
button.primary { background: var(--titlebar-to); color: #fff; border-color: #8fb4ee #06132e #06132e #8fb4ee; }
button.danger, button.small-danger {
  background: var(--danger); color: #fff; border-color: #d97a7a #4a0a0a #4a0a0a #d97a7a;
  padding: 3px 9px; font-size: 11.5px;
}

table { width: 100%; border-collapse: collapse; margin-top: 8px; background: #fff; }
th, td { text-align: left; padding: 6px 9px; font-size: 12.5px; border: 1px solid #9a9a9a; }
thead th {
  background: var(--grid-head); color: #fff; font-weight: bold; font-style: italic;
  text-transform: none; letter-spacing: 0;
}
tbody tr:nth-child(even) { background: #f2f2f2; }
tbody tr:hover { background: #cfe8ff; }
tbody tr.row-selected { background: #a9d4ff; }

.hint { color: #eee; font-size: 12px; background: #333; padding: 6px 10px; border-left: 4px solid var(--titlebar-to); margin: 0 0 10px; }
.popup-body .hint { color: #333; background: #fff8d8; border-left: 4px solid #b89b1a; }

.card {
  background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040;
  padding: 12px 14px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 10px; font-size: 13.5px; color: #10307c; }

.line-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.line-row input { width: 108px; background: var(--field-bg); border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 5px 7px; font-size: 12.5px; }
.rate-hint { color: #333; font-size: 11.5px; font-style: italic; background: #fff8d8; padding: 2px 6px; }

#sale-result, #pur-result, #po-result, #sret-result, #pret-result, #import-result, #settings-result {
  color: #0d5c1f; font-size: 13px; font-weight: bold; background: #ddf5df; padding: 6px 10px;
  border: 1px solid #0d5c1f;
}