/* ========================================================================
   BULLDATA OVERRIDES — maps Bootstrap classes to BullData design tokens
   Loaded after theme.min.css and bd-system.css to take precedence.
   ======================================================================== */

/* Global body reset */
body.bd {
  background: var(--bd-cream) !important;
  color: var(--bd-ink) !important;
  font-family: var(--font-body) !important;
}

/* ========================================================================
   FORM CONTROLS → bd-input style
   ======================================================================== */
.bd .form-control,
.bd .form-select,
.bd select.form-select,
.bd input.form-control {
  padding: 14px 18px !important;
  border-radius: var(--bd-r-sm) !important;
  border: 1px solid var(--bd-line) !important;
  background: var(--bd-paper) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--bd-ink) !important;
  transition: border-color .15s var(--bd-ease), box-shadow .15s var(--bd-ease) !important;
  box-shadow: none !important;
}
.bd .form-control:focus,
.bd .form-select:focus {
  border-color: var(--bd-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--bd-blue) 12%, transparent) !important;
  background: var(--bd-paper) !important;
}
.bd .form-label,
.bd label.form-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--bd-ink-2) !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}
.bd .form-text,
.bd .form-check-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--bd-ink-2);
}
.bd .invalid-feedback {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bd-red);
}
.bd .form-control.is-invalid,
.bd .form-select.is-invalid {
  border-color: var(--bd-red) !important;
}
.bd input[type="checkbox"] {
  accent-color: var(--bd-blue);
  width: 16px;
  height: 16px;
}

/* ========================================================================
   BUTTONS → bd-btn style
   ======================================================================== */
.bd .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: var(--bd-r-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: transform .15s var(--bd-ease), box-shadow .2s var(--bd-ease) !important;
  border: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.bd .btn:hover { transform: translateY(-1px) !important; }

.bd .btn-primary,
.bd .btn.btn-primary {
  background: var(--bd-blue) !important;
  color: white !important;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--bd-blue) 30%, transparent) !important;
}
.bd .btn-primary:hover {
  box-shadow: var(--bd-shadow-glow-blue) !important;
  color: white !important;
}

.bd .btn-success,
.bd .btn.btn-success {
  background: var(--bd-green) !important;
  color: white !important;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--bd-green) 30%, transparent) !important;
}
.bd .btn-success:hover { color: white !important; }

.bd .btn-danger,
.bd .btn.btn-danger {
  background: var(--bd-red) !important;
  color: white !important;
}
.bd .btn-danger:hover { color: white !important; }

.bd .btn-secondary,
.bd .btn.btn-secondary,
.bd .btn-outline-secondary,
.bd .btn.btn-outline-secondary {
  background: transparent !important;
  color: var(--bd-ink) !important;
  border: 1px solid var(--bd-line) !important;
  box-shadow: none !important;
}
.bd .btn-outline-secondary:hover,
.bd .btn-secondary:hover {
  background: var(--bd-mist) !important;
  color: var(--bd-ink) !important;
}

.bd .btn-info,
.bd .btn.btn-info,
.bd .btn-outline-primary,
.bd .btn.btn-outline-primary {
  background: transparent !important;
  color: var(--bd-blue) !important;
  border: 1px solid color-mix(in oklab, var(--bd-blue) 40%, var(--bd-line)) !important;
}
.bd .btn-info:hover { background: var(--bd-blue-tint) !important; }

.bd .btn-sm {
  padding: 9px 14px !important;
  font-size: 11px !important;
}
.bd .btn-lg {
  padding: 18px 28px !important;
  font-size: 13px !important;
}
.bd .btn-phoenix-primary,
.bd .btn-phoenix-secondary {
  background: transparent !important;
  color: var(--bd-ink) !important;
  border: 1px solid var(--bd-line) !important;
}
.bd .w-100 { width: 100% !important; }

/* ========================================================================
   CARDS → bd-card style
   ======================================================================== */
.bd .card {
  background: var(--bd-paper) !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-r-lg) !important;
  box-shadow: var(--bd-shadow-1) !important;
}
.bd .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--bd-line) !important;
  padding: 20px 24px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
.bd .card-body {
  padding: 24px !important;
}
.bd .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--bd-line) !important;
  padding: 16px 24px !important;
}
.bd .card-title,
.bd .card-header h5,
.bd .card-header h6 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
  color: var(--bd-ink) !important;
}
.bd small.text-muted,
.bd .card-header small {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--bd-ink-3) !important;
}

/* ========================================================================
   BADGES / PILLS
   ======================================================================== */
.bd .badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: var(--bd-r-pill) !important;
  font-weight: 500 !important;
}
.bd .badge.bg-success,
.bd .badge.text-bg-success { background: color-mix(in oklab, var(--bd-green) 18%, var(--bd-paper)) !important; color: var(--bd-green) !important; border: 1px solid color-mix(in oklab, var(--bd-green) 35%, var(--bd-line)) !important; }
.bd .badge.bg-warning,
.bd .badge.text-bg-warning { background: color-mix(in oklab, var(--bd-amber) 18%, var(--bd-paper)) !important; color: var(--bd-amber-deep) !important; border: 1px solid color-mix(in oklab, var(--bd-amber) 50%, var(--bd-line)) !important; }
.bd .badge.bg-danger { background: color-mix(in oklab, var(--bd-red) 18%, var(--bd-paper)) !important; color: var(--bd-red) !important; border: 1px solid color-mix(in oklab, var(--bd-red) 35%, var(--bd-line)) !important; }
.bd .badge.bg-info { background: color-mix(in oklab, var(--bd-blue) 12%, var(--bd-paper)) !important; color: var(--bd-blue) !important; border: 1px solid color-mix(in oklab, var(--bd-blue) 35%, var(--bd-line)) !important; }

/* ========================================================================
   TABLES → clean BD style
   ======================================================================== */
.bd .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  color: var(--bd-ink) !important;
}
.bd .table thead th {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--bd-ink-3) !important;
  border-bottom: 1px solid var(--bd-line) !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.bd .table tbody td {
  font-size: 14px !important;
  color: var(--bd-ink) !important;
  border-bottom: 1px solid var(--bd-line-soft) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}
.bd .table-hover tbody tr:hover td {
  background: color-mix(in oklab, var(--bd-blue) 4%, var(--bd-cream)) !important;
}

/* ========================================================================
   ALERTS
   ======================================================================== */
.bd .alert {
  border-radius: var(--bd-r-md) !important;
  border: 1px solid var(--bd-line) !important;
  font-size: 14px !important;
}
.bd .alert-light,
.bd .alert-info { background: var(--bd-blue-tint) !important; border-color: color-mix(in oklab, var(--bd-blue) 20%, var(--bd-line)) !important; color: var(--bd-ink) !important; }
.bd .alert-warning { background: var(--bd-amber-tint) !important; border-color: color-mix(in oklab, var(--bd-amber) 30%, var(--bd-line)) !important; color: var(--bd-ink) !important; }
.bd .alert-danger { background: color-mix(in oklab, var(--bd-red) 8%, var(--bd-cream)) !important; border-color: color-mix(in oklab, var(--bd-red) 25%, var(--bd-line)) !important; color: var(--bd-ink) !important; }
.bd .alert-success { background: color-mix(in oklab, var(--bd-green) 8%, var(--bd-cream)) !important; border-color: color-mix(in oklab, var(--bd-green) 25%, var(--bd-line)) !important; color: var(--bd-ink) !important; }
.bd .alert-heading { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }

/* ========================================================================
   MODALS → bd-card style
   ======================================================================== */
.bd .modal-content {
  border-radius: var(--bd-r-lg) !important;
  border: 1px solid var(--bd-line) !important;
  background: var(--bd-paper) !important;
  box-shadow: var(--bd-shadow-2) !important;
}
.bd .modal-header {
  border-bottom: 1px solid var(--bd-line) !important;
  padding: 20px 24px !important;
}
.bd .modal-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.bd .modal-body { padding: 24px !important; }
.bd .modal-footer { border-top: 1px solid var(--bd-line) !important; padding: 16px 24px !important; }
.bd .btn-close { opacity: 0.4 !important; }

/* ========================================================================
   TYPOGRAPHY overrides
   ======================================================================== */
.bd h1, .bd h2, .bd h3, .bd h4, .bd h5, .bd h6 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.025em !important;
  color: inherit !important;
  /* inherit !important: hereda del contenedor padre Y gana al Bootstrap/Phoenix theme.
     Cream bg → heredan --bd-ink del body.bd ✓
     Panel oscuro (login, sidebar, CTA) → heredan cream/white del wrapper ✓ */
}
.bd p { color: var(--bd-ink-2); line-height: 1.55; }
.bd a { color: var(--bd-blue); }
.bd a:hover { color: var(--bd-blue-deep); }
.bd .text-success { color: var(--bd-green) !important; }
.bd .text-warning { color: var(--bd-amber-deep) !important; }
.bd .text-danger { color: var(--bd-red) !important; }
.bd .text-muted,
.bd .text-body-secondary,
.bd .text-body-tertiary { color: var(--bd-ink-3) !important; }
.bd .fw-bold { font-weight: 700 !important; }
.bd .lead { font-size: 18px; line-height: 1.5; color: var(--bd-ink-2); }

/* ========================================================================
   DIVIDER
   ======================================================================== */
.bd hr,
.bd .hair {
  border: 0 !important;
  border-top: 1px solid var(--bd-line) !important;
  opacity: 1 !important;
}

/* ========================================================================
   INPUT GROUP
   ======================================================================== */
.bd .input-group-text {
  border-radius: var(--bd-r-sm) !important;
  border: 1px solid var(--bd-line) !important;
  background: var(--bd-mist) !important;
  color: var(--bd-ink-3) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* ========================================================================
   DROPDOWN
   ======================================================================== */
.bd .dropdown-menu {
  border-radius: var(--bd-r-md) !important;
  border: 1px solid var(--bd-line) !important;
  background: var(--bd-paper) !important;
  box-shadow: var(--bd-shadow-2) !important;
  padding: 8px !important;
}
.bd .dropdown-item {
  border-radius: var(--bd-r-sm) !important;
  font-size: 14px !important;
  color: var(--bd-ink) !important;
  padding: 8px 12px !important;
}
.bd .dropdown-item:hover,
.bd .dropdown-item:focus { background: var(--bd-mist) !important; color: var(--bd-ink) !important; }
.bd .dropdown-item.active { background: var(--bd-blue) !important; color: white !important; }

/* ========================================================================
   NAV (Bootstrap nav tabs etc.)
   ======================================================================== */
.bd .nav-link { color: var(--bd-ink-2); }
.bd .nav-link.active,
.bd .nav-link:hover { color: var(--bd-blue); }

/* ========================================================================
   LAYOUT HELPERS
   ======================================================================== */
.bd-app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bd-cream);
}
.bd-sidebar {
  background: var(--bd-ink);
  color: var(--bd-cream);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.bd-main-area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bd-cream);
  overflow-x: hidden;
}
.bd-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  background: var(--bd-paper);
  border-bottom: 1px solid var(--bd-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.bd-content-area {
  padding: 32px 40px 48px;
  flex: 1;
}

/* bd-sidebar nav items */
.bd-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--bd-r-sm);
  color: color-mix(in oklab, white 75%, transparent);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s var(--bd-ease), color .15s var(--bd-ease);
}
.bd-nav-item:hover {
  background: color-mix(in oklab, white 6%, transparent);
  color: white;
}
.bd-nav-item.active {
  background: color-mix(in oklab, var(--bd-blue) 28%, transparent);
  border-color: color-mix(in oklab, var(--bd-blue) 60%, transparent);
  color: white;
  font-weight: 500;
}
.bd-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in oklab, white 30%, transparent);
}
.bd-nav-item.active .bd-nav-dot {
  background: var(--bd-amber);
}

/* page section utility */
.bd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bd-page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--bd-ink);
  margin: 0;
}
.bd-page-sub {
  font-size: 15px;
  color: var(--bd-ink-3);
  margin-top: 4px;
}

/* ========================================================================
   RESPONSIVE — mobile-first adaptations (≤768px)
   ======================================================================== */
@media (max-width: 768px) {

  /* Dashboard layout: stack sidebar on top */
  .bd-app-layout {
    grid-template-columns: 1fr !important;
  }
  .bd-sidebar {
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  .bd-sidebar nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .bd-top-bar {
    padding: 12px 16px !important;
    position: relative !important;
  }
  .bd-content-area {
    padding: 20px 16px 32px !important;
  }

  /* CMS homepage sections */

  /* Navbar */
  .bd-cms-nav-links { display: none !important; }

  /* Hero: single column */
  .bd-hero-grid {
    grid-template-columns: 1fr !important;
  }

  /* Service cards: stack */
  .bd-services-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cases: all single column */
  .bd-case-article {
    grid-template-columns: 1fr !important;
  }
  .bd-case-article .bd-case-image {
    min-height: 240px !important;
  }

  /* Team: stack CEO + grid */
  .bd-team-grid {
    grid-template-columns: 1fr !important;
  }
  .bd-industry-grid {
    grid-template-columns: 1fr !important;
  }

  /* Numbers: 2 columns on mobile */
  .bd-numbers-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .bd-numbers-grid > div {
    border-right: 1px solid var(--bd-ink) !important;
  }
  .bd-numbers-grid > div:nth-child(2n) {
    border-right: none !important;
  }

  /* CTA banner: stack */
  .bd-cta-grid {
    grid-template-columns: 1fr !important;
  }
  .bd-cta-grid > div:last-child {
    align-items: flex-start !important;
  }
}

@media (max-width: 1024px) {
  /* Tablet: 2-col service cards */
  .bd-services-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Cases: stack on tablet too */
  .bd-case-article {
    grid-template-columns: 1fr !important;
  }
  /* Team: stack on tablet */
  .bd-team-grid {
    grid-template-columns: 1fr !important;
  }
  /* Numbers: 2×2 on tablet */
  .bd-numbers-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}