/* ============================================================
   KINEZ BRIGHT KINDERGARTEN SAAS — Admin Dashboard Design System
   Harmonized with the Kinez Design System for iSchool by Qertex
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --theme-color: #6754e9 !important;
  --secondary-color: #f15f25 !important;
  
  --kinez-violet: #6754e9 !important;
  --kinez-orange: #f15f25 !important;
  --kinez-yellow: #ffce5a !important;
  --kinez-green: #10b981 !important;
  --kinez-sky: #38bdf8 !important;
  --kinez-dark: #000229 !important;
  --kinez-body-text: #1e293b !important;
  --kinez-muted: #64748b !important;
  --kinez-canvas: #f8fafc !important;
  --kinez-card-bg: #ffffff !important;
  --kinez-border: #edf2f7 !important;
  
  /* System token overrides */
  --dash-green: #6754e9 !important;
  --dash-navy: #f15f25 !important;
  --dash-bg: #f8fafc !important;
  --dash-card-bg: #ffffff !important;
  --dash-border: #edf2f7 !important;
  --dash-text: #000229 !important;
  --dash-muted: #64748b !important;
  --dash-radius: 18px !important;
}

/* Page Canvas - Ultra Bright & Clean */
body, 
.container-scroller, 
.page-body-wrapper,
.main-panel, 
.content-wrapper {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.content-wrapper {
  background-image: 
    radial-gradient(circle at 5% 5%, rgba(103, 84, 233, 0.035) 0%, transparent 35%),
    radial-gradient(circle at 95% 95%, rgba(241, 95, 37, 0.035) 0%, transparent 40%) !important;
  padding: 1.75rem 2.25rem !important;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6, 
.card-title, 
.page-title,
.dash-card-title,
.dash-header-title {
  font-family: 'Baloo 2', cursive, sans-serif !important;
  color: #000229 !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}

.text-muted, .dash-stat-label, .dash-header-subtitle {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Top Navbar / Header */
.navbar, 
.navbar-brand-wrapper, 
.navbar-menu-wrapper {
  background: #ffffff !important;
  border-bottom: 1px solid #edf2f7 !important;
  box-shadow: 0 4px 20px rgba(103, 84, 233, 0.04) !important;
}

.navbar .navbar-brand.brand-logo img {
  height: 48px !important;
  width: auto !important;
  max-width: 210px !important;
  object-fit: contain;
}

.navbar .navbar-nav .nav-link {
  color: #334155 !important;
  font-weight: 600 !important;
}

.navbar .navbar-nav .nav-link:hover {
  color: #6754e9 !important;
}

/* Sidebar Redesign - Clean Bright White */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #edf2f7 !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.02) !important;
}

.sidebar .nav .nav-item .nav-link {
  color: #475569 !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  border-radius: 14px !important;
  margin: 3px 12px !important;
  padding: 10px 16px !important;
  transition: all 0.22s ease !important;
}

.sidebar .nav .nav-item .nav-link i, 
.sidebar .nav .nav-item .nav-link svg,
.sidebar .nav .nav-item .nav-link .menu-icon {
  color: #6754e9 !important;
  margin-right: 12px !important;
  transition: transform 0.2s ease;
}

.sidebar .nav .nav-item .nav-link:hover {
  background: #f4f0ff !important;
  color: #6754e9 !important;
}

.sidebar .nav .nav-item .nav-link:hover i,
.sidebar .nav .nav-item .nav-link:hover svg {
  transform: scale(1.1);
}

.sidebar .nav .nav-item.active > .nav-link {
  background: linear-gradient(135deg, #6754e9 0%, #7d6cf4 100%) !important;
  color: #ffffff !important;
  border-left: none !important;
  box-shadow: 0 8px 20px rgba(103, 84, 233, 0.28) !important;
}

.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link svg,
.sidebar .nav .nav-item.active > .nav-link .menu-icon {
  color: #ffffff !important;
}

.sidebar .nav.sub-menu {
  background: #fbfbfe !important;
  border-radius: 14px !important;
  border: 1px solid #f1f5f9 !important;
  padding: 8px 0 !important;
  margin: 4px 12px 8px 12px !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  color: #475569 !important;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
}

/* Eliminate the overlapping bullet dot ("0") completely across the entire system */
.sidebar .nav.sub-menu .nav-item .nav-link::before,
.sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar .nav.sub-menu .nav-item::before,
.sidebar .nav.sub-menu .nav-item:before,
.sidebar .nav.sub-menu li::before,
.sidebar .nav.sub-menu li:before,
.sidebar .nav.sub-menu a::before,
.sidebar .nav.sub-menu a:before,
.sidebar .nav.sub-menu .nav-item .nav-link:hover::before,
.sidebar .nav.sub-menu .nav-item .nav-link:hover:before,
.sidebar .nav.sub-menu .nav-item .nav-link.active::before,
.sidebar .nav.sub-menu .nav-item .nav-link.active:before,
[dir="rtl"] .sidebar .nav.sub-menu .nav-item .nav-link::before,
.rtl .sidebar .nav.sub-menu .nav-item .nav-link::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
  color: #f15f25 !important;
  background: #fff4ed !important;
  box-shadow: none !important;
}

.sidebar-search-wrapper {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
  margin: 12px 14px 16px !important;
}

.sidebar-search-input {
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Modern Rounded Cards */
.card, 
.dash-card {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(103, 84, 233, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  color: #1e293b !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card .card-title, 
.card h4, 
.card h5,
.dash-card-title {
  color: #000229 !important;
  font-family: 'Baloo 2', cursive, sans-serif !important;
  font-weight: 700 !important;
}

.dash-card-head {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 1.15rem 1.4rem !important;
}

/* Stat & KPI Cards - Bright Cheerful Palette */
.dash-stat-card {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(103, 84, 233, 0.04) !important;
  padding: 1.25rem 1.4rem !important;
  transition: all 0.25s ease;
}

.dash-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(103, 84, 233, 0.08) !important;
}

.dash-stat-value {
  font-family: 'Baloo 2', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #000229 !important;
}

.dash-stat-label {
  font-size: 0.88rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* Gradient KPI Cards */
.card.card-tale {
  background: linear-gradient(135deg, #6754e9 0%, #7d6cf4 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(103, 84, 233, 0.25) !important;
}

.card.card-dark-blue {
  background: linear-gradient(135deg, #f15f25 0%, #ff7a45 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(241, 95, 37, 0.25) !important;
}

.card.card-light-blue {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.25) !important;
}

.card.card-light-danger {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25) !important;
}

.card.card-tale p, 
.card.card-dark-blue p, 
.card.card-light-blue p, 
.card.card-light-danger p {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Form Controls & Inputs */
.form-control, 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="number"], 
select, 
textarea {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  font-family: 'Quicksand', sans-serif !important;
  padding: 10px 16px !important;
  transition: all 0.22s ease;
}

.form-control:focus, 
input:focus, 
select:focus, 
textarea:focus {
  background-color: #ffffff !important;
  border-color: #6754e9 !important;
  box-shadow: 0 0 0 4px rgba(103, 84, 233, 0.12) !important;
  color: #0f172a !important;
}

.input-group-text {
  background-color: #f4f0ff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #6754e9 !important;
  border-radius: 12px !important;
}

/* Buttons */
.btn-primary, 
.btn-theme {
  background: linear-gradient(135deg, #6754e9 0%, #7d6cf4 100%) !important;
  color: #ffffff !important;
  font-family: 'Baloo 2', cursive, sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 18px rgba(103, 84, 233, 0.28) !important;
  transition: all 0.22s ease !important;
}

.btn-primary:hover, 
.btn-theme:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(103, 84, 233, 0.38) !important;
  color: #ffffff !important;
}

.btn-secondary {
  background: #f15f25 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(241, 95, 37, 0.25) !important;
}

/* Tables */
.table {
  color: #1e293b !important;
}

.table thead th {
  background-color: #f8fafc !important;
  color: #000229 !important;
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-bottom: 2px solid #edf2f7 !important;
  padding: 14px 16px !important;
}

.table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-weight: 500;
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: #fcfbfe !important;
}

/* Badge Tags */
.badge {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

.badge-success {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
}

.badge-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

.badge-info {
  background-color: #e0f2fe !important;
  color: #075985 !important;
}

/* Footer in Admin */
.footer {
  background: #ffffff !important;
  border-top: 1px solid #edf2f7 !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  padding: 20px !important;
}