/* ========================
   base.css
   Core styling, global variables, general layout
   ======================== */
@font-face {
  font-family: 'Funnel Sans';
  src: url('../fonts/Funnel_Sans/FunnelSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Funnel Sans';
  src: url('../fonts/Funnel_Sans/FunnelSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/Hanken_Grotesk/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Root variables */
:root {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px; /* enough for icons */
  --navbar-height: 64px;
  --datalift-primarypairing-primary-colour: #030d37;
  --datalift-primarypairing-secondary-colour: #b5c0f7;
  --datalift-primarypairing-tertiary-colour: #f0f246;
  --datalift-grey-colour: #b9bbc6;
  --datalift-grey-secondary-colour: #7c8196;
  --datalift-background: #f2f3f5;
  --datalift-white-colour: #fff;
  --background-image: url("../images/Horizontal Background grey.png");
}

/* Body and layout */
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 400; /* Regular */
  font-style: normal; /* default */
  margin: 0;
  padding-top: var(--navbar-height); /* leave space for fixed top navbar */
  background: var(--datalift-background);
  background-image: var(--background-image);
  background-repeat: no-repeat;
  background-size: cover;

  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-weight: 600;   /* SemiBold */
  font-style: normal; /* Regular (non-italic) */
}

.navbar.bg-dark {
  background-color: var(--datalift-primarypairing-primary-colour) !important;
}

.profile-icon {
  color: var(--datalift-white-colour);
}

/* Main content */
.content {
  min-height: calc(100vh - var(--navbar-height));
  padding: 1.5rem;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed ~ .content {
  margin-left: var(--sidebar-collapsed-width);
}

@media (min-width: 992px) {
  .content {
    margin-left: var(--sidebar-width);
  }
}

/* Typography and general links */
a {
  text-decoration: none;
  color: inherit;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
  padding: 0 2px;
}

pre {
  white-space: pre-wrap;   /* wrap long lines */
  word-wrap: break-word;
  text-align: left;
}

/* Buttons */
.btn.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--datalift-primarypairing-primary-colour);
    --bs-btn-border-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--datalift-primarypairing-secondary-colour);
    --bs-btn-hover-border-color: var(--datalift-primarypairing-secondary-colour);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--datalift-primarypairing-primary-colour);
    --bs-btn-active-border-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--datalift-grey-colour);
    --bs-btn-disabled-border-color: var(--datalift-grey-colour);
}

.btn.btn-outline-primary {
    --bs-btn-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-border-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-hover-color: var(--datalift-grey-secondary-colour);
    --bs-btn-hover-bg: var(--datalift-primarypairing-primary-colour);
    --bs-btn-hover-border-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--datalift-primarypairing-primary-colour);
    --bs-btn-active-border-color: var(--datalift-primarypairing-primary-colour);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--datalift-grey-colour);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--datalift-grey-colour);
    --bs-gradient: none;
}

/* Check boxes */
.form-check-input:checked {
    background-color: var(--datalift-primarypairing-primary-colour);
    border-color: var(--datalift-primarypairing-primary-colour);
}

/* Wizzards */
.nav-link {
  color: var(--datalift-primarypairing-primary-colour) !important;
}

/* Borders */
.border-nt-primary {
  border-color: var(--datalift-primarypairing-primary-colour);
}

.text-nt-primary {
  color: var(--datalift-primarypairing-primary-colour);
}

/* cards */
.board-card-muted {
  opacity: 0.55;
  transition: opacity .15s ease;
}

.board-card-muted .card-header {
  cursor: pointer;
}

.board-card-muted:hover {
  opacity: 0.8;
}

.card-header {
  background-color: var(--datalift-primarypairing-secondary-colour) !important;
}

.card-head-light {
    background-color: var(--datalift-background) !important;
}

/* Process flow svgs */
.flow-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;        /* allow scroll if too many steps */
}

.flow-svg {
  display: block;
  width: 100%;             /* fit available width */
  height: auto;            /* preserve aspect ratio */
  min-height: 90px;        /* matches your SVG height */
}


/* Ingest Board */
.ingest-card {
  position: relative;
}


/* container pinned bottom-right */
.ingest-card .card-corner-icons {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 6px;              /* spacing between icons */
  align-items: center;
}

/* individual icon bubble */
.ingest-card .card-corner-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
}

.ingest-board-legend {
  opacity: 0.85;
}

.ingest-board-legend .legend-icon {
  width: 16px;
  height: 16px;
  font-size: 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  color: #fff;
}

.ingest-board-legend:hover {
  opacity: 1;
}

.bg-datalift {
    background-color: var(--datalift-primarypairing-primary-colour) !important;
}