/* Admin backend sidebar menu — replaces the legacy HV Menu.
   Flex-based (works under the current HTML 4.01 doctype and a future HTML5
   switch). Theme: "Cool Gray" — a neutral grayscale with a slate-gray accent,
   tuned to sit quietly behind the arial / navy-heading / gray-table pages.
   Colours are kept as CSS variables for easy future tweaking. Prefix: abm- */

body {
  margin: 0;
  --abm-top-bg:#edeef0; --abm-top-fg:#33363b; --abm-top-bd:#d4d7db; --abm-brand:#33363b;
  --abm-btn-bg:#e0e2e5; --abm-btn-bd:#cbcfd4; --abm-btn-fg:#33363b; --abm-btn-hv:#d4d7db;
  --abm-side-bg:#f3f4f5; --abm-side-bd:#d7dadf; --abm-head-bg:#e7e9eb; --abm-title:#8a8f97;
  --abm-input-bg:#ffffff; --abm-input-bd:#cbcfd4; --abm-input-fg:#33363b;
  --abm-grp-fg:#33363b; --abm-hover-bg:#e7e9ec; --abm-hover-fg:#1f2937;
  --abm-ico:#9aa0a8; --abm-caret:#aab0b8; --abm-subhead:#8a8f97;
  --abm-item-fg:#4b5159; --abm-active-bg:#e2e5ea; --abm-active-fg:#1f2937; --abm-accent:#475569;
  --abm-nores:#8a8f97; --abm-reopen-bg:#e7e9eb; --abm-reopen-fg:#4b5159;
}
.abm-top, .abm-side, .abm-main, .abm-reopen { box-sizing: border-box; }
.abm-top *, .abm-side * { box-sizing: border-box; }

/* ---- top bar ---- */
.abm-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 12px;
  background: var(--abm-top-bg); border-bottom: 1px solid var(--abm-top-bd);
  font-family: arial, sans-serif; color: var(--abm-top-fg);
}
.abm-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 32px; flex: 0 0 auto;
  font-size: 18px; line-height: 1; color: var(--abm-btn-fg); cursor: pointer;
  background: var(--abm-btn-bg); border: 1px solid var(--abm-btn-bd); border-radius: 6px;
}
.abm-toggle:hover { background: var(--abm-btn-hv); }
.abm-brand { font-weight: 700; font-size: 15px; white-space: nowrap; color: var(--abm-brand); }
.abm-grow { flex: 1; }
.abm-badge {
  background: #c0392b; color: #fff; font: 700 12px arial;
  padding: 3px 10px; border-radius: 11px; text-decoration: none; white-space: nowrap;
}
.abm-badge:hover { color: #fff; }
.abm-logout {
  color: var(--abm-btn-fg); text-decoration: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 6px; font: 600 13px arial;
  background: var(--abm-btn-bg); border: 1px solid var(--abm-btn-bd);
}
.abm-logout:hover { background: var(--abm-btn-hv); }
.abm-agent {
  color: var(--abm-item-fg); text-decoration: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; font: 600 13px arial;
}
.abm-agent:hover { background: var(--abm-btn-bg); color: var(--abm-hover-fg); }

/* ---- shell ---- */
.abm-shell { display: flex; align-items: flex-start; }
.abm-side {
  position: sticky; top: 46px; flex: 0 0 240px; width: 240px;
  height: calc(100vh - 46px); overflow-y: auto;
  background: var(--abm-side-bg); border-right: 1px solid var(--abm-side-bd);
  display: flex; flex-direction: column; font-family: arial, sans-serif;
}
body.abm-collapsed .abm-side { display: none; }

.abm-side-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px; background: var(--abm-head-bg); border-bottom: 1px solid var(--abm-side-bd);
}
.abm-side-title { flex: 1; font: 700 11px arial; letter-spacing: .08em; text-transform: uppercase; color: var(--abm-title); }
.abm-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--abm-btn-fg); background: var(--abm-btn-bg); border: 1px solid var(--abm-btn-bd); border-radius: 5px;
}
.abm-collapse:hover { background: var(--abm-btn-hv); }

.abm-filter { position: sticky; top: 38px; z-index: 2; padding: 9px 10px; background: var(--abm-side-bg); border-bottom: 1px solid var(--abm-side-bd); }
.abm-filter input {
  width: 100%; padding: 7px 28px 7px 10px; font: 13px arial; color: var(--abm-input-fg);
  background: var(--abm-input-bg); border: 1px solid var(--abm-input-bd); border-radius: 6px;
}
.abm-filter input:focus { outline: none; border-color: var(--abm-accent); }
.abm-filter input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.abm-filter-clear {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center;
  font: 18px/18px arial; color: var(--abm-title); cursor: pointer;
  background: none; border: 0; border-radius: 4px;
}
.abm-filter-clear:hover { color: var(--abm-input-fg); }
.abm-filter-clear[hidden] { display: none; }
.abm-nav { padding: 5px 0 28px; }
.abm-nores { display: none; padding: 12px; color: var(--abm-nores); font: 13px arial; }

.abm-direct {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; color: var(--abm-grp-fg); text-decoration: none; font: 600 13.5px arial;
}
.abm-direct:hover { background: var(--abm-hover-bg); color: var(--abm-hover-fg); }
.abm-direct.active { background: var(--abm-active-bg); color: var(--abm-active-fg); box-shadow: inset 3px 0 0 var(--abm-accent); }

.abm-grp-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--abm-grp-fg); font: 600 13.5px arial;
}
.abm-grp-btn:hover, .abm-grp.open > .abm-grp-btn { background: var(--abm-hover-bg); color: var(--abm-hover-fg); }
.abm-ico { width: 17px; text-align: center; color: var(--abm-ico); font-size: 13px; }
.abm-grp-label { flex: 1; }
.abm-caret { color: var(--abm-caret); font-size: 11px; transition: transform .15s; }
.abm-grp.open > .abm-grp-btn .abm-caret { transform: rotate(90deg); }

.abm-sub { display: none; padding: 2px 0 7px; }
.abm-grp.open > .abm-sub { display: block; }
.abm-subhead { padding: 8px 12px 3px 16px; font: 700 10px arial; letter-spacing: .06em; text-transform: uppercase; color: var(--abm-subhead); }
.abm-item {
  display: block; padding: 6px 12px 6px 38px; color: var(--abm-item-fg);
  text-decoration: none; font: 13px arial; border-left: 2px solid transparent;
}
.abm-item:hover { background: var(--abm-hover-bg); color: var(--abm-hover-fg); }
.abm-item.active { background: var(--abm-active-bg); color: var(--abm-active-fg); font-weight: 700; border-left-color: var(--abm-accent); }

/* reopen tab (collapsed, desktop) */
.abm-reopen {
  display: none; position: fixed; left: 0; top: 46px; z-index: 39;
  width: 22px; height: 46px; cursor: pointer; line-height: 1; font-size: 14px;
  color: var(--abm-reopen-fg); background: var(--abm-reopen-bg);
  border: 1px solid var(--abm-side-bd); border-left: 0; border-radius: 0 6px 6px 0;
}
.abm-reopen:hover { background: var(--abm-btn-hv); }
body.abm-collapsed .abm-reopen { display: inline-flex; align-items: center; justify-content: center; }

/* ---- main (content area stays neutral/light to match page content) ---- */
.abm-main { flex: 1; min-width: 0; padding: 0 0 40px; }
.abm-pagehead { padding: 12px 22px; border-bottom: 1px solid #dfe4ea; background: #fbfcfd; margin-bottom: 16px; }
.abm-pagehead h1 { margin: 0; font: 700 19px arial; color: #13235f; }
.abm-body { padding: 0 22px; }

.abm-scrim { display: none; position: fixed; inset: 0; top: 46px; background: rgba(0,0,0,.4); z-index: 25; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  /* let the brand truncate instead of pushing the top-bar links off screen */
  .abm-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .abm-agent { padding: 6px 6px; }
  .abm-toggle { display: inline-flex; }
  .abm-collapse { display: none; }
  .abm-reopen { display: none !important; }
  .abm-side {
    position: fixed; top: 46px; left: 0; height: calc(100vh - 46px);
    transform: translateX(-100%); transition: transform .25s; z-index: 30; box-shadow: 4px 0 20px rgba(0,0,0,.28);
  }
  body.abm-nav-open .abm-side { transform: none; }
  body.abm-collapsed .abm-side { display: flex; }
  body.abm-nav-open .abm-scrim { display: block; }
  .abm-pagehead { padding: 11px 16px; }
  .abm-body { padding: 0 16px; }
}