/**
 * BK DevOps Official Brand Theme CSS
 * Extracted directly from official BK DevOps Logo (https://bkdevops.lk/wp-content/uploads/2026/10/bklogo.png)
 *
 * Core Palette:
 * - Brand Action / Flame Orange: #F15019 (rgb: 241, 80, 25)
 * - Tech Emerald Green:          #2DBC64 (rgb: 45, 188, 100)
 * - Radiant Amber Gold:          #FFA038 (rgb: 255, 160, 56)
 * - Deep Obsidian Slate Teal:    #142C2C (rgb: 20, 44, 44)
 * - Dark Navy Slate:             #1F2532 (rgb: 31, 37, 50)
 * - Crimson Flame:               #DB2323 (rgb: 219, 35, 35)
 */

:root {
  /* 1. Primary Brand Accent (BK Orange) */
  --bs-primary: #F15019;
  --bs-primary-rgb: 241, 80, 25;
  --bs-primary-hover: #D8420F;
  --bs-primary-active: #B9370B;
  --bs-primary-light: #FF6D38;
  --bs-link-color: #F15019;
  --bs-link-hover-color: #D8420F;

  /* 2. Success / Passing Factor (Tech Emerald Green) */
  --bs-success: #2DBC64;
  --bs-success-rgb: 45, 188, 100;
  --bs-success-hover: #24A355;

  /* 3. Warning / Attention (Radiant Amber Gold) */
  --bs-warning: #FFA038;
  --bs-warning-rgb: 255, 160, 56;
  --bs-warning-hover: #E88E28;

  /* 4. Danger / Critical Issues (Crimson Flame) */
  --bs-danger: #DB2323;
  --bs-danger-rgb: 219, 35, 35;
  --bs-danger-hover: #C21919;

  /* 5. Deep Obsidian Slate Teal */
  --bs-dark: #142C2C;
  --bs-dark-rgb: 20, 44, 44;
  --bk-slate-navy: #1F2532;
  --bk-teal-deep: #142C2C;
  --bk-teal-surface: #0E1F1F;

  /* Multi-stop Logo Gradient */
  --bk-logo-gradient: linear-gradient(135deg, #F15019 0%, #FFA038 55%, #2DBC64 100%);
  --bk-logo-gradient-dark: linear-gradient(135deg, #142C2C 0%, #1F2532 50%, #142C2C 100%);
}

/* ============================================================
   Headings & Brand Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.text-heading {
  color: #142C2C;
}

/* Logo brand gradient text */
.bk-gradient-text {
  background: var(--bk-logo-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 700;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
  color: #fff !important;
  background-color: #F15019 !important;
  border-color: #F15019 !important;
  box-shadow: 0 2px 6px 0 rgba(241, 80, 25, 0.35) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #D8420F !important;
  border-color: #D8420F !important;
  box-shadow: 0 4px 12px 0 rgba(241, 80, 25, 0.45) !important;
}

.btn-label-primary {
  color: #F15019 !important;
  border-color: rgba(0, 0, 0, 0) !important;
  background: rgba(241, 80, 25, 0.1) !important;
}

.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary:active {
  color: #fff !important;
  background-color: #F15019 !important;
  border-color: #F15019 !important;
}

.btn-outline-primary {
  color: #F15019 !important;
  border-color: #F15019 !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff !important;
  background-color: #F15019 !important;
  border-color: #F15019 !important;
  box-shadow: 0 2px 6px 0 rgba(241, 80, 25, 0.35) !important;
}

/* Success Buttons (Tech Emerald Green) */
.btn-success {
  color: #fff !important;
  background-color: #2DBC64 !important;
  border-color: #2DBC64 !important;
  box-shadow: 0 2px 6px 0 rgba(45, 188, 100, 0.35) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  color: #fff !important;
  background-color: #24A355 !important;
  border-color: #24A355 !important;
}

.btn-label-success {
  color: #2DBC64 !important;
  background-color: rgba(45, 188, 100, 0.12) !important;
}

/* ============================================================
   Text & Background Utilities
   ============================================================ */
.text-primary {
  color: #F15019 !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #D8420F !important;
}

.bg-primary {
  background-color: #F15019 !important;
  color: #fff !important;
}

.text-success {
  color: #2DBC64 !important;
}

.bg-success {
  background-color: #2DBC64 !important;
  color: #fff !important;
}

.text-warning {
  color: #FFA038 !important;
}

.bg-warning {
  background-color: #FFA038 !important;
  color: #fff !important;
}

.text-danger {
  color: #DB2323 !important;
}

.bg-danger {
  background-color: #DB2323 !important;
  color: #fff !important;
}

/* ============================================================
   Labels & Badges
   ============================================================ */
.bg-label-primary {
  background-color: rgba(241, 80, 25, 0.1) !important;
  color: #F15019 !important;
}

.bg-label-success {
  background-color: rgba(45, 188, 100, 0.12) !important;
  color: #1E8544 !important;
}

.bg-label-warning {
  background-color: rgba(255, 160, 56, 0.14) !important;
  color: #B86812 !important;
}

.bg-label-danger {
  background-color: rgba(219, 35, 35, 0.12) !important;
  color: #DB2323 !important;
}

.bg-label-dark {
  background-color: rgba(20, 44, 44, 0.1) !important;
  color: #142C2C !important;
}

/* Brand multi-color badge */
.bk-brand-badge {
  background: var(--bk-logo-gradient);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 6px 0 rgba(241, 80, 25, 0.3);
}

/* ============================================================
   Sidebar & Navigation Menus
   ============================================================ */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(72.47deg, #F15019 22.16%, rgba(241, 80, 25, 0.8) 76.47%) !important;
  box-shadow: 0px 2px 8px 0px rgba(241, 80, 25, 0.38) !important;
  color: #fff !important;
}

[dir='rtl'] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(72.47deg, rgba(241, 80, 25, 0.8) 22.16%, #F15019 76.47%) !important;
}

.bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(241, 80, 25, 0.1) !important;
  color: #F15019 !important;
}

.bg-menu-theme .menu-link:hover {
  color: #F15019 !important;
}

.menu-vertical .menu-item .menu-link:hover i {
  color: #F15019 !important;
}

/* App Brand Logo Container */
.app-brand-logo.demo {
  width: auto !important;
  height: 38px !important;
}

.app-brand-logo.demo img {
  max-height: 38px;
  max-width: 175px;
  object-fit: contain;
}

/* ============================================================
   Forms & Controls
   ============================================================ */
.form-control:focus,
.form-select:focus {
  border-color: #F15019 !important;
  box-shadow: 0 0 0 0.25rem rgba(241, 80, 25, 0.18) !important;
}

.form-check-input:checked {
  background-color: #F15019 !important;
  border-color: #F15019 !important;
  box-shadow: 0 2px 4px 0 rgba(241, 80, 25, 0.35) !important;
}

.form-check-input:focus {
  border-color: #F15019 !important;
  box-shadow: 0 0 0 0.2rem rgba(241, 80, 25, 0.2) !important;
}

/* ============================================================
   Tabs, Progress & Pagination
   ============================================================ */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #F15019 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px 0 rgba(241, 80, 25, 0.35) !important;
}

.nav-tabs .nav-link.active {
  color: #F15019 !important;
  border-bottom: 2px solid #F15019 !important;
}

.nav-tabs .nav-link:hover {
  color: #F15019 !important;
}

.page-item.active .page-link {
  background-color: #F15019 !important;
  border-color: #F15019 !important;
  box-shadow: 0 2px 6px 0 rgba(241, 80, 25, 0.35) !important;
}

.progress-bar {
  background-color: #F15019 !important;
}

.progress-bar.bg-success {
  background-color: #2DBC64 !important;
}

.progress-bar.bg-warning {
  background-color: #FFA038 !important;
}

.progress-bar.bg-danger {
  background-color: #DB2323 !important;
}

/* ============================================================
   Hero & Ambient Glows
   ============================================================ */
.hero-glow {
  background: radial-gradient(circle at 50% 25%, rgba(241, 80, 25, 0.10) 0%, rgba(255, 160, 56, 0.06) 35%, rgba(45, 188, 100, 0.05) 60%, rgba(255, 255, 255, 0) 75%) !important;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #F15019 !important;
}

/* Score meters */
.badge-score-lg {
  border: 4px solid #fff;
  box-shadow: 0 4px 14px 0 rgba(20, 44, 44, 0.15);
}

.badge-score-lg.score-high {
  background: linear-gradient(135deg, #2DBC64 0%, #24A355 100%) !important;
  color: #fff !important;
}

.badge-score-lg.score-mid {
  background: linear-gradient(135deg, #FFA038 0%, #C06121 100%) !important;
  color: #fff !important;
}

.badge-score-lg.score-low {
  background: linear-gradient(135deg, #DB2323 0%, #B91C1C 100%) !important;
  color: #fff !important;
}

/* ============================================================
   Header & Mobile Responsive Navigation
   ============================================================ */
.landing-main-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(20, 44, 44, 0.08);
  height: auto !important;
  min-height: 56px !important;
  transform: none !important;
  transition: box-shadow 0.25s ease-in-out;
}

.landing-main-navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.landing-main-navbar .landing-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.landing-header-logo {
  height: 36px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
  transition: all 0.2s ease-in-out;
}

.header-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.header-action-btn {
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: all 0.15s ease-in-out;
}

.landing-hamburger-btn {
  background: transparent;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s ease;
}

.landing-hamburger-btn:focus,
.landing-hamburger-btn:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* Toggle menu icon vs close X icon */
.landing-hamburger-btn .icon-close {
  display: none !important;
}

.landing-hamburger-btn[aria-expanded="true"] .icon-menu {
  display: none !important;
}

.landing-hamburger-btn[aria-expanded="true"] .icon-close {
  display: inline-block !important;
}

/* Tablet & Mobile Breakpoints for Header Nav */
@media (max-width: 991.98px) {
  .landing-main-navbar {
    height: auto !important;
    min-height: 56px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .landing-main-navbar .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Keep the collapsing element completely free of padding/margin/border/shadow to eliminate animation snap jumps */
  .landing-nav-menu {
    flex-basis: 100% !important;
    width: 100% !important;
    align-self: flex-start !important;
    order: 3 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Inner card container animates smoothly downwards and handles scrolling */
  .landing-nav-menu-inner {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.1rem 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 14px 35px rgba(20, 44, 44, 0.14);
    border: 1px solid rgba(20, 44, 44, 0.08);
    max-height: calc(85vh - 75px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .landing-nav-menu .nav-link {
    padding: 0.65rem 1rem !important;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: #142C2C;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .landing-nav-menu .nav-link:hover,
  .landing-nav-menu .nav-link:focus,
  .landing-nav-menu .nav-link.active {
    background: rgba(241, 80, 25, 0.08);
    color: var(--bs-primary) !important;
  }
}

@media (max-width: 767.98px) {
  .landing-header-logo {
    height: 32px;
    max-width: 145px;
  }

  /* SEO Report & History Headers Mobile Layout */
  .report-header-actions,
  .history-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
}

@media (max-width: 575.98px) {
  .landing-main-navbar {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  .landing-main-navbar .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .landing-header-logo {
    height: 27px;
    max-width: 115px;
  }

  .header-action-btn {
    font-size: 0.75rem !important;
    padding: 0.28rem 0.55rem !important;
  }

  .header-brand-badge {
    display: none !important;
  }

  .landing-hamburger-btn {
    padding: 0.2rem !important;
    margin-left: 0.25rem !important;
  }

  .landing-hamburger-btn i {
    font-size: 1.65rem !important;
  }

  /* Landing Hero responsive adjustments */
  .landing-hero {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  .landing-hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .landing-hero .lead {
    font-size: 0.92rem !important;
  }

  .landing-hero .badge {
    font-size: 0.72rem !important;
    white-space: normal !important;
  }

  /* Secondary report buttons on phones */
  .report-header-actions .btn,
  .report-header-actions .btn-group,
  .history-header-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 125px;
    text-align: center;
    justify-content: center;
  }

  .report-header-actions .btn-group .btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .landing-header-logo {
    height: 23px;
    max-width: 95px;
  }

  .header-action-btn {
    font-size: 0.72rem !important;
    padding: 0.24rem 0.42rem !important;
  }

  .landing-hero h1 {
    font-size: 1.5rem !important;
  }

  .report-header-actions .btn,
  .report-header-actions .btn-group,
  .history-header-actions .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
}