/* ---------- shell ---------- */
.shell { position: fixed; inset: 0; display: flex; flex-direction: column; }
.workspace { flex: 1; min-height: 0; padding: 12px 14px 10px; display: flex; }
.main-win { flex: 1; min-width: 0; }
.main-split { flex: 1; min-height: 0; display: flex; }

/* navigation pane */
.navpane {
  width: 214px; flex: none; overflow: auto; padding: 8px 0;
  background: linear-gradient(90deg, #fff 0%, #fff 85%, #f5f9fd 100%); border-right: 1px solid #d6e5f5;
  user-select: none;
}
.navpane h6 { margin: 8px 12px 4px; font-size: 12.5px; font-weight: 600; color: #1e395b; display: flex; align-items: center; gap: 6px; }
.navpane h6::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #c4d5ea, transparent); }
.nav-item {
  display: flex; align-items: center; gap: 8px; margin: 1px 6px; padding: 4px 8px;
  border: 1px solid transparent; border-radius: 3px; color: #000; cursor: default;
}
.nav-item:hover { background: linear-gradient(var(--hover-1), var(--hover-2)); border-color: var(--hover-b); text-decoration: none; }
.nav-item.active { background: linear-gradient(var(--sel-1), var(--sel-2)); border-color: var(--sel-b); }
.nav-item .badge { margin-left: auto; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 9px; background: #d2321e; color: #fff; font-size: 11px; display: grid; place-items: center; }
.nav-item .badge.blue { background: #2f74c7; }
.nav-foot { margin: 14px 10px 4px; padding: 8px 10px; font-size: 12.5px; color: #4c607a; background: #f2f7fd; border: 1px solid #d6e5f5; border-radius: 3px; }
.nav-foot b { color: #1e395b; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; background: var(--face); }
.page { display: none; flex-direction: column; gap: 10px; padding: 0 12px 14px; min-height: 100%; }
.page.active { display: flex; }

/* old-program banner (Win2000 caption gradient) */
.banner {
  display: flex; align-items: center; gap: 12px; margin: 0 -12px 2px; padding: 9px 16px;
  background: linear-gradient(90deg, #0a246a 0%, #2a5bb5 45%, #a6caf0 100%); color: #fff;
  border-bottom: 1px solid #6d86b8;
}
.banner .bicon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(#ffffff, #dfe9f5); border: 1px solid #0b2b6b; box-shadow: inset 0 0 0 1px #fff; }
.banner .bicon img { width: 16px; height: 16px; transform: scale(1.5); image-rendering: auto; }
.banner h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; text-shadow: 1px 1px 0 #061743; }
.banner p { margin: 0; font-size: 13px; opacity: .92; }
.banner .bright { margin-left: auto; text-align: right; font-size: 12.5px; color: #0a246a; text-shadow: 0 0 6px rgba(255,255,255,.9); }

/* forms */
.form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 7px 10px; align-items: center; }
.form-grid > label.lbl { text-align: right; color: #222; white-space: nowrap; }
.form-grid > label.lbl::after { content: ' :'; color: #777; }
.form-grid .req::before { content: '*'; color: var(--bad); margin-right: 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.hint { font-size: 12.5px; color: var(--ink-soft); }
.cols { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tools-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.tools-row .tb { height: 25px; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; font-size: 13px; color: #444; }
.grid.h-sm { max-height: 300px; }
.grid.h-md { max-height: 420px; }
.grid.h-lg { max-height: 560px; min-height: 220px; }
.act { display: inline-flex; gap: 2px; }
.act .ib { width: 22px; height: 20px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 2px; background: none; padding: 0; cursor: default; }
.act .ib:hover { border-color: #7da2ce; background: linear-gradient(#fbfdff, #dbe9f8); }

/* summary tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.tile { padding: 7px 12px 8px; background: #fff; border: 1px solid; border-color: #a0a0a0 #fff #fff #a0a0a0; box-shadow: inset 1px 1px #808080; }
.tile .t { font-size: 12.5px; color: #4c607a; display: flex; align-items: center; gap: 6px; }
.tile .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tile .s { font-size: 12px; color: #777; }

/* evidence upload list */
.uplist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.uplist .u { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px 150px; gap: 8px; align-items: center; font-size: 13px; }
.uplist .u .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* slip review */
.slip-thumb { width: 44px; height: 60px; object-fit: cover; object-position: top; border: 1px solid #b9c3cf; background: #fff; display: block; cursor: zoom-in; }
.slip-row .tb { height: 24px; font-size: 13px; }
.slip-row .tb.amount { width: 96px; }
.slip-row .tb.cat { width: 110px; }
.slip-row .tb.note { width: 150px; }
.slip-row .tb.pl { width: 260px; }
.slip-preview { display: flex; gap: 12px; align-items: flex-start; }
.slip-preview img { max-width: 180px; max-height: 300px; border: 1px solid #b9c3cf; background: #fff; }
.ocr-cands { display: flex; gap: 4px; flex-wrap: wrap; }
.ocr-cands button { font: inherit; font-size: 12px; padding: 0 6px; height: 20px; border: 1px solid #a6c5ea; background: #eef6ff; border-radius: 10px; cursor: default; }
.ocr-cands button:hover { background: #d8eafd; border-color: #3c7fb1; }

/* lookup card */
.lookup { display: grid; gap: 6px; }
.lookup .big { font-size: 15px; }
.lookup .big b { font-size: 18px; color: var(--navy); }
.fee-opts { display: grid; gap: 4px; }
.fee-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; cursor: default; }
.fee-opt:hover { background: linear-gradient(var(--hover-1), var(--hover-2)); border-color: var(--hover-b); }
.fee-opt.on { background: linear-gradient(var(--sel-1), var(--sel-2)); border-color: var(--sel-b); }
.fee-opt .amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* bars in summary */
.bar { height: 12px; min-width: 2px; border: 1px solid #3ea640; border-radius: 2px; background: linear-gradient(#b8f2b9, #7be47d 45%, #39d03c 51%, #55dd58); }
.bar.red { border-color: #b43b2a; background: linear-gradient(#f8c0b8, #ee7a69 45%, #d9442f 51%, #e2614e); }

/* viewer */
.viewer video, .viewer img { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; background: #000; }
.viewer .meta { margin-top: 10px; font-size: 13px; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; }
.viewer .meta dt { color: #4c607a; }
.viewer .meta dd { margin: 0; word-break: break-all; }

/* ---------- taskbar + start menu ---------- */
.taskbar {
  height: 40px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 0 0 4px; position: relative; z-index: 60;
  background: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.12) 48%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.2)), rgba(22, 52, 92, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px rgba(0,0,0,.4);
  user-select: none; color: #fff;
}
.orb {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0,20,50,.8); flex: none; display: grid; place-items: center; cursor: default; position: relative; margin-right: 6px;
  background: radial-gradient(circle at 50% 110%, #7ef0ff 0%, #2aa7e8 28%, rgba(20,90,170,.0) 60%), radial-gradient(circle at 50% 30%, #3b88cf 0%, #0f4c92 60%, #082c5c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 8px rgba(130,210,255,.55);
}
.orb::before { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 46%; border-radius: 50% 50% 45% 45%; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.08)); }
.orb:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 14px rgba(150,230,255,.95); }
.orb img { position: relative; width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.tbtn {
  height: 36px; width: 180px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13px; overflow: hidden; white-space: nowrap;
  border: 1px solid rgba(0,0,0,.55); border-radius: 3px;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.15) 50%, rgba(255,255,255,.05) 51%, rgba(255,255,255,.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); text-shadow: 0 1px 2px #000;
}
.tray { margin-left: auto; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 0 0 12px; border-left: 1px solid rgba(0,0,0,.35); box-shadow: inset 1px 0 rgba(255,255,255,.2); }
.tray .ti { display: grid; place-items: center; }
.tray .ti img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.clock { text-align: center; font-size: 12px; line-height: 1.25; padding: 0 6px; text-shadow: 0 1px 2px #000; }
.showdesk { width: 14px; height: 100%; border-left: 1px solid rgba(255,255,255,.35); background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.25)); }

.startmenu {
  position: fixed; left: 4px; bottom: 42px; z-index: 90; width: 400px; max-width: calc(100vw - 8px); display: none;
  border: 1px solid rgba(0,0,0,.75); border-radius: 7px; padding: 8px;
  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.08)), rgba(32, 72, 120, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 4px 4px 16px rgba(0,0,0,.5);
}
.startmenu.open { display: grid; grid-template-columns: 1fr 150px; gap: 8px; animation: dlg-in .12s ease-out; }
.sm-left { background: #fff; border: 1px solid #4d6d93; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 1px; min-height: 300px; }
.sm-left .nav-item { margin: 0; padding: 6px 8px; }
.sm-left .sm-sep { height: 1px; margin: 5px 4px; background: #d5dfe9; }
.sm-right { display: flex; flex-direction: column; gap: 2px; color: #fff; padding-top: 4px; }
.sm-user { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; text-shadow: 0 1px 2px #000; }
.sm-user .pic { width: 56px; height: 56px; border-radius: 4px; border: 2px solid rgba(255,255,255,.8); background: linear-gradient(135deg, #f7d96b, #e48d24); display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sm-link { padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; text-shadow: 0 1px 2px #000; cursor: default; }
.sm-link:hover { border-color: rgba(255,255,255,.5); background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1)); }
.sm-off { margin-top: auto; align-self: flex-end; }

/* ---------- login (Win7 welcome screen) ---------- */
.logon { position: fixed; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; }
.logon .box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 340px; max-width: calc(100vw - 32px); }
.logon .tile-pic {
  width: 126px; height: 126px; padding: 8px; border-radius: 8px;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.18)); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25);
}
.logon .tile-pic div { width: 100%; height: 100%; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(160deg, #3d8fd9, #0d3d7a); border: 1px solid rgba(0,0,0,.45); }
.logon .tile-pic img { width: 64px; height: 64px; }
.logon h1 { margin: 6px 0 0; font-size: 26px; font-weight: 400; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.logon .sub { margin: -6px 0 6px; font-size: 14px; opacity: .9; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.logon .field { position: relative; width: 100%; }
.logon .field .tb { width: 100%; height: 30px; padding-right: 40px; border-radius: 3px; border-color: #5d7fa3; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.logon .go {
  position: absolute; right: -38px; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.6); cursor: default;
  background: radial-gradient(circle at 50% 120%, #8ff 0, #3aa6e6 40%, #145aa8 80%); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.5);
  display: grid; place-items: center;
}
.logon .go:hover { filter: brightness(1.15); }
.logon .err { min-height: 22px; font-size: 14px; color: #fff; text-shadow: 0 1px 3px #000; }
.logon .err b { color: #ffd3c9; }
.logon .brand { position: fixed; bottom: 22px; left: 0; right: 0; font-size: 13px; opacity: .85; text-shadow: 0 1px 2px #000; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cols, .cols.wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .workspace { padding: 0; }
  .main-win { border-radius: 0; padding: 0 3px 3px; }
  .main-split { flex-direction: column; }
  .navpane { width: auto; display: flex; overflow-x: auto; padding: 4px; border-right: 0; border-bottom: 1px solid #d6e5f5; }
  .navpane h6, .nav-foot { display: none; }
  .nav-item { white-space: nowrap; }
  .tbtn, .menubar { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > label.lbl { text-align: left; }
  .banner .bright { display: none; }
}

/* maximize button: drop the wallpaper margin */
body.maxed .workspace { padding: 0; }
body.maxed .main-win { border-radius: 0; }
.nav-item .badge[hidden] { display: none; }
.tb.mono::placeholder { font-family: var(--font); font-size: 13.5px; }