/* ==========================================================================
   LEZR Admin Theme Override
   Applied on top of the default Perfex CRM admin styles.
   Colors from lezr2.82w.net
   Primary: #E5242B  |  Dark sidebar: #1A1A1A  |  Surface: #161616
   ========================================================================== */

:root {
  --lz-red:        #E5242B;
  --lz-red-dark:   #c01e24;
  --lz-red-glow:   rgba(229,36,43,.15);
  --lz-sidebar:    #141414;
  --lz-sidebar-h:  #1e1e1e;
  --lz-sidebar-b:  rgba(255,255,255,.07);
  --lz-text-dim:   rgba(255,255,255,.62);
  --lz-text-off:   rgba(255,255,255,.38);
  --lz-border:     #e2e8f0;
  --lz-header:     #ffffff;
  --lz-radius:     10px;
  --lz-radius-sm:  7px;
  --lz-transition: .18s ease;
}

/* ══════════════════════════════════════════════════════
   1. SIDEBAR — dark with red accents
   ══════════════════════════════════════════════════════ */
.sidebar {
  background: var(--lz-sidebar) !important;
  border-right-color: rgba(255,255,255,.06) !important;
}

[dir="rtl"] .sidebar {
  border-left-color: rgba(255,255,255,.06) !important;
}

/* Logo / brand area at top of sidebar */
#menu .logo-wrapper,
#menu .sidebar-logo,
.sidebar .logo-wrapper {
  background: var(--lz-sidebar) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

#menu .logo-wrapper a img,
.sidebar .logo-wrapper a img {
  filter: brightness(0) invert(1);
}

/* All sidebar links */
.sidebar ul.nav li a {
  color: var(--lz-text-dim) !important;
  border-color: transparent !important;
  transition: color var(--lz-transition), background var(--lz-transition) !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--lz-text-off) !important;
  transition: color var(--lz-transition) !important;
}

/* Hover state */
.sidebar > ul.nav > li:hover a:first-child,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: var(--lz-red) !important;
}

/* Active state */
.sidebar > ul.nav > li.active a:first-child {
  background: var(--lz-red-glow) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

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

.sidebar ul.nav li.active > a .menu-icon {
  color: var(--lz-red) !important;
}

/* Active left-border indicator */
.sidebar > ul.nav > li.active {
  border-left-color: var(--lz-red) !important;
}

[dir="rtl"] .sidebar > ul.nav > li.active {
  border-right-color: var(--lz-red) !important;
  border-left-color: transparent !important;
}

/* Second-level nav items */
.sidebar ul.nav li .nav-second-level li a {
  color: var(--lz-text-dim) !important;
}

.sidebar ul.nav li .nav-second-level li a:hover,
.sidebar ul.nav li .nav-second-level li a:focus {
  color: #fff !important;
}

.sidebar ul.nav li .nav-second-level li.active a {
  color: #fff !important;
  font-weight: 600;
}

.sidebar ul.nav > li .nav-second-level a .menu-icon {
  color: var(--lz-text-off) !important;
}

.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: var(--lz-red) !important;
}

/* Arrow */
.sidebar .arrow { color: var(--lz-text-off) !important; }
.sidebar .active > a > .fa.arrow::before { color: var(--lz-red) !important; }

/* Badges in sidebar */
#side-menu li .nav-second-level li > .badge,
#setup-menu li .nav-second-level li > .badge {
  background: rgba(229,36,43,.35) !important;
  color: #fff !important;
}

#side-menu li .nav-second-level li.active > .badge,
#setup-menu li .nav-second-level li.active > .badge {
  background: var(--lz-red) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   2. TOP HEADER BAR
   ══════════════════════════════════════════════════════ */
#header {
  background: var(--lz-header) !important;
  border-bottom: 1px solid var(--lz-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}

/* ── Company logo / nav brand in header ── */
#header .navbar-brand img,
#header .logo img {
  max-height: 36px;
}

/* Search box in header */
#header .search-input .form-control,
#header input[type="search"],
#header input[type="text"] {
  border-radius: var(--lz-radius-sm) !important;
  border-color: var(--lz-border) !important;
  transition: border-color var(--lz-transition), box-shadow var(--lz-transition) !important;
}

#header .search-input .form-control:focus,
#header input[type="search"]:focus {
  border-color: var(--lz-red) !important;
  box-shadow: 0 0 0 3px var(--lz-red-glow) !important;
}

/* Header nav icons */
.navbar-nav > li > a {
  transition: color var(--lz-transition) !important;
}

.navbar-nav > li > a:hover {
  color: var(--lz-red) !important;
}

#header li > a.active {
  background: var(--lz-red-glow) !important;
  color: var(--lz-red) !important;
  border-radius: 80px !important;
}

/* Notification / icon indicator */
.navbar-nav > li a > .icon-total-indicator {
  background: var(--lz-red) !important;
}

/* ══════════════════════════════════════════════════════
   3. BUTTONS
   ══════════════════════════════════════════════════════ */
.btn-primary,
.btn-danger {
  background-color: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
  border-radius: var(--lz-radius-sm) !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 6px rgba(229,36,43,.25) !important;
  transition: all var(--lz-transition) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-danger:hover,  .btn-danger:focus,  .btn-danger:active {
  background-color: var(--lz-red-dark) !important;
  border-color: var(--lz-red-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(229,36,43,.35) !important;
}

.btn-default {
  border-radius: var(--lz-radius-sm) !important;
  transition: border-color var(--lz-transition), color var(--lz-transition) !important;
}

.btn-default:hover, .btn-default:focus {
  border-color: var(--lz-red) !important;
  color: var(--lz-red) !important;
}

.btn-success  { border-radius: var(--lz-radius-sm) !important; }
.btn-warning  { border-radius: var(--lz-radius-sm) !important; }
.btn-info     { border-radius: var(--lz-radius-sm) !important; }

/* Open/visible dropdown button */
.btn-primary.dropdown-toggle { border-left-color: rgba(255,255,255,.3) !important; }

/* ══════════════════════════════════════════════════════
   4. LINKS & FOCUS
   ══════════════════════════════════════════════════════ */
a { color: var(--lz-red); }
a:hover, a:focus { color: var(--lz-red-dark); }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--lz-red) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════
   5. BADGES & LABELS
   ══════════════════════════════════════════════════════ */
.badge               { background: var(--lz-red); }
.label-primary       { background: var(--lz-red) !important; }
.label-danger        { background: var(--lz-red) !important; }

/* ══════════════════════════════════════════════════════
   6. PANELS & CARDS
   ══════════════════════════════════════════════════════ */
.panel {
  border-radius: var(--lz-radius) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  border-color: var(--lz-border) !important;
}

.panel-heading {
  border-radius: var(--lz-radius) var(--lz-radius) 0 0 !important;
}

.panel-primary > .panel-heading {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
}

.panel-danger > .panel-heading {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
}

/* Panel headings with red left-bar accent */
.panel-heading h4::before,
.panel-heading h3::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--lz-red);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   7. TABS
   ══════════════════════════════════════════════════════ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--lz-red) !important;
  border-top-color: var(--lz-red) !important;
  border-top-width: 2px !important;
}

.nav-tabs > li > a:hover {
  color: var(--lz-red) !important;
}

/* ══════════════════════════════════════════════════════
   8. FORMS
   ══════════════════════════════════════════════════════ */
.form-control:focus {
  border-color: var(--lz-red) !important;
  box-shadow: 0 0 0 3px var(--lz-red-glow) !important;
}

.has-error .form-control { border-color: var(--lz-red) !important; }
.has-error .control-label,
.has-error .help-block { color: var(--lz-red) !important; }

.bootstrap-select.open > .btn,
.bootstrap-select > .btn:focus {
  border-color: var(--lz-red) !important;
  box-shadow: 0 0 0 3px var(--lz-red-glow) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li a:hover {
  background: var(--lz-red-glow) !important;
  color: var(--lz-red) !important;
}

.bootstrap-select .dropdown-menu li.selected.active a {
  background: var(--lz-red) !important;
  color: #fff !important;
}

/* Datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td span.active {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
}

.datepicker table tr td:hover,
.datepicker table tr td.day:hover {
  background: var(--lz-red-glow) !important;
}

.datetimepicker td.active,
.datetimepicker td.active:hover {
  background: var(--lz-red) !important;
}

/* ══════════════════════════════════════════════════════
   9. MODALS
   ══════════════════════════════════════════════════════ */
.modal-header {
  background: #1A1A1A !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0 !important;
}

.modal-header .modal-title { color: #fff !important; }

.modal-header .close {
  color: rgba(255,255,255,.7) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.modal-header .close:hover { color: #fff !important; }

.modal-content {
  border-radius: var(--lz-radius) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}

/* ══════════════════════════════════════════════════════
   10. TABLES
   ══════════════════════════════════════════════════════ */
.table thead th {
  border-bottom: 2px solid var(--lz-border) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #6b7280 !important;
}

.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
  background: rgba(229,36,43,.03) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(229,36,43,.3) !important;
  border-radius: var(--lz-radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--lz-red) !important;
  color: var(--lz-red) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--lz-red) !important;
  box-shadow: 0 0 0 3px var(--lz-red-glow) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════
   11. PROGRESS BARS
   ══════════════════════════════════════════════════════ */
.progress-bar         { background: var(--lz-red) !important; }
.progress-bar-danger  { background: var(--lz-red) !important; }

/* ══════════════════════════════════════════════════════
   12. ALERTS
   ══════════════════════════════════════════════════════ */
.alert-danger  { border-left: 4px solid var(--lz-red) !important; }
.alert-success { border-left: 4px solid #16a34a !important; }
.alert-warning { border-left: 4px solid #d97706 !important; }
.alert-info    { border-left: 4px solid #0891b2 !important; }

/* ══════════════════════════════════════════════════════
   13. TOOLTIPS
   ══════════════════════════════════════════════════════ */
.tooltip-inner {
  background: #1A1A1A !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

.tooltip.bottom .tooltip-arrow { border-bottom-color: #1A1A1A !important; }
.tooltip.top    .tooltip-arrow { border-top-color: #1A1A1A !important; }

/* ══════════════════════════════════════════════════════
   14. POPOVERS
   ══════════════════════════════════════════════════════ */
.popover-title { font-weight: 600; }

/* ══════════════════════════════════════════════════════
   15. CALENDAR / FULLCALENDAR
   ══════════════════════════════════════════════════════ */
.fc-button,.fc-button-primary {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
  border-radius: var(--lz-radius-sm) !important;
}

.fc-button:hover { background: var(--lz-red-dark) !important; }
.fc-day-today    { background: var(--lz-red-glow) !important; }

.fc-event {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════════════════════════
   16. CHARTS — Chart.js datasets inherit brand color
   ══════════════════════════════════════════════════════ */
/* No override needed — chart colors are set via JS data */

/* ══════════════════════════════════════════════════════
   17. MISC
   ══════════════════════════════════════════════════════ */

/* Breadcrumbs active color */
.breadcrumb > .active { color: var(--lz-red) !important; }

/* List group active */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background: var(--lz-red) !important;
  border-color: var(--lz-red) !important;
  color: #fff !important;
}

/* Dropzone */
.dropzone:hover,
.dropzone.dz-drag-hover {
  border-color: var(--lz-red) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--lz-red); }

/* ══════════════════════════════════════════════════════
   18. RESPONSIVE SIDEBAR
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    background: var(--lz-sidebar) !important;
  }
}