/* ==========================================================================
   iTest Modern SaaS Design System & Master Theme
   Version: 2026.1
   Author: INILABS / Modernization Overhaul
   ========================================================================== */

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

:root {
  --primary: #111827;
  --primary-hover: #000000;
  --primary-light: rgba(17, 24, 39, 0.08);
  --primary-rgb: 17, 24, 39;
  --secondary: #64748b;
  --success: #10b981;
  --success-hover: #059669;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #fef2f2;
  --info: #06b6d4;
  --info-light: #ecfeff;
  --purple: #8b5cf6;
  --purple-light: #f5f3ff;

  --body-bg: #f8fafc;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f8fafc;
  --sidebar-active: var(--primary-light, rgba(255, 0, 107, 0.08));
  --sidebar-text: #64748b;
  --sidebar-text-active: var(--primary);
  --sidebar-border: #e2e8f0;

  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
}

/* ==========================================================================
   Light Sidebar & Global Layout Styles (Unified across all themes)
   ========================================================================== */
.left-side,
.sidebar-offcanvas,
body .left-side,
body[class*="skin-"] .left-side,
body[class*="theme-"] .left-side {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.sidebar .sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: #64748b !important;
  background: transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.sidebar .sidebar-menu > li > a i,
.sidebar-menu > li > a i {
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

.sidebar .sidebar-menu > li:hover > a,
.sidebar .sidebar-menu > li > a:hover,
.sidebar-menu > li > a:hover {
  background-color: #f8fafc !important;
  color: var(--primary) !important;
}

.sidebar .sidebar-menu > li:hover > a i,
.sidebar .sidebar-menu > li > a:hover i,
.sidebar-menu > li > a:hover i {
  color: var(--primary) !important;
}

.sidebar .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
  background: var(--primary-light, #fff0f5) !important;
  background-color: var(--primary-light, #fff0f5) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.sidebar .sidebar-menu > li.active > a i,
.sidebar-menu > li.active > a i {
  color: var(--primary) !important;
}

.sidebar .user-panel,
.user-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.sidebar .user-panel .info p,
.user-panel .info p {
  color: #0f172a !important;
}

.sidebar .user-panel .info a,
.user-panel .info a {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  text-decoration: none !important;
}

/* Base & Typography */
html,
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--body-bg) !important;
  color: var(--text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.box-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Header & Top Navigation Bar - Modern SaaS Design
   ========================================================================== */
.header {
  height: 64px !important;
  max-height: 64px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--card-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1030 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Brand Logo Container */
.header .logo {
  height: 64px !important;
  line-height: 64px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0 16px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.header .logo:hover {
  background: #f8fafc !important;
  color: var(--primary) !important;
}

.header .logo .site-logo-img {
  max-height: 32px !important;
  max-width: 36px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease !important;
}

.header .logo:hover .site-logo-img {
  transform: scale(1.05);
}

.header .logo .site-logo-text {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Navbar Top Bar - All Buttons Right Aligned */
.header .navbar {
  height: 64px !important;
  background: #ffffff !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 24px 0 16px !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Sidebar Hamburger Toggle */
.header .navbar .navbar-btn.sidebar-toggle,
.header .navbar .icon-nav-btn.sidebar-toggle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4.5px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.header .navbar .navbar-btn.sidebar-toggle:hover {
  background: var(--primary-light) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.1) !important;
  transform: translateY(-1px);
}

.header .navbar .navbar-btn.sidebar-toggle .icon-bar {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background-color: #334155 !important;
  border-radius: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.header .navbar .navbar-btn.sidebar-toggle:hover .icon-bar {
  background-color: var(--primary) !important;
}

/* Right Section Actions */
.header .navbar-right {
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 auto !important;
  height: 64px !important;
  float: right !important;
}

.header .navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

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

/* Vertical Divider */
.navbar-nav-divider {
  width: 1px !important;
  height: 28px !important;
  background: #e2e8f0 !important;
  margin: 0 4px !important;
}

/* Icon Nav Button (e.g. Notifications Bell) */
.icon-nav-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.icon-nav-btn:hover,
.messages-menu.open .icon-nav-btn {
  background: var(--primary-light) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
}

/* Push Notification Counter Badge */
.my-push-message-a .label-danger {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 14px !important;
  text-align: center !important;
  border-radius: 9999px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Language Dropdown Button */
.language-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.language-toggle-btn:hover,
.language-menu.open .language-toggle-btn {
  background: var(--primary-light) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
}

.language-toggle-btn .language-img {
  width: 20px !important;
  height: 14px !important;
  border-radius: 3px !important;
  object-fit: cover !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.language-toggle-btn .language-caret {
  font-size: 11px !important;
  color: #94a3b8 !important;
  transition: transform 0.2s ease !important;
}

.language-menu.open .language-toggle-btn .language-caret {
  transform: rotate(180deg);
  color: var(--primary) !important;
}

/* Language Dropdown Menu */
.language-menu-dropdown {
  width: 330px !important;
  max-width: 90vw !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  top: 100% !important;
  margin-top: 8px !important;
  right: 0 !important;
  left: auto !important;
  animation: navbarDropdownSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.language-menu-dropdown .header {
  height: auto !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.language-menu-dropdown .header i {
  color: var(--primary) !important;
}

.language-menu-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  padding: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

.language-menu-list li.language {
  margin: 0 !important;
}

.language-menu-list li.language a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
}

.language-menu-list li.language a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.language-menu-list li.language.active a {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.language-menu-list .lang-flag {
  width: 18px !important;
  height: 12px !important;
  border-radius: 2px !important;
  object-fit: cover !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.language-menu-list .lang-title {
  flex-grow: 1 !important;
}

.language-menu-list .lang-check {
  color: var(--primary) !important;
  font-size: 11px !important;
}

/* User Pill Button */
.user-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 42px !important;
  padding: 3px 12px 3px 5px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.user-pill-btn:hover,
.user-menu.open .user-pill-btn {
  background: var(--primary-light) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.08) !important;
  transform: translateY(-1px);
}

.user-avatar-wrap {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
}

.user-avatar-wrap .user-avatar-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--primary) !important;
}

.user-avatar-wrap .online-indicator {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 9px !important;
  height: 9px !important;
  background: var(--primary) !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
}

.user-pill-btn .user-details {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.user-pill-btn .user-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.user-pill-btn .user-role {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

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

.user-menu.open .user-pill-btn .user-caret {
  transform: rotate(180deg);
  color: var(--primary) !important;
}

/* User Profile Dropdown Card */
.user-dropdown-panel {
  width: 275px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  top: 100% !important;
  margin-top: 8px !important;
  right: 0 !important;
  left: auto !important;
  animation: navbarDropdownSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes navbarDropdownSlide {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-card-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 18px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.user-card-header .header-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.user-card-header .header-meta {
  flex-grow: 1 !important;
  overflow: hidden !important;
}

.user-card-header .header-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.user-card-header .header-role-badge {
  display: inline-block !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.3) !important;
}

.user-card-header .header-status {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

.user-card-header .header-status i {
  font-size: 7px !important;
}

/* User Dropdown Action Links */
.user-action-links {
  padding: 8px !important;
  background: #ffffff !important;
}

.user-action-links .action-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
}

.user-action-links .action-link:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  transform: translateX(3px);
}

.user-action-links .link-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  transition: transform 0.15s ease !important;
}

.user-action-links .link-icon-profile {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.user-action-links .link-icon-password {
  background: #f5f3ff !important;
  color: #8b5cf6 !important;
}

.user-action-links .action-link:hover .link-icon {
  transform: scale(1.08);
}

.user-action-links .link-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.user-action-links .link-text .title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.user-action-links .link-text .desc {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

/* User Card Footer & Logout */
.user-card-footer {
  padding: 8px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

.user-card-footer .logout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #fecaca !important;
  color: #ef4444 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.user-card-footer .logout-button:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25) !important;
}

/* Push message dropdown card */
.my-push-message-ul {
  width: 320px !important;
  max-width: 90vw !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  top: 100% !important;
  margin-top: 8px !important;
  right: 0 !important;
  left: auto !important;
}

.my-push-message-ul .header {
  height: auto !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.my-push-message-list {
  padding: 6px !important;
  margin: 0 !important;
  list-style: none !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

.my-push-message-list li a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}

.my-push-message-list li a:hover {
  background: #f1f5f9 !important;
  color: var(--primary) !important;
}

/* Global Navbar Dropdown Open State */
.header .navbar-nav>li.open>.dropdown-menu {
  display: block !important;
}

/* Override legacy skin-blue and theme styles */
.header .navbar-nav>.user-menu>.dropdown-menu>li.user-body,
.header .navbar-nav>.user-menu>.dropdown-menu>li.user-footer {
  background: transparent !important;
  padding: 0 !important;
}

.skin-blue .header .logo,
.skin-blue.fuelux .header .logo,
body.skin-blue .header .logo {
  background: #ffffff !important;
  color: #0f172a !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.skin-blue .header .logo:hover,
.skin-blue.fuelux .header .logo:hover,
body.skin-blue .header .logo:hover {
  background: #f8fafc !important;
  color: var(--primary) !important;
}

.skin-blue .header .navbar,
.skin-blue.fuelux .header .navbar,
body.skin-blue .header .navbar {
  background-color: #ffffff !important;
}

.skin-blue .header .navbar .nav a,
.skin-blue .header .navbar .nav>li>a,
.skin-blue .header .navbar .nav>li>a:hover,
.skin-blue .header .navbar .nav>li>a:active,
.skin-blue .header .navbar .nav>li>a:focus,
.skin-blue .header .navbar .nav .open>a,
.skin-blue .header .navbar .nav .open>a:hover,
.skin-blue .header .navbar .nav .open>a:focus {
  background: transparent !important;
  color: inherit !important;
}

/* ==========================================================================
   Sidebar & Navigation Menu
   ========================================================================== */
.left-side,
.sidebar-offcanvas {
  top: 64px !important;
  width: 220px !important;
  background-color: var(--sidebar-bg) !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

@media screen and (max-width: 992px) {
  .header .logo {
    width: 180px !important;
    min-width: 180px !important;
  }
}

@media screen and (max-width: 767px) {
  .header {
    height: 60px !important;
  }

  .header .logo {
    width: 60px !important;
    min-width: 60px !important;
    padding: 0 8px !important;
  }

  .header .logo .site-logo-text {
    display: none !important;
  }

  .header .navbar {
    height: 60px !important;
    padding: 0 12px !important;
  }

  .left-side,
  .sidebar-offcanvas {
    top: 60px !important;
  }

  .header .navbar-nav {
    gap: 6px !important;
  }
}

.sidebar {
  padding-top: 14px !important;
}

/* User Profile Panel in Sidebar */
.user-panel {
  padding: 14px 16px !important;
  margin: 0 10px 16px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e8edf3 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: background 0.2s ease !important;
}

.user-panel:hover {
  background: #f1f5f9 !important;
}

/* Avatar image container - relative for online dot */
.user-panel .image {
  position: relative !important;
  flex-shrink: 0 !important;
}

.user-panel .image img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Online green dot positioned on bottom-right of avatar */
.user-online-dot {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--primary) !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Info section */
.user-panel .info {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.user-panel .info p {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.user-panel .info a {
  display: inline-block !important;
  text-decoration: none !important;
}

/* Role badge - clean pill */
.user-role-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
  transition: all 0.2s ease !important;
}

.user-panel .info a:hover .user-role-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Sidebar Menu Items */
.sidebar-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-menu>li {
  margin: 3px 12px !important;
}

.sidebar-menu>li>a {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sidebar-text) !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: none !important;
}

.sidebar-menu>li>a i {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  transition: transform 0.2s ease !important;
}

.sidebar-menu>li>a:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--primary) !important;
  transform: translateX(3px) !important;
}

.sidebar-menu>li>a:hover i {
  color: var(--primary) !important;
  transform: scale(1.08) !important;
}

.sidebar-menu>li.active>a {
  background: var(--sidebar-active) !important;
  background-color: var(--sidebar-active) !important;
  color: var(--sidebar-text-active) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.sidebar-menu>li.active>a i {
  color: var(--primary) !important;
}

/* ==========================================================================
   Sidebar Navigation: Clean single items (Submenus displayed in content area)
   ========================================================================== */
.sidebar-menu .treeview-menu {
  display: none !important;
}

.sidebar-menu > li.treeview > a .pull-right {
  display: none !important;
}

/* ==========================================================================
   Module Submenu Card Grid (Top Right Content Area Navigation)
   Matches user reference: 3-column / 2-column cards with icons & active states
   ========================================================================== */
.module-submenu-wrap {
  margin-bottom: 22px !important;
  margin-top: 2px !important;
}

.module-submenu-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

@media screen and (max-width: 1199px) {
  .module-submenu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 640px) {
  .module-submenu-grid {
    grid-template-columns: 1fr !important;
  }
}

.module-submenu-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  min-height: 58px !important;
  cursor: pointer !important;
}

.module-submenu-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 18px -3px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Card Icon Container */
.module-submenu-card .card-icon-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.module-submenu-card:hover .card-icon-box {
  transform: scale(1.06) !important;
}

/* Card Text */
.module-submenu-card .card-text-box {
  flex: 1 !important;
  min-width: 0 !important;
}

.module-submenu-card .card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: -0.15px !important;
  line-height: 1.35 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.2s ease !important;
}

/* ==========================================================================
   Module Submenu Cards: Dynamic Theme Color System
   Rule: Unselected icons stay uniform neutral slate (#64748b).
         When selected (active) or hovered, icon illuminates in the active theme color!
   ========================================================================== */

/* 1. Default / Inactive State for ALL Submenu Card Icons (Clean Uniform Slate) */
.module-submenu-card .card-icon-box {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

.module-submenu-card .card-title {
  color: #334155 !important;
  transition: color 0.2s ease !important;
}

/* 2. Hover State: Previews the active theme color */
.module-submenu-card:hover {
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  box-shadow: 0 6px 18px -3px rgba(var(--primary-rgb), 0.12) !important;
  transform: translateY(-2px) !important;
}

.module-submenu-card:hover .card-title {
  color: var(--primary) !important;
}

.module-submenu-card:hover .card-icon-box {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.25) !important;
}

/* 3. Active / Selected State: Dynamically colored with the chosen theme color */
.module-submenu-card.active {
  border: 1.5px solid var(--primary) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.14) !important;
}

.module-submenu-card.active .card-title {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.module-submenu-card.active .card-icon-box {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
}

/* ==========================================================================
   Content Area & Panels
   ========================================================================== */
.right-side {
  background-color: var(--body-bg) !important;
  min-height: calc(100vh - 64px) !important;
  padding-bottom: 40px !important;
}

.content {
  padding: 24px !important;
}

/* Modern Card / Box */
.box {
  background: #ffffff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  margin-bottom: 24px !important;
  transition: box-shadow 0.2s ease !important;
  overflow: hidden !important;
}

.box:hover {
  box-shadow: var(--shadow-lg) !important;
}

.box .box-header,
.box-header {
  padding: 18px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--card-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  position: relative !important;
  width: 100% !important;
}

/* Remove legacy clearfix pseudo-elements that act as flex items */
.box .box-header::before,
.box .box-header::after,
.box-header::before,
.box-header::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Module Name / Title on FAR LEFT SIDE */
.box .box-header .box-title,
.box-header .box-title,
h3.box-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
  text-align: left !important;
  padding: 0 !important;
}

.box .box-header .box-title i,
.box-header .box-title i {
  color: var(--primary) !important;
  font-size: 17px !important;
}

/* ==========================================================================
   Modern Breadcrumb Component on FAR RIGHT SIDE
   ========================================================================== */
.breadcrumb,
.box .box-header .breadcrumb,
.box-header .breadcrumb,
ol.breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 30px !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  margin-left: auto !important;
  float: none !important;
  list-style: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.breadcrumb > li,
.box .box-header .breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  color: #64748b !important;
  padding: 0 !important;
}

.breadcrumb > li > a,
.box .box-header .breadcrumb > li > a {
  color: #64748b !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.breadcrumb > li > a:hover,
.box .box-header .breadcrumb > li > a:hover {
  color: var(--primary) !important;
}

.breadcrumb > li > a i,
.box .box-header .breadcrumb > li > a i {
  font-size: 12px !important;
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
}

.breadcrumb > li > a:hover i,
.box .box-header .breadcrumb > li > a:hover i {
  color: var(--primary) !important;
}

.breadcrumb > li.active,
.box .box-header .breadcrumb > li.active {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Modern Chevron separator */
.breadcrumb > li + li:before,
.box .box-header .breadcrumb > li + li:before {
  content: "\f105" !important;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  color: #cbd5e1 !important;
  padding: 0 6px !important;
  font-weight: 400 !important;
}

.box .box-body {
  padding: 24px !important;
}

.box .box-footer {
  padding: 16px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid var(--card-border) !important;
}

/* ==========================================================================
   Dashboard Widgets (.small-box)
   ========================================================================== */
.small-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.small-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.small-box .inner {
  padding: 24px !important;
  z-index: 2 !important;
  position: relative !important;
}

.small-box .inner h3 {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  color: #ffffff !important;
  letter-spacing: -1px !important;
}

.small-box .inner p {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.small-box .icon {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  z-index: 1 !important;
  font-size: 54px !important;
  color: rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
}

.small-box:hover .icon {
  transform: scale(1.1) rotate(-5deg) !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Widget Color Gradients */
.bg-orange-dark,
.small-box-footer.bg-orange-dark {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
}

.bg-teal-light,
.small-box-footer.bg-teal-light {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #ffffff !important;
}

.bg-pink-light,
.small-box-footer.bg-pink-light {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  color: #ffffff !important;
}

.bg-purple-light,
.small-box-footer.bg-purple-light {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
}

.small-box-footer {
  display: block !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
}

/* ==========================================================================
   DataTables & Modern Tables
   ========================================================================== */
.table-responsive {
  border: none !important;
}

.table,
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

.table thead th,
table.dataTable thead th {
  background-color: #f8fafc !important;
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 16px !important;
  border-top: none !important;
  border-bottom: 2px solid var(--card-border) !important;
}

.table tbody td,
table.dataTable tbody td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: var(--text-main) !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: none !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fbfcfe !important;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #f1f5f9 !important;
}

/* ==========================================================================
   Modern Add/Create Button (.page-header > a)
   ========================================================================== */
.page-header {
  border-bottom: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  width: 100% !important;
}

.page-header > a,
.page-header a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.28) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

.page-header > a:hover,
.page-header a.btn:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.38) !important;
}

.page-header > a:active,
.page-header a.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25) !important;
}

.page-header > a i.fa-plus,
.page-header > a i,
.page-header a.btn i {
  font-size: 12px !important;
  width: 20px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease !important;
}

.page-header > a:hover i,
.page-header a.btn:hover i {
  transform: rotate(90deg) !important;
}

/* Dropdown Filter container inside page-header - Aligned on FAR RIGHT */
.page-header .pull-right,
.page-header .drop-marg,
.page-header div[class*="col-"] {
  margin-left: auto !important;
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 240px !important;
  max-width: 340px !important;
  flex-shrink: 0 !important;
}

.page-header .drop-marg,
.drop-marg {
  border: none !important;
  background: transparent !important;
}

.page-header .select2-container,
.page-header .drop-marg .select2-container,
.page-header div[class*="col-"] .select2-container {
  width: 100% !important;
  min-width: 240px !important;
  display: block !important;
}

/* ==========================================================================
   Modern DataTable Export Buttons (Copy, Excel, CSV, PDF)
   ========================================================================== */
div.dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  float: left !important;
}

button.dt-button,
div.dt-button,
a.dt-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 15px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

button.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}

button.dt-button:active,
div.dt-button:active,
a.dt-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Export Button Accents on Hover */
button.buttons-copy:hover, a.buttons-copy:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

button.buttons-excel:hover, a.buttons-excel:hover {
  border-color: #10b981 !important;
  color: #059669 !important;
}

button.buttons-csv:hover, a.buttons-csv:hover {
  border-color: #06b6d4 !important;
  color: #0891b2 !important;
}

button.buttons-pdf:hover, a.buttons-pdf:hover {
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}

/* Icons inside export buttons */
button.buttons-copy::before, a.buttons-copy::before {
  content: "\f0c5" !important;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  color: #64748b !important;
}
button.buttons-excel::before, a.buttons-excel::before {
  content: "\f1c3" !important;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  color: #10b981 !important;
}
button.buttons-csv::before, a.buttons-csv::before {
  content: "\f0f6" !important;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  color: #06b6d4 !important;
}
button.buttons-pdf::before, a.buttons-pdf::before {
  content: "\f1c1" !important;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  color: #ef4444 !important;
}

/* ==========================================================================
   Modern Toggle Switch (.onoffswitch-small in PUBLISHED column)
   ========================================================================== */
.onoffswitch-small {
  position: relative !important;
  width: 48px !important;
  height: 26px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 auto !important;
  user-select: none !important;
}

.onoffswitch-small-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.onoffswitch-small-label {
  display: block !important;
  width: 48px !important;
  height: 26px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  position: relative !important;
  margin: 0 !important;
  border: none !important;
  background-color: #cbd5e1 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.onoffswitch-small-checkbox:checked + .onoffswitch-small-label {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.32) !important;
}

/* Hide legacy text inner */
.onoffswitch-small-inner,
.onoffswitch-small-inner:before,
.onoffswitch-small-inner:after {
  display: none !important;
}

/* Smooth Circular Knob */
.onoffswitch-small-switch {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onoffswitch-small-checkbox:checked + .onoffswitch-small-label .onoffswitch-small-switch {
  transform: translateX(22px) !important;
  right: auto !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   Modern Table Action Buttons (Edit, Delete, View, Add Question)
   ========================================================================== */
td[data-title="Action"],
td[data-title="action"],
.table td:last-child {
  white-space: nowrap !important;
}

/* Action Buttons: ONLY icon-only action buttons (Edit, Delete, View, Add Question) are 32x32 square */
td[data-title="Action"] a.btn.mrg,
td[data-title="action"] a.btn.mrg,
td[data-title="Action"] button.mrg,
td[data-title="action"] button.mrg,
.table td a.btn-xs.mrg[data-toggle="tooltip"],
.table td a.btn-xs.mrg[data-original-title],
.table td:last-child a.btn-xs.mrg {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 3px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

td[data-title="Action"] a.btn.mrg:hover,
td[data-title="action"] a.btn.mrg:hover,
td[data-title="Action"] button.mrg:hover,
td[data-title="action"] button.mrg:hover,
.table td a.btn-xs.mrg[data-toggle="tooltip"]:hover,
.table td:last-child a.btn-xs.mrg:hover {
  transform: translateY(-2px) !important;
}

td[data-title="Action"] a.btn.mrg:active,
td[data-title="action"] a.btn.mrg:active,
.table td a.btn-xs.mrg[data-toggle="tooltip"]:active {
  transform: translateY(0) !important;
}

td[data-title="Action"] a.btn.mrg i,
td[data-title="action"] a.btn.mrg i,
.table td a.btn-xs.mrg i {
  font-size: 13.5px !important;
}

/* Status Badges & Buttons with Text inside Tables (e.g., Mandatory / Optional in Subject) */
td[data-title="Type"],
td[data-title="type"] {
  white-space: nowrap !important;
  text-align: center !important;
}

.table td button.btn-xs,
.table td .btn-xs:not(.mrg),
.table td button.btn,
.table td [data-title="Type"] .btn,
.table td [data-title="type"] .btn,
.table td [data-title="Type"] button,
.table td [data-title="type"] button,
td[data-title="Type"] button,
td[data-title="type"] button,
td[data-title="Type"] .label,
td[data-title="type"] .label,
td[data-title="Type"] span,
td[data-title="type"] span,
.table td .label {
  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 4px 14px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  box-shadow: none !important;
  cursor: default !important;
  text-align: center !important;
}

/* Edit Button - Vibrant Amber */
.table td a.btn-warning,
td[data-title="Action"] .btn-warning,
.btn-warning.btn-xs,
.btn-warning.mrg {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

.table td .btn-warning:hover,
.btn-warning.btn-xs:hover,
.btn-warning.mrg:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
  color: #ffffff !important;
}

/* Delete Button - Vibrant Rose / Crimson */
.table td .btn-danger,
.btn-danger.btn-xs,
.btn-danger.mrg {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
}

.table td .btn-danger:hover,
.btn-danger.btn-xs:hover,
.btn-danger.mrg:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
  color: #ffffff !important;
}

/* View / Success Button - Bound to Unified Brand Color */
.table td .btn-success,
.btn-success.btn-xs,
.btn-success.mrg {
  background: var(--primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.table td .btn-success:hover,
.btn-success.btn-xs:hover,
.btn-success.mrg:hover {
  background: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4) !important;
  color: #ffffff !important;
}

/* Primary Table Action Button */
.table td .btn-primary,
.btn-primary.btn-xs,
.btn-primary.mrg {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.table td .btn-primary:hover,
.btn-primary.btn-xs:hover,
.btn-primary.mrg:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4) !important;
  color: #ffffff !important;
}

/* Info / Extra Button - Vibrant Cyan */
.table td .btn-info,
.btn-info.btn-xs,
.btn-info.mrg {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.table td .btn-info:hover,
.btn-info.btn-xs:hover,
.btn-info.mrg:hover {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Modern DataTables Filter (Search Box) & Table Header
   ========================================================================== */
.dataTables_wrapper .dataTables_filter {
  float: right !important;
  margin-bottom: 18px !important;
}

.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
  height: 38px !important;
  padding: 6px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9px !important;
  outline: none !important;
  font-size: 13.5px !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  width: 220px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.dataTables_wrapper .dataTables_length select {
  height: 38px !important;
  padding: 6px 32px 6px 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--radius-sm, 10px) !important;
  background-color: #ffffff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
  outline: none !important;
  font-size: 13.5px !important;
  color: var(--text-main, #1e293b) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.pagination>li>a,
.pagination>li>span {
  border-radius: var(--radius-sm) !important;
  margin: 0 3px !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
}

.pagination>.active>a,
.pagination>.active>span {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3) !important;
}

/* ==========================================================================
   Form Controls & Modern Inputs
   ========================================================================== */
.form-control:not(.select2-container) {
  height: 42px !important;
  border-radius: var(--radius-sm, 10px) !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  color: var(--text-main, #1e293b) !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:not(.select2-container):focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
  outline: none !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 90px !important;
  line-height: 1.5 !important;
}

label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-main, #1e293b) !important;
  margin-bottom: 6px !important;
}

.form-horizontal .control-label {
  padding-top: 10px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--text-main, #1e293b) !important;
}

/* ==========================================================================
   Dropdown & Select Fields (Universal Project-Wide Fix)
   ========================================================================== */

/* 1. Reset Select2 Container when it inherits .form-control */
.select2-container.form-control {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
}

.select2-container.form-control:focus,
.select2-container.form-control:active {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.select2-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
  vertical-align: middle !important;
  font-family: inherit !important;
}

/* 2. Single-Select Trigger Button (.select2-choice) */
.select2-container .select2-choice {
  height: 42px !important;
  line-height: 40px !important;
  border-radius: var(--radius-sm, 10px) !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 0 38px 0 14px !important;
  font-size: 14px !important;
  color: var(--text-main, #1e293b) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
  display: block !important;
  position: relative !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.select2-container .select2-choice:hover {
  border-color: #94a3b8 !important;
  text-decoration: none !important;
}

.select2-container-active .select2-choice,
.select2-dropdown-open .select2-choice {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

/* 3. Text label inside the button */
.select2-container .select2-choice > .select2-chosen,
.select2-chosen {
  font-size: 14px !important;
  color: var(--text-main, #1e293b) !important;
  font-weight: 500 !important;
  line-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: auto !important;
  float: none !important;
}

.select2-container .select2-choice.select2-default .select2-chosen,
.select2-default,
.select2-default .select2-chosen {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* 4. Sleek Modern Chevron Arrow */
.select2-container .select2-choice .select2-arrow,
.select2-container .select2-choice div {
  position: absolute !important;
  right: 12px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 100% !important;
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.select2-container .select2-choice .select2-arrow b,
.select2-container .select2-choice div b {
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  border-top: none !important;
  border-left: none !important;
  transform: translateY(-2px) rotate(45deg) !important;
  margin: 0 auto !important;
  background: none !important;
  background-image: none !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
}

.select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open .select2-choice div b {
  transform: translateY(2px) rotate(-135deg) !important;
  border-color: var(--primary) !important;
}

/* 5. Clear Button (Hidden by default, shown only when an item is selected with allowClear) */
.select2-container .select2-choice abbr {
  display: none !important;
  position: absolute !important;
  right: 34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background: none !important;
  background-image: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 0 !important;
  z-index: 2 !important;
}

.select2-container.select2-allowclear .select2-choice abbr {
  display: flex !important;
}

.select2-container .select2-choice abbr::before {
  content: "×" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

.select2-container .select2-choice abbr:hover::before {
  color: #ef4444 !important;
}

/* 6. Modern Floating Dropdown Popup */
.select2-drop {
  background-color: #ffffff !important;
  color: var(--text-main, #1e293b) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.06) !important;
  margin-top: 4px !important;
  padding: 6px !important;
  z-index: 10005 !important;
  box-sizing: border-box !important;
  animation: s2FadeIn 0.15s ease-out !important;
}

@keyframes s2FadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.select2-drop.select2-drop-above {
  margin-top: -4px !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 -12px 28px -4px rgba(15, 23, 42, 0.14), 0 -4px 10px -2px rgba(15, 23, 42, 0.06) !important;
}

.select2-drop-active {
  border: 1px solid #cbd5e1 !important;
}

/* 7. Search Input inside Dropdown */
.select2-search {
  padding: 4px 4px 8px 4px !important;
  margin: 0 !important;
  position: relative !important;
  display: block !important;
}

.select2-search input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 12px 6px 36px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 16px 16px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.select2-search input:focus {
  background-color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}

/* 8. Results List & Hover States */
.select2-results {
  max-height: 220px !important;
  padding: 2px !important;
  margin: 0 !important;
}

.select2-results li {
  list-style: none !important;
  margin-bottom: 2px !important;
  background-image: none !important;
}

.select2-results .select2-result-label {
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  min-height: auto !important;
}

.select2-results .select2-highlighted > .select2-result-label,
.select2-results .select2-highlighted {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.select2-results li em {
  background: transparent !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  background: transparent !important;
  text-align: center !important;
}

.select2-results .select2-disabled {
  background: transparent !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
}

/* 9. Multi-Select Tags (.select2-container-multi) */
.select2-container-multi .select2-choices {
  min-height: 42px !important;
  height: auto !important;
  border-radius: var(--radius-sm, 10px) !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 4px 8px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: text !important;
}

.select2-container-multi.select2-container-active .select2-choices {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 10px 4px 24px !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: normal !important;
}

.select2-container-multi .select2-choices .select2-search-choice-close {
  left: 7px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  width: 12px !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 0 !important;
}

.select2-container-multi .select2-choices .select2-search-choice-close::before {
  content: "×" !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
}

.select2-container-multi .select2-choices .select2-search-choice-close:hover::before {
  color: #ef4444 !important;
}

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  min-width: 80px !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
  height: 30px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

/* 10. Disabled State */
.select2-container.select2-container-disabled .select2-choice,
.select2-container.select2-container-disabled .select2-choices {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 11. Native HTML <select class="form-control"> */
select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 38px !important;
  cursor: pointer !important;
  line-height: normal !important;
}

select.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
  outline: none !important;
}

select.form-control::-ms-expand {
  display: none !important;
}

/* 12. Standard Bootstrap Dropdown Menus */
.dropdown-menu {
  border-radius: var(--radius-md, 12px) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  padding: 6px !important;
}

.dropdown-menu > li > a {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

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

.dropdown-menu .divider {
  background-color: #f1f5f9 !important;
  margin: 6px 0 !important;
}

/* 13. Validation States */
.has-error .form-control:not(.select2-container),
.has-error .select2-container .select2-choice,
.has-error .select2-container-multi .select2-choices {
  border-color: #ef4444 !important;
}

.has-error .form-control:not(.select2-container):focus,
.has-error .select2-container-active .select2-choice,
.has-error .select2-container-multi.select2-container-active .select2-choices {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.has-success .form-control:not(.select2-container),
.has-success .select2-container .select2-choice,
.has-success .select2-container-multi .select2-choices {
  border-color: #10b981 !important;
}

/* 14. Responsive / RTL */
html[dir="rtl"] .select2-container .select2-choice {
  padding: 0 14px 0 38px !important;
}

html[dir="rtl"] .select2-container .select2-choice .select2-arrow,
html[dir="rtl"] .select2-container .select2-choice div {
  left: 12px !important;
  right: auto !important;
}

html[dir="rtl"] select.form-control {
  background-position: left 14px center !important;
  padding-left: 40px !important;
  padding-right: 14px !important;
}

/* Buttons */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn:active {
  transform: translateY(1px) !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="button"].btn-primary,
input[type="submit"].btn-primary,
.btn-success,
button.btn-success,
a.btn-success,
input[type="button"].btn-success,
input[type="submit"].btn-success,
input[type="submit"],
.image-preview-input,
.image-preview-input.btn-success {
  background: var(--primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
a.btn-primary:hover,
input[type="button"].btn-primary:hover,
input[type="submit"].btn-primary:hover,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
button.btn-success:hover,
a.btn-success:hover,
input[type="button"].btn-success:hover,
input[type="submit"].btn-success:hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.image-preview-input:hover,
.image-preview-input.btn-success:hover {
  background: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
}

.btn-info {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #ffffff !important;
}

.btn-default {
  background: #ffffff !important;
  border: 1.5px solid var(--card-border) !important;
  color: var(--text-main) !important;
}

.btn-default:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Detail & Profile View Custom Buttons */
.btn-cs,
.btn-sm-cs {
  border-radius: var(--radius-sm, 8px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-cs:hover,
.btn-sm-cs:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Modern Profile Card Well */
.well {
  background: #ffffff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

/* Nav Tabs Custom */
.nav-tabs-custom > .nav-tabs > li.active {
  border-bottom-color: var(--primary) !important;
  border-top-color: var(--primary) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
  color: var(--primary) !important;
}

.box.box-primary {
  border-top-color: var(--primary) !important;
}

.box.box-solid.box-primary > .box-header {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Badges & Labels */
.label {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.label-success {
  background-color: var(--success) !important;
}

.label-warning {
  background-color: var(--warning) !important;
}

.label-danger {
  background-color: var(--danger) !important;
}

.label-info {
  background-color: var(--info) !important;
}

.label-primary {
  background-color: var(--primary) !important;
}

/* Callout Alerts */
.callout {
  border-radius: var(--radius-md) !important;
  padding: 16px 20px !important;
  margin: 0 0 20px 0 !important;
  border-left-width: 4px !important;
}

.callout-danger {
  background-color: var(--danger-light) !important;
  border-color: var(--danger) !important;
  color: #991b1b !important;
}

.callout-info {
  background-color: var(--info-light) !important;
  border-color: var(--info) !important;
  color: #155e75 !important;
}

/* Footer */
.main-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--card-border) !important;
  color: var(--text-muted) !important;
  padding: 16px 24px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   Modern Signin / Login Screen Overhaul
   ========================================================================== */
body.white-bg-login {
  background: radial-gradient(circle at 50% 18%, rgba(var(--primary-rgb), 0.14) 0%, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(var(--primary-rgb), 0.08) 0%, transparent 40%),
              linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e293b 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 15px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.white-bg-login .marg {
  margin: 0 auto !important;
  float: none !important;
}

/* Brand & Logo Header */
.auth-brand-header {
  margin-bottom: 24px !important;
  text-align: center !important;
}

.auth-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  margin-bottom: 12px !important;
  transition: transform 0.2s ease !important;
}

.auth-logo-badge:hover {
  transform: scale(1.05) !important;
}

.auth-logo-badge img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.white-bg-login .auth-brand-title,
body.white-bg-login h3,
body.white-bg-login .auth-brand-title {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.white-bg-login .auth-brand-subtitle {
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 6px 0 0 0 !important;
}

/* Sign-In Card Container */
.form-box {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  overflow: hidden !important;
}

.form-box .header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 24px 24px 22px !important;
  letter-spacing: -0.02em !important;
  height: auto !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.25) !important;
}

.auth-header-title {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.auth-header-sub {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 6px 0 0 0 !important;
}

.form-box .body {
  padding: 28px 28px 30px !important;
  background: #ffffff !important;
}

.auth-field-group {
  margin-bottom: 18px !important;
}

/* Seamless Modern Input Group (No Double Borders) */
.auth-input-wrap {
  display: flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.auth-input-wrap:focus-within {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.18) !important;
}

.auth-input-icon {
  color: #94a3b8 !important;
  font-size: 15px !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
}

.auth-input-wrap:focus-within .auth-input-icon {
  color: var(--primary) !important;
}

.auth-input-wrap .form-control,
.auth-input-wrap .auth-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  height: 48px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  outline: none !important;
}

.auth-input-wrap .form-control:focus,
.auth-input-wrap .auth-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.pulse-highlight {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.3) !important;
}

/* Remember Me & Forgot Password Row */
.auth-options-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 16px 0 22px 0 !important;
  padding: 0 !important;
}

.auth-remember-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.auth-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.auth-forgot-link {
  color: var(--primary) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.auth-forgot-link:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

/* Submit Action Button */
.auth-submit-btn,
.form-box input[type="submit"],
.form-box .btn-success {
  width: 100% !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 20px -4px rgba(var(--primary-rgb), 0.42) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.auth-submit-btn:hover,
.form-box input[type="submit"]:hover,
.form-box .btn-success:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -4px rgba(var(--primary-rgb), 0.52) !important;
  color: #ffffff !important;
}

.auth-submit-btn:active,
.form-box input[type="submit"]:active,
.form-box .btn-success:active {
  transform: translateY(0) !important;
}

/* Back Link for Reset Page */
.auth-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 16px !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  width: 100% !important;
  transition: color 0.2s ease !important;
}

.auth-back-link:hover {
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* Alerts inside Auth */
.auth-alert {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
}

/* Quick Demo Role Switcher */
.auth-demo-wrapper {
  max-width: 440px !important;
  width: 100% !important;
  margin: 22px auto 0 auto !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35) !important;
}

.auth-demo-header {
  margin-bottom: 12px !important;
}

.auth-demo-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.18) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.3) !important;
  padding: 3px 11px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}

.auth-demo-subtext {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin: 5px 0 0 0 !important;
}

.auth-demo-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.auth-role-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.auth-role-btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.35) !important;
}

.auth-role-btn.active-role {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 14px rgba(var(--primary-rgb), 0.4) !important;
}

/* ==========================================================================
   Modern Backend Theme Setting Grid UI
   ========================================================================== */
.theme-setting-box {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}

.theme-setting-box .box-header {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 18px 24px !important;
  background: #ffffff !important;
}

.theme-setting-box .box-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.theme-setting-box .box-title i {
  color: var(--primary) !important;
  font-size: 18px !important;
}

/* ==========================================================================
   Universal Clean White Header & Topbar Rule (User Requirement)
   ========================================================================== */
body > .header,
.header,
.header .navbar,
body > .header .navbar,
body[class*="skin-"] > .header,
body[class*="skin-"] .header .navbar,
body[class*="theme-"] > .header,
body[class*="theme-"] .header .navbar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

body > .header .navbar .nav > li > a,
body[class*="skin-"] .header .navbar .nav > li > a,
body[class*="theme-"] .header .navbar .nav > li > a {
  color: #334155 !important;
}

body > .header .navbar .nav > li > a:hover,
body[class*="skin-"] .header .navbar .nav > li > a:hover,
body[class*="theme-"] .header .navbar .nav > li > a:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* ==========================================================================
   Clean & Minimal Theme Card (Matches User Screenshot)
   ========================================================================== */
.clean-theme-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 35px !important;
  overflow: hidden !important;
}

.clean-theme-header {
  padding: 18px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.clean-theme-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

.clean-theme-body {
  padding: 24px !important;
}

.theme-color-input-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 14px 6px 8px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  max-width: 320px !important;
  width: 100% !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.theme-color-input-box:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}

.theme-swatch-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.15s ease !important;
}

.theme-swatch-box:hover {
  transform: scale(1.05) !important;
}

.theme-swatch-box input[type="color"] {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: none !important;
}

.theme-hex-input {
  border: none !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  font-family: monospace !important;
  width: 100% !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

.presets-label {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}

.clean-presets-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.clean-preset-dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  display: inline-block !important;
}

.clean-preset-dot:hover {
  transform: scale(1.18) !important;
}

.clean-preset-dot.is-active {
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 4.5px var(--primary) !important;
  transform: scale(1.1) !important;
}

.btn-clean-save {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25) !important;
}

.btn-clean-save:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.35) !important;
}

.btn-clean-save.btn-sm-top {
  padding: 7px 18px !important;
}

/* ==========================================================================
   Project-Wide Universal Icon Consistency System
   Rule: Inactive / Unselected icons stay neutral slate (#64748b / #94a3b8).
         Only when Selected / Active / Hovered do they illuminate in theme color.
   ========================================================================== */

/* 1. Sidebar Menu Icons */
.sidebar .sidebar-menu > li > a i,
.sidebar-menu > li > a i {
  color: #64748b !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.sidebar .sidebar-menu > li > a:hover i,
.sidebar-menu > li > a:hover i,
.sidebar .sidebar-menu > li:hover > a i {
  color: var(--primary) !important;
}

.sidebar .sidebar-menu > li.active > a i,
.sidebar-menu > li.active > a i {
  color: var(--primary) !important;
}

/* 2. Topbar & Header Navigation Icons */
.header .navbar .nav > li > a i,
body > .header .navbar .nav > li > a i,
body[class*="skin-"] .header .navbar .nav > li > a i,
body[class*="theme-"] .header .navbar .nav > li > a i {
  color: #64748b !important;
  transition: color 0.2s ease !important;
}

.header .navbar .nav > li > a:hover i,
.header .navbar .nav > li.open > a i,
.header .navbar .nav > li.active > a i {
  color: var(--primary) !important;
}

/* 3. Navigation Tabs & Pills (.nav-tabs, .nav-pills) */
.nav-tabs > li > a i,
.nav-pills > li > a i {
  color: #64748b !important;
  transition: color 0.2s ease !important;
}

.nav-tabs > li > a:hover i,
.nav-pills > li > a:hover i {
  color: var(--primary) !important;
}

.nav-tabs > li.active > a i,
.nav-tabs > li.active:hover > a i,
.nav-pills > li.active > a i,
.nav-tabs-custom > .nav-tabs > li.active > a i {
  color: var(--primary) !important;
}

/* 4. Dropdown Menu Items */
.dropdown-menu > li > a i {
  color: #64748b !important;
  transition: color 0.15s ease !important;
}

.dropdown-menu > li > a:hover i,
.dropdown-menu > li.active > a i {
  color: var(--primary) !important;
}

/* 5. Breadcrumb Icons */
.breadcrumb > li > a i,
.box .box-header .breadcrumb > li > a i {
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
}

.breadcrumb > li > a:hover i,
.box .box-header .breadcrumb > li > a:hover i,
.breadcrumb > li.active i,
.box .box-header .breadcrumb > li.active i {
  color: var(--primary) !important;
}

/* 6. Mailbox / Conversation Navigation & Full Module Polish */
.btn-compose,
.conversation-sidebar-wrap .btn-compose {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.22) !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.btn-compose:hover,
.conversation-sidebar-wrap .btn-compose:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.32) !important;
}

ul.conversation.nav-stacked {
  padding: 8px !important;
  margin: 0 !important;
}

ul.conversation.nav-stacked > li {
  margin-bottom: 4px !important;
}

ul.conversation.nav-stacked > li > a {
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

ul.conversation.nav-stacked > li > a i {
  font-size: 15px !important;
  margin-right: 10px !important;
  width: 18px !important;
  text-align: center !important;
  color: #64748b !important;
  transition: color 0.18s ease !important;
}

ul.conversation.nav-stacked > li > a:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

ul.conversation.nav-stacked > li > a:hover i {
  color: var(--primary) !important;
}

ul.conversation.nav-stacked > li.active > a,
ul.conversation.nav-stacked > li.active > a:hover,
ul.conversation.nav-stacked > li.active > a:focus {
  background: var(--primary-light, #ecfdf5) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--primary) !important;
}

ul.conversation.nav-stacked > li.active > a i {
  color: var(--primary) !important;
}

ul.conversation.nav-stacked > li .pull-right {
  margin-left: auto !important;
}

/* Mailbox Action Toolbar */
.mailbox-toolbar {
  margin-bottom: 16px !important;
}

.mailbox-toolbar .btn-group {
  display: inline-flex !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

.mailbox-toolbar .btn-group > .mailbox-toolbar-btn,
.mailbox-toolbar-btn {
  background: #ffffff !important;
  border: none !important;
  border-right: 1px solid #f1f5f9 !important;
  color: #475569 !important;
  height: 36px !important;
  min-width: 40px !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mailbox-toolbar .btn-group > .mailbox-toolbar-btn:last-child {
  border-right: none !important;
}

.mailbox-toolbar .btn-group > .mailbox-toolbar-btn:hover {
  background: var(--primary-light, #ecfdf5) !important;
  color: var(--primary) !important;
}

.mailbox-toolbar .btn-group > .mailbox-toolbar-btn:hover i {
  color: var(--primary) !important;
}

.mailbox-toolbar .btn-group > .mailbox-btn-delete:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

.mailbox-toolbar .btn-group > .mailbox-btn-delete:hover i {
  color: #ef4444 !important;
}

/* Mailbox Star Rating */
.mailbox-star {
  width: 32px !important;
  text-align: center !important;
}

.mailbox-star a.fav {
  font-size: 15px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: transform 0.15s ease !important;
}

.mailbox-star a.fav:hover {
  transform: scale(1.2) !important;
}

.mailbox-star .fa-star.text-yellow {
  color: #f59e0b !important;
}

.mailbox-star .fa-star-o {
  color: #cbd5e1 !important;
}

.mailbox-star a.fav:hover .fa-star-o {
  color: #f59e0b !important;
}

/* Mailbox Reply Badges */
.mailbox-reply-zero {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
}

.mailbox-reply-count {
  background: var(--primary-light, #ecfdf5) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.3) !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

/* Draft Send Button */
.btn-draft-send {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.25) !important;
  transition: all 0.15s ease !important;
}

.btn-draft-send:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Attachment button in Compose & View */
.mailbox-attach-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.mailbox-attach-btn:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.mailbox-attach-btn:hover i {
  color: var(--primary) !important;
}

/* 7. Input Group Icons */
.input-group-addon i {
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

.input-group:focus-within .input-group-addon i {
  color: var(--primary) !important;
}

/* 8. Pagination Navigation Icons */
.pagination > li > a i {
  color: #64748b !important;
}

.pagination > li > a:hover i,
.pagination > li.active > a i {
  color: var(--primary) !important;
}

/* ==========================================================================
   Online Exam & Question Bank Module Modern Polish
   ========================================================================== */

/* Proctored Rules Card & Dynamic Theme Banner */
.proctored-rules-card {
  margin: 20px 0;
  padding: 20px 24px;
  background: var(--primary-light, #f0fdf4);
  border: 1px solid rgba(var(--primary-rgb, 16, 185, 129), 0.25);
  border-left: 5px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.proctored-rules-card h4 {
  margin: 0 0 12px 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.proctored-rules-card h4 i {
  color: var(--primary) !important;
}

.proctored-rules-card ul {
  margin: 0;
  padding-left: 20px;
  color: #334155;
  line-height: 1.8;
  font-size: 14px;
}

/* Big Elevated Start Exam Button */
.btn-start-exam-lg {
  padding: 13px 38px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(var(--primary-rgb, 16, 185, 129), 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: 0.2px;
}

.btn-start-exam-lg:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px 0 rgba(var(--primary-rgb, 16, 185, 129), 0.45) !important;
  transform: translateY(-1px);
}

.btn-start-exam-lg i {
  color: #ffffff !important;
  margin-right: 6px;
}

/* Question Bank Option Rows (.coption) */
.coption {
  padding: 14px 0;
  margin-bottom: 6px;
  border-bottom: 1px dashed #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.coption:last-child {
  border-bottom: none;
}

.coption .input-group-addon {
  background: #f8fafc;
  border-color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 0 6px 6px 0;
}

.coption .input-group-addon input[type="radio"],
.coption .input-group-addon input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

.coption input[type="file"] {
  font-size: 12px;
  color: #64748b;
  padding-top: 5px;
}

/* Pill Badges for Online Exam & Question Lists */
.label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.2px;
}

.label-success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0;
}

.label-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a;
}

.label-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe;
}

.label-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca;
}

.label-default {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

/* Question List Add Question Button in addquestion.php */
.btn-primary.btn-xs.mrg {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  transition: all 0.2s ease !important;
}

.btn-primary.btn-xs.mrg:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  transform: translateY(-1px);
}

.btn-primary.btn-xs.mrg i {
  color: #ffffff !important;
}

/* ==========================================================================
   Announcement Module (Notice & Event) Modern UI Styles
   ========================================================================== */

/* Notice Date Badge in Index Table */
.notice-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

/* Notice View Memo Card */
.notice-view-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
  padding: 28px 32px !important;
  margin-top: 10px;
}

.notice-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.notice-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f1f5f9;
  color: #475569;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.notice-meta-date i {
  color: var(--primary);
  font-size: 13px;
}

.notice-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notice-meta-badge i {
  color: var(--primary);
}

.notice-view-title {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

.notice-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.25) 50%, rgba(226, 232, 240, 0.4) 100%);
  margin: 16px 0 24px 0;
  border-radius: 2px;
}

.notice-content-body {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  word-break: break-word;
}

.notice-content-body p {
  margin-bottom: 16px;
}

.notice-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Event Time Badges in Index Table */
.event-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.event-time-badge.start-badge {
  border-left: 3px solid var(--primary);
}

.event-time-badge.end-badge {
  border-left: 3px solid #94a3b8;
}

.event-time-sub {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Event View Panel & Cover Banner */
.event-view-panel {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  margin-top: 10px;
}

.event-cover-banner {
  height: 250px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #0f172a;
}

.event-cover-banner.no-photo {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.event-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.75) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 28px;
}

/* Modern Calendar Date Chips */
.event-date-chip {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: center;
  min-width: 66px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  animation: fadeIn 0.3s ease-in-out;
}

.event-date-chip .chip-month {
  display: block;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  letter-spacing: 0.8px;
}

.event-date-chip .chip-day {
  display: block;
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  padding: 4px 8px 6px;
  line-height: 1.1;
}

/* Event RSVP Bar */
.event-rsvp-bar {
  margin: -24px auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 10;
}

.event-rsvp-group {
  display: inline-flex !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}

.btn-event-going {
  background: var(--primary) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.btn-event-going:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
}

.btn-event-going i {
  color: #ffffff !important;
  margin-right: 5px;
}

.btn-event-count {
  background: #ffffff !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  transition: all 0.2s ease !important;
}

.btn-event-count:hover {
  background: var(--primary-light) !important;
}

.btn-event-ignore {
  background: #ef4444 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  transition: all 0.2s ease !important;
}

.btn-event-ignore:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.btn-event-ignore i {
  color: #ffffff !important;
  margin-right: 5px;
}

.btn-event-count-ignore {
  background: #ffffff !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
  font-weight: 700 !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.btn-event-count-ignore:hover {
  background: #fef2f2 !important;
}

/* Event Title & Schedule Pill */
.event-view-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.25px !important;
}

.event-schedule-chip {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.event-details-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 26px 30px;
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  text-align: left;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   ID Card Report Modern UI Styles
   ========================================================================== */

/* Report Action Toolbar (Print, PDF, Mail) */
.report-action-toolbar .btn-default {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.report-action-toolbar .btn-default:hover {
  background: #f8fafc !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12) !important;
  transform: translateY(-1px) !important;
}

.report-action-toolbar .btn-default i,
.report-action-toolbar .btn-default span.fa {
  color: var(--primary) !important;
  font-size: 13.5px !important;
}

/* ID Card Screen Display Enhancements */
#printablediv .idcardreport-frontend,
#printablediv .idcardreport-backend {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  background-color: #ffffff;
}

#printablediv .idcardreport-frontend:hover,
#printablediv .idcardreport-backend:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -3px rgba(15, 23, 42, 0.14) !important;
}

@media print {
  #printablediv .idcardreport-frontend,
  #printablediv .idcardreport-backend {
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Certificate Template Modern UI Styles
   ========================================================================== */

/* Certificate Theme Badge in List Table */
.certificate-theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  white-space: nowrap;
}

.certificate-theme-badge i {
  color: var(--primary);
  font-size: 11.5px;
}

/* Draggable Tags Card & Container */
.certificate-tags-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  position: sticky;
  top: 80px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}

.tags-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.tags-card-desc {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.4;
}

.tags-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Draggable Tag Chips (.sms_alltag) */
.sms_alltag,
.s-tag,
span.s-tag {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  cursor: grab !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.sms_alltag:hover,
.s-tag:hover,
span.s-tag:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15) !important;
}

.sms_alltag:active,
.s-tag:active {
  cursor: grabbing !important;
}

/* JQTE Editor Styling Modernization */
.jqte {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.jqte:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.jqte_toolbar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 5px 8px !important;
}

.jqte_tool.jqte_tool_1 .jqte_tool_label {
  font-size: 12px;
}

.jqte_editor {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
}

/* Certificate Preview Screen Canvas */
.mainTestimonial {
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto;
}

/* ==========================================================================
   Certificate Builder: User-Friendly Section Cards & Schematic
   ========================================================================== */

.cert-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cert-form-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.08);
}

.cert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}

.cert-card-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.cert-card-title i {
  color: var(--primary);
  font-size: 16px;
}

.cert-badge-step {
  display: inline-flex;
  align-items: center;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.cert-card-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: -10px 0 16px 0;
  line-height: 1.4;
}

.cert-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}

.cert-field-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 4px;
  display: block;
}

/* Certificate Layout Blueprint / Schematic */
.cert-schematic-card {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.cert-schematic-header {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cert-diagram-frame {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(15, 23, 42, 0.03);
}

.cert-diagram-slot {
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin: 3px 0;
  transition: all 0.15s ease;
}

.cert-diagram-slot:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.cert-diagram-row {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}

.cert-diagram-row .cert-diagram-slot {
  flex: 1;
}

/* Magic Template Preset Button */
.btn-magic-preset {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-magic-preset:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45) !important;
  color: #ffffff !important;
}

/* Search Box Inside Tags Panel */
.tags-search-wrap {
  margin-bottom: 12px;
}

.tags-search-wrap input {
  border-radius: 20px !important;
  border: 1px solid #cbd5e1 !important;
  padding-left: 12px !important;
  font-size: 12px !important;
  background: #ffffff !important;
}

.tags-search-wrap input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15) !important;
}