/* ============================================================
   PUNKECHAT — SaaS Design System
   Modern WhatsApp Gateway Platform UI
   ============================================================ */

/* Inter — the canonical SaaS font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Bootstrap override — ensure all --bs-primary uses our green */
  --bs-primary:        #22c55e;
  --bs-primary-rgb:    34, 197, 94;
  --bs-primary-text-emphasis: #15803d;
  --bs-primary-bg-subtle:     #f0fdf4;
  --bs-primary-border-subtle: #bbf7d0;
  --bs-link-color:     #16a34a;
  --bs-link-hover-color: #15803d;

  /* Brand — modern WhatsApp-inspired green */
  --pk-50:  #f0fdf4;
  --pk-100: #dcfce7;
  --pk-200: #bbf7d0;
  --pk-300: #86efac;
  --pk-400: #4ade80;
  --pk-500: #22c55e;
  --pk-600: #16a34a;
  --pk-700: #15803d;
  --pk-800: #166534;
  --pk-900: #14532d;
  --pk-rgb: 34, 197, 94;

  /* Sidebar */
  --pk-sb-bg:           #0d1117;
  --pk-sb-border:       #1f2937;
  --pk-sb-text:         #8b98a8;
  --pk-sb-text-hover:   #d1d5db;
  --pk-sb-text-active:  #ffffff;
  --pk-sb-active-bg:    rgba(34, 197, 94, 0.13);
  --pk-sb-active-bar:   #22c55e;
  --pk-sb-header-text:  rgba(255,255,255,0.28);

  /* Surface */
  --pk-body-bg:    #f1f5f9;
  --pk-card-bg:    #ffffff;
  --pk-border:     #e2e8f0;
  --pk-shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --pk-shadow:     0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.04);
  --pk-shadow-lg:  0 10px 24px -4px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.04);

  /* Typography */
  --pk-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pk-color-heading: #0f172a;
  --pk-color-body:    #334155;
  --pk-color-muted:   #64748b;

  /* Geometry */
  --pk-radius-xs: 4px;
  --pk-radius-sm: 6px;
  --pk-radius:    10px;
  --pk-radius-lg: 14px;
  --pk-radius-xl: 20px;

  /* Motion */
  --pk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pk-duration: 160ms;
  --pk-transition: all var(--pk-duration) var(--pk-ease);
}

/* Dark mode variables override */
[data-bs-theme="dark"] {
  /* Surface */
  --pk-body-bg:         #0b0f19;
  --pk-card-bg:         #111827;
  --pk-border:          #1f2937;

  /* Typography */
  --pk-color-heading:   #f9fafb;
  --pk-color-body:      #e5e7eb;
  --pk-color-muted:     #9ca3af;

  /* Brand Overrides for Dark Mode Hover */
  --pk-50:              rgba(34, 197, 94, 0.15); /* Translucent green background */
  --pk-600:             #22c55e; /* Brand green */
  --pk-700:             #4ade80; /* Bright green text */
}

/* Dark mode panel & component overrides */
[data-bs-theme="dark"] .pk-auth-wrapper {
  background: var(--pk-body-bg) !important;
}

[data-bs-theme="dark"] .pk-auth-form {
  background: var(--pk-body-bg) !important;
}

[data-bs-theme="dark"] .pk-auth-form-inner {
  background: var(--pk-card-bg) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1f2937 !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-color-heading) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #111827 !important;
  border-color: var(--pk-500) !important;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #1f2937 !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-color-muted) !important;
}

/* ============================================================
   2. BASE
   ============================================================ */

html, body {
  font-family: var(--pk-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--pk-body-bg) !important;
  color: var(--pk-color-body) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pk-font) !important;
  color: var(--pk-color-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

p { line-height: 1.65; }

a { transition: color var(--pk-duration) var(--pk-ease); }

/* ============================================================
   3. SIDEBAR
   ============================================================ */

#layout-menu,
.layout-menu {
  background-color: var(--pk-sb-bg) !important;
  border-right: 1px solid var(--pk-sb-border) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,0.18) !important;
}

/* Brand / logo area */
.app-brand.demo {
  height: 64px;
  border-bottom: 1px solid var(--pk-sb-border) !important;
  padding: 0 1.1rem !important;
}

/* Section headers */
.menu-header {
  margin-top: 0.5rem !important;
  padding-top: 0.25rem !important;
}

.menu-header .menu-header-text {
  color: var(--pk-sb-header-text) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding-left: 1rem !important;
}

/* Menu links */
.menu-vertical .menu-link {
  color: var(--pk-sb-text) !important;
  font-size: 0.875rem !important;
  font-weight: 450;
  border-radius: var(--pk-radius-sm) !important;
  margin: 1px 8px !important;
  padding: 0.55rem 0.85rem !important;
  transition: var(--pk-transition) !important;
  letter-spacing: 0.005em;
}

.menu-vertical .menu-link:hover {
  background-color: rgba(255,255,255,0.055) !important;
  color: var(--pk-sb-text-hover) !important;
}

/* Active state */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-link.active {
  background-color: var(--pk-sb-active-bg) !important;
  color: var(--pk-sb-text-active) !important;
  border-left: 2px solid var(--pk-sb-active-bar) !important;
  margin-left: 6px !important;
  padding-left: calc(0.85rem - 2px) !important;
}

/* Icons */
.menu-icon {
  color: var(--pk-sb-text) !important;
  opacity: 0.7;
}

.menu-link:hover .menu-icon {
  opacity: 1;
  color: var(--pk-sb-text-hover) !important;
}

.menu-item.active > .menu-link .menu-icon,
.menu-link.active .menu-icon {
  color: var(--pk-500) !important;
  opacity: 1;
}

/* Submenu */
.menu-vertical .menu-sub {
  padding-left: 0.25rem !important;
}

.menu-vertical .menu-sub .menu-link {
  font-size: 0.8375rem !important;
  color: rgba(139, 152, 168, 0.8) !important;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

.menu-vertical .menu-sub .menu-link:hover {
  color: var(--pk-sb-text-hover) !important;
  background-color: rgba(255,255,255,0.04) !important;
}

.menu-vertical .menu-sub .menu-item.active > .menu-link {
  color: var(--pk-400) !important;
  background-color: transparent !important;
  border-left: none !important;
  margin-left: 8px !important;
  padding-left: 0.85rem !important;
}

/* Toggle arrow icon */
.menu-vertical .menu-item.open > .menu-link .menu-toggle-icon,
.menu-vertical .menu-toggle-icon {
  color: var(--pk-sb-text) !important;
}

/* Sidebar toggle button (collapse) */
.layout-menu-toggle {
  color: var(--pk-sb-text) !important;
}

.layout-menu-toggle:hover {
  color: var(--pk-sb-text-hover) !important;
  background-color: rgba(255,255,255,0.06) !important;
}

/* Mobile toggler */
.menu-mobile-toggler .layout-menu-toggle {
  background: var(--pk-500) !important;
  border-color: var(--pk-500) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--pk-rgb), 0.35) !important;
}

/* Scrollbar inside sidebar */
#layout-menu ::-webkit-scrollbar { width: 3px; }
#layout-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 100px; }

/* ============================================================
   4. TOP NAVBAR
   ============================================================ */

.layout-navbar {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-bottom: 1px solid var(--pk-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.navbar-nav .nav-link {
  color: var(--pk-color-muted) !important;
  transition: var(--pk-transition) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--pk-color-heading) !important;
}

/* ============================================================
   5. CARDS
   ============================================================ */

.card {
  background: var(--pk-card-bg) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-radius-lg) !important;
  box-shadow: var(--pk-shadow-sm) !important;
  transition: box-shadow var(--pk-duration) var(--pk-ease),
              transform var(--pk-duration) var(--pk-ease) !important;
}

.card:hover {
  box-shadow: var(--pk-shadow) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--pk-border) !important;
  padding: 1.125rem 1.5rem !important;
}

.card-body {
  padding: 1.25rem 1.5rem !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--pk-border) !important;
  padding: 1rem 1.5rem !important;
}

/* Onboarding / highlighted card */
.card.border.border-primary {
  border: 1px solid rgba(var(--pk-rgb), 0.25) !important;
  border-top: 3px solid var(--pk-500) !important;
  background: linear-gradient(135deg, rgba(var(--pk-rgb), 0.025) 0%, transparent 60%) !important;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

.btn {
  font-family: var(--pk-font) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  border-radius: var(--pk-radius-sm) !important;
  transition: var(--pk-transition) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pk-500) 0%, var(--pk-600) 100%) !important;
  border-color: var(--pk-600) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(var(--pk-rgb), 0.25) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--pk-600) 0%, var(--pk-700) 100%) !important;
  border-color: var(--pk-700) !important;
  box-shadow: 0 4px 14px rgba(var(--pk-rgb), 0.35) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(var(--pk-rgb), 0.25) !important;
}

.btn-outline-primary {
  border-color: var(--pk-500) !important;
  color: var(--pk-600) !important;
}

.btn-outline-primary:hover {
  background-color: var(--pk-500) !important;
  border-color: var(--pk-500) !important;
  color: #fff !important;
}

/* ============================================================
   7. FORMS
   ============================================================ */

.form-control,
.form-select {
  font-family: var(--pk-font) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--pk-radius-sm) !important;
  font-size: 0.9rem !important;
  padding: 0.575rem 0.875rem !important;
  background-color: #fafafa !important;
  color: var(--pk-color-heading) !important;
  transition: border-color var(--pk-duration) var(--pk-ease),
              box-shadow var(--pk-duration) var(--pk-ease),
              background-color var(--pk-duration) var(--pk-ease) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pk-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--pk-rgb), 0.13) !important;
  background-color: #fff !important;
  outline: none !important;
}

.form-control-lg {
  padding: 0.7rem 1rem !important;
  font-size: 0.9375rem !important;
  border-radius: var(--pk-radius-sm) !important;
}

.form-label {
  font-family: var(--pk-font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: var(--pk-color-heading) !important;
  margin-bottom: 0.375rem !important;
}

.input-group-text {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: var(--pk-color-muted) !important;
  border-radius: 0 var(--pk-radius-sm) var(--pk-radius-sm) 0 !important;
}

.form-check-input:checked {
  background-color: var(--pk-500) !important;
  border-color: var(--pk-500) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--pk-rgb), 0.18) !important;
}

/* ============================================================
   8. BADGES
   ============================================================ */

.badge {
  font-family: var(--pk-font) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--pk-radius-xs) !important;
  padding: 0.3em 0.6em !important;
}

.bg-label-primary {
  background-color: rgba(var(--pk-rgb), 0.12) !important;
  color: var(--pk-700) !important;
}

.bg-primary { background-color: var(--pk-500) !important; }
.text-primary { color: var(--pk-600) !important; }
.border-primary { border-color: var(--pk-500) !important; }

/* ============================================================
   9. ALERTS
   ============================================================ */

.alert {
  border: none !important;
  border-radius: var(--pk-radius) !important;
  border-left: 3px solid transparent !important;
  font-size: 0.875rem !important;
}

.alert-danger  { border-left-color: #ef4444 !important; background: #fef2f2 !important; }
.alert-warning { border-left-color: #f59e0b !important; background: #fffbeb !important; }
.alert-success { border-left-color: var(--pk-500) !important; background: var(--pk-50) !important; }
.alert-info    { border-left-color: #3b82f6 !important; background: #eff6ff !important; }

/* ============================================================
   10. TABLES
   ============================================================ */

.table {
  font-family: var(--pk-font) !important;
  font-size: 0.875rem !important;
}

.table > thead > tr > th {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--pk-color-muted) !important;
  border-bottom-width: 1px !important;
  border-color: var(--pk-border) !important;
  padding: 0.75rem 1rem !important;
}

.table > tbody > tr > td {
  border-color: var(--pk-border) !important;
  padding: 0.875rem 1rem !important;
  vertical-align: middle;
}

/* ============================================================
   11. DROPDOWN MENUS
   ============================================================ */

/* Ensure language dropdown and menu items have high contrast and clear styling in both light and dark modes */
.dropdown-menu {
  background-color: var(--pk-card-bg, #111827) !important;
  border: 1px solid var(--pk-border, #1f2937) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: var(--pk-shadow-lg) !important;
  padding: 0.375rem !important;
  font-family: var(--pk-font) !important;
  font-size: 0.875rem !important;
}

.dropdown-item {
  border-radius: var(--pk-radius-sm) !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--pk-color-body, #e5e7eb) !important;
  transition: var(--pk-transition) !important;
  background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: var(--pk-50, rgba(34, 197, 94, 0.15)) !important;
  color: var(--pk-700, #4ade80) !important;
}

/* Specific styling for language dropdown inside navbar/auth forms */
.dropdown-menu .dropdown-item {
  color: var(--pk-color-body, #e5e7eb) !important;
}

.dropdown-menu .dropdown-item span {
  color: inherit !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover span,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active {
  background-color: var(--pk-50, rgba(34, 197, 94, 0.15)) !important;
  color: var(--pk-700, #4ade80) !important;
}

.dropdown-divider {
  border-color: var(--pk-border) !important;
  margin: 0.25rem 0 !important;
}

.dropdown-header {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--pk-color-muted) !important;
  padding: 0.5rem 0.75rem !important;
}

/* ============================================================
   12. PROGRESS BARS
   ============================================================ */

.progress {
  border-radius: 100px !important;
  background: #e5e7eb !important;
  height: 6px;
  overflow: visible;
}

.progress-bar {
  border-radius: 100px !important;
}

.progress-bar.bg-primary { background: var(--pk-500) !important; }

/* ============================================================
   13. AVATAR
   ============================================================ */

.avatar img {
  border: 2px solid var(--pk-border) !important;
}

/* ============================================================
   14. FOOTER
   ============================================================ */

.content-footer {
  background: transparent !important;
  border-top: 1px solid var(--pk-border) !important;
  font-size: 0.8125rem !important;
  color: var(--pk-color-muted) !important;
}

/* ============================================================
   15. SWIPER CARD (Dashboard analytics card)
   ============================================================ */

.swiper-card-advance-bg {
  background: linear-gradient(145deg, var(--pk-800) 0%, var(--pk-600) 100%) !important;
  border-radius: var(--pk-radius-lg) !important;
  border: none !important;
}

/* ============================================================
   16. PAGE CONTENT PADDING
   ============================================================ */

.container-xxl.container-p-y {
  padding-top: 1.75rem !important;
  padding-bottom: 2rem !important;
}

/* ============================================================
   17. AUTH PAGES — split-screen brand layout
   ============================================================ */

/* Wrapper */
.pk-auth-wrapper {
  min-height: 100vh;
  display: flex;
  background: #fff;
}

/* Brand panel (left) */
.pk-auth-brand {
  width: 45%;
  min-width: 380px;
  background: linear-gradient(155deg, #0a0f1a 0%, #0f1f2e 45%, #12223a 100%);
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.pk-auth-brand::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.14) 0%, transparent 68%);
  top: -140px;
  right: -80px;
  pointer-events: none;
}

.pk-auth-brand::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 68%);
  bottom: -80px;
  left: -60px;
  pointer-events: none;
}

.pk-auth-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 440px;
}

.pk-auth-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 3rem;
}

.pk-auth-logo-text {
  font-family: var(--pk-font);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: -0.02em;
}

.pk-auth-tagline {
  font-family: var(--pk-font);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 0.875rem;
}

.pk-auth-tagline .pk-accent { color: #86efac; }

.pk-auth-desc {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.65;
  margin-bottom: 2.5rem;
}

/* Feature list */
.pk-auth-features { list-style: none; padding: 0; margin: 0 0 2.5rem; }

.pk-auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.375rem;
}

.pk-auth-feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #86efac;
  font-size: 1.05rem;
}

.pk-auth-feat-title {
  font-weight: 600;
  color: #f1f5f9;
  font-size: 0.875rem;
  margin-bottom: 0.15rem;
}

.pk-auth-feat-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* Stats strip */
.pk-auth-stats {
  display: flex;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.09);
}

.pk-auth-stat-num {
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.pk-auth-stat-label {
  font-size: 0.775rem;
  color: rgba(255,255,255,0.42);
}

/* Form panel (right) */
.pk-auth-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  background: #fff;
}

.pk-auth-form-inner {
  width: 100%;
  max-width: 400px;
}

.pk-auth-form-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--pk-color-heading);
  letter-spacing: -0.025em;
  margin-bottom: 0.3rem;
}

.pk-auth-form-sub {
  font-size: 0.875rem;
  color: var(--pk-color-muted);
  margin-bottom: 0;
}

/* Language selector button with high contrast and refined borders */
.pk-lang-btn {
  font-size: 0.8125rem;
  color: var(--pk-color-body, #e5e7eb) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--pk-border, #1f2937);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.03);
  font-weight: 500;
  transition: var(--pk-transition);
}

.pk-lang-btn:hover {
  background-color: var(--pk-50, rgba(34, 197, 94, 0.15)) !important;
  color: var(--pk-700, #4ade80) !important;
  border-color: var(--pk-600, #22c55e) !important;
}

/* Auth links */
.pk-auth-footer {
  font-size: 0.8375rem;
  color: var(--pk-color-muted);
  text-align: center;
}

.pk-auth-footer a {
  color: var(--pk-600);
  font-weight: 600;
  text-decoration: none;
}

.pk-auth-footer a:hover { color: var(--pk-700); text-decoration: underline; }

/* Responsive: stack on mobile */
@media (max-width: 1199px) {
  .pk-auth-brand { display: none !important; }

  .pk-auth-form {
    background: var(--pk-body-bg);
    padding: 1.5rem 1rem;
  }

  .pk-auth-form-inner {
    background: #fff;
    border-radius: var(--pk-radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--pk-shadow-lg);
    max-width: 440px;
  }
}

/* ============================================================
   18. DASHBOARD — STAT CARDS
   ============================================================ */

/* KPI pill icon */
.pk-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.pk-kpi-icon.green  { background: rgba(var(--pk-rgb), 0.1);  color: var(--pk-600); }
.pk-kpi-icon.blue   { background: rgba(59,130,246,0.1);  color: #2563eb; }
.pk-kpi-icon.orange { background: rgba(245,158,11,0.1);  color: #d97706; }
.pk-kpi-icon.red    { background: rgba(239,68,68,0.1);   color: #dc2626; }
.pk-kpi-icon.purple { background: rgba(139,92,246,0.1);  color: #7c3aed; }
.pk-kpi-icon.teal   { background: rgba(20,184,166,0.1);  color: #0d9488; }

/* ============================================================
   19. SCROLLBAR (global)
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ============================================================
   20. SELECTION
   ============================================================ */

::selection {
  background-color: rgba(var(--pk-rgb), 0.18);
  color: var(--pk-800);
}

/* ============================================================
   21. FOCUS-VISIBLE (accessibility)
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--pk-500);
  outline-offset: 2px;
}

/* ============================================================
   22. ANIMATIONS
   ============================================================ */

@keyframes pk-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pk-fade-in { animation: pk-fade-in 0.3s var(--pk-ease) both; }

/* ============================================================
   23. NAV PILLS
   ============================================================ */

.nav-pills .nav-link {
  color: var(--pk-color-body) !important;
  border-radius: var(--pk-radius-sm) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.875rem !important;
  transition: var(--pk-transition) !important;
}

.nav-pills .nav-link:hover:not(.active) {
  background: var(--pk-50) !important;
  color: var(--pk-600) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: linear-gradient(135deg, var(--pk-500) 0%, var(--pk-600) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(var(--pk-rgb), 0.35) !important;
}

.nav-pills .nav-link .ti {
  font-size: 1rem;
}

/* ============================================================
   24. MODALS
   ============================================================ */

.modal-content {
  border: none !important;
  border-radius: var(--pk-radius-lg) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.16) !important;
}

.modal-header {
  border-bottom: 1px solid var(--pk-border) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-body { padding: 1.5rem !important; }

.modal-footer {
  border-top: 1px solid var(--pk-border) !important;
  padding: 1rem 1.5rem !important;
}

.modal-title {
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* ============================================================
   25. OFFCANVAS
   ============================================================ */

.offcanvas {
  border-left: 1px solid var(--pk-border) !important;
  box-shadow: -10px 0 40px rgba(0,0,0,0.1) !important;
}

.offcanvas-header {
  border-bottom: 1px solid var(--pk-border) !important;
  padding: 1.25rem 1.5rem !important;
}

.offcanvas-body { padding: 1.25rem 1.5rem !important; }

/* ============================================================
   26. LIST GROUP
   ============================================================ */

.list-group-item {
  border-color: var(--pk-border) !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.875rem !important;
  font-family: var(--pk-font) !important;
}

.list-group-flush .list-group-item:first-child { border-top: none !important; }
.list-group-flush .list-group-item:last-child  { border-bottom: none !important; }

/* ============================================================
   27. BOOTSTRAP TAGSINPUT — green override
   ============================================================ */

.bootstrap-tagsinput {
  border: 1px solid #d1d5db !important;
  border-radius: var(--pk-radius-sm) !important;
  background: #fafafa !important;
  box-shadow: none !important;
  transition: border-color var(--pk-duration) var(--pk-ease) !important;
}

.bootstrap-tagsinput:focus-within {
  border-color: var(--pk-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--pk-rgb), 0.13) !important;
  background: #fff !important;
}

.bootstrap-tagsinput .tag {
  background-color: var(--pk-500) !important;
  color: #fff !important;
  border-radius: var(--pk-radius-xs) !important;
  font-size: 0.75rem !important;
  font-family: var(--pk-font) !important;
  padding: 0.2rem 0.5rem !important;
  font-weight: 500 !important;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
  color: rgba(255,255,255,0.7) !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  color: #fff !important;
}

.bootstrap-tagsinput input {
  font-family: var(--pk-font) !important;
  font-size: 0.875rem !important;
  color: var(--pk-color-heading) !important;
}

/* ============================================================
   28. QR / CONNECT PAGES
   ============================================================ */

#qr-code-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 2px dashed var(--pk-border) !important;
  border-radius: var(--pk-radius-lg) !important;
  padding: 2rem !important;
  transition: border-color var(--pk-duration) var(--pk-ease) !important;
}

#qr-code-container.connected {
  border-color: rgba(var(--pk-rgb), 0.4) !important;
  background: rgba(var(--pk-rgb), 0.03) !important;
}

#qr-code-container img {
  border-radius: var(--pk-radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

#pairing-code-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 2px dashed var(--pk-border) !important;
  border-radius: var(--pk-radius-lg) !important;
  padding: 2rem !important;
  transition: border-color var(--pk-duration) var(--pk-ease) !important;
}

/* Pairing code chip */
.pk-pair-code {
  display: inline-block;
  background: var(--pk-50);
  border: 2px solid rgba(var(--pk-rgb), 0.25);
  border-radius: var(--pk-radius-lg);
  padding: 1rem 2rem;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: var(--pk-700);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ============================================================
   29. BREADCRUMB
   ============================================================ */

.breadcrumb {
  font-family: var(--pk-font) !important;
  font-size: 0.8375rem !important;
  margin-bottom: 1.25rem !important;
}

.breadcrumb-item a {
  color: var(--pk-color-muted) !important;
  text-decoration: none !important;
  transition: color var(--pk-duration) var(--pk-ease) !important;
}

.breadcrumb-item a:hover { color: var(--pk-600) !important; }

.breadcrumb-item.active {
  color: var(--pk-color-heading) !important;
  font-weight: 500 !important;
}

/* ============================================================
   30. BUTTON GROUP (radio toggles)
   ============================================================ */

.btn-group .btn-check:checked + .btn-outline-primary {
  background: var(--pk-500) !important;
  color: #fff !important;
  border-color: var(--pk-500) !important;
  box-shadow: 0 2px 8px rgba(var(--pk-rgb), 0.3) !important;
}

/* ============================================================
   31. PAGINATION
   ============================================================ */

.pagination .page-link {
  font-family: var(--pk-font) !important;
  font-size: 0.8375rem !important;
  color: var(--pk-color-muted) !important;
  border-color: var(--pk-border) !important;
  border-radius: var(--pk-radius-sm) !important;
  padding: 0.4rem 0.7rem !important;
  margin: 0 2px !important;
  transition: var(--pk-transition) !important;
}

.pagination .page-link:hover {
  background: var(--pk-50) !important;
  color: var(--pk-600) !important;
  border-color: rgba(var(--pk-rgb), 0.3) !important;
}

.pagination .page-item.active .page-link {
  background: var(--pk-500) !important;
  border-color: var(--pk-500) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--pk-rgb), 0.3) !important;
}

.pagination .page-item.disabled .page-link {
  color: #c4c9d4 !important;
}

/* ============================================================
   32. TABLE — hover row highlight
   ============================================================ */

.table-hover > tbody > tr:hover > td {
  background: rgba(var(--pk-rgb), 0.03) !important;
}

/* ============================================================
   33. FORM SWITCH (green)
   ============================================================ */

.form-switch .form-check-input {
  width: 2.25em !important;
  height: 1.25em !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--pk-500) !important;
  border-color: var(--pk-500) !important;
}

/* ============================================================
   34. INPUT GROUP — left radius fix
   ============================================================ */

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-radius: 0 var(--pk-radius-sm) var(--pk-radius-sm) 0 !important;
}

.input-group > .form-control:first-child,
.input-group > .form-select:first-child {
  border-radius: var(--pk-radius-sm) 0 0 var(--pk-radius-sm) !important;
}

.input-group > .input-group-text:first-child {
  border-radius: var(--pk-radius-sm) 0 0 var(--pk-radius-sm) !important;
}

.input-group > .input-group-text:last-child {
  border-radius: 0 var(--pk-radius-sm) var(--pk-radius-sm) 0 !important;
}

/* ============================================================
   35. SCHEDULE PAGE — datatable minimal style
   ============================================================ */

.pk-schedule-table .dataTables_wrapper .dataTables_filter input,
.pk-schedule-table .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-radius-sm) !important;
  font-family: var(--pk-font) !important;
  font-size: 0.875rem !important;
  padding: 0.4rem 0.7rem !important;
}

/* ============================================================
   36. SETTINGS PAGE — API key row
   ============================================================ */

.pk-api-key-row {
  background: var(--pk-50);
  border: 1px solid rgba(var(--pk-rgb), 0.15);
  border-radius: var(--pk-radius);
  padding: 1rem 1.25rem;
}

/* ============================================================
   37. STATUS PAGE / CONNECTION INDICATORS
   ============================================================ */

.pk-connection-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.pk-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--pk-rgb), 0.12);
  color: var(--pk-600);
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pk-connection-step p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pk-color-body);
  line-height: 1.4;
}

/* ============================================================
   38. NAV TABS
   ============================================================ */

.nav-tabs {
  border-bottom: 2px solid var(--pk-border) !important;
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  color: var(--pk-color-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.625rem 0.875rem !important;
  margin-bottom: -2px !important;
  transition: var(--pk-transition) !important;
}

.nav-tabs .nav-link:hover:not(.active) {
  color: var(--pk-color-heading) !important;
  border-bottom-color: var(--pk-border) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--pk-600) !important;
  border-bottom-color: var(--pk-500) !important;
  border-bottom-width: 2px !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ============================================================
   39. MISC UTILITIES
   ============================================================ */

.text-primary { color: var(--pk-600) !important; }
.bg-primary   { background-color: var(--pk-500) !important; }

.rounded-pk { border-radius: var(--pk-radius) !important; }
.rounded-pk-lg { border-radius: var(--pk-radius-lg) !important; }

.shadow-pk { box-shadow: var(--pk-shadow) !important; }
.shadow-pk-lg { box-shadow: var(--pk-shadow-lg) !important; }