/* ================================================================
   PERFEX CRM — custom.css — Enhanced Modern UI
   Loaded after all framework CSS, highest specificity wins.
   ================================================================ */

/* ── GLOBAL TRANSITIONS ───────────────────────────────────────── */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

a {
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

::selection {
  background: rgba(59, 130, 246, 0.18);
  color: #1e40af;
}

/* ── CUSTOM SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ================================================================
   LOGIN PAGE
   ================================================================ */

body.login_admin {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 45%, #0f172a 100%) !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Animated background orbs */
body.login_admin::before {
  content: '';
  position: fixed;
  top: -30%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
  animation: orbFloat 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

body.login_admin::after {
  content: '';
  position: fixed;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
  animation: orbFloat 16s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -40px) scale(1.08); }
}

/* Card entrance */
.authentication-form-wrapper {
  animation: cardSlideUp 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position: relative;
  z-index: 10;
}

@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(50px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Logo area */
.company-logo {
  animation: fadeDown 0.7s ease both;
  animation-delay: 0.1s;
  opacity: 0;
}

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

/* Card glass panel */
body.login_admin .tw-bg-white.tw-rounded-lg {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Heading gradient text */
body.login_admin h1 {
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.75rem !important;
  letter-spacing: -0.03em;
  animation: fadeDown 0.7s ease both;
  animation-delay: 0.25s;
  opacity: 0;
}

body.login_admin p.tw-text-neutral-600 {
  color: #64748b !important;
  animation: fadeDown 0.7s ease both;
  animation-delay: 0.35s;
  opacity: 0;
}

/* Labels */
body.login_admin label,
body.login_admin .control-label {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Forgot password link */
body.login_admin a.text-muted {
  color: #3b82f6 !important;
  font-size: 0.8rem;
  font-weight: 500;
}
body.login_admin a.text-muted:hover { color: #1d4ed8 !important; text-decoration: none; }

/* Form inputs */
body.login_admin input.form-control {
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  color: #0f172a !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.login_admin input.form-control:focus {
  border-color: #3b82f6 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
}

/* Submit button */
body.login_admin .btn-primary {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
  transition: all 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

body.login_admin .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.55s ease;
}

body.login_admin .btn-primary:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.55) !important;
  transform: translateY(-1px) !important;
}

body.login_admin .btn-primary:hover::after { left: 100%; }

body.login_admin .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Remember me */
body.login_admin .checkbox label {
  color: #475569 !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  text-transform: none;
  letter-spacing: 0;
}


/* ================================================================
   ADMIN HEADER
   ================================================================ */

#header {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.05) !important;
  position: relative;
  z-index: 100;
}

/* Logo company name gradient */
#logo a.logo-text {
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

/* Top-nav links */
#header .nav > li > a {
  transition: background 0.2s ease, color 0.2s ease !important;
  border-radius: 8px;
}

/* Header search input */
#top_search #search_input {
  border-radius: 10px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

#top_search #search_input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}


/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar {
  background: #fff !important;
  border-right: 1px solid #e5e9ef !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.04) !important;
}

/* User profile block */
.sidebar .sidebar-user-profile .profile {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sidebar .sidebar-user-profile .profile:hover {
  background: #f1f5f9 !important;
  border-color: #93c5fd !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
}

/* Menu items */
.sidebar ul.nav li a {
  border-radius: 10px !important;
  margin: 2px 0 !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.sidebar > ul.nav > li:hover a:first-child,
.sidebar > ul.nav > li.active a:first-child {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.04) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1) !important;
}

.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  color: #1d4ed8 !important;
}

.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: #3b82f6 !important;
}

/* Active left-bar accent */
.sidebar > ul.nav > li {
  position: relative;
  border-left: 3px solid transparent !important;
  transition: border-color 0.2s ease !important;
}

.sidebar > ul.nav > li.active {
  border-left-color: #3b82f6 !important;
}

/* Sub-menu */
.sidebar ul.nav li .nav-second-level li a {
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus {
  background: rgba(59, 130, 246, 0.07) !important;
  color: #1d4ed8 !important;
}

.sidebar ul.nav li .nav-second-level li.active a {
  color: #1d4ed8 !important;
}


/* ================================================================
   PANELS / CARDS
   ================================================================ */

.panel, .panel_s {
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.75) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.25s ease !important;
  overflow: hidden;
}

.panel:hover, .panel_s:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.04) !important;
}

.panel-heading {
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.panel-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}


/* ================================================================
   FORM INPUTS (ADMIN AREA)
   ================================================================ */

textarea.form-control,
select.form-control,
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"] {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}

label, .control-label {
  letter-spacing: 0.01em;
  color: #374151 !important;
}

.form-group {
  transition: opacity 0.2s ease;
}


/* ================================================================
   BUTTONS (GLOBAL)
   ================================================================ */

.btn {
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease !important;
  position: relative;
  overflow: hidden;
}

/* Ripple on click */
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

/* Primary — vivid blue gradient */
.btn-primary {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.25) !important;
}

/* Success — vivid green */
.btn-success {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
  color: #fff !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #14532d 0%, #16a34a 100%) !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-success:active { transform: translateY(0) !important; }

/* Danger — vivid red */
.btn-danger {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-danger:active { transform: translateY(0) !important; }

/* Warning — amber */
.btn-warning {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background: linear-gradient(135deg, #92400e 0%, #d97706 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-warning:active { transform: translateY(0) !important; }

/* Info — sky blue */
.btn-info {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
  color: #fff !important;
}
.btn-info:hover {
  background: linear-gradient(135deg, #075985 0%, #0284c7 100%) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-info:active { transform: translateY(0) !important; }

/* Default / Secondary — subtle lift */
.btn-default, .btn-secondary {
  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease !important;
}
.btn-default:hover, .btn-secondary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09) !important;
}
.btn-default:active, .btn-secondary:active { transform: translateY(0) !important; }


/* ================================================================
   TABLES
   ================================================================ */

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

.table > tbody > tr:hover > td {
  background-color: rgba(59, 130, 246, 0.04) !important;
}

/* DataTables selected rows */
table.dataTable > tbody > tr.selected > td {
  background: rgba(59, 130, 246, 0.07) !important;
}


/* ================================================================
   DROPDOWN MENUS
   ================================================================ */

.dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.06) !important;
  overflow: hidden;
  animation: dropIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

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

.dropdown-menu > li > a {
  transition: background 0.15s ease, color 0.15s ease !important;
  border-radius: 6px !important;
  margin: 1px 4px !important;
}

.dropdown-menu > li > a:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1e40af !important;
}

.dropdown-header {
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 16px 4px !important;
}


/* ================================================================
   MODALS
   ================================================================ */

.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important;
  border-bottom: 1px solid #e5e9ef !important;
  padding: 18px 24px !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
  transform: scale(0.92) translateY(-20px) !important;
}

.modal.in .modal-dialog {
  transform: scale(1) translateY(0) !important;
}


/* ================================================================
   ALERTS
   ================================================================ */

.alert {
  border-radius: 10px !important;
  border-left-width: 4px !important;
  border-top-width: 1px !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
  font-weight: 500 !important;
  animation: alertIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

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

.alert-success { border-left-color: #22c55e !important; }
.alert-danger,
.alert-error   { border-left-color: #ef4444 !important; }
.alert-warning { border-left-color: #f59e0b !important; }
.alert-info    { border-left-color: #0ea5e9 !important; }


/* ================================================================
   BADGES & LABELS
   ================================================================ */

.badge {
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 8px !important;
  font-size: 0.72rem !important;
}

.label {
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
}


/* ================================================================
   TABS
   ================================================================ */

.nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.nav-tabs > li > a:hover {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: transparent transparent #ddd !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  border-bottom-color: #fff !important;
}


/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */

#wrapper {
  background: #f5f7fa !important;
}

.content {
  animation: contentIn 0.4s ease both;
}

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

/* Page header / breadcrumbs */
.page-header {
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
}

.breadcrumb {
  background: transparent !important;
  font-size: 0.8rem !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}

.breadcrumb > li + li::before {
  color: #94a3b8 !important;
}


/* ================================================================
   PROGRESS BARS
   ================================================================ */

.progress {
  border-radius: 20px !important;
  overflow: hidden;
  background: #e2e8f0 !important;
}

.progress-bar {
  border-radius: 20px !important;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.progress-bar-success {
  background: linear-gradient(90deg, #15803d, #22c55e) !important;
}

.progress-bar-info {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
}

.progress-bar-warning {
  background: linear-gradient(90deg, #b45309, #f59e0b) !important;
}

.progress-bar-danger {
  background: linear-gradient(90deg, #b91c1c, #ef4444) !important;
}


/* ================================================================
   DASHBOARD STATS
   ================================================================ */

/* Stat boxes get a subtle hover lift */
.tw-rounded-lg.tw-bg-white,
.panel.widget {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.tw-rounded-lg.tw-bg-white:hover {
  transform: translateY(-2px) !important;
}


/* ================================================================
   INPUT GROUPS
   ================================================================ */

.input-group-addon {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}


/* ================================================================
   PROFILE / AVATAR
   ================================================================ */

.staff-profile-image-small {
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 0 0 2px #e2e8f0 !important;
}

.profile:hover .staff-profile-image-small {
  border-color: #fff !important;
  box-shadow: 0 0 0 2px #3b82f6 !important;
}


/* ================================================================
   SEARCH RESULTS
   ================================================================ */

#search_results {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}


/* ================================================================
   VIVID TEXT HELPERS
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
}

.text-primary { color: #2563eb !important; }
.text-success { color: #16a34a !important; }
.text-danger  { color: #dc2626 !important; }
.text-warning { color: #d97706 !important; }
.text-info    { color: #0284c7 !important; }
.text-muted   { color: #64748b !important; }


/* ================================================================
   PAGINATION
   ================================================================ */

.pagination > li > a,
.pagination > li > span {
  border-radius: 8px !important;
  margin: 0 2px !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.pagination > li > a:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #1d4ed8 !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}


/* ================================================================
   CHECKBOXES & TOGGLES
   ================================================================ */

.checkbox label::before {
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

.onoffswitch-label {
  transition: background 0.2s ease !important;
}