/* custom.css — Minimal polish layer on top of Tailwind */

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

* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── Custom scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

#sidebar nav { overflow-x: hidden }
/* ── Sidebar transition (desktop) ───────────────────────────────────────── */
#sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
#sidebar.collapsed { width: 4.5rem; }
#sidebar .sidebar-text,
#sidebar .sidebar-label { transition: opacity 0.2s ease, width 0.3s ease; }
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }

/* ── Mobile sidebar — full-width drawer, hidden off-screen by default ────── */
@media (max-width: 1023px) {
  #sidebar {
    transform: translateX(-100%);
    width: 16rem !important;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Undo collapsed icon-only mode on mobile — drawer always shows labels */
  #sidebar.collapsed .sidebar-text,
  #sidebar.collapsed .sidebar-label {
    opacity: 1;
    width: auto;
    overflow: visible;
    white-space: normal;
  }
}

/* ── Approval submenu animation ─────────────────────────────────────────── */
.submenu { overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; max-height: 0; opacity: 0; }
.submenu.open { max-height: 200px; opacity: 1; }

/* ── Chevron rotation ───────────────────────────────────────────────────── */
.chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.chevron.rotated { transform: rotate(180deg); }

/* ── Tooltip for collapsed sidebar ─────────────────────────────────────── */
.sidebar-tooltip { position: relative; }
.sidebar-tooltip .tooltip-text {
  visibility: hidden; opacity: 0; position: absolute; left: calc(100% + 0.75rem); top: 50%;
  transform: translateY(-50%); background: #1e293b; color: #f1f5f9; font-size: 0.75rem;
  font-weight: 500; padding: 0.35rem 0.65rem; border-radius: 0.5rem; white-space: nowrap;
  pointer-events: none; transition: opacity 0.15s ease; z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sidebar-tooltip .tooltip-text::before {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #1e293b;
}
#sidebar.collapsed .sidebar-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

/* ── Mobile overlay ─────────────────────────────────────────────────────── */
#mobileOverlay { transition: opacity 0.3s ease; }

/* ── Toast notification ─────────────────────────────────────────────────── */
.toast { animation: slideInRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.toast.removing { animation: slideOutRight 0.3s ease forwards; }
@keyframes slideInRight { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } }

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ── Input focus ring ───────────────────────────────────────────────────── */
.input-field {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-field:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dark .input-field:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

/* ── Table row hover ────────────────────────────────────────────────────── */
.table-row { transition: background-color 0.1s ease; }

/* ── Card hover lift ────────────────────────────────────────────────────── */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); }

/* ── Avatar gradient colors ─────────────────────────────────────────────── */
.avatar-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.avatar-2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.avatar-3 { background: linear-gradient(135deg, #10b981, #059669); }
.avatar-4 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.avatar-5 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }

/* ── Stat card gradient backgrounds ────────────────────────────────────── */
.stat-gradient-blue   { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-gradient-green  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.stat-gradient-yellow { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
.stat-gradient-red    { background: linear-gradient(135deg, #f953c6 0%, #b91d73 100%); }
.stat-gradient-indigo { background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%); }

/* ── Modal backdrop ─────────────────────────────────────────────────────── */
.modal-backdrop { animation: fadeIn 0.2s ease; }
.modal-panel { animation: scaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Page transition ────────────────────────────────────────────────────── */
.page-content { animation: fadeInUp 0.3s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Checkbox custom style ──────────────────────────────────────────────── */
input[type="checkbox"].custom-check {
  appearance: none; width: 1rem; height: 1rem; border: 2px solid #cbd5e1; border-radius: 0.25rem;
  cursor: pointer; transition: all 0.15s ease; position: relative;
}
input[type="checkbox"].custom-check:checked {
  background-color: #6366f1; border-color: #6366f1;
}
input[type="checkbox"].custom-check:checked::after {
  content: ''; position: absolute; left: 3px; top: 0px; width: 5px; height: 9px;
  border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg);
}

/* ── Badge pulse for pending ────────────────────────────────────────────── */
.badge-pulse::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px;
  background: currentColor; margin-right: 5px; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Select2 inside SweetAlert2 ─────────────────────────────────────────── */
.swal2-popup .select2-container { width: 100% !important; }
.swal2-popup .select2-container--default .select2-selection--single {
  height: 42px; border-radius: .75rem; border: 1.5px solid #cbd5e1;
  display: flex; align-items: center; padding: 0 .75rem;
  background: #f8fafc; font-size: .875rem;
}
.swal2-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b; line-height: normal; padding: 0;
}
.swal2-popup .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px; right: 8px;
}
.swal2-popup .select2-container--default .select2-selection--single:focus,
.swal2-popup .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); outline: none;
}
.select2-dropdown {
  border-radius: .75rem !important; border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.12) !important; overflow: hidden;
  font-size: .875rem;
}
.select2-container--default .select2-results__option--highlighted {
  background-color: #6366f1 !important;
}
.select2-search--dropdown .select2-search__field {
  border-radius: .5rem !important; border: 1.5px solid #e2e8f0 !important;
  padding: .5rem .75rem !important; font-size: .875rem !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: #6366f1 !important; outline: none !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.15) !important;
}
/* Dark mode Select2 */
.dark .swal2-popup .select2-container--default .select2-selection--single {
  background: #334155; border-color: #475569;
}
.dark .swal2-popup .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f1f5f9; }
.dark .select2-dropdown { background: #1e293b !important; border-color: #475569 !important; }
.dark .select2-results__option { color: #f1f5f9; }
.dark .select2-results__option--highlighted { background-color: #6366f1 !important; }
.dark .select2-search--dropdown .select2-search__field {
  background: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important;
}

/* ── Login page specific ────────────────────────────────────────────────── */
.login-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.dark .login-bg {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}