/*
 * Perfex CRM – Modern Light Theme
 * Overrides only — no feature/flow changes
 * Primary: Indigo #4f46e5 | Neutral: slate scale
 */

/* ============================================================
   0. CSS VARIABLES
   ============================================================ */
:root {
  --pf-primary:    #4f46e5;
  --pf-primary-l:  #1a5490;
  --pf-primary-d:  #4338ca;
  --pf-primary-bg: #eef2ff;
  --pf-surface:    #ffffff;
  --pf-bg:         #f8fafc;
  --pf-border:     #e2e8f0;
  --pf-text:       #1e293b;
  --pf-text-muted: #64748b;
  --pf-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --pf-shadow:     0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --pf-shadow-lg:  0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --pf-radius:     12px;
  --pf-radius-lg:  16px;
  --pf-radius-sm:  8px;
  --pf-sidebar-w:  248px;
  --pf-header-h:   63px;
  --pf-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   1. GLOBAL
   ============================================================ */
body {
  background: var(--pf-bg) !important;
  color: var(--pf-text) !important;
  font-family: var(--pf-font) !important;
}

body > * { font-size: 13.5px; }

#wrapper {
  background: var(--pf-bg) !important;
  min-height: 100vh;
}

a { color: var(--pf-primary); }
a:hover { color: var(--pf-primary-d); }

::selection {
  background: var(--pf-primary-bg);
  color: var(--pf-primary-d);
}

/* ============================================================
   2. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   3. SIDEBAR  (dark → light)
   ============================================================ */
.sidebar {
  background: var(--pf-surface) !important;
  border-right: 1px solid var(--pf-border) !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* logo area */
.sidebar > ul > li:first-child {
  border-bottom: 1px solid var(--pf-border);
}
.sidebar > ul > li:first-child > div,
.sidebar > ul > li:first-child a {
  background: transparent !important;
}

/* menu links */
.sidebar li a {
  color: #475569 !important;
  font-weight: 400;
  border-radius: var(--pf-radius-sm);
  margin-top: 1px;
  transition: all .15s ease;
}

.sidebar li a:hover,
.sidebar li a:focus {
  background: #f1f5f9 !important;
  color: var(--pf-text) !important;
}

.sidebar li a i.menu-icon {
  opacity: 0.55;
  color: #64748b;
  transition: color .15s ease;
}

.sidebar li a:hover i.menu-icon,
.sidebar li a:focus i.menu-icon { opacity: 0.85; color: var(--pf-primary-l); }

/* active state */
.sidebar li.active > a {
  background: var(--pf-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(18,64,111,.3);
  font-weight: 500;
}

.sidebar li.active > a i.menu-icon { color: #fff !important; opacity: 1; }
.sidebar li.active > a .badge { color: #fff !important; background: rgba(255,255,255,.25) !important; }

/* submenu links */
.sidebar li .nav-second-level li a {
  color: #64748b !important;
  padding-left: 44px;
  border-radius: 6px;
}
.sidebar li .nav-second-level li a:hover {
  background: #f1f5f9 !important;
  color: var(--pf-text) !important;
}
.sidebar li .nav-second-level li.active a {
  background: var(--pf-primary-bg) !important;
  color: var(--pf-primary) !important;
  font-weight: 500;
  box-shadow: none !important;
}
.sidebar li .nav-second-level li.active a .menu-icon { color: var(--pf-primary) !important; }
.sidebar li .nav-second-level li.active a .badge { color: var(--pf-primary) !important; background: var(--pf-primary-bg) !important; }

/* submenu hover (non-active) */
.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar .nav > li .nav-second-level > li:not(.active) > a:focus {
  background-color: #f1f5f9 !important;
  color: var(--pf-text) !important;
}
.sidebar li .nav-second-level a:hover .menu-icon,
.sidebar li .nav-second-level a:focus .menu-icon { color: var(--pf-primary-l) !important; }

/* arrow caret */
.sidebar .arrow { color: #94a3b8; }
.sidebar .fa.arrow:before { content: "\f105"; font-size: 12px; }
.sidebar .active > a > .fa.arrow:before { content: "\f107"; }

/* setup cog */
#setup-menu-item a .menu-icon { color: #64748b; }
#setup-menu-item a:hover .menu-icon { color: var(--pf-primary-l); }

/* setup menu wrapper - fix z-index so it shows above sidebar */
#setup-menu-wrapper {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  z-index: 1001 !important;
  overflow-y: auto !important;
}

/* sidebar scroll fix - override any JS-set min-height */
#menu {
  min-height: 0 !important;
}

/* ============================================================
   4. HEADER
   ============================================================ */
#header {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pf-border) !important;
  box-shadow: var(--pf-shadow-sm) !important;
  z-index: 100;
}

#header .hide-menu {
  cursor: pointer;
  color: #475569;
  padding: 0 12px;
}
#header .hide-menu:hover { color: var(--pf-primary); }

/* search bar */
#top_search #search_input {
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  color: var(--pf-text) !important;
  font-size: 13px;
  transition: all .2s ease;
}
#top_search #search_input:focus {
  background: #fff !important;
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(18,64,111,.1) !important;
}
#top_search #search_input::placeholder { color: #94a3b8; }
#top_search #top_search_button { color: #94a3b8; }

/* nav icons in header */
.navbar-nav > li > a { color: var(--pf-text) !important; }
.navbar-nav > li > a:hover { color: var(--pf-primary) !important; }

/* quick-create button */
#header .tw-rounded-full.tw-bg-primary-600 {
  background: var(--pf-primary) !important;
  box-shadow: 0 2px 6px rgba(18,64,111,.3);
  transition: all .15s ease;
}
#header .tw-rounded-full.tw-bg-primary-600:hover {
  background: var(--pf-primary-d) !important;
  transform: scale(1.05);
}

/* header profile image ring */
.staff-profile-image-small.tw-ring-primary-500 {
  --tw-ring-color: var(--pf-primary) !important;
}

/* timer icon container */
.header-timers .tw-border-neutral-200\/60 {
  border-color: var(--pf-border) !important;
}

/* dropdown menus */
.dropdown-menu {
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: var(--pf-shadow-lg) !important;
  padding: 6px;
  background: var(--pf-surface) !important;
}
.dropdown-menu > li > a { border-radius: 6px; padding: 7px 14px; color: var(--pf-text); }
.dropdown-menu > li > a:hover { background: #f1f5f9 !important; color: var(--pf-primary); }
.dropdown-header { color: var(--pf-text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }

/* ============================================================
   5. PANELS / CARDS
   ============================================================ */
.panel,
.panel_s {
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: var(--pf-shadow-sm) !important;
  background: var(--pf-surface) !important;
  overflow: hidden;
}

.panel-heading,
.panel_s > .panel-heading {
  background: var(--pf-surface) !important;
  border-bottom: 1px solid var(--pf-border) !important;
  padding: 16px 20px;
  border-radius: var(--pf-radius) var(--pf-radius) 0 0 !important;
}

.panel-heading h4,
.panel-heading .bold {
  font-weight: 600 !important;
  color: var(--pf-text);
}

.panel-body { padding: 20px; }

.panel-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--pf-border) !important;
  border-radius: 0 0 var(--pf-radius) var(--pf-radius) !important;
  padding: 12px 20px;
}

/* kanban panels inside sidebar */
#kan-ban .panel-body { padding: 12px; }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  border-radius: var(--pf-radius-sm);
  font-weight: 500;
  font-size: 13px;
  transition: all .15s ease;
  letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  box-shadow: 0 1px 4px rgba(18,64,111,.25);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--pf-primary-d) !important;
  border-color: var(--pf-primary-d) !important;
  box-shadow: 0 4px 12px rgba(18,64,111,.3);
}

.btn-success {
  box-shadow: 0 1px 4px rgba(22,163,74,.18);
}
.btn-danger {
  box-shadow: 0 1px 4px rgba(220,38,38,.15);
}
.btn-warning {
  box-shadow: 0 1px 4px rgba(234,179,8,.18);
}
.btn-info {
  box-shadow: 0 1px 4px rgba(14,165,233,.18);
}

.btn-default,
.btn-default[disabled] {
  background: #fff;
  border-color: var(--pf-border);
  color: var(--pf-text);
}
.btn-default:hover { background: #f8fafc; border-color: #cbd5e1; }

.btn-icon { border-radius: var(--pf-radius-sm); }

/* ============================================================
   7. FORMS / INPUTS
   ============================================================ */
.form-control,
.bootstrap-select .dropdown-toggle,
.input-group .form-control {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  color: var(--pf-text);
  background: #fff;
  transition: all .15s ease;
  font-size: 13px;
}

.form-control:focus,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
.input-group .form-control:focus {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(18,64,111,.1) !important;
  outline: none;
}

select.form-control {
  border-radius: var(--pf-radius-sm);
}

textarea.form-control { border-radius: var(--pf-radius-sm); }

label,
.control-label { color: #475569; font-weight: 500; font-size: 13px; }

.form-group { margin-bottom: 16px; }

/* bootstrap-select button */
.bootstrap-select .dropdown-toggle {
  border-color: var(--pf-border);
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--pf-primary) !important;
  box-shadow: 0 0 0 3px rgba(18,64,111,.1) !important;
}

/* checkbox / radio custom */
.checkbox label,
.radio label { color: #475569; }

/* ============================================================
   8. TABLES
   ============================================================ */
.table { color: var(--pf-text); }

.table > thead > tr > th,
.table > thead > td {
  background: #f8fafc;
  border-bottom: 2px solid var(--pf-border);
  color: #475569;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
  background-color: #f8fafc;
}

.table-bordered { border-color: var(--pf-border); }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--pf-border); }

/* ============================================================
   9. TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--pf-border) !important;
}

.nav-tabs > li > a {
  color: var(--pf-text-muted);
  border-radius: var(--pf-radius-sm) var(--pf-radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  font-weight: 500;
  padding: 10px 16px;
  transition: all .15s ease;
}

.nav-tabs > li > a:hover {
  background: #f1f5f9;
  color: var(--pf-text);
  border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--pf-primary);
  background: var(--pf-surface);
  border-color: var(--pf-border) var(--pf-border) var(--pf-surface);
  border-bottom: 2px solid var(--pf-surface);
  font-weight: 600;
}

/* ============================================================
   10. PROGRESS BARS
   ============================================================ */
.progress {
  border-radius: 100px;
  background: #f1f5f9;
  overflow: hidden;
  height: 8px;
  box-shadow: none;
}

.progress-bar {
  border-radius: 100px;
  background: linear-gradient(90deg, var(--pf-primary), var(--pf-primary-l));
}

.progress-bar-success { background: linear-gradient(90deg, #16a34a, #22c55e); }
.progress-bar-warning { background: linear-gradient(90deg, #d97706, #f59e0b); }
.progress-bar-danger  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.progress-bar-info    { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }

/* ============================================================
   11. BADGES / LABELS
   ============================================================ */
.badge,
.label {
  border-radius: 20px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.badge { padding: 3px 8px; }
.badge-bg-primary { background: var(--pf-primary-bg) !important; color: var(--pf-primary) !important; }

/* ============================================================
   12. MODALS
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--pf-radius-lg);
  box-shadow: 0 25px 60px rgba(0,0,0,.15);
}

.modal-header {
  border-bottom: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
  padding: 20px 24px;
}

.modal-header .modal-title { font-weight: 600; color: var(--pf-text); }

.modal-body { padding: 24px; }

.modal-footer {
  border-top: 1px solid var(--pf-border);
  border-radius: 0 0 var(--pf-radius-lg) var(--pf-radius-lg);
  padding: 16px 24px;
  background: #f8fafc;
}

/* ============================================================
   13. ALERTS
   ============================================================ */
.alert {
  border-radius: var(--pf-radius-sm);
  border: none;
  font-weight: 400;
}

.alert-success { background: #f0fdf4; color: #15803d; border-left: 4px solid #22c55e; }
.alert-danger  { background: #fef2f2; color: #b91c1c; border-left: 4px solid #ef4444; }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-info    { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }

/* ============================================================
   14. PAGINATION
   ============================================================ */
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--pf-border);
  border-radius: 6px;
  margin: 0 2px;
  color: var(--pf-text-muted);
  transition: all .15s ease;
}

.pagination > li > a:hover {
  background: var(--pf-primary-bg);
  border-color: var(--pf-primary-l);
  color: var(--pf-primary);
}

.pagination > .active > a,
.pagination > .active > a:hover {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: #fff !important;
}

/* ============================================================
   15. TOP STATS CARDS (dashboard)
   ============================================================ */
.top_stats_wrapper {
  border-radius: var(--pf-radius);
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow-sm);
  transition: all .2s ease;
  background: var(--pf-surface);
}

.top_stats_wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--pf-shadow);
  border-color: #c7d2fe;
}

/* ============================================================
   16. TIMELINE / ACTIVITY
   ============================================================ */
.activity-feed li .date { color: var(--pf-text-muted); font-size: 11px; }
.activity-feed li .text  { color: var(--pf-text); }

/* ============================================================
   17. CHIPS / TAGS
   ============================================================ */
.chip,
.tags-labels,
.label-default {
  border-radius: 20px;
  font-weight: 500;
}

/* ============================================================
   18. TOOLTIP POPOVER
   ============================================================ */
.tooltip-inner { background: var(--pf-text); border-radius: 6px; font-size: 12px; }
.popover { border-color: var(--pf-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-lg); }

/* ============================================================
   19. CALENDAR (fullcalendar overrides)
   ============================================================ */
.fc-toolbar h2 { font-weight: 600 !important; color: var(--pf-text) !important; font-size: 18px !important; }
.fc-button-primary {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  border-radius: var(--pf-radius-sm) !important;
}
.fc-button-primary:hover { background: var(--pf-primary-d) !important; }
.fc-button-active {
  background: var(--pf-primary-d) !important;
  border-color: var(--pf-primary-d) !important;
}
.fc-day-grid-event { border-radius: 4px !important; }
.fc-event { border-radius: 4px !important; font-size: 11.5px !important; }

/* ============================================================
   20. LOGIN PAGE
   ============================================================ */
body.login_admin {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 40%, #c7d2fe 100%) !important;
  min-height: 100vh;
}

body.login_admin .authentication-form-wrapper > .company-logo { padding-bottom: 8px; }
body.login_admin .authentication-form-wrapper > h1 { color: var(--pf-text); }

body.login_admin .authentication-form-wrapper > div.tw-bg-white {
  border-radius: var(--pf-radius-lg) !important;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 20px 50px rgba(18,64,111,.1), 0 8px 20px rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.login_admin .btn-primary {
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-l)) !important;
  border: none !important;
  height: 44px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(18,64,111,.3);
}
body.login_admin .btn-primary:hover {
  background: linear-gradient(135deg, var(--pf-primary-d), var(--pf-primary)) !important;
  box-shadow: 0 6px 20px rgba(18,64,111,.35);
  transform: translateY(-1px);
}

body.login_admin .form-control {
  height: 44px;
  border-radius: var(--pf-radius-sm);
}

/* ============================================================
   21. NEWSFEED / MISC
   ============================================================ */
#newsfeed .panel_s { border-radius: var(--pf-radius) !important; }

/* Kanban card style */
.kan-ban-col-wrapper .panel_s .panel-body {
  border-radius: var(--pf-radius-sm);
}

/* Task kanban active border */
li.task.current-user-task .panel-body,
li.lead-kan-ban.current-user-lead .panel-body {
  border-left: 3px solid var(--pf-primary);
}

/* overdue border */
li.task.overdue-task .panel-body {
  border-left: 3px solid #ef4444;
}

/* btn-bottom-toolbar (save buttons at bottom of forms) */
.btn-bottom-toolbar {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--pf-border) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
}

/* screen options area */
.screen-options-area {
  background: #f1f5f9 !important;
  border-bottom: 1px solid var(--pf-border) !important;
}

/* ============================================================
   22. RESPONSIVE — small screens
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    box-shadow: 4px 0 20px rgba(0,0,0,.1) !important;
  }

  #header {
    background: rgba(255,255,255,.96) !important;
  }

  .top_stats_wrapper:hover { transform: none; }

  .dropdown-menu {
    box-shadow: var(--pf-shadow-lg);
  }
}

/* ============================================================
   23. ANIMATION UTILITIES
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel,
.modal-content,
.top_stats_wrapper {
  animation: fadeInUp .25s ease both;
}

/* staggered dashboard widgets */
.dashboard .panel_s:nth-child(1) { animation-delay: .03s; }
.dashboard .panel_s:nth-child(2) { animation-delay: .06s; }
.dashboard .panel_s:nth-child(3) { animation-delay: .09s; }
.dashboard .panel_s:nth-child(4) { animation-delay: .12s; }
.dashboard .panel_s:nth-child(5) { animation-delay: .15s; }
.dashboard .panel_s:nth-child(6) { animation-delay: .18s; }