/* ============================================
   Premium Glassmorphic CRM Theme
   Modularized Entry Point
   ============================================ */

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

@import url('custom/_base.css');
@import url('custom/_sidebar.css');
@import url('custom/_sidebar-expanded.css');
@import url('custom/_form-table-spacing.css');
@import url('custom/_layout.css');
@import url('custom/_header.css');
@import url('custom/_dashboard.css');
@import url('custom/_kanban.css');
@import url('custom/_gantt.css');
@import url('custom/_profile.css');
@import url('custom/_buttons.css');
@import url('custom/_tables.css');
@import url('custom/_scrollbars.css');
@import url('custom/_dropdowns.css');
@import url('custom/_form_controls.css');
@import url('custom/_badges.css');
@import url('custom/_misc.css');
@import url('custom/_tasks_overview_accordion.css');
@import url('custom/_quick_create.css');
@import url('custom/_task_modal.css');
@import url('custom/_task_completion_popup.css');
/* @import url('custom/_datepicker_fixes.css'); */

/* ── Final Force Visibility Overrides ─────── */
#sidebar-border-toggle {
  position: fixed !important;
  top: 50% !important;
  left: 60px !important; /* Default position when collapsed */
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  background: #ffffff !important;
  border: 2px solid #6d3ad0 !important;
  border-radius: 50% !important;
  color: #6d3ad0 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(109, 58, 208, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2147483647 !important; /* Maximum possible z-index */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sidebar-border-toggle:hover {
  background: #6d3ad0 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(109, 58, 208, 0.3) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* Force button position in both states */
body:not(.sidebar-expanded) #sidebar-border-toggle {
  left: 60px !important; /* Position when collapsed (72px - 12px) */
}

body.sidebar-expanded #sidebar-border-toggle {
  left: 230px !important; /* Position when expanded (240px - 10px) */
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  z-index: 2147483647 !important;
}

#sidebar-border-toggle i {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-expanded #sidebar-border-toggle i {
  transform: rotate(180deg) !important;
}


/* ── Contact Modal Fullscreen ─────── */

/* ── Required Field Asterisk Position ─────── */
/* Hide the left-side asterisk and show on right side */
.control-label::before,
.control-label span::before,
.control-label .required-symbol,
.control-label .text-danger,
label.control-label::before,
.form-group label::before {
  content: none !important;
  display: none !important;
}

.control-label.required::after,
.control-label[required]::after,
.form-group:has(.form-control[required]) .control-label::after,
.form-group .control-label::after,
label.control-label::after {
  content: " *" !important;
  color: #dc3545 !important;
  margin-left: 3px !important;
  display: inline !important;
}

/* Remove any ::before content that adds asterisk */
.control-label::before {
  content: none !important;
}

/* Contact modal - outside container, centered */
body > #contact.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 20px !important;
  z-index: 99999 !important;
  background: rgba(0,0,0,0.5) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body > #contact.modal[style*="flex"],
body > #contact.modal.in,
body > #contact.modal.show {
  display: flex !important;
}

body > #contact .modal-dialog {
  margin: 0 !important;
  width: 90% !important;
  max-width: 550px !important;
  max-height: 90vh !important;
}

body > #contact .modal-content {
  max-height: 90vh !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

body > #contact .modal-body {
  max-height: calc(80vh - 130px) !important;
  overflow-y: auto !important;
  padding: 15px !important;
}

/* Compact form elements */
body > #contact .form-group {
  margin-bottom: 10px !important;
}

body > #contact .form-control {
  height: 36px !important;
  padding: 6px 10px !important;
}

body > #contact label {
  font-size: 13px !important;
  margin-bottom: 4px !important;
}

body > #contact hr {
  margin: 10px 0 !important;
}

/* ── Remember Me Checkbox ─────── */
.remember-checkbox {
  position: relative;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  margin-bottom: 0 !important;
}

.remember-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.remember-checkbox .checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #6d3ad0;
  border-radius: 4px;
  background: #fff;
  margin-right: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.remember-checkbox .checkmark::after {
  content: "✓";
  position: absolute;
  display: none;
  left: 3px;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.remember-checkbox input:checked ~ .checkmark {
  background-color: #6d3ad0;
  border-color: #6d3ad0;
}

.remember-checkbox input:checked ~ .checkmark::after {
  display: block;
}

.remember-checkbox .label-text {
  color: #64748b;
  font-weight: normal;
}

.remember-checkbox:hover .checkmark {
  border-color: #7c5cfc;
}

.remember-checkbox input:checked ~ .checkmark:hover {
  background-color: #7c5cfc;
  border-color: #7c5cfc;
}

/* ── Checkbox Basic Visibility Fix ─────── */
.checkbox.checkbox-primary {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 5px;
  gap: 8px;
}

.checkbox.checkbox-primary input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #6d3ad0;
  flex-shrink: 0;
}

.checkbox.checkbox-primary label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
  line-height: 1.5;
}

.checkbox.checkbox-primary label::before,
.checkbox.checkbox-primary label::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* Force show native checkbox */
.checkbox.checkbox-primary input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #6d3ad0 !important;
}

/* ── Select Option Height Adjustment ─────── */
#contact select {
  height: 38px !important;
  line-height: 1.5 !important;
  padding: .375rem .75rem !important;
  line-height: 1.5;
  padding: .375rem .75rem;
}

#contact .bootstrap-select .dropdown-menu li a {
  padding: 8px 15px;
  line-height: 1.4;
}

#contact .bootstrap-select .btn {
  height: 38px; /* Changed from min-height to fixed height */
  padding: .375rem .75rem; /* Increased padding for better visual */
}

#contact .bootstrap-select .dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}

#contact .bootstrap-select .dropdown-menu li {
  min-height: 32px;
}

#contact .bootstrap-select .dropdown-menu .text {
  line-height: 32px;
  padding: 0 15px;
}

/* ── Pagination Active Button Styling ─────── */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus,
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background: #c8b4ff80 !important;
  background-color: #c8b4ff80 !important;
  color: #742ab7 !important;
  border-color: #c8b4ff80 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ═════════════════════════════════════════════
   SIDEBAR STATE OVERRIDES - Force Distinct Colors
   ═════════════════════════════════════════════ */

/* ACTIVE/CURRENT PAGE - Solid Dark Purple (no children or children collapsed) */
#side-menu > li.active:not(.has-submenu) > a,
#side-menu > li.active.has-submenu > a[aria-expanded="false"],
#side-menu > li.active:not(:has(.nav-second-level.collapse.in)) > a {
  background: #6d28d9 !important;
  border: 1px solid #6d28d9 !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35) !important;
  color: #ffffff !important;
}

#side-menu > li.active:not(.has-submenu) > a .menu-text,
#side-menu > li.active:not(.has-submenu) > a .menu-icon,
#side-menu > li.active:not(.has-submenu) > a .arrow,
#side-menu > li.active.has-submenu > a[aria-expanded="false"] .menu-text,
#side-menu > li.active.has-submenu > a[aria-expanded="false"] .menu-icon,
#side-menu > li.active.has-submenu > a[aria-expanded="false"] .arrow {
  color: #ffffff !important;
}

/* DROPDOWN OPEN (parent has active class and dropdown is expanded) - White with Purple Border */
#side-menu > li.active.has-submenu > a[aria-expanded="true"],
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] {
  background: #ffffff !important;
  border: 2px solid #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
  color: #7c3aed !important;
}

#side-menu > li.active.has-submenu > a[aria-expanded="true"] .menu-text,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .menu-icon,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] .menu-text,
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] .menu-icon,
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] .arrow {
  color: #7c3aed !important;
}

#side-menu > li.active.has-submenu > a[aria-expanded="true"] .menu-icon-img,
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] .menu-icon-img {
  filter: none !important;
  opacity: 1 !important;
}

/* HOVER - Light Purple Tint */
#side-menu li a:hover {
  background: rgba(124, 92, 252, 0.12) !important;
  border: 1px solid rgba(124, 92, 252, 0.25) !important;
  box-shadow: 0 2px 6px rgba(124, 92, 252, 0.08) !important;
  color: #6d28d9 !important;
}

#side-menu li a:hover .menu-text,
#side-menu li a:hover .arrow,
#side-menu li a:hover i.menu-icon {
  color: #6d28d9 !important;
}

#side-menu li a:hover img.menu-icon-img {
  filter: none !important;
  opacity: 1 !important;
}

/* Ensure menu icons are always visible */
#side-menu li a .menu-icon,
#side-menu li a .menu-icon-img,
#side-menu li a i.menu-icon {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* SVG / Image Icon - Only invert on dark backgrounds (active page) */
#side-menu li a.state-active-page .menu-icon-img,
#side-menu li a.state-active-page i.menu-icon {
  filter: none !important;
  opacity: 1 !important;
  color: #5e2a8f !important;
}

/* ═════════════════════════════════════════════
   TABLE CONTAINER FIX - Prevent overflow
   ═════════════════════════════════════════════ */

/* Ensure panel contains the table properly */
.panel_s {
  overflow: hidden !important;
  border-radius: 12px !important;
  padding: 10px !important;
}

.panel_s .panel-body {
  padding: 20px !important;
  overflow-x: auto !important;
}

/* Ensure table stays inside container */
.panel_s .panel-body .table-responsive {
  overflow-x: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Fix table margins inside panel */
.panel_s .panel-body table.dataTable {
  margin: 0 !important;
  width: 100% !important;
}

/* Ensure DataTables wrapper stays inside */
.dataTables_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix table header and cell overflow */
table.dataTable thead th,
table.dataTable tbody td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure the table doesn't extend beyond container */
.table-responsive > .table {
  margin-bottom: 0 !important;
}

/* ACTIVE PAGE - Solid Dark Purple */
#side-menu li a.state-active-page {
  background: #6d28d9 !important;
  border: 1px solid #6d28d9 !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35) !important;
  color: #ffffff !important;
}

#side-menu li a.state-active-page .menu-text,
#side-menu li a.state-active-page .menu-icon,
#side-menu li a.state-active-page .arrow {
  color: #ffffff !important;
}

#side-menu li a.state-active-page .menu-icon-img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* DROPDOWN OPEN - White with Purple Border */
#side-menu li a.state-dropdown-open {
  background: #ffffff !important;
  border: 2px solid #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
  color: #7c3aed !important;
}

#side-menu li a.state-dropdown-open .menu-text,
#side-menu li a.state-dropdown-open .menu-icon,
#side-menu li a.state-dropdown-open .arrow {
  color: #7c3aed !important;
}

/* SVG arrow icon styling when dropdown is open */
#side-menu li a.state-dropdown-open .arrow svg,
#side-menu li a.state-dropdown-open .arrow path,
#side-menu li a.state-dropdown-open .arrow line,
#side-menu li a.state-dropdown-open .arrow polyline,
#side-menu li a[aria-expanded="true"] .arrow svg,
#side-menu li a[aria-expanded="true"] .arrow path,
#side-menu li a[aria-expanded="true"] .arrow line,
#side-menu li a[aria-expanded="true"] .arrow polyline {
  stroke: #7c3aed !important;
  fill: #7c3aed !important;
  color: #7c3aed !important;
}

/* Force arrow icon color for all child elements when dropdown is open */
#side-menu li a.state-dropdown-open .arrow *,
#side-menu li a[aria-expanded="true"] .arrow *,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow *,
#side-menu > li:has(.nav-second-level.collapse.in) > a[aria-expanded="true"] .arrow * {
  color: #7c3aed !important;
  fill: #7c3aed !important;
  stroke: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* Target Font Awesome and other icon fonts in arrow */
#side-menu li a.state-dropdown-open .arrow i,
#side-menu li a.state-dropdown-open .arrow svg,
#side-menu li a.state-dropdown-open .arrow img,
#side-menu li a[aria-expanded="true"] .arrow i,
#side-menu li a[aria-expanded="true"] .arrow svg,
#side-menu li a[aria-expanded="true"] .arrow img {
  color: #7c3aed !important;
  fill: #7c3aed !important;
  stroke: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Specific targeting for Font Awesome chevron in sidebar dropdown */
#side-menu li a.state-dropdown-open .arrow.fa-solid,
#side-menu li a.state-dropdown-open .arrow.fa-chevron-down,
#side-menu li a[aria-expanded="true"] .arrow.fa-solid,
#side-menu li a[aria-expanded="true"] .arrow.fa-chevron-down,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow.fa-solid,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow.fa-chevron-down {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* AGGRESSIVE: Target arrow element directly with all pseudo-elements */
#side-menu li a.state-dropdown-open .arrow,
#side-menu li a[aria-expanded="true"] .arrow,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow {
  color: #7c3aed !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

#side-menu li a.state-dropdown-open .arrow:before,
#side-menu li a.state-dropdown-open .arrow:after,
#side-menu li a[aria-expanded="true"] .arrow:before,
#side-menu li a[aria-expanded="true"] .arrow:after,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow:before,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow:after {
  color: #7c3aed !important;
  border-color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Font Awesome uses ::before for icons - force purple color */
#side-menu li a.state-dropdown-open .arrow[class*="fa-"]:before,
#side-menu li a[aria-expanded="true"] .arrow[class*="fa-"]:before,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow[class*="fa-"]:before,
#side-menu li a.state-dropdown-open .fa-solid:before,
#side-menu li a[aria-expanded="true"] .fa-solid:before,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .fa-solid:before,
#side-menu li a.state-dropdown-open .fa-chevron-down:before,
#side-menu li a[aria-expanded="true"] .fa-chevron-down:before,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .fa-chevron-down:before {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
  --fa-primary-color: #7c3aed !important;
  --fa-secondary-color: #7c3aed !important;
}

/* OVERRIDE: Active sidebar item with open dropdown - force purple arrow */
#side-menu li.active.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu li.active.has-submenu > a.state-dropdown-open .arrow,
#side-menu li.active > a[aria-expanded="true"] .arrow,
#side-menu li.active > a.state-dropdown-open .arrow {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ULTRA SPECIFIC: Override _sidebar.css line 449-452 white color for open dropdowns */
#side-menu li.active.has-submenu > a.state-dropdown-open .arrow.fa-solid,
#side-menu li.active.has-submenu > a.state-dropdown-open .arrow.fa-chevron-down,
#side-menu li.active > a[aria-expanded="true"] .arrow.fa-solid,
#side-menu li.active > a[aria-expanded="true"] .arrow.fa-chevron-down,
#side-menu li.active.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Font Awesome ::before content color override */
#side-menu li.active > a.state-dropdown-open .arrow:before,
#side-menu li.active > a[aria-expanded="true"] .arrow:before,
#side-menu li.active.has-submenu > a.state-dropdown-open .arrow:before,
#side-menu li.active.has-submenu > a[aria-expanded="true"] .arrow:before {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

#side-menu li a.state-dropdown-open .menu-icon-img {
  filter: none !important;
  opacity: 1 !important;
}

/* Prevent icon inversion on dropdown open state */
#side-menu li a.state-dropdown-open .menu-icon-img,
#side-menu li a.state-dropdown-open:hover .menu-icon-img {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

#side-menu li a.state-dropdown-open i.menu-icon,
#side-menu li a.state-dropdown-open:hover i.menu-icon {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force all icons to be visible in dropdown open state - very aggressive */
#side-menu li.has-submenu > a[aria-expanded="true"] .menu-icon-img,
#side-menu li.has-submenu > a[aria-expanded="true"] img.menu-icon,
#side-menu li.has-submenu > a[aria-expanded="true"] i.menu-icon,
#side-menu li.has-submenu > a[aria-expanded="true"] .menu-icon,
#side-menu li a.state-dropdown-open .menu-icon-img,
#side-menu li a.state-dropdown-open img.menu-icon,
#side-menu li a.state-dropdown-open i.menu-icon,
#side-menu li a.state-dropdown-open .menu-icon {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  color: #7c3aed !important;
}

/* FINAL OVERRIDE - Arrow color when dropdown open: FORCE PURPLE */
#side-menu li.active > a.state-dropdown-open .arrow,
#side-menu li.active > a[aria-expanded="true"] .arrow,
#side-menu li.active.has-submenu > a.state-dropdown-open .arrow,
#side-menu li.active.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu li.has-submenu > a.state-dropdown-open .arrow,
#side-menu li.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu > li.active.has-submenu > a[aria-expanded="true"] .arrow,
#side-menu li a.state-dropdown-open .arrow,
#side-menu li a[aria-expanded="true"] .arrow {
  color: #7c3aed !important;
  fill: #7c3aed !important;
  stroke: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Target Font Awesome chevron specifically */
#side-menu li a.state-dropdown-open .fa-chevron-down,
#side-menu li a[aria-expanded="true"] .fa-chevron-down,
#side-menu li a.state-dropdown-open .fa-chevron-down:before,
#side-menu li a[aria-expanded="true"] .fa-chevron-down:before {
  color: #7c3aed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Remove left border from all tables */
table tbody tr td:first-child,
table tbody tr td,
table.dataTable tbody tr td:first-child,
table.dataTable tbody tr td {
  border-left: none !important;
}

table tbody tr,
table.dataTable tbody tr {
  border-left: none !important;
}

/* Authentication page background gradient */
body.login-page {
  background: linear-gradient(160deg, #ece5f8 0%, #ddd4f0 30%, #d0c5ed 60%, #c9bbea 100%) !important;
}