/* ==========================================================
   MODERN UI CORE 2025
   Shared palette & component layer for landing, login, dashboards
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --ui-font-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui-radius-xs: 8px;
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 26px;

  /* Core palette */
  --ui-navy-900: #040814;
  --ui-navy-800: #070d1f;
  --ui-navy-700: #0d152e;
  --ui-indigo-500: #465cff;
  --ui-indigo-600: #3348e9;
  --ui-indigo-700: #2637c4;
  --ui-emerald-500: #11b97c;
  --ui-emerald-600: #0f9a67;
  --ui-amber-500: #f4b400;
  --ui-amber-600: #d49400;
  --ui-neutral-50: #f8fbff;
  --ui-neutral-100: #eef3fb;
  --ui-neutral-200: #dce4f3;
  --ui-neutral-300: #bdc7dd;
  --ui-neutral-500: #64748b;
  --ui-neutral-700: #1f2937;

  --ui-bg: var(--ui-neutral-50);
  --ui-surface: #ffffff;
  --ui-surface-muted: rgba(255, 255, 255, 0.85);
  --ui-text: #0e172a;
  --ui-text-muted: #4c5c74;
  --ui-border: rgba(9, 17, 34, 0.08);
  --ui-border-strong: rgba(9, 17, 34, 0.14);

  --ui-gradient-flag: linear-gradient(110deg, #1eb53a, #ffffff 45%, #0072c6);
  --ui-gradient-core: linear-gradient(135deg, #060f2a, #142050, #283b8f);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 20%,
      rgba(70, 92, 255, 0.32),
      transparent 55%
    ),
    radial-gradient(circle at 80% 0%, rgba(17, 185, 124, 0.25), transparent 45%),
    linear-gradient(135deg, #060f2a, #102352);

  --ui-shadow-sm: 0 4px 14px rgba(6, 15, 42, 0.08);
  --ui-shadow-md: 0 12px 32px rgba(6, 15, 42, 0.12);
  --ui-shadow-lg: 0 20px 45px rgba(6, 15, 42, 0.18);
  --ui-shadow-xl: 0 28px 60px rgba(6, 15, 42, 0.2);

  --ui-transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.role-school-admin {
  --ui-bg: #edf6f4;
  --ui-surface: #ffffff;
  --ui-surface-muted: rgba(255, 255, 255, 0.9);
  --ui-text: #032726;
  --ui-text-muted: #4a6b68;
  --ui-border: rgba(3, 35, 36, 0.12);
  --ui-border-strong: rgba(3, 35, 36, 0.2);
  --ui-indigo-500: #0f9d91;
  --ui-indigo-600: #0c7e73;
  --ui-indigo-700: #085952;
  --ui-emerald-500: #74dfc7;
  --ui-emerald-600: #58cfb6;
  --ui-neutral-50: #edf6f4;
  --ui-neutral-100: #dff0ec;
  --ui-neutral-200: #c1e0da;
  --ui-neutral-300: #9ec7be;
  --ui-gradient-core: linear-gradient(135deg, #023a3c, #0f7e74);
  --ui-gradient-radiant: radial-gradient(
      circle at 18% 18%,
      rgba(15, 157, 145, 0.35),
      transparent 55%
    ),
    radial-gradient(circle at 78% 0%, rgba(244, 185, 66, 0.35), transparent 48%),
    linear-gradient(135deg, #edf6f4, #d7efeb);
  --ui-shadow-sm: 0 14px 30px rgba(4, 58, 57, 0.12);
  --ui-shadow-md: 0 24px 50px rgba(4, 58, 57, 0.18);
  --ui-shadow-lg: 0 32px 70px rgba(4, 58, 57, 0.22);
  --ui-shadow-xl: 0 48px 95px rgba(4, 58, 57, 0.25);
}

body.role-teacher {
  --ui-bg: #eaf4ee;
  --ui-surface: #ffffff;
  --ui-surface-muted: rgba(255, 255, 255, 0.9);
  --ui-text: #0f2a1c;
  --ui-text-muted: #4c6b5d;
  --ui-border: rgba(16, 76, 55, 0.12);
  --ui-border-strong: rgba(16, 76, 55, 0.2);
  --ui-indigo-500: #1c8b60;
  --ui-indigo-600: #16724c;
  --ui-indigo-700: #125c3f;
  --ui-emerald-500: #8ed9bb;
  --ui-emerald-600: #6ecfa7;
  --ui-neutral-50: #eaf4ee;
  --ui-neutral-100: #d6ebdf;
  --ui-neutral-200: #c0e0d0;
  --ui-neutral-300: #a6d1be;
  --ui-gradient-core: linear-gradient(135deg, #1c8b60, #24a674);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 22%,
      rgba(142, 217, 187, 0.55),
      transparent 55%
    ),
    radial-gradient(circle at 78% 0%, rgba(28, 139, 96, 0.35), transparent 50%),
    linear-gradient(135deg, #eaf4ee, #d5edde);
  --ui-shadow-sm: 0 12px 26px rgba(18, 104, 76, 0.14);
  --ui-shadow-md: 0 22px 40px rgba(28, 139, 96, 0.2);
  --ui-shadow-lg: 0 32px 60px rgba(28, 139, 96, 0.24);
  --ui-shadow-xl: 0 46px 90px rgba(23, 90, 64, 0.28);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
  --ui-bg: #020617;
  --ui-surface: #070d1f;
  --ui-surface-muted: rgba(4, 8, 20, 0.75);
  --ui-text: #eff2ff;
  --ui-text-muted: #99a7c8;
  --ui-border: rgba(186, 199, 233, 0.08);
  --ui-border-strong: rgba(186, 199, 233, 0.22);
  --ui-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.45);
  --ui-shadow-md: 0 20px 45px rgba(0, 0, 0, 0.55);
  --ui-shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.6);
  --ui-gradient-core: linear-gradient(135deg, #0b1124, #121a35, #1e2e63);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 20%,
      rgba(104, 119, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 80% 0%, rgba(29, 209, 161, 0.2), transparent 50%),
    linear-gradient(135deg, #050914, #0e1a32);
}

body.role-school-admin[data-theme="dark"],
body.role-school-admin[data-bs-theme="dark"],
body.role-school-admin.theme-dark {
  --ui-bg: #041417;
  --ui-surface: #0a1f23;
  --ui-surface-muted: rgba(10, 31, 35, 0.92);
  --ui-text: #e6fffa;
  --ui-text-muted: #95cbc4;
  --ui-border: rgba(95, 235, 210, 0.2);
  --ui-border-strong: rgba(95, 235, 210, 0.28);
  --ui-indigo-500: #4fe8ce;
  --ui-indigo-600: #31cdb4;
  --ui-indigo-700: #1fa995;
  --ui-emerald-500: #8dffe8;
  --ui-emerald-600: #6bf0d6;
  --ui-neutral-50: #0a1f23;
  --ui-neutral-100: #092026;
  --ui-neutral-200: #07181b;
  --ui-neutral-300: #051214;
  --ui-gradient-core: linear-gradient(135deg, #031719, #07292e);
  --ui-gradient-radiant: radial-gradient(
      circle at 22% 18%,
      rgba(79, 232, 206, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 78% 0%, rgba(255, 213, 140, 0.2), transparent 55%),
    linear-gradient(135deg, #041417, #0b2428);
  --ui-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.65);
  --ui-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.72);
  --ui-shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.78);
  --ui-shadow-xl: 0 52px 120px rgba(0, 0, 0, 0.82);
}

body.role-teacher[data-theme="dark"],
body.role-teacher[data-bs-theme="dark"],
body.role-teacher.theme-dark {
  --ui-bg: #071811;
  --ui-surface: #0f251b;
  --ui-surface-muted: rgba(15, 37, 27, 0.93);
  --ui-text: #e5fff3;
  --ui-text-muted: #9fd0bb;
  --ui-border: rgba(108, 242, 189, 0.14);
  --ui-border-strong: rgba(108, 242, 189, 0.26);
  --ui-indigo-500: #44d19c;
  --ui-indigo-600: #2fb681;
  --ui-indigo-700: #1f9b6c;
  --ui-emerald-500: #7ce7c4;
  --ui-emerald-600: #5ad8ad;
  --ui-neutral-50: #0f251b;
  --ui-neutral-100: #102b1f;
  --ui-neutral-200: #0f2f22;
  --ui-neutral-300: #0d241b;
  --ui-gradient-core: linear-gradient(135deg, #0a2118, #103023);
  --ui-gradient-radiant: radial-gradient(
      circle at 18% 20%,
      rgba(124, 231, 193, 0.18),
      transparent 60%
    ),
    radial-gradient(circle at 78% 0%, rgba(68, 209, 156, 0.25), transparent 55%),
    linear-gradient(135deg, #07140e, #0f261d);
  --ui-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.6);
  --ui-shadow-md: 0 24px 55px rgba(0, 0, 0, 0.7);
  --ui-shadow-lg: 0 36px 80px rgba(0, 0, 0, 0.74);
  --ui-shadow-xl: 0 52px 110px rgba(0, 0, 0, 0.78);
}

body.role-student {
  --ui-bg: #f4efff;
  --ui-surface: #ffffff;
  --ui-surface-muted: rgba(255, 255, 255, 0.92);
  --ui-text: #1f1235;
  --ui-text-muted: #65507f;
  --ui-border: rgba(47, 23, 88, 0.12);
  --ui-border-strong: rgba(47, 23, 88, 0.22);
  --ui-indigo-500: #7a3cf0;
  --ui-indigo-600: #6a28e0;
  --ui-indigo-700: #551ac4;
  --ui-emerald-500: #ffb6d9;
  --ui-emerald-600: #ff9ece;
  --ui-neutral-50: #f4efff;
  --ui-neutral-100: #eedffe;
  --ui-neutral-200: #e0c9ff;
  --ui-neutral-300: #d3b2ff;
  --ui-gradient-core: linear-gradient(135deg, #7a3cf0, #c43df0);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 22%,
      rgba(211, 178, 255, 0.55),
      transparent 60%
    ),
    radial-gradient(circle at 80% 0%, rgba(255, 182, 217, 0.4), transparent 55%),
    linear-gradient(135deg, #f4efff, #eadcff);
  --ui-shadow-sm: 0 12px 28px rgba(78, 40, 128, 0.16);
  --ui-shadow-md: 0 22px 45px rgba(78, 40, 128, 0.24);
  --ui-shadow-lg: 0 32px 70px rgba(78, 40, 128, 0.28);
  --ui-shadow-xl: 0 46px 95px rgba(78, 40, 128, 0.32);
}

body.role-student[data-theme="dark"],
body.role-student[data-bs-theme="dark"],
body.role-student.theme-dark {
  --ui-bg: #0f0623;
  --ui-surface: #1a0f33;
  --ui-surface-muted: rgba(26, 15, 51, 0.9);
  --ui-text: #f7edff;
  --ui-text-muted: #ccb8f5;
  --ui-border: rgba(199, 157, 255, 0.2);
  --ui-border-strong: rgba(199, 157, 255, 0.32);
  --ui-indigo-500: #c996ff;
  --ui-indigo-600: #b47dff;
  --ui-indigo-700: #a164fb;
  --ui-emerald-500: #ffb7dc;
  --ui-emerald-600: #ff94cc;
  --ui-neutral-50: #1a0f33;
  --ui-neutral-100: #211344;
  --ui-neutral-200: #291953;
  --ui-neutral-300: #321f61;
  --ui-gradient-core: linear-gradient(135deg, #14062b, #27114e);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 22%,
      rgba(201, 150, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(255, 148, 204, 0.25),
      transparent 55%
    ),
    linear-gradient(135deg, #0c041a, #1e0e3d);
  --ui-shadow-sm: 0 14px 35px rgba(0, 0, 0, 0.62);
  --ui-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.7);
  --ui-shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.76);
  --ui-shadow-xl: 0 52px 120px rgba(0, 0, 0, 0.8);
}

body.role-parent {
  --ui-bg: #edf9ff;
  --ui-surface: #ffffff;
  --ui-surface-muted: rgba(255, 255, 255, 0.94);
  --ui-text: #052635;
  --ui-text-muted: #4c6f7b;
  --ui-border: rgba(5, 38, 53, 0.12);
  --ui-border-strong: rgba(5, 38, 53, 0.22);
  --ui-indigo-500: #0ea5c6;
  --ui-indigo-600: #0b8eb0;
  --ui-indigo-700: #0a728f;
  --ui-emerald-500: #ffb37b;
  --ui-emerald-600: #ff9a5d;
  --ui-neutral-50: #edf9ff;
  --ui-neutral-100: #dff1fb;
  --ui-neutral-200: #c7e4f3;
  --ui-neutral-300: #a8d6e9;
  --ui-gradient-core: linear-gradient(135deg, #0ea5c6, #0b7fc0, #ff9a5d);
  --ui-gradient-radiant: radial-gradient(
      circle at 18% 22%,
      rgba(14, 165, 198, 0.4),
      transparent 58%
    ),
    radial-gradient(circle at 80% 0%, rgba(255, 154, 93, 0.28), transparent 52%),
    linear-gradient(135deg, #edf9ff, #dff0ff);
  --ui-shadow-sm: 0 12px 26px rgba(7, 60, 90, 0.16);
  --ui-shadow-md: 0 22px 45px rgba(7, 60, 90, 0.22);
  --ui-shadow-lg: 0 32px 70px rgba(7, 60, 90, 0.26);
  --ui-shadow-xl: 0 46px 95px rgba(7, 60, 90, 0.32);
}

body.role-parent[data-theme="dark"],
body.role-parent[data-bs-theme="dark"],
body.role-parent.theme-dark {
  --ui-bg: #031421;
  --ui-surface: #0a2331;
  --ui-surface-muted: rgba(10, 35, 49, 0.92);
  --ui-text: #ecf9ff;
  --ui-text-muted: #9fd0e0;
  --ui-border: rgba(138, 203, 229, 0.2);
  --ui-border-strong: rgba(138, 203, 229, 0.32);
  --ui-indigo-500: #54d0ff;
  --ui-indigo-600: #31b6e5;
  --ui-indigo-700: #1a9dcd;
  --ui-emerald-500: #ffb78c;
  --ui-emerald-600: #ff9f6b;
  --ui-neutral-50: #0a2331;
  --ui-neutral-100: #0d2b3c;
  --ui-neutral-200: #0f3144;
  --ui-neutral-300: #133d53;
  --ui-gradient-core: linear-gradient(135deg, #031421, #0a2f44, #1c4d63);
  --ui-gradient-radiant: radial-gradient(
      circle at 20% 22%,
      rgba(84, 208, 255, 0.28),
      transparent 60%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(255, 155, 109, 0.22),
      transparent 55%
    ),
    linear-gradient(135deg, #020f19, #062033);
  --ui-shadow-sm: 0 14px 35px rgba(0, 0, 0, 0.62);
  --ui-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.7);
  --ui-shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.76);
  --ui-shadow-xl: 0 52px 120px rgba(0, 0, 0, 0.82);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--ui-font-base);
  background: var(--ui-bg);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ui-text);
}

p,
small,
label {
  color: var(--ui-text-muted);
}

/* ------------------------------------------
   Buttons
------------------------------------------- */
.btn-modern,
.btn-modern:focus {
  border: none !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.85rem !important;
  background: linear-gradient(
    135deg,
    var(--ui-emerald-500),
    var(--ui-indigo-600)
  ) !important;
  color: #fff !important;
  box-shadow: var(--ui-shadow-md) !important;
  transition: transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast) !important;
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-lg) !important;
}

.btn-ghost {
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-border-strong);
  background: transparent;
  padding: 0.8rem 1.5rem;
  color: var(--ui-text);
  font-weight: 600;
  transition: all var(--ui-transition-fast);
}

.btn-ghost:hover {
  border-color: transparent;
  background: rgba(70, 92, 255, 0.1);
  color: var(--ui-indigo-600);
}

.btn-pill {
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  font-size: 0.85rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ------------------------------------------
   Glass / Card system
------------------------------------------- */
.glass-card,
.glass-panel,
.stat-card-modern,
.feature-card-modern {
  background: var(--ui-surface-muted);
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
  transition: transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast), border-color var(--ui-transition-fast);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card:hover,
.glass-panel:hover,
.stat-card-modern:hover,
.feature-card-modern:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 92, 255, 0.4);
  box-shadow: var(--ui-shadow-lg);
}

.feature-card-modern {
  padding: 1.75rem;
}

.feature-card-modern .icon-wrap {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--ui-radius-xs);
  background: rgba(70, 92, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--ui-indigo-600);
  margin-bottom: 1rem;
}

.stat-card-modern {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
}

.stat-card-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(70, 92, 255, 0.12),
    rgba(17, 185, 124, 0.12)
  );
  opacity: 0;
  transition: opacity var(--ui-transition-fast);
}

.stat-card-modern:hover::before {
  opacity: 1;
}

.stat-card-modern > * {
  position: relative;
}

.stat-card-modern .metric-value {
  font-size: 2.25rem;
  font-weight: 700;
}

.stat-card-modern .metric-label {
  font-size: 0.95rem;
  color: var(--ui-text-muted);
}

.metric-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--ui-radius-xs);
  background: rgba(70, 92, 255, 0.12);
  color: var(--ui-indigo-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-soft {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ------------------------------------------
  Navigation systems
------------------------------------------- */
.navbar-glass {
  background: var(--ui-gradient-flag) !important;
  box-shadow: var(--ui-shadow-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
}

.navbar-glass .navbar-brand {
  font-weight: 700;
  color: #0b132b !important;
  letter-spacing: -0.02em;
}

.navbar-glass .nav-link {
  color: rgba(15, 23, 42, 0.85) !important;
  font-weight: 600;
  border-radius: var(--ui-radius-xs);
  padding: 0.55rem 0.95rem;
  transition: all var(--ui-transition-fast);
}

.navbar-glass .nav-link:hover,
.navbar-glass .nav-link.active {
  background: rgba(6, 15, 42, 0.08);
  color: var(--ui-indigo-700) !important;
}

/* ------------------------------------------
   Hero section (landing)
------------------------------------------- */
.hero-modern {
  background: var(--ui-gradient-radiant);
  color: #fff;
  min-height: calc(100vh - var(--navbar-offset, 72px));
  position: relative;
  overflow: hidden;
}

.hero-modern .hero-title {
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.1;
}

.floating-badge {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ------------------------------------------
   Login flow
------------------------------------------- */
.login-body-modern {
  background: var(--ui-gradient-core) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
  overflow: hidden;
}

.login-body-modern::before,
.login-body-modern::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15),
    transparent 65%
  );
  border-radius: 999px;
  filter: blur(0px);
}

.login-body-modern::before {
  top: -120px;
  right: -80px;
}

.login-body-modern::after {
  bottom: -160px;
  left: -120px;
}

.login-card-glass {
  width: min(460px, 100%);
  border-radius: var(--ui-radius-lg);
  padding: 3rem 2.75rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--ui-shadow-xl);
  position: relative;
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.login-header .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(
    140deg,
    rgba(70, 92, 255, 0.25),
    rgba(17, 185, 124, 0.25)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--ui-indigo-600);
  margin-bottom: 0.75rem;
}

.login-header p {
  margin-bottom: 0;
  color: var(--ui-text-muted);
}

.login-body {
  position: relative;
}

.login-body .btn-modern {
  width: 100%;
}

.login-card-glass .form-control,
.login-card-glass .input-group-text,
.login-card-glass .btn {
  border-radius: var(--ui-radius-xs);
}

.login-card-glass .form-control {
  border: 1px solid var(--ui-border-strong);
  padding: 0.9rem 1rem;
  font-size: 1rem;
}

.login-card-glass .form-control:focus {
  border-color: var(--ui-indigo-600);
  box-shadow: 0 0 0 3px rgba(70, 92, 255, 0.15);
}

.login-floating-label {
  position: relative;
  margin-bottom: 1.5rem;
}

.login-floating-label label {
  position: absolute;
  top: 50%;
  left: 3.25rem;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  transition: all var(--ui-transition-fast);
  pointer-events: none;
}

.login-floating-label input:focus + label,
.login-floating-label input:not(:placeholder-shown) + label {
  top: 0.35rem;
  font-size: 0.65rem;
  color: var(--ui-indigo-600);
}

/* ------------------------------------------
   Tables & chips
------------------------------------------- */
.table-modern thead th {
  background: rgba(6, 15, 42, 0.04);
  color: var(--ui-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--ui-border);
}

.table-modern tbody td {
  border-color: var(--ui-border);
}

.table-modern tbody tr:hover td {
  background: rgba(70, 92, 255, 0.08);
}

.chip-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(70, 92, 255, 0.12);
  color: var(--ui-indigo-600);
}

/* ------------------------------------------
   Animations & utilities
------------------------------------------- */
@keyframes floatPulse {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: floatPulse 6s ease-in-out infinite;
}

.shadow-modern {
  box-shadow: var(--ui-shadow-md);
}

.shadow-modern-xl {
  box-shadow: var(--ui-shadow-xl);
}

.gradient-text {
  background: linear-gradient(120deg, #8be9dd, #73a9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blur-glow {
  position: relative;
}

.blur-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 180px rgba(70, 92, 255, 0.4);
  opacity: 0.4;
  z-index: -1;
}

/* ------------------------------------------
   Dark overrides for key blocks
------------------------------------------- */
[data-bs-theme="dark"] .glass-card,
[data-bs-theme="dark"] .glass-panel,
[data-bs-theme="dark"] .feature-card-modern,
[data-bs-theme="dark"] .stat-card-modern {
  background: rgba(10, 14, 31, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .table-modern thead th {
  background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .login-card-glass {
  background: rgba(8, 12, 30, 0.95);
  color: #fff;
}