/* ==========================================================================
   Scrumlin Technologies - Premium Dark Tech HRMS Admin Theme
   Inspired by the dynamic S-Ribbon Logo:
   - Primary: Electric Blue -> Azure Cyan (#1E6FFB -> #00B4D8)
   - Secondary / Energy Accent: Coral Crimson -> Vivid Orange (#FF3366 -> #FF8C00)
   - Growth / Success: Fresh Emerald -> Vibrant Lime (#10B981 -> #84CC16)
   - Surface / Canvas: Deep Slate Navy (#0B1120 / #0F172A / #1E293B)
   ========================================================================== */

:root {
  --scrumlin-primary-start: #1E6FFB;
  --scrumlin-primary-end: #00B4D8;
  --scrumlin-primary: #1E6FFB;

  --scrumlin-accent-start: #FF3366;
  --scrumlin-accent-end: #FF8C00;

  --scrumlin-success-start: #10B981;
  --scrumlin-success-end: #84CC16;

  --scrumlin-warning-start: #F59E0B;
  --scrumlin-warning-end: #FBBF24;

  --scrumlin-info-start: #0284C7;
  --scrumlin-info-end: #38BDF8;

  /* Premium Dark Theme Surfaces */
  --scrumlin-bg-canvas: #090E1A;
  --scrumlin-bg-surface: #0E1626;
  --scrumlin-bg-card: #131C2E;
  --scrumlin-bg-hover: rgba(30, 111, 251, 0.12);

  --scrumlin-border: rgba(255, 255, 255, 0.08);
  --scrumlin-border-light: rgba(255, 255, 255, 0.14);

  --scrumlin-text-primary: #F8FAFC;
  --scrumlin-text-secondary: #94A3B8;
  --scrumlin-text-muted: #64748B;
}

/* ==========================================================================
   1. Global Canvas & Scroller Overrides
   ========================================================================== */
body,
.container-scroller,
.page-body-wrapper,
.main-panel {
  background-color: var(--scrumlin-bg-canvas) !important;
  color: var(--scrumlin-text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-body-wrapper {
  padding-top: 70px !important;
  min-height: calc(100vh - 70px) !important;
  display: flex !important;
  flex-direction: row !important;
}

.content-wrapper {
  background: var(--scrumlin-bg-canvas) !important;
  padding: 1.75rem 2.25rem;
}

/* ==========================================================================
   2. Header Navbar (Dark Sleek Theme)
   ========================================================================== */
.navbar.default-layout-navbar {
  background: var(--scrumlin-bg-surface) !important;
  border-bottom: 1px solid var(--scrumlin-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.navbar .navbar-brand-wrapper {
  background: var(--scrumlin-bg-surface) !important;
  border-right: 1px solid var(--scrumlin-border);
  border-bottom: 1px solid var(--scrumlin-border);
  height: 70px;
  width: 260px;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
  transition: width 0.25s ease, background 0.25s ease;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo .scrumlin-logo-img {
  height: 38px;
  width: 38px;
  max-height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo .brand-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.6px;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo .brand-text .brand-highlight {
  background: linear-gradient(135deg, #00D2FF 0%, #1E6FFB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini .scrumlin-logo-mini-img {
  height: 38px;
  width: 38px;
  max-height: 38px;
  object-fit: contain;
}

/* Collapsed Sidebar Mode */
.sidebar-icon-only .navbar .navbar-brand-wrapper {
  width: 70px;
  min-width: 70px;
  padding: 0;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
  display: none !important;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
  display: flex !important;
}

.navbar .navbar-menu-wrapper {
  height: 70px;
  background: var(--scrumlin-bg-surface) !important;
  width: calc(100% - 260px);
  color: var(--scrumlin-text-secondary);
}

.sidebar-icon-only .navbar .navbar-menu-wrapper {
  width: calc(100% - 70px);
}

.navbar .navbar-toggler {
  color: var(--scrumlin-text-secondary) !important;
}

.navbar .navbar-toggler:hover {
  color: #38BDF8 !important;
}

.navbar .navbar-nav .nav-item .nav-link {
  color: var(--scrumlin-text-secondary) !important;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: #38BDF8 !important;
}

.navbar .navbar-nav .nav-profile .user-nav-name {
  color: #F8FAFC !important;
  font-weight: 600;
  font-size: 0.875rem;
}

.navbar .navbar-nav .nav-profile .nav-profile-img .availability-status.online {
  background: #10B981 !important;
  box-shadow: 0 0 0 2px var(--scrumlin-bg-surface);
}

/* Header Live Date, Day & Time Widget */
.header-datetime-widget {
  display: flex;
  align-items: center;
}

.datetime-pill {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--scrumlin-border-light);
  padding: 0.4rem 0.95rem;
  border-radius: 20px;
  font-size: 0.815rem;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.datetime-pill i {
  font-size: 1.05rem;
}

.datetime-date-val {
  color: #E2E8F0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.datetime-day-tag {
  background: rgba(30, 111, 251, 0.18);
  color: #38BDF8;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.45rem;
  letter-spacing: 0.3px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.datetime-pill .datetime-divider {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}

.datetime-time-val {
  color: #F8FAFC;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Dropdown Menus */
.dropdown-menu.navbar-dropdown {
  background: var(--scrumlin-bg-card) !important;
  border: 1px solid var(--scrumlin-border-light) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
}

.dropdown-menu.navbar-dropdown .dropdown-item {
  color: var(--scrumlin-text-primary) !important;
}

.dropdown-menu.navbar-dropdown .dropdown-item:hover {
  background: var(--scrumlin-bg-hover) !important;
  color: #38BDF8 !important;
}

.dropdown-divider {
  border-top-color: var(--scrumlin-border) !important;
}

/* ==========================================================================
   3. Sidebar Navigation (Fixed & High Contrast Dark Tech)
   ========================================================================== */
.sidebar {
  background: var(--scrumlin-bg-surface) !important;
  border-right: 1px solid var(--scrumlin-border) !important;
  width: 260px;
  min-height: calc(100vh - 70px);
  z-index: 100 !important;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed !important;
    top: 70px !important;
    bottom: 0 !important;
    left: 0 !important;
    height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Custom scrollbar for fixed sidebar */
  .sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  /* Offset main panel so content scrolls smoothly beside the fixed sidebar */
  body:not(.sidebar-icon-only) .main-panel {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
  }

  body.sidebar-icon-only .main-panel {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
  }

  body.sidebar-icon-only .sidebar {
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
}

.sidebar .nav {
  padding-top: 0.5rem;
  overflow: visible !important;
}

/* Profile Card inside Sidebar */
.sidebar .nav .nav-profile {
  border-bottom: 1px solid var(--scrumlin-border) !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
  background: transparent !important;
  transition: opacity 0.2s ease, max-height 0.25s ease;
  overflow: hidden;
}

.sidebar .nav .nav-profile .nav-link {
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  width: 100% !important;
}

.sidebar .nav .nav-profile .user-name {
  color: #F8FAFC !important;
  font-weight: 600;
}

.sidebar .nav .nav-profile .user-role {
  color: #64748B !important;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Strict resets for base template white background on nav-items */
.sidebar .nav .nav-item {
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  position: relative;
}

.sidebar .nav .nav-item:hover {
  background: transparent !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) {
  background: transparent !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) > .nav-link {
  background: rgba(30, 111, 251, 0.12) !important;
  color: #FFFFFF !important;
}

/* Sidebar Nav Items (Expanded Link Pill) */
.sidebar .nav .nav-item .nav-link {
  color: #94A3B8 !important;
  font-weight: 500;
  border-radius: 10px;
  margin: 0.3rem 0.85rem !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1px solid transparent;
  white-space: nowrap !important;
  overflow: hidden;
  height: 46px;
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
  color: #64748B !important;
  font-size: 1.3rem !important;
  margin-right: 0.85rem !important;
  margin-left: 0 !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1 !important;
  transition: color 0.2s ease, margin 0.25s ease !important;
}

.sidebar .nav .nav-item .nav-link .menu-title {
  color: inherit !important;
  font-size: 0.875rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1;
}

/* Chevron Arrow Indicator on Main Menu Parent items */
.sidebar .nav .nav-item .nav-link i.menu-arrow {
  display: inline-block !important;
  font-size: 1.15rem !important;
  color: #64748B !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
  line-height: 1 !important;
}

.sidebar .nav .nav-item:hover > .nav-link i.menu-arrow {
  color: #38BDF8 !important;
}

/* When expanded, smoothly rotate chevron */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow {
  transform: rotate(180deg) !important;
  color: #38BDF8 !important;
}

/* Hide header title inside normal expanded sidebar submenus */
.sidebar .submenu-header-title {
  display: none !important;
}

/* Submenu child links - strictly NO duplicate prefix arrows */
.sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar .nav.sub-menu .nav-item .nav-link::before {
  display: none !important;
  content: none !important;
}

/* Sub-menu styling */
.sidebar .nav.sub-menu {
  margin: 0.25rem 0 0.5rem 0 !important;
  padding: 0 0 0 1rem !important;
  list-style: none !important;
  background: transparent !important;
  width: 100% !important;
}

.sidebar .nav.sub-menu .nav-item {
  width: 100% !important;
  padding: 0 !important;
  margin: 0.2rem 0 !important;
  display: block !important;
  background: transparent !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  color: #94A3B8 !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.85rem !important;
  height: 38px !important;
  margin: 0 !important;
  width: 100% !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0.65rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transition: all 0.2s ease !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link i {
  font-size: 1.1rem !important;
  color: #64748B !important;
  margin: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: color 0.2s ease !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(30, 111, 251, 0.15) !important;
  border-color: rgba(30, 111, 251, 0.3) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover i {
  color: #38BDF8 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active,
.sidebar .nav.sub-menu .nav-item.active > .nav-link {
  color: #38BDF8 !important;
  background: rgba(30, 111, 251, 0.22) !important;
  border: 1px solid rgba(30, 111, 251, 0.45) !important;
  box-shadow: 0 0 12px rgba(30, 111, 251, 0.2) !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active i,
.sidebar .nav.sub-menu .nav-item.active > .nav-link i {
  color: #38BDF8 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link::before,
.sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar .nav.sub-menu .nav-item .nav-link::after,
.sidebar .nav.sub-menu .nav-item .nav-link:after {
  display: none !important;
  content: none !important;
}

/* Inactive Hover */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
  color: #F8FAFC !important;
  background: rgba(30, 111, 251, 0.12) !important;
  border: 1px solid rgba(30, 111, 251, 0.2) !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-icon {
  color: #38BDF8 !important;
}

/* Active Sidebar Link - Clean Glow Pill */
.sidebar .nav .nav-item.active {
  background: transparent !important;
}

.sidebar .nav .nav-item.active > .nav-link {
  background: linear-gradient(135deg, rgba(30, 111, 251, 0.22) 0%, rgba(0, 180, 216, 0.12) 100%) !important;
  color: #38BDF8 !important;
  font-weight: 600 !important;
  border: 1px solid rgba(30, 111, 251, 0.4) !important;
  position: relative;
  box-shadow: 0 0 16px rgba(30, 111, 251, 0.18) !important;
}

.sidebar .nav .nav-item.active > .nav-link .menu-title {
  color: #38BDF8 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar .nav .nav-item.active > .nav-link i.menu-icon {
  color: #38BDF8 !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 15%;
  height: 70%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #1E6FFB 0%, #00B4D8 100%) !important;
}

/* ==========================================================================
   Smooth Synchronized Transitions for Sidebar Collapsing & Expanding
   ========================================================================== */
.sidebar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper,
.main-panel,
.content-wrapper {
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1),
              margin 0.3s cubic-bezier(0.2, 0, 0, 1),
              padding 0.3s cubic-bezier(0.2, 0, 0, 1),
              background 0.3s ease !important;
  will-change: width, margin;
}

/* Nav Link Smooth Morph */
.sidebar .nav .nav-item .nav-link {
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1),
              margin 0.3s cubic-bezier(0.2, 0, 0, 1),
              padding 0.3s cubic-bezier(0.2, 0, 0, 1),
              background 0.2s ease,
              border-color 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.sidebar .nav .nav-item .nav-link .menu-title {
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Brand Logo Smooth Cross-fade */
.navbar .navbar-brand-wrapper {
  overflow: hidden !important;
  position: relative !important;
}

.navbar .navbar-brand-wrapper .brand-logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem;
  height: 100%;
  width: 100%;
  text-decoration: none;
  white-space: nowrap !important;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.25s ease !important;
}

.navbar .navbar-brand-wrapper .brand-logo-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease !important;
  transform: scale(0.8);
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.9);
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1);
}

/* Sidebar Profile Collapse */
.sidebar .nav .nav-profile {
  transition: opacity 0.2s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease !important;
  max-height: 100px;
  overflow: hidden !important;
}

.sidebar-icon-only .sidebar .nav .nav-profile {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Collapsed Sidebar Mode (.sidebar-icon-only)
   ========================================================================== */
.sidebar-icon-only .navbar .navbar-brand-wrapper {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.sidebar-icon-only .navbar .navbar-menu-wrapper {
  width: calc(100% - 70px) !important;
}

.sidebar-icon-only .main-panel {
  width: calc(100% - 70px) !important;
}

.sidebar-icon-only .sidebar {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  overflow: visible !important;
}

.sidebar-icon-only .sidebar .nav {
  width: 70px !important;
  overflow: visible !important;
  padding-top: 1rem !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item {
  width: 70px !important;
  padding: 0 !important;
  margin: 0.4rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.hover-open {
  z-index: 1050 !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
  width: 46px !important;
  height: 46px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  text-align: center !important;
  position: relative !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  overflow: visible !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link i.menu-icon {
  margin: 0 !important;
  font-size: 1.5rem !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  color: #94A3B8 !important;
  text-align: center !important;
}

/* Collapsed Floating Menu Flyout with Spring Slide Animation */
.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
  display: flex !important;
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-8px) scale(0.95) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #0F172A !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #F8FAFC !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.75), 0 0 15px rgba(30, 111, 251, 0.25) !important;
  white-space: nowrap !important;
  z-index: 99999 !important;
  height: 38px !important;
  line-height: 1 !important;
  align-items: center !important;
  letter-spacing: 0.3px;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.2s !important;
}

/* Pointer notch pointing to the icon */
.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title::before {
  content: "" !important;
  position: absolute !important;
  left: -5px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 8px !important;
  height: 8px !important;
  background: #0F172A !important;
  border-left: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 0 0 0 2px !important;
  z-index: 1 !important;
}

/* Cyan accent bar on the right edge */
.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title::after {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #00D2FF 0%, #1E6FFB 100%) !important;
  margin-left: 0.75rem !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.6) !important;
}

/* In collapsed mode, hide the standalone single-pill tooltip for items that have a submenu */
.sidebar-icon-only .sidebar .nav .nav-item.has-submenu > .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav .nav-item:has(.collapse) > .nav-link .menu-title {
  display: none !important;
}

/* Trigger Flyout on Hover for regular menu items without submenus */
.sidebar-icon-only .sidebar .nav .nav-item:not(.has-submenu):hover .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav .nav-item:not(.has-submenu).hover-open .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav .nav-item:not(.has-submenu) .nav-link:hover .menu-title {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
  pointer-events: auto !important;
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.85), 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-arrow {
  display: none !important;
}

/* Collapsed Hover for Top-Level Links */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
  background: rgba(30, 111, 251, 0.15) !important;
  border: 1px solid rgba(30, 111, 251, 0.35) !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-icon {
  color: #38BDF8 !important;
}

/* Collapsed Active Pill for Top-Level Links */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link {
  background: linear-gradient(135deg, rgba(30, 111, 251, 0.28) 0%, rgba(0, 180, 216, 0.16) 100%) !important;
  border: 1px solid rgba(30, 111, 251, 0.5) !important;
  box-shadow: 0 0 16px rgba(30, 111, 251, 0.3) !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i.menu-icon {
  color: #38BDF8 !important;
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link::before {
  display: none !important;
}

/* Collapsed Submenu Flyout Container */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.hover-open > .collapse,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.hover-open > .collapsing,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .collapse {
  display: block !important;
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 230px !important;
  min-width: 230px !important;
  background: #0F172A !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.85), 0 0 20px rgba(30, 111, 251, 0.25) !important;
  z-index: 1050 !important;
  padding: 0.6rem 0.5rem !important;
}

/* Pointer notch pointing to the icon */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .collapse::before,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.hover-open > .collapse::before {
  content: "" !important;
  position: absolute !important;
  left: -5px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 8px !important;
  height: 8px !important;
  background: #0F172A !important;
  border-left: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 0 0 0 2px !important;
  z-index: 1 !important;
}

/* Header inside the collapsed flyout */
.sidebar-icon-only .sidebar .nav .nav-item .collapse .submenu-header-title {
  display: flex !important;
  align-items: center !important;
  padding: 0.2rem 0.6rem 0.45rem 0.6rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #38BDF8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 0.35rem !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item {
  width: 100% !important;
  display: block !important;
  margin: 0.2rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link {
  width: 100% !important;
  height: 38px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  gap: 0.65rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transition: all 0.2s ease !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link i {
  font-size: 1.1rem !important;
  margin: 0 !important;
  color: #64748B !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: color 0.2s ease !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover {
  background: rgba(30, 111, 251, 0.18) !important;
  border-color: rgba(30, 111, 251, 0.3) !important;
  color: #FFFFFF !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover i {
  color: #38BDF8 !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link.active,
.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item.active > .nav-link {
  background: rgba(30, 111, 251, 0.25) !important;
  border: 1px solid rgba(30, 111, 251, 0.5) !important;
  color: #38BDF8 !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-shadow: 0 0 12px rgba(30, 111, 251, 0.2) !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link.active i,
.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item.active > .nav-link i {
  color: #38BDF8 !important;
}

.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link::before,
.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:before,
.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link::after,
.sidebar-icon-only .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   4. Cards & Dashboard Containers (Dark Tech Surfaces)
   ========================================================================== */
.card {
  background: var(--scrumlin-bg-card) !important;
  border: 1px solid var(--scrumlin-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.card .card-body {
  padding: 1.5rem 1.75rem;
  color: var(--scrumlin-text-primary);
}

.card .card-title {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   5. Scrumlin Logo-Derived Gradients for Metric Cards & Buttons
   ========================================================================== */
/* Blue to Cyan Gradient (Primary Ribbon) */
.bg-gradient-primary,
.btn-gradient-primary {
  background: linear-gradient(135deg, #1657FF 0%, #00B4D8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(30, 111, 251, 0.3) !important;
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #1E6FFB 0%, #0096FA 100%) !important;
  box-shadow: 0 8px 24px rgba(30, 111, 251, 0.45) !important;
  transform: translateY(-1px);
}

/* Coral to Orange Gradient (Top Energy Stream) */
.bg-gradient-danger,
.btn-gradient-danger {
  background: linear-gradient(135deg, #FF3366 0%, #FF8C00 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(255, 51, 102, 0.25) !important;
}

/* Emerald to Lime Gradient (Bottom Growth Stream) */
.bg-gradient-success,
.btn-gradient-success {
  background: linear-gradient(135deg, #10B981 0%, #84CC16 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25) !important;
}

/* Info Gradient */
.bg-gradient-info,
.btn-gradient-info {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Warning Gradient */
.bg-gradient-warning,
.btn-gradient-warning {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Card images */
.card.card-img-holder {
  position: relative;
  overflow: hidden;
}

.card.card-img-holder .card-img-absolute {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  opacity: 0.12;
}

/* ==========================================================================
   6. Tables & DataGrids
   ========================================================================== */
.table {
  color: #E2E8F0 !important;
}

.table thead th {
  border-bottom: 1px solid var(--scrumlin-border-light) !important;
  color: #94A3B8 !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table td {
  border-top: 1px solid var(--scrumlin-border) !important;
  vertical-align: middle;
  padding: 0.9rem 0.75rem;
  color: #CBD5E1;
}

.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Badges */
.badge {
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.badge-gradient-success {
  background: linear-gradient(135deg, #10B981 0%, #84CC16 100%) !important;
  color: #FFFFFF !important;
}

.badge-gradient-warning {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
  color: #FFFFFF !important;
}

.badge-gradient-danger {
  background: linear-gradient(135deg, #FF3366 0%, #FF8C00 100%) !important;
  color: #FFFFFF !important;
}

.badge-gradient-info {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   7. Page Headers & Breadcrumbs
   ========================================================================== */
.page-header .page-title {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
}

.page-header .page-title-icon {
  background: linear-gradient(135deg, #1657FF 0%, #00B4D8 100%) !important;
  box-shadow: 0 4px 12px rgba(30, 111, 251, 0.35);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.breadcrumb {
  background: transparent !important;
  margin-bottom: 0;
}

.breadcrumb .breadcrumb-item {
  color: #64748B !important;
}

.breadcrumb .breadcrumb-item.active {
  color: #94A3B8 !important;
}

/* ==========================================================================
   8. Todo Widget (Dark Mode)
   ========================================================================== */
.todo-list-input {
  background: #162032 !important;
  border: 1px solid var(--scrumlin-border-light) !important;
  color: #F8FAFC !important;
  border-radius: 8px !important;
}

.todo-list-input::placeholder {
  color: #64748B !important;
}

.todo-list li {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--scrumlin-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.85rem;
  color: #E2E8F0;
}

.todo-list li .form-check label {
  color: #E2E8F0;
}

.todo-list li.completed .form-check label {
  color: #64748B;
  text-decoration: line-through;
}

.todo-list li .form-check input[type="checkbox"]:checked + label::before {
  background-color: #1E6FFB;
  border-color: #1E6FFB;
}

/* ==========================================================================
   9. Footer (Dark Theme)
   ========================================================================== */
.footer {
  background: var(--scrumlin-bg-surface) !important;
  border-top: 1px solid var(--scrumlin-border) !important;
  color: #64748B !important;
  padding: 1.25rem 2.25rem;
}

.footer strong {
  color: #94A3B8 !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrumlin-bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ==========================================================================
   10. Executive Livewire Datatable & Table Grid
   ========================================================================== */
.table-responsive {
  background: transparent !important;
  color: var(--scrumlin-text-primary) !important;
  overflow-x: auto !important;
  border-radius: 12px;
}

.table-responsive table.table,
.power-grid-table,
div[wire\:id] table {
  color: var(--scrumlin-text-primary) !important;
  background-color: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* Table Cells General Padding & Baseline */
.table-responsive table.table > :not(caption) > * > *,
.power-grid-table th,
.power-grid-table td,
div[wire\:id] table th,
div[wire\:id] table td {
  background-color: transparent !important;
  color: #F8FAFC !important;
  border: none !important;
  padding: 1.05rem 1.15rem !important;
  vertical-align: middle !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-hover-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-bg: transparent !important;
}

/* Luxury Table Header */
.table-responsive table.table thead th,
.power-grid-table thead th,
div[wire\:id] table thead th {
  color: #94A3B8 !important;
  font-weight: 700 !important;
  font-size: 0.735rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.075em !important;
  background-color: rgba(14, 22, 38, 0.95) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
  white-space: nowrap !important;
  user-select: none;
  transition: color 0.15s ease;
}

.table-responsive table.table thead th:hover,
div[wire\:id] table thead th:hover {
  color: #38BDF8 !important;
}

/* Table Rows & Polished Hover Effect */
.table-responsive table.table tbody tr,
.power-grid-table tbody tr,
div[wire\:id] table tbody tr {
  background-color: rgba(14, 22, 38, 0.45) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.table-responsive table.table tbody tr:last-child,
div[wire\:id] table tbody tr:last-child {
  border-bottom: none !important;
}

.table-responsive table.table tbody tr:hover,
.power-grid-table tbody tr:hover,
div[wire\:id] table tbody tr:hover,
.table-hover > tbody > tr:hover > * {
  background-color: rgba(30, 111, 251, 0.09) !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-hover-bg: transparent !important;
  --bs-table-hover-color: #F8FAFC !important;
  --bs-table-bg-state: transparent !important;
  --bs-table-color-state: #F8FAFC !important;
  color: #F8FAFC !important;
  box-shadow: inset 3px 0 0 #00B4D8 !important;
}

.table-responsive table.table tbody tr:hover td,
.power-grid-table tbody tr:hover td,
div[wire\:id] table tbody tr:hover td {
  color: #F8FAFC !important;
  background-color: transparent !important;
}

.table-responsive table.table tbody tr:hover .text-muted,
div[wire\:id] table tbody tr:hover .text-muted {
  color: #94A3B8 !important;
}

.table-responsive table.table tbody tr:hover .text-white,
div[wire\:id] table tbody tr:hover .text-white {
  color: #FFFFFF !important;
}

.table-responsive table.table tbody tr:hover .text-info,
div[wire\:id] table tbody tr:hover .text-info {
  color: #38BDF8 !important;
}

.table-responsive table.table tbody tr:hover .text-danger,
div[wire\:id] table tbody tr:hover .text-danger {
  color: #F87171 !important;
}

/* ==========================================================================
   11. Custom Selects & Search Bar Inputs
   ========================================================================== */
.form-select,
select.form-select,
div[wire\:id] select {
  background-color: #0B1322 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 13px 9px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #F8FAFC !important;
  border-radius: 10px !important;
  font-size: 0.835rem !important;
  font-weight: 500 !important;
  height: 40px !important;
  padding: 0.45rem 2.1rem 0.45rem 0.85rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
}

.form-select:focus,
select.form-select:focus,
div[wire\:id] select:focus {
  border-color: #38BDF8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 111, 251, 0.25), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.form-control,
input.form-control,
textarea.form-control,
div[wire\:id] input[type="text"],
div[wire\:id] input[type="search"],
div[wire\:id] input[type="number"],
div[wire\:id] input[type="email"],
div[wire\:id] input[type="date"],
div[wire\:id] input[type="password"] {
  background-color: #0B1322 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #F8FAFC !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  height: 40px;
  padding: 0.5rem 0.95rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
div[wire\:id] input:focus {
  border-color: #38BDF8 !important;
  background-color: #0E182A !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 111, 251, 0.25), 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  color: #FFFFFF !important;
}

.form-control::placeholder,
input.form-control::placeholder {
  color: #64748B !important;
}

/* Custom Checkboxes */
.form-check-input,
div[wire\:id] .form-check-input {
  background-color: #0B1322 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 6px !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  cursor: pointer;
  margin-top: 0 !important;
  transition: all 0.15s ease;
}

.form-check-input:checked,
div[wire\:id] .form-check-input:checked {
  background-color: #1E6FFB !important;
  border-color: #00B4D8 !important;
  box-shadow: 0 0 10px rgba(30, 111, 251, 0.6) !important;
}

/* ==========================================================================
   12. Badges, Chips & Visual Elements
   ========================================================================== */
/* Tech Code Badge */
.tech-code-badge {
  background: rgba(11, 19, 34, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38BDF8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.775rem;
  font-weight: 600;
  padding: 0.32rem 0.65rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.3px;
}

/* Employee Avatar Circle */
.emp-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.825rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(30, 111, 251, 0.4);
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  letter-spacing: 0.5px;
}

/* Department Badge */
.dept-badge {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  font-size: 0.785rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dept-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38BDF8;
  margin-right: 0.5rem;
  display: inline-block;
  box-shadow: 0 0 6px #38BDF8;
}

/* Period Badge */
.period-badge {
  background: rgba(11, 19, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
  font-size: 0.825rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Modern Status Pills with Glowing Dot */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.765rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  display: inline-block;
}

.status-pill-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34D399;
}
.dot-success {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.status-pill-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FBBF24;
}
.dot-warning {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
}

.status-pill-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #F87171;
}
.dot-danger {
  background: #EF4444;
  box-shadow: 0 0 8px #EF4444;
}

.status-pill-secondary {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94A3B8;
}
.dot-secondary {
  background: #64748B;
  box-shadow: 0 0 6px #64748B;
}

.status-pill-info {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38BDF8;
}
.dot-info {
  background: #0284C7;
  box-shadow: 0 0 8px #38BDF8;
}

/* ==========================================================================
   13. Executive Action Buttons
   ========================================================================== */
.action-btn-pay {
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 4px 14px rgba(30, 111, 251, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
  text-decoration: none !important;
  letter-spacing: 0.2px;
}

.action-btn-pay:hover {
  background: linear-gradient(135deg, #1657FF 0%, #0096FA 100%) !important;
  box-shadow: 0 6px 20px rgba(30, 111, 251, 0.55) !important;
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

.action-btn-pdf {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38BDF8 !important;
  border-radius: 8px !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  text-decoration: none !important;
}

.action-btn-pdf:hover {
  background: #0284C7 !important;
  border-color: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-email {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
  border-radius: 8px !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  text-decoration: none !important;
}

.action-btn-email:hover {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
  text-decoration: none !important;
}

.action-btn-view {
  background: rgba(0, 180, 216, 0.12) !important;
  border: 1px solid rgba(0, 180, 216, 0.35) !important;
  color: #38BDF8 !important;
}

.action-btn-view:hover {
  background: #0284C7 !important;
  border-color: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-edit {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
}

.action-btn-edit:hover {
  background: rgba(30, 111, 251, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #38BDF8 !important;
  box-shadow: 0 4px 12px rgba(30, 111, 251, 0.3) !important;
  transform: translateY(-1px);
}

.action-btn-delete {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #F87171 !important;
}

.action-btn-delete:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-pdf {
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #F87171 !important;
}

.action-btn-pdf:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-email {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

.action-btn-email:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-1px);
}

.action-btn-log,
.action-btn-history {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #FBBF24 !important;
}

.action-btn-log:hover,
.action-btn-history:hover {
  background: #D97706 !important;
  border-color: #D97706 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   14. Bottom Centered Pagination & Footer Summary
   ========================================================================== */
.pagination {
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  gap: 4px;
}

.pagination .page-item .page-link {
  background-color: #0E1626 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.95rem !important;
  font-size: 0.835rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%) !important;
  border-color: #1E6FFB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 111, 251, 0.45) !important;
}

.pagination .page-item .page-link:hover {
  background-color: rgba(30, 111, 251, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
}

.pagination .page-item.disabled .page-link {
  background-color: rgba(14, 22, 38, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: #475569 !important;
}

/* Modal Enhancements */
.modal-content {
  background: linear-gradient(180deg, #131C2E 0%, #0E1626 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 1.25rem 1.75rem !important;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 1.25rem 1.75rem !important;
}

/* ==========================================================================
   15. Multi-Step Form Wizard Component
   ========================================================================== */
.step-wizard-wrapper {
  background: rgba(11, 19, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.step-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-wizard-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
  user-select: none;
}

.step-indicator {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0E1626;
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.step-wizard-item.active .step-indicator {
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%);
  border-color: #38BDF8;
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(30, 111, 251, 0.25), 0 0 16px rgba(0, 180, 216, 0.45);
}

.step-wizard-item.completed .step-indicator {
  background: linear-gradient(135deg, #10B981 0%, #84CC16 100%);
  border-color: #34D399;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.step-info {
  display: flex;
  flex-direction: column;
}

.step-number-tag {
  font-size: 0.685rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.step-wizard-item.active .step-number-tag {
  color: #38BDF8;
}

.step-wizard-item.completed .step-number-tag {
  color: #34D399;
}

.step-title {
  font-size: 0.835rem;
  font-weight: 600;
  color: #94A3B8;
  line-height: 1.1;
  white-space: nowrap;
}

.step-wizard-item.active .step-title {
  color: #FFFFFF;
  font-weight: 700;
}

.step-wizard-item.completed .step-title {
  color: #E2E8F0;
}

.step-connector-line {
  flex-grow: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0.75rem;
  transition: background 0.3s ease;
}

.step-connector-line.active {
  background: linear-gradient(90deg, #10B981 0%, #00B4D8 100%);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.5);
}

/* Step Content Card */
.step-pane-content {
  animation: fadeInStep 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Review Summary Card in Step 4 */
.review-summary-card {
  background: rgba(11, 19, 34, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.review-section-header {
  color: #38BDF8;
  font-size: 0.825rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.45rem;
  margin-bottom: 0.85rem;
}

.review-item-label {
  color: #64748B;
  font-size: 0.775rem;
  margin-bottom: 0.15rem;
}

.review-item-value {
  color: #F8FAFC;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ==========================================================================
   16. Executive Employee Dossier Profile View
   ========================================================================== */
.profile-cover-banner {
  background: linear-gradient(135deg, rgba(30, 111, 251, 0.45) 0%, rgba(0, 180, 216, 0.25) 50%, rgba(14, 22, 38, 0.95) 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 2.25rem 2rem 1.5rem 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}

.profile-cover-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 216, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.profile-avatar-large {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(30, 111, 251, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.dossier-kpi-card {
  background: rgba(11, 19, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.95rem 1.15rem;
  transition: all 0.2s ease;
  height: 100%;
}

.dossier-kpi-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 22, 38, 0.9);
  transform: translateY(-1px);
}

.dossier-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  margin-bottom: 0.25rem;
}

.dossier-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.2;
}

.dossier-box {
  background: rgba(11, 19, 34, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  height: 100%;
  transition: border-color 0.2s ease;
}

.dossier-box:hover {
  border-color: rgba(56, 189, 248, 0.25);
}

.dossier-box-title {
  color: #38BDF8;
  font-size: 0.825rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dossier-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dossier-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dossier-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(30, 111, 251, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.dossier-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
  line-height: 1;
}

.dossier-field-value {
  color: #F8FAFC;
  font-size: 0.885rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

/* ==========================================================================
   17. Luxury Alert & Notification Banners & Toasts
   ========================================================================== */
.alert,
.alert-scrumlin {
  position: relative;
  padding: 1.15rem 1.4rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 14px !important;
  background: rgba(14, 22, 38, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.25rem;
  animation: slideDownAlert 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes slideDownAlert {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.alert .alert-content-wrapper,
.alert-scrumlin .alert-content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  flex-grow: 1;
}

.alert-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.alert-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.1rem;
}

.alert-message-title {
  font-size: 0.925rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.alert-message-body {
  font-size: 0.85rem;
  color: #CBD5E1;
  line-height: 1.45;
  margin-bottom: 0;
}

.alert-message-body ul {
  margin-top: 0.4rem;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.alert-message-body li {
  margin-bottom: 0.2rem;
}

.alert-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.15rem;
  flex-shrink: 0;
  padding: 0;
  margin-top: 0.1rem;
}

.alert-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

/* Success Alert */
.alert-success,
.alert-scrumlin-success {
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-left: 5px solid #10B981 !important;
}

.alert-success .alert-icon-box,
.alert-scrumlin-success .alert-icon-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(132, 204, 22, 0.18) 100%);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34D399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.alert-success .alert-message-title,
.alert-scrumlin-success .alert-message-title {
  color: #34D399;
}

/* Error / Danger Alert */
.alert-danger,
.alert-scrumlin-danger {
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  border-left: 5px solid #EF4444 !important;
}

.alert-danger .alert-icon-box,
.alert-scrumlin-danger .alert-icon-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(255, 51, 102, 0.18) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #F87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

.alert-danger .alert-message-title,
.alert-scrumlin-danger .alert-message-title {
  color: #F87171;
}

/* Warning Alert */
.alert-warning,
.alert-scrumlin-warning {
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-left: 5px solid #F59E0B !important;
}

.alert-warning .alert-icon-box,
.alert-scrumlin-warning .alert-icon-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(251, 191, 36, 0.18) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #FBBF24;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

.alert-warning .alert-message-title,
.alert-scrumlin-warning .alert-message-title {
  color: #FBBF24;
}

/* Info Alert */
.alert-info,
.alert-scrumlin-info {
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-left: 5px solid #00B4D8 !important;
}

.alert-info .alert-icon-box,
.alert-scrumlin-info .alert-icon-box {
  background: linear-gradient(135deg, rgba(30, 111, 251, 0.3) 0%, rgba(0, 180, 216, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38BDF8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.alert-info .alert-message-title,
.alert-scrumlin-info .alert-message-title {
  color: #38BDF8;
}

/* ==========================================================================
   18. Floating Luxury Toast Notification Stack (Alpine / Livewire)
   ========================================================================== */
.scrumlin-toast-container {
  position: fixed;
  top: 80px;
  right: 28px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 390px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}

.scrumlin-toast-card {
  position: relative;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  pointer-events: auto;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.scrumlin-toast-card.toast-leaving {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  transition: all 0.25s ease-in;
}

/* Toast Color Themes */
.scrumlin-toast-card.toast-success {
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-left: 5px solid #10B981;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(16, 185, 129, 0.2);
}

.scrumlin-toast-card.toast-success .toast-icon-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(132, 204, 22, 0.18) 100%);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34D399;
}

.scrumlin-toast-card.toast-success .toast-title {
  color: #34D399;
}

.scrumlin-toast-card.toast-success .toast-progress-bar {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.scrumlin-toast-card.toast-danger,
.scrumlin-toast-card.toast-error {
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-left: 5px solid #EF4444;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(239, 68, 68, 0.2);
}

.scrumlin-toast-card.toast-danger .toast-icon-badge,
.scrumlin-toast-card.toast-error .toast-icon-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(255, 51, 102, 0.18) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #F87171;
}

.scrumlin-toast-card.toast-danger .toast-title,
.scrumlin-toast-card.toast-error .toast-title {
  color: #F87171;
}

.scrumlin-toast-card.toast-danger .toast-progress-bar,
.scrumlin-toast-card.toast-error .toast-progress-bar {
  background: linear-gradient(90deg, #EF4444, #F87171);
}

.scrumlin-toast-card.toast-warning {
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left: 5px solid #F59E0B;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(245, 158, 11, 0.2);
}

.scrumlin-toast-card.toast-warning .toast-icon-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(251, 191, 36, 0.18) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #FBBF24;
}

.scrumlin-toast-card.toast-warning .toast-title {
  color: #FBBF24;
}

.scrumlin-toast-card.toast-warning .toast-progress-bar {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.scrumlin-toast-card.toast-info {
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-left: 5px solid #00B4D8;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
}

.scrumlin-toast-card.toast-info .toast-icon-badge {
  background: linear-gradient(135deg, rgba(30, 111, 251, 0.3) 0%, rgba(0, 180, 216, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38BDF8;
}

.scrumlin-toast-card.toast-info .toast-title {
  color: #38BDF8;
}

.scrumlin-toast-card.toast-info .toast-progress-bar {
  background: linear-gradient(90deg, #1E6FFB, #38BDF8);
}

/* Toast Elements */
.toast-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.toast-body-content {
  flex-grow: 1;
  padding-top: 0.1rem;
}

.toast-title {
  font-size: 0.885rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.toast-message {
  font-size: 0.825rem;
  color: #E2E8F0;
  line-height: 1.35;
  margin: 0;
}

.toast-dismiss-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  flex-shrink: 0;
  padding: 0;
}

.toast-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.toast-progress-bar-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.toast-progress-bar {
  height: 100%;
  width: 100%;
  transition: width 0.05s linear;
}

/* ==========================================================================
   19. Luxury Dark Tech Pagination System
   ========================================================================== */
/* Strict SVG Constraint to prevent raw SVG explosion */
nav[role="navigation"] svg,
.pagination svg,
div[wire\:id] nav svg {
  max-width: 16px !important;
  max-height: 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.scrumlin-pagination-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0.5rem 0 !important;
  user-select: none !important;
}

.pagination-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  background: #0B1322 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer;
}

.pagination-btn:hover:not(.pagination-btn-disabled):not(.pagination-btn-active) {
  color: #38BDF8 !important;
  background: rgba(30, 111, 251, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 4px 12px rgba(30, 111, 251, 0.25) !important;
  transform: translateY(-1px);
}

.pagination-btn-active {
  background: linear-gradient(135deg, #1657FF 0%, #00B4D8 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 16px rgba(30, 111, 251, 0.45) !important;
  cursor: default;
}

.pagination-btn-disabled {
  opacity: 0.35 !important;
  color: #64748B !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.pagination-btn-ellipsis {
  background: transparent !important;
  border: none !important;
  color: #64748B !important;
  min-width: 24px !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Fallback Bootstrap Pagination Restyling */
.pagination {
  gap: 5px !important;
  margin-bottom: 0 !important;
}

.pagination .page-item .page-link {
  background: #0B1322 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  color: #94A3B8 !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.85rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  transition: all 0.2s ease !important;
}

.pagination .page-item:hover .page-link {
  background: rgba(30, 111, 251, 0.15) !important;
  color: #38BDF8 !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #1657FF 0%, #00B4D8 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 14px rgba(30, 111, 251, 0.4) !important;
}

.pagination .page-item.disabled .page-link {
  background: #0B1322 !important;
  opacity: 0.35 !important;
  color: #64748B !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   20. Custom Interactive Standalone Status Toggle Switch
   ========================================================================== */
.status-toggle-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  user-select: none !important;
  line-height: 1 !important;
}

.status-toggle-pill:focus {
  outline: none !important;
}

.status-toggle-pill .toggle-track {
  width: 48px;
  height: 24px;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active State (Emerald Green Glowing Track) */
.status-toggle-pill.toggle-active .toggle-track {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.18) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.status-toggle-pill.toggle-active:hover .toggle-track {
  border-color: #34D399;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.65);
  transform: scale(1.05);
}

.status-toggle-pill.toggle-active .toggle-thumb {
  position: absolute;
  right: 3px;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  color: #042F2E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.95);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inactive State (Crimson Ruby Glowing Track) */
.status-toggle-pill.toggle-inactive .toggle-track {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(153, 27, 27, 0.15) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.status-toggle-pill.toggle-inactive:hover .toggle-track {
  border-color: #EF4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}

.status-toggle-pill.toggle-inactive .toggle-thumb {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
  color: #450A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sticky Payout Card for Payslip Generator */
.sticky-payout-card {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 85px !important;
  z-index: 10 !important;
  transition: box-shadow 0.3s ease;
}

@media (max-width: 991px) {
  .sticky-payout-card {
    position: static !important;
    top: auto !important;
  }
}

/* ==========================================================================
   Global High-Visibility Glowing Form Labels for Dark Theme
   ========================================================================== */
label,
.form-label,
.field-label,
.col-form-label {
  color: #F0F9FF !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.42), 0 0 2px rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem;
  letter-spacing: 0.015em;
  margin-bottom: 0.35rem;
  transition: text-shadow 0.2s ease, color 0.2s ease;
}

/* Form label focus glow enhancement */
.parameter-box:focus-within label,
.parameter-box:focus-within .field-label,
.form-group:focus-within label,
.form-group:focus-within .form-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.7), 0 0 4px rgba(255, 255, 255, 0.8) !important;
}

/* Ensure absolute uniformity across all muted/faint label variants */
label.text-muted,
.form-label.text-muted,
.form-label.text-white-50,
label.text-white-50,
label.text-black-50,
.sub-field-label {
  color: #F0F9FF !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.42), 0 0 2px rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
}

/* Luminous Crimson Red Required Asterisk (*) */
label .text-danger,
.form-label .text-danger,
.field-label .text-danger,
.field-label-header .text-danger {
  color: #FF4D6D !important;
  text-shadow: 0 0 10px rgba(255, 77, 109, 0.75), 0 0 2px rgba(255, 255, 255, 0.4) !important;
  font-weight: 700 !important;
  margin-left: 3px;
  display: inline-block;
}

/* Sub-hints and descriptive notes below labels (kept clean without harsh glow) */
label small.text-muted,
.form-label small.text-muted,
.field-label small.text-muted,
small.text-muted {
  color: #94A3B8 !important;
  text-shadow: none !important;
  font-weight: 400;
}

/* ==========================================================================
   Real-Time Livewire Validation Errors & Invalid Input Highlighting
   ========================================================================== */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid,
.form-control-dark.is-invalid {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22), 0 0 12px rgba(239, 68, 68, 0.35) !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

/* Validation error text with neon glow for dark theme visibility */
.text-danger,
.invalid-feedback,
span.text-danger.small,
span.text-danger.fs-11,
div.text-danger.fs-11,
span.text-danger.small.mt-1 {
  color: #FF4D6D !important;
  text-shadow: 0 0 10px rgba(255, 77, 109, 0.55), 0 0 2px rgba(255, 255, 255, 0.3) !important;
  font-weight: 600 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.015em;
  margin-top: 0.25rem;
}

/* ==========================================================================
   Global Numeric Input Number Spinner Fix (Disable ugly overlap spinners)
   ========================================================================== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ==========================================================================
   Active Table Row Keyboard & Focus Highlight (Clear row tracking)
   ========================================================================== */
table tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

table tbody tr:hover {
  background-color: rgba(30, 111, 251, 0.08) !important;
}

table tbody tr:focus-within,
table tbody tr.active-grid-row {
  background-color: rgba(30, 111, 251, 0.22) !important;
  box-shadow: inset 4px 0 0 #38BDF8, 0 0 16px rgba(56, 189, 248, 0.12) !important;
}

table tbody tr:focus-within > td,
table tbody tr.active-grid-row > td {
  background-color: rgba(30, 111, 251, 0.18) !important;
  border-top-color: rgba(56, 189, 248, 0.35) !important;
  border-bottom-color: rgba(56, 189, 248, 0.35) !important;
  color: #FFFFFF !important;
}

table tbody tr:focus-within .emp-avatar-sm,
table tbody tr:focus-within .emp-avatar-circle,
table tbody tr.active-grid-row .emp-avatar-sm,
table tbody tr.active-grid-row .emp-avatar-circle {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.75) !important;
  transform: scale(1.08);
  transition: all 0.2s ease;
}

table tbody tr:focus-within td:first-child,
table tbody tr.active-grid-row td:first-child {
  color: #38BDF8 !important;
  font-weight: 700 !important;
}

/* When the table has an active focused row, other non-focused rows under the mouse do not conflict */
table:focus-within tbody tr:not(:focus-within):not(.active-grid-row):hover,
table.has-active-row tbody tr:not(.active-grid-row):hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

table:focus-within tbody tr:not(:focus-within):not(.active-grid-row):hover > td,
table.has-active-row tbody tr:not(.active-grid-row):hover > td {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

table:focus-within tbody tr:not(:focus-within):not(.active-grid-row):hover .emp-avatar-sm,
table:focus-within tbody tr:not(:focus-within):not(.active-grid-row):hover .emp-avatar-circle {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
}

/* ==========================================================================
   21. Keyboard Shortcut Navigation Ribbon & Chips
   ========================================================================== */
.shortcut-ribbon {
  background: #080D18 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.55rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  min-height: 44px !important;
  user-select: none;
}

.shortcut-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: #0E1626 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.6rem !important;
  color: #CBD5E1 !important;
  font-size: 0.735rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.shortcut-chip kbd {
  background: #172338 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1.1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  display: inline-block !important;
}

/* ==========================================================================
   22. Sidebar Collapsible Sub-menu Styling
   ========================================================================== */
.sidebar .nav .sub-menu {
  padding: 0.35rem 0 0.5rem 1.75rem !important;
  list-style: none !important;
  border-left: 2px solid rgba(56, 189, 248, 0.25) !important;
  margin-left: 1.5rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

.sidebar .nav .sub-menu .nav-item {
  padding: 0 !important;
}

.sidebar .nav .sub-menu .nav-item .nav-link {
  padding: 0.45rem 0.5rem !important;
  font-size: 0.825rem !important;
  color: #94A3B8 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

.sidebar .nav .sub-menu .nav-item .nav-link:hover {
  color: #38BDF8 !important;
  transform: translateX(4px);
}

.sidebar .nav .sub-menu .nav-item .nav-link.active {
  color: #38BDF8 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.sidebar .nav .sub-menu .nav-item .nav-link i {
  font-size: 0.95rem !important;
  margin-right: 0.5rem !important;
  color: inherit !important;
}

/* ==========================================================================
   23. Global Standardized Action & Save Buttons
   ========================================================================== */
.btn-save-primary,
button.btn-save-primary {
  background: linear-gradient(135deg, #1E6FFB 0%, #00B4D8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.835rem !important;
  padding: 0.5rem 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 4px 14px rgba(30, 111, 251, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.btn-save-primary:hover:not(:disabled),
button.btn-save-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1657FF 0%, #0096FA 100%) !important;
  box-shadow: 0 6px 20px rgba(30, 111, 251, 0.6) !important;
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

.btn-save-primary:disabled,
button.btn-save-primary:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-save-success,
button.btn-save-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.835rem !important;
  padding: 0.5rem 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.btn-save-success:hover:not(:disabled),
button.btn-save-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6) !important;
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

.btn-save-outline,
button.btn-save-outline {
  background: rgba(30, 111, 251, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.835rem !important;
  padding: 0.48rem 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

.btn-save-outline:hover:not(:disabled),
button.btn-save-outline:hover:not(:disabled) {
  background: rgba(30, 111, 251, 0.25) !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 111, 251, 0.35) !important;
  transform: translateY(-1px);
}