* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Tahoma, Arial, sans-serif; font-size: 12px; background: #d9dde0; color: #000; }
a { color: #003c8f; text-decoration: none; }
button, .button { border: 1px solid #777; background: linear-gradient(#fff, #d6d6d6); padding: 3px 9px; color: #111; cursor: pointer; font: inherit; display: inline-block; }
button.primary, .button.primary { background: linear-gradient(#ffe0b8, #f4a84d); font-weight: bold; }
input, textarea, select { border: 1px solid #777; background: #fff; padding: 2px 4px; font: inherit; min-height: 22px; }
textarea { min-height: 54px; resize: vertical; }

.app-top { border-bottom: 1px solid #8a704f; background: #f7bd83; }
.title-strip { height: 24px; display: flex; align-items: center; gap: 10px; padding: 2px 7px; background: #e6e6e6; border-bottom: 1px solid #8e8e8e; }
.hamburger { width: 28px; height: 28px; line-height: 23px; margin-bottom: -20px; border: 2px solid #fff; border-radius: 50%; background: #d77b2d; color: #fff; text-align: center; font-size: 22px; z-index: 2; }
.title-strip .user { margin-left: auto; }
.module-toolbar { display: flex; gap: 10px; padding: 3px 8px 4px 96px; overflow-x: auto; background: #f7a24a; min-height: 44px; }
.tool-button { width: 62px; min-width: 62px; min-height: 39px; text-align: center; border: 0; background: transparent; color: #000; padding: 0; font-size: 11px; line-height: 1.1; }
.tool-button.active { outline: 1px dotted #333; background: rgba(255,255,255,.25); }
.tool-icon { display: block; width: 18px; height: 18px; line-height: 16px; margin: 0 auto 1px; border-radius: 2px; border: 1px solid #777; background: linear-gradient(#f8f8f8, #d1d1d1); color: #111; font-size: 9px; font-weight: bold; }
.health { display: flex; justify-content: flex-end; gap: 20px; padding: 2px 8px; border-top: 1px solid #d1914b; font-weight: bold; background: #f7a24a; }
.health.ok, .health.warn, .health.bad { background: #f7a24a; }
.app-main { padding: 0 2px 24px; min-height: calc(100vh - 120px); }
.app-footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 22px; padding: 4px 8px; background: #ececec; border-top: 1px solid #777; }
#sync-countdown { margin-left: auto; font-weight: bold; color: #0b4d91; }
.flash, .error { padding: 6px 8px; margin: 0 0 6px; border: 1px solid #888; background: #e8f2ff; }
.error { background: #ffe1dd; border-color: #a33; }

.login-body { display: grid; place-items: center; background: #cfcfcf; }
.login-box { width: 330px; padding: 18px; border: 1px solid #777; background: #eee; box-shadow: 3px 3px 0 #999; }
.login-box h1 { margin: 0 0 4px; font-size: 18px; }
.login-box label { display: grid; gap: 3px; margin: 10px 0; }
.login-box button { width: 100%; margin-top: 8px; }

.workbench { display: grid; grid-template-rows: auto auto 1fr; gap: 2px; padding-bottom: 25px; }
.filters { display: block; padding: 16px 8px 6px; border: 1px solid #aaa; background: #dcdee1; min-height: 74px; position: relative; }
.filters:before { content: "Search & Filter"; position: absolute; top: -1px; left: 7px; padding: 1px 8px; border: 1px solid #aaa; border-top: 0; border-radius: 0 0 5px 5px; background: #f8f8f8; font-weight: bold; }
.filter-form { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-right: 250px; }
.filter-form strong { display: none; }
.filter-form label { display: flex; align-items: center; gap: 4px; }
.filter-form select, .filter-form input { height: 18px; min-height: 18px; padding: 0 3px; }
.filter-row.two { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; background: #eceff2; border: 1px solid #bfc3c6; border-top: 0; }
.grid-search input { width: 155px; }
.mini-icons { display: inline-flex; gap: 3px; margin: 0 8px 0 2px; }
.mini-icons b { width: 18px; height: 18px; display: block; border-radius: 3px; border: 1px solid #777; background: linear-gradient(#8ed1ff, #1c82c1); }
.summary-panel { position: absolute; top: 8px; right: 10px; display: grid; grid-template-columns: 86px 86px; border: 1px solid #111; background: #fff; font-size: 11px; width: 174px; }
.summary-panel div { display: flex; justify-content: space-between; padding: 1px 4px; line-height: 13px; }
.summary-panel div:nth-child(1) { background: #ffffff; color: #000; }
.summary-panel div:nth-child(2) { background: #a9e8f6; color: #000; }
.summary-panel div:nth-child(3) { background: #2ea6ff; color: #000; }
.summary-panel div:nth-child(4) { background: #f19b1d; color: #000; }
.summary-panel div:nth-child(5) { background: #fff100; color: #000; }
.summary-panel div:nth-child(6) { background: #fff9b8; color: #000; }
.summary-panel div:nth-child(7) { background: #000000; color: #ffffff; }
.summary-panel div:nth-child(8) { background: #00d61f; color: #000; }
.summary-panel b { min-width: 28px; text-align: right; }
.grid-wrap { overflow: auto; border: 1px solid #777; background: #fff; max-height: calc(100vh - 170px); }
.job-grid { border-collapse: collapse; width: 100%; font-size: 11px; white-space: nowrap; table-layout: auto; }
.job-grid th { position: sticky; top: 0; z-index: 1; background: #474747; color: #fff; border: 1px solid #666; padding: 2px 4px; text-align: left; height: 22px; }
.job-grid td { border: 1px solid #9fb3af; padding: 1px 3px; max-width: 270px; overflow: hidden; text-overflow: ellipsis; height: 17px; line-height: 15px; }
.job-grid tbody tr { cursor: default; height: 18px; }
.job-grid tbody tr:hover { outline: 1px solid #1f5ea8; }
.row-orange td { background: #f19100; }
.row-yellow td { background: #fff100; }
.row-cyan td { background: #bdeef0; }
.row-red td { background: #ff1b1b; color: #000; }
.row-grey td { background: #c6effa; }
.row-green td { background: #00df34; color: #000; }
.row-black td { background: #000; color: #fff; }
.empty { text-align: center; padding: 16px !important; background: #fff !important; }

.form-page, .panel-page { max-width: 1180px; margin: 0 auto 34px; padding: 8px; border: 1px solid #888; background: #efefef; }
.form-page h2, .panel-page h2 { margin: 2px 0 8px; font-size: 16px; }
fieldset { border: 1px solid #888; margin: 6px 0; padding: 8px; background: #f7f7f7; }
legend { font-weight: bold; padding: 0 4px; }
.form-page fieldset { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 6px 10px; }
.form-page label { display: grid; gap: 2px; }
.form-page textarea { min-width: 100%; }
.hint { grid-column: 1 / -1; margin: 0 0 4px; color: #555; }
.inline-form { display: inline; }
.recon-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.recon-tabs span { border: 1px solid #777; padding: 4px 8px; background: #ddd; }

#modal-root { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.job-window { pointer-events: auto; position: absolute; top: 28px; left: 32px; width: min(990px, calc(100vw - 30px)); max-height: calc(100vh - 50px); border: 1px solid #777; background: #e7ecee; box-shadow: 2px 2px 0 rgba(0,0,0,.25); display: flex; flex-direction: column; }
.job-titlebar { height: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 3px 5px; background: #3d3d3d; color: white; font-weight: bold; cursor: move; font-size: 14px; position: relative; }
.job-titlebar .reminder-link { position: absolute; right: 34px; color: #fff; text-decoration: underline; font-size: 11px; }
.job-titlebar button { height: 18px; line-height: 12px; padding: 1px 6px; }
.modal-close { position: absolute; right: 6px; }
.job-window-body { display: grid; grid-template-columns: 78px 1fr; gap: 6px; padding: 4px 6px 0 0; overflow: auto; }
.job-modules { display: grid; align-content: start; gap: 6px; padding-top: 2px; border-right: 1px solid #999; background: #f7f7f7; }
.job-modules button { width: 76px; height: 61px; border: 0; border-bottom: 1px solid #ccc; background: transparent; text-align: center; padding: 2px; }
.job-modules button span { display: block; width: 34px; height: 28px; line-height: 26px; margin: 0 auto 2px; border-radius: 5px; background: #f0a018; color: #fff; font-weight: bold; font-size: 15px; }
.job-fields { display: grid; grid-template-columns: 1.05fr 1fr .95fr; gap: 6px; align-items: stretch; }
.job-fields fieldset { margin: 0; display: grid; grid-template-columns: 1fr; gap: 3px; border-color: #a8adb0; background: #f4f8f9; padding: 8px 6px 6px; position: relative; }
.job-fields legend { background: #eef1f2; border: 1px solid #b7bcbe; border-radius: 7px; padding: 0 8px; font-size: 12px; }
.job-fields label { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 4px; min-height: 18px; }
.job-fields input { height: 18px; min-height: 18px; padding: 0 3px; background: #fff; }
.job-fields textarea { width: 100%; min-height: 78px; padding: 3px; background: #fff; }
.job-fields fieldset:nth-child(10) textarea { background: #c9c9c9; min-height: 92px; }
.job-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; padding: 5px; border-top: 1px solid #b8b8b8; background: #e7ecee; }
.job-actions button { background: #c66b14; border: 0; color: #fff; font-weight: bold; padding: 2px 7px; }

@media (max-width: 760px) {
  .workbench { display: block; }
  .summary-panel { position: static; margin: 6px 0; }
  .filters, .filter-form { display: block; }
  .filter-form { padding-right: 0; }
  .filter-form label, .filter-form a, .filter-form button { margin: 3px 0; }
  .form-page fieldset, .job-fields { grid-template-columns: 1fr; }
  .job-window { left: 8px; top: 80px; width: calc(100vw - 16px); }
  .job-window-body { grid-template-columns: 1fr; }
}