/* ============================================================
   MARKUZAI ADMIN — Premium Colorful Animated Theme
   ============================================================ */

/* ── Keyframe Animations ── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(115,103,240,.35); }
  50%       { box-shadow: 0 0 0 8px rgba(115,103,240,0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(115,103,240,.3); }
  50%       { border-color: rgba(115,103,240,.9); }
}
@keyframes rainbowBorder {
  0%   { border-image-source: linear-gradient(90deg,#7367f0,#28c76f,#ff9f43,#ea5455,#00cfe8); }
  25%  { border-image-source: linear-gradient(90deg,#28c76f,#ff9f43,#ea5455,#00cfe8,#7367f0); }
  50%  { border-image-source: linear-gradient(90deg,#ff9f43,#ea5455,#00cfe8,#7367f0,#28c76f); }
  75%  { border-image-source: linear-gradient(90deg,#ea5455,#00cfe8,#7367f0,#28c76f,#ff9f43); }
  100% { border-image-source: linear-gradient(90deg,#00cfe8,#7367f0,#28c76f,#ff9f43,#ea5455); }
}
@keyframes navbarGlow {
  0%, 100% { box-shadow: 0 2px 20px rgba(115,103,240,.15); }
  50%       { box-shadow: 0 2px 30px rgba(40,199,111,.15); }
}

/* ── Sidebar: Vibrant Gradient ── */
.light-style .layout-menu {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 25px rgba(0,0,0,.3) !important;
}
.light-style .layout-menu .menu-item .menu-link {
  color: rgba(255,255,255,.75) !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  transition: all .25s ease !important;
}
.light-style .layout-menu .menu-item .menu-link:hover,
.light-style .layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(135deg, rgba(115,103,240,.8), rgba(40,199,111,.4)) !important;
  color: #fff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 15px rgba(115,103,240,.4) !important;
}
.light-style .layout-menu .menu-item.active > .menu-link i,
.light-style .layout-menu .menu-item .menu-link:hover i {
  color: #fff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.light-style .menu-header-text {
  color: rgba(255,255,255,.45) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
}
.light-style .layout-menu .menu-item i {
  color: rgba(255,255,255,.65) !important;
}
/* Sidebar app-brand */
.light-style .layout-menu .app-brand {
  background: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Sidebar menu inner shadow */
.light-style .menu-inner-shadow {
  background: linear-gradient(#1a1a2e 5%, rgba(26,26,46,0)) !important;
}

/* ── Dark Style Sidebar Overrides ── */
.dark-style .layout-menu {
  background: linear-gradient(160deg, #0e0e1b 0%, #15152a 50%, #1c1c38 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 25px rgba(0,0,0,.5) !important;
}
.dark-style .layout-menu .menu-item .menu-link {
  color: rgba(255,255,255,.6) !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  transition: all .25s ease !important;
}
.dark-style .layout-menu .menu-item .menu-link:hover,
.dark-style .layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(135deg, rgba(115,103,240,.9), rgba(40,199,111,.5)) !important;
  color: #fff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 15px rgba(115,103,240,.4) !important;
}
.dark-style .layout-menu .menu-item.active > .menu-link i,
.dark-style .layout-menu .menu-item .menu-link:hover i {
  color: #fff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.dark-style .menu-header-text {
  color: rgba(255,255,255,.35) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
}
.dark-style .layout-menu .menu-item i {
  color: rgba(255,255,255,.55) !important;
}
.dark-style .layout-menu .app-brand {
  background: rgba(0,0,0,.3) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.dark-style .menu-inner-shadow {
  background: linear-gradient(#0e0e1b 5%, rgba(14,14,27,0)) !important;
}

/* ── Navbar: Glass + Animated Gradient ── */
.light-style .layout-navbar {
  background: linear-gradient(90deg, #fff 0%, #f0eeff 50%, #e8f8f0 100%) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 8s ease infinite, navbarGlow 4s ease infinite !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg,#7367f0,#28c76f,#ff9f43) 1 !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1060 !important; /* Below modal (1090) */
}
.dark-style .layout-navbar {
  background: linear-gradient(90deg, #15152a 0%, #1e1e3b 50%, #17172e 100%) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 8s ease infinite, navbarGlow 4s ease infinite !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg,#7367f0,#28c76f,#ff9f43) 1 !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1060 !important; /* Below modal (1090) */
}

/* ── Cards: Hover Lift + Gradient Border ── */
.card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(115,103,240,.08) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  animation: fadeSlideIn .5s ease forwards !important;
  position: relative !important;
  overflow: hidden !important;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7367f0, #28c76f, #ff9f43, #ea5455, #00cfe8);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  opacity: 0;
  transition: opacity .3s;
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 35px rgba(115,103,240,.18) !important;
}

/* ── Stat Cards: Colorful Icons ── */
.card .badge.bg-label-primary   { background: linear-gradient(135deg,#7367f0,#9c8fff) !important; color:#fff !important; }
.card .badge.bg-label-success   { background: linear-gradient(135deg,#28c76f,#48da89) !important; color:#fff !important; }
.card .badge.bg-label-warning   { background: linear-gradient(135deg,#ff9f43,#ffb976) !important; color:#fff !important; }
.card .badge.bg-label-danger    { background: linear-gradient(135deg,#ea5455,#f08182) !important; color:#fff !important; }
.card .badge.bg-label-info      { background: linear-gradient(135deg,#00cfe8,#1ce7ff) !important; color:#fff !important; }
.card .badge.bg-label-secondary { background: linear-gradient(135deg,#82868b,#a0a4a8) !important; color:#fff !important; }
.card .badge [class*='ti-'] { font-size: 1.4rem; animation: floatUp 2s ease infinite; }

/* ── Stat Numbers: Pop-in Animation ── */
.card .card-title { animation: countUp .6s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ── Buttons: Gradient + Glow ── */
.btn-primary {
  background: linear-gradient(135deg,#7367f0,#9c8fff) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(115,103,240,.4) !important;
  transition: all .3s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(115,103,240,.55) !important;
  background: linear-gradient(135deg,#5e50ee,#7367f0) !important;
}
.btn-success {
  background: linear-gradient(135deg,#28c76f,#48da89) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(40,199,111,.35) !important;
  transition: all .3s ease !important;
}
.btn-success:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(40,199,111,.5) !important; }
.btn-danger {
  background: linear-gradient(135deg,#ea5455,#f08182) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(234,84,85,.35) !important;
  transition: all .3s ease !important;
}
.btn-danger:hover { transform: translateY(-2px) !important; }
.btn-warning {
  background: linear-gradient(135deg,#ff9f43,#ffb976) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255,159,67,.35) !important;
  transition: all .3s ease !important;
}
.btn-info {
  background: linear-gradient(135deg,#00cfe8,#1ce7ff) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0,207,232,.35) !important;
  transition: all .3s ease !important;
}
.btn { border-radius: 10px !important; font-weight: 600 !important; letter-spacing: .3px !important; }

/* ── Tables: Colorful Header + Row Hover ── */
.table thead th {
  background: linear-gradient(135deg,#7367f0,#9c8fff) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  padding: 14px 16px !important;
}
.table tbody tr {
  transition: all .2s ease !important;
  border-bottom: 1px solid rgba(115,103,240,.08) !important;
}
.table tbody tr:hover {
  background: linear-gradient(90deg,rgba(115,103,240,.06),rgba(40,199,111,.04)) !important;
  transform: scale(1.005) !important;
}

/* ── Badges: Vivid ── */
.badge {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  padding: 5px 10px !important;
}
.badge.bg-success { background: linear-gradient(135deg,#28c76f,#48da89) !important; }
.badge.bg-danger  { background: linear-gradient(135deg,#ea5455,#f08182) !important; }
.badge.bg-warning { background: linear-gradient(135deg,#ff9f43,#ffb976) !important; }
.badge.bg-info    { background: linear-gradient(135deg,#00cfe8,#1ce7ff) !important; }
.badge.bg-primary { background: linear-gradient(135deg,#7367f0,#9c8fff) !important; }

/* ── Form Inputs: Focus Glow ── */
.form-control:focus, .form-select:focus {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 3px rgba(115,103,240,.2) !important;
  transition: all .3s ease !important;
}
.form-control, .form-select {
  border-radius: 10px !important;
  border: 1.5px solid rgba(115,103,240,.2) !important;
  transition: all .3s ease !important;
}

/* ── Navbar Badges (Org / Plan) ── */
.badge.bg-label-primary.fs-6 {
  background: linear-gradient(135deg,#7367f0,#9c8fff) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  animation: pulseGlow 2.5s infinite !important;
}
.badge.bg-label-info.fs-6 {
  background: linear-gradient(135deg,#00cfe8,#1ce7ff) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

/* ── Progress Bars: Animated ── */
.progress { border-radius: 20px !important; background: rgba(115,103,240,.1) !important; }
.progress-bar {
  border-radius: 20px !important;
  background: linear-gradient(90deg,#7367f0,#28c76f,#00cfe8) !important;
  background-size: 200% 100% !important;
  animation: shimmer 2s linear infinite !important;
}

/* ── Page Content: Stagger Fade-In ── */
.light-style .content-wrapper {
  background: linear-gradient(135deg,#f8f7ff 0%,#f0fff8 50%,#fff8f0 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 15s ease infinite !important;
}
.dark-style .content-wrapper {
  background: linear-gradient(135deg,#0e0e1b 0%,#15152a 50%,#101020 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 15s ease infinite !important;
}

/* Hide settings customizer icon */
.template-customizer-open-btn,
.template-customizer-btn,
.layout-customizer-btn,
.layout-customizer {
    display: none !important;
}

/* Footer style overrides */
.light-style footer, .light-style .footer, .light-style .content-footer {
  background: transparent !important;
  color: #555 !important;
}
.dark-style footer, .dark-style .footer, .dark-style .content-footer {
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
}
.row > [class*='col-'] {
  animation: fadeSlideIn .5s ease forwards !important;
}
.row > [class*='col-']:nth-child(1) { animation-delay: .05s; }
.row > [class*='col-']:nth-child(2) { animation-delay: .10s; }
.row > [class*='col-']:nth-child(3) { animation-delay: .15s; }
.row > [class*='col-']:nth-child(4) { animation-delay: .20s; }
.row > [class*='col-']:nth-child(5) { animation-delay: .25s; }
.row > [class*='col-']:nth-child(6) { animation-delay: .30s; }

/* ── Card Headers: Colorful ── */
.card-header {
  background: linear-gradient(135deg,rgba(115,103,240,.06),rgba(40,199,111,.04)) !important;
  border-bottom: 2px solid rgba(115,103,240,.12) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ── Pagination ── */
.page-item.active .page-link {
  background: linear-gradient(135deg,#7367f0,#9c8fff) !important;
  border-color: #7367f0 !important;
}
.page-link { border-radius: 8px !important; margin: 0 2px !important; transition: all .2s ease !important; }
.page-link:hover { transform: translateY(-2px) !important; }

/* ── Dropdowns: Glassy ── */
.dropdown-menu {
  border: none !important;
  box-shadow: 0 10px 40px rgba(115,103,240,.2) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  animation: fadeSlideIn .2s ease forwards !important;
}
.dropdown-item:hover {
  background: linear-gradient(90deg,rgba(115,103,240,.1),rgba(40,199,111,.05)) !important;
  border-radius: 8px !important;
  transform: translateX(4px) !important;
  transition: all .2s ease !important;
}

/* ── Alerts: Colorful Left-border ── */
.alert { border-radius: 12px !important; border: none !important; }
.alert-success { background: linear-gradient(135deg,rgba(40,199,111,.1),rgba(40,199,111,.05)) !important; border-left: 4px solid #28c76f !important; }
.alert-danger  { background: linear-gradient(135deg,rgba(234,84,85,.1),rgba(234,84,85,.05)) !important; border-left: 4px solid #ea5455 !important; }
.alert-warning { background: linear-gradient(135deg,rgba(255,159,67,.1),rgba(255,159,67,.05)) !important; border-left: 4px solid #ff9f43 !important; }
.alert-info    { background: linear-gradient(135deg,rgba(0,207,232,.1),rgba(0,207,232,.05)) !important; border-left: 4px solid #00cfe8 !important; }

/* ── Modal: Animated Entry ── */
.modal.show .modal-dialog { animation: fadeSlideIn .3s ease forwards !important; }
.light-style .modal-content {
  background: #fff !important;
  color: #333 !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(115,103,240,.25) !important;
  overflow: hidden !important;
}
.dark-style .modal-content {
  background: #1c1c38 !important;
  color: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  overflow: hidden !important;
}
.dark-style .modal-content .form-control,
.dark-style .modal-content .form-select {
  background-color: #15152a !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark-style .modal-content .form-control:focus,
.dark-style .modal-content .form-select:focus {
  background-color: #1c1c38 !important;
  color: #fff !important;
}
.dark-style .modal-content label {
  color: rgba(255, 255, 255, 0.9) !important;
}
.dark-style .modal-content .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}
.dark-style .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.modal-header {
  background: linear-gradient(135deg,#7367f0,#9c8fff) !important;
  color: #fff !important;
  border: none !important;
}
.modal-header .modal-title, .modal-header .btn-close { color: #fff !important; filter: brightness(2); }

/* ── Layout menu toggle icon ── */
.layout-menu-toggle i { transition: transform .3s ease !important; }
.layout-menu-toggle:hover i { transform: rotate(90deg) !important; color: #7367f0 !important; }

/* ── Active nav item indicator dot ── */
.light-style .layout-menu .menu-item.active > .menu-link::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  background: #28c76f;
  border-radius: 50%;
  box-shadow: 0 0 8px #28c76f;
  animation: pulseGlow 1.5s infinite;
}

/* ── DataTable Styling ── */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 10px !important;
  border: 1.5px solid rgba(115,103,240,.25) !important;
  padding: 6px 14px !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #7367f0 !important; box-shadow: 0 0 0 3px rgba(115,103,240,.15) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(115,103,240,.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#7367f0,#28c76f); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7367f0; }

/* ── Page Title / Headers ── */
h1, h2, h3, h4, h5, .card-title {
  letter-spacing: -.2px !important;
}
.card h3.mb-0 {
  background: linear-gradient(135deg,#7367f0,#28c76f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

/* ── Sidebar sub-menu items ── */
.light-style .layout-menu .menu-sub .menu-link {
  padding-left: 2.8rem !important;
  font-size: .87rem !important;
  color: rgba(255,255,255,.6) !important;
}
.light-style .layout-menu .menu-sub .menu-link:hover,
.light-style .layout-menu .menu-sub .menu-item.active > .menu-link {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

/* ── Floating orb background accents ── */
.content-wrapper::before, .content-wrapper::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  animation: floatUp 6s ease infinite;
}
.content-wrapper::before {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #7367f0, transparent);
  top: -100px; right: -100px;
}
.content-wrapper::after {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #28c76f, transparent);
  bottom: 50px; left: -80px;
  animation-delay: 3s;
}
.content-wrapper > *:not(.modal):not(.modal-backdrop) { position: relative; z-index: 1; }

/* ── Prevent Bootstrap Modal Backdrop Bug & Enable Glassmorphism Backdrop ── */
.modal-backdrop {
    display: none !important;
}
.modal {
    position: fixed !important;
    z-index: 1090 !important;
    background: transparent;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.modal.show {
    background: rgba(15, 15, 30, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Ensure the layout header and menu sit behind the modal when active */
body.modal-open .layout-navbar,
body.modal-open .layout-menu,
body.modal-open .layout-menu-toggle {
    z-index: 1040 !important;
}

/* ── Input Group Text ── */
.input-group-text {
  border-radius: 10px !important;
  background: linear-gradient(135deg,rgba(115,103,240,.08),rgba(40,199,111,.05)) !important;
  border: 1.5px solid rgba(115,103,240,.2) !important;
  color: #7367f0 !important;
}

/* ── Avatar online indicator ── */
.avatar.avatar-online::after {
  background: #28c76f !important;
  box-shadow: 0 0 0 2px #28c76f !important;
  animation: pulseGlow 2s infinite !important;
}

/* ============================================================
   DASHBOARD FONT & TYPOGRAPHY ENHANCEMENTS
   ============================================================ */

/* Import bold Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body, .card, .table, .form-control, .btn, .badge, .nav-link {
    font-family: 'Inter', 'Public Sans', sans-serif !important;
}

/* Dashboard page headings */
.light-style .card .card-text {
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: #666 !important;
}
.dark-style .card .card-text {
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Big stat numbers */
.card .card-title.mb-0 {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg,#7367f0,#28c76f);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: countUp .6s cubic-bezier(.34,1.56,.64,1) both;
}

/* Card subtitles */
.card small.text-muted {
    font-size: .78rem !important;
    font-weight: 500 !important;
    letter-spacing: .3px !important;
}

/* Section headings */
.card .card-header h4,
.card .card-header h5,
h4.card-title,
h5.card-title {
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
}

/* Sidebar menu text */
.light-style .layout-menu .menu-item .menu-link .menu-text {
    font-weight: 600 !important;
    font-size: .9rem !important;
    letter-spacing: .1px !important;
}
.dark-style .layout-menu .menu-item .menu-link .menu-text {
    font-weight: 600 !important;
    font-size: .9rem !important;
    letter-spacing: .1px !important;
}

/* Navbar text */
.layout-navbar .navbar-nav .nav-link {
    font-weight: 600 !important;
}

/* Table body text */
.table tbody td {
    font-size: .88rem !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}

/* Form labels */
.light-style .form-label {
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    color: #555 !important;
}
.dark-style .form-label {
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Remove the gradient text from sidebar h3 (it was too wide) */
.light-style h3.mb-0,
.dark-style h3.mb-0 {
    font-weight: 800 !important;
}

/* Page section headers */
.light-style .content-wrapper h3,
.light-style .content-wrapper h4 {
    font-weight: 800 !important;
    color: #333 !important;
}
.dark-style .content-wrapper h3,
.dark-style .content-wrapper h4 {
    font-weight: 800 !important;
    color: #fff !important;
}

/* Sidebar active menu font */
.light-style .layout-menu .menu-item.active > .menu-link .menu-text {
    font-weight: 700 !important;
    color: #fff !important;
}
.dark-style .layout-menu .menu-item.active > .menu-link .menu-text {
    font-weight: 700 !important;
    color: #fff !important;
}

/* ============================================================
   DASHBOARD STAT CARD SUBTITLE TEXT — Force Readable Colors
   ============================================================ */

/* "Registered users", "Attendance records", "Campaign success" etc. */
.light-style .card small.text-muted,
.light-style .card .text-muted,
.light-style .card p.card-text + *,
.light-style .card-body small,
.light-style .card .card-body small,
.light-style .card .card-body > small,
.light-style .card .card-body p:not(.card-text),
.light-style .card small {
    color: #3a3a4a !important;
    font-weight: 500 !important;
    font-size: .8rem !important;
}

.dark-style .card small.text-muted,
.dark-style .card .text-muted,
.dark-style .card p.card-text + *,
.dark-style .card-body small,
.dark-style .card .card-body small,
.dark-style .card .card-body > small,
.dark-style .card .card-body p:not(.card-text),
.dark-style .card small {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    font-size: .8rem !important;
}

/* Revert page-level form labels from uppercase (admin pages look better normal) */
.light-style .content-wrapper .card .form-label {
    text-transform: none !important;
    color: #444 !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}
.dark-style .content-wrapper .card .form-label {
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}

/* ── Sidebar logo area: no blue background ── */
.light-style .layout-menu .app-brand,
.dark-style .layout-menu .app-brand {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 10px 16px !important;
}
.light-style .layout-menu .app-brand img,
.dark-style .layout-menu .app-brand img {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Remove any SVG/icon placeholder box that appears when img fails */
.app-brand-logo.demo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Active nav item indicator dot for dark mode ── */
.dark-style .layout-menu .menu-item.active > .menu-link::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  background: #28c76f;
  border-radius: 50%;
  box-shadow: 0 0 8px #28c76f;
  animation: pulseGlow 1.5s infinite;
}

/* ── Sidebar sub-menu items for dark mode ── */
.dark-style .layout-menu .menu-sub .menu-link {
  padding-left: 2.8rem !important;
  font-size: .87rem !important;
  color: rgba(255,255,255,.5) !important;
}
.dark-style .layout-menu .menu-sub .menu-link:hover,
.dark-style .layout-menu .menu-sub .menu-item.active > .menu-link {
  color: #fff !important;
  background: rgba(255,255,255,.05) !important;
}