html,
body {
  /* height: 100%; */
  margin: 0;
  /* padding: 0; */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ===============================
   GLOBAL MICRO-ANIMATIONS
================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSoft {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* ===============================
   BADGE (MODERN GLASS STYLE)
================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  padding: 4px 8px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;

  border-radius: 999px;

  color: #fff;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  transition: all 0.25s ease;
  animation: fadeInUp 0.3s ease;
}

.badge:hover {
  transform: translateY(-1px) scale(1.05);
}

/* 🔴 Pending */
.badge.pending {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: pulseSoft 2s infinite;
}

/* 🟡 In-progress */
.badge.in-progress {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #1f2937;
}

/* ===============================
   LABELS (OUTLINE GLASS STYLE)
================================ */
[class^="label-outline-"] {
  display: inline-block;

  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);

  border: 1px solid transparent;

  transition: all 0.25s ease;
  animation: fadeInUp 0.3s ease;
}

[class^="label-outline-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Colors */
.label-outline-yes {
  border-color: #22c55e;
  color: #16a34a;
}

.label-outline-no {
  border-color: #ef4444;
  color: #dc2626;
}

.label-outline-regular {
  border-color: #8b5cf6;
  color: #7c3aed;
}

.label-outline-prob {
  border-color: #f97316;
  color: #ea580c;
}

.label-outline-unknown {
  border-color: #6b7280;
  color: #4b5563;
}

/* ===============================
   SOLID LABELS (GRADIENT + GLOW)
================================ */
[class^="label-solid-"] {
  display: inline-block;

  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;

  border-radius: 999px;

  color: #fff;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  transition: all 0.25s ease;
  animation: fadeInUp 0.3s ease;
}

[class^="label-solid-"]:hover {
  transform: translateY(-1px) scale(1.05);
}

/* Variants */
.label-solid-active {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.label-solid-inactive {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.label-solid-warning {
  background: linear-gradient(135deg, #fde047, #facc15);
  color: #1f2937;
}

/* ===============================
   FULLSCREEN BLUR OVERLAY (REAL)
================================ */
.modal-backdrop {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.35) !important;

  /* REAL BLUR */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 1 !important;

  z-index: 9998 !important; /* above sidebar */
}

.modal {
  z-index: 9999 !important;
}

.modal-dialog {
  transform: scale(0.97);
  transition: all 0.15s ease;
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* ===============================
   EMAIL OVERLAY (FIXED - REQUIRED)
================================ */
.email-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  z-index: 20000; /* MUST be higher than modal */
}

/* EMAIL BOX (ensure visible) */
.email-box {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  font-size: 13px;
  font-weight: 500;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

  animation: fadeInUp 0.2s ease;
}

/* DOT LOADER */
.email-dots {
  display: flex;
  gap: 4px;
}

.email-dots span {
  width: 5px;
  height: 5px;
  background: #0d6efd;
  border-radius: 50%;
  animation: bounce 1s infinite ease-in-out;
}

.email-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.email-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===============================
   FLYING EMAIL ANIMATION
================================ */
.email-box {
  position: relative;
  overflow: hidden;
}

/* paper plane */
.email-fly {
  position: absolute;
  font-size: 18px;
  top: 50%;
  left: -30px;
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0;

  animation: flyMail 1.2s ease forwards;
}

@keyframes flyMail {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(-50%) rotate(-10deg) scale(0.8);
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translateY(-70%) rotate(5deg) scale(1);
  }
  100% {
    left: 110%;
    opacity: 0;
    transform: translateY(-50%) rotate(15deg) scale(0.9);
  }
}

/* ===============================
   MODAL BORDER STATES
================================ */
.modal-success .modal-content {
  border-left: 5px solid #22c55e;
}

.modal-error .modal-content {
  border-left: 5px solid #ef4444;
}

.table-responsive {
  overflow-x: visible;
}

/* ===============================
   STATUS CHIP (MODERN SaaS)
================================ */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;

  border-radius: 999px;

  letter-spacing: 0.3px;

  /* ✅ ADD THIS */
  border: 1px solid rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

  transition: all 0.2s ease;
}

/* ICON */
.status-icon {
  font-size: 12px;
}

/* TEXT */
.status-text {
  letter-spacing: 0.2px;
}

/* hover = subtle lift */
.status-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* ===============================
   STATUS VARIANTS (MODERN COLORS)
================================ */

.status-pending {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #1f2937;
  border: 1px solid #eab308;
}

.status-progress {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff;
  border: 1px solid #0ea5e9;
}

.status-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: 1px solid #16a34a;
}

.status-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid #dc2626;
}

.status-muted {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: #fff;
  border: 1px solid #6b7280;
}

.status-warning {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #fff;
  border: 1px solid #f97316;
}

.status-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 1px solid #2563eb;
}

.status-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: 1px solid #7c3aed;
}
/* ===============================
   COMPACT SAAS TABLE (GLOBAL)
================================ */
#example,
#activityLogsTable,
#versionsTable,
#rolesTable,
#usersTable,
#positionsTable,
#officesTable,
#checkbookTable {
  /* ✅ ADD THIS */
  font-size: 12.5px;
}

/* header */
#example thead th,
#activityLogsTable thead th,
#versionsTable thead th,
#rolesTable thead th,
#usersTable thead th,
#positionsTable thead th,
#officesTable thead th,
#checkbookTable thead th {
  /* ✅ ADD THIS */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 10px;
}

/* body cells */
#example tbody td,
#activityLogsTable tbody td,
#versionsTable tbody td,
#rolesTable tbody td,
#usersTable tbody td,
#positionsTable tbody td,
#officesTable tbody td,
#checkbookTable tbody td {
  /* ✅ ADD THIS */
  padding: 8px 10px;
  vertical-align: middle;
  border-top: 1px solid #f1f5f9;
}

/* row hover */
#example tbody tr,
#activityLogsTable tbody tr,
#versionsTable tbody tr,
#rolesTable tbody tr,
#usersTable tbody tr,
#positionsTable tbody tr,
#officesTable tbody tr,
#checkbookTable tbody tr {
  /* ✅ ADD THIS */
  transition: all 0.15s ease;
}

#example tbody tr:hover,
#activityLogsTable tbody tr:hover,
#versionsTable tbody tr:hover,
#rolesTable tbody tr:hover,
#usersTable tbody tr:hover,
#positionsTable tbody tr:hover,
#officesTable tbody tr:hover,
#checkbookTable tbody tr:hover {
  /* ✅ ADD THIS */
  background: rgba(59, 130, 246, 0.04);
}

.table td,
.table th {
  padding: 6px 10px !important;
}

.status-chip {
  padding: 3px 8px; /* 🔽 smaller */
  font-size: 11px;
}

/* ===============================
   COMPACT PANEL HEADER (SAAS)
================================ */
.panel-heading {
  padding: 8px 12px; /* 🔽 reduced */
  border-bottom: 1px solid #e5e7eb;

  background: #ffffff; /* cleaner than gray */
  color: #111827;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Title */
.panel-heading h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.panel-body {
  padding: 10px 12px; /* 🔽 tighter */
}

.panel {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.panel-body .row.mb-3 {
  margin-bottom: 8px !important; /* 🔽 smaller gap */
}

.panel-heading h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.panel-heading h4 i {
  margin-right: 6px;
  color: #2563eb; /* modern blue */
}

.action-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* compact SaaS action buttons */
.btn-action {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border-radius: 6px;

  font-size: 13px;
}

/* remove spacing issues inside DataTable */
table.dataTable td .btn {
  margin: 0 !important;
  line-height: 1 !important;
}

/* ===============================
   GLOBAL MODAL RADIUS (SAAS STYLE)
================================ */
.modal-content {
  border-radius: 14px !important; /* adjust: 10px–18px */
  overflow: hidden; /* keeps header/body clean */
  border: none; /* removes harsh bootstrap border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* optional: smoother animation feel */
.modal-dialog {
  transform: scale(0.96);
  transition: all 0.18s ease;
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* =========================
   MODERN MODAL FORM STYLE
========================= */

.profile-box {
  width: 150px;
  height: 150px;
  margin: 0 auto 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.profile-img:hover {
  transform: scale(1.05);
}

.profile-input {
  font-size: 12px;
  border-radius: 6px;
}

/* FORM GROUP CARD STYLE */
.modern-group {
  margin-bottom: 10px;
}

.modern-group label {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  display: block;
}

.modern-group .form-control {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}

.modern-group .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* NOTE BOX */
.update-note {
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 11.5px;

  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;

  color: #6b7280;
}

/* =========================
   3D PREMIUM SMALL BUTTONS
========================= */
.btn-premium-hover {
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* stronger 3D feel */
.btn-premium-hover:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.15);
}

.btn-premium-hover:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* ================= Global Premium Button Styles ================= */
.btn-premium-hover {
  transition:
    all 0.3s ease,
    box-shadow 0.3s ease;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  font-size: 0.875rem;
  /* slightly smaller text */
  min-height: 34px;
  /* slightly smaller height */
  font-weight: 600;
}

/* Glassy overlay effect for hover */
.btn-premium-hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transition: background 0.3s;
}

.btn-premium-hover:hover::after {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ================= Specific Button Colors ================= */

/* Cancel Button - Red */
.btn-cancel {
  background-color: #e74a3b !important;
  border: none;
  color: #fff !important;
}

.btn-cancel:hover {
  background-color: #c0392b !important;
}

/* Save Button - Blue */
.btn-save {
  background-color: #4e73df !important;
  border: none;
  color: #fff !important;
}

.btn-save:hover {
  background-color: rgba(78, 115, 223, 0.85);
  backdrop-filter: blur(4px);
}

/* Reset / Warning - Yellow */
.btn-warning {
  background-color: #ffc107 !important;
  border-color: #e0a800 !important;
  color: #212529 !important;
}

/* Danger - Red */
.btn-danger {
  background-color: #dc3545 !important;
  border-color: #c82333 !important;
  color: #fff !important;
}

/* Success - Green / Blue */
.btn-success {
  background-color: #0d6efd !important;
  border-color: #0a58ca !important;
  color: #fff !important;
}

/* Primary (Blue) */
.btn-primary {
  background-color: #0d6efd !important;
  border-color: #0a58ca !important;
  color: #fff !important;
}

/* Info (Teal) */
.btn-info {
  background-color: #17a2b8 !important;
  border-color: #117a8b !important;
  color: #fff !important;
}

/* Optional: smaller menu buttons */
.btn-menu {
  font-size: 0.875rem;
  min-height: 34px;
  padding: 6px 14px;
}

/* Premium hover for all buttons with glassy effect */
.btn-premium-hover:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ================= PREMIUM LOGOUT SWEETALERT ================= */

.swal-logout-popup {
  border-radius: 14px;
  padding: 18px;
  width: 360px !important;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

.swal-logout-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.swal-logout-text {
  font-size: 13px;
  color: #6b7280;
}

/* CONFIRM BUTTON (Premium red, subtle gradient) */
.swal-logout-confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-left: 6px;
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.25);
  transition: all 0.2s ease;
}

.swal-logout-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.35);
}

/* CANCEL BUTTON (clean neutral) */
.swal-logout-cancel {
  background: #f3f4f6;
  color: #374151;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
}

.swal-logout-cancel:hover {
  background: #e5e7eb;
}

/* ICON SPACING FIX */
.swal2-confirm i,
.swal2-cancel i {
  margin-right: 6px;
}

.swal-logout-stay {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;

  border-radius: 10px;
  padding: 8px 14px;

  font-size: 13px;
  font-weight: 600;

  border: none;

  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.25);
}

/* hover effect */
.swal-logout-stay:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
}

/* active click effect */
.swal-logout-stay:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.2);
}
/* ================= GLOBAL PREMIUM LOGOUT STYLE ================= */

.swal-logout-popup {
  border-radius: 14px;
  padding: 18px;
  width: 370px !important;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

.swal-logout-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* small note text */
.swal-logout-note {
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* INFO BOX */
.swal-logout-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;

  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1e40af;

  padding: 10px 12px;
  border-radius: 10px;

  font-size: 12.5px;
  line-height: 1.4;
}

.swal-logout-box i {
  margin-top: 2px;
  color: #3b82f6;
}

/* CONFIRM */
.swal-logout-confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.25);
}

/* CANCEL */
.swal-logout-cancel {
  background: #f3f4f6;
  color: #374151;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
}

/* ================= UNIVERSAL MODAL CLOSE BUTTON ================= */

.modal .close,
.modal-close-btn {
  font-size: 24px;
  font-weight: 300;
  color: #6b7280;
  opacity: 1;
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  transition: all 0.25s ease;

  cursor: pointer;
}

/* HOVER EFFECT (premium lift + rotate) */
.modal .close:hover,
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}

/* CLICK (press animation) */
.modal .close:active,
.modal-close-btn:active {
  transform: rotate(90deg) scale(0.92);
}

/* smooth appearance when modal opens */
.modal.fade .modal-dialog {
  transform: translateY(-10px);
  transition: all 0.25s ease;
}

.modal.show .modal-dialog {
  transform: translateY(0);
}

.modal .close:hover,
.modal-close-btn:hover {
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

/* ================= CHART CONTAINER ANIMATION ================= */

.dashboard-charts {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: all 0.45s ease;
}

.dashboard-charts.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* each chart card smooth hover lift */
.dashboard-charts canvas {
  transition: all 0.3s ease;
}

.dashboard-charts canvas:hover {
  transform: scale(1.02);
}

/* ================= DASHBOARD CHART ANIMATION ================= */

.dashboard-charts {
  display: none;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: all 0.45s ease;
}

.dashboard-charts.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* smooth chart hover (premium feel) */
.dashboard-charts canvas {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.dashboard-charts canvas:hover {
  transform: scale(1.02);
}

/* tab active */
#formSelector .nav-link.active {
  background-color: #337ab7 !important;
  color: #fff !important;
  font-weight: bold;
}

.swal-mini-popup {
  border-radius: 12px !important;
  padding: 12px !important;
  font-size: 13px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.swal-mini-title {
  font-size: 16px !important;
  font-weight: 600 !important;
}

@keyframes rgbMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Premium HR style for Swal */
.swal-premium-popup {
  border-radius: 14px !important;
  padding: 25px 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.swal-premium-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1f4e79 !important;
  margin-bottom: 10px !important;
}

.swal-premium-text {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #34495e !important;
  text-align: center !important;
}

.swal-premium-btn {
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  background-color: #1f4e79 !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.swal-premium-btn:hover {
  background-color: #163a5b !important;
  transform: translateY(-1px);
}

/* Premium danger button for delete */
.swal-premium-btn-danger {
  background-color: #d33 !important; /* Red */
  color: #fff !important;
}

.swal-premium-btn-danger:hover {
  background-color: #a52828 !important; /* Darker red */
  transform: translateY(-1px);
}

#countdown {
  color: #ef4444;
  font-weight: 600;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* =========================
   ACTION BUTTON BASE STYLE
========================= */
.btn-action {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* icon size */
.btn-action i {
  font-size: 13px;
  transition: transform 0.25s ease;
}

/* =========================
   HOVER EFFECT (ELEGANT LIFT)
========================= */
.btn-action:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* icon animation */
.btn-action:hover i {
  transform: rotate(-6deg) scale(1.1);
}

/* =========================
   EDIT BUTTON (BLUE GRADIENT)
========================= */
.view-task-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}

.view-task-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* =========================
   DELETE BUTTON (RED GRADIENT)
========================= */
.delete-user-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.delete-user-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* =========================
   CLICK EFFECT
========================= */
.btn-action:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* =========================
   BASE TAB STYLE
========================= */
#formSelector.nav-tabs {
  border-bottom: 1px solid #e5e7eb;
  gap: 6px;
}

#formSelector .nav-item {
  margin-bottom: 0;
}

/* =========================
   TAB LINK DEFAULT
========================= */
#formSelector .nav-link {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  transition: all 0.25s ease;
  position: relative;
}

/* hover state */
#formSelector .nav-link:hover {
  background: #f3f4f6;
  color: #111827;
  transform: translateY(-1px);
}

/* =========================
   ACTIVE TAB (ELEGANT)
========================= */
#formSelector .nav-link.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  transform: translateY(-2px);
}

/* glowing accent line */
#formSelector .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 20%;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 10px;
  opacity: 0.8;
}

/* click effect */
#formSelector .nav-link:active {
  transform: scale(0.96);
}

/* Remove ugly default focus border */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: make focus still accessible but elegant */
.nav-tabs .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  border-radius: 8px;
}