/* =====================================================================
   ClassON Super Admin — Custom UI Polish Layer
   ---------------------------------------------------------------------
   This file ONLY refines the visual appearance (spacing, typography,
   colors, shadows, radii, component states) on top of the Sneat
   Bootstrap 5 template. It does NOT change any business logic, routes,
   layout structure or vendor files. Remove this file (and its <link>)
   to fully revert to the original look.
   ===================================================================== */

:root {
  --ca-primary: #696cff;
  --ca-primary-rgb: 105, 108, 255;
  --ca-primary-soft: rgba(105, 108, 255, 0.10);
  --ca-radius-sm: 0.375rem;
  --ca-radius: 0.625rem;
  --ca-radius-lg: 0.875rem;
  --ca-shadow-xs: 0 1px 2px 0 rgba(67, 89, 113, 0.08);
  --ca-shadow-sm: 0 2px 8px 0 rgba(67, 89, 113, 0.08);
  --ca-shadow-md: 0 6px 22px -6px rgba(67, 89, 113, 0.16);
  --ca-shadow-lg: 0 14px 34px -10px rgba(67, 89, 113, 0.22);
  --ca-border: #e8e8ef;
  --ca-heading: #384551;
  --ca-muted: #8a93a3;
  --ca-bg-soft: #f6f7fb;
  --ca-transition: all 0.2s ease-in-out;
}

/* ------------------------------------------------------------------ */
/*  Base / Typography                                                  */
/* ------------------------------------------------------------------ */
body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--ca-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.text-muted {
  color: var(--ca-muted) !important;
}

/* Smooth, accessible focus ring everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn-icon:focus-visible {
  outline: 2px solid rgba(var(--ca-primary-rgb), 0.45);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  Sidebar (aside / menu)                                             */
/* ------------------------------------------------------------------ */
#layout-menu.menu {
  box-shadow: 0 0 24px 0 rgba(67, 89, 113, 0.10);
  border-right: 1px solid var(--ca-border);
}

#layout-menu .app-brand {
  padding-top: 1.1rem;
  padding-bottom: 0.4rem;
}

#layout-menu .app-brand-logo img {
  max-height: 46px;
  width: auto !important;
  object-fit: contain;
  transition: var(--ca-transition);
}

/* Section header label between groups */
#layout-menu .menu-header {
  padding-top: 1rem;
  padding-bottom: 0.35rem;
}

#layout-menu .menu-header-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-muted);
}

/* Menu links */
#layout-menu .menu-inner>.menu-item {
  margin: 0.125rem 0;
}

#layout-menu .menu-link {
  border-radius: var(--ca-radius);
  font-weight: 500;
  transition: var(--ca-transition);
}

#layout-menu .menu-item:not(.active)>.menu-link:hover {
  background-color: var(--ca-primary-soft);
  color: var(--ca-primary);
  transform: translateX(2px);
}

#layout-menu .menu-item:not(.active)>.menu-link:hover .menu-icon {
  color: var(--ca-primary);
}

/* Active item: refined gradient pill + soft glow */
#layout-menu .menu-item.active>.menu-link:not(.menu-toggle) {
  background-image: linear-gradient(270deg,
      rgba(var(--ca-primary-rgb), 0.85) 0%,
      var(--ca-primary) 100%);
  box-shadow: 0 4px 12px -2px rgba(var(--ca-primary-rgb), 0.45);
  color: #fff;
}

#layout-menu .menu-item.active>.menu-link .menu-icon {
  color: inherit;
}

#layout-menu .menu-icon {
  font-size: 1.3rem;
  transition: var(--ca-transition);
}

/* ------------------------------------------------------------------ */
/*  Navbar (top header)                                                */
/* ------------------------------------------------------------------ */
.layout-navbar.navbar-detached {
  box-shadow: var(--ca-shadow-sm);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  backdrop-filter: saturate(180%) blur(6px);
}

.navbar .page-title-text {
  color: var(--ca-heading);
  font-weight: 600;
  line-height: 1.2;
}

.navbar .page-title-sub {
  font-size: 0.75rem;
  color: var(--ca-muted);
}

.navbar .search-toggler {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 0.35rem 0.85rem !important;
  background-color: var(--ca-bg-soft);
  transition: var(--ca-transition);
}

.navbar .search-toggler:hover {
  border-color: rgba(var(--ca-primary-rgb), 0.45);
  background-color: #fff;
}

.navbar .dropdown-user .avatar img {
  border: 2px solid #fff;
  box-shadow: var(--ca-shadow-sm);
}

/* ------------------------------------------------------------------ */
/*  Cards                                                              */
/* ------------------------------------------------------------------ */
.card {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  box-shadow: var(--ca-shadow-md);
}

.card .card-header {
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--ca-border);
  background: transparent;
}

.card .card-header .card-title,
.card .card-header h2,
.card .card-header h3,
.card .card-header h5 {
  margin-bottom: 0;
  font-weight: 600;
}

.card .card-body {
  padding: 1.4rem;
}

/* ------------------------------------------------------------------ */
/*  Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn {
  border-radius: var(--ca-radius);
  font-weight: 500;
  letter-spacing: 0;
  transition: var(--ca-transition);
}

.btn:not(.btn-icon):not(.btn-sm):not(.btn-lg) {
  padding: 0.5rem 1.15rem;
}

.btn-primary {
  box-shadow: 0 3px 10px -2px rgba(var(--ca-primary-rgb), 0.5);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(var(--ca-primary-rgb), 0.55);
}

.btn-info:hover,
.btn-dark:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
}

/* Icon action buttons inside tables */
.btn-icon {
  border-radius: var(--ca-radius-sm);
  transition: var(--ca-transition);
}

.btn-icon:hover {
  background-color: var(--ca-primary-soft);
  transform: translateY(-1px);
}

/* Toolbar: keep header action buttons tidy & wrap nicely on mobile */
.card-header .card-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

@media (max-width: 575.98px) {
  .card-header .card-header-actions {
    width: 100%;
  }

  .card-header .card-header-actions .btn {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------------ */
/*  Tables                                                             */
/* ------------------------------------------------------------------ */
.table>thead {
  --bs-table-bg: var(--ca-bg-soft);
}

.table>thead>tr>th {
  background-color: var(--ca-bg-soft);
  color: var(--ca-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ca-border);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table>tbody>tr {
  transition: background-color 0.15s ease;
}

.table>tbody>tr:hover {
  background-color: rgba(var(--ca-primary-rgb), 0.035);
}

.table>tbody>tr>td {
  vertical-align: middle;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Schools page: keep the migration-results table hidden until JS appends
   result rows (purely visual — no logic touched). Falls back to visible in
   browsers without :has() support. */
.table:has(> #migration-results:empty) {
  display: none;
}

/* ------------------------------------------------------------------ */
/*  Badges                                                             */
/* ------------------------------------------------------------------ */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.7em;
  border-radius: 0.4rem;
}

/* ------------------------------------------------------------------ */
/*  Forms                                                              */
/* ------------------------------------------------------------------ */
.form-label {
  font-weight: 500;
  color: var(--ca-heading);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  border-radius: var(--ca-radius);
  border-color: var(--ca-border);
  transition: var(--ca-transition);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--ca-primary-rgb), 0.6);
  box-shadow: 0 0 0 0.18rem rgba(var(--ca-primary-rgb), 0.12);
}

.input-group-merge .input-group-text {
  border-radius: var(--ca-radius) 0 0 var(--ca-radius);
  background-color: var(--ca-bg-soft);
  color: var(--ca-muted);
}

/* Optional small section heading inside form cards */
.form-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-muted);
  margin-bottom: 1rem;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ca-border);
}

/* Action bar at the bottom of forms */
.form-action-bar {
  border-top: 1px solid var(--ca-border);
  padding-top: 1.15rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ */
/*  Modals                                                             */
/* ------------------------------------------------------------------ */
.modal-content {
  border: none;
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-lg);
}

/* ------------------------------------------------------------------ */
/*  Dashboard — hero + quick links (UI only)                           */
/* ------------------------------------------------------------------ */
.dash-hero {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--ca-radius-lg);
  background: linear-gradient(120deg,
      var(--ca-primary) 0%,
      #8385ff 55%,
      #a7a4ff 100%);
  color: #fff;
  box-shadow: var(--ca-shadow-md);
}

.dash-hero .card-body {
  padding: 2rem 2.25rem;
}

.dash-hero h2,
.dash-hero h3 {
  color: #fff;
}

.dash-hero .dash-hero-sub {
  color: rgba(255, 255, 255, 0.85);
}

.dash-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.dash-hero::before {
  content: "";
  position: absolute;
  right: 90px;
  bottom: -70px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 50%;
}

.quick-link-card {
  display: block;
  height: 100%;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  background: #fff;
  padding: 1.4rem;
  color: var(--ca-heading);
  text-decoration: none;
  box-shadow: var(--ca-shadow-xs);
  transition: var(--ca-transition);
}

.quick-link-card:hover {
  color: var(--ca-primary);
  border-color: rgba(var(--ca-primary-rgb), 0.45);
  box-shadow: var(--ca-shadow-md);
  transform: translateY(-3px);
}

.quick-link-card .ql-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ca-radius);
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
  font-size: 1.6rem;
  margin-bottom: 1rem;
  transition: var(--ca-transition);
}

.quick-link-card:hover .ql-icon {
  background: var(--ca-primary);
  color: #fff;
}

.quick-link-card .ql-title {
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}

.quick-link-card .ql-desc {
  font-size: 0.83rem;
  color: var(--ca-muted);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/*  Dashboard — stat cards, icons, charts, entrance animation         */
/* ------------------------------------------------------------------ */
@keyframes caFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ca-fade-up {
  animation: caFadeUp 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--ca-primary), #a7a4ff);
  opacity: 0;
  transition: var(--ca-transition);
}

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

.stat-card .card-body {
  padding: 1.35rem 1.4rem;
}

.stat-card .stat-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ca-muted);
  margin-bottom: 0.4rem;
}

.stat-card .stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ca-heading);
}

.stat-card .stat-sub {
  font-size: 0.74rem;
  color: var(--ca-muted);
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--ca-radius);
  font-size: 1.7rem;
  flex-shrink: 0;
  transition: var(--ca-transition);
}

.stat-card:hover .stat-icon {
  transform: scale(1.06) rotate(-5deg);
}

.stat-icon-primary {
  background: rgba(105, 108, 255, 0.12);
  color: #696cff;
}

.stat-icon-success {
  background: rgba(40, 199, 111, 0.14);
  color: #28c76f;
}

.stat-icon-warning {
  background: rgba(255, 159, 67, 0.16);
  color: #ff9f43;
}

.stat-icon-info {
  background: rgba(0, 207, 232, 0.14);
  color: #00cfe8;
}

.stat-icon-danger {
  background: rgba(255, 76, 76, 0.14);
  color: #ff4c4c;
}

.chart-card .card-body {
  padding: 0.85rem 1.25rem 0.6rem;
}

.chart-card .card-header {
  padding-bottom: 0.4rem;
}

/* ------------------------------------------------------------------ */
/*  Auth / Login polish                                                */
/* ------------------------------------------------------------------ */
.authentication-wrapper .app-brand-logo img {
  max-height: 56px;
  width: auto;
}

.authentication-wrapper .btn-primary.d-grid {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-size: 1rem;
}

/* ================================================================== */
/*  PHASE 2 — reusable component system                                */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Table action buttons (View / Edit / Delete) — muted, intent hover  */
/* ------------------------------------------------------------------ */
.action-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.action-btn {
  --ab-color: var(--ca-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--ca-radius-sm);
  border: 1px solid var(--ca-border);
  background: #fff;
  color: var(--ca-muted);
  line-height: 1;
  transition: var(--ca-transition);
}

.action-btn i {
  font-size: 1.15rem;
  transition: inherit;
}

.action-btn:hover,
.action-btn:focus-visible {
  color: var(--ab-color);
  border-color: var(--ab-color);
  background: color-mix(in srgb, var(--ab-color) 12%, #fff);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ab-color) 55%, transparent);
}

.action-btn-view,
.action-btn-info {
  --ab-color: #00cfe8;
}

.action-btn-login {
  --ab-color: #696cff;
}

.action-btn-edit {
  --ab-color: #696cff;
}

.action-btn-delete {
  --ab-color: #ff4c4c;
}

.action-btn-success {
  --ab-color: #28c76f;
}

.action-btn-warning {
  --ab-color: #ff9f43;
}

/* Fallback for browsers without color-mix(): soft tinted backgrounds */
@supports not (background: color-mix(in srgb, red 10%, white)) {

  .action-btn-view:hover,
  .action-btn-info:hover {
    background: rgba(0, 207, 232, 0.12);
  }

  .action-btn-login:hover,
  .action-btn-edit:hover {
    background: rgba(105, 108, 255, 0.12);
  }

  .action-btn-delete:hover {
    background: rgba(255, 76, 76, 0.12);
  }

  .action-btn-success:hover {
    background: rgba(40, 199, 111, 0.12);
  }

  .action-btn-warning:hover {
    background: rgba(255, 159, 67, 0.12);
  }
}

/* ------------------------------------------------------------------ */
/*  Badges — harmonize label badges                                    */
/* ------------------------------------------------------------------ */
.badge.bg-label-success,
.badge.bg-label-danger,
.badge.bg-label-primary,
.badge.bg-label-secondary,
.badge.bg-label-warning,
.badge.bg-label-info {
  font-weight: 600;
  padding: 0.42em 0.75em;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/*  Profile page                                                       */
/* ------------------------------------------------------------------ */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--ca-shadow-md);
}

.profile-avatar-ring {
  position: relative;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ca-primary), #a7a4ff);
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.profile-role-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Password show/hide toggle inside input-group */
.input-group .password-toggle {
  cursor: pointer;
  background: var(--ca-bg-soft);
  color: var(--ca-muted);
  border-color: var(--ca-border);
}

.input-group .password-toggle:hover {
  color: var(--ca-primary);
}

/* ------------------------------------------------------------------ */
/*  Auth pages — refined form panel                                    */
/* ------------------------------------------------------------------ */
.authentication-wrapper .authentication-bg {
  box-shadow: -8px 0 30px -18px rgba(67, 89, 113, 0.3);
}

.authentication-wrapper .app-brand-link img {
  max-height: 52px;
  width: auto;
}

.authentication-wrapper .form-control {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.authentication-wrapper .btn-primary {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ */
/*  Modal footer consistency                                           */
/* ------------------------------------------------------------------ */
.modal-footer {
  gap: 0.5rem;
}

.modal-footer>.btn {
  margin: 0;
}

.modal-header {
  border-bottom: 1px solid var(--ca-border);
}

.modal-header .modal-title {
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  Misc consistency                                                   */
/* ------------------------------------------------------------------ */
.btn i.bx {
  vertical-align: middle;
}

/* Clickable log/summary cards */
a>.card {
  transition: var(--ca-transition);
}

a:hover>.card {
  transform: translateY(-3px);
  box-shadow: var(--ca-shadow-md);
  border-color: rgba(var(--ca-primary-rgb), 0.4);
}

/* ================================================================== */
/*  Modern Login — split-screen, brand panel + clean form              */
/* ================================================================== */
.auth-modern {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #fff;
}

/* Left brand panel */
.auth-modern-brand {
  position: relative;
  flex: 1 1 56%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #5a5dff 0%, #696cff 45%, #9b8cff 100%);
}

.auth-modern-brand .auth-brand-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 0 auto;
}

/* Animated illustration */
.auth-animation {
  margin-top: 0.5rem;
}

.auth-animation svg {
  width: 100%;
  max-width: 430px;
  height: auto;
}

.auth-float {
  animation: authFloat 6s ease-in-out infinite;
}

.auth-float-2 {
  animation: authFloat 5s ease-in-out infinite;
}

.auth-float-3 {
  animation: authFloat 7s ease-in-out infinite 0.6s;
}

@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.auth-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: authBar 1.8s ease-in-out infinite;
}

.auth-bar.b2 { animation-delay: 0.15s; }
.auth-bar.b3 { animation-delay: 0.30s; }
.auth-bar.b4 { animation-delay: 0.45s; }
.auth-bar.b5 { animation-delay: 0.60s; }

@keyframes authBar {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}

.auth-draw {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: authDraw 3.4s ease-in-out infinite;
}

@keyframes authDraw {
  0%   { stroke-dashoffset: 420; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-float,
  .auth-float-2,
  .auth-float-3,
  .auth-bar,
  .auth-draw {
    animation: none;
  }
  .auth-draw { stroke-dashoffset: 0; }
}

.auth-brand-name {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: capitalize;
}

.auth-brand-title {
  color: #fff;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.auth-brand-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2rem;
}

.auth-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.9rem;
}

.auth-feature-list li i {
  font-size: 1.3rem;
  color: #fff;
}

/* Decorative shapes */
.auth-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  z-index: 1;
}

.auth-shape-1 {
  width: 320px;
  height: 320px;
  top: -90px;
  right: -90px;
}

.auth-shape-2 {
  width: 220px;
  height: 220px;
  bottom: -80px;
  left: -60px;
  background: rgba(255, 255, 255, 0.08);
}

/* Right form panel */
.auth-modern-form {
  flex: 1 1 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.auth-form-inner {
  width: 100%;
  max-width: 400px;
}

.auth-form-logo {
  max-height: 54px;
  width: auto;
}

.auth-modern-form .form-control {
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

.auth-modern-form .btn-primary {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .auth-modern-brand {
    display: none;
  }

  .auth-modern-form {
    flex-basis: 100%;
  }
}

/* ================================================================== */
/*  PHASE A — base font 14px, 3-dot action dropdown, animated brand    */
/* ================================================================== */

/* Slightly smaller, tighter base text (approx 16px -> 14px) */
body {
  font-size: 0.875rem;
}

/* Hidden decoy fields that absorb browser autofill on search boxes */
.dt-decoy {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  height: 1px;
  width: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.dt-custom-search {
  max-width: 300px;
}

/* Action column 3-dot dropdown */
.action-btns .dropdown-toggle::after {
  display: none;
}

.action-btns .dropdown-menu {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-shadow: var(--ca-shadow-md);
  padding: 0.35rem;
  min-width: 190px;
}

.action-btns .dropdown-item {
  border-radius: var(--ca-radius-sm);
  padding: 0.5rem 0.7rem;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
}

.action-btns .dropdown-item i {
  font-size: 1.05rem;
}

.action-btns .dropdown-item:active,
.action-btns .dropdown-item:focus {
  background-color: var(--ca-primary-soft);
  color: var(--ca-primary);
}

.action-btns .dropdown-item.text-danger:hover {
  background-color: rgba(255, 76, 76, 0.1);
}

.action-btns .dropdown-item.disabled {
  color: var(--ca-muted);
  opacity: 0.65;
}

/* Animated shimmer headline on the login brand panel */
.auth-anim-text {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(90deg, #ffffff 0%, #ffe6a7 25%, #ffffff 50%, #d6c8ff 75%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: authShine 5s linear infinite;
}

@keyframes authShine {
  to {
    background-position: 200% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-anim-text {
    animation: none;
    -webkit-text-fill-color: #fff;
  }
}

/* Listings (data tables): force consistent 14px text everywhere in the table
   and its DataTables controls (Sneat sets these explicitly, so !important is
   needed to override the vendor sizes). Headers keep their own smaller style. */
.card-datatable,
.card-datatable .table,
.card-datatable .table td,
.card-datatable .table tbody td,
table.dataTable,
table.dataTable td,
table.dataTable tbody td,
.table td,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 14px !important;
}
/* ------------------------------------------------------------------ */
/* Theme Updates ("What's New") — highlighted changelog list          */
/* ------------------------------------------------------------------ */
.theme-update-item {
  position: relative;
  padding: 14px 16px 14px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(105, 108, 255, 0.14);
  border-left: 4px solid var(--bs-primary, #696cff);
  border-radius: 8px;
  background: rgba(105, 108, 255, 0.035);
  transition: box-shadow .2s ease, transform .2s ease;
}
.theme-update-item:hover {
  box-shadow: 0 4px 18px rgba(105, 108, 255, 0.12);
  transform: translateY(-1px);
}
.theme-update-item:last-child {
  margin-bottom: 0;
}
.theme-update-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-heading-color, #566a7f);
}
.theme-update-desc {
  font-size: 14px;
  color: #697a8d;
  white-space: pre-line;
}
.theme-update-meta i {
  vertical-align: middle;
}