/* ============================================================
   MERVIX CRM — Modern Theme
   Overrides Bootstrap 3 + Perfex defaults
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  --sidebar-from:        #0f172a;
  --sidebar-mid:         #1e1b4b;
  --sidebar-to:          #1e3a5f;
  --sidebar-width:       230px;
  --sidebar-item-active: rgba(99,102,241,0.18);
  --sidebar-item-hover:  rgba(255,255,255,0.07);
  --sidebar-text:        rgba(255,255,255,0.75);
  --sidebar-text-muted:  rgba(255,255,255,0.4);
  --sidebar-accent:      #818cf8;

  --topbar-h:            58px;
  --topbar-bg:           #ffffff;
  --topbar-border:       #e8eaf0;

  --primary:             #6366f1;
  --primary-dark:        #4f46e5;
  --primary-hover:       #4338ca;
  --primary-light:       #eef2ff;
  --primary-glow:        rgba(99,102,241,0.25);

  --success:             #10b981;
  --success-light:       #ecfdf5;
  --warning:             #f59e0b;
  --warning-light:       #fffbeb;
  --danger:              #ef4444;
  --danger-light:        #fef2f2;
  --info:                #3b82f6;
  --info-light:          #eff6ff;

  --body-bg:             #f1f4fb;
  --card-bg:             #ffffff;
  --card-border:         #e8eaf0;
  --card-radius:         14px;
  --card-shadow:         0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.05);
  --card-hover-shadow:   0 8px 28px rgba(15,23,42,0.12);

  --text-h:              #0f172a;
  --text-body:           #334155;
  --text-muted:          #64748b;
  --text-subtle:         #94a3b8;
  --border:              #e2e8f0;
  --input-bg:            #f8fafc;
  --input-focus-bg:      #ffffff;

  --radius-xs:           6px;
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           16px;
  --ease:                cubic-bezier(0.4, 0, 0.2, 1);
  --transition:          0.18s var(--ease);
}

/* ── 2. Global Reset & Base ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--body-bg) !important;
  color: var(--text-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { transition: color var(--transition); }
a:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* ── 3. Sidebar ─────────────────────────────────────────────── */
.sidebar,
aside#menu {
  background: linear-gradient(170deg, var(--sidebar-from) 0%, var(--sidebar-mid) 48%, var(--sidebar-to) 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 24px rgba(15,23,42,0.18) !important;
  width: var(--sidebar-width) !important;
  min-height: 100vh;
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
}

/* decorative top stripe */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #a78bfa, #38bdf8);
  z-index: 1;
}

/* subtle dot-grid texture */
.sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* ── 3a. Sidebar — User Profile Card ───────────────────────── */
.sidebar-user-profile {
  margin: 0 12px !important;
  padding-top: 70px !important;
}

.sidebar-user-profile > a {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-md) !important;
  color: #fff !important;
  padding: 10px 12px !important;
  transition: background var(--transition), border-color var(--transition) !important;
  backdrop-filter: blur(8px);
}
.sidebar-user-profile > a:hover,
.sidebar-user-profile > a:focus {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.sidebar-user-profile .tw-font-semibold { color: #fff !important; font-size: 0.875rem; }
.sidebar-user-profile .tw-text-neutral-500,
.sidebar-user-profile .tw-text-neutral-300 { color: var(--sidebar-text-muted) !important; font-size: 0.73rem; }

.sidebar-user-profile .dropdown-menu {
  background: #1e293b !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  min-width: 100% !important;
  margin-top: 4px !important;
}
.sidebar-user-profile .dropdown-menu > li > a {
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.85rem;
  padding: 8px 16px !important;
  transition: background var(--transition) !important;
}
.sidebar-user-profile .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* ── 3b. Sidebar — Nav Menu ───────────────────────────────── */
ul.metis-menu,
ul.nav.metis-menu {
  padding: 8px 0 16px !important;
  margin-top: 8px !important;
}

ul.metis-menu li,
ul.nav.metis-menu li { list-style: none; }

ul.metis-menu > li > a,
ul.nav.metis-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--sidebar-text) !important;
  font-size: 0.84rem !important;
  font-weight: 500;
  padding: 9px 16px 9px 18px !important;
  margin: 2px 10px !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), color var(--transition) !important;
  position: relative;
  text-decoration: none !important;
}
ul.metis-menu > li > a:hover,
ul.nav.metis-menu > li > a:hover {
  background: var(--sidebar-item-hover) !important;
  color: #fff !important;
}
ul.metis-menu > li.active > a,
ul.nav.metis-menu > li.active > a,
ul.metis-menu > li.nav-active > a {
  background: var(--sidebar-item-active) !important;
  color: #fff !important;
}
ul.metis-menu > li.active > a::before,
ul.nav.metis-menu > li.active > a::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--sidebar-accent);
  border-radius: 0 3px 3px 0;
  margin-left: -10px;
}

/* Menu icons */
ul.metis-menu .menu-icon,
ul.nav.metis-menu .menu-icon {
  font-size: 15px !important;
  width: 18px;
  text-align: center;
  opacity: 0.8;
  flex-shrink: 0;
}
ul.metis-menu > li.active .menu-icon,
ul.metis-menu > li > a:hover .menu-icon { opacity: 1; }

/* Badges in sidebar */
ul.metis-menu .badge,
ul.nav.metis-menu .badge {
  font-size: 10px !important;
  padding: 3px 7px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  margin-left: auto;
}

/* Arrow for collapsibles */
ul.metis-menu .fa.arrow { margin-left: auto !important; opacity: 0.5; font-size: 11px !important; }

/* Sub-menu */
ul.metis-menu .nav-second-level,
ul.nav.metis-menu .nav-second-level {
  background: rgba(0,0,0,0.15) !important;
  border-radius: var(--radius-sm) !important;
  margin: 2px 10px !important;
  padding: 4px 0 !important;
}
ul.metis-menu .nav-second-level li a,
ul.nav.metis-menu .nav-second-level li a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.81rem !important;
  padding: 7px 16px 7px 42px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-xs) !important;
  margin: 1px 6px !important;
  transition: background var(--transition), color var(--transition) !important;
}
ul.metis-menu .nav-second-level li a:hover,
ul.nav.metis-menu .nav-second-level li a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
}
ul.metis-menu .nav-second-level li.active a { color: var(--sidebar-accent) !important; }

/* Setup menu item */
#setup-menu-item > a { border-top: 1px solid rgba(255,255,255,0.08) !important; margin-top: 8px !important; }

/* ── 4. Top Header Bar ─────────────────────────────────────── */
#header {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  box-shadow: 0 1px 8px rgba(15,23,42,0.07) !important;
  height: var(--topbar-h) !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
}
#header nav,
#header .tw-flex { height: 100%; }

/* Logo */
#logo { height: var(--topbar-h) !important; }
#logo .logo-text {
  color: var(--text-h) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.02em;
}

/* Hamburger toggle */
.hide-menu {
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
}
.hide-menu:hover { background: var(--primary-light) !important; color: var(--primary) !important; }

/* Top search */
#top_search input {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-body) !important;
  font-size: 0.875rem !important;
  height: 38px !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
#top_search input:focus {
  border-color: var(--primary) !important;
  background: var(--input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* Navbar right icons */
.navbar-nav > li > a {
  color: var(--text-muted) !important;
  transition: color var(--transition) !important;
}
.navbar-nav > li > a:hover { color: var(--primary) !important; background: transparent !important; }
.navbar-nav > li.icon > a { padding: 14px 10px !important; }

/* Quick create button */
.tw-bg-primary-600,
.tw-rounded-full.tw-bg-primary-600 {
  background: var(--primary) !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.tw-bg-primary-600:hover,
.tw-rounded-full.tw-bg-primary-600:hover,
.group:hover .tw-bg-primary-600 { background: var(--primary-dark) !important; }

/* ── 5. Main Layout ─────────────────────────────────────────── */
#wrapper {
  padding-top: var(--topbar-h) !important;
  margin-left: var(--sidebar-width) !important;
  transition: margin var(--transition) !important;
}

.content {
  padding: 28px 28px 40px !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
}

/* Collapsed sidebar */
body.hide-sidebar #wrapper { margin-left: 0 !important; }
body.hide-sidebar .sidebar { transform: translateX(-100%) !important; }

/* ── 6. Page Titles ─────────────────────────────────────────── */
.content-heading,
h1.page-title,
.page-title { font-size: 1.45rem !important; font-weight: 700 !important; color: var(--text-h) !important; letter-spacing: -0.02em; margin-bottom: 20px !important; }

/* ── 7. Cards / Panels ──────────────────────────────────────── */
.panel_s,
.panel-default {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
  transition: box-shadow var(--transition) !important;
  margin-bottom: 24px !important;
}
.panel_s:hover { box-shadow: var(--card-hover-shadow) !important; }

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

.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--card-border) !important;
  padding: 16px 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 !important;
}
.panel-heading h4,
.panel-heading h3,
.panel-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-h) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

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

/* ── 8. Dashboard KPI Stats ─────────────────────────────────── */
.dash-stats-bg,
.dash_stats_bg {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 20px 22px !important;
  position: relative;
  overflow: hidden;
  transition: all var(--transition) !important;
}
.dash-stats-bg:hover { box-shadow: var(--card-hover-shadow) !important; transform: translateY(-2px); }

/* Stat number */
.dash-stats-bg h1,
.dash-stats-bg h2,
.dash_stats_bg h1 {
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  color: var(--text-h) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
}

/* Stat label */
.dash-stats-bg p,
.dash_stats_bg p { font-size: 0.8rem; color: var(--text-muted) !important; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* Colored accents on stat cards */
.dash-stats-bg.bg-success-stripe::after,
.bg-success .dash-stats-bg::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--success);
}

/* ── 9. Stat Boxes (KPI grid blocks) ───────────────────────── */
.widget-stat { border-radius: var(--card-radius) !important; overflow: hidden; }

/* bg color stat cards */
.bg-danger  { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.bg-success { background: linear-gradient(135deg, #10b981, #059669) !important; }
.bg-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.bg-info    { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
.bg-primary { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }

/* ── 10. Tables ─────────────────────────────────────────────── */
.table {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead tr { background: #f8fafc !important; }
.table thead th {
  background: #f8fafc !important;
  border-bottom: 1.5px solid var(--border) !important;
  border-top: none !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 16px !important;
  white-space: nowrap;
}

.table tbody tr {
  transition: background var(--transition) !important;
  border-bottom: 1px solid var(--border) !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover { background: #f8fafc !important; }

.table tbody td {
  padding: 12px 16px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-body) !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
}

.table-hover tbody tr:hover td { background: var(--primary-light) !important; }
.table-striped tbody tr:nth-child(odd) { background: #fafbfd !important; }

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  background: var(--input-bg) !important;
  transition: border-color var(--transition) !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary) !important; }

/* ── 11. Buttons ────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 8px 18px !important;
  transition: all var(--transition) !important;
  border: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--primary-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-hover)) !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--success), #059669) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
}
.btn-success:hover { transform: translateY(-1px); color: #fff !important; }

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
}
.btn-danger:hover { transform: translateY(-1px); color: #fff !important; }

.btn-warning {
  background: linear-gradient(135deg, var(--warning), #d97706) !important;
  color: #fff !important;
}
.btn-warning:hover { transform: translateY(-1px); color: #fff !important; }

.btn-info {
  background: linear-gradient(135deg, var(--info), #2563eb) !important;
  color: #fff !important;
}
.btn-info:hover { transform: translateY(-1px); color: #fff !important; }

.btn-default {
  background: #fff !important;
  color: var(--text-body) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
.btn-default:hover {
  background: #f8fafc !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.btn-sm { padding: 5px 12px !important; font-size: 0.8rem !important; border-radius: 6px !important; }
.btn-lg { padding: 11px 24px !important; font-size: 0.95rem !important; border-radius: 10px !important; }
.btn-xs { padding: 3px 8px !important; font-size: 0.75rem !important; border-radius: 5px !important; }

/* Icon buttons */
.btn-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

/* ── 12. Forms & Inputs ──────────────────────────────────────── */
.form-control {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-body) !important;
  font-size: 0.875rem !important;
  height: 40px !important;
  padding: 8px 14px !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  background: var(--input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-subtle) !important; }
textarea.form-control { height: auto !important; }

select.form-control { cursor: pointer; }

.form-group { margin-bottom: 18px !important; }
.form-group label,
label.control-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px !important;
  display: block;
}

/* Input groups */
.input-group-addon {
  background: #f1f5f9 !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
}

/* Checkbox & radio */
.checkbox label, .radio label { font-size: 0.875rem !important; color: var(--text-body) !important; cursor: pointer; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── 13. Badges ─────────────────────────────────────────────── */
.badge {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  letter-spacing: 0.02em;
}
.bg-success, .badge.bg-success { background: var(--success) !important; color: #fff !important; }
.bg-danger,  .badge.bg-danger  { background: var(--danger) !important;  color: #fff !important; }
.bg-warning, .badge.bg-warning { background: var(--warning) !important; color: #fff !important; }
.bg-info,    .badge.bg-info    { background: var(--info) !important;    color: #fff !important; }

/* Label badges inline */
.label { border-radius: 20px !important; font-weight: 600 !important; font-size: 0.72rem !important; padding: 3px 8px !important; }
.label-success { background: var(--success-light) !important; color: #059669 !important; }
.label-danger  { background: var(--danger-light) !important;  color: #dc2626 !important; }
.label-warning { background: var(--warning-light) !important; color: #d97706 !important; }
.label-info    { background: var(--info-light) !important;    color: #2563eb !important; }
.label-primary { background: var(--primary-light) !important; color: var(--primary-dark) !important; }
.label-default { background: #f1f5f9 !important; color: var(--text-muted) !important; }

/* ── 14. Dropdowns ──────────────────────────────────────────── */
.dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06) !important;
  padding: 6px !important;
  margin-top: 4px !important;
  min-width: 180px;
  animation: dropIn 0.15s var(--ease) both;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-menu > li > a {
  color: var(--text-body) !important;
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-xs) !important;
  transition: background var(--transition), color var(--transition) !important;
  display: block;
  font-weight: 500;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}
.dropdown-menu > li.active > a {
  background: var(--primary) !important;
  color: #fff !important;
}
.dropdown-menu > .dropdown-header {
  color: var(--text-subtle) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 6px 14px !important;
}
.dropdown-divider,
.dropdown-menu .divider {
  background: var(--border) !important;
  margin: 6px 10px !important;
  height: 1px !important;
  border: none !important;
}

/* ── 15. Alerts ─────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  border-left: 4px solid currentColor !important;
}
.alert-success { background: var(--success-light) !important; color: #065f46 !important; border-left-color: var(--success) !important; }
.alert-danger   { background: var(--danger-light) !important;  color: #991b1b !important; border-left-color: var(--danger) !important; }
.alert-warning  { background: var(--warning-light) !important; color: #92400e !important; border-left-color: var(--warning) !important; }
.alert-info     { background: var(--info-light) !important;    color: #1e40af !important; border-left-color: var(--info) !important; }

/* ── 16. Modals ─────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.2) !important;
  overflow: hidden;
}
.modal-header {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 24px !important;
}
.modal-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--text-h) !important; }
.modal-body  { padding: 24px !important; }
.modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 24px !important;
}
.modal-backdrop.in { opacity: 0.5 !important; }

/* ── 17. Nav Tabs ───────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 20px;
}
.nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  padding: 10px 18px !important;
  margin-bottom: -2px !important;
  transition: color var(--transition), border-color var(--transition) !important;
}
.nav-tabs > li > a:hover { color: var(--primary) !important; background: transparent !important; border-bottom-color: var(--primary-light) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  border-bottom: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
}

/* ── 18. Pagination ─────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  border: 1.5px solid var(--border) !important;
  color: var(--text-body) !important;
  padding: 6px 13px !important;
  font-size: 0.85rem !important;
  transition: all var(--transition) !important;
}
.pagination > li > a:hover { background: var(--primary-light) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.pagination > .active > a,
.pagination > .active > span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.pagination > li:first-child > a { border-radius: 8px 0 0 8px !important; }
.pagination > li:last-child > a  { border-radius: 0 8px 8px 0 !important; }

/* ── 19. Breadcrumbs ────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 0 14px !important;
  margin: 0 !important;
  font-size: 0.82rem;
}
.breadcrumb > li + li::before { color: var(--text-subtle) !important; }
.breadcrumb > .active { color: var(--text-h) !important; font-weight: 600; }
.breadcrumb > li > a { color: var(--text-muted) !important; }
.breadcrumb > li > a:hover { color: var(--primary) !important; }

/* ── 20. Progress Bars ──────────────────────────────────────── */
.progress {
  background: #e2e8f0 !important;
  border-radius: 20px !important;
  height: 7px !important;
  box-shadow: none !important;
}
.progress-bar {
  border-radius: 20px !important;
  transition: width 0.5s var(--ease) !important;
}
.progress-bar-success { background: linear-gradient(90deg, var(--success), #34d399) !important; }
.progress-bar-info    { background: linear-gradient(90deg, var(--info), #60a5fa) !important; }
.progress-bar-warning { background: linear-gradient(90deg, var(--warning), #fcd34d) !important; }
.progress-bar-danger  { background: linear-gradient(90deg, var(--danger), #f87171) !important; }
.progress-bar         { background: linear-gradient(90deg, var(--primary), #818cf8) !important; }

/* ── 21. Tooltips ───────────────────────────────────────────── */
.tooltip-inner {
  background: #1e293b !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  padding: 5px 10px !important;
  font-weight: 500;
}
.tooltip.top .tooltip-arrow    { border-top-color: #1e293b !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1e293b !important; }
.tooltip.left .tooltip-arrow   { border-left-color: #1e293b !important; }
.tooltip.right .tooltip-arrow  { border-right-color: #1e293b !important; }

/* ── 22. Screen Options (Dashboard gear) ────────────────────── */
.screen-options-btn {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  transition: all var(--transition) !important;
  padding: 7px 14px !important;
  box-shadow: var(--card-shadow) !important;
}
.screen-options-btn:hover { color: var(--primary) !important; border-color: var(--primary) !important; }

/* ── 23. Notifications dropdown ─────────────────────────────── */
.notifications-dropdown,
.notifications-wrapper .dropdown-menu {
  min-width: 320px !important;
  max-height: 420px;
  overflow-y: auto;
  border-radius: var(--radius-md) !important;
}
.notifications-wrapper .dropdown-menu > li > a { border-radius: var(--radius-xs) !important; }

/* ── 24. Avatar / Profile Image ─────────────────────────────── */
.staff-profile-image-small,
img.staff-profile-image-small {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2) !important;
}

/* ── 25. Search results ─────────────────────────────────────── */
#search_results {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
  border: 1px solid var(--border) !important;
}

/* ── 26. Scrollbar styling ──────────────────────────────────── */
::-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; }

/* sidebar scrollbar */
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ── 27. Loading / Spinner ──────────────────────────────────── */
.spinner,
.loading-overlay { border-radius: var(--radius-md) !important; }

/* ── 28. Select2 overrides ──────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--input-bg) !important;
  min-height: 40px !important;
  transition: border-color var(--transition) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}
.select2-results__option--highlighted { background: var(--primary) !important; }
.select2-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.1) !important;
}

/* ── 29. Flatpickr / Datepicker ─────────────────────────────── */
.flatpickr-calendar {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
  border: 1px solid var(--border) !important;
}
.flatpickr-day.selected { background: var(--primary) !important; border-color: var(--primary) !important; }
.flatpickr-day:hover { background: var(--primary-light) !important; }

/* ── 30. Dashboard specific widgets ────────────────────────── */
.mtop20 { margin-top: 20px !important; }

/* Widget drag handle */
.screen-options-btn { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 6px; }

/* ── 31. Responsive adjustments ─────────────────────────────── */
@media (max-width: 992px) {
  #wrapper { margin-left: 0 !important; }
  .content { padding: 20px 16px 32px !important; }
  .sidebar { transform: translateX(-100%) !important; }
  body.show-sidebar .sidebar { transform: translateX(0) !important; }
}

/* ── 32. Smooth animations on page load ─────────────────────── */
.content > .row > div,
.panel_s,
.panel-default {
  animation: fadeUp 0.3s var(--ease) both;
}
.content > .row > div:nth-child(1) { animation-delay: 0.04s; }
.content > .row > div:nth-child(2) { animation-delay: 0.08s; }
.content > .row > div:nth-child(3) { animation-delay: 0.12s; }
.content > .row > div:nth-child(4) { animation-delay: 0.16s; }
.content > .row > div:nth-child(5) { animation-delay: 0.20s; }
.content > .row > div:nth-child(6) { animation-delay: 0.24s; }

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

/* ── 33. Pinned projects in sidebar ─────────────────────────── */
.pinned-projects-list a,
.sidebar .pinned-project { color: rgba(255,255,255,0.6) !important; font-size: 0.8rem !important; }
.pinned-projects-list a:hover { color: #fff !important; }
.pinned-projects-heading { color: rgba(255,255,255,0.35) !important; font-size: 0.68rem !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 18px 4px !important; font-weight: 600; }

/* ── 34. Well blocks ─────────────────────────────────────────── */
.well {
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

/* ── 35. List groups ─────────────────────────────────────────── */
.list-group-item {
  border-color: var(--border) !important;
  color: var(--text-body) !important;
  transition: background var(--transition) !important;
}
.list-group-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }
.list-group-item:hover { background: #f8fafc !important; }
.list-group-item.active { background: var(--primary) !important; border-color: var(--primary) !important; }

/* ── 36. Typography helpers ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-h) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.15rem !important; }
h4 { font-size: 1rem !important; }
h5 { font-size: 0.9rem !important; }
h6 { font-size: 0.82rem !important; }

/* Muted text */
.text-muted { color: var(--text-muted) !important; }

/* ── 37. Action rows / button groups ─────────────────────────── */
.actions-list a,
.table-action a {
  color: var(--text-muted) !important;
  transition: color var(--transition) !important;
  font-size: 0.95rem;
}
.actions-list a:hover,
.table-action a:hover { color: var(--primary) !important; }

/* ── 38. Status labels (Perfex-specific) ─────────────────────── */
/* Invoices */
.label-sent       { background: var(--info-light) !important;    color: #1d4ed8 !important; }
.label-paid       { background: var(--success-light) !important; color: #065f46 !important; }
.label-unpaid     { background: var(--danger-light) !important;  color: #991b1b !important; }
.label-overdue    { background: #fff1f2 !important;              color: #9f1239 !important; }
.label-draft      { background: #f1f5f9 !important;              color: #475569 !important; }
.label-cancelled  { background: #fafafa !important;              color: #78716c !important; }

/* ── 39. Chart containers ───────────────────────────────────── */
.chart-container, canvas { border-radius: var(--radius-sm) !important; }

/* ── 40. Header notification badge ─────────────────────────── */
.notifications-total,
.nav-total-todos {
  background: var(--danger) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 20px !important;
  padding: 2px 5px !important;
}

/* ══════════════════════════════════════════════════════════════
   41. HEADER ALIGNMENT — Fix topbar layout
   ══════════════════════════════════════════════════════════════ */

/* Make header a flex row so hamburger + nav sit on one line.
   Start AFTER the sidebar so it never overlaps the nav. */
#header {
  display: flex !important;
  align-items: center !important;
  padding: 0 8px 0 0 !important;
  height: var(--topbar-h) !important;
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-width) !important;  /* start after sidebar */
  right: 0 !important;
  z-index: 1029 !important;              /* below sidebar (1040) */
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  box-shadow: 0 1px 8px rgba(15,23,42,0.07) !important;
}

/* Hamburger — remove Tailwind mt-4 (16px) that pushes it down */
button.hide-menu {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin-left: 8px !important;
}

/* Nav fills remaining width */
#header > nav {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* Inner flex row: vertically center everything */
#header nav > div.tw-flex {
  align-items: center !important;
  height: 100% !important;
}

/* Logo inside the header is now hidden — the sidebar's workspace header
   already shows the brand. This prevents a duplicate/awkward logo. */
#logo,
#header nav .tw-overflow-hidden.tw-shrink-0 {
  display: none !important;
}

/* Search — remove tw-mt-2 push */
#top_search {
  align-self: center !important;
  margin-top: 0 !important;
}

input#search_input {
  margin-top: 0 !important;
}

/* Quick-create icon li: remove negative top margin */
ul.navbar-nav > li.icon {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
}

/* Right nav bar — proper flex centering */
ul.nav.navbar-nav.navbar-right {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  height: 100% !important;
}

ul.nav.navbar-nav.navbar-right > li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

ul.nav.navbar-nav.navbar-right > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile menu section: vertically centered */
.mobile-menu {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

.mobile-icon-menu {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════
   42. DASHBOARD ANALYTICS — KPI Cards + Chart Cards
   ══════════════════════════════════════════════════════════════ */

#crm-analytics { margin-bottom: 8px; }

/* KPI card */
.crm-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  margin-bottom: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.crm-kpi-card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

/* Decorative gradient blob */
.crm-kpi-card::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.06;
}

.crm-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.crm-kpi-icon--indigo { background: #eef2ff; color: #6366f1; }
.crm-kpi-icon--emerald { background: #ecfdf5; color: #10b981; }
.crm-kpi-icon--amber  { background: #fffbeb; color: #f59e0b; }
.crm-kpi-icon--rose   { background: #fef2f2; color: #ef4444; }

.crm-kpi-body { flex: 1; min-width: 0; }

.crm-kpi-label {
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 4px !important;
}

.crm-kpi-value {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--text-h) !important;
  margin: 0 0 6px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
}

.crm-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}

.crm-trend-up   { background: #ecfdf5; color: #059669; }
.crm-trend-down { background: #fef2f2; color: #dc2626; }
.crm-trend-neutral { background: #f8fafc; color: var(--text-muted); }

/* Sparkline canvas (bottom of card) */
.crm-sparkline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px !important;
  width: 100% !important;
  opacity: 0.25;
}

/* Chart card */
.crm-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.crm-chart-card:hover { box-shadow: var(--card-hover-shadow); }

.crm-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--card-border);
}

.crm-chart-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text-h) !important;
  margin: 0 0 3px !important;
  letter-spacing: -0.01em;
}

.crm-chart-subtitle {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.crm-chart-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.crm-period-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.crm-period-btn:hover { border-color: var(--primary); color: var(--primary); }
.crm-period-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.crm-chart-body {
  padding: 18px 22px 16px;
  position: relative;
}

.crm-chart-body--donut {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

/* Donut legend */
.crm-donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 22px 18px;
  justify-content: center;
}

.crm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-body);
  font-weight: 500;
}

.crm-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}