:root {
  --bov-navy-950:#06101f;
  --bov-navy-900:#0b1a33;
  --bov-navy-800:#12264d;
  --bov-blue:#2457a7;
  --bov-blue-light:#eaf1ff;
  --bov-gold:#c7a34b;
  --bov-bg:#f3f6fa;
  --bov-card:#ffffff;
  --bov-text:#111827;
  --bov-muted:#64748b;
  --bov-border:#dbe3ee;
}

html,
body {
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bov-bg);
  color:var(--bov-text);
}

/* HEADER */

#bov-shell-header {
  display:block;
  width:100%;
  position:relative;
  z-index:10000;
}

.bov-shell-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  padding:0 28px;
  box-sizing:border-box;

  background:
    linear-gradient(
      105deg,
      var(--bov-navy-950),
      var(--bov-navy-800)
    );

  border-bottom:3px solid var(--bov-gold);

  box-shadow:
    0 3px 14px rgba(0,0,0,.20);
}

.bov-shell-identity {
  display:flex;
  align-items:center;
  gap:15px;
}

.bov-shell-logo {
  display:block;
  max-height:46px;
  max-width:180px;
  width:auto;
}

.bov-shell-brand-name {
  color:#ffffff;
  font-size:21px;
  font-weight:700;
  letter-spacing:.025em;
}

.bov-shell-brand-subtitle {
  margin-top:4px;
  color:#cbd5e1;
  font-size:12px;
  letter-spacing:.04em;
}

.bov-shell-context {
  text-align:right;
}

.bov-shell-context-title {
  color:#ffffff;
  font-size:14px;
  font-weight:700;
}

.bov-shell-context-sub {
  margin-top:4px;
  color:#94a3b8;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}

/* NAVIGATION */

.bov-shell-nav {
  display:flex;
  align-items:center;
  gap:2px;

  min-height:49px;
  padding:0 22px;

  background:#ffffff;

  border-bottom:
    1px solid var(--bov-border);

  box-shadow:
    0 2px 8px rgba(15,23,42,.06);

  overflow-x:auto;
  box-sizing:border-box;
}

.bov-nav-item {
  position:relative;
  flex:0 0 auto;
}

.bov-nav-link,
.bov-nav-button {
  display:flex;
  align-items:center;
  gap:6px;

  min-height:48px;

  padding:
    0 14px;

  border:0;
  border-bottom:
    3px solid transparent;

  border-radius:0;

  background:transparent;

  color:#334155;

  font-family:inherit;
  font-size:13px;
  font-weight:700;

  text-decoration:none;
  white-space:nowrap;

  cursor:pointer;
}

.bov-nav-link:hover,
.bov-nav-button:hover,
.bov-nav-item:hover > .bov-nav-button {
  background:#f8fafc;
  color:var(--bov-blue);
  text-decoration:none;
}

.bov-nav-link.bov-active,
.bov-nav-button.bov-active {
  color:var(--bov-blue);
  background:#f8fafc;
  border-bottom-color:var(--bov-gold);
}

.bov-nav-caret {
  font-size:9px;
  opacity:.65;
}

/* DROPDOWNS */

.bov-nav-menu {
  display:none;

  position:absolute;
  top:47px;
  left:0;

  min-width:245px;

  padding:7px;

  background:#ffffff;

  border:
    1px solid var(--bov-border);

  border-radius:10px;

  box-shadow:
    0 16px 38px rgba(15,23,42,.20);

  z-index:20000;
}

.bov-nav-item:hover .bov-nav-menu,
.bov-nav-item:focus-within .bov-nav-menu {
  display:block;
}

.bov-nav-menu a,
.bov-nav-menu button {
  display:block;

  width:100%;

  box-sizing:border-box;

  padding:
    10px 11px;

  border:0;
  border-radius:7px;

  background:#ffffff;

  color:#334155;

  text-decoration:none;

  text-align:left;

  font-family:inherit;
  font-size:13px;
  font-weight:600;

  cursor:pointer;
}

.bov-nav-menu a:hover,
.bov-nav-menu button:hover {
  background:var(--bov-blue-light);
  color:#1e3a8a;
  text-decoration:none;
}

.bov-nav-divider {
  height:1px;
  margin:5px 4px;
  background:#e5e7eb;
}

/* PAGE BAR */

.bov-shell-pagebar {
  padding:
    11px 28px;

  background:#f8fafc;

  border-bottom:
    1px solid #e2e8f0;

  color:#64748b;

  font-size:11px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.07em;
}

/* INDEX COMPATIBILITY */

body.bov-shell-enabled {
  margin:0 !important;
}

body.bov-shell-enabled > h1,
body.bov-shell-enabled > .muted {
  display:none !important;
}

body.bov-shell-enabled #loginCard,
body.bov-shell-enabled #verifyCard,
body.bov-shell-enabled #app {
  margin-left:22px;
  margin-right:22px;
}

body.bov-shell-enabled #loginCard,
body.bov-shell-enabled #verifyCard {
  margin-top:24px;
}

body.bov-shell-enabled #app {
  margin-top:20px;
}

/* Existing functional tab strip remains available */

body.bov-shell-enabled #app > .tabs {
  display:flex;

  gap:7px;
  flex-wrap:wrap;

  padding:10px;

  margin:
    0 0 16px 0;

  background:#ffffff;

  border:
    1px solid var(--bov-border);

  border-radius:10px;

  box-shadow:
    0 2px 8px rgba(15,23,42,.04);
}

body.bov-shell-enabled #app > .tabs button {
  padding:
    8px 11px;

  background:#edf3fb;

  color:#27436f;

  border:
    1px solid #d9e3f2;

  border-radius:7px;

  font-size:12px;
  font-weight:700;
}

body.bov-shell-enabled #app > .tabs button:hover {
  background:#dfe9f8;
}

/* Existing cards */

body.bov-shell-enabled .card {
  border:
    1px solid #e2e8f0;

  border-radius:12px;

  box-shadow:
    0 4px 16px rgba(15,23,42,.06);
}

/* RESPONSIVE */

@media(max-width:900px) {

  .bov-shell-top {
    padding:
      12px 18px;
  }

  .bov-shell-context {
    display:none;
  }

  .bov-shell-nav {
    padding:
      0 10px;
  }

  .bov-nav-link,
  .bov-nav-button {
    padding:
      0 10px;
  }

}

@media(max-width:600px) {

  .bov-shell-brand-subtitle {
    display:none;
  }

  .bov-shell-logo {
    max-width:120px;
  }

  body.bov-shell-enabled #loginCard,
  body.bov-shell-enabled #verifyCard,
  body.bov-shell-enabled #app {
    margin-left:10px;
    margin-right:10px;
  }

}

/* ==========================================================
   PHASE 1B — CANONICAL NAV FIX
   ========================================================== */

/*
  Dropdown menus must be allowed outside the navigation bar.
  overflow-x:auto was clipping them.
*/
.bov-shell-nav {
  overflow: visible !important;
}

/*
  Keep dropdown above all page content.
*/
.bov-nav-item {
  z-index: 20010;
}

.bov-nav-menu {
  z-index: 30000 !important;
}

/*
  Support explicit click-open state as well as hover.
*/
.bov-nav-item.bov-menu-open > .bov-nav-menu {
  display: block !important;
}

.bov-nav-item.bov-menu-open > .bov-nav-button {
  background: #f8fafc;
  color: var(--bov-blue);
}

/*
  Canonical shell now replaces the old blue tab strip.
  IMPORTANT: only the visible buttons are hidden.
  The existing sections, IDs, showTab(), loaders and business
  logic remain completely intact.
*/
body.bov-shell-enabled #app > .tabs {
  display: none !important;
}

/*
  Make the main content feel like one application rather
  than the old Control Panel nested inside the new shell.
*/
body.bov-shell-enabled #app {
  margin-top: 18px;
}

body.bov-shell-enabled #app > .card:first-child {
  margin-bottom: 18px;
}

/*
  Cleaner authenticated session panel.
*/
body.bov-shell-enabled #app > .card:first-child {
  padding: 12px 18px;
}

body.bov-shell-enabled #app > .card:first-child h2 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

/*
  Keep dropdowns usable on narrower screens.
*/
@media(max-width:900px) {
  .bov-shell-nav {
    flex-wrap: wrap;
    overflow: visible !important;
  }

  .bov-nav-menu {
    top: 44px;
  }
}

/* ==========================================================
   CONTROL COMPONENT STYLES
   Required by transfers / audit / AML / detail pages
   ========================================================== */

.bov-shell-container {
  padding:24px;
  background:#f5f7fb;
}

.bov-card {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 4px 20px rgba(15,23,42,.07);
  padding:24px;
  margin-bottom:24px;
}

.bov-page-title {
  margin-top:0;
  margin-bottom:16px;
  font-size:30px;
  color:#111827;
}

.bov-filters {
  display:grid;
  grid-template-columns:repeat(7,minmax(130px,1fr));
  gap:12px;
  align-items:end;
}

.bov-field label {
  display:block;
  margin-bottom:6px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.bov-field input,
.bov-field select,
.bov-input,
.bov-select {
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#111827;
  font-size:14px;
}

.bov-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.bov-button {
  padding:10px 15px;
  border:0;
  border-radius:9px;
  background:#2f4a92;
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
}

.bov-button:hover {
  background:#243c7c;
}

.bov-note {
  margin-top:8px;
  color:#64748b;
  font-size:13px;
}

.bov-msg {
  min-height:20px;
  margin-top:10px;
  color:#b91c1c;
  font-weight:700;
}

.bov-table-wrap {
  width:100%;
  overflow-x:auto;
  border:1px solid #e2e8f0;
  border-radius:10px;
}

.bov-table {
  width:100%;
  min-width:1350px;
  border-collapse:collapse;
  background:#fff;
}

.bov-table th,
.bov-table td {
  padding:12px 10px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:top;
  font-size:14px;
}

.bov-table th {
  background:#f8fafc;
  color:#475569;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.bov-table tbody tr:hover {
  background:#f8fbff;
}

.bov-mono {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.bov-linkbtn {
  display:inline-block;
  padding:6px 10px;
  margin:2px 4px 2px 0;
  border:0;
  border-radius:8px;
  background:#e8eefc;
  color:#1e3a8a;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.bov-details {
  display:none;
  margin-top:8px;
  padding:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:10px;
}

.bov-audit-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.bov-summary-box {
  padding:12px;
  background:#fff;
  border:1px solid #dbe4ee;
  border-radius:10px;
}

.bov-summary-label {
  margin-bottom:6px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.bov-summary-value {
  color:#111827;
  font-size:14px;
  word-break:break-word;
}

.bov-pre,
.bov-appendix pre {
  max-height:360px;
  overflow:auto;
  margin:0;
  padding:16px;
  border-radius:10px;
  background:#0b1227;
  color:#fff;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
}

.bov-grid-2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.bov-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bov-item {
  padding:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
}

.bov-item-label {
  margin-bottom:6px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}

.bov-item-value {
  color:#111827;
  font-size:17px;
  word-break:break-word;
}

/* Generic old pages gain sensible spacing under canonical shell */
body.bov-shell-enabled > main,
body.bov-shell-enabled > .container,
body.bov-shell-enabled > .bov-shell-container {
  margin-top:0;
}

/* AML direct lookup */
.bov-aml-lookup {
  max-width:850px;
  margin:22px auto 0 auto;
  padding:20px 24px;
  background:#ffffff;
  border:1px solid #dbe3ee;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(15,23,42,.06);
}

.bov-aml-lookup h3 {
  margin:0 0 6px 0;
  font-size:18px;
}

.bov-aml-lookup p {
  margin:0 0 12px 0;
  color:#64748b;
  font-size:13px;
}

.bov-aml-lookup-row {
  display:flex;
  gap:8px;
}

.bov-aml-lookup input {
  flex:1;
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:14px;
}

.bov-aml-lookup button {
  padding:10px 16px;
  border:0;
  border-radius:8px;
  background:#2f4a92;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:1600px) {
  .bov-filters {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:1000px) {
  .bov-filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bov-grid-2,
  .bov-grid-3 {
    grid-template-columns:1fr;
  }

  .bov-audit-summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  .bov-filters,
  .bov-audit-summary {
    grid-template-columns:1fr;
  }

  .bov-aml-lookup-row {
    flex-direction:column;
  }
}