/* ============================================================================
   legacy.css  -  the LEGACY theme styled as a corporate web portal circa 2005.
   Table-era centered layout, gradient masthead, beige tab nav, breadcrumb,
   fieldset forms, sunken inputs, bevelled buttons, "best viewed in IE6" footer.
   Verdana + small type read unmistakably as mid-2000s web.
   ========================================================================== */
.legacy {
  --lfont: Verdana, Geneva, Tahoma, sans-serif;
  --lnavy: #0a3a73; --lline: #aab2bd; --lbeige: #ece9d8;
  background: #cdd9e8; color: #1a1a1a;
  font-family: var(--lfont); font-size: 11px;
  -webkit-font-smoothing: auto;
}
.legacy .app-body { display: block; overflow: auto; background: #cdd9e8; }
.legacy a { color: #0033aa; }

.lpage {
  width: 1000px; max-width: 100%; min-height: 100%; margin: 0 auto; background: #fff;
  border-left: 1px solid var(--lline); border-right: 1px solid var(--lline);
  box-shadow: 0 0 16px rgba(0, 0, 0, .14); display: flex; flex-direction: column;
}

/* ---- masthead ---- */
.lmast {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: #fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-bottom: 3px solid rgba(0, 0, 0, .28);
}
.lmast-logo {
  width: 40px; height: 40px; flex: 0 0 40px; background: #fff; color: var(--accent);
  font-weight: bold; font-size: 18px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, .25);
}
.lmast-titles { line-height: 1.25; }
.lmast-name { font-size: 19px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, .28); }
.lmast-sub { font-size: 11px; color: #eaf0fb; margin-top: 2px; }
.lmast-util { margin-left: auto; align-self: flex-start; font-size: 11px; color: #eaf0fb; padding-top: 2px; }
.lmast-util .lmast-link { color: #fff; text-decoration: underline; cursor: pointer; }
.lmast-sep { margin: 0 6px; color: #dbe6fb; opacity: .55; }

/* ---- tab nav ---- */
.lnavbar { display: flex; gap: 2px; padding: 5px 12px 0; background: var(--lbeige); border-bottom: 1px solid var(--lline); }
.lnav-tab {
  font-size: 11px; font-weight: bold; color: var(--lnavy); text-decoration: none; cursor: pointer;
  padding: 5px 17px; background: linear-gradient(180deg, #fbfaf6, #e2ddcf);
  border: 1px solid var(--lline); border-bottom: none; border-radius: 4px 4px 0 0; position: relative; top: 1px;
}
.lnav-tab:hover { background: linear-gradient(180deg, #ffffff, #eef3fb); }
.lnav-tab.sel { background: #fff; top: 0; padding-bottom: 6px; color: #000; }

/* ---- breadcrumb ---- */
.lcrumb { font-size: 11px; color: #555; padding: 6px 16px; background: #f4f6f9; border-bottom: 1px solid #e0e4ea; }
.lcrumb-link { color: #0033aa; text-decoration: underline; cursor: pointer; }
.lcrumb-sep { margin: 0 6px; color: #8a93a2; }
.lcrumb-cur { color: #333; font-weight: bold; }

.lmain { flex: 1; padding: 14px 16px 20px; }

/* ---- section title bars (classic coloured headers) ---- */
.lh-secthead {
  font-size: 12px; font-weight: bold; color: #fff; background: var(--accent);
  padding: 4px 10px; margin: 18px 0 10px; border-left: 4px solid rgba(0, 0, 0, .28);
}

/* ---- home portal ---- */
.lh-banner {
  position: relative; border: 1px solid #cdd8e6; background: linear-gradient(180deg, #f3f7fc, #e6eef8);
  padding: 12px 14px;
}
.lh-welcome { font-size: 16px; font-weight: bold; color: var(--lnavy); }
.lh-sub { font-size: 11px; color: #5a6577; margin-top: 5px; }
.lh-gear { position: absolute; right: 12px; top: 12px; font-size: 11px; }

.lh-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.lh-stat { flex: 1; min-width: 150px; border: 1px solid #c8d2df; border-top: 3px solid var(--accent); background: #fff; padding: 10px 12px; text-align: center; }
.lh-statnum { font-size: 24px; font-weight: bold; color: var(--lnavy); }
.lh-statcap { font-size: 11px; color: #5a6577; margin-top: 6px; }

.lh-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.lh-tile { flex: 1; min-width: 190px; display: block; border: 1px solid #c8d2df; background: linear-gradient(180deg, #ffffff, #f1f5fa); padding: 10px 12px; text-decoration: none; }
.lh-tile:hover { background: linear-gradient(180deg, #f5f9ff, #e6eefa); border-color: var(--accent); }
.lh-tile-t { display: block; font-size: 12px; font-weight: bold; color: #0033aa; text-decoration: underline; }
.lh-tile-s { display: block; font-size: 11px; color: #5a6577; margin-top: 8px; }

/* ---- tables ---- */
table.lrecent { width: 100%; border-collapse: collapse; font-size: 11px; border: 1px solid var(--lline); background: #fff; }
table.lrecent th { background: #dbe5f1; color: var(--lnavy); font-weight: bold; text-align: left; padding: 4px 8px; border: 1px solid #c2cedd; }
table.lrecent td { padding: 3px 8px; border: 1px solid #e2e8f0; }
table.lrecent tr:nth-child(even) td { background: #f2f6fb; }
table.lrecent .k { color: #0033aa; font-weight: bold; }

/* ---- data screen ---- */
.lnav-rec { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #eef2f7; border: 1px solid #d4dce6; margin-bottom: 10px; font-size: 11px; }
.lnav-lbl { font-weight: bold; color: #333; }
.lrec-link { color: #0033aa; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.lrecnum { width: 46px; text-align: center; font: 11px var(--lfont); padding: 2px; background: #fff; border: 1px solid; border-color: #7a8aa0 #c7d0dc #c7d0dc #7a8aa0; }
.lof { color: #555; }
.lnav-sp { flex: 1; }

.lsearch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: #f7f9fc; border: 1px solid #e0e6ee; margin-bottom: 10px; }
.lsearch .linput.lookup { flex: 0 0 280px; width: 280px; }
.lsearch .lbtn.primary { white-space: nowrap; }
.llab.inline { font-weight: bold; color: #333; }

.lsplit { display: flex; gap: 12px; align-items: flex-start; }
.lleft { width: 250px; flex: 0 0 250px; border: 1px solid var(--lline); background: #fff; }
.lpanel-h { font-size: 11px; font-weight: bold; color: #fff; background: var(--accent); padding: 4px 8px; }
.lrec-list { height: 540px; overflow: auto; }
.litem { padding: 3px 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-bottom: 1px solid #eef1f5; }
.litem:hover { background: #eef4fc; }
.litem.sel { background: var(--accent); color: #fff; }
.lright { flex: 1; min-width: 0; }

/* ---- fieldset forms ---- */
fieldset.lsec { border: 1px solid #c2cedd; margin: 0 0 14px; padding: 10px 14px 14px; background: #fcfdff; }
fieldset.lsec legend { font-size: 12px; font-weight: bold; color: var(--lnavy); padding: 0 6px; }
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.lfield { display: flex; flex-direction: column; }
.lfield.multi { grid-column: 1 / -1; }
.llab { font-size: 11px; color: #333; margin-bottom: 3px; }
.linput, textarea.linput {
  width: 100%; font: 11px var(--lfont); padding: 3px 4px; background: #fff; color: #000;
  border: 1px solid; border-color: #7a8aa0 #c7d0dc #c7d0dc #7a8aa0;
}
textarea.linput { height: 46px; resize: none; }
.linput.sm { width: 150px; }

.lactions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e6ee; }
.lactions .note { flex: 1; font-size: 11px; font-style: italic; color: #5a6577; }

/* ---- bevelled buttons ---- */
.lbtn {
  font: 11px var(--lfont); padding: 4px 12px; cursor: pointer; color: #1a1a1a;
  background: linear-gradient(180deg, #fbfaf6, #ddd8c9);
  border: 1px solid; border-color: #ffffff #8d95a1 #8d95a1 #ffffff;
}
.lbtn:hover { background: linear-gradient(180deg, #ffffff, #e7e2d4); }
.lbtn:active { border-color: #8d95a1 #ffffff #ffffff #8d95a1; }
.lbtn.primary { font-weight: bold; }
.lbtn.sm { padding: 2px 10px; }

/* ---- footer ---- */
.lfoot { margin-top: auto; border-top: 1px solid #cdd8e6; background: #f4f6f9; padding: 10px 16px; text-align: center; color: #6b7686; font-size: 11px; }
.lfoot-links a { color: #0033aa; text-decoration: underline; }
.lfoot-sep { margin: 0 8px; color: #aab; }
.lfoot-info { margin-top: 6px; color: #8a94a4; }
.lfoot-note { margin-top: 4px; color: #9aa3b2; font-style: italic; }