/* ============================================================
   Octane Brand Override — Black & White
   Overrides all IBM Design System color classes.
   Inject this AFTER all other stylesheets.
   ============================================================ */

/* ── Primary brand (blue → black) ── */
.bg-ibm-blue,
.bg-ibm-blue-60  { background-color: #000000 !important; }
.bg-ibm-blue-10  { background-color: #f4f4f4 !important; }
.bg-ibm-blue-20  { background-color: #e8e8e8 !important; }
.text-ibm-blue,
.text-ibm-blue-60 { color: #000000 !important; }
.hover\:bg-ibm-blue-70:hover { background-color: #1a1a1a !important; }
.hover\:text-ibm-blue:hover,
.hover\:text-ibm-blue-60:hover { color: #000000 !important; }

/* ── Magenta (P2P category) → Black ── */
.bg-ibm-magenta-60  { background-color: #000000 !important; }
.bg-ibm-magenta-10  { background-color: #f4f4f4 !important; }
.text-ibm-magenta-60 { color: #000000 !important; }
.hover\:bg-ibm-magenta-20:hover { background-color: #e8e8e8 !important; }

/* ── Yellow (FP&A category) → Light gray ── */
.bg-ibm-yellow-10  { background-color: #f8f8f8 !important; }
.bg-ibm-yellow-20  { background-color: #efefef !important; }
.bg-ibm-yellow-30  { background-color: #e0e0e0 !important; }
.text-ibm-yellow-30 { color: #3d3d3d !important; }
.hover\:bg-ibm-yellow-20:hover { background-color: #efefef !important; }

/* ── Teal (O2C category) → Light gray ── */
.bg-ibm-teal-10  { background-color: #f4f4f4 !important; }
.bg-ibm-teal-60  { background-color: #1a1a1a !important; }
.text-ibm-teal-60 { color: #1a1a1a !important; }
.hover\:bg-ibm-teal-20:hover { background-color: #e8e8e8 !important; }

/* ── Orange (R2R/cross-cut) → Light gray ── */
.bg-ibm-orange-10  { background-color: #f8f8f8 !important; }
.bg-ibm-orange-60  { background-color: #1a1a1a !important; }
.text-ibm-orange-60 { color: #1a1a1a !important; }
.hover\:bg-ibm-orange-20:hover { background-color: #efefef !important; }

/* ── Purple → Gray ── */
.bg-ibm-purple-10  { background-color: #f4f4f4 !important; }
.bg-ibm-purple-60  { background-color: #1a1a1a !important; }
.text-ibm-purple,
.text-ibm-purple-60 { color: #1a1a1a !important; }
.border-ibm-purple-50 { border-color: #8d8d8d !important; }
.hover\:bg-ibm-purple-20:hover { background-color: #e8e8e8 !important; }

/* ── Red → Dark gray (keeps error semantics without color) ── */
.bg-ibm-red-10  { background-color: #fafafa !important; }
.bg-ibm-red-60  { background-color: #1a1a1a !important; }
.text-ibm-red-60 { color: #1a1a1a !important; }
.hover\:bg-ibm-red-20:hover { background-color: #e8e8e8 !important; }

/* ── Green (positive metrics) → Dark gray ── */
.bg-ibm-green-10  { background-color: #f0f0f0 !important; }
.bg-ibm-green-60  { background-color: #1a1a1a !important; }
.text-ibm-green,
.text-ibm-green-60 { color: #1a1a1a !important; }
.hover\:bg-ibm-green-20:hover { background-color: #e8e8e8 !important; }

/* ── Cyan → Black ── */
.text-ibm-cyan-60 { color: #000000 !important; }

/* ── Grays — keep existing IBM grays (they're already neutral) ── */

/* ── Borders ── */
.border-ibm-gray-30 { border-color: #c6c6c6 !important; }

/* ── Cross-document view transitions (seamless page-to-page animation) ── */
@view-transition {
  navigation: auto;
}

/* ── Push body below the fixed nav bar ──
   The slide CSS sets body/html to height:auto + overflow:hidden.
   We override to 100vh so flex centering uses the full viewport,
   then padding-top carves out the nav bar space from the top.
   box-sizing: border-box ensures padding is included in the 100vh. */
html {
  height: 100vh !important;
  overflow: hidden !important;
}
body {
  height: 100vh !important;
  padding-top: 62px !important;
  box-sizing: border-box !important;
}

/* ── Octane fixed top nav bar ── */
#octane-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: #000000;
  display: flex;
  align-items: center;
  padding: 0 44px;
  z-index: 9999;
  box-sizing: border-box;
}

#octane-nav img {
  height: 34px;
  width: auto;
  display: block;
}