/**
 * KachiTech Rebrand Pro 2025 — v3 Brand Edition
 *
 * Brand palette extracted from the KachiTech logo:
 *   Primary Blue  : #1B5CC4  (the bold "Kachitech" blue)
 *   Accent Amber  : #F5B300  (golden yellow-amber accent)
 *   Deep Navy     : #0D1B35  (dark background anchor)
 *
 * Rules:
 *  1. NEVER override body.kachi-frontend-body background (kachi-global-polish.css owns it)
 *  2. NEVER override body.kachi-dashboard-body background (transparent by design)
 *  3. NEVER use opacity:0 on wow/animated elements (breaks content visibility)
 *  4. Body-class scope everything — no bare globals that smash the front page
 */

/* ============================================================
   1. BRAND TOKEN SYSTEM
   ============================================================ */
:root {
  /* ── Primary brand blue (from logo) ── */
  --kr-blue:          #1B5CC4;
  --kr-blue-dark:     #0F3D8A;
  --kr-blue-mid:      #2470D4;
  --kr-blue-light:    #4A8FE8;
  --kr-blue-pale:     #D6E6FA;
  --kr-blue-ghost:    rgba(27, 92, 196, 0.10);
  --kr-blue-glow:     rgba(27, 92, 196, 0.28);

  /* ── Accent amber/yellow-orange ── */
  --kr-orange:        #F5B300;
  --kr-orange-dark:   #CC9400;
  --kr-orange-light:  #FAD35A;
  --kr-orange-pale:   #FFF8DC;
  --kr-orange-ghost:  rgba(245, 179, 0, 0.10);

  /* ── Deep navy sidebar/dark surfaces ── */
  --kr-navy:          #0D1B35;
  --kr-navy-mid:      #142B5F;
  --kr-navy-light:    #1E407A;

  /* ── Complementary palette (must blend with blue+orange) ── */
  --kr-teal:          #0891B2;   /* cool teal — complement to blue */
  --kr-teal-light:    #22D3EE;
  --kr-emerald:       #059669;   /* success green */
  --kr-emerald-light: #34D399;
  --kr-amber:         #D97706;   /* warm amber warning */
  --kr-amber-light:   #FCD34D;
  --kr-danger:        #DC2626;   /* error/danger only */

  /* ── Gradients ── */
  --kr-grad-primary:   linear-gradient(135deg, #1B5CC4 0%, #2470D4 100%);
  --kr-grad-primary-deep: linear-gradient(135deg, #0F3D8A 0%, #1B5CC4 100%);
  --kr-grad-orange:    linear-gradient(135deg, #F5B300 0%, #CC9400 100%);
  --kr-grad-teal:      linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
  --kr-grad-emerald:   linear-gradient(135deg, #059669 0%, #047857 100%);
  --kr-grad-sidebar:   linear-gradient(168deg, #0D1B35 0%, #142B5F 45%, #0A1528 100%);
  --kr-grad-hero:      linear-gradient(135deg, #0D1B35 0%, #142B5F 50%, #1B5CC4 100%);

  /* ── Shadows ── */
  --kr-shadow-sm:      0 4px 14px rgba(13, 27, 53, 0.07);
  --kr-shadow-md:      0 10px 28px rgba(13, 27, 53, 0.11);
  --kr-shadow-lg:      0 24px 60px rgba(13, 27, 53, 0.16);
  --kr-shadow-primary: 0 8px 22px rgba(27, 92, 196, 0.32);
  --kr-shadow-orange:  0 8px 22px rgba(245, 179, 0, 0.28);

  /* ── Easing ── */
  --kr-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --kr-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Radii ── */
  --kr-r-sm: 8px;
  --kr-r-md: 12px;
  --kr-r-lg: 18px;

  /* ── Pastel icon pill backgrounds for stat cards ── */
  --kr-pill-blue:    rgba(27, 92, 196, 0.11);
  --kr-pill-orange:  rgba(245, 179, 0, 0.11);
  --kr-pill-teal:    rgba(8, 145, 178, 0.11);
  --kr-pill-emerald: rgba(5, 150, 105, 0.11);
  --kr-pill-amber:   rgba(217, 119, 6, 0.11);
}

/* ============================================================
   2. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes kr-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kr-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes kr-pop-in {
  0%   { opacity: 0; transform: scale(0.88); }
  65%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kr-shine {
  from { transform: translateX(-130%) skewX(-16deg); }
  to   { transform: translateX(220%) skewX(-16deg); }
}
@keyframes kr-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--kr-blue-glow); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}
@keyframes kr-brand-drift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  50%  { background-position: 6% 5%, 94% 7%, 47% 95%, 0 0; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
}

/* ============================================================
   3. GLOBAL RENDERING + BASE
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; }

/* ── Brand scrollbar ── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(27, 92, 196, 0.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27, 92, 196, 0.50); }

/* ── Focus ring: brand blue ── */
:focus-visible {
  outline: 2px solid var(--kr-blue) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   4. BUTTONS — flat solid brand colors, no gradients
   ============================================================ */

/* ── Universal de-gradient: strip linear-gradient from ALL btn elements ── */
[class*="btn"]:not([class*="outline"]):not([class*="link"]):not([class*="close"]):not(.btn-check) {
  background-image: none !important;
}

.btn--base:not([class*="outline"]):not([class*="light"]),
.btn--primary {
  background: #1B5CC4 !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--kr-shadow-primary) !important;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s, background 0.2s !important;
}
.btn--base:not([class*="outline"]):not([class*="light"]):hover,
.btn--primary:hover {
  background: #0F3D8A !important;
  background-image: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(27, 92, 196, 0.40) !important;
}

/* Orange / amber CTA buttons */
.btn--base-3,
.btn--warning {
  background: #F5B300 !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--kr-shadow-orange) !important;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s, background 0.2s !important;
}
.btn--base-3:hover,
.btn--warning:hover {
  background: #CC9400 !important;
  background-image: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(245, 179, 0, 0.38) !important;
}

.btn-outline--base {
  border: 2px solid var(--kr-blue) !important;
  color: var(--kr-blue) !important;
  background: transparent !important;
  background-image: none !important;
  transition: all 0.2s var(--kr-ease) !important;
}
.btn-outline--base:hover {
  background: #1B5CC4 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--kr-shadow-primary) !important;
}

/* ============================================================
   5. FORM INPUTS — Universal Readability
   Ensures text inputs are never hidden by a dark container.
   Grey text on dark blue backgrounds is eliminated here.
   ============================================================ */

/* ── Base: admin shell inputs ── */
.kachi-admin-shell .form-control,
.kachi-admin-shell .form-select,
.kachi-admin-shell .form--control,
.kachi-admin-shell input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.kachi-admin-shell select,
.kachi-admin-shell textarea,
.kachi-admin-shell .select2-container--default .select2-selection--single,
.kachi-admin-shell .select2-container--default .select2-selection--multiple,
.kachi-admin-shell .select2-selection__rendered {
  color: #0D1B35 !important;
  background-color: #ffffff !important;
  border-color: rgba(27, 92, 196, 0.15) !important;
}

/* ── Base: dashboard shell inputs ── */
.kachi-dashboard-shell .form-control,
.kachi-dashboard-shell .form-select,
.kachi-dashboard-shell .form--control,
.kachi-dashboard-shell input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.kachi-dashboard-shell select,
.kachi-dashboard-shell textarea,
.kachi-dashboard-shell .select2-container--default .select2-selection--single,
.kachi-dashboard-shell .select2-container--default .select2-selection--multiple,
.kachi-dashboard-shell .select2-selection__rendered {
  color: #0D1B35 !important;
  background-color: #ffffff !important;
  border-color: rgba(27, 92, 196, 0.15) !important;
}

/* ── Input-group addons (icon prefix/suffix) ── */
.kachi-admin-shell .input-group-text,
.kachi-dashboard-shell .input-group-text {
  color: #1B5CC4 !important;
  background-color: #EEF4FF !important;
  border-color: rgba(27, 92, 196, 0.15) !important;
}

/* ── Labels & form help text ── */
.kachi-admin-shell label,
.kachi-admin-shell .form-label,
.kachi-admin-shell .form-text,
.kachi-admin-shell small.text-muted,
.kachi-dashboard-shell label,
.kachi-dashboard-shell .form-label,
.kachi-dashboard-shell .form-text,
.kachi-dashboard-shell small.text-muted {
  color: #0D1B35 !important;
}

/* ── Placeholders — readable on white background ── */
.kachi-admin-shell ::placeholder,
.kachi-dashboard-shell ::placeholder {
  color: #7A90AE !important;
  opacity: 1 !important;
}

/* ── Select2 custom dropdown text ── */
.kachi-admin-shell .select2-container--default .select2-results__option,
.kachi-admin-shell .select2-container--default .select2-results,
.kachi-admin-shell .select2-dropdown,
.kachi-dashboard-shell .select2-container--default .select2-results__option,
.kachi-dashboard-shell .select2-container--default .select2-results,
.kachi-dashboard-shell .select2-dropdown {
  color: #0D1B35 !important;
  background-color: #ffffff !important;
}
.kachi-admin-shell .select2-container--default .select2-results__option--highlighted,
.kachi-dashboard-shell .select2-container--default .select2-results__option--highlighted {
  background-color: #EEF4FF !important;
  color: #1B5CC4 !important;
}

/* ── Frontend public pages: inputs on any background ── */
body.kachi-frontend-body .form-control,
body.kachi-frontend-body .form-select,
body.kachi-frontend-body .form--control,
body.kachi-frontend-body input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
  color: #0D1B35 !important;
  background-color: #ffffff !important;
}
body.kachi-frontend-body ::placeholder {
  color: #7A90AE !important;
  opacity: 1 !important;
}

/* ── Exception: newsletter footer inputs are dark-designed — restore ── */
body.kachi-frontend-body .workspace-footer input[type="email"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.kachi-frontend-body .workspace-footer input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* ── FOCUS rings — brand blue ── */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--kr-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 92, 196, 0.15) !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

/* ============================================================
   6. TABLE — brand-tinted row hover
   ============================================================ */
.table tbody tr { transition: background 0.16s !important; }
.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: rgba(27, 92, 196, 0.04) !important;
}
.table thead th {
  background: linear-gradient(180deg, #EEF4FF, #E4EEFC) !important;
  color: #0D1B35 !important;
  border-bottom: 2px solid rgba(27, 92, 196, 0.20) !important;
}

/* ============================================================
   7. MODALS — rounded brand style
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: var(--kr-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #EEF4FF, #F5F9FF) !important;
  border-bottom: 1px solid rgba(27, 92, 196, 0.10) !important;
}
.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid rgba(27, 92, 196, 0.08) !important;
}
.modal-title { font-weight: 800 !important; color: var(--kr-navy) !important; }

/* ============================================================
   8. ALERTS — brand slide-in
   ============================================================ */
.alert {
  border-radius: var(--kr-r-md) !important;
  animation: kr-slide-in 0.35s var(--kr-ease) both;
}

/* ============================================================
   9. BADGES — brand palette
   ============================================================ */
.badge--primary,
.badge.bg-primary { background: var(--kr-blue) !important; }
.badge--success,
.badge.bg-success  { background: var(--kr-emerald) !important; }
.badge--warning,
.badge.bg-warning  { background: var(--kr-orange) !important; color: #fff !important; }
.badge--danger,
.badge.bg-danger   { background: var(--kr-danger) !important; }
.badge--info,
.badge.bg-info     { background: var(--kr-teal) !important; }

/* ============================================================
   10. FRONTEND / PUBLIC PAGES
   NOTE: body.kachi-frontend-body background NOT touched —
         kachi-global-polish.css owns the sand/cream backdrop.
   ============================================================ */

/* Nav link underline animation */
.workspace-menu a {
  position: relative;
  transition: color 0.2s var(--kr-ease) !important;
}
.workspace-menu a::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--kr-grad-primary);
  border-radius: 2px;
  transition: width 0.28s var(--kr-ease);
}
.workspace-menu a:hover::after,
.workspace-menu a.active::after { width: 100%; }
.workspace-menu a:hover,
.workspace-menu a.active { color: var(--kr-blue) !important; }

/* Auth / CTA button */
a.workspace-auth,
.workspace-auth {
  background: var(--kr-grad-primary) !important;
  color: #fff !important;
  border-radius: var(--kr-r-sm) !important;
  padding: 7px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
a.workspace-auth:hover,
.workspace-auth:hover {
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--kr-shadow-primary) !important;
  text-decoration: none !important;
}

/* Dark mode toggle */
.workspace-mode-toggle {
  background: var(--kr-blue-ghost) !important;
  border: 1px solid rgba(27, 92, 196, 0.18) !important;
  color: var(--kr-blue) !important;
  border-radius: var(--kr-r-sm) !important;
  transition: all 0.2s !important;
}
.workspace-mode-toggle:hover {
  background: var(--kr-blue) !important;
  color: #fff !important;
}

/* Inner canvas fade in */
.kachi-frontend-inner-canvas { animation: kr-fade-in 0.4s var(--kr-ease) both; }

/* Course card hover lift */
.course-item, .course-card {
  transition: transform 0.28s var(--kr-ease), box-shadow 0.28s !important;
  will-change: transform;
}
.course-item:hover, .course-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(13, 27, 53, 0.13) !important;
}

/* Category card */
.category-card {
  transition: transform 0.26s var(--kr-ease), box-shadow 0.26s !important;
}
.category-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 28px var(--kr-blue-ghost) !important;
}

/* Section title brand underline */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 0;
  width: 40px; height: 3px;
  background: var(--kr-grad-primary);
  border-radius: 2px;
}

/* ============================================================
   11. ADMIN PANEL — full brand rebrand
   ============================================================ */

/* 11a. Admin body frame: soft brand-blue-tinted canvas */
body.kachi-admin-body {
  background:
    radial-gradient(ellipse 70% 55% at  3%  4%,  rgba(27, 92, 196, 0.16), transparent 42%),
    radial-gradient(ellipse 62% 48% at 96%  6%,  rgba(245, 179, 0, 0.09), transparent 40%),
    radial-gradient(ellipse 55% 42% at 65% 96%,  rgba(8, 145, 178, 0.07), transparent 36%),
    linear-gradient(150deg, #EEF4FF 0%, #F0F5FF 50%, #EBF2FF 100%) !important;
  background-attachment: fixed !important;
}

/* 11b. Admin sidebar: deep brand navy */
body.kachi-admin-body .sidebar,
body.kachi-admin-body .kachi-admin-shell .sidebar {
  background:
    radial-gradient(ellipse 120% 60% at 14% 3%,  rgba(27, 92, 196, 0.32), transparent 52%),
    radial-gradient(ellipse  90% 48% at 88% 96%, rgba(245, 179, 0, 0.12), transparent 44%),
    var(--kr-grad-sidebar) !important;
  animation: none !important;
  border-right: 1px solid rgba(27, 92, 196, 0.20) !important;
  box-shadow: 14px 0 48px rgba(13, 27, 53, 0.32) !important;
}
/* Same override for kachi-admin-visual-refine which clobbers to near-black */
body.kachi-admin-body .kachi-admin-shell .sidebar {
  background:
    radial-gradient(ellipse 120% 60% at 14% 3%,  rgba(27, 92, 196, 0.32), transparent 52%),
    radial-gradient(ellipse  90% 48% at 88% 96%, rgba(245, 179, 0, 0.12), transparent 44%),
    var(--kr-grad-sidebar) !important;
  animation: none !important;
}

/* 11c. Sidebar active/hover: brand blue bar */
body.kachi-admin-body .sidebar__menu .sidebar-menu-item > a:hover,
body.kachi-admin-body .sidebar__menu .sidebar-menu-item .side-menu--open,
body.kachi-admin-body .sidebar__menu .sidebar-menu-item.active > a,
body.kachi-admin-body .kachi-admin-shell .sidebar__menu .sidebar-menu-item > a:hover,
body.kachi-admin-body .kachi-admin-shell .sidebar__menu .sidebar-menu-item .side-menu--open,
body.kachi-admin-body .kachi-admin-shell .sidebar__menu .sidebar-menu-item.active > a {
  background: linear-gradient(90deg, rgba(27, 92, 196, 0.78), rgba(36, 112, 212, 0.60)) !important;
  border-left: 3px solid var(--kr-blue-light) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 6px 18px rgba(27, 92, 196, 0.20) !important;
  color: #fff !important;
}

/* 11d. Sidebar icon pill */
body.kachi-admin-body .sidebar__menu .menu-icon {
  background: rgba(74, 143, 232, 0.18) !important;
  border: 1px solid rgba(74, 143, 232, 0.24) !important;
  color: #fff !important;
  transition: background 0.2s, transform 0.2s !important;
}
body.kachi-admin-body .sidebar__menu .sidebar-menu-item > a:hover .menu-icon,
body.kachi-admin-body .sidebar__menu .sidebar-menu-item.active > a .menu-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(1.06) !important;
}

/* 11e. Admin navbar: glass with brand border tint */
body.kachi-admin-body .navbar-wrapper,
body.kachi-admin-body .kachi-admin-shell .navbar-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(27, 92, 196, 0.12) !important;
  box-shadow: 0 4px 18px rgba(13, 27, 53, 0.08) !important;
}
body.kachi-admin-body .navbar__right button i,
body.kachi-admin-body .kachi-admin-shell .navbar__right button i {
  color: var(--kr-blue) !important;
}
body.kachi-admin-body .navbar-user__thumb img {
  border: 2px solid var(--kr-blue-light) !important;
  box-shadow: 0 4px 12px var(--kr-blue-ghost) !important;
}

/* 11f. Breadcrumb bar */
body.kachi-admin-body .breadcrumb-wrapper,
body.kachi-admin-body .kachi-admin-shell .breadcrumb-wrapper {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(27, 92, 196, 0.08) !important;
}

/* 11g. Inner workspace: clean white */
body.kachi-admin-body .bodywrapper__inner {
  background: rgba(255, 255, 255, 0.97) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 14px rgba(13, 27, 53, 0.05) !important;
}

/* 11h. Admin cards: brand hover lift */
body.kachi-admin-body .card {
  border-radius: 12px !important;
  border: 1px solid rgba(27, 92, 196, 0.08) !important;
  transition: transform 0.24s var(--kr-ease), box-shadow 0.24s !important;
}
body.kachi-admin-body .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(27, 92, 196, 0.12) !important;
}

/* 11i. Stat widget icons — brand cycling colours */
body.kachi-admin-body .col-sm-4:nth-child(1) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(1) .dashboard-widget__icon { color: var(--kr-blue)    !important; }
body.kachi-admin-body .col-sm-4:nth-child(2) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(2) .dashboard-widget__icon { color: var(--kr-orange)  !important; }
body.kachi-admin-body .col-sm-4:nth-child(3) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(3) .dashboard-widget__icon { color: var(--kr-teal)    !important; }
body.kachi-admin-body .col-sm-4:nth-child(4) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(4) .dashboard-widget__icon { color: var(--kr-emerald) !important; }
body.kachi-admin-body .col-sm-4:nth-child(5) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(5) .dashboard-widget__icon { color: var(--kr-amber)   !important; }
body.kachi-admin-body .col-sm-4:nth-child(6) .dashboard-widget__icon,
body.kachi-admin-body .col-xxl-4:nth-child(6) .dashboard-widget__icon { color: var(--kr-blue-mid)!important; }

/* 11j. Admin stat number pop */
body.kachi-admin-body .dashboard-widget h5 {
  animation: kr-pop-in 0.45s var(--kr-spring) 0.3s both;
  color: var(--kr-navy) !important;
}

/* 11k. Admin hero / page-summary */
body.kachi-admin-body .kachi-admin-page-summary,
body.kachi-admin-body .kachi-admin-hero {
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(238,244,255,0.98)) !important;
  border: 1px solid rgba(27, 92, 196, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 28px rgba(27, 92, 196, 0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
body.kachi-admin-body .kachi-admin-page-summary::before,
body.kachi-admin-body .kachi-admin-hero::before {
  background: linear-gradient(90deg, var(--kr-navy), var(--kr-blue), var(--kr-orange)) !important;
}
body.kachi-admin-body .kachi-admin-hero__stats strong,
body.kachi-admin-body .kachi-admin-shell .kachi-admin-hero__stats strong {
  background: linear-gradient(90deg, var(--kr-blue-dark), var(--kr-blue-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.kachi-admin-body .kachi-admin-page-summary span,
body.kachi-admin-body .kachi-admin-hero__copy span {
  color: var(--kr-blue-dark) !important;
  background: linear-gradient(135deg, var(--kr-blue-pale), rgba(255,255,255,0.95)) !important;
  border: 1px solid rgba(27, 92, 196, 0.22) !important;
}

/* 11l. Tab strips: brand blue active */
body.kachi-admin-body .bodywrapper__inner .nav.nav-tabs {
  background: linear-gradient(180deg, rgba(27, 92, 196, 0.07), rgba(255,255,255,0.65)) !important;
  border: 1px solid rgba(27, 92, 196, 0.12) !important;
  border-radius: 12px !important;
}
body.kachi-admin-body .bodywrapper__inner .nav.nav-tabs .nav-link:hover {
  color: var(--kr-blue) !important;
}
body.kachi-admin-body .bodywrapper__inner .nav.nav-tabs .nav-link.active {
  box-shadow: 0 -2px 0 var(--kr-blue) inset !important;
}

/* 11m. Dashboard entrance animation */
body.kachi-admin-body .kachi-admin-dash > * { animation: kr-rise 0.5s var(--kr-ease) both; }
body.kachi-admin-body .kachi-admin-dash > *:nth-child(1) { animation-delay: 0.04s; }
body.kachi-admin-body .kachi-admin-dash > *:nth-child(2) { animation-delay: 0.10s; }
body.kachi-admin-body .kachi-admin-dash > *:nth-child(3) { animation-delay: 0.18s; }
body.kachi-admin-body .kachi-admin-dash > *:nth-child(4) { animation-delay: 0.26s; }
body.kachi-admin-body .kachi-admin-dash > *:nth-child(5) { animation-delay: 0.34s; }

/* ============================================================
   12. STUDENT & INSTRUCTOR DASHBOARDS
   NOTE: body.kachi-dashboard-body background is transparent —
         kachi-global-polish.css owns it. DO NOT override.
   ============================================================ */

/* 12a. Dashboard shell: crisp white with brand shadow */
body.kachi-dashboard-body .kachi-dashboard-shell.dashboard {
  background: #ffffff !important;
  border: 1px solid rgba(27, 92, 196, 0.10) !important;
  box-shadow: 0 32px 80px rgba(13, 27, 53, 0.14) !important;
}

/* 12b. Dashboard sidebar: brand navy */
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu {
  background:
    radial-gradient(ellipse 120% 60% at 14% 3%,  rgba(27, 92, 196, 0.32), transparent 52%),
    radial-gradient(ellipse  90% 48% at 88% 96%, rgba(245, 179, 0, 0.12), transparent 44%),
    var(--kr-grad-sidebar) !important;
  animation: none !important;
}

/* 12c. Dashboard sidebar active link */
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__link:hover,
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__link.active,
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item.has-dropdown.active > a {
  background: linear-gradient(90deg, rgba(27, 92, 196, 0.78), rgba(36, 112, 212, 0.58)) !important;
  border-left: 3px solid var(--kr-blue-light) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 6px 18px rgba(27, 92, 196, 0.20) !important;
  color: #fff !important;
}

/* 12d. Sidebar icon pill */
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__link .icon {
  background: rgba(74, 143, 232, 0.18) !important;
  color: #fff !important;
}

/* 12e. Stat cards: brand accent left bar + pastel icon pill */
body.kachi-dashboard-body .col-xxl-3:nth-child(1) .dashboard-card,
body.kachi-dashboard-body .col-xl-6:nth-child(1) .dashboard-card,
body.kachi-dashboard-body .col-sm-6:nth-child(1) .dashboard-card { border-left: 4px solid var(--kr-blue)    !important; }
body.kachi-dashboard-body .col-xxl-3:nth-child(2) .dashboard-card,
body.kachi-dashboard-body .col-xl-6:nth-child(2) .dashboard-card,
body.kachi-dashboard-body .col-sm-6:nth-child(2) .dashboard-card { border-left: 4px solid var(--kr-orange)  !important; }
body.kachi-dashboard-body .col-xxl-3:nth-child(3) .dashboard-card,
body.kachi-dashboard-body .col-xl-6:nth-child(3) .dashboard-card,
body.kachi-dashboard-body .col-sm-6:nth-child(3) .dashboard-card { border-left: 4px solid var(--kr-teal)    !important; }
body.kachi-dashboard-body .col-xxl-3:nth-child(4) .dashboard-card,
body.kachi-dashboard-body .col-xl-6:nth-child(4) .dashboard-card,
body.kachi-dashboard-body .col-sm-6:nth-child(4) .dashboard-card { border-left: 4px solid var(--kr-emerald) !important; }

/* Stat icon colour + pastel pill */
body.kachi-dashboard-body .col-xxl-3:nth-child(1) .dashboard-card__icon {
  color: var(--kr-blue) !important;
  background: var(--kr-pill-blue) !important;
  border-radius: 10px !important; padding: 10px !important;
}
body.kachi-dashboard-body .col-xxl-3:nth-child(2) .dashboard-card__icon {
  color: var(--kr-orange) !important;
  background: var(--kr-pill-orange) !important;
  border-radius: 10px !important; padding: 10px !important;
}
body.kachi-dashboard-body .col-xxl-3:nth-child(3) .dashboard-card__icon {
  color: var(--kr-teal) !important;
  background: var(--kr-pill-teal) !important;
  border-radius: 10px !important; padding: 10px !important;
}
body.kachi-dashboard-body .col-xxl-3:nth-child(4) .dashboard-card__icon {
  color: var(--kr-emerald) !important;
  background: var(--kr-pill-emerald) !important;
  border-radius: 10px !important; padding: 10px !important;
}

/* Stat card hover lift */
body.kachi-dashboard-body .dashboard-card {
  border-radius: 14px !important;
  transition: transform 0.26s var(--kr-ease), box-shadow 0.26s !important;
}
body.kachi-dashboard-body .dashboard-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px rgba(13, 27, 53, 0.11) !important;
}
body.kachi-dashboard-body .dashboard-card__amount {
  animation: kr-pop-in 0.45s var(--kr-spring) 0.28s both;
  color: var(--kr-navy) !important;
}

/* 12f. Welcome hero box: brand navy-to-blue gradient + shine */
body.kachi-dashboard-body .dash-box {
  background: var(--kr-grad-hero) !important;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--kr-orange) !important;
}
body.kachi-dashboard-body .dash-box::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -25%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  animation: kr-shine 9s ease-in-out 1.2s infinite;
  pointer-events: none;
  z-index: 0;
}
body.kachi-dashboard-body .dash-box > * { position: relative; z-index: 1; }
body.kachi-dashboard-body .dash-box h2,
body.kachi-dashboard-body .dash-box h2 span { color: #f0f6ff !important; }

/* 12g. Page summary strip */
body.kachi-dashboard-body .kachi-dashboard-summary {
  background: var(--kr-grad-hero) !important;
  border-radius: 14px !important;
  box-shadow: var(--kr-shadow-md) !important;
  border-top: 3px solid var(--kr-orange) !important;
  position: relative;
  overflow: hidden;
}

/* 12h. Chart containers */
body.kachi-dashboard-body .chart-bg {
  background: #fff !important;
  border: 1px solid rgba(27, 92, 196, 0.10) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: var(--kr-shadow-sm) !important;
}

/* 12i. Discover box */
body.kachi-dashboard-body .discover-box {
  background: linear-gradient(135deg, rgba(27, 92, 196, 0.06), rgba(8, 145, 178, 0.04)) !important;
  border: 1px solid rgba(27, 92, 196, 0.12) !important;
  border-radius: var(--kr-r-md) !important;
  animation: kr-fade-in 0.4s var(--kr-ease) both;
}
body.kachi-dashboard-body .discover-box .btn--base-3 {
  animation: kr-glow-pulse 3.5s ease-in-out 2s infinite;
}

/* 12j. Content entrance */
body.kachi-dashboard-body .kachi-dashboard-content > * { animation: kr-rise 0.46s var(--kr-ease) both; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(1) { animation-delay: 0.03s; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(2) { animation-delay: 0.09s; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(3) { animation-delay: 0.16s; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(4) { animation-delay: 0.23s; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(5) { animation-delay: 0.30s; }
body.kachi-dashboard-body .kachi-dashboard-content > *:nth-child(6) { animation-delay: 0.37s; }

/* 12k. Sidebar nav slide-in */
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item { animation: kr-slide-in 0.38s var(--kr-ease) both; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(1)  { animation-delay: 0.03s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(2)  { animation-delay: 0.07s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(3)  { animation-delay: 0.11s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(4)  { animation-delay: 0.15s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(5)  { animation-delay: 0.19s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(6)  { animation-delay: 0.23s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(7)  { animation-delay: 0.27s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(8)  { animation-delay: 0.31s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(9)  { animation-delay: 0.35s; }
body.kachi-dashboard-body .kachi-dashboard-shell .sidebar-menu-list__item:nth-child(10) { animation-delay: 0.39s; }

/* ============================================================
   13. ATTENDANCE NUDGE BAR
   ============================================================ */
.kachi-attendance-nudge {
  background: linear-gradient(135deg, rgba(27, 92, 196, 0.06), rgba(8, 145, 178, 0.04)) !important;
  border: 1px solid rgba(27, 92, 196, 0.15) !important;
  border-left: 4px solid var(--kr-blue) !important;
  border-radius: var(--kr-r-md) !important;
  animation: kr-rise 0.4s var(--kr-ease) both;
}
.kachi-attendance-nudge__btn {
  background: #1B5CC4 !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s, background 0.2s !important;
}
.kachi-attendance-nudge__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--kr-shadow-primary) !important;
}

/* ============================================================
   14. INSTRUCTOR SESSION HERO
   ============================================================ */
.kachi-ins-session-hero__inner {
  background: var(--kr-grad-hero) !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: var(--kr-shadow-md) !important;
  border-top: 3px solid var(--kr-orange) !important;
  position: relative;
  overflow: hidden;
}
.kachi-ins-session-hero__btn {
  background: #F5B300 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kr-r-sm) !important;
  font-weight: 700 !important;
  box-shadow: var(--kr-shadow-orange) !important;
  transition: transform 0.2s var(--kr-ease), box-shadow 0.2s, background 0.2s !important;
}
.kachi-ins-session-hero__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(245, 179, 0, 0.40) !important;
}
.kachi-ins-session-hero__badge {
  background: rgba(74, 143, 232, 0.16) !important;
  color: #d0e4ff !important;
  border: 1px solid rgba(74, 143, 232, 0.28) !important;
}
.kachi-ins-session-hero__stat-num { color: var(--kr-blue-light) !important; font-weight: 900 !important; }

/* ============================================================
   15. COURSE CARD — brand online/physical type tags
   ============================================================ */
.kachi-course-card--online   { border-top: 3px solid var(--kr-blue) !important; }
.kachi-course-card--physical { border-top: 3px solid var(--kr-emerald) !important; }

.kachi-class-type-badge--online {
  background: rgba(27, 92, 196, 0.11) !important;
  border: 1px solid rgba(27, 92, 196, 0.22) !important;
  color: var(--kr-blue-dark) !important;
}
.kachi-class-type-badge--physical {
  background: rgba(5, 150, 105, 0.11) !important;
  border: 1px solid rgba(5, 150, 105, 0.22) !important;
  color: var(--kr-emerald) !important;
}

.kachi-commission-row--online > td { background: rgba(27, 92, 196, 0.04) !important; }
.kachi-commission-row--online > td:first-child { box-shadow: inset 3px 0 0 var(--kr-blue) !important; }
.kachi-commission-row--physical > td { background: rgba(5, 150, 105, 0.04) !important; }
.kachi-commission-row--physical > td:first-child { box-shadow: inset 3px 0 0 var(--kr-emerald) !important; }

/* ============================================================
   16. PRELOADER — brand navy-to-blue
   ============================================================ */
#loading {
  background: linear-gradient(135deg, var(--kr-navy), var(--kr-navy-mid), var(--kr-blue-dark)) !important;
  z-index: 99999;
}

/* ============================================================
   17. DARK MODE ADJUSTMENTS
   ============================================================ */
body.kachi-dark-mode {
  --kr-blue:       #4A8FE8;
  --kr-blue-light: #7DB4F5;
  --kr-orange:     #FAD35A;
  --kr-teal:       #22D3EE;
  --kr-emerald:    #34D399;
  --kr-amber:      #FCD34D;
}
body.kachi-dark-mode .workspace-auth {
  background: linear-gradient(135deg, #0F3D8A, #1B5CC4) !important;
}
body.kachi-dark-mode .workspace-menu a:hover,
body.kachi-dark-mode .workspace-menu a.active {
  color: #7DB4F5 !important;
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body.kachi-dashboard-body .kachi-dashboard-page.dashboard-section { padding: 12px !important; }
}

/* ============================================================
   19. SIDEBAR ICONS — Colorful + Animated
   7-color cycling palette across all three shells
   (admin · student · instructor)
   ============================================================ */

/* ── Keyframes ── */
@keyframes kr-icon-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-3px); }
}
@keyframes kr-icon-spin-pop {
  0%   { transform: scale(1)    rotate(0deg);   }
  35%  { transform: scale(1.18) rotate(-12deg); }
  65%  { transform: scale(1.14) rotate(8deg);   }
  100% { transform: scale(1)    rotate(0deg);   }
}
@keyframes kr-icon-glow-blue {
  0%, 100% { box-shadow: 0 0 0 0   rgba(27, 92, 196, 0);   }
  50%       { box-shadow: 0 0 12px 4px rgba(27, 92, 196, 0.42); }
}
@keyframes kr-icon-glow-amber {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245, 179, 0, 0);    }
  50%       { box-shadow: 0 0 12px 4px rgba(245, 179, 0, 0.45); }
}
@keyframes kr-icon-glow-teal {
  0%, 100% { box-shadow: 0 0 0 0   rgba(8, 145, 178, 0);    }
  50%       { box-shadow: 0 0 12px 4px rgba(8, 145, 178, 0.42); }
}
@keyframes kr-icon-glow-emerald {
  0%, 100% { box-shadow: 0 0 0 0   rgba(5, 150, 105, 0);    }
  50%       { box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.40); }
}
@keyframes kr-icon-glow-purple {
  0%, 100% { box-shadow: 0 0 0 0   rgba(124, 58, 237, 0);   }
  50%       { box-shadow: 0 0 12px 4px rgba(124, 58, 237, 0.38); }
}
@keyframes kr-icon-glow-rose {
  0%, 100% { box-shadow: 0 0 0 0   rgba(225, 29, 72, 0);    }
  50%       { box-shadow: 0 0 12px 4px rgba(225, 29, 72, 0.36); }
}
@keyframes kr-icon-glow-sky {
  0%, 100% { box-shadow: 0 0 0 0   rgba(2, 132, 199, 0);    }
  50%       { box-shadow: 0 0 12px 4px rgba(2, 132, 199, 0.40); }
}

/* ── Color palette for the 7-slot cycle ── */
:root {
  --kr-icon-1-bg:   linear-gradient(135deg, #1B5CC4 0%, #2470D4 100%);
  --kr-icon-1-glow: kr-icon-glow-blue;
  --kr-icon-2-bg:   linear-gradient(135deg, #F5B300 0%, #CC9400 100%);
  --kr-icon-2-glow: kr-icon-glow-amber;
  --kr-icon-3-bg:   linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
  --kr-icon-3-glow: kr-icon-glow-teal;
  --kr-icon-4-bg:   linear-gradient(135deg, #059669 0%, #047857 100%);
  --kr-icon-4-glow: kr-icon-glow-emerald;
  --kr-icon-5-bg:   linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  --kr-icon-5-glow: kr-icon-glow-purple;
  --kr-icon-6-bg:   linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --kr-icon-6-glow: kr-icon-glow-rose;
  --kr-icon-7-bg:   linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  --kr-icon-7-glow: kr-icon-glow-sky;
}

/* ── Base transition reset ── */
.kachi-admin-shell .sidebar__menu .menu-icon {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
  flex-shrink: 0 !important;
}
body.kachi-dashboard-body .sidebar-menu-list__link span.icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 8px !important;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
  flex-shrink: 0 !important;
}

/* ── ADMIN: Hover / active: spin-pop + brighten ── */
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:hover .menu-icon,
.kachi-admin-shell .sidebar__menu .sidebar-menu-item.active .menu-icon {
  animation: kr-icon-spin-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  filter: brightness(1.18) saturate(1.3) !important;
}

/* ══════════════════════════════════════════════════
   ADMIN sidebar: .sidebar__menu .menu-icon  nth-child
   ══════════════════════════════════════════════════ */
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 1) .menu-icon {
  background: var(--kr-icon-1-bg) !important;
  animation: kr-icon-float 3.2s ease-in-out infinite, kr-icon-glow-blue 3.2s ease-in-out infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 2) .menu-icon {
  background: var(--kr-icon-2-bg) !important;
  animation: kr-icon-float 3.5s ease-in-out 0.3s infinite, kr-icon-glow-amber 3.5s ease-in-out 0.3s infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 3) .menu-icon {
  background: var(--kr-icon-3-bg) !important;
  animation: kr-icon-float 3.8s ease-in-out 0.6s infinite, kr-icon-glow-teal 3.8s ease-in-out 0.6s infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 4) .menu-icon {
  background: var(--kr-icon-4-bg) !important;
  animation: kr-icon-float 3.3s ease-in-out 0.9s infinite, kr-icon-glow-emerald 3.3s ease-in-out 0.9s infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 5) .menu-icon {
  background: var(--kr-icon-5-bg) !important;
  animation: kr-icon-float 3.6s ease-in-out 1.2s infinite, kr-icon-glow-purple 3.6s ease-in-out 1.2s infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 6) .menu-icon {
  background: var(--kr-icon-6-bg) !important;
  animation: kr-icon-float 3.9s ease-in-out 0.4s infinite, kr-icon-glow-rose 3.9s ease-in-out 0.4s infinite !important;
}
.kachi-admin-shell .sidebar__menu .sidebar-menu-item:nth-child(7n + 7) .menu-icon {
  background: var(--kr-icon-7-bg) !important;
  animation: kr-icon-float 3.4s ease-in-out 0.7s infinite, kr-icon-glow-sky 3.4s ease-in-out 0.7s infinite !important;
}

/* ══════════════════════════════════════════════════
   DASHBOARD (student + instructor)
   Uses body.kachi-dashboard-body for maximum specificity.
   Targets li.sidebar-menu-list__item:nth-child → span.icon
   ══════════════════════════════════════════════════ */

body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 1) span.icon {
  background: linear-gradient(135deg, #1B5CC4 0%, #2470D4 100%) !important;
  animation: kr-icon-float 3.2s ease-in-out infinite !important;
  box-shadow: 0 0 10px 3px rgba(27, 92, 196, 0.38) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 2) span.icon {
  background: linear-gradient(135deg, #F5B300 0%, #CC9400 100%) !important;
  animation: kr-icon-float 3.5s ease-in-out 0.3s infinite !important;
  box-shadow: 0 0 10px 3px rgba(245, 179, 0, 0.40) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 3) span.icon {
  background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%) !important;
  animation: kr-icon-float 3.8s ease-in-out 0.6s infinite !important;
  box-shadow: 0 0 10px 3px rgba(8, 145, 178, 0.38) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 4) span.icon {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  animation: kr-icon-float 3.3s ease-in-out 0.9s infinite !important;
  box-shadow: 0 0 10px 3px rgba(5, 150, 105, 0.36) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 5) span.icon {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  animation: kr-icon-float 3.6s ease-in-out 1.2s infinite !important;
  box-shadow: 0 0 10px 3px rgba(124, 58, 237, 0.34) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 6) span.icon {
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
  animation: kr-icon-float 3.9s ease-in-out 0.4s infinite !important;
  box-shadow: 0 0 10px 3px rgba(225, 29, 72, 0.32) !important;
}
body.kachi-dashboard-body li.sidebar-menu-list__item:nth-child(7n + 7) span.icon {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  animation: kr-icon-float 3.4s ease-in-out 0.7s infinite !important;
  box-shadow: 0 0 10px 3px rgba(2, 132, 199, 0.36) !important;
}

/* ── Dashboard hover/active: spin-pop ── */
body.kachi-dashboard-body .sidebar-menu-list__link:hover span.icon,
body.kachi-dashboard-body .sidebar-menu-list__link.active span.icon,
body.kachi-dashboard-body .sidebar-menu-list__item.has-dropdown.active > a span.icon {
  animation: kr-icon-spin-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  filter: brightness(1.2) saturate(1.35) !important;
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .kachi-admin-shell .sidebar__menu .menu-icon,
  body.kachi-dashboard-body .sidebar-menu-list__link span.icon {
    animation: none !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   20. DARK HERO SECTIONS — Force white text on dark backgrounds
   Fixes: dark text invisible on dark navy gradients in dashboard
   hero cards (.kachi-ins-session-hero, .dash-box, etc.)
   ============================================================ */

/* ── Instructor session hero: full white text treatment ── */
.kachi-ins-session-hero__inner,
.kachi-ins-session-hero__inner * {
  color: #ffffff !important;
}

/* Restore the amber button color explicitly */
.kachi-ins-session-hero__btn,
.kachi-ins-session-hero__btn span,
.kachi-ins-session-hero__btn i {
  color: #ffffff !important;
}

/* Badge: keep its light-blue tint readable */
.kachi-ins-session-hero__badge {
  color: #d0e4ff !important;
}

/* Stat number: bright blue-light, stat label: soft white */
.kachi-ins-session-hero__stat-num {
  color: #93c5fd !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.kachi-ins-session-hero__stat-label {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Title */
.kachi-ins-session-hero__title {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.75rem !important;
}

/* Lead paragraph */
.kachi-ins-session-hero__lead {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1rem !important;
}

/* Checklist items */
.kachi-ins-session-hero__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}
.kachi-ins-session-hero__list li {
  color: rgba(255, 255, 255, 0.80) !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.kachi-ins-session-hero__list li i {
  color: #34d399 !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

/* Fine print below CTA */
.kachi-ins-session-hero__fineprint {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
}

/* Padding for hero inner */
.kachi-ins-session-hero__inner {
  padding: 28px 28px !important;
}

/* ── dash-box: force dark background (overrides kachi-global-polish light glass) ── */
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box,
body.kachi-dashboard-body .kachi-dashboard-content .dash-box {
  background: linear-gradient(135deg, #0D1B35 0%, #142B5F 50%, #1B5CC4 100%) !important;
  background-image: linear-gradient(135deg, #0D1B35 0%, #142B5F 50%, #1B5CC4 100%) !important;
  color: #ffffff !important;
}

/* dash-box: all text white on dark background */
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box h1,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box h2,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box h3,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box h2 span {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box p,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box small,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box li,
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box label {
  color: rgba(255, 255, 255, 0.82) !important;
}
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box span:not(.kachi-dash-notice):not(.badge) {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* dash-notice pill stays dark-text on white pill */
body.kachi-dashboard-body .kachi-dashboard-shell .dash-box .kachi-dash-notice {
  color: #0D1B35 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ── kachi-dashboard-summary: dark hero — ALL text must be white ── */
body.kachi-dashboard-body .kachi-dashboard-summary {
  background: linear-gradient(135deg, #0D1B35 0%, #142B5F 50%, #1B5CC4 100%) !important;
  color: #ffffff !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary *:not(a) {
  color: #ffffff !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary h1 {
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary p {
  color: rgba(255, 255, 255, 0.82) !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary span {
  color: #0D1B35 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary a {
  background: rgba(255, 255, 255, 0.14) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
}
body.kachi-dashboard-body .kachi-dashboard-summary a:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

/* ── Ensure any other dark-bg card in dashboards preserves white text ── */
body.kachi-dashboard-body .bg--primary *,
body.kachi-dashboard-body [class*="bg--dark"] *,
body.kachi-dashboard-body [style*="background:#0"] h1,
body.kachi-dashboard-body [style*="background:#0"] h2,
body.kachi-dashboard-body [style*="background:#0"] p {
  color: #ffffff !important;
}

/* ============================================================
   21. FLAT BUTTONS — remove remaining gradients from admin
   nav-tabs and any lingering theme button gradient sources
   ============================================================ */

/* Admin nav-tabs: active/hover → flat brand blue, no gradient */
.kachi-admin-shell .nav-tabs .nav-link.active,
.kachi-admin-shell .nav-tabs .nav-link:hover {
  background: #1B5CC4 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Admin sidebar active/hover nav item → flat deep navy, no gradient */
.kachi-admin-shell .sidebar__menu .sidebar-menu-item > a:hover,
.kachi-admin-shell .sidebar__menu .sidebar-menu-item .side-menu--open,
.kachi-admin-shell .sidebar__menu .sidebar-menu-item.active > a {
  background: #142B5F !important;
  background-image: none !important;
  color: #fff !important;
}

/* dashboard-card__icon and widget icons: flat solid blue pill */
.kachi-dashboard-shell .dashboard-card__icon,
.kachi-admin-shell .dashboard-widget__icon {
  background: #1B5CC4 !important;
  background-image: none !important;
}

/* Any remaining btn-* or button elements with background-image gradient */
.kachi-admin-shell button:not([class*="close"]):not([class*="toggle"]):not([class*="check"]),
.kachi-dashboard-shell button:not([class*="close"]):not([class*="toggle"]):not([class*="check"]) {
  background-image: none !important;
}

/* discover-box and inline CTA buttons: flat orange */
body.kachi-dashboard-body .discover-box .btn--base-3,
body.kachi-dashboard-body .discover-box [class*="btn--base"] {
  background: #F5B300 !important;
  background-image: none !important;
}

/* ============================================================
    22. BUTTON CONTRAST FIXES — Ensure all buttons have proper
    text/background contrast ratios (WCAG AA compliant)
    ============================================================ */

/* ── Category filter buttons (.btn--base.outline-2) ── */
/* Inactive state: dark text on light background */
.btn--base.outline-2 {
  background-color: rgba(27, 92, 196, 0.08) !important;
  color: #0D1B35 !important;
  border: 1px solid rgba(27, 92, 196, 0.15) !important;
  font-weight: 600 !important;
}

.btn--base.outline-2:hover,
.btn--base.outline-2:focus {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
}

/* Active state: solid blue background with white text */
.btn--base.outline-2.active {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
  box-shadow: 0 4px 12px rgba(27, 92, 196, 0.30) !important;
}

/* ── Generic outline-2 buttons: ensure dark text on light bg ── */
[class*="outline-2"]:not(.active):not(:hover):not(:focus) {
  color: #0D1B35 !important;
}

/* ── Bootstrap btn-light: fix white-on-light issue ── */
.btn-light {
  background-color: #EEF4FF !important;
  color: #0D1B35 !important;
  border: 1px solid rgba(27, 92, 196, 0.15) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light.active {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
}

/* ── Bootstrap btn-outline-* variants: ensure visible borders ── */
.btn-outline-primary {
  color: #1B5CC4 !important;
  border-color: #1B5CC4 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
}

.btn-outline-warning {
  color: #CC9400 !important;
  border-color: #F5B300 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.active {
  background-color: #F5B300 !important;
  color: #0D1B35 !important;
}

/* ── Ensure all .btn elements without explicit bg have readable text ── */
.btn:not([class*="outline"]):not([class*="light"]):not([class*="primary"]):not([class*="warning"]):not([class*="success"]):not([class*="danger"]):not([class*="info"]):not([class*="dark"]):not([class*="secondary"]):not([class*="base"]):not([class*="copy"]):not([class*="sm"]):not([class*="ssm"]):not([class*="lg"]):not([class*="gradi"]):not([class*="pill"]):not([class*="shadow"]):not([class*="icon"]):not([class*="close"]):not([class*="toggle"]):not([class*="check"]) {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
}

/* ── Dashboard tab buttons in coustome-tabs ── */
.coustome-tabs .btn--base.outline-2 {
  background-color: rgba(27, 92, 196, 0.08) !important;
  color: #0D1B35 !important;
  border: 1px solid rgba(27, 92, 196, 0.15) !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
}

.coustome-tabs .btn--base.outline-2.active {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
  box-shadow: 0 4px 12px rgba(27, 92, 196, 0.30) !important;
}

/* ─ Fix any button with light background and light text ─ */
[class*="btn"][style*="background-color: rgb(255"],
[class*="btn"][style*="background-color: #fff"],
[class*="btn"][style*="background-color: #FFF"] {
  color: #0D1B35 !important;
}

/* ── Fix buttons inside light containers ── */
.bg-light .btn:not(.btn-primary):not(.btn-warning):not(.btn-success):not(.btn-danger):not([class*="base"]):not([class*="outline"]),
[class*="bg-light"] .btn:not(.btn-primary):not(.btn-warning):not(.btn-success):not(.btn-danger):not([class*="base"]):not([class*="outline"]) {
  background-color: #1B5CC4 !important;
  color: #ffffff !important;
}

/* ── Ensure text-muted buttons have proper contrast ── */
.text-muted.btn,
.btn.text-muted {
  color: #4A6B8A !important;
}

/* ============================================================
    23. MODAL BUTTONS — Ensure all modal buttons have proper
    contrast (fixes white-on-white invisible button issue)
    ============================================================ */

/* ── All modal footer buttons: ensure visible backgrounds ── */
.modal-footer .btn--base,
.modal-footer .btn--primary,
.modal-footer a.btn--base,
.modal-footer a.btn--primary {
  background: #1B5CC4 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(27, 92, 196, 0.30) !important;
}

.modal-footer .btn--base:hover,
.modal-footer .btn--primary:hover,
.modal-footer a.btn--base:hover,
.modal-footer a.btn--primary:hover {
  background: #0F3D8A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(27, 92, 196, 0.40) !important;
}

/* ── Modal secondary/dark buttons: dark text on light bg ── */
.modal-footer .btn--dark,
.modal-footer .btn-secondary,
.modal-footer a.btn--dark,
.modal-footer a.btn-secondary {
  background: #EEF4FF !important;
  background-image: none !important;
  color: #0D1B35 !important;
  border: 1px solid rgba(27, 92, 196, 0.20) !important;
}

.modal-footer .btn--dark:hover,
.modal-footer .btn-secondary:hover,
.modal-footer a.btn--dark:hover,
.modal-footer a.btn-secondary:hover {
  background: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
}

/* ── Modal warning/amber buttons ── */
.modal-footer .btn--warning,
.modal-footer .btn--base-3,
.modal-footer a.btn--warning,
.modal-footer a.btn--base-3 {
  background: #F5B300 !important;
  background-image: none !important;
  color: #0D1B35 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(245, 179, 0, 0.30) !important;
}

.modal-footer .btn--warning:hover,
.modal-footer .btn--base-3:hover,
.modal-footer a.btn--warning:hover,
.modal-footer a.btn--base-3:hover {
  background: #CC9400 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(245, 179, 0, 0.40) !important;
}

/* ── Modal outline buttons: ensure visible borders and dark text ── */
.modal-footer [class*="outline"] {
  color: #1B5CC4 !important;
  border: 2px solid #1B5CC4 !important;
  background: transparent !important;
}

.modal-footer [class*="outline"]:hover,
.modal-footer [class*="outline"]:focus {
  background: #1B5CC4 !important;
  color: #ffffff !important;
}

/* ─ Small buttons in modals (btn-sm) ── */
.modal-footer .btn-sm,
.modal-footer .btn--sm {
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
}

/* ── Instructor rating modal specific overrides ── */
#instructorRatingReminderModal .modal-footer .btn--base {
  background: #1B5CC4 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(27, 92, 196, 0.35) !important;
}

#instructorRatingReminderModal .modal-footer .btn--base:hover {
  background: #0F3D8A !important;
  transform: translateY(-1px) !important;
}

#instructorRatingReminderModal .modal-footer .btn--dark {
  background: #EEF4FF !important;
  color: #0D1B35 !important;
  border: 1px solid rgba(27, 92, 196, 0.20) !important;
}

#instructorRatingReminderModal .modal-footer .btn--dark:hover {
  background: #1B5CC4 !important;
  color: #ffffff !important;
  border-color: #1B5CC4 !important;
}

/* ── Generic modal button safety: catch any button with white-on-white ── */
.modal .btn:not([class*="outline"]):not([class*="dark"]):not([class*="secondary"]):not([class*="warning"]):not([class*="danger"]):not([class*="success"]):not([class*="info"]):not([class*="base"]):not([class*="primary"]) {
  background: #1B5CC4 !important;
  color: #ffffff !important;
}

/* ============================================================
    24. 3CX LIVE CHAT WIDGET — Ensure proper display across all pages
    Fixed position with high z-index so it's never hidden
    ============================================================ */

/* 3CX chat widget container */
call-us-selector,
#tcx-callus-js + *,
[class*="tcx-"],
[class*="3cx-"],
.tcx-widget,
.tcx-launcher,
#tcx-widget,
#tcx-launcher {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999999 !important;
}

/* Ensure 3CX elements are above modals and other overlays */
.tcx-widget,
.tcx-launcher,
#tcx-widget,
#tcx-launcher,
call-us-selector {
  z-index: 999999 !important;
}

/* 3CX chat window when expanded */
.tcx-chat-window,
#tcx-chat-window,
[class*="tcx-chat"] {
  z-index: 999999 !important;
}

/* Ensure 3CX doesn't get hidden by dashboard shell */
.kachi-dashboard-shell {
  position: relative;
  z-index: 1;
}

/* Ensure 3CX is above sidebar */
.kachi-dashboard-shell .sidebar-menu {
  z-index: 100 !important;
}

/* Ensure 3CX is above navbar */
.kachi-dashboard-shell .workspace-header {
  z-index: 120 !important;
}

/* 3CX should be above everything */
call-us-selector,
.tcx-widget,
.tcx-launcher {
  z-index: 999999 !important;
}