/**
 * BK DevOps brand theme — follows the BK Tools reference design
 * (BK-Paradise/BK-Web-Dev-Tools, Ajantha Lakmal, b95d7f7 / 5218b15).
 *
 * Primary is ORANGE, not ink. Variable names match the Tools :root set.
 */

:root {
  --bk-orange: #f15019;
  --bk-primary: var(--bk-orange);
  --bk-orange-light: #ff7547;
  --bk-orange-subtle: rgba(241, 80, 25, .12);
  --bk-green: #2dbc64;
  --bk-green-dark: #009739;
  --bk-green-subtle: rgba(45, 188, 100, .12);
  --bk-gold: #ffab49;
  --bk-gold-subtle: rgba(255, 171, 73, .15);
  --bk-gold-text: #d97800;
  --bk-teal-dark: #142c2c;
  --bk-charcoal: #1f2532;
  --bk-brand-gradient: linear-gradient(135deg, #f15019 0%, #ff8048 50%, #2dbc64 100%);
  --bk-accent-glow: 0 4px 18px rgba(241, 80, 25, .25);
  --bk-muted: #4b5563;
  --bk-focus: var(--bk-orange);

  --bk-dark-bg: #0c0c0e;
  --bk-dark-surface: #141417;
  --bk-dark-elevated: #1c1c21;
  --bk-dark-surface-raised: #1c1c21;
  --bk-dark-border: #27272d;
  --bk-dark-text: #f4f4f5;
  --bk-dark-muted: #a1a1aa;

  --bs-primary: var(--bk-orange);
  --bs-primary-rgb: 241, 80, 25;
  --bs-link-color: var(--bk-orange);
  --bs-link-hover-color: #e0440f;
}

/* -------------------------------------------------------------
 * 1. Brand Logo & Header Navigation Styling
 *    Sidebar 34px / max-width 140px; login 42px; footer 18px
 * ----------------------------------------------------------- */
.app-brand.demo {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1rem;
}

.app-brand.demo .app-brand-logo.demo {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}

.app-brand-logo-img,
.app-brand-logo-full {
  height: 34px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.app-brand-logo-collapsed,
.app-brand-icon-img {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.bk-brand-logo,
.auth-brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.footer-brand-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.app-brand-text.demo {
  color: var(--bk-teal-dark) !important;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.bk-brand-text {
  background: var(--bk-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.layout-menu-collapsed .app-brand-logo-full,
.layout-menu-collapsed .app-brand-logo-img:not(.app-brand-logo-collapsed) {
  display: none !important;
}

.layout-menu-collapsed .app-brand-logo-collapsed,
.layout-menu-collapsed .app-brand-icon-img {
  display: inline-block !important;
}

.layout-menu-hover.layout-menu-collapsed .app-brand-logo-full,
.layout-menu-hover.layout-menu-collapsed .app-brand-logo-img:not(.app-brand-logo-collapsed) {
  display: inline-block !important;
}

.layout-menu-hover.layout-menu-collapsed .app-brand-logo-collapsed,
.layout-menu-hover.layout-menu-collapsed .app-brand-icon-img {
  display: none !important;
}

/* -------------------------------------------------------------
 * 2. Primary Buttons, Badges, Links & Colors
 *    Primary = orange gradient (BK Tools). Failing AA small-text
 *    pairs stay his colour but use bold weight (see BrandContrastTest).
 * ----------------------------------------------------------- */
.btn-primary {
  color: #fff !important;
  background-image: linear-gradient(135deg, #f15019, #ff7547) !important;
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  box-shadow: var(--bk-accent-glow) !important;
  font-weight: 700 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary,
.btn-check:focus + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-image: linear-gradient(135deg, #e0440f, #f15019) !important;
  background-color: #e0440f !important;
  border-color: #e0440f !important;
  box-shadow: var(--bk-accent-glow) !important;
}

.btn-outline-primary {
  color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  font-weight: 700 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  color: #fff !important;
}

.btn-label-primary {
  color: var(--bk-orange) !important;
  background-color: var(--bk-orange-subtle) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

.btn-label-primary:hover,
.btn-label-primary:focus {
  background-color: rgba(241, 80, 25, 0.2) !important;
  color: #e0440f !important;
}

.btn-coral,
.btn-accent {
  color: #fff !important;
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  background-image: linear-gradient(135deg, #f15019, #ff7547) !important;
  box-shadow: var(--bk-accent-glow) !important;
  font-weight: 700 !important;
}

.btn-coral:hover,
.btn-coral:focus,
.btn-accent:hover,
.btn-accent:focus {
  color: #fff !important;
  background-image: linear-gradient(135deg, #e0440f, #f15019) !important;
  background-color: #e0440f !important;
  border-color: #e0440f !important;
}

h1, h2, h3, h4, h5, h6,
.text-heading {
  color: var(--bk-teal-dark);
}

.text-primary {
  color: var(--bk-orange) !important;
  font-weight: 700;
}

a {
  color: var(--bk-orange);
  font-weight: 700;
}

a:hover {
  color: #e0440f;
}

.bg-primary {
  background-color: var(--bk-orange) !important;
}

.bg-label-primary {
  background-color: var(--bk-orange-subtle) !important;
  color: var(--bk-orange) !important;
  font-weight: 700;
}

.bg-label-success {
  background-color: var(--bk-green-subtle) !important;
  color: var(--bk-green-dark) !important;
  font-weight: 700;
}

.bg-label-warning {
  background-color: var(--bk-gold-subtle) !important;
  color: var(--bk-gold-text) !important;
  font-weight: 700;
}

.bg-label-accent,
.bg-label-orange {
  background-color: var(--bk-orange-subtle) !important;
  color: var(--bk-orange) !important;
  font-weight: 700;
}

.text-accent,
.text-orange {
  color: var(--bk-orange) !important;
  font-weight: 700;
}

.text-success {
  color: var(--bk-green-dark) !important;
  font-weight: 700;
}

.text-warning {
  color: var(--bk-gold-text) !important;
  font-weight: 700;
}

.border-primary {
  border-color: var(--bk-orange) !important;
}

/* -------------------------------------------------------------
 * 3. Menu Navigation (Sidebar) Active States & Accents
 * ----------------------------------------------------------- */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #fff !important;
  background: var(--bk-brand-gradient) !important;
  box-shadow: var(--bk-accent-glow) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--bk-orange) !important;
}

.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
  color: #fff !important;
}

.bg-menu-theme .menu-link:hover {
  color: var(--bk-orange) !important;
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link {
  color: var(--bk-orange) !important;
  font-weight: 700;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--bk-brand-gradient) !important;
  box-shadow: var(--bk-accent-glow) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------
 * 4. Form Controls, Checkboxes, Switches & Focus States
 * ----------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--bk-orange) !important;
  box-shadow: 0 0 0 0.2rem var(--bk-orange-subtle) !important;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
}

.form-check-input:focus {
  border-color: var(--bk-orange) !important;
  box-shadow: 0 0 0 0.2rem var(--bk-orange-subtle) !important;
}

.switch-input:checked ~ .switch-toggle-slider {
  background: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
}

/* -------------------------------------------------------------
 * 5. Tabs, Badges, Progress Bars & Accents
 * ----------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--bk-orange) !important;
  background-image: linear-gradient(135deg, #f15019, #ff7547) !important;
  color: #fff !important;
  box-shadow: var(--bk-accent-glow) !important;
  font-weight: 700;
}

.nav-tabs .nav-link.active {
  color: var(--bk-orange) !important;
  border-bottom: 2px solid var(--bk-orange) !important;
  font-weight: 700;
}

.progress-bar {
  background-color: var(--bk-orange) !important;
  background-image: linear-gradient(135deg, #f15019, #ff7547) !important;
}

.badge.bg-primary {
  background-color: var(--bk-orange) !important;
  font-weight: 700;
}

.badge.bg-label-primary {
  background-color: var(--bk-orange-subtle) !important;
  color: var(--bk-orange) !important;
  font-weight: 700;
}

.page-item.active .page-link,
.pagination li.active > a:not(.page-link) {
  border-color: var(--bk-orange) !important;
  background-color: var(--bk-orange) !important;
  color: #fff !important;
  font-weight: 700;
}

/* -------------------------------------------------------------
 * 6. Auth Background Geometric Watermarks
 * ----------------------------------------------------------- */
.authentication-wrapper.authentication-basic .authentication-inner:before {
  stroke: var(--bk-green) !important;
}

.authentication-wrapper.authentication-basic .authentication-inner:after {
  stroke: var(--bk-orange) !important;
}

/* -------------------------------------------------------------
 * 7. Accessibility: contrast, focus, skip link, 375px layout
 *    Kept from Ajantha's a11y/mobile pass; tokens remapped to Tools.
 * ----------------------------------------------------------- */
.text-muted,
small.text-muted,
.menu-header-text {
  color: var(--bk-muted) !important;
  font-weight: 400;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: 0.75rem 1rem;
  background: #fff;
  color: var(--bk-teal-dark);
  font-weight: 700;
  border-radius: 0 0 0.35rem 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0.75rem;
  top: 0.75rem;
  outline: 3px solid var(--bk-focus);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--bk-focus);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.menu-link:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--bk-focus);
  outline-offset: 2px;
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.content-wrapper:focus {
  outline: none;
}

.content-wrapper:focus-visible {
  outline: none;
}

@media (max-width: 575.98px) {
  .container-xxl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Mobile Responsive Header / Top Navbar */
  .layout-navbar {
    min-height: 3.5rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .layout-navbar .layout-menu-toggle {
    margin-right: 0.25rem !important;
  }

  .layout-navbar .layout-menu-toggle .nav-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .layout-navbar #navbar-collapse {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .layout-navbar #navbar-collapse > .navbar-nav:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .layout-navbar #navbar-collapse > .navbar-nav:first-child .nav-item {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout-navbar #navbar-collapse > .navbar-nav:first-child .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.45rem;
  }

  .layout-navbar .navbar-nav.ms-auto {
    flex: 0 0 auto;
    gap: 0.25rem;
  }

  .layout-navbar .navbar-nav.ms-auto .nav-link {
    padding: 0.35rem !important;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .layout-navbar .nav-btn-add-site {
    min-width: 38px;
    min-height: 38px;
    padding: 0 0.55rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .layout-navbar .dropdown-user .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    width: min(290px, calc(100vw - 2rem)) !important;
    min-width: 240px;
    margin-top: 0.5rem !important;
  }

  .layout-navbar .dropdown-style-switcher .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    min-width: 140px;
    width: auto !important;
    margin-top: 0.5rem !important;
  }

  .layout-navbar .btn-sm {
    min-height: 38px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .site-row-actions {
    justify-content: flex-start;
  }

  .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .authentication-inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .bk-brand-logo,
  .auth-brand-logo-img,
  .app-brand-logo-img,
  .app-brand-logo-full {
    max-width: min(180px, 70vw);
  }

  .footer-container {
    text-align: center;
    gap: 0.5rem;
  }

  .card .d-flex.justify-content-between.align-items-center.flex-wrap .btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------
 * 8. Dark canvas: Carbon Zinc (#0c0c0e) page + raised surfaces.
 *    Dark applies ONLY when the user explicitly picks it
 *    (html.dark-style, data-theme="dark", data-bs-theme="dark").
 *    Never via prefers-color-scheme. Explicit light wins.
 * ----------------------------------------------------------- */
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) {
  --bs-body-bg: var(--bk-dark-bg);
  --bs-body-bg-rgb: 12, 12, 14;
  --bs-body-color: var(--bk-dark-text);
  --bs-heading-color: #ffffff;
  --bs-secondary-color: var(--bk-dark-muted);
  --bs-tertiary-bg: var(--bk-dark-surface-raised);
  --bs-card-bg: var(--bk-dark-surface);
  --bs-card-color: var(--bk-dark-text);
  --bs-modal-bg: var(--bk-dark-surface-raised);
  --bs-dropdown-bg: var(--bk-dark-surface-raised);
  --bs-offcanvas-bg: var(--bk-dark-surface);
  --bs-toast-bg: var(--bk-dark-surface-raised);
  --bs-border-color: var(--bk-dark-border);
  --bs-paper-bg: var(--bk-dark-surface);
  color-scheme: dark;
  background-color: var(--bk-dark-bg);
  color: var(--bk-dark-text);
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) body,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .bg-body,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-wrapper,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-container,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-page,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .content-wrapper,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .container-p-y,
:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .authentication-wrapper {
  background-color: var(--bk-dark-bg) !important;
  background: var(--bk-dark-bg) !important;
  color: var(--bk-dark-text);
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
  background: var(--bk-dark-bg) !important;
  backdrop-filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  opacity: 0;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(.card, .accordion, .accordion-item, .offcanvas, .list-group-item, .table, .footer, .content-footer, .layout-footer) {
  background-color: var(--bk-dark-surface) !important;
  border-color: var(--bk-dark-border) !important;
  color: var(--bk-dark-text);
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(.modal-content, .dropdown-menu, .popover, .toast, .swal2-popup, .navbar-dropdown) {
  background-color: var(--bk-dark-surface-raised) !important;
  border: 1px solid var(--bk-dark-border) !important;
  color: var(--bk-dark-text);
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(.form-control, .form-select, .input-group-text, textarea.form-control) {
  background-color: var(--bk-dark-surface-raised) !important;
  border-color: var(--bk-dark-border) !important;
  color: var(--bk-dark-text) !important;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(.layout-navbar, .bg-navbar-theme, .layout-menu, .bg-menu-theme, .menu-vertical) {
  background-color: var(--bk-dark-surface) !important;
  border-color: var(--bk-dark-border);
  color: var(--bk-dark-text);
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(h1, h2, h3, h4, h5, h6, .text-heading, .app-brand-text.demo) {
  color: #fff !important;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) :is(.text-muted, small.text-muted, .menu-header-text) {
  color: var(--bk-dark-muted) !important;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .skip-link {
  background: var(--bk-dark-surface-raised);
  color: #fff;
  border: 1px solid var(--bk-dark-border);
}

/* -------------------------------------------------------------
 * 9. Skeleton Loader Shimmer Utility
 * ----------------------------------------------------------- */
.skeleton-shimmer {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .skeleton-shimmer {
  background-color: rgba(255, 255, 255, 0.08);
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

:is(html.dark-style, html[data-theme="dark"], html[data-bs-theme="dark"]):not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .skeleton-shimmer::after {
  background-image: linear-gradient(
    90deg,
    rgba(241, 80, 25, 0) 0,
    rgba(241, 80, 25, 0.15) 50%,
    rgba(241, 80, 25, 0) 100%
  );
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}