@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #1b3a4b;
  --accent-2: #16323f;
}

html, body {
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--ink);
}
body.router-shell {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}

/* ===== LOGIN ===== */
body.login-page {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 400px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 36px 28px;
  box-shadow: 0 20px 50px rgba(17,24,39,.08);
}
.login-card .mark {
  width: 88px; height: 88px;
  margin: 0 auto 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.login-card .mark img { width: 88px; height: 88px; object-fit: contain; }
.login-card h1 {
  margin: 0;
  text-align: center;
  font-size: 22px;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--accent);
}
.login-card p {
  margin: 6px 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin: 0 0 6px;
}
.login-card input {
  width: 100%;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0 12px;
  font: 14px Inter, sans-serif;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: 650 14px Inter, sans-serif;
  cursor: pointer;
}
.login-card button:disabled { opacity: .55; }
.login-card .err { min-height: 18px; color: #b45309; font-size: 12px; text-align: center; }

/* ===== APP BAR ===== */
.appbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
}
.appbar-brand { display: flex; align-items: center; gap: 10px; }
.appbar-mark {
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.appbar-mark img { width: 40px; height: 40px; object-fit: contain; display: block; }
.appbar-brand b {
  display: block;
  font-size: 13px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent);
}
.appbar-brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.appbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.appbar-user .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.appbar-user b { font-weight: 600; color: var(--ink); }
.appbar-user a {
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  background: #fff;
}
.appbar-user a:hover { background: var(--bg); }
.season-sel {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 8px;
  font: 650 12px Inter, sans-serif;
  color: var(--accent);
  cursor: pointer;
}
.season-lbl {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-right: 4px;
}
.season-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.season-sel.dash {
  height: auto;
  font: inherit;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.03em;
  border: 0;
  border-bottom: 2px dashed #9ca3af;
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
  color: inherit;
}
.season-sel.dash:focus { outline: none; border-bottom-color: var(--accent); }

/* ===== SIDE RAIL ===== */
#west-div, #acc-ct {
  background: #fff !important;
  color: var(--ink) !important;
}
.rail { padding: 10px 8px 24px; }
.rail-label {
  margin: 14px 10px 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 4px;
  border-radius: 8px;
  color: #1f2937 !important;
  text-decoration: none !important;
  font-size: 13px;
  cursor: pointer;
}
.rail-item:hover { background: #f3f4f6; color: var(--accent) !important; }
.rail-item svg {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}

.x-layout-panel-north,
.x-layout-panel-west,
.x-layout-panel-center { border: 0 !important; }
.x-layout-panel-west { background: #fff !important; border-right: 1px solid var(--line) !important; }
.x-layout-panel-center, #center-div { background: var(--bg) !important; }
.x-layout-split { background: var(--line) !important; }
.x-layout-collapsed { background: #fff !important; border: 0 !important; }
.x-layout-panel-hd { display: none !important; }

/* ===== SEARCH / GRID ===== */
body.search-shell {
  background: var(--bg) !important;
  margin: 0 !important;
}
body.search-shell > div[style*="width:98%"] {
  width: auto !important;
  margin: 12px 14px !important;
}
body.search-shell .x-box-tl,
body.search-shell .x-box-tr,
body.search-shell .x-box-tc,
body.search-shell .x-box-bl,
body.search-shell .x-box-br,
body.search-shell .x-box-bc { display: none !important; height: 0 !important; }
body.search-shell .x-box-ml,
body.search-shell .x-box-mr,
body.search-shell .x-box-mc {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#SearchForm {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px 6px;
  width: auto !important;
  margin: 0 !important;
}
#SearchGrid {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

.x-form-text, .x-form-field, input.x-form-text, select.x-form-field, textarea.x-form-field {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.x-form-item label {
  font-family: Inter, sans-serif !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.x-btn-text { font-family: Inter, sans-serif !important; font-weight: 650 !important; }

.x-grid-header, .x-grid-hd-row td, .x-grid-hd {
  background: #f8fafc !important;
  color: #374151 !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  border-color: var(--line) !important;
}
.x-grid-row td, .x-grid-cell {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
}
.x-grid-row-alt { background: #fafbfc !important; }
.x-grid-row-over { background: #eef6f8 !important; }
.x-grid-row-selected { background: #e0eef3 !important; }

a.ic {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: #eef2f6;
  color: var(--accent);
  text-decoration: none;
}
a.ic:hover { background: var(--accent); color: #fff; }
a.ic svg { width: 15px; height: 15px; display: block; }

/* ===== DIALOGS ===== */
.x-dlg { border: 0 !important; box-shadow: 0 24px 60px rgba(15,23,42,.22) !important; }
.x-dlg-hd, .x-dlg .x-dlg-hd {
  background: #fff !important;
  color: var(--accent) !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.x-dlg-bd { background: var(--bg) !important; }
.x-tabs-strip, .x-tabs-wrap { background: #fff !important; border-color: var(--line) !important; }
.x-tabs-strip a span, .x-tabs-item-body {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .06em;
  color: var(--muted) !important;
}
.x-toolbar { background: #fff !important; border-color: var(--line) !important; }
.appbar-menus { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  background: #fff;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--accent); color: var(--accent); }
.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  padding: 6px;
  z-index: 80;
}
.menu-list .rail-item { margin: 0; }

/* ===== DESK / OMNI SEARCH ===== */
.desk { padding: 18px 22px 8px; }
.omni {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.omni-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.omni-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--bg);
  border-radius: 10px;
  padding: 0 12px;
}
.omni-search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }
.omni-search input {
  flex: 1;
  height: 40px;
  border: 0;
  background: transparent;
  font: 15px Inter, sans-serif;
  outline: none;
  min-width: 0;
}
.omni-bar select, .omni-bar button, .omni select, .omni button {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: 650 13px Inter, sans-serif;
  padding: 0 12px;
}
.omni-bar select, .omni select { min-width: 96px; }
.omni button#omniGo { background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.omni button#omniAdv {
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.omni button#omniAdv.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.omni button#omniClear { cursor: pointer; flex: 0 0 auto; }
.omni button.ghost {
  background: #fff;
  cursor: pointer;
  color: var(--accent);
  border: 1px solid var(--line);
}
.omni button.ghost.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.omni .filter-sheet {
  display: none;
  margin: 8px 0 0;
  padding: 12px 2px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.omni .filter-sheet.open { display: block; }
#SearchForm.adv-panel { display: none !important; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; padding: 8px 2px 0; }
.chip {
  display: inline-flex; align-items: center;
  background: #e8eef2; color: var(--accent);
  border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 650;
}
.filter-sheet {
  display: none;
  margin-top: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(17,24,39,.08);
}
.filter-sheet.open { display: block; }
.filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.filter-head strong { display: block; font-size: 15px; color: var(--ink); }
.filter-head em { font-style: normal; color: var(--muted); font-size: 12px; }
.filter-head .ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; height: 32px; padding: 0 10px; cursor: pointer; font: 650 12px Inter, sans-serif; }
.filter-actions { display:flex; gap:8px; align-items:center; }
.filter-actions button {
  height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font: 650 12px Inter, sans-serif; border: 1px solid var(--line); background:#fff; color: var(--ink);
}
#filterSearch, #filterExport { background: var(--accent); color:#fff; border-color: var(--accent); }
#peopleExport { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
.filter-id { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.filter-id input, .frow select, .frow input {
  height: 40px; border: 1px solid #d1d5db; border-radius: 10px;
  background: #fff; color: var(--ink);
  padding: 0 12px; font: 13px Inter, sans-serif;
}
.filter-id input:focus, .frow select:focus, .frow input:focus {
  outline: none; border-color: var(--accent);
}
.filter-id input::placeholder, .frow input::placeholder { color: #9ca3af; }
.filter-rows { display: flex; flex-direction: column; gap: 8px; }
.frow { display: grid; grid-template-columns: 1.4fr 120px 1fr 40px; gap: 8px; align-items: center; position: relative; }
.f-suggest {
  position: absolute;
  z-index: 80;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(17,24,39,.14);
  max-height: 260px;
  overflow: auto;
  padding: 6px;
}
.f-sug {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font: 13px Inter, sans-serif;
  color: #111827;
}
.f-sug em { font-style: normal; color: #9ca3af; font-size: 11px; }
.f-sug.on, .f-sug:hover { background: #f3f4f6; }
.f-del {
  height: 40px; border: 1px solid var(--line); border-radius: 10px;
  background: #f3f4f6; color: var(--ink); cursor: pointer; font-size: 18px;
}
.add-filter {
  margin-top: 12px; height: 36px;
  border: 1px dashed #c5cbd3; background: #f8fafc;
  color: var(--accent); border-radius: 10px; padding: 0 12px;
  font: 650 12px Inter, sans-serif; cursor: pointer;
}
.people-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 8px;
  color: var(--muted);
  font-size: 12px;
}
.pager { display:flex; align-items:center; gap:8px; }
.pager button, .pager select {
  height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background:#fff; font:650 12px Inter,sans-serif; padding: 0 10px; cursor:pointer;
}
#people, #list { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; }
.people-head {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-sizing: border-box;
}
.people-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person .pick { width: 16px; height: 16px; margin: 0; justify-self: center; }
.person .fcol, .people-head .fcol {
  font-size: 12px;
  color: #111827;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-head .fcol { color: #6b7280; font-size: 11px; }
.person {
  display: grid;
  grid-template-columns: 20px 36px minmax(0,1.5fr) 140px 72px 120px 110px 36px;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.person:hover { border-color: #c5d0d6; box-shadow: 0 6px 16px rgba(15,23,42,.05); }
.person .ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.person .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.person .who .nm { min-width: 0; flex: 1; }
.person .who .ic { flex: 0 0 28px; }
.person .who b { display: block; font-size: 14px; }
.person .who em { font-style: normal; color: var(--muted); font-size: 11px; }
.person .xrow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.person .xrow span {
  background: #f3f4f6;
  color: #374151;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}
.person .meta { color: var(--muted); font-size: 12px; }
.pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f6;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}
.pill.active { background: #dcfce7; color: #166534; }
.pill.cancelled { background: #fee2e2; color: #991b1b; }
.pill.passive { background: #f3f4f6; color: #6b7280; }
.pill.initial { background: #dbeafe; color: #1e40af; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

#ops-nav {
  position: fixed;
  top: 56px; left: 0; bottom: 0; width: 220px;
  background: #1b3a4b;
  color: #f8fafc;
  padding: 14px 10px;
  box-sizing: border-box;
  z-index: 20;
  overflow-y: auto;
}
#south-div, #CheckUserDiv,
.x-layout-panel-south, .x-layout-split-south, .x-layout-collapsed-south {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
.ops-link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(248,250,252,.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.ops-link:hover { background: rgba(248,250,252,.08); color: #fff; }
.ops-link.on { background: rgba(248,250,252,.14); color: #fff; }
.ops-group { margin: 10px 0 4px; }
.ops-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(248,250,252,.78);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.ops-group summary::-webkit-details-marker { display: none; }
.ops-group summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
}
.ops-group[open] summary::after { transform: rotate(45deg); }
.ops-group summary:hover { background: rgba(248,250,252,.08); color: #fff; }
.ops-sub {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px 4px 16px;
  border-radius: 8px;
  color: rgba(248,250,252,.7);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.ops-sub:hover { background: rgba(248,250,252,.08); color: #fff; }
.ghost-grid {
  height: 48px !important;
  min-height: 48px !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 22px 16px;
}
.ghost-grid .x-grid-header,
.ghost-grid .x-grid-body { display: none !important; height: 0 !important; }

.ut-modal {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(17,24,39,.45);
  display: flex; align-items: center; justify-content: center;
}
.ut-modal-card {
  width: 360px; background: #fff; border-radius: 16px;
  border: 1px solid #e5e7eb; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(17,24,39,.2);
  font-family: Inter, sans-serif;
}
.ut-modal-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.02em; }
.ut-modal-card p { margin: 0 0 14px; color: #6b7280; font-size: 13px; }
.ut-modal-card select {
  width: 100%; height: 42px; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 0 12px; font: 14px Inter, sans-serif; background: #fff; margin-bottom: 16px;
}
.ut-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ut-modal-actions button {
  height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 650 13px Inter, sans-serif; border: 1px solid #e5e7eb; background: #fff;
}
.ut-modal-actions button.ghost { color: #6b7280; }
.ut-modal-actions #yearModalOk { background: #1b3a4b; color: #fff; border-color: #1b3a4b; }
.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.desk-tile {
  display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 16px; text-decoration: none; color: #111827; cursor: pointer;
}
.desk-tile:hover { border-color: #1b3a4b; }
.desk-tile b { display: block; font-size: 14px; margin-bottom: 4px; }
.desk-tile em { font-style: normal; color: #6b7280; font-size: 12px; }
.newpax-frame { position:absolute; inset:0; border:0; width:100%; height:100%; }

.qf-label {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-sheet .quick-filters { margin: 0; }
.quick-filters {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.75fr 1.1fr 1.1fr 1fr;
  gap: 8px;
  margin: 10px 0 4px;
}
.quick-filters select,
.quick-filters input {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  font: 13px Inter, sans-serif;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .quick-filters { grid-template-columns: 1fr 1fr 1fr; }
}
.f-field-wrap { position: relative; }
.f-field-q {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  font: 13px Inter, sans-serif;
  box-sizing: border-box;
}
.x-window-dlg {
  border: 0 !important; border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.22) !important;
  font-family: Inter, sans-serif !important;
}
.x-window-dlg .x-window-tl, .x-window-dlg .x-window-tr, .x-window-dlg .x-window-tc,
.x-window-dlg .x-window-ml, .x-window-dlg .x-window-mr, .x-window-dlg .x-window-mc,
.x-window-dlg .x-window-bl, .x-window-dlg .x-window-br, .x-window-dlg .x-window-bc { background:#fff !important; }
.x-window-dlg .x-window-header { background:#fff !important; color:#111827 !important; font:650 16px Inter,sans-serif !important; padding:14px 16px 6px !important; border:0 !important; }
.x-window-dlg .x-window-body { color:#374151 !important; font:13px/1.5 Inter,sans-serif !important; padding:8px 16px 14px !important; }
.x-window-dlg .x-btn { background:#1b3a4b !important; border-radius:10px !important; border:0 !important; }
.x-window-dlg .x-btn button { color:#fff !important; font:650 12px Inter,sans-serif !important; }

a.tel {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px dashed #9ca3af;
}
a.tel:hover { border-bottom-color: var(--accent); }

.menu-toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 8px;
  flex: 0 0 40px;
  padding: 0;
}
.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
  display: block; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; position: relative;
}
.menu-toggle span:before, .menu-toggle span:after {
  content: ""; position: absolute; left: 0;
}
.menu-toggle span:before { top: -5px; }
.menu-toggle span:after { top: 5px; }
body.nav-collapsed .menu-toggle,
body.nav-open .menu-toggle { background: #eef2f6; }
#ops-nav {
  transition: transform .2s ease;
}
#center-div {
  transition: left .2s ease;
}
body.nav-collapsed #ops-nav {
  transform: translateX(-105%);
  pointer-events: none;
}
body.nav-collapsed #center-div {
  left: 0 !important;
}
body.nav-collapsed.nav-peek #ops-nav {
  transform: none;
  pointer-events: auto;
  box-shadow: 16px 0 40px rgba(15,23,42,.22);
  z-index: 25;
}
#navHoverEdge {
  display: none;
  position: fixed;
  top: 56px; left: 0; bottom: 0;
  width: 16px;
  z-index: 21;
}
body.nav-collapsed #navHoverEdge { display: block; }
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(15,23,42,.4);
  z-index: 19;
}

@media (max-width: 860px) {
  html, body { -webkit-text-size-adjust: 100%; }
  .menu-toggle { display: inline-flex; }
  body.nav-collapsed #ops-nav { transform: translateX(-105%); }
  body.nav-open #ops-nav { transform: none !important; pointer-events: auto; }
  .appbar { padding: 0 10px; }
  .appbar-brand small, .appbar-user b { display: none; }
  #ops-nav {
    transform: translateX(-105%);
    transition: transform .2s ease;
    width: min(280px, 86vw);
    box-shadow: 16px 0 40px rgba(15,23,42,.25);
    z-index: 25;
  }
  body.nav-open #ops-nav { transform: none; }
  body.nav-open .nav-backdrop { display: block; }
  #center-div { left: 0 !important; }
  .login-card { width: calc(100% - 32px); max-width: 400px; padding: 24px 20px; }
  .people-head { display: none !important; }
  .person, .plist .person {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px !important;
  }
  .person .who { flex: 1 1 160px; min-width: 0; }
  .omni-bar { display: flex; flex-wrap: wrap; gap: 8px; }
  .omni-search { flex: 1 1 100%; }
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .kpis.row8 { grid-template-columns: 1fr 1fr !important; }
  .tot { grid-template-columns: 1fr 1fr !important; }
  html.list-page,
  html.list-page body,
  body.list-page,
  body.search-shell.list-page,
  body.ops,
  body.ops.listfix {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
  }
  body.search-shell.list-page .desk,
  body.list-page .desk,
  body.list-page .wrap.desk,
  body.ops.listfix .ops-wrap,
  body.ops .wrap {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    display: block !important;
  }
  body.list-page #people,
  body.list-page .list-scroll,
  body.ops.listfix .ops-scroll,
  .sheetwrap {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
  }
  #center-div {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ===== sticky student lists: chrome stays, rows scroll (desktop only) ===== */
@media (min-width: 861px) {
html.list-page {

  height: 100% !important;
  overflow: hidden !important;
  margin: 0;
}
body.search-shell.list-page,
body.list-page {
  position: absolute !important;
  left: 0; right: 0; top: 0; bottom: 0;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.search-shell.list-page .desk,
body.list-page .desk,
body.list-page .wrap.desk {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
  box-sizing: border-box;
}
body.search-shell.list-page .desk > .omni,
body.search-shell.list-page .desk > .filter-chips,
body.search-shell.list-page .desk > .people-toolbar,
body.search-shell.list-page .desk > #SearchForm,
body.search-shell.list-page .desk > .filters,
body.list-page .wrap.desk > h1,
body.list-page .wrap.desk > .sub,
body.list-page .wrap.desk > .omni,
body.list-page .wrap.desk > .tot {
  flex: 0 0 auto;
}
body.list-page #people,
body.list-page .list-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: auto;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}
body.list-page .people-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg, #f4f6f8);
  box-shadow: 0 1px 0 var(--line, #e5e7eb);
}
body.list-page #studentDialogContainer,
body.list-page #SearchGrid,
body.list-page #LogListContainer,
body.list-page #DocumentListContainer {
  flex: 0 0 0;
  height: 0;
  overflow: visible;
}
body.ops.listfix {
  position: absolute !important;
  left: 0; right: 0; top: 0; bottom: 0;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px 0;
  box-sizing: border-box;
  margin: 0;
}
body.ops.listfix .ops-wrap {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.ops.listfix .ops-wrap > h1,
body.ops.listfix .ops-wrap > .sub,
body.ops.listfix .ops-wrap > .kpis,
body.ops.listfix .ops-wrap > .season-head,
body.ops.listfix .ops-wrap > .omni {
  flex: 0 0 auto;
}
body.ops.listfix .ops-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto !important;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}
body.ops.listfix .people-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
}
}

/* Mobile: document scroll. Nested overflow:hidden + flex inner scrollers clip on phones. */
@media (max-width: 860px) {
  html.list-page,
  html.list-page body,
  body.list-page,
  body.search-shell,
  body.search-shell.list-page,
  body.ops,
  body.ops.listfix {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.search-shell.list-page .desk,
  body.list-page .desk,
  body.list-page .wrap.desk,
  body.ops.listfix .ops-wrap,
  body.ops .ops-wrap,
  body.ops .wrap {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    display: block !important;
  }
  body.list-page #people,
  body.list-page .list-scroll,
  body.ops.listfix .ops-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
  }
  .sheetwrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    -webkit-overflow-scrolling: touch;
  }
  #center-div {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


.plist .more-row { display: none !important; }
.plist.open .person.more-row { display: grid !important; }
.more-btn {
  margin-top: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  border-radius: 8px;
  font: 650 12px Inter, sans-serif;
  cursor: pointer;
  color: var(--accent, #1b3a4b);
}
#backTop {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 90;
  display: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #1b3a4b;
  color: #fff;
  font: 650 13px Inter, sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,.22);
}
#backTop.show { display: inline-flex; align-items: center; gap: 6px; }
#backTop:before { content: "↑"; font-size: 15px; }

#omniYear, #qfYear { display: none !important; }