/**
 * Figma Theme Stylesheet: School Management Admin Dashboard UI
 * Strictly based on Figma community file 1219642652767985298 (Eneh Mercy)
 * Color Palette:
 * - Brand Dark Navy: #152259 (rgb(21, 34, 89))
 * - Brand Deep Dark: #0D163B
 * - Accent Sky Blue: #50B5FF (rgb(80, 181, 255))
 * - Accent Sky Blue Hover: #38A7F8
 * - Accent Sky Blue Active: #2094EA
 * - Soft Sky Tint: #E8F5FF / #F0F8FF
 * - App Background: #F5F7FB
 * - Surface Cards: #FFFFFF
 * - Dark Text: #152259
 * - Muted Text: #8A92A6
 * - Sidebar Text: #9AA8C7
 * - Subtle Borders: #EDF2F7 / #E2E8F0
 */

:root {
  --figma-navy: #152259;
  --figma-navy-dark: #0D163B;
  --figma-navy-hover: #1E2D6D;
  --figma-blue: #50B5FF;
  --figma-blue-hover: #38A7F8;
  --figma-blue-active: #2094EA;
  --figma-blue-tint: #E8F5FF;
  --figma-blue-soft: #F0F8FF;
  --figma-bg: #F5F7FB;
  --figma-white: #FFFFFF;
  --figma-text-dark: #152259;
  --figma-text-muted: #8A92A6;
  --figma-text-sidebar: #9AA8C7;
  --figma-border: #E2E8F0;
  --figma-border-subtle: #EDF2F7;
}

/* Base Body & App Background */
html,
body,
.body,
.content-body {
  background-color: var(--figma-bg) !important;
  color: var(--figma-text-dark) !important;
  font-family: 'Signika', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Links */
a,
.btn-link {
  color: var(--figma-blue) !important;
  transition: color 0.2s ease;
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
  color: var(--figma-blue-active) !important;
  text-decoration: none;
}

/* Top Header Bar System */
.header {
  background: var(--figma-white) !important;
  border-bottom: 1px solid var(--figma-border-subtle) !important;
  box-shadow: 0 1px 3px 0 rgba(21, 34, 89, 0.04), 0 1px 2px -1px rgba(21, 34, 89, 0.02) !important;
  height: 60px !important;
  padding-right: 24px !important;
}

.header .logo-env,
html.sidebar-light:not(.dark) .header .logo-env {
  background: var(--figma-navy) !important;
  border-right: 1px solid var(--figma-navy-dark) !important;
  box-shadow: none !important;
}

.header .header-left {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header .header-right {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 15px !important;
  margin-right: 10px !important;
}

/* TOTAL ERADICATION OF 45-DEGREE DIAMONDS */
.header-menu .header-menu-icon:before,
.header-menu > li .header-menu-icon:before,
.header .header-menu-icon:before,
.sidebar-toggle:before,
.s-expand:before,
.admin-theme-toggle:before,
.userbox:before,
.userbox > a:before,
.userbox .user-pill-btn:before {
  display: none !important;
  content: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Header Action Menus & Buttons */
.header-menu {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-menu > li {
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.header-menu-icon,
.header-menu > li .header-menu-icon,
.header-menu > li > a.header-menu-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.header-menu-icon i:not(.admin-theme-icon-light),
.header-menu > li .header-menu-icon i:not(.admin-theme-icon-light),
.sidebar-toggle i,
.s-expand i {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transition: color 0.2s ease !important;
}

.header-menu-icon:hover,
.header-menu > li .header-menu-icon:hover,
.header-menu > li.open .header-menu-icon,
.sidebar-toggle:hover,
.s-expand:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #152259 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(21, 34, 89, 0.08) !important;
}

.header-menu-icon:hover i,
.header-menu > li .header-menu-icon:hover i,
.header-menu > li.open .header-menu-icon i,
.sidebar-toggle:hover i,
.s-expand:hover i {
  color: #152259 !important;
}

.header-menu > li .header-menu-icon .badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35) !important;
}

/* Header Search Bar Modernization */
.header .nav-form.search {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header .input-search {
  height: 38px !important;
  border-radius: 9999px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 4px 0 14px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: auto !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  margin: 0 !important;
  position: relative !important;
}

.header .input-search:focus-within {
  background: #ffffff !important;
  border-color: #50b5ff !important;
  box-shadow: 0 0 0 3px rgba(80, 181, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.header .input-search input.form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 13px !important;
  color: #1e293b !important;
  width: 160px !important;
  padding: 0 8px 0 0 !important;
  float: none !important;
  transition: width 0.3s ease !important;
}

.header .input-search input.form-control:focus {
  width: 220px !important;
  outline: none !important;
}

.header .input-search input.form-control::placeholder {
  color: #94a3b8 !important;
}

.header .input-search .input-group-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header .input-search .btn {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 13px !important;
  padding: 0 !important;
  height: 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.header .input-search .btn i {
  position: static !important;
  line-height: 1 !important;
  font-size: 13px !important;
  color: inherit !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header .input-search .btn:hover {
  background: #e2e8f0 !important;
  color: #152259 !important;
}

/* Header Separator */
.header .separator {
  width: 1px !important;
  height: 22px !important;
  background: #e2e8f0 !important;
  margin: 0 8px !important;
  border: none !important;
  display: inline-block !important;
}

/* Topbar User Profile Pill Box */
.userbox {
  margin: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.userbox .user-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 3px 12px 3px 4px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.userbox .user-pill-btn:hover,
.userbox.open .user-pill-btn {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  box-shadow: 0 4px 12px rgba(21, 34, 89, 0.08) !important;
  transform: translateY(-1px) !important;
}

.userbox .profile-picture {
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.userbox .user-avatar-topbar,
.userbox .profile-picture img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #50b5ff !important;
  box-shadow: 0 2px 6px rgba(80, 181, 255, 0.25) !important;
  display: block !important;
}

.userbox .profile-info {
  margin: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.userbox .profile-info .name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #152259 !important;
  letter-spacing: -0.01em !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.userbox .profile-info .role {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: capitalize !important;
}

.userbox .user-caret {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.userbox .user-pill-btn:hover .user-caret,
.userbox.open .user-caret {
  color: #152259 !important;
}

.userbox.open .user-caret {
  transform: rotate(180deg) !important;
}

/* Modern Dropdowns & Quick Menus */
.dropdown-menu,
.header .dropdown-menu,
.header-menu .header-menubox {
  background-color: var(--figma-white) !important;
  border: 1px solid var(--figma-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(21, 34, 89, 0.12), 0 8px 10px -6px rgba(21, 34, 89, 0.05) !important;
  padding: 8px !important;
}

.header .menu-icon-grid > a {
  color: var(--figma-text-dark) !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  transition: all 0.2s ease !important;
}

.header .menu-icon-grid > a:hover {
  background: var(--figma-blue-tint) !important;
  color: var(--figma-blue) !important;
}

.dropdown-menu > li > a {
  color: var(--figma-text-dark) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--figma-blue-tint) !important;
  color: var(--figma-blue) !important;
}

.userbox .dropdown-menu {
  top: 100% !important;
  margin-top: 8px !important;
  min-width: 240px !important;
  right: 0 !important;
  left: auto !important;
  border-top: 3px solid #50b5ff !important;
}

.userbox .dropdown-user li.user-p-box {
  padding: 10px 12px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}

.userbox .dropdown-user .dw-user-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.userbox .dropdown-user .dw-user-box .u-img img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #50b5ff !important;
}

.userbox .dropdown-user .dw-user-box .u-text h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #152259 !important;
  margin: 0 0 2px 0 !important;
}

.userbox .dropdown-user .dw-user-box .u-text p {
  font-size: 11px !important;
  color: #64748b !important;
  margin: 0 0 4px 0 !important;
}

.userbox .dropdown-user li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.userbox .dropdown-user li > a:hover {
  background: #eef2ff !important;
  color: #152259 !important;
  transform: translateX(3px) !important;
}

.userbox .dropdown-user li > a i {
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  color: #64748b !important;
  transition: color 0.15s ease !important;
}

.userbox .dropdown-user li > a:hover i {
  color: #50b5ff !important;
}

.userbox .dropdown-user .divider {
  margin: 4px 0 !important;
  border-color: #f1f5f9 !important;
}

/* ========================================================
   MODERN PROFESSIONAL SIDEBAR NAVIGATION SYSTEM (EXPANDED & COLLAPSED)
   ======================================================== */

/* Sidebar Base Container */
.sidebar-left,
html.sidebar-light .sidebar-left,
html.sidebar-light:not(.dark) .sidebar-left,
html.sidebar-light:not(.dark) .sidebar-left .nano,
.sidebar-left .nano-content {
  background: #101c48 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.sidebar-left .sidebar-header {
  background: #101c48 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
}

.sidebar-left .sidebar-title {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 16px 20px 8px 20px !important;
}

/* Neutralize legacy dividers and white icon capsules across ALL states */
ul.nav-main,
ul.nav-main li,
ul.nav-main li:not(.nav-children li) {
  border: none !important;
  border-bottom: none !important;
}

ul.nav-main li a i,
ul.nav-main li a i:not(.nav-children a i) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Keyframes for smooth animations */
@keyframes figmaFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes figmaTooltipIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* --------------------------------------------------------
   1. EXPANDED SIDEBAR NAVIGATION (Desktop default, ~230px)
   -------------------------------------------------------- */
html:not(.sidebar-left-collapsed) ul.nav-main {
  padding: 8px 0 !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main > li {
  margin: 2px 0 !important;
  padding: 0 !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main > li > a {
  color: #cbd5e1 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin: 2px 12px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main > li > a i {
  color: #94a3b8 !important;
  font-size: 16px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  margin-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main > li > a span {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover on Inactive Item */
html:not(.sidebar-left-collapsed) ul.nav-main > li:not(.nav-active) > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main > li:not(.nav-active) > a:hover i {
  color: #38bdf8 !important;
  transform: scale(1.1) !important;
}

/* Active Nav Item */
ul.nav-main > li.nav-active > a,
html:not(.sidebar-left-collapsed) ul.nav-main > li.nav-active > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a {
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

ul.nav-main > li.nav-active > a i,
html:not(.sidebar-left-collapsed) ul.nav-main > li.nav-active > a i,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a i {
  color: #ffffff !important;
}

/* Expanded Parent Header */
html:not(.sidebar-left-collapsed) ul.nav-main > li.nav-expanded > a {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Expanded Submenu Children */
html:not(.sidebar-left-collapsed) ul.nav-main li ul.nav-children {
  background: rgba(10, 18, 48, 0.7) !important;
  margin: 3px 12px 6px 12px !important;
  border-radius: 10px !important;
  padding: 6px 4px !important;
  border-left: 2px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main li ul.nav-children > li > a {
  color: #94a3b8 !important;
  padding: 7px 14px !important;
  margin: 2px 4px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main li ul.nav-children > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html:not(.sidebar-left-collapsed) ul.nav-main li ul.nav-children > li.nav-active > a {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------
   2. COLLAPSED SIDEBAR NAVIGATION (Mini-Dock, 72px)
   -------------------------------------------------------- */
html.sidebar-left-collapsed .sidebar-left,
html.sidebar-left-collapsed .sidebar-left .nano,
html.sidebar-left-collapsed .sidebar-left .nano:hover,
html.sidebar-left-sm.sidebar-left-collapsed .sidebar-left,
html.sidebar-left-sm.sidebar-left-collapsed .sidebar-left .nano,
html.sidebar-left-sm.sidebar-left-collapsed.fixed .sidebar-left .nano:hover {
  width: 72px !important;
}

html.sidebar-left-collapsed .sidebar-left {
  overflow: visible !important;
}

html.sidebar-left-collapsed .sidebar-left .nano {
  overflow: visible !important;
}

html.sidebar-left-collapsed .sidebar-left .nano-content {
  overflow-x: visible !important;
}

html.sidebar-left-collapsed .sidebar-left .sidebar-title {
  display: none !important;
}

html.sidebar-left-collapsed ul.nav-main {
  padding: 10px 0 !important;
}

html.sidebar-left-collapsed ul.nav-main > li {
  margin: 6px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  position: relative !important;
  border: none !important;
  border-bottom: none !important;
}

/* Perfectly Centered 44×44px Squircle Buttons */
html.sidebar-left-collapsed ul.nav-main > li > a {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  position: relative !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Perfectly Centered Icon Glyph */
html.sidebar-left-collapsed ul.nav-main > li > a i {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

/* Hide text & arrows in resting collapsed state */
html.sidebar-left-collapsed ul.nav-main > li > a > span {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent > a:after {
  display: none !important;
  content: none !important;
}

/* Collapsed Inactive Item Hover */
html.sidebar-left-collapsed ul.nav-main > li:not(.nav-active) > a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #38bdf8 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.sidebar-left-collapsed ul.nav-main > li:not(.nav-active) > a:hover i {
  color: #38bdf8 !important;
  transform: scale(1.05) !important;
}

/* Collapsed Active Item (Vibrant Illuminated Squircle) */
html.sidebar-left-collapsed ul.nav-main > li.nav-active > a {
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5) !important;
  transform: scale(1.05) !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-active > a i {
  color: #ffffff !important;
  font-size: 19px !important;
}

/* Collapsed Single Item Hover Tooltip */
html.sidebar-left-collapsed ul.nav-main > li:not(.nav-parent):hover > a > span {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  left: 56px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  z-index: 10050 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  animation: figmaTooltipIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Collapsed Parent Item Flyout Submenu Card */
html.sidebar-left-collapsed ul.nav-main > li.nav-parent > ul.nav-children {
  display: none !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children {
  display: block !important;
  position: absolute !important;
  left: 62px !important;
  top: -4px !important;
  min-width: 220px !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 8px 6px !important;
  margin: 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  z-index: 10050 !important;
  animation: figmaFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children > li {
  margin: 2px 0 !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children > li > a {
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  border-radius: 8px !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children > li > a span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 13px !important;
  color: inherit !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children > li > a:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  color: #38bdf8 !important;
  transform: translateX(2px) !important;
}

html.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children > li.nav-active > a {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

/* Nano Scroller */
.nano > .nano-pane > .nano-slider,
html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
  background: var(--figma-blue) !important;
  border-radius: 4px !important;
}

/* Page Header & Icon */
.page-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 16px 0 10px 0 !important;
}

.page-header h2 {
  color: var(--figma-navy) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  border: none !important;
}

.page-header .page-title-icon {
  background: var(--figma-white) !important;
  color: var(--figma-blue) !important;
  border: 1px solid var(--figma-border) !important;
  box-shadow: 0 2px 6px rgba(21, 34, 89, 0.05) !important;
  border-radius: 8px !important;
}

.page-header .page-title-icon:hover {
  background: var(--figma-blue) !important;
  color: var(--figma-white) !important;
  border-color: var(--figma-blue) !important;
}

/* Panels, Cards & Sections */
.panel,
.card {
  background-color: var(--figma-white) !important;
  border: 1px solid var(--figma-border-subtle) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(21, 34, 89, 0.04) !important;
  margin-bottom: 20px !important;
}

.panel-heading {
  background-color: var(--figma-white) !important;
  border-bottom: 1px solid var(--figma-border-subtle) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding: 14px 18px !important;
}

.panel-title {
  color: var(--figma-navy) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.panel-body {
  padding: 18px !important;
  background-color: var(--figma-white) !important;
}

.panel-footer {
  background-color: var(--figma-white) !important;
  border-top: 1px solid var(--figma-border-subtle) !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.panel-featured-primary {
  border-left-color: var(--figma-blue) !important;
}

.panel-heading-primary {
  background-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

/* Buttons */
.btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-primary,
body .btn-primary {
  background-color: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
  box-shadow: 0 2px 8px rgba(80, 181, 255, 0.25) !important;
}

.btn-primary:hover,
body .btn-primary:hover {
  background-color: var(--figma-blue-hover) !important;
  border-color: var(--figma-blue-hover) !important;
  color: var(--figma-white) !important;
  box-shadow: 0 4px 12px rgba(80, 181, 255, 0.35) !important;
}

.btn-primary:active,
.btn-primary:focus,
body .btn-primary:active,
body .btn-primary:focus {
  background-color: var(--figma-blue-active) !important;
  border-color: var(--figma-blue-active) !important;
  color: var(--figma-white) !important;
  box-shadow: 0 0 0 3px rgba(80, 181, 255, 0.35) !important;
}

.btn-primary[disabled],
body .btn-primary[disabled] {
  background-color: #A3D8FF !important;
  border-color: #A3D8FF !important;
  color: var(--figma-white) !important;
}

.btn-default,
body .btn-default {
  background-color: var(--figma-white) !important;
  border-color: var(--figma-border) !important;
  color: var(--figma-navy) !important;
}

.btn-default:hover,
body .btn-default:hover {
  background-color: var(--figma-bg) !important;
  border-color: #CBD5E1 !important;
  color: var(--figma-navy) !important;
}

html:not([data-theme="dark"]):not(.dark) .btn-default:active,
html:not([data-theme="dark"]):not(.dark) .btn-default:focus,
html:not([data-theme="dark"]):not(.dark) body .btn-default:active,
html:not([data-theme="dark"]):not(.dark) body .btn-default:focus {
  background-color: #EDF2F7 !important;
  border-color: #94A3B8 !important;
}

/* Tables */
.table {
  color: var(--figma-text-dark) !important;
}

.table > thead > tr > th {
  background-color: var(--figma-bg) !important;
  color: var(--figma-navy) !important;
  border-bottom: 2px solid var(--figma-border-subtle) !important;
  border-top: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 14px !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--figma-border-subtle) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover,
.table-hover > tbody > tr:hover {
  background-color: var(--figma-blue-soft) !important;
}

/* Selected Table Row matching Figma Mockup */
.table > tbody > tr.selected,
.table > tbody > tr.active,
table.dataTable tbody tr.selected {
  background-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

.table > tbody > tr.selected td,
.table > tbody > tr.active td,
table.dataTable tbody tr.selected td {
  color: var(--figma-white) !important;
  background-color: var(--figma-blue) !important;
}

.table > tbody > tr.selected a,
.table > tbody > tr.active a,
table.dataTable tbody tr.selected a {
  color: var(--figma-white) !important;
  text-decoration: underline;
}

/* Form Controls & Inputs */
.form-control {
  background-color: var(--figma-white) !important;
  border: 1px solid var(--figma-border) !important;
  border-radius: 6px !important;
  color: var(--figma-text-dark) !important;
  height: 38px;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--figma-blue) !important;
  box-shadow: 0 0 0 3px rgba(80, 181, 255, 0.2) !important;
}

.form-control::placeholder {
  color: var(--figma-text-muted) !important;
}

/* Select2 Plugin */
.select2-container--bootstrap .select2-selection {
  border: 1px solid var(--figma-border) !important;
  border-radius: 6px !important;
  height: 38px !important;
  color: var(--figma-text-dark) !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: var(--figma-blue) !important;
  box-shadow: 0 0 0 3px rgba(80, 181, 255, 0.2) !important;
}

.select2-container--bootstrap .select2-dropdown {
  border-color: var(--figma-blue) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(21, 34, 89, 0.12) !important;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

/* Tabs */
.nav-tabs {
  border-bottom: 2px solid var(--figma-border-subtle) !important;
}

.nav-tabs > li > a {
  color: var(--figma-text-muted) !important;
  border: none !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.nav-tabs > li > a:hover {
  color: var(--figma-navy) !important;
  background: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--figma-navy) !important;
  font-weight: 700 !important;
  border: none !important;
  border-bottom: 3px solid var(--figma-blue) !important;
  background: transparent !important;
}

.tabs-primary .nav-tabs > li.active > a {
  border-top-color: var(--figma-blue) !important;
  color: var(--figma-blue) !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  color: var(--figma-navy) !important;
  border-color: var(--figma-border) !important;
  background-color: var(--figma-white) !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  color: var(--figma-blue) !important;
  background-color: var(--figma-blue-tint) !important;
  border-color: var(--figma-blue) !important;
}

.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover,
.pagination > li.active > a:focus,
.pagination > li.active > span:focus,
html .pagination > li.active a {
  background-color: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
  box-shadow: 0 2px 6px rgba(80, 181, 255, 0.3) !important;
}

/* Badges & Labels */
.label-primary,
.badge-primary,
.bg-primary {
  background-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

.label-dark,
.badge-dark {
  background-color: var(--figma-navy) !important;
  color: var(--figma-white) !important;
}

.text-primary {
  color: var(--figma-blue) !important;
}

.highlight {
  background-color: var(--figma-blue-tint) !important;
  color: var(--figma-blue-active) !important;
}

/* Dashboard Widgets & Top Lines */
.box-top-line.line-color-primary {
  border-color: var(--figma-blue) !important;
}

.widget-row-in i {
  color: var(--figma-blue) !important;
}

/* FullCalendar */
.fc .fc-toolbar h2:before {
  color: var(--figma-blue) !important;
}

.fc .fc-toolbar .fc-button.fc-state-active {
  background-color: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

.fc-event,
.fc-event.fc-event-primary {
  background: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
}

/* Datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
}

/* Dropify File Upload */
.dropify-wrapper {
  border: 2px dashed var(--figma-border) !important;
  border-radius: 8px !important;
  background-color: var(--figma-white) !important;
}

.dropify-wrapper:hover {
  border-color: var(--figma-blue) !important;
}

/* Loading Overlay / Preloader */
.loading-overlay {
  background: var(--figma-navy) !important;
}

.loading-overlay .ring-loader {
  color: var(--figma-white) !important;
}

.loading-overlay .ring-loader span {
  border-top-color: var(--figma-blue) !important;
}

/* Modal Styling */
.modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 16px 40px rgba(21, 34, 89, 0.16) !important;
}

.modal-header {
  border-bottom: 1px solid var(--figma-border-subtle) !important;
  background-color: var(--figma-white) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.modal-header .modal-title {
  color: var(--figma-navy) !important;
  font-weight: 700 !important;
}

.modal-footer {
  border-top: 1px solid var(--figma-border-subtle) !important;
  background-color: var(--figma-white) !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Login Page Specific Styling */
.auth-main {
  background-color: var(--figma-bg) !important;
}

.image-area {
  background: var(--figma-navy) !important;
  box-shadow: 0 10px 30px rgba(21, 34, 89, 0.15) !important;
}

.image-area:before {
  background: linear-gradient(135deg, var(--figma-navy) 0%, var(--figma-navy-dark) 100%) !important;
  opacity: 0.95 !important;
}

.image-area .image-hader h2:before {
  background: var(--figma-blue) !important;
}

.f-social-links a span {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(80, 181, 255, 0.3) !important;
  box-shadow: none !important;
}

.f-social-links a span:hover {
  background: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
}

.sign-area {
  background: var(--figma-white) !important;
  color: var(--figma-navy) !important;
  box-shadow: 0 10px 30px rgba(21, 34, 89, 0.08) !important;
  border: 1px solid var(--figma-border-subtle) !important;
}

.sign-area::before {
  border-right-color: var(--figma-white) !important;
}

.sign-area .sign-hader h2 {
  color: var(--figma-navy) !important;
  font-weight: 700 !important;
}

.sign-area .form-control {
  background-color: var(--figma-bg) !important;
  border: 1px solid var(--figma-border) !important;
  color: var(--figma-navy) !important;
}

.sign-area .input-group-addon {
  background-color: var(--figma-bg) !important;
  border-color: var(--figma-border) !important;
  color: var(--figma-blue) !important;
}

.sign-area .forgot-text a {
  color: var(--figma-blue) !important;
}

.sign-area .forgot-text a:hover {
  color: var(--figma-blue-hover) !important;
}

#btn_submit,
.sign-area button[type="submit"] {
  background-color: var(--figma-blue) !important;
  border-color: var(--figma-blue) !important;
  color: var(--figma-white) !important;
  box-shadow: 0 4px 14px rgba(80, 181, 255, 0.35) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#btn_submit:hover,
.sign-area button[type="submit"]:hover {
  background-color: var(--figma-blue-hover) !important;
  border-color: var(--figma-blue-hover) !important;
}

/* ========================================================
   ADMIN DASHBOARD THEME TOGGLE BUTTON
   ======================================================== */
.admin-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--figma-navy) !important;
}

.admin-theme-toggle {
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.admin-theme-toggle:hover {
  background-color: var(--figma-blue-tint) !important;
  color: var(--figma-blue) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* Light mode defaults: Moon icon shown, Sun icon hidden */
.admin-theme-toggle .admin-theme-icon-dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #475569 !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}

.admin-theme-toggle .admin-theme-icon-light {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}

.admin-theme-toggle:hover .admin-theme-icon-dark {
  color: #4f46e5 !important;
  transform: rotate(-15deg) scale(1.1) !important;
}

/* Dark mode (both [data-theme="dark"] and html.dark): Sun icon shown, Moon icon hidden */
[data-theme="dark"] .admin-theme-toggle .admin-theme-icon-dark,
html.dark .admin-theme-toggle .admin-theme-icon-dark {
  display: none !important;
}

[data-theme="dark"] .admin-theme-toggle .admin-theme-icon-light,
html.dark .admin-theme-toggle .admin-theme-icon-light {
  display: inline-flex !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .admin-theme-toggle:hover,
html.dark .admin-theme-toggle:hover {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25) !important;
}

[data-theme="dark"] .admin-theme-toggle:hover .admin-theme-icon-light,
html.dark .admin-theme-toggle:hover .admin-theme-icon-light {
  color: #fde047 !important;
  transform: rotate(45deg) scale(1.15) !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.75)) !important;
}

/* ========================================================
   COMPREHENSIVE DARK MODE OVERRIDES FOR ADMIN DASHBOARD
   ======================================================== */
[data-theme="dark"],
html.dark {
  --figma-navy: #60a5fa;
  --figma-navy-dark: #070d1e;
  --figma-navy-hover: #1e293b;
  --figma-blue: #38bdf8;
  --figma-blue-hover: #60a5fa;
  --figma-blue-active: #93c5fd;
  --figma-blue-tint: rgba(56, 189, 248, 0.15);
  --figma-blue-soft: rgba(56, 189, 248, 0.08);
  --figma-bg: #090e1a;
  --figma-white: #111a2e;
  --figma-text-dark: #f1f5f9;
  --figma-text-muted: #94a3b8;
  --figma-text-sidebar: #cbd5e1;
  --figma-border: #1e293b;
  --figma-border-subtle: #162035;
}

/* Smooth Transition on Mode Switch */
html,
body,
.header,
.sidebar-left,
.content-body,
.panel,
.card,
.modal-content {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Base Body & Layout in Dark Mode */
[data-theme="dark"] body,
html.dark body,
[data-theme="dark"] .body,
html.dark .body,
[data-theme="dark"] .content-body,
html.dark .content-body,
[data-theme="dark"] .inner-wrapper,
html.dark .inner-wrapper {
  background-color: #090e1a !important;
  color: #cbd5e1 !important;
}

/* Topbar Header in Dark Mode */
[data-theme="dark"] .header,
html.dark .header {
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .header .logo-env,
html.dark .header .logo-env,
[data-theme="dark"] html.sidebar-light:not(.dark) .header .logo-env {
  background: #090e1a !important;
  border-right: 1px solid #1e293b !important;
}

[data-theme="dark"] .header-menu-icon,
html.dark .header-menu-icon,
[data-theme="dark"] .header-menu > li .header-menu-icon,
html.dark .header-menu > li .header-menu-icon,
[data-theme="dark"] .header-menu > li > a.header-menu-icon,
html.dark .header-menu > li > a.header-menu-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .header-menu-icon i:not(.admin-theme-icon-light),
html.dark .header-menu-icon i:not(.admin-theme-icon-light),
[data-theme="dark"] .header-menu > li .header-menu-icon i:not(.admin-theme-icon-light),
html.dark .header-menu > li .header-menu-icon i:not(.admin-theme-icon-light),
[data-theme="dark"] .sidebar-toggle i,
html.dark .sidebar-toggle i,
[data-theme="dark"] .s-expand i,
html.dark .s-expand i,
[data-theme="dark"] .dropdown-toggle i,
html.dark .dropdown-toggle i {
  color: #f1f5f9 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fullscreen icon support */
.s-expand i.fa-expand::before,
.s-expand i.fa-expand-arrows-alt::before {
  content: "\f31e" !important;
}

[data-theme="dark"] .header-menu-icon:hover,
html.dark .header-menu-icon:hover,
[data-theme="dark"] .header-menu > li .header-menu-icon:hover,
html.dark .header-menu > li .header-menu-icon:hover,
[data-theme="dark"] .header-menu > li.open .header-menu-icon,
html.dark .header-menu > li.open .header-menu-icon,
[data-theme="dark"] .sidebar-toggle:hover,
html.dark .sidebar-toggle:hover,
[data-theme="dark"] .s-expand:hover,
html.dark .s-expand:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .header-menu-icon:hover i:not(.admin-theme-icon-light),
html.dark .header-menu-icon:hover i:not(.admin-theme-icon-light),
[data-theme="dark"] .header-menu > li .header-menu-icon:hover i:not(.admin-theme-icon-light),
html.dark .header-menu > li .header-menu-icon:hover i:not(.admin-theme-icon-light),
[data-theme="dark"] .header-menu > li.open .header-menu-icon i:not(.admin-theme-icon-light),
html.dark .header-menu > li.open .header-menu-icon i:not(.admin-theme-icon-light),
[data-theme="dark"] .sidebar-toggle:hover i,
html.dark .sidebar-toggle:hover i,
[data-theme="dark"] .s-expand:hover i,
html.dark .s-expand:hover i {
  color: #38bdf8 !important;
}

[data-theme="dark"] .header .input-search,
html.dark .header .input-search {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .header .input-search:focus-within,
html.dark .header .input-search:focus-within {
  background: #090e1a !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .header .input-search input.form-control,
html.dark .header .input-search input.form-control {
  color: #f8fafc !important;
}

[data-theme="dark"] .header .input-search input.form-control::placeholder,
html.dark .header .input-search input.form-control::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .header .input-search .btn,
html.dark .header .input-search .btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .header .input-search .btn:hover,
html.dark .header .input-search .btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .header .separator,
html.dark .header .separator {
  background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .userbox .user-pill-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .userbox .user-pill-btn:hover,
[data-theme="dark"] .userbox.open .user-pill-btn {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .userbox .profile-info .name {
  color: #f8fafc !important;
}

[data-theme="dark"] .userbox .profile-info .role {
  color: #94a3b8 !important;
}

[data-theme="dark"] .userbox .user-caret {
  color: #64748b !important;
}

[data-theme="dark"] .userbox .user-pill-btn:hover .user-caret,
[data-theme="dark"] .userbox.open .user-caret {
  color: #38bdf8 !important;
}

[data-theme="dark"] .header .dropdown-menu,
[data-theme="dark"] .userbox .dropdown-menu,
[data-theme="dark"] .header-menu .header-menubox {
  background: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .userbox .dropdown-user li.user-p-box {
  background: #090e1a !important;
}

[data-theme="dark"] .userbox .dropdown-user .dw-user-box .u-text h4 {
  color: #f8fafc !important;
}

[data-theme="dark"] .userbox .dropdown-user .dw-user-box .u-text p {
  color: #94a3b8 !important;
}

[data-theme="dark"] .userbox .dropdown-user li > a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .userbox .dropdown-user li > a:hover {
  background: #1e293b !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .userbox .dropdown-user li > a i {
  color: #94a3b8 !important;
}

[data-theme="dark"] .userbox .dropdown-user li > a:hover i {
  color: #38bdf8 !important;
}

[data-theme="dark"] .userbox .dropdown-user .divider {
  border-color: #1e293b !important;
}

/* Sidebar in Dark Mode */
[data-theme="dark"] .sidebar-left,
html.dark .sidebar-left,
[data-theme="dark"] .sidebar-left .nano,
html.dark .sidebar-left .nano,
[data-theme="dark"] .sidebar-left .nano-content,
html.dark .sidebar-left .nano-content {
  background-color: #0b1120 !important;
  border-right: 1px solid #1e293b !important;
  box-shadow: none !important;
}

[data-theme="dark"] .sidebar-left .sidebar-header,
html.dark .sidebar-left .sidebar-header {
  background-color: #0b1120 !important;
  border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] ul.nav-main > li > a,
html.dark ul.nav-main > li > a {
  color: #94a3b8 !important;
}

[data-theme="dark"] ul.nav-main > li > a:hover,
html.dark ul.nav-main > li > a:hover {
  color: #38bdf8 !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
}

[data-theme="dark"] ul.nav-main > li.nav-active > a,
html.dark ul.nav-main > li.nav-active > a {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

[data-theme="dark"] ul.nav-main > li.nav-active > a i,
html.dark ul.nav-main > li.nav-active > a i {
  color: #ffffff !important;
}

[data-theme="dark"] ul.nav-main > li.nav-expanded > a,
html.dark ul.nav-main > li.nav-expanded > a {
  background-color: rgba(15, 23, 42, 0.75) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] ul.nav-main li .nav-children,
html.dark ul.nav-main li .nav-children {
  background-color: #070d18 !important;
}

[data-theme="dark"] ul.nav-main li .nav-children li a,
html.dark ul.nav-main li .nav-children li a {
  color: #94a3b8 !important;
}

[data-theme="dark"] ul.nav-main li .nav-children li a:hover,
html.dark ul.nav-main li .nav-children li a:hover,
[data-theme="dark"] ul.nav-main li .nav-children li.nav-active a,
html.dark ul.nav-main li .nav-children li.nav-active a {
  color: #38bdf8 !important;
}

/* Collapsed Flyout Submenu in Dark Mode */
html.dark.sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children,
[data-theme="dark"].sidebar-left-collapsed ul.nav-main > li.nav-parent:hover > ul.nav-children {
  background: #090e1a !important;
  border-color: #1e293b !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65) !important;
}

html.dark.sidebar-left-collapsed ul.nav-main > li:not(.nav-parent):hover > a > span,
[data-theme="dark"].sidebar-left-collapsed ul.nav-main > li:not(.nav-parent):hover > a > span {
  background: #090e1a !important;
  border-color: #1e293b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Panels & Cards in Dark Mode */
[data-theme="dark"] .panel,
[data-theme="dark"] .card {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
  color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .panel-heading,
[data-theme="dark"] .card-header {
  background-color: #152038 !important;
  border-bottom: 1px solid #1e293b !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .panel-title,
[data-theme="dark"] .card-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .panel-body,
[data-theme="dark"] .card-body {
  background-color: #111a2e !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .panel-footer,
[data-theme="dark"] .card-footer {
  background-color: #0d1527 !important;
  border-top: 1px solid #1e293b !important;
}

/* Headings & Text Colors in Dark Mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: #f8fafc !important;
}

[data-theme="dark"] .text-dark,
html.dark .text-dark {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .text-muted,
html.dark .text-muted {
  color: #94a3b8 !important;
}

[data-theme="dark"] .text-danger,
html.dark .text-danger {
  color: #f87171 !important;
}

[data-theme="dark"] .text-success,
html.dark .text-success {
  color: #4ade80 !important;
}

[data-theme="dark"] .text-warning,
html.dark .text-warning {
  color: #facc15 !important;
}

[data-theme="dark"] .text-info,
html.dark .text-info {
  color: #38bdf8 !important;
}

[data-theme="dark"] .text-primary,
html.dark .text-primary {
  color: #60a5fa !important;
}

[data-theme="dark"] p,
html.dark p {
  color: #cbd5e1 !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .control-label,
html.dark label,
html.dark .control-label {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .required,
html.dark .required {
  color: #f87171 !important;
}

[data-theme="dark"] .page-header {
  background: transparent !important;
  border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] .page-header h2 {
  color: #f8fafc !important;
}

[data-theme="dark"] .breadcrumbs a {
  color: #94a3b8 !important;
}

[data-theme="dark"] .breadcrumbs a:hover {
  color: #38bdf8 !important;
}

/* Tables in Dark Mode */
[data-theme="dark"] .table,
html.dark .table {
  color: #cbd5e1 !important;
  background-color: #111a2e !important;
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > th,
html.dark .table > thead > tr > th,
html.dark .table > tbody > tr > th,
html.dark .table > tfoot > tr > th {
  background-color: #152038 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  border-top: none !important;
}

[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td,
html.dark .table > tbody > tr > td,
html.dark .table > tfoot > tr > td {
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
  background-color: transparent !important;
}

[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > thead > tr > th,
[data-theme="dark"] .table-bordered > tbody > tr > th,
[data-theme="dark"] .table-bordered > tfoot > tr > th,
[data-theme="dark"] .table-bordered > thead > tr > td,
[data-theme="dark"] .table-bordered > tbody > tr > td,
[data-theme="dark"] .table-bordered > tfoot > tr > td,
html.dark .table-bordered,
html.dark .table-bordered > thead > tr > th,
html.dark .table-bordered > tbody > tr > th,
html.dark .table-bordered > tfoot > tr > th,
html.dark .table-bordered > thead > tr > td,
html.dark .table-bordered > tbody > tr > td,
html.dark .table-bordered > tfoot > tr > td {
  border-color: #1e293b !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html.dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover,
html.dark .table-hover > tbody > tr:hover {
  background-color: rgba(56, 189, 248, 0.06) !important;
}

/* Buttons in Dark Mode */
[data-theme="dark"] .btn-default,
[data-theme="dark"] body .btn-default,
html.dark .btn-default,
html.dark body .btn-default {
  background-color: #152038 !important;
  border-color: #233252 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] body .btn-default:hover,
html.dark .btn-default:hover,
html.dark body .btn-default:hover {
  background-color: #1e2c4a !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] body .btn-default:active,
[data-theme="dark"] body .btn-default:focus,
html.dark .btn-default:active,
html.dark .btn-default:focus,
html.dark body .btn-default:active,
html.dark body .btn-default:focus {
  background-color: #1e2c4a !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

[data-theme="dark"] .btn-circle.btn-default,
html.dark .btn-circle.btn-default {
  background-color: #152038 !important;
  border-color: #233252 !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .btn-circle.btn-default:hover,
html.dark .btn-circle.btn-default:hover {
  background-color: #1e2c4a !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dt-buttons .btn,
[data-theme="dark"] .dt-buttons .btn-default,
[data-theme="dark"] .dt-button,
html.dark .dt-buttons .btn,
html.dark .dt-buttons .btn-default,
html.dark .dt-button {
  background-color: #152038 !important;
  border: 1px solid #233252 !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .dt-buttons .btn:hover,
[data-theme="dark"] .dt-buttons .btn-default:hover,
[data-theme="dark"] .dt-button:hover,
html.dark .dt-buttons .btn:hover,
html.dark .dt-buttons .btn-default:hover,
html.dark .dt-button:hover {
  background-color: #1e2c4a !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

/* Checkboxes in Dark Mode */
[data-theme="dark"] .checkbox-replace .i-checks > i,
html.dark .checkbox-replace .i-checks > i {
  border-color: #334155 !important;
  background-color: #0b1120 !important;
}

[data-theme="dark"] .checkbox-replace .i-checks input:checked + i,
html.dark .checkbox-replace .i-checks input:checked + i {
  border-color: #38bdf8 !important;
}

[data-theme="dark"] .checkbox-replace .i-checks input:checked + i:before,
html.dark .checkbox-replace .i-checks input:checked + i:before {
  background-color: #38bdf8 !important;
}

[data-theme="dark"] .dataTables_wrapper {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_filter {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dataTables_filter input {
  background-color: #0b1120 !important;
  border: 1px solid #233252 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  background-color: #111a2e !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span {
  background-color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #090e1a !important;
  font-weight: 700;
}

/* Forms & Inputs in Dark Mode */
[data-theme="dark"] .form-control {
  background-color: #0b1120 !important;
  border: 1px solid #233252 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .input-group-addon {
  background-color: #152038 !important;
  border: 1px solid #233252 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] select.form-control option {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .select2-container--bootstrap .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: #0b1120 !important;
  border-color: #233252 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .select2-container--bootstrap .select2-selection .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .select2-dropdown {
  background-color: #111a2e !important;
  border-color: #233252 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .select2-results__option {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .select2-results__option--highlighted {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-search__field {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
  border: 1px solid #233252 !important;
}

/* Dropdowns & Menus in Dark Mode */
[data-theme="dark"] .dropdown-menu {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: #152038 !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .dropdown-menu .divider {
  background-color: #1e293b !important;
}

[data-theme="dark"] .header .dropdown-menu.header-menubox {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
}

[data-theme="dark"] .header .dropdown-menu.header-menubox .notification-title {
  background-color: #152038 !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] .header .dropdown-menu.header-menubox .notification-footer {
  background-color: #0d1527 !important;
  border-top: 1px solid #1e293b !important;
}

[data-theme="dark"] .header .menu-icon-grid > a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .header .menu-icon-grid > a:hover {
  background-color: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .userbox .dropdown-menu .dw-user-box {
  border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] .userbox .dropdown-menu .dw-user-box .u-text h4 {
  color: #f8fafc !important;
}

/* Tabs & Accordions in Dark Mode */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .nav-tabs > li > a {
  color: #94a3b8 !important;
  background-color: transparent !important;
}

[data-theme="dark"] .nav-tabs > li > a:hover {
  color: #38bdf8 !important;
  border-color: transparent transparent #1e293b !important;
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  color: #38bdf8 !important;
  background-color: #111a2e !important;
  border-color: #1e293b #1e293b transparent !important;
}

[data-theme="dark"] .tab-content {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
}

[data-theme="dark"] .panel-group .panel-heading a {
  color: #f8fafc !important;
  background-color: #152038 !important;
}

/* Modals in Dark Mode */
[data-theme="dark"] .modal-content {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
  color: #cbd5e1 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .modal-header {
  background-color: #152038 !important;
  border-bottom: 1px solid #1e293b !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-footer {
  background-color: #0d1527 !important;
  border-top: 1px solid #1e293b !important;
}

/* Dashboard Widget Cards in Dark Mode */
[data-theme="dark"] .widget-summary {
  background-color: #111a2e !important;
  border: 1px solid #1e293b !important;
}

[data-theme="dark"] .widget-summary .summary-icon {
  background-color: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .widget-summary .title {
  color: #94a3b8 !important;
}

[data-theme="dark"] .widget-summary .amount {
  color: #f8fafc !important;
}

/* Alerts & Badges in Dark Mode */
[data-theme="dark"] .alert-info {
  background-color: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: #facc15 !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}

/* ========================================================
   PROGRESS BARS DESIGN SYSTEM (LIGHT & DARK MODES)
   ======================================================== */
.progress {
  background-color: #e2e8f0 !important;
  border-radius: 9999px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #cbd5e1 !important;
  position: relative !important;
  overflow: hidden !important;
}

.progress .progress-bar {
  background: linear-gradient(90deg, #2563eb, #38bdf8) !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 18px !important;
  box-shadow: none !important;
  transition: width 0.4s ease !important;
}

.progress .progress-val-low {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #152259;
  pointer-events: none;
  line-height: 18px;
  z-index: 2;
}

.progress .text-dark,
.progress-bar.text-dark {
  color: #152259 !important;
  font-weight: 600 !important;
}

/* Dark Mode Overrides for Progress Bars */
[data-theme="dark"] .progress,
html.dark .progress {
  background-color: #0b132b !important;
  border: 1px solid #233252 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .progress .progress-bar,
html.dark .progress .progress-bar {
  background: linear-gradient(90deg, #1d4ed8, #38bdf8) !important;
  background-color: #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .progress .progress-val-low,
html.dark .progress .progress-val-low {
  color: #38bdf8 !important;
}

[data-theme="dark"] .progress .text-dark,
[data-theme="dark"] .progress-bar.text-dark,
html.dark .progress .text-dark,
html.dark .progress-bar.text-dark {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

/* Labels & Badges in Dark Mode */
[data-theme="dark"] .label-default,
html.dark .label-default {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .label-primary,
html.dark .label-primary {
  background-color: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .label-success,
html.dark .label-success {
  background-color: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .label-warning,
html.dark .label-warning {
  background-color: rgba(234, 179, 8, 0.2) !important;
  color: #facc15 !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

[data-theme="dark"] .label-danger,
html.dark .label-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .label-info,
html.dark .label-info {
  background-color: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* SweetAlert & Modals in Dark Mode */
[data-theme="dark"] .swal2-modal,
[data-theme="dark"] .sweet-alert,
[data-theme="dark"] .swal2-popup,
html.dark .swal2-modal,
html.dark .sweet-alert,
html.dark .swal2-popup {
  background-color: #111a2e !important;
  color: #cbd5e1 !important;
  border: 1px solid #1e293b !important;
}

[data-theme="dark"] .swal2-modal .swal2-title,
[data-theme="dark"] .sweet-alert h2,
[data-theme="dark"] .swal2-popup .swal2-title,
html.dark .swal2-modal .swal2-title,
html.dark .sweet-alert h2,
html.dark .swal2-popup .swal2-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .swal2-modal .swal2-content,
[data-theme="dark"] .sweet-alert p,
[data-theme="dark"] .swal2-popup .swal2-content,
html.dark .swal2-modal .swal2-content,
html.dark .sweet-alert p,
html.dark .swal2-popup .swal2-content {
  color: #94a3b8 !important;
}

/* ========================================================
   EXPERT PROFILE HEADER DESIGN SYSTEM (STUDENT, STAFF, PARENT)
   ======================================================== */
.profile-head {
  padding: 26px 28px !important;
  border-radius: 18px !important;
  position: relative !important;
  background: linear-gradient(135deg, #101c48 0%, #152259 45%, #1c3078 100%) !important;
  background-image: linear-gradient(135deg, rgba(13, 22, 59, 0.92) 0%, rgba(21, 34, 89, 0.86) 50%, rgba(28, 48, 120, 0.84) 100%), url(../images/profile_bg.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  background-size: cover !important;
  overflow: hidden !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(21, 34, 89, 0.16) !important;
  border: 1px solid rgba(80, 181, 255, 0.22) !important;
}

/* Eliminate old ugly skewed pink polygon */
.profile-head::before {
  display: none !important;
  content: none !important;
}

/* Subtle modern decorative glow overlay */
.profile-head::after {
  content: "" !important;
  position: absolute !important;
  top: -60% !important;
  right: -20% !important;
  width: 550px !important;
  height: 550px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(80, 181, 255, 0.16) 0%, rgba(80, 181, 255, 0) 70%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.profile-head > div {
  position: relative !important;
  z-index: 2 !important;
}

/* Modern Student / User Avatar Frame */
.image-content-center.user-pro {
  width: 154px !important;
  height: 154px !important;
  max-width: 154px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.image-content-center.user-pro:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35) !important;
  border-color: #ffffff !important;
}

.image-content-center.user-pro .preview {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
}

.image-content-center.user-pro .preview img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  top: auto !important;
  transform: none !important;
  position: static !important;
}

/* Headings & Badges */
.profile-head h5 {
  font-family: 'Signika', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  line-height: 1.25 !important;
}

.profile-head p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

.profile-head .profile-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.profile-head .profile-badges .badge-pill-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  backdrop-filter: blur(6px) !important;
}

.profile-head .profile-badges .badge-pill-item.active-status {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #86efac !important;
}

.profile-head .profile-badges .badge-pill-item.inactive-status {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

.profile-head .profile-badges .badge-pill-item.reg-no {
  background: rgba(80, 181, 255, 0.22) !important;
  border-color: rgba(80, 181, 255, 0.45) !important;
  color: #e0f2fe !important;
}

/* Modern Info Grid replacing awkward list */
.profile-head ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap: 10px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 991px) {
  .profile-head ul {
    grid-template-columns: 1fr !important;
  }
}

.profile-head ul li {
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 2px 0 !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

.profile-head ul li strong {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 600 !important;
  margin-right: 5px !important;
}

/* Replace ugly yellow rotated diamonds with modern rounded badges */
.profile-head ul li .icon-holder {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  background: rgba(80, 181, 255, 0.22) !important;
  border: 1px solid rgba(80, 181, 255, 0.38) !important;
  color: #50b5ff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  transform: none !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  z-index: 2 !important;
}

.profile-head ul li .icon-holder::before,
.profile-head ul li .icon-holder::after,
html.dark .profile-head ul li .icon-holder::before {
  display: none !important;
  content: none !important;
}

.profile-head ul li .icon-holder i {
  font-size: 13px !important;
  color: #50b5ff !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.profile-head ul li .icon-holder i::before {
  color: #50b5ff !important;
  line-height: 1 !important;
  font-size: 13px !important;
}

.profile-head ul li:hover .icon-holder {
  background: #50b5ff !important;
  border-color: #50b5ff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(80, 181, 255, 0.4) !important;
}

.profile-head ul li:hover .icon-holder i,
.profile-head ul li:hover .icon-holder i::before {
  color: #0d163b !important;
}

/* Profile Quick Actions & Stats Card */
.profile-quick-actions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  height: 100% !important;
  gap: 14px !important;
  padding: 10px 0 !important;
}

@media (max-width: 991px) {
  .profile-quick-actions {
    align-items: flex-start !important;
    margin-top: 18px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

.profile-quick-actions .btn-profile-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.profile-quick-actions .btn-profile-action.primary {
  background: #50b5ff !important;
  color: #0d163b !important;
  border: 1px solid #50b5ff !important;
  box-shadow: 0 4px 14px rgba(80, 181, 255, 0.35) !important;
}

.profile-quick-actions .btn-profile-action.primary:hover {
  background: #38a7f8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(80, 181, 255, 0.45) !important;
  color: #0d163b !important;
}

.profile-quick-actions .btn-profile-action.glass {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px) !important;
}

.profile-quick-actions .btn-profile-action.glass:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.profile-quick-stats {
  display: flex !important;
  gap: 16px !important;
  background: rgba(13, 22, 59, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  backdrop-filter: blur(8px) !important;
}

.profile-quick-stats .stat-item {
  text-align: center !important;
  padding: 0 4px !important;
}

.profile-quick-stats .stat-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  font-weight: 500 !important;
}

.profile-quick-stats .stat-value {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Dark Mode Overrides for Profile Header */
[data-theme="dark"] .profile-head {
  background: linear-gradient(135deg, #090e1a 0%, #0f172a 45%, #152238 100%) !important;
  background-image: linear-gradient(135deg, rgba(7, 13, 30, 0.96) 0%, rgba(13, 21, 45, 0.92) 50%, rgba(19, 31, 60, 0.90) 100%), url(../images/profile_bg.jpg) !important;
  border-color: #1e2e4a !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .profile-head::after {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(56, 189, 248, 0) 70%) !important;
}

[data-theme="dark"] .profile-quick-stats {
  background: rgba(7, 13, 30, 0.6) !important;
  border-color: #1e2e4a !important;
}

[data-theme="dark"] .image-content-center.user-pro {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: #0f172a !important;
}

/* Staff & Parent Social Hover Overlay */
.profile-head.social .image-content-center .social-icon-one {
  background: rgba(13, 22, 59, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 16px !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  position: absolute !important;
  left: 0 !important;
  top: -100% !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 5 !important;
}

.profile-head.social .image-content-center:hover .social-icon-one {
  top: 0% !important;
}

.profile-head.social .image-content-center .social-icon-one li {
  display: inline-block !important;
  padding: 0 !important;
}

.profile-head.social .image-content-center .social-icon-one li a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  font-size: 14px !important;
}

.profile-head.social .image-content-center .social-icon-one li a:hover {
  background: #50b5ff !important;
  border-color: #50b5ff !important;
  color: #0d163b !important;
  transform: scale(1.12) !important;
  box-shadow: 0 4px 12px rgba(80, 181, 255, 0.4) !important;
}

/* ==========================================================================
   AUTHENTICATION & LOGIN / FORGOT / RESET PASSWORD SYSTEM (WEB APP COLORS)
   Brand Colors:
   - Navy: #152259 / #0D163B
   - Accent Sky Blue: #50B5FF / #38A7F8 / #2563EB
   - Soft Tint: #E8F5FF / #F0F8FF
   - Background: #F5F7FB (Light) / #080E1E (Dark)
   ========================================================================== */

/* Overall Auth Container */
.auth-main {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--figma-bg, #f5f7fb) !important;
  background-image: radial-gradient(circle at 10% 20%, rgba(80, 181, 255, 0.08) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(21, 34, 89, 0.06) 0%, transparent 40%),
                    linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
  font-family: 'Signika', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

[data-theme="dark"] .auth-main {
  background-color: #080e1e !important;
  background-image: radial-gradient(circle at 15% 15%, rgba(80, 181, 255, 0.12) 0%, transparent 40%),
                    radial-gradient(circle at 85% 85%, rgba(13, 22, 59, 0.8) 0%, transparent 50%),
                    linear-gradient(180deg, #090e1a 0%, #060913 100%) !important;
}

/* Left Hero / Welcome Card */
.image-area {
  height: 590px !important;
  border-radius: 16px 0 0 16px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 20px 40px -15px rgba(21, 34, 89, 0.25) !important;
  z-index: 2 !important;
}

.image-area:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px 0 0 16px !important;
  background: linear-gradient(145deg, rgba(13, 22, 59, 0.95) 0%, rgba(21, 34, 89, 0.90) 50%, rgba(37, 99, 235, 0.82) 100%) !important;
  opacity: 0.94 !important;
  z-index: 1 !important;
}

.image-area .content {
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 24px !important;
}

.image-area .image-hader h2 {
  color: #ffffff !important;
  font-family: 'Signika', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  position: relative !important;
  display: inline-block !important;
}

.image-area .image-hader h2:before {
  content: '' !important;
  background: var(--figma-blue, #50b5ff) !important;
  width: 50px !important;
  height: 3px !important;
  border-radius: 2px !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.image-area .img-hol-p {
  padding-bottom: 20px !important;
}

.image-area .img-hol-p img {
  max-height: 64px !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25)) !important;
}

.image-area .content .address p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  max-width: 280px !important;
  margin: 0 auto 20px auto !important;
}

/* Social Icon Pills in Welcome Box */
.f-social-links.center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

.f-social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.f-social-links a span,
.f-social-links a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: visible !important;
}

.f-social-links a .fab,
.f-social-links a span.fab,
.f-social-links a i.fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.f-social-links a .fas,
.f-social-links a .fa,
.f-social-links a span.fas,
.f-social-links a span.fa,
.f-social-links a i.fas,
.f-social-links a i.fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.f-social-links a span:before,
.f-social-links a i:before,
.f-social-links a .fab:before,
.f-social-links a .fas:before,
.f-social-links a .fa:before {
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  transition: color 0.25s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.f-social-links a span:after,
.f-social-links a i:after,
.f-social-links a .fab:after,
.f-social-links a .fas:after {
  display: none !important;
}

.f-social-links a:hover span,
.f-social-links a:hover i,
.f-social-links a span:hover,
.f-social-links a i:hover {
  background: #50b5ff !important;
  border-color: #50b5ff !important;
  color: #0d163b !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(80, 181, 255, 0.45) !important;
}

.f-social-links a:hover span:before,
.f-social-links a:hover i:before,
.f-social-links a span:hover:before,
.f-social-links a i:hover:before,
.f-social-links a:hover .fab:before,
.f-social-links a:hover .fas:before {
  color: #0d163b !important;
}

/* Right Form Box (.sign-area) */
.sign-area {
  background: #ffffff !important;
  color: var(--figma-navy, #152259) !important;
  height: 590px !important;
  border-radius: 0 16px 16px 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: none !important;
  box-shadow: 0 20px 40px -15px rgba(21, 34, 89, 0.08) !important;
  padding: 40px 50px !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}

[data-theme="dark"] .sign-area {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
}

/* Seamless Arrow Pointing from Left to Right */
.sign-area::before {
  border-right: 24px solid #ffffff !important;
  border-top: 24px solid transparent !important;
  border-bottom: 24px solid transparent !important;
  border-left: none !important;
  content: '' !important;
  height: 0 !important;
  left: -23px !important;
  width: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

[data-theme="dark"] .sign-area::before {
  border-right-color: #0f172a !important;
}

/* Sign Header */
.sign-area .sign-hader {
  text-align: center !important;
  padding: 0 0 16px 0 !important;
}

.sign-area .sign-hader img {
  max-height: 48px !important;
  margin-bottom: 8px !important;
}

.sign-area .sign-hader h2 {
  color: var(--figma-navy, #152259) !important;
  font-family: 'Signika', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

[data-theme="dark"] .sign-area .sign-hader h2 {
  color: #f8fafc !important;
}

/* Forgot Password Info Box (.forgot-header) */
.forgot-header {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  color: #0369a1 !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.06) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.forgot-header h4 {
  color: #0284c7 !important;
  font-family: 'Signika', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.forgot-header h4 i {
  color: var(--figma-blue, #50b5ff) !important;
  font-size: 18px !important;
}

[data-theme="dark"] .forgot-header {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(3, 105, 161, 0.18) 100%) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  color: #bae6fd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .forgot-header h4 {
  color: #38bdf8 !important;
}

/* Input Fields & Addons */
.sign-area .input-group {
  margin-bottom: 4px !important;
  width: 100% !important;
}

.sign-area .input-group-addon {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
  color: var(--figma-blue, #50b5ff) !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .sign-area .input-group-addon {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

.sign-area input.form-control,
.sign-area .form-control {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--figma-navy, #152259) !important;
  font-family: 'Signika', sans-serif !important;
  font-size: 14px !important;
  height: 44px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.sign-area input.form-control::placeholder,
.sign-area .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

[data-theme="dark"] .sign-area input.form-control,
[data-theme="dark"] .sign-area .form-control {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .sign-area input.form-control::placeholder,
[data-theme="dark"] .sign-area .form-control::placeholder {
  color: #64748b !important;
}

.sign-area .input-group:focus-within .input-group-addon {
  border-color: var(--figma-blue, #50b5ff) !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
}

.sign-area .input-group:focus-within .form-control {
  border-color: var(--figma-blue, #50b5ff) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(80, 181, 255, 0.16) !important;
}

[data-theme="dark"] .sign-area .input-group:focus-within .input-group-addon {
  border-color: #38bdf8 !important;
  background: #0f172a !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .sign-area .input-group:focus-within .form-control {
  border-color: #38bdf8 !important;
  background: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

/* Primary Submit Button (#btn_submit, .btn-round) */
.sign-area #btn_submit,
.sign-area .btn-round {
  background: linear-gradient(135deg, #50b5ff 0%, #2563eb 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: 'Signika', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  margin-top: 18px !important;
  box-shadow: 0 8px 20px -4px rgba(80, 181, 255, 0.5) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.sign-area #btn_submit:hover,
.sign-area .btn-round:hover,
.sign-area #btn_submit:focus,
.sign-area .btn-round:focus {
  background: linear-gradient(135deg, #38a7f8 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -4px rgba(80, 181, 255, 0.6) !important;
  outline: none !important;
}

.sign-area #btn_submit:active,
.sign-area .btn-round:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(80, 181, 255, 0.4) !important;
}

/* Back to Login & Links */
.sign-area .text-center a,
.sign-area .forgot-text a {
  color: var(--figma-blue, #50b5ff) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sign-area .text-center a:hover,
.sign-area .forgot-text a:hover {
  color: var(--figma-blue-hover, #38a7f8) !important;
  text-decoration: none !important;
  transform: translateX(-2px) !important;
}

/* Checkbox Remember */
.forgot-text .i-checks {
  color: var(--figma-text-muted, #8a92a6) !important;
  font-size: 13.5px !important;
}

[data-theme="dark"] .forgot-text .i-checks {
  color: #94a3b8 !important;
}

/* Footer Copyright */
.sign-area .sign-footer p {
  color: #94a3b8 !important;
  font-size: 12px !important;
  margin-top: 24px !important;
  letter-spacing: 0.2px !important;
}

[data-theme="dark"] .sign-area .sign-footer p {
  color: #64748b !important;
}

/* Alert Messages on Auth Page */
.alert-msg {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  text-align: center !important;
}

.alert-msg.danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

[data-theme="dark"] .alert-msg {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

[data-theme="dark"] .alert-msg.danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* Responsive Stacking for Auth Card on Mobile/Tablet */
@media (max-width: 991px) {
  .image-area {
    height: auto !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .image-area:before {
    border-radius: 16px 16px 0 0 !important;
  }
  .sign-area {
    height: auto !important;
    border-radius: 0 0 16px 16px !important;
    border-left: 1px solid #e2e8f0 !important;
    border-top: none !important;
    padding: 30px 24px !important;
  }
  [data-theme="dark"] .sign-area {
    border-left-color: #1e293b !important;
  }
  .sign-area::before {
    display: none !important;
  }
}