/**
 * BK DevOps brand theme — follows the BK Tools reference design
 * (BK-Paradise/BK-Web-Dev-Tools, Ajantha commits b95d7f7 / 5218b15).
 *
 * Primary is orange. Variable names match BK Tools :root exactly.
 */

:root {
  --bk-orange: #f15019;
  --bk-orange-light: #ff7547;
  --bk-orange-subtle: rgba(241, 80, 25, 0.12);
  --bk-green: #2dbc64;
  --bk-green-dark: #009739;
  --bk-green-subtle: rgba(45, 188, 100, 0.12);
  --bk-gold: #ffab49;
  --bk-gold-subtle: rgba(255, 171, 73, 0.15);
  --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, 0.25);

  --bk-red: #db2323;
  --bk-gold-text: #d97800;
  --bk-orange-hover: #e0440f;

  /* Dark canvas — Carbon Zinc surfaces (user opt-in only) */
  --bk-dark-bg: #0c0c0e;
  --bk-dark-surface: #141417;
  --bk-dark-surface-raised: #1c1c21;
  --bk-dark-elevated: #1c1c21;
  --bk-dark-border: #27272d;
  --bk-dark-text: #f4f4f5;
  --bk-dark-muted: #a1a1aa;

  color-scheme: light;

  /* Bootstrap mapping — primary is orange */
  --bs-primary: var(--bk-orange);
  --bs-primary-rgb: 241, 80, 25;
  --bs-primary-hover: var(--bk-orange-hover);
  --bs-primary-active: var(--bk-orange);
  --bs-success: var(--bk-green);
  --bs-success-rgb: 45, 188, 100;
  --bs-warning: var(--bk-gold);
  --bs-warning-rgb: 255, 171, 73;
  --bs-danger: var(--bk-red);
  --bs-danger-rgb: 219, 35, 35;
  --bs-dark: var(--bk-teal-dark);
  --bs-dark-rgb: 20, 44, 44;
  --bs-link-color: var(--bk-orange);
  --bs-link-hover-color: var(--bk-orange-hover);

  /* Aliases for the earlier hand-tuned token names in this file */
  --bk-green-emerald: var(--bk-green-dark);
  --bk-green-neon: var(--bk-green);
  --bk-orange-sunset: var(--bk-orange);
  --bk-amber-gold: var(--bk-gold);
  --bk-red-crimson: var(--bk-red);
  --bk-charcoal-navy: var(--bk-teal-dark);
}

/* ==========================================================================
   1. Brand typography & gradient accents
   ========================================================================== */
.gateway-brand,
.gateway-title,
.bk-brand-text {
  background: var(--bk-brand-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.bk-brand-gradient-bg {
  background: var(--bk-brand-gradient) !important;
  color: #ffffff !important;
}

.bk-brand-subtag {
  font-size: 0.75rem;
  letter-spacing: 0.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.bk-subtag-orange { color: var(--bk-orange); font-weight: 700; }
.bk-subtag-gold { color: var(--bk-gold-text); font-weight: 700; }
.bk-subtag-green { color: var(--bk-green-dark); font-weight: 700; }

/* ==========================================================================
   2. App brand logo — BK Tools sizes
   sidebar 34px / max-width 140px; login 42px; footer 18px
   ========================================================================== */
.app-brand-logo.demo {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

.app-brand .app-brand-logo-img,
.app-brand .app-brand-logo-full {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.app-brand .app-brand-logo-collapsed {
  display: none;
  height: 34px;
  width: 34px;
  object-fit: contain;
}

.layout-menu-collapsed .app-brand .app-brand-logo-full {
  display: none !important;
}

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

.layout-menu-collapsed .app-brand .gateway-brand,
.layout-menu-collapsed .app-brand .app-brand-text {
  display: none !important;
}

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

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

/* ==========================================================================
   3. Primary buttons — orange gradient, white text
   ========================================================================== */
.btn-primary {
  background: linear-gradient(135deg, var(--bk-orange), var(--bk-orange-light)) !important;
  border-color: var(--bk-orange) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: var(--bk-accent-glow) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
  background: linear-gradient(135deg, var(--bk-orange-hover), var(--bk-orange)) !important;
  border-color: var(--bk-orange-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--bk-accent-glow) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: linear-gradient(135deg, var(--bk-orange), var(--bk-orange-light)) !important;
  border-color: var(--bk-orange) !important;
  color: #ffffff !important;
  box-shadow: var(--bk-accent-glow) !important;
}

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

.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary:active {
  background: linear-gradient(135deg, var(--bk-orange), var(--bk-orange-light)) !important;
  color: #ffffff !important;
  box-shadow: var(--bk-accent-glow) !important;
}

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

.btn-label-danger {
  background-color: rgba(219, 35, 35, 0.12) !important;
  color: var(--bk-red) !important;
  font-weight: 700;
}

.btn-label-danger:hover,
.btn-label-danger:focus,
.btn-label-danger:active {
  background-color: var(--bk-red) !important;
  border-color: var(--bk-red) !important;
  color: #ffffff !important;
}

/* OneDrive status — same box as .btn (height, padding, radius, weight) */
.onedrive-status-badge.btn {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}

span.onedrive-status-badge {
  cursor: default;
  pointer-events: none;
}

.btn-warning {
  background-color: var(--bk-gold) !important;
  border-color: var(--bk-gold) !important;
  color: var(--bk-teal-dark) !important;
  font-weight: 700;
  box-shadow: 0 2px 6px 0 rgba(255, 171, 73, 0.35) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--bk-gold-text) !important;
  border-color: var(--bk-gold-text) !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: var(--bk-green-dark) !important;
  border-color: var(--bk-green-dark) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.btn-danger {
  background-color: var(--bk-red) !important;
  border-color: var(--bk-red) !important;
  color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.btn-dark {
  background-color: var(--bk-teal-dark) !important;
  border-color: var(--bk-teal-dark) !important;
  color: #ffffff !important;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: var(--bk-charcoal) !important;
  border-color: var(--bk-charcoal) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4. Sidebar — active item uses brand gradient + orange glow
   ========================================================================== */
.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: #ffffff !important;
  font-weight: 600;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) i {
  color: #ffffff !important;
}

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

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

.bg-menu-theme .menu-item.open > .menu-link.menu-toggle {
  color: var(--bk-teal-dark) !important;
}

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

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link::before {
  background-color: var(--bk-orange) !important;
  box-shadow: 0 0 0 2px var(--bk-orange-subtle) !important;
}

/* ==========================================================================
   5. Badges & labels
   ========================================================================== */
.badge.bg-primary {
  background-color: var(--bk-orange) !important;
  color: #ffffff !important;
  font-weight: 700;
}

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

.badge.bg-success {
  background-color: var(--bk-green-dark) !important;
  color: #ffffff !important;
}

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

.badge.bg-warning {
  background-color: var(--bk-gold) !important;
  color: var(--bk-teal-dark) !important;
  font-weight: 700;
}

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

.badge.bg-danger {
  background-color: var(--bk-red) !important;
  color: #ffffff !important;
}

.badge.bg-label-danger,
.bg-label-danger {
  background-color: rgba(219, 35, 35, 0.12) !important;
  color: var(--bk-red) !important;
  font-weight: 700;
}

.badge.bg-dark {
  background-color: var(--bk-teal-dark) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   6. Form controls, focus (orange), switches
   ========================================================================== */
.form-control:focus,
.form-select:focus {
  border-color: var(--bk-orange) !important;
  box-shadow: 0 0 0 0.2rem var(--bk-orange-subtle) !important;
}

.form-check-input:checked {
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  box-shadow: var(--bk-accent-glow) !important;
}

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

/* ==========================================================================
   7. Links, text helpers & tabs
   Orange / green-dark / gold-text on white are < 4.5:1 — keep his colours
   and bold the text (WCAG AA large/UI 3:1). See BrandPwaTest.
   ========================================================================== */
.text-primary {
  color: var(--bk-orange) !important;
  font-weight: 700;
}

a.text-primary:hover,
a:hover {
  color: var(--bk-orange-hover) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: linear-gradient(135deg, var(--bk-orange), var(--bk-orange-light)) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: var(--bk-accent-glow) !important;
}

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

.page-item.active .page-link,
.pagination .page-item.active > .page-link {
  background-color: var(--bk-orange) !important;
  border-color: var(--bk-orange) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: var(--bk-accent-glow) !important;
}

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

.progress-bar {
  background-color: var(--bk-orange) !important;
}
.progress-bar.bg-warning {
  background-color: var(--bk-gold) !important;
}
.progress-bar.bg-success {
  background-color: var(--bk-green-dark) !important;
}
.progress-bar.bg-gradient-brand {
  background: var(--bk-brand-gradient) !important;
}

@keyframes pulse-animation {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 80, 25, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(241, 80, 25, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 80, 25, 0); }
}

.swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, var(--bk-orange), var(--bk-orange-light)) !important;
  font-weight: 700;
  box-shadow: var(--bk-accent-glow) !important;
}
.swal2-styled.swal2-confirm:hover {
  background: linear-gradient(135deg, var(--bk-orange-hover), var(--bk-orange)) !important;
}

.authentication-wrapper {
  background: radial-gradient(circle at top right, var(--bk-orange-subtle), transparent 40%),
              radial-gradient(circle at bottom left, var(--bk-green-subtle), transparent 45%);
}

/* ==========================================================================
   8. Dark canvas — user opt-in only (never follow the OS color scheme)
      Light is the default. Explicit html.light-style / [data-theme="light"] /
      [data-bs-theme="light"] always wins when toggling back from dark.
      .bk-dark-page stays dark (cron-sync.php).
   ========================================================================== */
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]),
html[data-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]),
html[data-theme="theme-default-dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]),
html[data-bs-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]),
html.bk-dark-page,
[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-card-bg: var(--bk-dark-surface);
  --bs-border-color: var(--bk-dark-border);
  color-scheme: dark;
}

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

html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .onedrive-status-badge.btn,
html[data-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .onedrive-status-badge.btn,
html[data-theme="theme-default-dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .onedrive-status-badge.btn,
html[data-bs-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .onedrive-status-badge.btn,
html.bk-dark-page .onedrive-status-badge.btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .card,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-navbar,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .bg-navbar-theme,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-menu,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .bg-menu-theme,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .modal-content,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .dropdown-menu,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .offcanvas,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .popover,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .toast,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .swal2-popup,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .accordion-item,
html.dark-style:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .list-group-item,
html[data-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .card,
html[data-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .modal-content,
html[data-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .layout-navbar,
html[data-bs-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .card,
html[data-bs-theme="dark"]:not(.light-style):not([data-theme="light"]):not([data-bs-theme="light"]) .modal-content,
html.bk-dark-page .card,
html.bk-dark-page .main-card,
html.bk-dark-page .stat-card {
  background-color: var(--bk-dark-surface) !important;
  border-color: var(--bk-dark-border) !important;
  color: var(--bk-dark-text);
}

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

/* Explicit light always wins when toggling dark -> light */
html.light-style:not(.bk-dark-page),
html.light-style:not(.bk-dark-page):not(.dark-style),
html[data-theme="light"]:not(.bk-dark-page),
html[data-bs-theme="light"]:not(.bk-dark-page) {
  color-scheme: light;
}

.bk-theme-toggle {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-style-switcher .dropdown-item[data-theme].active,
.dropdown-style-switcher .dropdown-item[data-theme]:hover {
  color: var(--bk-orange);
}

/* Layout overlay is completely disabled and removed */
.layout-overlay,
.layout-overlay.layout-menu-toggle,
html .layout-overlay,
html.layout-menu-expanded .layout-overlay {
  display: none !important;
}

.content-backdrop.fade:not(.show) {
  display: none !important;
}