/**
 * Able Pro Theme, Sidebar & Header Stylesheet for Kapix ERP SaaS
 * Colors: Dynamic CSS variables supported by Live Customizer
 */

:root {
  --able-primary: #01C38D;
  --able-primary-rgb: 1, 195, 141;
  --able-primary-dark: #00AA7B;
  --able-primary-light: #E6F9F3;
  --able-secondary: #5B6B79;
  --able-success: #2ca87f;
  --able-warning: #e58a00;
  --able-error: #dc2626;
  --able-info: #3ec9d6;
  --able-bg: #F8F9FA;
  --able-surface: #FFFFFF;
  --able-surface-light: #F8F9FA;
  --able-border: #E8EBEE;
  --able-text-dark: #1D2630;
  --able-text-muted: #5B6B79;
  --able-radius: 8px;
  --able-sidebar-width: 250px;
  --able-card-shadow: 0 8px 24px rgba(19, 25, 32, 0.06);
}

/* ==========================================================================
   DARK MODE CSS VARIABLES
   ========================================================================== */

html.dark-mode,
html[data-theme="dark"],
body.dark-mode,
[data-theme="dark"] {
  --able-bg: #0B0E14 !important;
  --able-surface: #141822 !important;
  --able-surface-light: #0F131C !important;
  --able-border: rgba(255, 255, 255, 0.08) !important;
  --able-text-dark: #FFFFFF !important;
  --able-text-muted: #8B98A5 !important;
  --able-primary-light: rgba(var(--able-primary-rgb, 1, 195, 141), 0.15);
  --able-radius: 16px !important;
  --able-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  background-color: #0B0E14 !important;
  color: #FFFFFF !important;
}

/* Global Typography & Layout */
html {
  background-color: var(--able-bg, #F8F9FA) !important;
  min-height: 100% !important;
}

html.dark-mode,
html[data-theme="dark"] {
  background-color: #0B0E14 !important;
}

body,
button,
input,
select,
textarea {
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body,
body.admin,
body.h-full {
  background-color: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
  min-height: 100% !important;
  height: auto !important;
}

body.dark-mode,
body[data-theme="dark"] {
  background-color: #0B0E14 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6 {
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--able-text-dark) !important;
  letter-spacing: -0.2px !important;
}

h3,
.text-h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

h4,
.text-h4 {
  font-size: 22px !important;
  font-weight: 600 !important;
}

h5,
.text-h5 {
  font-size: 16px !important;
  font-weight: 600 !important;
}

h6,
.text-h6,
.text-subtitle-1 {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.text-subtitle-2 {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.text-lightText {
  color: var(--able-text-muted, #5B6B79) !important;
}

.text-darkText,
.text-dark {
  color: var(--able-text-dark, #1D2630) !important;
}

.text-muted,
.text-medium-emphasis {
  color: var(--able-text-muted, #5B6B79) !important;
}

/* UNIVERSAL DARK MODE TEXT CONTRAST ENFORCEMENT */
html.dark-mode,
html[data-theme="dark"],
body.dark-mode,
[data-theme="dark"] {
  --able-text-dark: #FFFFFF !important;
  --able-text-muted: #8B98A5 !important;
}

html.dark-mode .text-darkText,
html.dark-mode .text-dark,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .text-h1,
html.dark-mode .text-h2,
html.dark-mode .text-h3,
html.dark-mode .text-h4,
html.dark-mode .text-h5,
html.dark-mode .text-h6,
html.dark-mode .text-subtitle-1,
html.dark-mode .text-subtitle-2,
html.dark-mode .v-card-title,
html.dark-mode .v-card-text h5,
html.dark-mode .v-card-text h6,
html.dark-mode .v-list-item-title,
html[data-theme="dark"] .text-darkText,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-h1,
html[data-theme="dark"] .text-h2,
html[data-theme="dark"] .text-h3,
html[data-theme="dark"] .text-h4,
html[data-theme="dark"] .text-h5,
html[data-theme="dark"] .text-h6,
html[data-theme="dark"] .text-subtitle-1,
html[data-theme="dark"] .text-subtitle-2,
html[data-theme="dark"] .v-card-title,
html[data-theme="dark"] .v-card-text h5,
html[data-theme="dark"] .v-card-text h6,
html[data-theme="dark"] .v-list-item-title {
  color: #E8EBEE !important;
}

html.dark-mode .text-muted,
html.dark-mode .text-medium-emphasis,
html.dark-mode .text-lightText,
html.dark-mode .text-caption,
html.dark-mode .v-list-item-subtitle,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-medium-emphasis,
html[data-theme="dark"] .text-lightText,
html[data-theme="dark"] .text-caption,
html[data-theme="dark"] .v-list-item-subtitle {
  color: #8C99A5 !important;
}

/* ==========================================================================
   ABLE PRO PRIMARY BUTTONS - LIGHT MODE DYNAMIC
   ========================================================================== */

.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
.v-btn.bg-primary,
.v-btn--variant-flat.bg-primary,
.v-btn--variant-elevated.bg-primary,
.btn-bottom-toolbar .btn-primary,
.modal-footer .btn-primary,
.table.items tr.main td button.btn-primary {
  background: linear-gradient(135deg, var(--able-primary, #01C38D) 0%, color-mix(in srgb, var(--able-primary, #01C38D) 80%, #000) 100%) !important;
  background-size: 100% 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
input[type="submit"].btn-primary:hover,
.v-btn.bg-primary:hover,
.btn-bottom-toolbar .btn-primary:hover,
.modal-footer .btn-primary:hover,
.table.items tr.main td button.btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--able-primary, #01C38D) 85%, #fff) 0%, var(--able-primary, #01C38D) 45%, color-mix(in srgb, var(--able-primary, #01C38D) 78%, #000) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 6px 20px rgba(var(--able-primary-rgb, 1, 195, 141), 0.5) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

.btn-primary:active,
.btn-primary.active,
button.btn-primary:active,
a.btn-primary:active,
input[type="submit"].btn-primary:active,
.v-btn.bg-primary:active,
.btn-bottom-toolbar .btn-primary:active,
.modal-footer .btn-primary:active {
  background: color-mix(in srgb, var(--able-primary, #01C38D) 85%, #000) !important;
  box-shadow: 0 2px 6px rgba(var(--able-primary-rgb, 1, 195, 141), 0.3) !important;
  transform: translateY(0) !important;
  color: #FFFFFF !important;
}

.btn-primary:focus,
button.btn-primary:focus,
a.btn-primary:focus,
input[type="submit"].btn-primary:focus,
.v-btn.bg-primary:focus {
  box-shadow: 0 0 0 3px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35), 0 4px 14px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35) !important;
  outline: none !important;
  color: #FFFFFF !important;
}

.btn-group>.btn-primary:first-child:not(:last-child),
.btn-bottom-toolbar .btn-group>.btn-primary:first-child:not(:last-child) {
  border-radius: 10px 0 0 10px !important;
}

.btn-group>.btn-primary+.dropdown-toggle,
.btn-bottom-toolbar .btn-group>.dropdown-toggle {
  background: linear-gradient(135deg, var(--able-primary, #01C38D) 0%, color-mix(in srgb, var(--able-primary, #01C38D) 80%, #000) 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 4px 14px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   ABLE PRO PRIMARY BUTTONS - DARK MODE (OBSIDIAN GLASS DYNAMIC)
   ========================================================================== */

html.dark-mode .btn-primary,
html.dark-mode button.btn-primary,
html.dark-mode a.btn-primary,
html.dark-mode input[type="submit"].btn-primary,
html.dark-mode .v-btn.bg-primary,
html.dark-mode .v-btn--variant-flat.bg-primary,
html.dark-mode .v-btn--variant-elevated.bg-primary,
html.dark-mode .btn-bottom-toolbar .btn-primary,
html.dark-mode .modal-footer .btn-primary,
html.dark-mode .table.items tr.main td button.btn-primary,
body.dark-mode .btn-primary,
body.dark-mode button.btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode input[type="submit"].btn-primary,
body.dark-mode .v-btn.bg-primary,
body.dark-mode .btn-bottom-toolbar .btn-primary,
body.dark-mode .modal-footer .btn-primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] input[type="submit"].btn-primary,
[data-theme="dark"] .v-btn.bg-primary,
[data-theme="dark"] .v-btn--variant-flat.bg-primary,
[data-theme="dark"] .v-btn--variant-elevated.bg-primary,
[data-theme="dark"] .btn-bottom-toolbar .btn-primary,
[data-theme="dark"] .modal-footer .btn-primary,
[data-theme="dark"] .table.items tr.main td button.btn-primary {
  background: linear-gradient(135deg, var(--able-primary, #01C38D) 0%, color-mix(in srgb, var(--able-primary, #01C38D) 78%, #000) 100%) !important;
  background-color: var(--able-primary, #01C38D) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .btn-primary i,
html.dark-mode button.btn-primary i,
html.dark-mode a.btn-primary i,
html.dark-mode .v-btn.bg-primary i,
html.dark-mode .v-btn.bg-primary .v-icon,
html.dark-mode .btn-bottom-toolbar .btn-primary i,
html.dark-mode .modal-footer .btn-primary i,
[data-theme="dark"] .btn-primary i,
[data-theme="dark"] button.btn-primary i,
[data-theme="dark"] a.btn-primary i,
[data-theme="dark"] .v-btn.bg-primary i,
[data-theme="dark"] .v-btn.bg-primary .v-icon,
[data-theme="dark"] .btn-bottom-toolbar .btn-primary i,
[data-theme="dark"] .modal-footer .btn-primary i {
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}

html.dark-mode .btn-primary:hover,
html.dark-mode button.btn-primary:hover,
html.dark-mode a.btn-primary:hover,
html.dark-mode .v-btn.bg-primary:hover,
html.dark-mode .btn-bottom-toolbar .btn-primary:hover,
html.dark-mode .modal-footer .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover,
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] .v-btn.bg-primary:hover,
[data-theme="dark"] .btn-bottom-toolbar .btn-primary:hover,
[data-theme="dark"] .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--able-primary, #01C38D) 85%, #fff) 0%, var(--able-primary, #01C38D) 45%, color-mix(in srgb, var(--able-primary, #01C38D) 75%, #000) 100%) !important;
  background-color: var(--able-primary, #01C38D) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 6px 22px rgba(var(--able-primary-rgb, 1, 195, 141), 0.48) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

html.dark-mode .btn-primary:hover i,
html.dark-mode button.btn-primary:hover i,
html.dark-mode a.btn-primary:hover i,
html.dark-mode .v-btn.bg-primary:hover i,
html.dark-mode .v-btn.bg-primary .v-icon,
[data-theme="dark"] .btn-primary:hover i,
[data-theme="dark"] button.btn-primary:hover i,
[data-theme="dark"] a.btn-primary:hover i,
[data-theme="dark"] .v-btn.bg-primary:hover i,
[data-theme="dark"] .v-btn.bg-primary .v-icon {
  color: #FFFFFF !important;
}

html.dark-mode .btn-primary:active,
html.dark-mode .btn-primary.active,
html.dark-mode .v-btn.bg-primary:active,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active,
[data-theme="dark"] .v-btn.bg-primary:active {
  background: color-mix(in srgb, var(--able-primary, #01C38D) 82%, #000) !important;
  background-color: color-mix(in srgb, var(--able-primary, #01C38D) 82%, #000) !important;
  border-color: rgba(var(--able-primary-rgb, 1, 195, 141), 0.5) !important;
  box-shadow: 0 2px 8px rgba(var(--able-primary-rgb, 1, 195, 141), 0.25) !important;
  transform: translateY(0) !important;
  color: #FFFFFF !important;
}

html.dark-mode .btn-group>.btn-primary+.dropdown-toggle,
html.dark-mode .btn-bottom-toolbar .btn-group>.dropdown-toggle,
[data-theme="dark"] .btn-group>.btn-primary+.dropdown-toggle,
[data-theme="dark"] .btn-bottom-toolbar .btn-group>.dropdown-toggle {
  background: linear-gradient(135deg, var(--able-primary, #01C38D) 0%, color-mix(in srgb, var(--able-primary, #01C38D) 78%, #000) 100%) !important;
  background-color: var(--able-primary, #01C38D) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 0 4px 18px rgba(var(--able-primary-rgb, 1, 195, 141), 0.35) !important;
  color: #FFFFFF !important;
}

/* Outline primary button with subtle glowing border & background */
.btn-outline-primary,
.v-btn--variant-outlined.text-primary {
  border: 1px solid rgba(var(--able-primary-rgb, 1, 195, 141), 0.45) !important;
  background: rgba(var(--able-primary-rgb, 1, 195, 141), 0.08) !important;
  color: var(--able-primary, #01C38D) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-outline-primary:hover,
.v-btn--variant-outlined.text-primary:hover {
  background: linear-gradient(135deg, rgba(var(--able-primary-rgb, 1, 195, 141), 0.25) 0%, rgba(var(--able-primary-rgb, 1, 195, 141), 0.1) 100%) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 4px 16px rgba(var(--able-primary-rgb, 1, 195, 141), 0.25) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   ABLE PRO DARK THEME INPUTS, CARDS & LIST ITEM HOVERS
   ========================================================================== */

/* Todos & Dashboard Inputs in Dark Mode */
html.dark-mode .able-todo-input .v-field,
html.dark-mode .able-todo-input .v-field input,
html.dark-mode .able-todo-input input,
body.dark-mode .able-todo-input .v-field,
body.dark-mode .able-todo-input .v-field input,
body.dark-mode .able-todo-input input,
[data-theme="dark"] .able-todo-input .v-field,
[data-theme="dark"] .able-todo-input .v-field input,
[data-theme="dark"] .able-todo-input input,
html.dark-mode .todos-quick-input .v-field,
html.dark-mode .todos-quick-input input,
body.dark-mode .todos-quick-input .v-field,
body.dark-mode .todos-quick-input input,
[data-theme="dark"] .todos-quick-input .v-field,
[data-theme="dark"] .todos-quick-input input,
html.dark-mode .todos-search-field .v-field,
html.dark-mode .todos-search-field input,
body.dark-mode .todos-search-field .v-field,
body.dark-mode .todos-search-field input,
[data-theme="dark"] .todos-search-field .v-field,
[data-theme="dark"] .todos-search-field input {
  background-color: #0F131C !important;
  background: #0F131C !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-todo-input input::placeholder,
body.dark-mode .able-todo-input input::placeholder,
[data-theme="dark"] .able-todo-input input::placeholder,
html.dark-mode .todos-quick-input input::placeholder,
body.dark-mode .todos-quick-input input::placeholder,
[data-theme="dark"] .todos-quick-input input::placeholder,
html.dark-mode .todos-search-field input::placeholder,
body.dark-mode .todos-search-field input::placeholder,
[data-theme="dark"] .todos-search-field input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

html.dark-mode .able-todo-input .v-field__outline,
body.dark-mode .able-todo-input .v-field__outline,
[data-theme="dark"] .able-todo-input .v-field__outline,
html.dark-mode .todos-quick-input .v-field__outline,
body.dark-mode .todos-quick-input .v-field__outline,
[data-theme="dark"] .todos-quick-input .v-field__outline,
html.dark-mode .todos-search-field .v-field__outline,
body.dark-mode .todos-search-field .v-field__outline,
[data-theme="dark"] .todos-search-field .v-field__outline {
  display: none !important;
}

html.dark-mode .able-todo-input .v-field--focused,
body.dark-mode .able-todo-input .v-field--focused,
[data-theme="dark"] .able-todo-input .v-field--focused,
html.dark-mode .todos-quick-input .v-field--focused,
body.dark-mode .todos-quick-input .v-field--focused,
[data-theme="dark"] .todos-quick-input .v-field--focused,
html.dark-mode .todos-search-field .v-field--focused,
body.dark-mode .todos-search-field .v-field--focused,
[data-theme="dark"] .todos-search-field .v-field--focused {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px rgba(var(--able-primary-rgb, 1, 195, 141), 0.25) !important;
}

/* Dashboard List Items & Calendar Hover States in Dark Mode */
html.dark-mode .able-activity-item:hover,
html.dark-mode .able-todo-item:hover,
html.dark-mode .able-project-item:hover,
html.dark-mode .widget-day-cell:hover,
body.dark-mode .able-activity-item:hover,
body.dark-mode .able-todo-item:hover,
body.dark-mode .able-project-item:hover,
body.dark-mode .widget-day-cell:hover,
[data-theme="dark"] .able-activity-item:hover,
[data-theme="dark"] .able-todo-item:hover,
[data-theme="dark"] .able-project-item:hover,
[data-theme="dark"] .widget-day-cell:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-activity-item:hover .v-list-item-title,
html.dark-mode .able-todo-item:hover .v-list-item-title,
html.dark-mode .able-project-item:hover .v-list-item-title,
body.dark-mode .able-activity-item:hover .v-list-item-title,
body.dark-mode .able-todo-item:hover .v-list-item-title,
body.dark-mode .able-project-item:hover .v-list-item-title,
[data-theme="dark"] .able-activity-item:hover .v-list-item-title,
[data-theme="dark"] .able-todo-item:hover .v-list-item-title,
[data-theme="dark"] .able-project-item:hover .v-list-item-title {
  color: #FFFFFF !important;
}

html.dark-mode .able-activity-item:hover .v-list-item-subtitle,
html.dark-mode .able-todo-item:hover .v-list-item-subtitle,
html.dark-mode .able-project-item:hover .v-list-item-subtitle,
body.dark-mode .able-activity-item:hover .v-list-item-subtitle,
body.dark-mode .able-todo-item:hover .v-list-item-subtitle,
body.dark-mode .able-project-item:hover .v-list-item-subtitle,
[data-theme="dark"] .able-activity-item:hover .v-list-item-subtitle,
[data-theme="dark"] .able-todo-item:hover .v-list-item-subtitle,
[data-theme="dark"] .able-project-item:hover .v-list-item-subtitle {
  color: #8C99A5 !important;
}


/* ==========================================================================
   ABLE PRO AMBIENT LIQUID & WALLPAPER BACKGROUND SYSTEM
   ========================================================================== */

:root {
  /* Default Liquid: Emerald Circles (Dark) */
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(1, 195, 141, 0.65) 0%, rgba(1, 195, 141, 0.35) 45%, rgba(1, 195, 141, 0.08) 65%, transparent 72%);
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(0, 210, 255, 0.55) 0%, rgba(0, 210, 255, 0.28) 45%, rgba(0, 210, 255, 0.06) 65%, transparent 72%);
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.50) 0%, rgba(16, 185, 129, 0.25) 45%, rgba(16, 185, 129, 0.05) 65%, transparent 72%);
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(6, 95, 70, 0.60) 0%, rgba(6, 95, 70, 0.30) 45%, rgba(6, 95, 70, 0.08) 65%, transparent 72%);
  --able-custom-bg-img: none;
  --able-bg-image-blur: 0px;
  --able-bg-image-opacity: 0.85;
}

/* Light Mode Defaults for Emerald Circles */
html:not(.dark-mode):not([data-theme="dark"])[data-liquid-bg="emerald"],
body:not(.dark-mode):not([data-theme="dark"])[data-liquid-bg="emerald"],
html:not(.dark-mode):not([data-theme="dark"]):not([data-liquid-bg]),
body:not(.dark-mode):not([data-theme="dark"]):not([data-liquid-bg]) {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(1, 195, 141, 0.42) 0%, rgba(1, 195, 141, 0.20) 45%, rgba(1, 195, 141, 0.04) 65%, transparent 72%);
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.38) 0%, rgba(56, 189, 248, 0.18) 45%, rgba(56, 189, 248, 0.04) 65%, transparent 72%);
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(110, 231, 183, 0.35) 0%, rgba(110, 231, 183, 0.16) 45%, rgba(110, 231, 183, 0.04) 65%, transparent 72%);
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.32) 0%, rgba(14, 165, 233, 0.14) 45%, rgba(14, 165, 233, 0.03) 65%, transparent 72%);
}

/* PRESET: AURORA CIRCLES (Dark) */
html.dark-mode[data-liquid-bg="aurora"],
html[data-theme="dark"][data-liquid-bg="aurora"],
body[data-liquid-bg="aurora"],
[data-liquid-bg="aurora"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.65) 0%, rgba(124, 58, 237, 0.35) 45%, rgba(124, 58, 237, 0.08) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(1, 195, 141, 0.58) 0%, rgba(1, 195, 141, 0.30) 45%, rgba(1, 195, 141, 0.06) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.52) 0%, rgba(79, 70, 229, 0.26) 45%, rgba(79, 70, 229, 0.05) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.48) 0%, rgba(236, 72, 153, 0.24) 45%, rgba(236, 72, 153, 0.05) 65%, transparent 72%) !important;
}

/* PRESET: AURORA CIRCLES (Light) */
html:not(.dark-mode)[data-liquid-bg="aurora"],
html[data-theme="light"][data-liquid-bg="aurora"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.40) 0%, rgba(167, 139, 250, 0.20) 45%, rgba(167, 139, 250, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.38) 0%, rgba(52, 211, 153, 0.18) 45%, rgba(52, 211, 153, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.32) 0%, rgba(129, 140, 248, 0.16) 45%, rgba(129, 140, 248, 0.03) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.30) 0%, rgba(244, 114, 182, 0.14) 45%, rgba(244, 114, 182, 0.03) 65%, transparent 72%) !important;
}

/* PRESET: OCEAN CIRCLES (Dark) */
html.dark-mode[data-liquid-bg="ocean"],
html[data-theme="dark"][data-liquid-bg="ocean"],
body[data-liquid-bg="ocean"],
[data-liquid-bg="ocean"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.65) 0%, rgba(14, 165, 233, 0.35) 45%, rgba(14, 165, 233, 0.08) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.58) 0%, rgba(37, 99, 235, 0.30) 45%, rgba(37, 99, 235, 0.06) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.50) 0%, rgba(6, 182, 212, 0.25) 45%, rgba(6, 182, 212, 0.05) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.60) 0%, rgba(30, 58, 138, 0.30) 45%, rgba(30, 58, 138, 0.08) 65%, transparent 72%) !important;
}

/* PRESET: OCEAN CIRCLES (Light) */
html:not(.dark-mode)[data-liquid-bg="ocean"],
html[data-theme="light"][data-liquid-bg="ocean"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.40) 0%, rgba(56, 189, 248, 0.20) 45%, rgba(56, 189, 248, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.36) 0%, rgba(96, 165, 250, 0.18) 45%, rgba(96, 165, 250, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(103, 232, 249, 0.32) 0%, rgba(103, 232, 249, 0.15) 45%, rgba(103, 232, 249, 0.03) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.28) 0%, rgba(147, 197, 253, 0.14) 45%, rgba(147, 197, 253, 0.03) 65%, transparent 72%) !important;
}

/* PRESET: SUNSET CIRCLES (Dark) */
html.dark-mode[data-liquid-bg="sunset"],
html[data-theme="dark"][data-liquid-bg="sunset"],
body[data-liquid-bg="sunset"],
[data-liquid-bg="sunset"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.65) 0%, rgba(249, 115, 22, 0.35) 45%, rgba(249, 115, 22, 0.08) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.58) 0%, rgba(236, 72, 153, 0.30) 45%, rgba(236, 72, 153, 0.06) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.50) 0%, rgba(168, 85, 247, 0.25) 45%, rgba(168, 85, 247, 0.05) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(154, 52, 18, 0.60) 0%, rgba(154, 52, 18, 0.30) 45%, rgba(154, 52, 18, 0.08) 65%, transparent 72%) !important;
}

/* PRESET: SUNSET CIRCLES (Light) */
html:not(.dark-mode)[data-liquid-bg="sunset"],
html[data-theme="light"][data-liquid-bg="sunset"] {
  --able-liquid-orb-1: radial-gradient(circle at 50% 50%, rgba(251, 146, 60, 0.40) 0%, rgba(251, 146, 60, 0.20) 45%, rgba(251, 146, 60, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-2: radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.36) 0%, rgba(244, 114, 182, 0.18) 45%, rgba(244, 114, 182, 0.04) 65%, transparent 72%) !important;
  --able-liquid-orb-3: radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.30) 0%, rgba(192, 132, 252, 0.15) 45%, rgba(192, 132, 252, 0.03) 65%, transparent 72%) !important;
  --able-liquid-orb-4: radial-gradient(circle at 50% 50%, rgba(253, 186, 116, 0.28) 0%, rgba(253, 186, 116, 0.14) 45%, rgba(253, 186, 116, 0.03) 65%, transparent 72%) !important;
}

/* Background Container */
.able-ambient-liquid-bg {
  position: fixed !important;
  inset: -15px !important;
  top: -15px !important;
  left: -15px !important;
  right: -15px !important;
  bottom: -15px !important;
  width: calc(100vw + 30px) !important;
  height: calc(100vh + 30px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  isolation: isolate !important;
  contain: none !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

html.dark-mode .able-ambient-liquid-bg,
html[data-theme="dark"] .able-ambient-liquid-bg,
body.dark-mode .able-ambient-liquid-bg,
body[data-theme="dark"] .able-ambient-liquid-bg {
  background-color: #0B0E14 !important;
}

/* Hide orbs and curtains if liquid bg is none */
html[data-liquid-bg="none"] .able-liquid-orb,
body[data-liquid-bg="none"] .able-liquid-orb,
html[data-liquid-bg="none"] .able-aurora-curtain,
body[data-liquid-bg="none"] .able-aurora-curtain {
  display: none !important;
}

/* When aurora-flow or ocean-flow is active, hide circular orbs so the undulating aurora ribbons shine cleanly */
html[data-liquid-bg="aurora-flow"] .able-liquid-orb,
body[data-liquid-bg="aurora-flow"] .able-liquid-orb,
html[data-liquid-bg="ocean-flow"] .able-liquid-orb,
body[data-liquid-bg="ocean-flow"] .able-liquid-orb {
  display: none !important;
}

/* Custom Orbs Dynamic Display & Direct Variable Bindings */
html[data-liquid-bg="custom"] .able-liquid-orb,
body[data-liquid-bg="custom"] .able-liquid-orb,
[data-liquid-bg="custom"] .able-liquid-orb {
  display: block !important;
  opacity: 0.95 !important;
}

html[data-liquid-bg="custom"] .able-aurora-curtain,
body[data-liquid-bg="custom"] .able-aurora-curtain,
[data-liquid-bg="custom"] .able-aurora-curtain {
  display: none !important;
}

html[data-liquid-bg="custom"] .able-liquid-orb.able-orb-1,
body[data-liquid-bg="custom"] .able-liquid-orb.able-orb-1,
[data-liquid-bg="custom"] .able-orb-1 {
  display: block !important;
  background: var(--able-liquid-orb-1) !important;
}

html[data-liquid-bg="custom"] .able-liquid-orb.able-orb-2,
body[data-liquid-bg="custom"] .able-liquid-orb.able-orb-2,
[data-liquid-bg="custom"] .able-orb-2 {
  display: block !important;
  background: var(--able-liquid-orb-2) !important;
}

html[data-liquid-bg="custom"] .able-liquid-orb.able-orb-3,
body[data-liquid-bg="custom"] .able-liquid-orb.able-orb-3,
[data-liquid-bg="custom"] .able-orb-3 {
  display: block !important;
  background: var(--able-liquid-orb-3) !important;
}

html[data-liquid-bg="custom"] .able-liquid-orb.able-orb-4,
body[data-liquid-bg="custom"] .able-liquid-orb.able-orb-4,
[data-liquid-bg="custom"] .able-orb-4 {
  display: block !important;
  background: var(--able-liquid-orb-4) !important;
}

/* Custom Image Wallpaper Layer */
.able-liquid-image-layer {
  position: absolute;
  inset: -20px;
  background-image: var(--able-custom-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--able-bg-image-opacity, 0.85);
  filter: blur(var(--able-bg-image-blur, 0px));
  -webkit-filter: blur(var(--able-bg-image-blur, 0px));
  transition: opacity 0.4s ease, filter 0.4s ease, background-image 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

html:not(.has-custom-bg-img) .able-liquid-image-layer,
body:not(.has-custom-bg-img) .able-liquid-image-layer {
  display: none;
}

html.has-custom-bg-img .able-liquid-image-layer,
body.has-custom-bg-img .able-liquid-image-layer {
  display: block;
}

/*/* ==========================================================================
   ANIMATED AURORA CURTAINS (NORTHERN LIGHTS EFFECT)
   ========================================================================== */

.able-aurora-curtain {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  filter: blur(65px);
  -webkit-filter: blur(65px);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  transition: opacity 0.6s ease;
  display: none;
  /* Only displayed when an animated wave/flow mode is selected! */
}

/* Activate curtains for aurora-flow */
html[data-liquid-bg="aurora-flow"] .able-aurora-curtain,
body[data-liquid-bg="aurora-flow"] .able-aurora-curtain {
  display: block !important;
}

html[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-1,
body[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-1 {
  background: radial-gradient(ellipse 75% 55% at 35% 0%, #00ffb3 0%, rgba(0, 255, 179, 0.55) 45%, transparent 75%);
  animation: auroraStream1 15s ease-in-out infinite alternate;
  opacity: 0.9;
}

html[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-2,
body[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-2 {
  background: radial-gradient(ellipse 70% 50% at 80% 15%, #8b5cf6 0%, rgba(139, 92, 246, 0.6) 45%, transparent 80%);
  animation: auroraStream2 18s ease-in-out infinite alternate;
  opacity: 0.9;
}

html[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-3,
body[data-liquid-bg="aurora-flow"] .able-aurora-curtain.able-curtain-3 {
  background: radial-gradient(ellipse 80% 45% at 20% 30%, #00e5ff 0%, rgba(217, 70, 239, 0.45) 50%, transparent 75%);
  animation: auroraStream3 22s ease-in-out infinite alternate;
  opacity: 0.85;
}

/* Activate curtains for ocean-flow */
html[data-liquid-bg="ocean-flow"] .able-aurora-curtain,
body[data-liquid-bg="ocean-flow"] .able-aurora-curtain {
  display: block !important;
}

html[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-1,
body[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-1 {
  background: radial-gradient(ellipse 75% 50% at 25% 0%, #00f0ff 0%, rgba(0, 240, 255, 0.5) 45%, transparent 75%);
  animation: auroraStream1 16s ease-in-out infinite alternate;
  opacity: 0.85;
}

html[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-2,
body[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-2 {
  background: radial-gradient(ellipse 70% 55% at 75% 15%, #2563eb 0%, rgba(37, 99, 235, 0.55) 45%, transparent 80%);
  animation: auroraStream2 20s ease-in-out infinite alternate;
  opacity: 0.85;
}

html[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-3,
body[data-liquid-bg="ocean-flow"] .able-aurora-curtain.able-curtain-3 {
  background: radial-gradient(ellipse 65% 45% at 50% 30%, #06b6d4 0%, rgba(30, 58, 138, 0.5) 50%, transparent 75%);
  animation: auroraStream3 18s ease-in-out infinite alternate-reverse;
  opacity: 0.85;
}

/* Aurora Fluid Undulating Keyframes */
@keyframes auroraStream1 {
  0% {
    transform: translate3d(-10%, -5%, 0) rotate(-4deg) scaleY(1);
  }

  50% {
    transform: translate3d(15%, 8%, 0) rotate(5deg) scaleY(1.3);
  }

  100% {
    transform: translate3d(-6%, 15%, 0) rotate(-2deg) scaleY(0.95);
  }
}

@keyframes auroraStream2 {
  0% {
    transform: translate3d(12%, 0, 0) rotate(6deg) scale(1);
  }

  50% {
    transform: translate3d(-18%, -10%, 0) rotate(-5deg) scale(1.25);
  }

  100% {
    transform: translate3d(10%, 12%, 0) rotate(3deg) scale(0.9);
  }
}

@keyframes auroraStream3 {
  0% {
    transform: translate3d(0, -10%, 0) skewX(-8deg) scaleX(1);
  }

  50% {
    transform: translate3d(18%, 6%, 0) skewX(10deg) scaleX(1.22);
  }

  100% {
    transform: translate3d(-15%, 12%, 0) skewX(-5deg) scaleX(0.9);
  }
}

/* ==========================================================================
   CÍRCULOS FLOTANTES / ORBS LÍQUIDOS (ESFERAS DIFUSAS)
   ========================================================================== */

.able-liquid-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  -webkit-filter: blur(34px);
  transform: translate3d(0, 0, 0);
  will-change: transform, border-radius;
  pointer-events: none;
  z-index: 3;
  transition: background 0.4s ease, opacity 0.4s ease;
  opacity: 0.95;
}

/* Hide orbs if liquid bg is none */
html[data-liquid-bg="none"] .able-liquid-orb,
body[data-liquid-bg="none"] .able-liquid-orb {
  display: none !important;
}

.able-liquid-orb.able-orb-1 {
  top: 2%;
  left: 5%;
  width: clamp(340px, 32vw, 480px);
  height: clamp(340px, 32vw, 480px);
  background: var(--able-liquid-orb-1);
  animation: ableLiquidFloat1 18s ease-in-out infinite alternate;
}

.able-liquid-orb.able-orb-2 {
  top: 10%;
  right: 4%;
  width: clamp(360px, 34vw, 520px);
  height: clamp(360px, 34vw, 520px);
  background: var(--able-liquid-orb-2);
  animation: ableLiquidFloat2 22s ease-in-out infinite alternate;
}

.able-liquid-orb.able-orb-3 {
  bottom: 4%;
  left: 10%;
  width: clamp(320px, 30vw, 460px);
  height: clamp(320px, 30vw, 460px);
  background: var(--able-liquid-orb-3);
  animation: ableLiquidFloat3 20s ease-in-out infinite alternate;
}

.able-liquid-orb.able-orb-4 {
  bottom: 12%;
  right: 10%;
  width: clamp(280px, 26vw, 400px);
  height: clamp(280px, 26vw, 400px);
  background: var(--able-liquid-orb-4);
  animation: ableLiquidFloat1 16s ease-in-out infinite alternate-reverse;
}

/* Organic Liquid Morphing Keyframe Animations for Orbs */
@keyframes ableLiquidFloat1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 50% 50% 50% 50%;
  }

  33% {
    transform: translate3d(35px, 25px, 0) scale(1.06) rotate(10deg);
    border-radius: 58% 42% 63% 37% / 48% 60% 40% 52%;
  }

  66% {
    transform: translate3d(-25px, 40px, 0) scale(0.96) rotate(-8deg);
    border-radius: 42% 58% 35% 65% / 62% 44% 56% 38%;
  }

  100% {
    transform: translate3d(-35px, 20px, 0) scale(1.02) rotate(4deg);
    border-radius: 52% 48% 58% 42% / 45% 55% 45% 55%;
  }
}

@keyframes ableLiquidFloat2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 50% 50% 50% 50%;
  }

  33% {
    transform: translate3d(-40px, -25px, 0) scale(1.05) rotate(-12deg);
    border-radius: 42% 58% 46% 54% / 56% 40% 60% 44%;
  }

  66% {
    transform: translate3d(25px, 35px, 0) scale(0.96) rotate(10deg);
    border-radius: 60% 40% 55% 45% / 44% 62% 38% 56%;
  }

  100% {
    transform: translate3d(20px, 15px, 0) scale(1.02) rotate(-4deg);
    border-radius: 48% 52% 45% 55% / 52% 48% 54% 46%;
  }
}

@keyframes ableLiquidFloat3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 50% 50% 50% 50%;
  }

  33% {
    transform: translate3d(40px, -35px, 0) scale(1.08) rotate(14deg);
    border-radius: 54% 46% 65% 35% / 40% 58% 42% 60%;
  }

  66% {
    transform: translate3d(-30px, -15px, 0) scale(0.93) rotate(-10deg);
    border-radius: 40% 60% 36% 64% / 62% 40% 60% 38%;
  }

  100% {
    transform: translate3d(-20px, -10px, 0) scale(1.03) rotate(6deg);
    border-radius: 50% 50% 52% 48% / 48% 52% 46% 54%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .able-liquid-orb,
  .able-aurora-curtain {
    animation: none !important;
  }
}

/* Glassmorphism enhancement for cards when liquid bg or wallpaper is active */
html.has-liquid-bg .panel_s,
html.has-liquid-bg .card,
html.has-liquid-bg .v-card:not(.v-card--flat),
html.has-custom-bg-img .panel_s,
html.has-custom-bg-img .card,
html.has-custom-bg-img .v-card:not(.v-card--flat) {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#wrapper {
  background-color: transparent !important;
  margin-left: var(--able-sidebar-width) !important;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-liquid-bg="none"]:not(.has-custom-bg-img)[data-bg-pattern="none"] #wrapper {
  background-color: var(--able-bg) !important;
}

/* Header */
#header,
.able-pro-header {
  background: var(--able-surface) !important;
  border-bottom: 1px solid var(--able-border) !important;
  box-shadow: none !important;
  height: 74px !important;
  margin-left: var(--able-sidebar-width) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSE & EXPAND (DESKTOP & MOBILE)
   ========================================================================== */

body.hide-sidebar:not(.show-sidebar) #menu,
body.hide-sidebar:not(.show-sidebar) .able-pro-sidebar {
  transform: translateX(-100%) !important;
}

body.hide-sidebar:not(.show-sidebar) #wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

body.hide-sidebar:not(.show-sidebar) #header,
body.hide-sidebar:not(.show-sidebar) .able-pro-header {
  margin-left: 0 !important;
  width: 100% !important;
}

body.hide-sidebar:not(.show-sidebar) .btn-bottom-toolbar {
  margin-left: 0 !important;
  width: 100% !important;
}

.able-sidebar-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.able-sidebar-toggle:hover {
  background: var(--able-border) !important;
  color: var(--able-primary) !important;
}

.able-header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-left: 16px !important;
}

/* Header Search */
.able-header-left {
  display: flex !important;
  align-items: center !important;
}

.able-search-wrapper {
  position: relative !important;
}

.able-search-input-box {
  display: flex !important;
  align-items: center !important;
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  height: 40px !important;
  width: 240px !important;
  transition: all 0.2s ease !important;
}

.able-search-input-box:focus-within {
  background: var(--able-surface) !important;
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.2) !important;
  width: 300px !important;
}

.able-search-icon {
  color: var(--able-text-muted) !important;
  font-size: 13px !important;
  margin-right: 8px !important;
}

.able-search-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--able-text-dark) !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.able-search-input::placeholder {
  color: var(--able-text-muted) !important;
  font-weight: 500 !important;
}

/* Header Right Actions */
.able-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-header-item {
  position: relative !important;
}

.able-header-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--able-bg) !important;
  border: 1px solid transparent !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.able-header-btn:hover {
  background: var(--able-border) !important;
  color: var(--able-primary) !important;
}

.able-header-badge,
.able-notification-badge,
.able-todo-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background: var(--able-success) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 17px !important;
  height: 17px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid var(--able-surface) !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

.able-header-badge.hide,
.able-notification-badge.hide,
.able-todo-badge.hide {
  display: none !important;
}

.able-notif-badge {
  background: var(--able-success, #01C38D) !important;
  color: #FFFFFF !important;
}

.able-todo-badge {
  background: #E58A00 !important;
  color: #FFFFFF !important;
}

.able-badge-dot {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 2px solid var(--able-surface) !important;
}

/* ==========================================================================
   ABLE PRO HEADER MODULE HOOKS (admin_navbar_start / admin_navbar_end)
   ========================================================================== */

.able-header-hooks-nav,
.able-header-hooks-nav-end {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

.able-header-hooks-nav:empty,
.able-header-hooks-nav-end:empty {
  display: none !important;
}

.able-header-hooks-nav>li,
.able-header-hooks-nav-end>li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
}

/* Default Hook Link Button Styling (Matches Able Pro action buttons) */
.able-header-hooks-nav>li>a,
.able-header-hooks-nav-end>li>a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text, #1E293B) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  line-height: normal !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.able-header-hooks-nav>li>a:hover,
.able-header-hooks-nav>li>a:focus,
.able-header-hooks-nav-end>li>a:hover,
.able-header-hooks-nav-end>li>a:focus {
  background: var(--able-border, #E8EBEE) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: var(--able-primary, #4680FF) !important;
  text-decoration: none !important;
}

.able-header-hooks-nav>li>a span,
.able-header-hooks-nav-end>li>a span {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Attendance ("Marcar") specific button styling */
.able-header-hooks-nav>li>a i.fa-clock {
  color: var(--able-primary, #4680FF) !important;
  font-size: 15px !important;
}

/* Icon-only hooked items (e.g. AI Assistant, Pulsechat status) */
.able-header-hooks-nav>li.icon>a,
.able-header-hooks-nav-end>li.icon>a,
.able-header-hooks-nav>li#pulsechat-status-wrapper>a {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.able-header-hooks-nav>li>a i,
.able-header-hooks-nav-end>li>a i {
  font-size: 14px !important;
  vertical-align: middle !important;
}

/* Multi-Company Pill Switcher */
.able-header-hooks-nav .header-multi-company {
  margin: 0 !important;
}

.able-header-hooks-nav .header-multi-company>a.dropdown-toggle {
  height: 38px !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text, #1E293B) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-header-hooks-nav .header-multi-company>a.dropdown-toggle:hover,
.able-header-hooks-nav .header-multi-company>a.dropdown-toggle:focus {
  background: var(--able-border, #E8EBEE) !important;
  color: var(--able-primary, #4680FF) !important;
}

/* Multi-Company and Hooked Dropdowns */
.able-header-hooks-nav .dropdown-menu,
.able-header-hooks-nav-end .dropdown-menu {
  margin-top: 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 16px 40px rgba(19, 25, 32, 0.12), 0 2px 8px rgba(19, 25, 32, 0.04) !important;
  padding: 6px 0 !important;
}

/* User Avatar & Dropdown */
.able-profile-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
}

.able-header-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--able-border) !important;
  background-color: var(--able-primary-light, #E9F0FF) !important;
  transition: all 0.2s ease !important;
}

.able-header-avatar:hover {
  border-color: var(--able-primary) !important;
  transform: scale(1.05) !important;
}

/* ==========================================================================
   ABLE PRO HEADER DROPDOWNS (FLOATING ELEVATION & MARGINS)
   ========================================================================== */

.able-header-right .dropdown-menu,
.able-header-item .dropdown-menu,
.able-megamenu-dropdown,
.able-profile-dropdown,
.able-notifications-dropdown,
.able-language-dropdown,
.able-dropdown-menu,
#started-timers-top {
  margin-top: 26px !important;
  border-radius: 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 16px 40px rgba(19, 25, 32, 0.12), 0 2px 8px rgba(19, 25, 32, 0.04) !important;
}

.able-profile-dropdown {
  width: 310px !important;
  padding: 0 !important;
  overflow: hidden !important;
  right: 0 !important;
  left: auto !important;
}

.able-profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.able-profile-avatar-lg {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: var(--able-primary-light, #E9F0FF) !important;
  border: 2px solid var(--able-border, #E8EBEE) !important;
  flex-shrink: 0 !important;
}

.able-profile-header-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.able-profile-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin: 0 0 3px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-profile-role {
  font-size: 11px !important;
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 3px !important;
  width: fit-content !important;
}

.able-profile-email {
  font-size: 12px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-profile-body {
  padding: 10px 12px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.able-profile-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-profile-menu-item i {
  width: 18px !important;
  font-size: 15px !important;
  text-align: center !important;
  color: var(--able-text-muted, #5B6B79) !important;
  transition: color 0.15s ease !important;
}

.able-profile-menu-item:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-profile-menu-item:hover i {
  color: var(--able-primary, #01C38D) !important;
}

.able-profile-divider {
  height: 1px !important;
  background: var(--able-border, #E8EBEE) !important;
  margin: 6px 4px !important;
}

.able-logout-item {
  color: #EF4444 !important;
}

.able-logout-item i {
  color: #EF4444 !important;
}

.able-logout-item:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #DC2626 !important;
}

.able-logout-item:hover i {
  color: #DC2626 !important;
}

/* Language Dropdown */
.able-language-dropdown,
.able-dropdown-menu {
  width: 260px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.able-dropdown-header {
  padding: 14px 16px 10px 16px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.able-dropdown-header h6 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin: 0 !important;
}

.able-lang-list {
  max-height: 290px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  margin: 0 !important;
  list-style: none !important;
}

.able-lang-list::-webkit-scrollbar {
  width: 5px !important;
}

.able-lang-list::-webkit-scrollbar-thumb {
  background: var(--able-border, #E8EBEE) !important;
  border-radius: 4px !important;
}

.able-lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-lang-item-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.able-lang-icon {
  font-size: 13px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  width: 16px !important;
  text-align: center !important;
}

.able-lang-item:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-lang-item:hover .able-lang-icon {
  color: var(--able-primary, #01C38D) !important;
}

.able-lang-list li.active .able-lang-item {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

.able-lang-list li.active .able-lang-icon {
  color: var(--able-primary, #01C38D) !important;
}

.able-lang-check {
  font-size: 12px !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Notifications Dropdown */
.able-notifications-dropdown {
  width: 380px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.able-notif-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--able-border) !important;
}

.able-notif-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin: 0 !important;
}

.able-notif-mark-read {
  font-size: 12px !important;
  color: var(--able-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}

.able-notif-mark-read:hover {
  text-decoration: underline !important;
  opacity: 0.85 !important;
}

.able-notif-list {
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 12px 16px !important;
}

.able-notif-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-notif-item:hover {
  background: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

.able-notif-item.unread {
  background: var(--able-primary-light) !important;
  border-color: var(--able-primary) !important;
}

.able-notif-icon-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.able-notif-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.able-notif-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.able-notif-text {
  font-size: 12.5px !important;
  color: var(--able-text-dark) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.able-notif-time {
  font-size: 11px !important;
  color: var(--able-text-muted) !important;
  margin-top: 2px !important;
  display: block !important;
}

.able-notif-empty {
  text-align: center !important;
  padding: 32px 16px !important;
  color: var(--able-text-muted) !important;
}

.able-notif-empty i {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}

.able-notif-footer {
  padding: 12px !important;
  text-align: center !important;
  border-top: 1px solid var(--able-border) !important;
  background: var(--able-bg) !important;
}

.able-notif-view-all {
  font-size: 12.5px !important;
  color: var(--able-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   TODOS DROPDOWN (ABLE PRO)
   ========================================================================== */

.able-todo-badge {
  background: #E58A00 !important;
  color: #FFFFFF !important;
}

.able-todo-pill {
  background: rgba(229, 138, 0, 0.15) !important;
  color: #E58A00 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
}

.able-todos-dropdown {
  width: 350px !important;
  max-width: 95vw !important;
}

.able-todo-quick-box {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
}

.able-todo-quick-box input {
  font-size: 13px !important;
  border-radius: 8px 0 0 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface-light, #F8F9FA) !important;
  color: var(--able-text-dark, #1D2630) !important;
}

.able-todo-quick-box input:focus {
  border-color: var(--able-primary, #4680FF) !important;
  box-shadow: none !important;
}

.able-todo-quick-box button {
  border-radius: 0 8px 8px 0 !important;
  background: var(--able-primary, #4680FF) !important;
  border-color: var(--able-primary, #4680FF) !important;
}

.able-todo-dropdown-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  transition: background 0.15s ease !important;
  gap: 10px !important;
}

.able-todo-dropdown-item:hover {
  background: var(--able-surface-light, #F8F9FA) !important;
}

.able-todo-check-wrapper {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.able-todo-checkbox {
  width: 17px !important;
  height: 17px !important;
  cursor: pointer !important;
  accent-color: var(--able-primary, #4680FF) !important;
  margin: 0 !important;
}

.able-todo-item-desc {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-dark, #1D2630) !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

.able-todo-dropdown-item.able-todo-completed .able-todo-item-desc {
  text-decoration: line-through !important;
  color: var(--able-text-muted, #5B6B79) !important;
  opacity: 0.6 !important;
}

.able-todo-del-btn {
  background: none !important;
  border: none !important;
  color: var(--able-text-muted, #8C99A5) !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.able-todo-dropdown-item:hover .able-todo-del-btn {
  opacity: 1 !important;
}

.able-todo-del-btn:hover {
  color: #DC2626 !important;
}

html.dark-mode .able-todo-quick-box,
body.dark-mode .able-todo-quick-box {
  background: #1D2630 !important;
}

html.dark-mode .able-todo-quick-box input,
body.dark-mode .able-todo-quick-box input {
  background: #131920 !important;
  color: #dadcde !important;
  border-color: #29313B !important;
}

html.dark-mode .able-todo-item-desc,
body.dark-mode .able-todo-item-desc {
  color: #dadcde !important;
}

/* ==========================================================================
   MEGA MENU DROPDOWN (ABLE PRO QUICK APPS LAUNCHER)
   ========================================================================== */

.able-megamenu-dropdown {
  width: 340px !important;
  padding: 0 !important;
  overflow: hidden !important;
  right: 0 !important;
  left: auto !important;
  max-width: calc(100vw - 32px) !important;
}

.able-megamenu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.able-megamenu-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-megamenu-header-title i {
  font-size: 14px !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-megamenu-header h6 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.able-megamenu-badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  background: var(--able-primary-light, rgba(1, 195, 141, 0.15)) !important;
  color: var(--able-primary, #01C38D) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.able-megamenu-body {
  padding: 14px 16px !important;
}

.able-megamenu-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.able-megamenu-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px 14px 12px !important;
  border-radius: 12px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  gap: 10px !important;
}

.able-megamenu-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-megamenu-item:hover .able-megamenu-icon {
  transform: scale(1.1) !important;
}

/* App-launcher themed soft pastel badges */
.icon-invoices {
  background: rgba(1, 195, 141, 0.12) !important;
  color: #01C38D !important;
}

.icon-clients {
  background: rgba(70, 128, 255, 0.12) !important;
  color: #4680FF !important;
}

.icon-projects {
  background: rgba(235, 163, 0, 0.12) !important;
  color: #EBA300 !important;
}

.icon-tasks {
  background: rgba(230, 80, 80, 0.12) !important;
  color: #E65050 !important;
}

.able-megamenu-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-dark, #1D2630) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.able-megamenu-item:hover {
  background: var(--able-surface, #FFFFFF) !important;
  border-color: var(--able-primary, #01C38D) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(19, 25, 32, 0.08) !important;
  text-decoration: none !important;
}

.able-megamenu-footer {
  padding: 10px 16px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  text-align: center !important;
}

.able-megamenu-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--able-primary, #01C38D) !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

.able-megamenu-footer-link:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   HEADER DROPDOWNS DARK MODE OVERRIDES
   ========================================================================== */

html.dark-mode .able-header-right .dropdown-menu,
html.dark-mode .able-header-item .dropdown-menu,
html.dark-mode .able-profile-dropdown,
html.dark-mode .able-megamenu-dropdown,
html.dark-mode .able-notifications-dropdown,
html.dark-mode .able-language-dropdown,
html.dark-mode .able-dropdown-menu,
html.dark-mode #started-timers-top,
body.dark-mode .able-header-right .dropdown-menu,
body.dark-mode .able-header-item .dropdown-menu,
body.dark-mode .able-profile-dropdown,
body.dark-mode .able-megamenu-dropdown,
body.dark-mode .able-notifications-dropdown,
body.dark-mode .able-language-dropdown,
body.dark-mode .able-dropdown-menu,
body.dark-mode #started-timers-top {
  background: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .able-profile-header,
body.dark-mode .able-profile-header,
html.dark-mode .able-dropdown-header,
body.dark-mode .able-dropdown-header,
html.dark-mode .able-notif-header,
body.dark-mode .able-notif-header,
html.dark-mode .able-megamenu-header,
body.dark-mode .able-megamenu-header,
html.dark-mode .able-megamenu-footer,
body.dark-mode .able-megamenu-footer {
  background: #0E121B !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-profile-name,
body.dark-mode .able-profile-name,
html.dark-mode .able-dropdown-header h6,
body.dark-mode .able-dropdown-header h6,
html.dark-mode .able-megamenu-header h6,
body.dark-mode .able-megamenu-header h6 {
  color: #FFFFFF !important;
}

html.dark-mode .able-profile-email,
body.dark-mode .able-profile-email,
html.dark-mode .able-lang-icon,
body.dark-mode .able-lang-icon {
  color: #94A3B8 !important;
}

html.dark-mode .able-profile-menu-item,
body.dark-mode .able-profile-menu-item,
html.dark-mode .able-lang-item,
body.dark-mode .able-lang-item {
  color: #CBD5E1 !important;
}

html.dark-mode .able-profile-menu-item i,
body.dark-mode .able-profile-menu-item i {
  color: #94A3B8 !important;
}

html.dark-mode .able-profile-menu-item:hover,
body.dark-mode .able-profile-menu-item:hover,
html.dark-mode .able-lang-item:hover,
body.dark-mode .able-lang-item:hover {
  background: #1C2330 !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-profile-menu-item:hover i,
body.dark-mode .able-profile-menu-item:hover i,
html.dark-mode .able-lang-item:hover .able-lang-icon,
body.dark-mode .able-lang-item:hover .able-lang-icon {
  color: var(--able-primary) !important;
}

html.dark-mode .able-lang-list li.active .able-lang-item,
body.dark-mode .able-lang-list li.active .able-lang-item {
  background: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary) !important;
}

html.dark-mode .able-profile-divider,
body.dark-mode .able-profile-divider {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-megamenu-item,
body.dark-mode .able-megamenu-item {
  background: #181F2A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-megamenu-name,
body.dark-mode .able-megamenu-name,
html.dark-mode .able-megamenu-item span,
body.dark-mode .able-megamenu-item span {
  color: #E2E8F0 !important;
}

html.dark-mode .able-megamenu-item:hover,
body.dark-mode .able-megamenu-item:hover {
  background: #222B3A !important;
  border-color: var(--able-primary) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-lang-list::-webkit-scrollbar-thumb,
body.dark-mode .able-lang-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* DARK MODE: Hooked Navbar Items & Multi-Company */
html.dark-mode .able-header-hooks-nav>li>a,
html.dark-mode .able-header-hooks-nav-end>li>a,
body.dark-mode .able-header-hooks-nav>li>a,
body.dark-mode .able-header-hooks-nav-end>li>a,
[data-theme="dark"] .able-header-hooks-nav>li>a,
[data-theme="dark"] .able-header-hooks-nav-end>li>a {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-header-hooks-nav>li>a:hover,
html.dark-mode .able-header-hooks-nav-end>li>a:hover,
body.dark-mode .able-header-hooks-nav>li>a:hover,
body.dark-mode .able-header-hooks-nav-end>li>a:hover,
[data-theme="dark"] .able-header-hooks-nav>li>a:hover,
[data-theme="dark"] .able-header-hooks-nav-end>li>a:hover {
  background: #1E2533 !important;
  border-color: var(--able-primary, #4680FF) !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .able-header-hooks-nav .header-multi-company>a.dropdown-toggle,
body.dark-mode .able-header-hooks-nav .header-multi-company>a.dropdown-toggle,
[data-theme="dark"] .able-header-hooks-nav .header-multi-company>a.dropdown-toggle {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-header-hooks-nav .header-multi-company>a.dropdown-toggle:hover,
body.dark-mode .able-header-hooks-nav .header-multi-company>a.dropdown-toggle:hover,
[data-theme="dark"] .able-header-hooks-nav .header-multi-company>a.dropdown-toggle:hover {
  background: #1E2533 !important;
  border-color: var(--able-primary, #4680FF) !important;
  color: var(--able-primary, #4680FF) !important;
}

/* Multi-Company Dropdown in Dark Mode */
html.dark-mode .header-multi-company .dropdown-menu,
body.dark-mode .header-multi-company .dropdown-menu,
[data-theme="dark"] .header-multi-company .dropdown-menu {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .header-multi-company .dropdown-menu>li>a,
body.dark-mode .header-multi-company .dropdown-menu>li>a,
[data-theme="dark"] .header-multi-company .dropdown-menu>li>a {
  color: #CBD5E1 !important;
}

html.dark-mode .header-multi-company .dropdown-menu>li>a:hover,
body.dark-mode .header-multi-company .dropdown-menu>li>a:hover,
[data-theme="dark"] .header-multi-company .dropdown-menu>li>a:hover {
  background: #1E2533 !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .header-multi-company .dropdown-menu>li.active>a,
body.dark-mode .header-multi-company .dropdown-menu>li.active>a,
[data-theme="dark"] .header-multi-company .dropdown-menu>li.active>a {
  background: rgba(70, 128, 255, 0.12) !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .header-multi-company .dropdown-menu .dropdown-header,
body.dark-mode .header-multi-company .dropdown-menu .dropdown-header,
[data-theme="dark"] .header-multi-company .dropdown-menu .dropdown-header {
  color: #94A3B8 !important;
  background: #0E121B !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .header-multi-company .dropdown-menu .divider,
body.dark-mode .header-multi-company .dropdown-menu .divider,
[data-theme="dark"] .header-multi-company .dropdown-menu .divider {
  background: #2E3844 !important;
  border-color: #2E3844 !important;
}

/* ==========================================================================
   ABLE PRO SIDEBAR (PIXEL-PERFECT ORIGINAL)
   ========================================================================== */

/* ==========================================================================
   ABLE PRO SIDEBAR (PIXEL-PERFECT OFFICIAL TEMPLATE)
   ========================================================================== */

.able-pro-sidebar,
#menu {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--able-sidebar-width, 260px) !important;
  background: var(--able-surface, #FFFFFF) !important;
  border-right: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: none !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Brand Logo Area */
.able-brand-header {
  padding: 20px 24px 16px 24px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: none !important;
}

.able-brand-link,
.able-brand-header .logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  max-width: 100% !important;
}

.able-brand-logo,
.able-brand-header img {
  max-height: 38px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: opacity 0.2s ease !important;
}

.able-brand-logo-svg {
  height: 28px !important;
  width: auto !important;
}

.able-brand-logo-light {
  display: block !important;
}

.able-brand-logo-dark {
  display: none !important;
}

body.dark-mode .able-brand-logo-light,
[data-theme="dark"] .able-brand-logo-light {
  display: none !important;
}

body.dark-mode .able-brand-logo-dark,
[data-theme="dark"] .able-brand-logo-dark {
  display: block !important;
}

.able-brand-text,
.able-brand-header .logo-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

/* Nav Scroll Container */
.able-nav-scroll-container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-bottom: 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--able-border) transparent !important;
}

.able-nav-scroll-container::-webkit-scrollbar {
  width: 5px !important;
}

.able-nav-scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--able-border) !important;
  border-radius: 10px !important;
}

/* Menu List */
.able-pro-sidebar .able-menu-list,
.able-pro-sidebar #side-menu {
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Section Subheaders */
.able-pro-sidebar .able-nav-group-header {
  padding: 16px 20px 6px 20px !important;
  list-style: none !important;
}

.able-pro-sidebar .able-nav-group-header span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

/* Sidebar Items */
.able-pro-sidebar #side-menu>li,
.able-pro-sidebar .able-nav-item {
  display: block !important;
  position: relative !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

.able-pro-sidebar #side-menu>li>a,
.able-pro-sidebar .able-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-pro-sidebar .able-nav-icon,
.able-pro-sidebar #side-menu>li>a i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.pc-icon,
.able-nav-svg-icon {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  pointer-events: none !important;
  transition: color 0.15s ease, stroke 0.15s ease !important;
}

.pc-icon *,
.able-nav-svg-icon * {
  pointer-events: none !important;
}

.able-pro-sidebar .able-nav-link:hover .pc-icon,
.able-pro-sidebar #side-menu>li>a:hover .pc-icon,
.able-pro-sidebar .able-nav-link:hover .able-nav-svg-icon,
.able-pro-sidebar #side-menu>li>a:hover .able-nav-svg-icon {
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link.active .pc-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .pc-icon,
.able-pro-sidebar #side-menu>li.active>a .pc-icon,
.able-pro-sidebar .able-nav-link.active .able-nav-svg-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-svg-icon,
.able-pro-sidebar #side-menu>li.active>a .able-nav-svg-icon {
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-title,
.able-pro-sidebar #side-menu>li>a span.nav-text-modern,
.able-pro-sidebar #side-menu>li>a span.menu-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  white-space: nowrap !important;
  text-align: left !important;
  flex-grow: 1 !important;
}

.able-pro-sidebar .able-nav-link:hover,
.able-pro-sidebar #side-menu>li>a:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link:hover .able-nav-icon,
.able-pro-sidebar .able-nav-link:hover .able-nav-title,
.able-pro-sidebar #side-menu>li>a:hover i,
.able-pro-sidebar #side-menu>li>a:hover span {
  color: var(--able-primary, #01C38D) !important;
}

/* Active Item Style (Official Able Pro Light-Green Pill) */
.able-pro-sidebar .able-nav-link.active,
.able-pro-sidebar .able-nav-item.active>.able-nav-link,
.able-pro-sidebar #side-menu>li.active>a,
.able-pro-sidebar #side-menu>li.active>a:hover,
.able-pro-sidebar #side-menu>li.active>a:focus {
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  border-radius: 12px !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link.active,
html.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a,
body.dark-mode .able-pro-sidebar .able-nav-link.active,
body.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a,
[data-theme="dark"] .able-pro-sidebar .able-nav-link.active,
[data-theme="dark"] .able-pro-sidebar .able-nav-item.active>.able-nav-link,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.18) 0%, rgba(1, 195, 141, 0.05) 100%) !important;
  border: 1px solid rgba(1, 195, 141, 0.35) !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link.active .able-nav-title,
html.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a span.menu-text,
body.dark-mode .able-pro-sidebar .able-nav-link.active .able-nav-title,
body.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a span.menu-text,
[data-theme="dark"] .able-pro-sidebar .able-nav-link.active .able-nav-title,
[data-theme="dark"] .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a span.menu-text {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link:hover,
html.dark-mode .able-pro-sidebar #side-menu>li>a:hover,
body.dark-mode .able-pro-sidebar .able-nav-link:hover,
body.dark-mode .able-pro-sidebar #side-menu>li>a:hover,
[data-theme="dark"] .able-pro-sidebar .able-nav-link:hover,
[data-theme="dark"] .able-pro-sidebar #side-menu>li>a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

.able-pro-sidebar .able-nav-link.active .able-nav-icon,
.able-pro-sidebar .able-nav-link.active .able-nav-icon i,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-icon i,
.able-pro-sidebar #side-menu>li.active>a i {
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link.active .able-nav-title,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
.able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
.able-pro-sidebar #side-menu>li.active>a span.menu-text {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

.able-pro-sidebar .able-nav-arrow {
  margin-left: auto !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  transition: transform 0.2s ease, color 0.2s ease, stroke 0.2s ease !important;
  flex-shrink: 0 !important;
}

.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-arrow,
.able-pro-sidebar .able-nav-link[aria-expanded="true"] .able-nav-arrow,
.able-pro-sidebar #side-menu>li.active>a .able-nav-arrow {
  transform: rotate(180deg) !important;
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

/* Submenus with Bullet Points (Vertical Accordion) */
.able-pro-sidebar .able-submenu,
.able-pro-sidebar #side-menu .nav-second-level {
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border-left: none !important;
  width: 100% !important;
}

.able-pro-sidebar .able-submenu:not(.in):not(.collapsing) {
  display: none !important;
}

.able-pro-sidebar .able-submenu.in,
.able-pro-sidebar .able-submenu.collapsing {
  display: block !important;
}

.able-pro-sidebar .able-submenu-item,
.able-pro-sidebar #side-menu .nav-second-level li {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

.able-pro-sidebar .able-submenu-link,
.able-pro-sidebar #side-menu .nav-second-level li a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px 8px 36px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-pro-sidebar .able-submenu-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: var(--able-text-muted, #5B6B79) !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.able-pro-sidebar .able-submenu-title {
  font-size: 13.5px !important;
  color: inherit !important;
}

.able-pro-sidebar .able-submenu-link:hover {
  color: var(--able-primary, #01C38D) !important;
  background-color: var(--able-bg, #F8F9FA) !important;
}

.able-pro-sidebar .able-submenu-link:hover .able-submenu-bullet {
  background-color: var(--able-primary, #01C38D) !important;
  transform: scale(1.3) !important;
}

.able-pro-sidebar .able-submenu-item.active>.able-submenu-link,
.able-pro-sidebar #side-menu .nav-second-level li.active a {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

.able-pro-sidebar .able-submenu-bullet.active,
.able-pro-sidebar .able-submenu-item.active .able-submenu-bullet,
.able-pro-sidebar #side-menu .nav-second-level li.active .able-submenu-bullet {
  background-color: var(--able-primary, #01C38D) !important;
  width: 6px !important;
  height: 6px !important;
}

/* ==========================================================================
   ABLE PRO SETUP MENU (CONFIGURATION SECONDARY SIDEBAR)
   ========================================================================== */

@keyframes ableSetupSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  30% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ableSetupSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes ableSetupSlideInRTL {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ableSetupSlideOutRTL {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

#setup-menu-wrapper,
body.admin #setup-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--able-sidebar-width, 260px) !important;
  width: var(--able-sidebar-width, 260px) !important;
  height: 100vh !important;
  background: var(--able-surface, #FFFFFF) !important;
  border-right: 1px dashed var(--able-border, #E8EBEE) !important;
  border-left: 1px dashed var(--able-border, #E8EBEE) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
  z-index: 1030 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

#setup-menu-wrapper.fadeInLeft,
body.admin #setup-menu-wrapper.fadeInLeft,
#setup-menu-wrapper.display-block:not(.fadeOutLeft),
body.admin #setup-menu-wrapper.display-block:not(.fadeOutLeft) {
  display: block !important;
  animation: ableSetupSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

#setup-menu-wrapper.fadeOutLeft,
body.admin #setup-menu-wrapper.fadeOutLeft {
  animation: ableSetupSlideOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

#setup-menu-wrapper:not(.display-block):not(.fadeInLeft) {
  display: none !important;
}

[dir="rtl"] #setup-menu-wrapper,
[dir="rtl"] body.admin #setup-menu-wrapper {
  left: auto !important;
  right: var(--able-sidebar-width, 260px) !important;
  border-left: 1px dashed var(--able-border, #E8EBEE) !important;
  border-right: none !important;
}

[dir="rtl"] #setup-menu-wrapper.fadeInLeft,
[dir="rtl"] body.admin #setup-menu-wrapper.fadeInLeft,
[dir="rtl"] #setup-menu-wrapper.display-block:not(.fadeOutLeft),
[dir="rtl"] body.admin #setup-menu-wrapper.display-block:not(.fadeOutLeft) {
  display: block !important;
  animation: ableSetupSlideInRTL 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[dir="rtl"] #setup-menu-wrapper.fadeOutLeft,
[dir="rtl"] body.admin #setup-menu-wrapper.fadeOutLeft {
  animation: ableSetupSlideOutRTL 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@media (max-width: 991px) {

  #setup-menu-wrapper,
  body.admin #setup-menu-wrapper {
    left: 0 !important;
    width: 280px !important;
    z-index: 1060 !important;
  }
}

/* Header in Setup Menu */
#setup-menu-wrapper .setup-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 20px 16px 20px !important;
  height: 70px !important;
  border-bottom: 1px dashed var(--able-border, #E8EBEE) !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

#setup-menu-wrapper .setup-menu-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
}

#setup-menu-wrapper .close-customizer,
#setup-menu-wrapper .close-modern {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

#setup-menu-wrapper .close-customizer:hover,
#setup-menu-wrapper .close-modern:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Setup Menu Navigation List */
#setup-menu-wrapper #setup-menu,
#setup-menu-wrapper .setup-menu-nav {
  list-style: none !important;
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#setup-menu-wrapper #setup-menu>li,
#setup-menu-wrapper .setup-item-modern {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

#setup-menu-wrapper #setup-menu>li>a,
#setup-menu-wrapper .setup-item-modern>a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  gap: 12px !important;
}

#setup-menu-wrapper #setup-menu>li>a:hover,
#setup-menu-wrapper .setup-item-modern>a:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

#setup-menu-wrapper #setup-menu>li.active>a,
#setup-menu-wrapper .setup-item-modern.active>a {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

#setup-menu-wrapper .setup-icon-modern,
#setup-menu-wrapper #setup-menu>li>a i.menu-icon {
  font-size: 16px !important;
  width: 18px !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#setup-menu-wrapper .setup-text-modern,
#setup-menu-wrapper #setup-menu>li>a span.menu-text {
  font-size: 13.5px !important;
  color: inherit !important;
  flex-grow: 1 !important;
}

/* Submenus in Setup Menu */
#setup-menu-wrapper .setup-submenu-modern,
#setup-menu-wrapper #setup-menu .nav-second-level {
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

#setup-menu-wrapper .setup-subitem-modern,
#setup-menu-wrapper #setup-menu .nav-second-level li {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
}

#setup-menu-wrapper .setup-subitem-modern a,
#setup-menu-wrapper #setup-menu .nav-second-level li a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 14px 7px 32px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

#setup-menu-wrapper .setup-subitem-modern a:hover,
#setup-menu-wrapper #setup-menu .nav-second-level li a:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* ExtraBox (Support Card) */
.able-extrabox {
  margin: 20px 16px 10px 16px !important;
  background: var(--able-bg) !important;
  border: 1px dashed var(--able-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
}

.able-extrabox-icon {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 8px auto !important;
  border-radius: 50% !important;
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.able-extrabox-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin-bottom: 2px !important;
}

.able-extrabox-desc {
  font-size: 11.5px !important;
  color: var(--able-text-muted) !important;
  margin-bottom: 12px !important;
}

.able-extrabox-btn {
  background-color: var(--able-primary) !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

/* Panel & Card Dark Mode Overrides */
html.dark-mode .panel_s,
html.dark-mode .panel-body,
html.dark-mode .v-card,
html.dark-mode .modal-content,
body.dark-mode .panel_s,
body.dark-mode .panel-body,
body.dark-mode .v-card,
body.dark-mode .modal-content,
[data-theme="dark"] .panel_s,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .v-card,
[data-theme="dark"] .modal-content {
  background-color: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
}

body.dark-mode .alert-warning {
  background-color: #2a2415 !important;
  border-color: #59441a !important;
  color: #f7dcb3 !important;
}

body.dark-mode .alert-info {
  background-color: #16262e !important;
  border-color: #204554 !important;
  color: #c5eff3 !important;
}

html.dark-mode .able-widget-sheet,
body.dark-mode .able-widget-sheet,
[data-theme="dark"] .able-widget-sheet {
  background-color: #0F131C !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}

/* Responsive */
@media (max-width: 991px) {

  .able-pro-sidebar,
  #menu {
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease-in-out !important;
  }

  body.show-sidebar .able-pro-sidebar,
  body.show-sidebar #menu {
    transform: translateX(0) !important;
  }

  #wrapper,
  #header,
  .able-pro-header {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   ABLE PRO FORM & TRANSACTION PAGES (INVOICES / ESTIMATES / PROPOSALS)
   ========================================================================== */

.invoice-form .panel_s,
.estimate-form .panel_s,
.proposal-form .panel_s,
.panel_s.accounting-template {
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  background: var(--able-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-bottom: 24px !important;
}

.invoice-form .panel-body,
.estimate-form .panel-body,
.panel_s.accounting-template>.panel-body {
  padding: 24px !important;
  background: var(--able-surface) !important;
}

/* Able Pro Form Controls */
.invoice-form .form-control,
.estimate-form .form-control,
.accounting-template .form-control {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  font-size: 13.5px !important;
  height: 40px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.invoice-form .bootstrap-select>.btn,
.estimate-form .bootstrap-select>.btn,
.bootstrap-select>.btn.dropdown-toggle {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  font-size: 13.5px !important;
  height: 40px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  line-height: normal !important;
}

.bootstrap-select>.btn .filter-option {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.bootstrap-select>.btn .filter-option-inner-inner {
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bootstrap-select .bs-caret {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.bootstrap-select .bs-caret .caret {
  margin-top: 0 !important;
  border-top-color: var(--able-text-muted) !important;
}

.invoice-form textarea.form-control,
.estimate-form textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

.invoice-form .form-control:focus,
.estimate-form .form-control:focus,
.invoice-form .bootstrap-select>.btn:focus,
.estimate-form .bootstrap-select>.btn:focus {
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light) !important;
}

/* Modern Able Pro Select Groups (Client, Items, Tasks) */
.able-client-select-group,
.able-item-select-group {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-client-select-group .bootstrap-select,
.able-item-select-group .bootstrap-select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.able-client-select-group .able-add-btn,
.able-item-select-group .able-add-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--able-text-dark) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.able-client-select-group .able-add-btn:hover,
.able-item-select-group .able-add-btn:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-color: var(--able-border) !important;
}

/* Unified Input Group styling for Bootstrap-Select + Add Button */
.input-group.input-group-select,
.input-group {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  position: relative !important;
}

.input-group.input-group-select .bootstrap-select,
.input-group .bootstrap-select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.input-group.input-group-select .bootstrap-select>.btn,
.input-group .bootstrap-select>.btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.input-group-btn>.btn,
.input-group-btn>a.btn,
.input-group-addon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--able-border) !important;
  border-radius: 0 8px 8px 0 !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  border-color: var(--able-border) !important;
  padding: 0 12px !important;
}

.input-group-btn>.btn:hover,
.input-group-btn>a.btn:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-color: var(--able-border) !important;
}

/* Bootstrap Select Dropdown Menu & Search styling */
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(19, 25, 32, 0.08) !important;
  background: var(--able-surface) !important;
  padding: 8px 0 !important;
  margin-top: 4px !important;
}

.bootstrap-select .bs-searchbox {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--able-border) !important;
}

.bootstrap-select .bs-searchbox .form-control {
  border-radius: 6px !important;
  border: 1px solid var(--able-border) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  height: 36px !important;
  background: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
}

.bootstrap-select .bs-searchbox .form-control:focus {
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light) !important;
  background: var(--able-surface) !important;
}

.bootstrap-select .dropdown-menu li a {
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  color: var(--able-text-dark) !important;
  transition: all 0.15s ease !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a {
  background-color: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
}

.bootstrap-select .dropdown-menu .text-muted,
.bootstrap-select .dropdown-menu small {
  color: var(--able-text-muted) !important;
  font-size: 11.5px !important;
}

/* Address Boxes (From / To) */
.accounting-template address {
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--able-text-muted) !important;
}

/* Table responsive wrapper for items table */
.table-responsive.s_table,
.s_table.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin-bottom: 15px !important;
}

.table-responsive.s_table::-webkit-scrollbar,
.s_table.table-responsive::-webkit-scrollbar {
  height: 8px !important;
}

.table-responsive.s_table::-webkit-scrollbar-track,
.s_table.table-responsive::-webkit-scrollbar-track {
  background: var(--able-bg, #F8F9FA) !important;
  border-radius: 4px !important;
}

.table-responsive.s_table::-webkit-scrollbar-thumb,
.s_table.table-responsive::-webkit-scrollbar-thumb {
  background: var(--able-border, #CBD5E1) !important;
  border-radius: 4px !important;
}

.table-responsive.s_table::-webkit-scrollbar-thumb:hover,
.s_table.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--able-primary, #4680FF) !important;
}

/* Items Table */
.invoice-items-table,
.table.items,
.table-main-invoice-edit {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  min-width: 1150px !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

/* La tabla de líneas de gasto vive en un panel angosto (max-w-4xl) y solo tiene
   6 columnas: debe ajustarse al panel en lugar de heredar el min-width de 1150px
   pensado para facturas/cotizaciones. Se usa .table.items para superar la
   especificidad del selector compuesto original */
.table.items.expense-items-styled {
  min-width: 0 !important;
}

.invoice-items-table thead th,
.table.items thead th {
  background: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  border-top: none !important;
}

.invoice-items-table tbody td,
.table.items tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--able-border) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

/* Main input row for adding items */
.table.items .main,
.table.items tr.main,
.invoice-items-table .main,
.invoice-items-table tr.main,
.table-main-invoice-edit .main,
.table-main-invoice-edit tr.main,
.s_table .table.items .main,
.s_table .table.items tr.main {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.table.items tr.main td,
.invoice-items-table tr.main td,
.table-main-invoice-edit tr.main td {
  background-color: transparent !important;
  background: transparent !important;
  padding: 8px 6px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  border-top: 1px solid var(--able-border, rgba(255, 255, 255, 0.08)) !important;
  border-bottom: 1px solid var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

.table.items tr.main td .form-group,
.invoice-items-table tr.main td .form-group,
.table-main-invoice-edit tr.main td .form-group {
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.table.items tr.main td input.form-control,
.table.items tr.main td textarea.form-control,
.table.items tr.main td select.form-control,
.table.items tr.main td .bootstrap-select>button.btn,
.invoice-items-table tr.main td input.form-control,
.invoice-items-table tr.main td textarea.form-control,
.invoice-items-table tr.main td select.form-control,
.invoice-items-table tr.main td .bootstrap-select>button.btn,
.table-main-invoice-edit tr.main td input.form-control,
.table-main-invoice-edit tr.main td textarea.form-control,
.table-main-invoice-edit tr.main td select.form-control,
.table-main-invoice-edit tr.main td .bootstrap-select>button.btn {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  font-size: 12.5px !important;
  line-height: 24px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.table.items tr.main td textarea.form-control,
.invoice-items-table tr.main td textarea.form-control,
.table-main-invoice-edit tr.main td textarea.form-control {
  resize: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.table.items tr.main td textarea.form-control:focus,
.invoice-items-table tr.main td textarea.form-control:focus,
.table-main-invoice-edit tr.main td textarea.form-control:focus {
  white-space: normal !important;
  overflow-y: auto !important;
  max-height: 38px !important;
}

.table.items tr.main td .bootstrap-select,
.invoice-items-table tr.main td .bootstrap-select,
.table-main-invoice-edit tr.main td .bootstrap-select {
  margin: 0 !important;
  width: 100% !important;
  vertical-align: middle !important;
}

.table.items tr.main td .bootstrap-select>button.btn,
.invoice-items-table tr.main td .bootstrap-select>button.btn,
.table-main-invoice-edit tr.main td .bootstrap-select>button.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Quantity and Unit in tr.main */
.table.items tr.main td.quantities,
.invoice-items-table tr.main td.quantities,
.table-main-invoice-edit tr.main td.quantities,
.table.items td.quantities,
.invoice-items-table td.quantities,
.table-main-invoice-edit td.quantities {
  vertical-align: middle !important;
}

.table.items tr.main td.quantities .pur-quantities-wrapper,
.invoice-items-table tr.main td.quantities .pur-quantities-wrapper,
.table-main-invoice-edit tr.main td.quantities .pur-quantities-wrapper,
.table.items td.quantities .pur-quantities-wrapper,
.invoice-items-table td.quantities .pur-quantities-wrapper,
.table-main-invoice-edit td.quantities .pur-quantities-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 90px !important;
  margin: 0 !important;
}

.table.items tr.main td.quantities .pur-qty-input-group,
.invoice-items-table tr.main td.quantities .pur-qty-input-group,
.table-main-invoice-edit tr.main td.quantities .pur-qty-input-group,
.table.items td.quantities .pur-qty-input-group,
.invoice-items-table td.quantities .pur-qty-input-group,
.table-main-invoice-edit td.quantities .pur-qty-input-group {
  width: 100% !important;
  flex: none !important;
  margin: 0 !important;
}

.table.items tr.main td.quantities .pur-qty-input-group input.form-control,
.invoice-items-table tr.main td.quantities .pur-qty-input-group input.form-control,
.table-main-invoice-edit tr.main td.quantities .pur-qty-input-group input.form-control {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

.table.items tr.main td.quantities .pur-unit-input-group,
.invoice-items-table tr.main td.quantities .pur-unit-input-group,
.table-main-invoice-edit tr.main td.quantities .pur-unit-input-group,
.table.items td.quantities .pur-unit-input-group,
.invoice-items-table td.quantities .pur-unit-input-group,
.table-main-invoice-edit td.quantities .pur-unit-input-group {
  width: 100% !important;
  min-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
}

.table.items tr.main td.quantities input.pur_input_none,
.invoice-items-table tr.main td.quantities input.pur_input_none,
.table-main-invoice-edit tr.main td.quantities input.pur_input_none {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 4px !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: 24px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 6px !important;
  cursor: default !important;
  width: 100% !important;
}

/* Dropdown de unidad de medida (catálogo Hacienda) en la celda de cantidad */
.table.items td.quantities .pur-unit-input-group .bootstrap-select,
.invoice-items-table td.quantities .pur-unit-input-group .bootstrap-select,
.table-main-invoice-edit td.quantities .pur-unit-input-group .bootstrap-select {
  width: 100% !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.table.items td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle,
.invoice-items-table td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle,
.table-main-invoice-edit td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle,
.table-main-invoice-edit tr.main td.quantities .pur-unit-input-group .bootstrap-select>button.btn {
  font-size: 11px !important;
  font-weight: 500 !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 24px !important;
  padding: 0 14px 0 6px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
}

.table.items td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle .filter-option,
.invoice-items-table td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle .filter-option,
.table-main-invoice-edit td.quantities .pur-unit-input-group .bootstrap-select>button.dropdown-toggle .filter-option {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
}

.table.items tr.item td.quantities .pur-unit-input-group,
.invoice-items-table tr.item td.quantities .pur-unit-input-group,
.table-main-invoice-edit tr.item td.quantities .pur-unit-input-group {
  margin-top: 3px !important;
}

/* Menú del dropdown de unidad: con container="body" se mueve a un
   .bs-container a nivel body; le damos ancho legible y texto sin quebrar */
body>.bs-container.pur-unit-select {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body>.bs-container.pur-unit-select>.dropdown-menu {
  min-width: 300px !important;
  width: auto !important;
}

body>.bs-container.pur-unit-select .dropdown-menu li a {
  white-space: nowrap !important;
}

/* Fallback if wrapper div is not present */
.table.items tr.main td.quantities>.form-group,
.invoice-items-table tr.main td.quantities>.form-group,
.table-main-invoice-edit tr.main td.quantities>.form-group {
  display: block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  width: 100% !important;
}

.table.items tr.main td.quantities>.form-group:first-child,
.invoice-items-table tr.main td.quantities>.form-group:first-child,
.table-main-invoice-edit tr.main td.quantities>.form-group:first-child {
  width: 100% !important;
  margin-bottom: 3px !important;
}

.table.items tr.main td.quantities>.form-group:nth-child(2),
.invoice-items-table tr.main td.quantities>.form-group:nth-child(2),
.table-main-invoice-edit tr.main td.quantities>.form-group:nth-child(2) {
  width: 100% !important;
  margin-left: 0 !important;
}

/* Hacienda CABYS in tr.main */
.table.items tr.main td.hacienda-cell-cabys,
.invoice-items-table tr.main td.hacienda-cell-cabys,
.table-main-invoice-edit tr.main td.hacienda-cell-cabys {
  vertical-align: middle !important;
  padding: 8px 6px !important;
}

.table.items tr.main td.hacienda-cell-cabys input.form-control,
.invoice-items-table tr.main td.hacienda-cell-cabys input.form-control,
.table-main-invoice-edit tr.main td.hacienda-cell-cabys input.form-control {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Calculated summary cells in tr.main */
.table.items tr.main td._total,
.table.items tr.main td.label_total_after_discount,
.invoice-items-table tr.main td._total,
.invoice-items-table tr.main td.label_total_after_discount,
.table-main-invoice-edit tr.main td._total,
.table-main-invoice-edit tr.main td.label_total_after_discount {
  vertical-align: middle !important;
  line-height: 38px !important;
  height: 38px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--able-text, #1e2530) !important;
}

/* Add Item Button in tr.main */
.table.items tr.main td:last-child,
.invoice-items-table tr.main td:last-child,
.table-main-invoice-edit tr.main td:last-child {
  vertical-align: middle !important;
  text-align: center !important;
}

.table.items tr.main td button.btn-add-item,
.table.items tr.main td button.btn-verde,
.table.items tr.main td button.btn-primary,
.invoice-items-table tr.main td button.btn-add-item,
.invoice-items-table tr.main td button.btn-verde,
.invoice-items-table tr.main td button.btn-primary,
.table-main-invoice-edit tr.main td button.btn-add-item,
.table-main-invoice-edit tr.main td button.btn-verde,
.table-main-invoice-edit tr.main td button.btn-primary {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--able-primary, #4680ff) !important;
  border-color: var(--able-primary, #4680ff) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.25) !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.table.items tr.main td button.btn-add-item:hover,
.table.items tr.main td button.btn-verde:hover,
.table.items tr.main td button.btn-primary:hover,
.invoice-items-table tr.main td button.btn-add-item:hover,
.invoice-items-table tr.main td button.btn-verde:hover,
.invoice-items-table tr.main td button.btn-primary:hover,
.table-main-invoice-edit tr.main td button.btn-add-item:hover,
.table-main-invoice-edit tr.main td button.btn-verde:hover,
.table-main-invoice-edit tr.main td button.btn-primary:hover {
  background-color: var(--able-primary-dark, #3b6ecc) !important;
  border-color: var(--able-primary-dark, #3b6ecc) !important;
  box-shadow: 0 6px 16px rgba(70, 128, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

.table.items tr.main td button.btn-add-item i,
.table.items tr.main td button.btn-verde i,
.table.items tr.main td button.btn-primary i,
.invoice-items-table tr.main td button.btn-add-item i,
.invoice-items-table tr.main td button.btn-verde i,
.invoice-items-table tr.main td button.btn-primary i,
.table-main-invoice-edit tr.main td button.btn-add-item i,
.table-main-invoice-edit tr.main td button.btn-verde i,
.table-main-invoice-edit tr.main td button.btn-primary i {
  font-size: 15px !important;
  color: #fff !important;
  margin: 0 !important;
}

/* Dark mode overrides for tr.main */
html.dark-mode .table.items tr.main td,
body.dark-mode .table.items tr.main td,
html[data-theme="dark"] .table.items tr.main td,
body[data-theme="dark"] .table.items tr.main td,
[data-theme="dark"] .table.items tr.main td,
html.dark-mode .invoice-items-table tr.main td,
body.dark-mode .invoice-items-table tr.main td,
html[data-theme="dark"] .invoice-items-table tr.main td,
body[data-theme="dark"] .invoice-items-table tr.main td,
[data-theme="dark"] .invoice-items-table tr.main td,
html.dark-mode .table-main-invoice-edit tr.main td,
body.dark-mode .table-main-invoice-edit tr.main td,
html[data-theme="dark"] .table-main-invoice-edit tr.main td,
body[data-theme="dark"] .table-main-invoice-edit tr.main td,
[data-theme="dark"] .table-main-invoice-edit tr.main td {
  background-color: transparent !important;
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .table.items tr.main td input.pur_input_none,
body.dark-mode .table.items tr.main td input.pur_input_none,
html[data-theme="dark"] .table.items tr.main td input.pur_input_none,
body[data-theme="dark"] .table.items tr.main td input.pur_input_none,
[data-theme="dark"] .table.items tr.main td input.pur_input_none,
html.dark-mode .invoice-items-table tr.main td input.pur_input_none,
body.dark-mode .invoice-items-table tr.main td input.pur_input_none,
html[data-theme="dark"] .invoice-items-table tr.main td input.pur_input_none,
body[data-theme="dark"] .invoice-items-table tr.main td input.pur_input_none,
[data-theme="dark"] .invoice-items-table tr.main td input.pur_input_none,
html.dark-mode .table-main-invoice-edit tr.main td input.pur_input_none,
body.dark-mode .table-main-invoice-edit tr.main td input.pur_input_none,
html[data-theme="dark"] .table-main-invoice-edit tr.main td input.pur_input_none,
body[data-theme="dark"] .table-main-invoice-edit tr.main td input.pur_input_none,
[data-theme="dark"] .table-main-invoice-edit tr.main td input.pur_input_none {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #8B98A5 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-mode .table.items tr.main td._total,
body.dark-mode .table.items tr.main td._total,
html[data-theme="dark"] .table.items tr.main td._total,
body[data-theme="dark"] .table.items tr.main td._total,
[data-theme="dark"] .table.items tr.main td._total,
html.dark-mode .table.items tr.main td.label_total_after_discount,
body.dark-mode .table.items tr.main td.label_total_after_discount,
html[data-theme="dark"] .table.items tr.main td.label_total_after_discount,
body[data-theme="dark"] .table.items tr.main td.label_total_after_discount,
[data-theme="dark"] .table.items tr.main td.label_total_after_discount,
html.dark-mode .invoice-items-table tr.main td._total,
body.dark-mode .invoice-items-table tr.main td._total,
html[data-theme="dark"] .invoice-items-table tr.main td._total,
body[data-theme="dark"] .invoice-items-table tr.main td._total,
[data-theme="dark"] .invoice-items-table tr.main td._total,
html.dark-mode .invoice-items-table tr.main td.label_total_after_discount,
body.dark-mode .invoice-items-table tr.main td.label_total_after_discount,
html[data-theme="dark"] .invoice-items-table tr.main td.label_total_after_discount,
body[data-theme="dark"] .invoice-items-table tr.main td.label_total_after_discount,
[data-theme="dark"] .invoice-items-table tr.main td.label_total_after_discount,
html.dark-mode .table-main-invoice-edit tr.main td._total,
body.dark-mode .table-main-invoice-edit tr.main td._total,
html[data-theme="dark"] .table-main-invoice-edit tr.main td._total,
body[data-theme="dark"] .table-main-invoice-edit tr.main td._total,
[data-theme="dark"] .table-main-invoice-edit tr.main td._total,
html.dark-mode .table-main-invoice-edit tr.main td.label_total_after_discount,
body.dark-mode .table-main-invoice-edit tr.main td.label_total_after_discount,
html[data-theme="dark"] .table-main-invoice-edit tr.main td.label_total_after_discount,
body[data-theme="dark"] .table-main-invoice-edit tr.main td.label_total_after_discount,
[data-theme="dark"] .table-main-invoice-edit tr.main td.label_total_after_discount {
  color: #FFFFFF !important;
}

/* Bottom Toolbar */
.btn-bottom-toolbar {
  background: var(--able-surface) !important;
  border-top: 1px solid var(--able-border) !important;
  box-shadow: 0 -4px 16px rgba(19, 25, 32, 0.05) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.btn-bottom-toolbar .btn-group {
  display: inline-flex !important;
  align-items: stretch !important;
}

.btn-bottom-toolbar .btn-primary,
.btn-bottom-toolbar .btn-success,
.btn-bottom-toolbar .btn-info,
.btn-bottom-toolbar .btn-group>.btn:first-child:not(:last-child) {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.35) !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-bottom-toolbar .btn-group>.btn:only-child,
.btn-bottom-toolbar>.btn-primary:only-child {
  border-radius: 10px !important;
}

.btn-bottom-toolbar .btn-group>.dropdown-toggle {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 0 10px 10px 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.35) !important;
  padding: 8px 10px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-bottom-toolbar .btn-default {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  padding: 8px 16px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 500 !important;
}

.btn-bottom-toolbar .btn-default:hover {
  background: var(--able-bg) !important;
}

/* ==========================================================================
   ABLE PRO DATE & DATETIME PICKER (MODERN SIDE-BY-SIDE DESIGN)
   ========================================================================== */

.xdsoft_datetimepicker {
  white-space: nowrap !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -4px rgba(19, 25, 32, 0.16), 0 4px 12px rgba(19, 25, 32, 0.08) !important;
  padding: 10px !important;
  overflow: visible !important;
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  width: auto !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
  z-index: 999999 !important;
}

/* Remove legacy intrusive banner if present */
.xdsoft_datetimepicker .able-datepicker-header {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Calendar Section (Left Column)
   -------------------------------------------------------------------------- */
.xdsoft_datetimepicker .xdsoft_datepicker {
  display: inline-block !important;
  vertical-align: top !important;
  width: 272px !important;
  min-width: 272px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  float: none !important;
}

/* Month & Year Header Bar */
.xdsoft_datetimepicker .xdsoft_monthpicker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  padding: 2px 2px 8px !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_today_button {
  display: none !important;
}

/* Month / Year Clickable Labels */
.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label {
  background-color: transparent !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  border-color: var(--able-border, #E8EBEE) !important;
  color: var(--able-primary, #4680FF) !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label>span {
  color: inherit !important;
  font-weight: 600 !important;
}

/* Month/Year Floating Dropdown Select */
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(19, 25, 32, 0.18) !important;
  max-height: 180px !important;
  padding: 4px !important;
  z-index: 999999 !important;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
  background: transparent !important;
  color: var(--able-text-dark, #1D2630) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: none !important;
  text-align: left !important;
  transition: background-color 0.1s ease, color 0.1s ease !important;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
  background: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Vector Chevrons (Prev / Next) */
.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next {
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--able-text-dark, #1D2630) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
  opacity: 0.8 !important;
  transition: all 0.15s ease !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev::after,
.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next::after {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev::after {
  transform: rotate(-135deg) !important;
  margin-left: 3px !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next::after {
  transform: rotate(45deg) !important;
  margin-right: 3px !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: var(--able-border, #E8EBEE) !important;
  opacity: 1 !important;
}

/* Calendar Days Table */
.xdsoft_datetimepicker .xdsoft_calendar table {
  border-collapse: separate !important;
  border-spacing: 2px !important;
  width: 100% !important;
  margin: 0 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar thead th {
  background: transparent !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  padding: 6px 0 !important;
  border: none !important;
  width: 34px !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-dark, #1D2630) !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.12s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td>div {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 34px !important;
  height: 34px !important;
  color: inherit !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td:hover {
  background-color: var(--able-bg, #F1F5F9) !important;
  color: var(--able-primary, #4680FF) !important;
}

/* Selected Active Day */
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current {
  background-color: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(70, 128, 255, 0.35) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default>div,
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current>div {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default:hover,
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current:hover {
  background-color: var(--able-primary-dark, #3F74E6) !important;
  color: #FFFFFF !important;
}

/* Today indicator */
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current) {
  color: var(--able-primary, #4680FF) !important;
  font-weight: 700 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after {
  content: '' !important;
  position: absolute !important;
  bottom: 3px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background-color: var(--able-primary, #4680FF) !important;
}

/* Other Month & Disabled */
.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_other_month {
  color: var(--able-text-muted, #94A3B8) !important;
  opacity: 0.35 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   Timepicker Section (Right Column - Side by Side)
   -------------------------------------------------------------------------- */
.xdsoft_datetimepicker .xdsoft_timepicker {
  display: inline-block !important;
  vertical-align: top !important;
  width: 120px !important;
  min-width: 120px !important;
  margin: 0 0 0 8px !important;
  padding: 4px 0 4px 8px !important;
  border-left: 1px solid var(--able-border, #E8EBEE) !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  float: none !important;
}

/* Hide timepicker column when date-only */
.xdsoft_datetimepicker.xdsoft_noktime .xdsoft_timepicker,
.xdsoft_datetimepicker .xdsoft_timepicker:not(.active),
.xdsoft_datetimepicker .xdsoft_timepicker[style*="display: none"],
.xdsoft_datetimepicker .xdsoft_timepicker[style*="display:none"] {
  display: none !important;
}

/* Time Column Header Label */
.xdsoft_datetimepicker .xdsoft_timepicker::before {
  content: 'HORA' !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-align: center !important;
  padding-bottom: 8px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

/* Hide legacy timepicker up/down buttons */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
  display: none !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  position: relative !important;
  height: 236px !important;
  max-height: 240px !important;
  border: none !important;
  background: transparent !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* Time pill items */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller) {
  background: transparent !important;
  border: none !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 2px 2px !important;
  border-radius: 6px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover {
  background-color: var(--able-bg, #F1F5F9) !important;
  color: var(--able-primary, #4680FF) !important;
  box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current {
  background-color: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(70, 128, 255, 0.35) !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current:hover {
  background-color: var(--able-primary-dark, #3F74E6) !important;
  color: #FFFFFF !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Native/custom thin scrollbar */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box::-webkit-scrollbar {
  width: 4px !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box::-webkit-scrollbar-track {
  background: transparent !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.xdsoft_datetimepicker .xdsoft_scrollbar {
  width: 4px !important;
  right: 1px !important;
}

.xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.xdsoft_datetimepicker .xdsoft_copyright {
  display: none !important;
}

/* --------------------------------------------------------------------------
   DARK MODE OVERRIDES (Complete theme coverage)
   -------------------------------------------------------------------------- */
[data-theme="dark"] .xdsoft_datetimepicker,
html.dark-mode .xdsoft_datetimepicker,
body.dark-mode .xdsoft_datetimepicker,
.dark-mode .xdsoft_datetimepicker,
.xdsoft_datetimepicker.xdsoft_dark {
  background-color: #1D2630 !important;
  border-color: #29313B !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker {
  border-bottom-color: #29313B !important;
}

/* Month & Year Labels in Dark Mode */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_label {
  background-color: transparent !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label:hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label:hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_label:hover {
  background-color: #29313B !important;
  border-color: #374151 !important;
  color: #4680FF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label>span,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label>span,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label>span,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_label>span,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_label>span {
  color: #FFFFFF !important;
}

/* Chevrons in Dark Mode */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_next {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev:hover,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next:hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev:hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next:hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev:hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_prev:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_monthpicker .xdsoft_next:hover {
  background-color: #29313B !important;
  border-color: #374151 !important;
  color: #FFFFFF !important;
}

/* Floating Dropdown Select in Dark Mode */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select,
html.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select,
body.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select,
.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select {
  background-color: #1D2630 !important;
  border-color: #29313B !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option,
html.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option,
body.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option,
.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
  background-color: transparent !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
  background-color: #29313B !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current,
html.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current,
body.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current,
.dark-mode .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
  background-color: #4680FF !important;
  color: #FFFFFF !important;
}

/* Calendar Days Table in Dark Mode */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar thead th,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar thead th,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar thead th,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar thead th,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar thead th {
  color: #94A3B8 !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td:hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td:hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td:hover {
  background-color: #29313B !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_current {
  background-color: #4680FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.45) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default>div,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current>div,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default>div,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current>div,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default>div,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current>div,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_default>div,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_current>div,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_default>div,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_current>div {
  color: #FFFFFF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current),
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current),
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current),
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current),
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current) {
  color: #60A5FA !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_today:not(.xdsoft_current)::after {
  background-color: #60A5FA !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_other_month,
html.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_other_month,
body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_other_month,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar tbody td.xdsoft_other_month,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar tbody td.xdsoft_other_month {
  color: #64748B !important;
  opacity: 0.4 !important;
}

/* Timepicker Column in Dark Mode */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker,
html.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker,
body.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker,
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker {
  border-left-color: #29313B !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker::before,
html.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker::before,
body.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker::before,
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker::before,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker::before {
  color: #94A3B8 !important;
  border-bottom-color: #29313B !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller),
html.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller),
body.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller),
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller),
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller) {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover,
html.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover,
body.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller):hover {
  background-color: #29313B !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current,
html.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current,
body.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current,
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:not(.xdsoft_scroller).xdsoft_current {
  background-color: #4680FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.45) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller,
html.dark-mode .xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller,
body.dark-mode .xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller,
.dark-mode .xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_scrollbar>.xdsoft_scroller {
  background: #475569 !important;
}

/* ==========================================================================
   Able Pro Global Modal Design
   ========================================================================== */
.modal-content {
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(19, 25, 32, 0.16) !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  overflow: hidden !important;
}

.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: none !important;
  content: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 16px 22px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Any non-close child (title or flex container) is placed on the left and expands */
.modal-header> :not(.close):not(button.close):not(.able-modal-close) {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.modal-header .modal-title,
.modal-header h4.modal-title,
.modal-header h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Able Pro Global Modal Close Button */
.modal-header .close,
.modal-header button.close,
.modal-header a.close,
.modal-content>.close,
.modal-content>button.close,
.able-modal-close {
  order: 9999 !important;
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  float: none !important;
  line-height: 1 !important;
}

.modal-header .close:hover,
.modal-header button.close:hover,
.modal-header a.close:hover,
.modal-content>.close:hover,
.modal-content>button.close:hover,
.able-modal-close:hover,
.modal-header .close:focus,
.modal-header button.close:focus {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  transform: rotate(90deg) scale(1.05) !important;
  opacity: 1 !important;
  outline: none !important;
}

.modal-header .close span,
.modal-header button.close span,
.modal-content>.close span,
.able-modal-close span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 22px !important;
  font-family: inherit !important;
  font-weight: 300 !important;
  margin-top: -2px !important;
  color: inherit !important;
  pointer-events: none !important;
}

.modal-header .close i,
.modal-header button.close i,
.modal-content>.close i,
.able-modal-close i {
  font-size: 15px !important;
  line-height: 1 !important;
  color: inherit !important;
  pointer-events: none !important;
}

/* Modals without modal-header where close is directly in modal-content */
.modal-content>.close,
.modal-content>button.close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 1050 !important;
}

.modal-body {
  padding: 24px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
}

.modal-footer {
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 16px 24px !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  background-color: #01C38D !important;
  border: 1px solid #01C38D !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.25) !important;
}

html.dark-mode .modal-footer .btn-primary,
html.dark-mode .modal-footer button[type="submit"],
[data-theme="dark"] .modal-footer .btn-primary,
[data-theme="dark"] .modal-footer button[type="submit"] {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
}

.modal-footer .btn-default {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-dark, #1D2630) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   Able Pro Global Dark Mode Modal Styles
   ========================================================================== */
html.dark-mode .modal-content,
body.dark-mode .modal-content,
[data-theme="dark"] .modal-content {
  background-color: var(--able-surface, #141822) !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-header,
body.dark-mode .modal-header,
[data-theme="dark"] .modal-header {
  background-color: var(--able-surface, #141822) !important;
  border-bottom-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .modal-header .modal-title,
html.dark-mode .modal-header h4.modal-title,
html.dark-mode .modal-header h4,
body.dark-mode .modal-header .modal-title,
body.dark-mode .modal-header h4.modal-title,
body.dark-mode .modal-header h4,
[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .modal-header h4.modal-title,
[data-theme="dark"] .modal-header h4 {
  color: var(--able-text-dark, #FFFFFF) !important;
}

html.dark-mode .modal-header .close,
html.dark-mode .modal-header button.close,
html.dark-mode .modal-header a.close,
html.dark-mode .modal-content>.close,
html.dark-mode .modal-content>button.close,
html.dark-mode .able-modal-close,
body.dark-mode .modal-header .close,
body.dark-mode .modal-header button.close,
body.dark-mode .modal-header a.close,
body.dark-mode .modal-content>.close,
body.dark-mode .modal-content>button.close,
body.dark-mode .able-modal-close,
[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .modal-header button.close,
[data-theme="dark"] .modal-header a.close,
[data-theme="dark"] .modal-content>.close,
[data-theme="dark"] .modal-content>button.close,
[data-theme="dark"] .able-modal-close {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #8B98A5 !important;
}

html.dark-mode .modal-header .close:hover,
html.dark-mode .modal-header button.close:hover,
html.dark-mode .modal-header a.close:hover,
html.dark-mode .modal-content>.close:hover,
html.dark-mode .modal-content>button.close:hover,
html.dark-mode .able-modal-close:hover,
body.dark-mode .modal-header .close:hover,
body.dark-mode .modal-header button.close:hover,
body.dark-mode .modal-header a.close:hover,
body.dark-mode .modal-content>.close:hover,
body.dark-mode .modal-content>button.close:hover,
body.dark-mode .able-modal-close:hover,
[data-theme="dark"] .modal-header .close:hover,
[data-theme="dark"] .modal-header button.close:hover,
[data-theme="dark"] .modal-header a.close:hover,
[data-theme="dark"] .modal-content>.close:hover,
[data-theme="dark"] .modal-content>button.close:hover,
[data-theme="dark"] .able-modal-close:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #EF4444 !important;
}

html.dark-mode .modal-body,
body.dark-mode .modal-body,
[data-theme="dark"] .modal-body {
  background-color: var(--able-surface, #141822) !important;
  color: var(--able-text-dark, #dadcde) !important;
}

html.dark-mode .modal-footer,
body.dark-mode .modal-footer,
[data-theme="dark"] .modal-footer {
  background-color: var(--able-surface-light, #0F131C) !important;
  border-top-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .modal-footer .btn-default,
body.dark-mode .modal-footer .btn-default,
[data-theme="dark"] .modal-footer .btn-default {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.modal-body .form-group {
  margin-bottom: 16px !important;
}

.modal-body label.control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.modal-body input.form-control,
.modal-body textarea.form-control {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}

.modal-body input.form-control:focus,
.modal-body textarea.form-control:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light, #E6F9F3) !important;
}

.modal-body .bootstrap-select .btn.dropdown-toggle {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  height: 38px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
}

/* ==========================================================================
   Able Pro Customer 360 / Client Profile Design
   ========================================================================== */

/* Hero Banner Card */
.able-customer-hero-card {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
}

.able-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.able-hero-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 12px !important;
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.able-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.able-hero-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.able-hero-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  font-size: 12.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
}

.able-hero-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  line-height: 1.2 !important;
}

/* Vertical Navigation Card */
.able-customer-nav-card {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  padding: 10px 8px !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
}

.able-customer-nav-card .able-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.able-customer-nav-card .able-nav-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.able-customer-nav-card .able-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  margin-bottom: 2px !important;
}

.able-customer-nav-card .able-nav-item:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-customer-nav-card .able-nav-item.active {
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

.able-customer-nav-card .able-nav-left-part {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.able-customer-nav-card .able-nav-icon {
  font-size: 15px !important;
  width: 20px !important;
  text-align: center !important;
  color: inherit !important;
  display: inline-block !important;
}

.able-customer-nav-card .able-nav-label {
  font-size: 13.5px !important;
}

.able-customer-nav-card .able-nav-badge {
  background-color: rgba(1, 195, 141, 0.12) !important;
  color: var(--able-primary, #01C38D) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}

.able-customer-nav-card .able-nav-item.active .able-nav-badge {
  background-color: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
}

/* Content Panel & Subtabs */
.able-content-panel {
  background-color: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.04);
  overflow: hidden;
}

.customer-profile-tabs.nav-tabs-horizontal {
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.customer-profile-tabs.nav-tabs-horizontal>li>a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 12px 18px !important;
  background: transparent !important;
}

.customer-profile-tabs.nav-tabs-horizontal>li.active>a,
.customer-profile-tabs.nav-tabs-horizontal>li>a:hover {
  color: var(--able-primary, #01C38D) !important;
  border-bottom-color: var(--able-primary, #01C38D) !important;
  background: transparent !important;
}

.able-panel-footer {
  background-color: var(--able-bg, #F8F9FA);
  border-top: 1px solid var(--able-border, #E8EBEE);
  padding: 16px 24px;
}

/* ==========================================================================
   ABLE PRO GRIDSTACK DASHBOARD & WIDGETS
   ========================================================================== */

.able-dashboard-toolbar {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.grid-stack {
  margin-top: 8px !important;
}

.grid-stack-item-content {
  overflow: hidden !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.grid-stack-item-content>.widget {
  height: 100% !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.grid-stack-item-content .panel_s {
  height: 100% !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  background: var(--able-surface) !important;
  border-radius: 12px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  border: 1px solid var(--able-border) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.grid-stack-item-content .panel_s:hover {
  box-shadow: 0 12px 32px rgba(19, 25, 32, 0.08) !important;
}

.grid-stack-item-content .panel-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  background: transparent !important;
}

.grid-stack-item-content .panel-body>.row {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.grid-stack-item-content .panel-body>.row>div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Able Pro Widget Dragger */
.widget-dragger {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--able-text-muted, #5B6B79) !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 6px !important;
  cursor: move !important;
  cursor: grab !important;
  z-index: 99 !important;
  opacity: 0.65;
  transition: all 0.2s ease-in-out !important;
}

.widget-dragger:before {
  content: "\f58e" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
}

.grid-stack-item:hover .widget-dragger,
.widget-dragger:hover {
  opacity: 1 !important;
  color: var(--able-primary, #01C38D) !important;
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  transform: scale(1.05);
}

.widget-dragger:active {
  cursor: grabbing !important;
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
}

.grid-stack-item-content .panel-body>.tw-flex:first-of-type,
.grid-stack-item-content .panel-body>.widget-dragger+.tw-flex,
.grid-stack-item-content .panel-body>.horizontal-scrollable-tabs {
  padding-left: 28px !important;
}

.relative-chart-wrapper canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#calendar {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

.activity-feed,
.todo-items-container,
.table-responsive {
  height: 100% !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Able Pro Stat Cards */
.donezo-stat-card {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.donezo-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(19, 25, 32, 0.08) !important;
}

.donezo-stat-card.donezo-stat-featured {
  background: linear-gradient(135deg, #01C38D 0%, #00AA7B 100%) !important;
  border-color: #01C38D !important;
  color: #FFFFFF !important;
}

.donezo-stat-card.donezo-stat-featured .donezo-stat-label,
.donezo-stat-card.donezo-stat-featured .donezo-stat-number,
.donezo-stat-card.donezo-stat-featured .donezo-stat-fraction {
  color: #FFFFFF !important;
}

.donezo-stat-card.donezo-stat-featured .donezo-stat-arrow {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

.donezo-stat-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.donezo-stat-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--able-text-muted) !important;
}

.donezo-stat-number {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--able-text-dark) !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.donezo-stat-arrow {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.donezo-stat-arrow:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
}

.donezo-stat-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--able-text-muted) !important;
}

.donezo-percent-success {
  background: rgba(46, 204, 113, 0.12) !important;
  color: #2ECC71 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* FullCalendar styling in Able Pro */
#calendar .fc-toolbar {
  margin-bottom: 16px !important;
}

#calendar .fc-toolbar h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
}

#calendar .fc-button {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

#calendar .fc-button-active,
#calendar .fc-state-active {
  background: var(--able-primary) !important;
  color: #ffffff !important;
  border-color: var(--able-primary) !important;
}

#calendar .fc-day-header {
  padding: 8px 0 !important;
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  font-weight: 600 !important;
  border-color: var(--able-border) !important;
}

#calendar td,
#calendar th {
  border-color: var(--able-border) !important;
}

/* Mobile Gridstack */
@media (max-width: 768px) {
  .grid-stack {
    height: auto !important;
  }

  .grid-stack-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
  }

  .grid-stack-item-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  .grid-stack-item-content>.widget,
  .grid-stack-item-content .panel_s,
  .grid-stack-item-content .panel-body {
    height: auto !important;
  }

  #calendar,
  .activity-feed,
  .todo-items-container,
  .table-responsive {
    height: auto !important;
    max-height: 60vh !important;
  }
}

/* Able Pro Full-Screen Preloader */
#able-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0B0E14;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  user-select: none;
}

html:not(.dark-mode) #able-page-loader,
html[data-theme="light"] #able-page-loader {
  background-color: #F8F9FA;
}

#able-page-loader.is-done {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.able-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateY(-8px);
}

.able-loader-logo-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.able-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(1, 195, 141, 0.15);
  border-top-color: #01C38D;
  animation: able-loader-spin 0.9s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
  box-shadow: 0 0 24px rgba(1, 195, 141, 0.25);
}

.able-loader-ring-inner {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 2px dashed rgba(1, 195, 141, 0.35);
  animation: able-loader-spin-reverse 2.4s linear infinite;
}

.able-loader-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: able-loader-pulse 1.8s ease-in-out infinite;
}

.able-loader-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.able-loader-brand .brand-text {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}

html:not(.dark-mode) .able-loader-brand .brand-text,
html[data-theme="light"] .able-loader-brand .brand-text {
  color: #1D2630;
}

.able-loader-brand .brand-badge {
  background: linear-gradient(135deg, #01C38D 0%, #00AA7B 100%);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.able-loader-progress-track {
  width: 140px;
  height: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

html:not(.dark-mode) .able-loader-progress-track,
html[data-theme="light"] .able-loader-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.able-loader-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #01C38D, #00E5A3, #01C38D);
  border-radius: 4px;
  animation: able-loader-slide 1.4s ease-in-out infinite;
}

@keyframes able-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes able-loader-spin-reverse {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes able-loader-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes able-loader-slide {
  0% {
    left: -40%;
  }

  50% {
    left: 40%;
    width: 50%;
  }

  100% {
    left: 100%;
    width: 30%;
  }
}

/* ==========================================================================
   ABLE PRO PROJECT TABS & OVERVIEW
   ========================================================================== */

.able-project-nav-container {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 6px 8px !important;
  box-shadow: var(--able-card-shadow) !important;
}

.able-project-nav-link {
  color: var(--able-text-muted) !important;
}

.able-project-nav-link:hover {
  color: var(--able-primary) !important;
  background: var(--able-bg) !important;
}

.able-project-nav-item.active .able-project-nav-link {
  color: var(--able-primary) !important;
  background: var(--able-primary-light) !important;
}

.able-project-nav-item.active .able-project-nav-link i {
  color: var(--able-primary) !important;
}

/* Dark mode dashboard & project cards */
html.dark-mode .dashboard-card,
body.dark-mode .dashboard-card,
[data-theme="dark"] .dashboard-card {
  background: var(--able-surface) !important;
  border-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

html.dark-mode .dashboard-card .tw-bg-slate-50,
body.dark-mode .dashboard-card .tw-bg-slate-50,
[data-theme="dark"] .dashboard-card .tw-bg-slate-50 {
  background: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

html.dark-mode .dashboard-card .tw-text-slate-800,
html.dark-mode .dashboard-card .tw-text-slate-900,
body.dark-mode .dashboard-card .tw-text-slate-800,
body.dark-mode .dashboard-card .tw-text-slate-900,
[data-theme="dark"] .dashboard-card .tw-text-slate-800,
[data-theme="dark"] .dashboard-card .tw-text-slate-900 {
  color: var(--able-text-dark) !important;
}

html.dark-mode .dashboard-card .tw-text-slate-400,
html.dark-mode .dashboard-card .tw-text-slate-500,
html.dark-mode .dashboard-card .tw-text-slate-600,
body.dark-mode .dashboard-card .tw-text-slate-400,
body.dark-mode .dashboard-card .tw-text-slate-500,
body.dark-mode .dashboard-card .tw-text-slate-600,
[data-theme="dark"] .dashboard-card .tw-text-slate-400,
[data-theme="dark"] .dashboard-card .tw-text-slate-500,
[data-theme="dark"] .dashboard-card .tw-text-slate-600 {
  color: var(--able-text-muted) !important;
}

html.dark-mode .dashboard-card .tw-border-slate-100,
html.dark-mode .dashboard-card .tw-border-slate-50,
body.dark-mode .dashboard-card .tw-border-slate-100,
body.dark-mode .dashboard-card .tw-border-slate-50,
[data-theme="dark"] .dashboard-card .tw-border-slate-100,
[data-theme="dark"] .dashboard-card .tw-border-slate-50 {
  border-color: var(--able-border) !important;
}

html.dark-mode .dashboard-card .tw-bg-slate-100,
body.dark-mode .dashboard-card .tw-bg-slate-100,
[data-theme="dark"] .dashboard-card .tw-bg-slate-100 {
  background: var(--able-border) !important;
}

/* ==========================================================================
   ABLE PRO TASKS TABLE & DATATABLES
   ========================================================================== */

/* Able Pro Tasks Card Wrapper */
.able-tasks-card {
  background: var(--able-surface, #ffffff) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 12px !important;
  box-shadow: var(--able-card-shadow, 0 4px 18px -2px rgba(0, 0, 0, 0.03)) !important;
}

/* ==========================================================================
   ABLE PRO UNIVERSAL DATATABLES SYSTEM (LIGHT MODE)
   ========================================================================== */

/* DataTables Wrapper Controls (Length, Buttons, Filter) */
.dataTables_wrapper .dataTables_length,
.tasks-table .dataTables_length {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  vertical-align: middle !important;
}

.dataTables_wrapper .dataTables_length label,
.tasks-table .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  margin-bottom: 0 !important;
}

/* Arrow 1 Fix: Length selector 38px, rounded 8px, custom SVG chevron arrow */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select[name$="_length"],
.table-rel-tasks_length select,
.table-tasks_length select,
.tasks-table .dataTables_length select {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 13px 13px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper select[name$="_length"]:hover,
.dataTables_wrapper select[name$="_length"]:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px var(--able-primary-light, #E6F9F3) !important;
}

/* Arrow 2 Fix: Action Buttons (Exportar, Reload, Options) */
.dataTables_wrapper .dt-buttons,
.tasks-table .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px !important;
  margin-bottom: 12px !important;
  vertical-align: middle !important;
  gap: 6px !important;
}

.dataTables_wrapper .dt-buttons.btn-group>.btn,
.tasks-table .dt-buttons.btn-group>.btn {
  float: none !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .buttons-collection,
.dataTables_wrapper .dt-buttons .btn-default-dt-options,
.dataTables_wrapper .dt-buttons .btn-dt-reload,
.tasks-table .dt-buttons .btn,
.tasks-table .dt-buttons .buttons-collection,
.table-rel-tasks_wrapper .dt-buttons .btn {
  height: 38px !important;
  line-height: 24px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .buttons-collection:hover,
.dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
.dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
.tasks-table .dt-buttons .btn:hover,
.table-rel-tasks_wrapper .dt-buttons .btn:hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(1, 195, 141, 0.12) !important;
}

.dataTables_wrapper .dt-buttons .btn:active,
.dataTables_wrapper .dt-buttons .buttons-collection:active,
.dataTables_wrapper .dt-buttons .btn-dt-reload:active {
  transform: translateY(0) !important;
}

/* Reload Icon styling with smooth rotate on hover */
.dataTables_wrapper .dt-buttons .btn-dt-reload {
  width: 38px !important;
  padding: 0 !important;
}

.dataTables_wrapper .dt-buttons .btn-dt-reload i,
.dataTables_wrapper .dt-buttons .btn-dt-reload .fa {
  font-size: 13px !important;
  transition: transform 0.3s ease !important;
}

.dataTables_wrapper .dt-buttons .btn-dt-reload:hover i,
.dataTables_wrapper .dt-buttons .btn-dt-reload:hover .fa {
  transform: rotate(90deg) !important;
}

/* Export Dropdown Menu & Backdrop Fix */
div.dt-button-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99990 !important;
  background: transparent !important;
}

.dt-button-collection,
div.dt-button-collection {
  position: absolute !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
  margin-top: 6px !important;
  min-width: 170px !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

div.dt-button-collection ul.dropdown-menu {
  position: relative !important;
  display: block !important;
  z-index: 100000 !important;
  min-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dt-button-collection .dt-button,
.dt-button-collection button.dt-button,
.dt-button-collection a.dt-button,
div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button,
div.dt-button-collection .dropdown-menu>li>a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100001 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.dt-button-collection .dt-button span,
div.dt-button-collection a.dt-button span,
div.dt-button-collection button.dt-button span,
div.dt-button-collection .dropdown-menu>li>a span {
  pointer-events: none !important;
}

.dt-button-collection .dt-button:hover,
.dt-button-collection button.dt-button:hover,
.dt-button-collection a.dt-button:hover,
div.dt-button-collection a.dt-button:hover,
div.dt-button-collection button.dt-button:hover,
div.dt-button-collection .dropdown-menu>li>a:hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Arrows 3 & 4 Fix: Unified Seamless Search Bar Container */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px !important;
  text-align: right !important;
}

.dataTables_wrapper .dataTables_filter label {
  font-weight: normal !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
  display: inline-block !important;
}

.dataTables_wrapper .dataTables_filter .input-group {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 38px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.dataTables_wrapper .dataTables_filter .input-group:focus-within,
.dataTables_wrapper .dataTables_filter .input-group:hover {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px var(--able-primary-light, #E6F9F3) !important;
}

.dataTables_wrapper .dataTables_filter .input-group .input-group-addon {
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 12px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: auto !important;
  min-width: 34px !important;
  height: 100% !important;
}

.dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
.dataTables_wrapper .dataTables_filter .input-group .input-group-addon i {
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
}

.dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
.dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i {
  color: var(--able-primary, #01C38D) !important;
}

.dataTables_wrapper .dataTables_filter .input-group input[type="search"],
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input.form-control,
.tasks-table .dataTables_filter input,
.table-rel-tasks_filter input,
.table-tasks_filter input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: 100% !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  border-radius: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder,
.dataTables_wrapper .dataTables_filter input.form-control::placeholder {
  color: var(--able-text-muted, #8B98A5) !important;
  opacity: 0.8 !important;
}

/* Arrow 4 Fix: Universal DataTables Header (High-contrast, 11.5px bold, crisp typography) */
table.dataTable,
.dataTables_wrapper table.table,
.table-rel-tasks,
.table-tasks,
.tasks-table table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  border: none !important;
}

table.dataTable thead th,
.dataTables_wrapper table.table thead th,
.table-rel-tasks thead th,
.table-tasks thead th,
.tasks-table table.table thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  position: relative !important;
  user-select: none !important;
}

/* Sorting arrows styling */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer !important;
  padding-right: 26px !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 0.3 !important;
  font-size: 11px !important;
  bottom: 12px !important;
  right: 10px !important;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 1 !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Universal Table Rows & Cells */
table.dataTable tbody tr,
.dataTables_wrapper table.table tbody tr {
  background-color: var(--able-surface, #FFFFFF) !important;
  transition: background-color 0.15s ease !important;
}

table.dataTable tbody td,
.dataTables_wrapper table.table tbody td,
.table-rel-tasks tbody td,
.table-tasks tbody td,
.tasks-table table.table tbody td {
  padding: 13px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

table.dataTable tbody tr:hover td,
.dataTables_wrapper table.table tbody tr:hover td,
.table-rel-tasks tbody tr:hover td,
.table-tasks tbody tr:hover td,
.tasks-table table.table tbody tr:hover td {
  background-color: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Empty Table State: Spacious, centered, clean Able Pro card style */
table.dataTable tbody td.dataTables_empty,
.dataTables_wrapper table.table tbody td.dataTables_empty {
  padding: 44px 20px !important;
  text-align: center !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--able-surface, #FFFFFF) !important;
}

/* Table Checkboxes & Action Links */
table.dataTable input[type="checkbox"],
.dataTables_wrapper table.table input[type="checkbox"] {
  accent-color: var(--able-primary, #01C38D) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

table.dataTable tbody td a:not(.btn),
.dataTables_wrapper table.table tbody td a:not(.btn) {
  color: var(--able-text-dark, #1D2630);
  font-weight: 500;
  transition: color 0.15s ease;
}

table.dataTable tbody td a:not(.btn):hover,
.dataTables_wrapper table.table tbody td a:not(.btn):hover {
  color: var(--able-primary, #01C38D) !important;
  text-decoration: none !important;
}

/* Status Badges in Table */
.table-rel-tasks .task-status-table,
.table-tasks .task-status-table,
.tasks-table .label,
.table-tasks a[task-status-table],
.table-rel-tasks a[task-status-table],
.tasks-table a[task-status-table],
[task-status-table] {
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

/* Light mode Able Pro status pill colors */
[task-status-table="1"] {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}

[task-status-table="2"] {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
  border: 1px solid #C7D2FE !important;
}

[task-status-table="3"] {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid #FDE68A !important;
}

[task-status-table="4"] {
  background: #F0F9FF !important;
  color: #0284C7 !important;
  border: 1px solid #BAE6FD !important;
}

[task-status-table="5"] {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}

/* Dark Mode Status Badges */
html.dark-mode [task-status-table],
body.dark-mode [task-status-table],
[data-theme="dark"] [task-status-table],
html.dark-mode .table-tasks a[task-status-table],
body.dark-mode .table-tasks a[task-status-table],
[data-theme="dark"] .table-tasks a[task-status-table],
html.dark-mode .table-rel-tasks a[task-status-table],
body.dark-mode .table-rel-tasks a[task-status-table],
[data-theme="dark"] .table-rel-tasks a[task-status-table] {
  text-shadow: none !important;
}

html.dark-mode [task-status-table="1"],
body.dark-mode [task-status-table="1"],
[data-theme="dark"] [task-status-table="1"] {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html.dark-mode [task-status-table="2"],
body.dark-mode [task-status-table="2"],
[data-theme="dark"] [task-status-table="2"] {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #818CF8 !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

html.dark-mode [task-status-table="3"],
body.dark-mode [task-status-table="3"],
[data-theme="dark"] [task-status-table="3"] {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode [task-status-table="4"],
body.dark-mode [task-status-table="4"],
[data-theme="dark"] [task-status-table="4"] {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

html.dark-mode [task-status-table="5"],
body.dark-mode [task-status-table="5"],
[data-theme="dark"] [task-status-table="5"] {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[task-status-table] .chevron {
  border-top-color: currentColor !important;
  opacity: 0.75;
}

/* Universal DataTables Pagination */
.dataTables_wrapper .dataTables_paginate,
.tasks-table .dataTables_paginate,
.table-rel-tasks_paginate,
.table-tasks_paginate {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
.dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
.tasks-table .dataTables_paginate .paginate_button:not(li),
.table-rel-tasks_paginate .paginate_button:not(li),
.table-tasks_paginate .paginate_button:not(li) {
  border-radius: 8px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
.dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
.tasks-table .dataTables_paginate .paginate_button:not(li):hover,
.table-rel-tasks_paginate .paginate_button:not(li):hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
.tasks-table .dataTables_paginate .paginate_button:not(li).current,
.table-rel-tasks_paginate .paginate_button:not(li).current {
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li).disabled,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dataTables_wrapper .dataTables_info,
.tasks-table .dataTables_info,
.table-rel-tasks_info,
.table-tasks_info {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ==========================================================================
   ABLE PRO OFFICIAL KANBAN BOARD (MATCHING TEMPLATE)
   ========================================================================== */

#kan-ban-tab {
  padding-bottom: 30px !important;
  background: transparent !important;
  overflow-x: auto !important;
}

#kan-ban {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  width: max-content !important;
  min-width: 100% !important;
}

.able-pro-kanban-col,
.tasks-kanban.kan-ban-col {
  min-width: 275px !important;
  width: 285px !important;
  max-width: 285px !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: top !important;
  float: none !important;
  align-self: flex-start !important;
}

.tasks-kanban .kan-ban-col-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

.able-pro-column-box {
  background: #F4F6F8 !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  padding: 16px !important;
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
}

/* OVERRIDE PERFEX MAIN.JS FORCED HEIGHTS & SCROLLBARS */
.tasks-kanban .kan-ban-content-wrapper,
.tasks-kanban .kan-ban-content {
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

.tasks-kanban ul.tasks-status {
  min-height: 8px !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.able-pro-column-header {
  margin-bottom: 14px !important;
}

.able-pro-column-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1D2630 !important;
  margin: 0 !important;
}

.able-pro-task-item {
  list-style: none !important;
  margin-bottom: 12px !important;
  cursor: grab !important;
}

.able-pro-task-item.ui-sortable-helper {
  cursor: grabbing !important;
  transform: rotate(2deg) scale(1.02) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
}

.able-pro-card-box {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-pro-task-item:hover .able-pro-card-box {
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.able-pro-card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.able-pro-card-title a {
  color: #1D2630 !important;
}

.able-pro-card-title a:hover {
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-story-link {
  color: var(--able-primary, #01C38D) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.able-pro-story-link:hover {
  text-decoration: underline !important;
}

.able-pro-card-more-btn {
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  color: #8C8C8C !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.able-pro-card-more-btn:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

.able-pro-add-task-btn {
  width: 100% !important;
  border: 1px dashed #BEC8D0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5B6B79 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-align: center !important;
}

.able-pro-add-task-btn:hover {
  background: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark mode for Able Pro Kanban */
html.dark-mode .able-pro-column-box,
body.dark-mode .able-pro-column-box,
[data-theme="dark"] .able-pro-column-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-pro-column-title,
body.dark-mode .able-pro-column-title,
[data-theme="dark"] .able-pro-column-title {
  color: #E8EBEE !important;
}

html.dark-mode .able-pro-card-box,
body.dark-mode .able-pro-card-box,
[data-theme="dark"] .able-pro-card-box {
  background: #242E3B !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-pro-card-title a,
body.dark-mode .able-pro-card-title a,
[data-theme="dark"] .able-pro-card-title a {
  color: #E8EBEE !important;
}

html.dark-mode .able-pro-add-task-btn,
body.dark-mode .able-pro-add-task-btn,
[data-theme="dark"] .able-pro-add-task-btn {
  border-color: #3F4D5A !important;
  color: #8C8C8C !important;
}

html.dark-mode .able-pro-add-task-btn:hover,
body.dark-mode .able-pro-add-task-btn:hover,
[data-theme="dark"] .able-pro-add-task-btn:hover {
  background: #242E3B !important;
  border-color: var(--able-primary) !important;
  color: var(--able-primary) !important;
}

/* ==========================================================================
   ABLE PRO TASK DETAIL MODAL (2-COLUMN DIALOG WITH TABS)
   ========================================================================== */

#task-modal.modal {
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}

#task-modal .modal-dialog {
  position: relative !important;
  width: 1160px !important;
  max-width: 96vw !important;
  margin: 25px auto !important;
  border-radius: 16px !important;
  z-index: 1050 !important;
  animation: ableModalFadeIn 0.2s ease !important;
}

@keyframes ableModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#task-modal .modal-content {
  border-radius: 16px !important;
  border: 1px solid #E8EBEE !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.18) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Modal Header */
#task-modal .task-single-header {
  background: #ffffff !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  gap: 16px !important;
}

#task-modal .task-single-header-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#task-modal .task-single-header .modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  letter-spacing: -0.2px !important;
}

#task-modal .task-single-header .modal-title .label,
#task-modal .task-single-header .modal-title .task-status-table {
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
}

#task-modal .task-single-header .close,
#task-modal .task-single-header .able-modal-close {
  position: static !important;
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#task-modal .task-single-header .close:hover,
#task-modal .task-single-header .able-modal-close:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: rotate(90deg) scale(1.05) !important;
}

#task-modal .task-single-header p {
  display: none !important;
}

/* Modal Body: 2-Column Split */
#task-modal .modal-body {
  padding: 0 !important;
  background: #ffffff !important;
}

#task-modal .modal-body .row {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
}

/* Left Column */
#task-modal .task-single-col-left {
  width: 68% !important;
  float: left !important;
  padding: 24px 28px !important;
  background: #ffffff !important;
  min-height: 560px !important;
  border-right: 1px solid #E8EBEE !important;
}

/* Right Column (Properties Card) */
#task-modal .task-single-col-right {
  width: 32% !important;
  float: left !important;
  background: #F8F9FA !important;
  padding: 24px 20px !important;
  min-height: 560px !important;
  position: relative !important;
}

/* Meta Creator/Relation Box */
#task-modal .task-info-created,
#task-modal .task-single-related-wrapper {
  font-size: 12.5px !important;
  color: #5B6B79 !important;
  margin-bottom: 4px !important;
  line-height: 1.5 !important;
}

#task-modal .task-single-related-wrapper a {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

/* Action Buttons Bar */
#task-modal .task-single-col-left .btn {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
}

#task-modal .task-single-col-left .btn-primary {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  background-color: #01C38D !important;
  border: 1px solid #01C38D !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.25) !important;
  border-radius: 8px !important;
}

html.dark-mode #task-modal .task-single-col-left .btn-primary,
[data-theme="dark"] #task-modal .task-single-col-left .btn-primary {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
  border-radius: 12px !important;
}

#task-modal .task-single-col-left .btn-default {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  color: #5B6B79 !important;
}

#task-modal .task-single-col-left .btn-default:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

/* Description Card */
#task-modal .task-single-col-left h4.th,
#task-modal .task-single-col-left h4.bold,
#task-modal .task-single-col-left h4.task-info-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

#task-modal #task_view_description {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #5B6B79 !important;
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

/* Able Pro Nav Tabs inside Task Modal */
#task-modal .able-task-tabs-container {
  margin-top: 20px !important;
}

#task-modal .able-nav-tabs {
  display: flex !important;
  gap: 6px !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding-bottom: 0 !important;
}

#task-modal .able-nav-tabs li {
  margin-bottom: -1px !important;
}

#task-modal .able-nav-tabs li a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: #5B6B79 !important;
  padding: 8px 14px !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

#task-modal .able-nav-tabs li a:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

#task-modal .able-nav-tabs li.active a {
  background: transparent !important;
  color: var(--able-primary, #01C38D) !important;
  border-bottom: 2px solid var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
}

#task-modal .able-tab-content {
  padding-top: 14px !important;
}

#task-modal .tasks-subtasks-wrapper,
#task-modal .checklist-templates-wrapper {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}

#task-modal .checklist-item {
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  transition: background 0.15s ease !important;
}

#task-modal .checklist:hover,
#task-modal .checklist-item:hover {
  background: #F1F5F9 !important;
}

#task-modal #task-comments .task-comment {
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

#task-modal #task-attachment,
#task-modal .dropzone:not(#task-comment-form) {
  border: 2px dashed #BEC8D0 !important;
  border-radius: 12px !important;
  background: #F8F9FA !important;
  padding: 18px !important;
  text-align: center !important;
  color: #5B6B79 !important;
  font-size: 12px !important;
  margin-top: 10px !important;
}

#task-modal #task-attachment:hover,
#task-modal .dropzone:not(#task-comment-form):hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.04) !important;
  color: var(--able-primary, #01C38D) !important;
}

#task-modal #task-comment-form {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
}

#task-modal #dropzoneTaskComment,
#task-modal .task-comment-dropzone {
  border: 1.5px dashed #CBD5E1 !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  text-align: center !important;
  padding: 22px 15px !important;
  min-height: 80px !important;
  max-height: 90px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#task-modal #dropzoneTaskComment:hover,
#task-modal .task-comment-dropzone:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.04) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* ==========================================================================
   ABLE PRO TASK RIGHT COLUMN (SURFACE CARDS & PROPERTY PANELS)
   ========================================================================== */

#task-modal .task-single-col-right {
  width: 34% !important;
  flex: 0 0 34% !important;
  background: #F8F9FA !important;
  border-left: 1px solid #E8EBEE !important;
  padding: 20px 16px !important;
  min-height: 560px !important;
  position: relative !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Assigned From Alert */
#task-modal .able-assigned-from-alert {
  border-radius: 10px !important;
  font-size: 12.5px !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1E40AF !important;
}

/* Able Pro Surface Cards */
#task-modal .task-single-col-right .able-card {
  background: #FFFFFF !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(19, 25, 32, 0.04) !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#task-modal .task-single-col-right .able-card:hover,
#task-modal .task-single-col-right .able-card:focus-within,
#task-modal .task-single-col-right .able-card:has(.open) {
  border-color: #DDE2E7 !important;
  box-shadow: 0 4px 14px rgba(19, 25, 32, 0.07) !important;
  z-index: 20 !important;
}

/* Able Pro Card Header */
#task-modal .task-single-col-right .able-card-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

#task-modal .task-single-col-right .able-card-header h4.task-info-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: -0.1px !important;
}

/* Tonal Icon Badges */
#task-modal .task-single-col-right .able-card-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

#task-modal .task-single-col-right .able-badge-primary {
  background: rgba(1, 195, 141, 0.12) !important;
  color: #01C38D !important;
}

#task-modal .task-single-col-right .able-badge-blue {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #3B82F6 !important;
}

#task-modal .task-single-col-right .able-badge-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #F59E0B !important;
}

#task-modal .task-single-col-right .able-badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .able-badge-purple {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8B5CF6 !important;
}

#task-modal .task-single-col-right .able-badge-cyan {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284C7 !important;
}

/* Able Pro Action Button (••• & +) */
#task-modal .task-single-col-right .able-btn-icon,
#task-modal .task-single-col-right .task-menu-options .trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  color: #64748B !important;
  font-size: 13px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

#task-modal .task-single-col-right .able-btn-icon:hover,
#task-modal .task-single-col-right .task-menu-options .trigger:hover {
  background: var(--able-primary-light, #E9F0FF) !important;
  color: var(--able-primary, #01C38D) !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.15) !important;
}

#task-modal .task-single-col-right .able-btn-icon-sm {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}

/* Card Body */
#task-modal .task-single-col-right .able-card-body {
  padding: 12px 14px !important;
}

#task-modal .task-single-col-right .able-card-body.tw-p-0 {
  padding: 0 !important;
}

/* Task Info Property Items List */
#task-modal .task-single-col-right .task-info-list {
  padding: 2px 0 !important;
}

#task-modal .task-single-col-right .task-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin: 0 !important;
  transition: background 0.15s ease !important;
  background: transparent !important;
}

#task-modal .task-single-col-right .task-info:last-of-type {
  border-bottom: none !important;
}

#task-modal .task-single-col-right .task-info:hover {
  background: #F8F9FA !important;
}

#task-modal .task-single-col-right .task-info h5 {
  font-size: 12.5px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
  line-height: 1.4 !important;
}

#task-modal .task-single-col-right .task-info h5>i,
#task-modal .task-single-col-right .task-info .task-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  margin: 0 6px 0 0 !important;
  text-align: center !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  float: none !important;
}

/* Tonal Icons per property */
#task-modal .task-single-col-right .task-info-status .task-info-icon {
  background: rgba(1, 195, 141, 0.12) !important;
  color: #01C38D !important;
}

#task-modal .task-single-col-right .task-info-finished .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-info-start-date .task-info-icon {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #3B82F6 !important;
}

#task-modal .task-single-col-right .task-info-due-date .task-info-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #F59E0B !important;
}

#task-modal .task-single-col-right .task-info-priority .task-info-icon {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}

#task-modal .task-single-col-right .task-info-hourly-rate .task-info-icon {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8B5CF6 !important;
}

#task-modal .task-single-col-right .task-info-billable .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-billable-amount .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-info-user-logged-time .task-info-icon {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #0891B2 !important;
}

#task-modal .task-single-col-right .task-info-total-logged-time .task-info-icon {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284C7 !important;
}

#task-modal .task-single-col-right .task-info h5 span,
#task-modal .task-single-col-right .task-info h5 a {
  font-weight: 600 !important;
  color: #1D2630 !important;
  font-size: 12.5px !important;
}

/* Datepicker & Inline Editable Inputs */
#task-modal .task-single-col-right .task-info-inline-input-edit {
  border: 1px solid #E2E8F0 !important;
  background: #F8F9FA !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1D2630 !important;
  text-align: right !important;
  max-width: 150px !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .task-info-inline-input-edit:focus,
#task-modal .task-single-col-right .task-info-inline-input-edit:hover {
  background: #FFFFFF !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px rgba(1, 195, 141, 0.15) !important;
  outline: none !important;
}

/* Priority & Status Pills */
#task-modal .task-single-col-right .able-priority-badge {
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Tags Container */
#task-modal .task-single-col-right .able-task-tags-container {
  padding: 10px 14px !important;
  border-top: 1px solid #F1F5F9 !important;
  background: #FAFBFD !important;
}

#task-modal .task-single-col-right .tagsinput {
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  min-height: 34px !important;
}

#task-modal .task-single-col-right .tagsinput .tag {
  background: var(--able-primary-light, #E9F0FF) !important;
  color: var(--able-primary, #01C38D) !important;
  border: 1px solid rgba(1, 195, 141, 0.2) !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

#task-modal .task-single-col-right .tagsinput .tag a {
  color: var(--able-primary, #01C38D) !important;
  opacity: 0.7 !important;
  margin-left: 4px !important;
}

#task-modal .task-single-col-right .tagsinput .tag a:hover {
  opacity: 1 !important;
}

/* Able Pro Avatar Stack for Assignees & Followers */
#task-modal .task-single-col-right .able-avatar-stack {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  transition: transform 0.15s ease !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user:hover {
  transform: translateY(-2px) scale(1.05) !important;
  z-index: 10 !important;
}

#task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  object-fit: cover !important;
}

#task-modal .task-single-col-right .able-avatar-stack .remove-task-user {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  text-decoration: none !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user:hover .remove-task-user {
  display: flex !important;
}

/* Dependencies Items */
#task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
#task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div {
  border-radius: 8px !important;
  border: 1px solid #E8EBEE !important;
  background: #FAFBFD !important;
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div:hover,
#task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div:hover {
  border-color: #CBD5E1 !important;
  background: #FFFFFF !important;
}

/* Dropzone in Sidebar */
#task-modal .task-single-col-right .dropzone {
  border: 2px dashed #CBD5E1 !important;
  border-radius: 10px !important;
  background: #FAFBFD !important;
  padding: 18px 12px !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  min-height: auto !important;
}

#task-modal .task-single-col-right .dropzone:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.03) !important;
}

#task-modal .task-single-col-right .gpicker {
  background: #FFFFFF !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .gpicker:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Hide raw hr separators when using Able Pro cards */
#task-modal .task-single-col-right .task-info-separator {
  display: none !important;
}

/* Dark mode Task Modal */
html.dark-mode #task-modal .modal-content,
body.dark-mode #task-modal .modal-content,
[data-theme="dark"] #task-modal .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .modal-body,
body.dark-mode #task-modal .modal-body,
[data-theme="dark"] #task-modal .modal-body {
  background: #1B232C !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .modal-header,
body.dark-mode #task-modal .modal-header,
[data-theme="dark"] #task-modal .modal-header {
  background: #1B232C !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode #task-modal .modal-footer,
body.dark-mode #task-modal .modal-footer,
[data-theme="dark"] #task-modal .modal-footer {
  background: #1B232C !important;
  border-top: 1px solid #2E3844 !important;
}

html.dark-mode #task-modal .task-single-header,
html.dark-mode #task-modal .task-single-col-left,
body.dark-mode #task-modal .task-single-header,
body.dark-mode #task-modal .task-single-col-left,
[data-theme="dark"] #task-modal .task-single-header,
[data-theme="dark"] #task-modal .task-single-col-left {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right,
body.dark-mode #task-modal .task-single-col-right,
[data-theme="dark"] #task-modal .task-single-col-right {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

/* Headings & Texts inside Task Modal */
html.dark-mode #task-modal .modal-title,
html.dark-mode #task-modal h4,
html.dark-mode #task-modal h5,
html.dark-mode #task-modal .task-info-heading,
html.dark-mode #task-modal .chk-heading,
html.dark-mode #task-modal .tw-text-neutral-800,
html.dark-mode #task-modal .tw-text-neutral-700,
html.dark-mode #task-modal .tw-text-neutral-600,
body.dark-mode #task-modal .modal-title,
body.dark-mode #task-modal h4,
body.dark-mode #task-modal h5,
body.dark-mode #task-modal .task-info-heading,
body.dark-mode #task-modal .chk-heading,
body.dark-mode #task-modal .tw-text-neutral-800,
body.dark-mode #task-modal .tw-text-neutral-700,
body.dark-mode #task-modal .tw-text-neutral-600,
[data-theme="dark"] #task-modal .modal-title,
[data-theme="dark"] #task-modal h4,
[data-theme="dark"] #task-modal h5,
[data-theme="dark"] #task-modal .task-info-heading,
[data-theme="dark"] #task-modal .chk-heading,
[data-theme="dark"] #task-modal .tw-text-neutral-800,
[data-theme="dark"] #task-modal .tw-text-neutral-700,
[data-theme="dark"] #task-modal .tw-text-neutral-600 {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-info-created,
html.dark-mode #task-modal .task-single-related-wrapper,
html.dark-mode #task-modal .task-info h5,
html.dark-mode #task-modal .text-muted,
body.dark-mode #task-modal .task-info-created,
body.dark-mode #task-modal .task-single-related-wrapper,
body.dark-mode #task-modal .task-info h5,
body.dark-mode #task-modal .text-muted,
[data-theme="dark"] #task-modal .task-info-created,
[data-theme="dark"] #task-modal .task-single-related-wrapper,
[data-theme="dark"] #task-modal .task-info h5,
[data-theme="dark"] #task-modal .text-muted {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-info h5 span,
html.dark-mode #task-modal .task-info h5 a,
html.dark-mode #task-modal .task-info h5 input,
html.dark-mode #task-modal .task-single-related-wrapper a,
body.dark-mode #task-modal .task-info h5 span,
body.dark-mode #task-modal .task-info h5 a,
body.dark-mode #task-modal .task-info h5 input,
body.dark-mode #task-modal .task-single-related-wrapper a,
[data-theme="dark"] #task-modal .task-info h5 span,
[data-theme="dark"] #task-modal .task-info h5 a,
[data-theme="dark"] #task-modal .task-info h5 input,
[data-theme="dark"] #task-modal .task-single-related-wrapper a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-info,
html.dark-mode #task-modal .able-nav-tabs,
html.dark-mode #task-modal hr,
body.dark-mode #task-modal .task-info,
body.dark-mode #task-modal .able-nav-tabs,
body.dark-mode #task-modal hr,
[data-theme="dark"] #task-modal .task-info,
[data-theme="dark"] #task-modal .able-nav-tabs,
[data-theme="dark"] #task-modal hr {
  border-color: #2E3844 !important;
}

/* Nav Tabs in Dark Mode */
html.dark-mode #task-modal .able-nav-tabs li a,
body.dark-mode #task-modal .able-nav-tabs li a,
[data-theme="dark"] #task-modal .able-nav-tabs li a {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .able-nav-tabs li a:hover,
body.dark-mode #task-modal .able-nav-tabs li a:hover,
[data-theme="dark"] #task-modal .able-nav-tabs li a:hover {
  background: #242E3B !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .able-nav-tabs li.active a,
body.dark-mode #task-modal .able-nav-tabs li.active a,
[data-theme="dark"] #task-modal .able-nav-tabs li.active a {
  color: var(--able-primary, #01C38D) !important;
  border-bottom-color: var(--able-primary, #01C38D) !important;
  background: transparent !important;
}

/* Subtasks, Description & Tabs Containers in Dark Mode */
html.dark-mode #task-modal .subtasks-section,
html.dark-mode #task-modal .tasks-subtasks-wrapper,
html.dark-mode #task-modal #task_view_description,
html.dark-mode #task-modal .checklist-templates-wrapper,
body.dark-mode #task-modal .subtasks-section,
body.dark-mode #task-modal .tasks-subtasks-wrapper,
body.dark-mode #task-modal #task_view_description,
body.dark-mode #task-modal .checklist-templates-wrapper,
[data-theme="dark"] #task-modal .subtasks-section,
[data-theme="dark"] #task-modal .tasks-subtasks-wrapper,
[data-theme="dark"] #task-modal #task_view_description,
[data-theme="dark"] #task-modal .checklist-templates-wrapper {
  background: #242E3B !important;
  border: 1px solid #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .subtasks-table,
html.dark-mode #task-modal .subtasks-table tbody,
html.dark-mode #task-modal .subtasks-table tbody tr,
html.dark-mode #task-modal .subtasks-table tbody td,
body.dark-mode #task-modal .subtasks-table,
body.dark-mode #task-modal .subtasks-table tbody,
body.dark-mode #task-modal .subtasks-table tbody tr,
body.dark-mode #task-modal .subtasks-table tbody td,
[data-theme="dark"] #task-modal .subtasks-table,
[data-theme="dark"] #task-modal .subtasks-table tbody,
[data-theme="dark"] #task-modal .subtasks-table tbody tr,
[data-theme="dark"] #task-modal .subtasks-table tbody td,
html.dark-mode .subtasks-table,
body.dark-mode .subtasks-table,
[data-theme="dark"] .subtasks-table {
  background: #1D2630 !important;
  background-color: #1D2630 !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .subtasks-table tbody tr:hover td,
body.dark-mode #task-modal .subtasks-table tbody tr:hover td,
[data-theme="dark"] #task-modal .subtasks-table tbody tr:hover td,
html.dark-mode .subtasks-table tbody tr:hover td,
body.dark-mode .subtasks-table tbody tr:hover td,
[data-theme="dark"] .subtasks-table tbody tr:hover td {
  background: #242E3B !important;
  background-color: #242E3B !important;
}

html.dark-mode #task-modal .subtasks-table tbody td a,
body.dark-mode #task-modal .subtasks-table tbody td a,
[data-theme="dark"] #task-modal .subtasks-table tbody td a,
html.dark-mode .subtasks-table tbody td a,
body.dark-mode .subtasks-table tbody td a,
[data-theme="dark"] .subtasks-table tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .subtasks-table tbody td a:hover,
body.dark-mode #task-modal .subtasks-table tbody td a:hover,
[data-theme="dark"] #task-modal .subtasks-table tbody td a:hover,
html.dark-mode .subtasks-table tbody td a:hover,
body.dark-mode .subtasks-table tbody td a:hover,
[data-theme="dark"] .subtasks-table tbody td a:hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Checklist items and hover in Dark Mode */
html.dark-mode #task-modal .checklist,
body.dark-mode #task-modal .checklist,
[data-theme="dark"] #task-modal .checklist,
html.dark-mode .checklist,
body.dark-mode .checklist,
[data-theme="dark"] .checklist {
  background: transparent !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

html.dark-mode #task-modal .checklist:hover,
body.dark-mode #task-modal .checklist:hover,
[data-theme="dark"] #task-modal .checklist:hover,
html.dark-mode .checklist:hover,
body.dark-mode .checklist:hover,
[data-theme="dark"] .checklist:hover,
html.dark-mode .checklist:hover textarea[name="checklist-description"]:disabled,
body.dark-mode .checklist:hover textarea[name="checklist-description"]:disabled,
[data-theme="dark"] .checklist:hover textarea[name="checklist-description"]:disabled,
html.dark-mode #task-modal .checklist-item:hover,
body.dark-mode #task-modal .checklist-item:hover,
[data-theme="dark"] #task-modal .checklist-item:hover {
  background: #242E3B !important;
  background-color: #242E3B !important;
}

html.dark-mode textarea[name="checklist-description"],
body.dark-mode textarea[name="checklist-description"],
[data-theme="dark"] textarea[name="checklist-description"] {
  color: #F8FAFC !important;
  background: transparent !important;
}

html.dark-mode textarea[name="checklist-description"]:focus,
body.dark-mode textarea[name="checklist-description"]:focus,
[data-theme="dark"] textarea[name="checklist-description"]:focus {
  background: #151C24 !important;
  color: #F8FAFC !important;
  border-color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .checklist-item-info,
body.dark-mode .checklist-item-info,
[data-theme="dark"] .checklist-item-info {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-info-inline-input-edit,
body.dark-mode #task-modal .task-info-inline-input-edit,
[data-theme="dark"] #task-modal .task-info-inline-input-edit {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

/* Comments in Dark Mode */
html.dark-mode #task-modal #task-comment-form,
body.dark-mode #task-modal #task-comment-form,
[data-theme="dark"] #task-modal #task-comment-form {
  background-color: transparent !important;
}

html.dark-mode #task-modal #task_comment,
html.dark-mode #task-modal .edit-task-comment textarea,
html.dark-mode #task-modal .inline-reply-box textarea,
body.dark-mode #task-modal #task_comment,
body.dark-mode #task-modal .edit-task-comment textarea,
body.dark-mode #task-modal .inline-reply-box textarea,
[data-theme="dark"] #task-modal #task_comment,
[data-theme="dark"] #task-modal .edit-task-comment textarea,
[data-theme="dark"] #task-modal .inline-reply-box textarea {
  background: #151C24 !important;
  border: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal #task-comments .task-comment,
body.dark-mode #task-modal #task-comments .task-comment,
[data-theme="dark"] #task-modal #task-comments .task-comment {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal #task-comments .task-comment-reply,
html.dark-mode #task-modal .inline-reply-box,
body.dark-mode #task-modal #task-comments .task-comment-reply,
body.dark-mode #task-modal .inline-reply-box,
[data-theme="dark"] #task-modal #task-comments .task-comment-reply,
[data-theme="dark"] #task-modal .inline-reply-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .comment-thread-container,
body.dark-mode #task-modal .comment-thread-container,
[data-theme="dark"] #task-modal .comment-thread-container {
  border-left-color: #2E3844 !important;
}

html.dark-mode #task-modal #task-comments .task-comment .comment-content,
body.dark-mode #task-modal #task-comments .task-comment .comment-content,
[data-theme="dark"] #task-modal #task-comments .task-comment .comment-content {
  color: #E2E8F0 !important;
}

html.dark-mode #task-modal #task-comments .task-comment a.bold,
body.dark-mode #task-modal #task-comments .task-comment a.bold,
[data-theme="dark"] #task-modal #task-comments .task-comment a.bold {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal #task-attachment,
html.dark-mode #task-modal .dropzone:not(#task-comment-form),
body.dark-mode #task-modal #task-attachment,
body.dark-mode #task-modal .dropzone:not(#task-comment-form),
[data-theme="dark"] #task-modal #task-attachment,
[data-theme="dark"] #task-modal .dropzone:not(#task-comment-form),
html.dark-mode #task-modal #dropzoneTaskComment,
html.dark-mode #task-modal .task-comment-dropzone,
body.dark-mode #task-modal #dropzoneTaskComment,
body.dark-mode #task-modal .task-comment-dropzone,
[data-theme="dark"] #task-modal #dropzoneTaskComment,
[data-theme="dark"] #task-modal .task-comment-dropzone {
  background: #151C24 !important;
  background-color: #151C24 !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
}

html.dark-mode #task-modal #dropzoneTaskComment:hover,
html.dark-mode #task-modal .task-comment-dropzone:hover,
body.dark-mode #task-modal #dropzoneTaskComment:hover,
body.dark-mode #task-modal .task-comment-dropzone:hover,
[data-theme="dark"] #task-modal #dropzoneTaskComment:hover,
[data-theme="dark"] #task-modal .task-comment-dropzone:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.05) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dependencies, Reminders and Lower Right Sidebar Sections in Dark Mode */
html.dark-mode #task-modal .task-dependencies-section,
html.dark-mode #task-modal .task-reminders-section,
body.dark-mode #task-modal .task-dependencies-section,
body.dark-mode #task-modal .task-reminders-section,
[data-theme="dark"] #task-modal .task-dependencies-section,
[data-theme="dark"] #task-modal .task-reminders-section {
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .task-single-col-right svg,
body.dark-mode #task-modal .task-single-col-right svg,
[data-theme="dark"] #task-modal .task-single-col-right svg {
  color: #94A3B8 !important;
}

/* Task Modal Right Sidebar Dark Mode Enhancements */
html.dark-mode #task-modal .task-single-col-right,
body.dark-mode #task-modal .task-single-col-right,
[data-theme="dark"] #task-modal .task-single-col-right {
  background: #141A23 !important;
  border-left: 1px solid #26303D !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card,
body.dark-mode #task-modal .task-single-col-right .able-card,
[data-theme="dark"] #task-modal .task-single-col-right .able-card {
  background: #1D2630 !important;
  border-color: #29313B !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card:hover,
body.dark-mode #task-modal .task-single-col-right .able-card:hover,
[data-theme="dark"] #task-modal .task-single-col-right .able-card:hover {
  border-color: #384352 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card-header,
body.dark-mode #task-modal .task-single-col-right .able-card-header,
[data-theme="dark"] #task-modal .task-single-col-right .able-card-header {
  background: #1D2630 !important;
  border-bottom-color: #283340 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card-header h4.task-info-heading,
body.dark-mode #task-modal .task-single-col-right .able-card-header h4.task-info-heading,
[data-theme="dark"] #task-modal .task-single-col-right .able-card-header h4.task-info-heading {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .able-btn-icon,
html.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger,
body.dark-mode #task-modal .task-single-col-right .able-btn-icon,
body.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger,
[data-theme="dark"] #task-modal .task-single-col-right .able-btn-icon,
[data-theme="dark"] #task-modal .task-single-col-right .task-menu-options .trigger {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-btn-icon:hover,
html.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger:hover,
body.dark-mode #task-modal .task-single-col-right .able-btn-icon:hover,
body.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger:hover,
[data-theme="dark"] #task-modal .task-single-col-right .able-btn-icon:hover,
[data-theme="dark"] #task-modal .task-single-col-right .task-menu-options .trigger:hover {
  background: #2D3949 !important;
  color: #F8FAFC !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.25) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info,
body.dark-mode #task-modal .task-single-col-right .task-info,
[data-theme="dark"] #task-modal .task-single-col-right .task-info {
  border-bottom-color: #242E3B !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info:hover,
body.dark-mode #task-modal .task-single-col-right .task-info:hover,
[data-theme="dark"] #task-modal .task-single-col-right .task-info:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info h5,
body.dark-mode #task-modal .task-single-col-right .task-info h5,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info h5 span,
html.dark-mode #task-modal .task-single-col-right .task-info h5 a,
body.dark-mode #task-modal .task-single-col-right .task-info h5 span,
body.dark-mode #task-modal .task-single-col-right .task-info h5 a,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 span,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit,
body.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit,
[data-theme="dark"] #task-modal .task-single-col-right .task-info-inline-input-edit {
  background: #141A23 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit:focus,
body.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit:focus,
[data-theme="dark"] #task-modal .task-single-col-right .task-info-inline-input-edit:focus {
  background: #1D2630 !important;
  border-color: var(--able-primary, #01C38D) !important;
}

html.dark-mode #task-modal .task-single-col-right .able-task-tags-container,
body.dark-mode #task-modal .task-single-col-right .able-task-tags-container,
[data-theme="dark"] #task-modal .task-single-col-right .able-task-tags-container {
  background: #18202A !important;
  border-top-color: #283340 !important;
}

html.dark-mode #task-modal .task-single-col-right .tagsinput,
body.dark-mode #task-modal .task-single-col-right .tagsinput,
[data-theme="dark"] #task-modal .task-single-col-right .tagsinput {
  background: #141A23 !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small,
body.dark-mode #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small,
[data-theme="dark"] #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small {
  box-shadow: 0 0 0 2px #1D2630, 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
html.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div,
body.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
body.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div,
[data-theme="dark"] #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
[data-theme="dark"] #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div {
  background: #141A23 !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .task-single-col-right .gpicker,
body.dark-mode #task-modal .task-single-col-right .gpicker,
[data-theme="dark"] #task-modal .task-single-col-right .gpicker {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   ABLE PRO WYSIWYG / RICH TEXT EDITOR (TINYMCE & QUILL)
   ========================================================================== */

/* TinyMCE Container */
.tox-tinymce {
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  background: #F8F9FA !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding: 4px 6px !important;
}

.tox .tox-tbtn {
  border-radius: 6px !important;
  margin: 1px !important;
  height: 28px !important;
  width: 28px !important;
  color: #5B6B79 !important;
  transition: all 0.15s ease !important;
}

.tox .tox-tbtn:hover {
  background: #E8EBEE !important;
  color: #1D2630 !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--active {
  background: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

.tox .tox-statusbar {
  border-top: 1px solid #E8EBEE !important;
  background: #F8F9FA !important;
}

/* Quill Editor Container */
.ql-toolbar.ql-snow {
  border: 1px solid #E8EBEE !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  background: #F8F9FA !important;
  padding: 6px 10px !important;
}

.ql-container.ql-snow {
  border: 1px solid #E8EBEE !important;
  border-top: none !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #1D2630 !important;
}

.ql-snow .ql-stroke {
  stroke: #5B6B79 !important;
}

.ql-snow .ql-fill {
  fill: #5B6B79 !important;
}

.ql-snow .ql-picker {
  color: #5B6B79 !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
  background: rgba(1, 195, 141, 0.12) !important;
  border-radius: 6px !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--able-primary, #01C38D) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--able-primary, #01C38D) !important;
}

/* Dark mode for WYSIWYG */
html.dark-mode .tox-tinymce,
[data-theme="dark"] .tox-tinymce,
html.dark-mode .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-toolbar.ql-snow,
html.dark-mode .ql-container.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #E8EBEE !important;
}

html.dark-mode .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar {
  background: #151C24 !important;
  border-color: #2E3844 !important;
}

html.dark-mode .ql-snow .ql-stroke,
[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: #A0AEC0 !important;
}

html.dark-mode .ql-snow .ql-fill,
[data-theme="dark"] .ql-snow .ql-fill {
  fill: #A0AEC0 !important;
}

/* ==========================================================================
   ABLE PRO MENTIONS & COMMENT REPLIES
   ========================================================================== */

/* Mention Pill Badges in Comments & Editors */
span.mention {
  background: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* TinyMCE Mention Autocomplete Dropdown */
.tox .tox-autocompleter {
  border-radius: 10px !important;
  border: 1px solid #E8EBEE !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  padding: 4px !important;
  background: #ffffff !important;
}

.tox .tox-collection__item {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1D2630 !important;
  transition: all 0.12s ease !important;
}

.tox .tox-collection__item:hover,
.tox .tox-collection__item--active {
  background: rgba(1, 195, 141, 0.12) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

/* Comment Reply Button */
.btn-reply-comment {
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  color: var(--able-primary, #01C38D) !important;
  transition: all 0.15s ease !important;
}

.btn-reply-comment:hover {
  background: rgba(1, 195, 141, 0.1) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark mode for Mentions */
html.dark-mode span.mention,
[data-theme="dark"] span.mention {
  background: rgba(1, 195, 141, 0.25) !important;
  color: #05e2a5 !important;
}

html.dark-mode .tox .tox-autocompleter,
[data-theme="dark"] .tox .tox-autocompleter {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .tox .tox-collection__item,
[data-theme="dark"] .tox .tox-collection__item {
  color: #E8EBEE !important;
}

html.dark-mode .btn-reply-comment,
[data-theme="dark"] .btn-reply-comment {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #05e2a5 !important;
}

/* ==========================================================================
   ABLE PRO TASKS & PROJECT TASKS - DARK MODE HIGH CONTRAST REFINEMENTS
   ========================================================================== */

/* Task Summary Cards (Top Status Grid) */
html.dark-mode .able-task-summary-card,
body.dark-mode .able-task-summary-card,
[data-theme="dark"] .able-task-summary-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-task-summary-card:hover,
body.dark-mode .able-task-summary-card:hover,
[data-theme="dark"] .able-task-summary-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
  transform: translateY(-2px);
}

html.dark-mode .able-task-summary-card .tw-text-xs,
body.dark-mode .able-task-summary-card .tw-text-xs,
[data-theme="dark"] .able-task-summary-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-task-summary-card .tw-text-2xl,
body.dark-mode .able-task-summary-card .tw-text-2xl,
[data-theme="dark"] .able-task-summary-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-task-summary-card .tw-border-t,
body.dark-mode .able-task-summary-card .tw-border-t,
[data-theme="dark"] .able-task-summary-card .tw-border-t {
  border-color: #2E3844 !important;
}

/* Tasks Card in Project / Admin Views */
html.dark-mode .able-tasks-card,
body.dark-mode .able-tasks-card,
[data-theme="dark"] .able-tasks-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Tasks Table Header */
html.dark-mode .table-rel-tasks thead th,
html.dark-mode .table-tasks thead th,
html.dark-mode .tasks-table table.table thead th,
html.dark-mode table.tasks thead th,
html.dark-mode table.dataTable thead th,
body.dark-mode .table-rel-tasks thead th,
body.dark-mode .table-tasks thead th,
body.dark-mode .tasks-table table.table thead th,
[data-theme="dark"] .table-rel-tasks thead th,
[data-theme="dark"] .table-tasks thead th,
[data-theme="dark"] .tasks-table table.table thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
  border-top: none !important;
}

/* Tasks Table Cells */
html.dark-mode .table-rel-tasks tbody td,
html.dark-mode .table-tasks tbody td,
html.dark-mode .tasks-table table.table tbody td,
html.dark-mode table.tasks tbody td,
html.dark-mode table.dataTable tbody td,
body.dark-mode .table-rel-tasks tbody td,
body.dark-mode .table-tasks tbody td,
body.dark-mode .tasks-table table.table tbody td,
[data-theme="dark"] .table-rel-tasks tbody td,
[data-theme="dark"] .table-tasks tbody td,
[data-theme="dark"] .tasks-table table.table tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
  background: transparent !important;
}

/* Tasks Table Row Hover */
html.dark-mode .table-rel-tasks tbody tr:hover td,
html.dark-mode .table-tasks tbody tr:hover td,
html.dark-mode .tasks-table table.table tbody tr:hover td,
html.dark-mode table.tasks tbody tr:hover td,
html.dark-mode table.dataTable tbody tr:hover td,
body.dark-mode .table-rel-tasks tbody tr:hover td,
body.dark-mode .table-tasks tbody tr:hover td,
[data-theme="dark"] .table-rel-tasks tbody tr:hover td,
[data-theme="dark"] .table-tasks tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

/* Task Name in Table (Crystal Clear White / Light Text) */
html.dark-mode .table-rel-tasks a.main-tasks-table-href-name,
html.dark-mode .table-tasks a.main-tasks-table-href-name,
html.dark-mode .tasks-table a.main-tasks-table-href-name,
html.dark-mode a.main-tasks-table-href-name,
body.dark-mode a.main-tasks-table-href-name,
[data-theme="dark"] a.main-tasks-table-href-name,
html.dark-mode .table-rel-tasks tbody td a.main-tasks-table-href-name,
html.dark-mode .table-tasks tbody td a.main-tasks-table-href-name,
html.dark-mode .tasks-table tbody td a.main-tasks-table-href-name {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

html.dark-mode a.main-tasks-table-href-name:hover,
body.dark-mode a.main-tasks-table-href-name:hover,
[data-theme="dark"] a.main-tasks-table-href-name:hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Task ID (#) Column */
html.dark-mode .table-rel-tasks tbody td:nth-child(2) a,
html.dark-mode .table-tasks tbody td:nth-child(2) a,
html.dark-mode .tasks-table table.table tbody td:nth-child(2) a,
body.dark-mode .table-tasks tbody td:nth-child(2) a,
[data-theme="dark"] .table-tasks tbody td:nth-child(2) a {
  color: #94A3B8 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html.dark-mode .table-rel-tasks tbody td:nth-child(2) a:hover,
html.dark-mode .table-tasks tbody td:nth-child(2) a:hover,
html.dark-mode .tasks-table table.table tbody td:nth-child(2) a:hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Row Action Options (under task name) */
html.dark-mode .row-options,
body.dark-mode .row-options,
[data-theme="dark"] .row-options {
  color: #64748B !important;
}

html.dark-mode .row-options a,
body.dark-mode .row-options a,
[data-theme="dark"] .row-options a {
  color: #94A3B8 !important;
  text-decoration: none !important;
}

html.dark-mode .row-options a:hover,
body.dark-mode .row-options a:hover,
[data-theme="dark"] .row-options a:hover {
  color: #F8FAFC !important;
}

html.dark-mode .row-options a.text-danger,
html.dark-mode .row-options a._delete,
html.dark-mode .row-options a.task-delete {
  color: #F87171 !important;
}

html.dark-mode .row-options a.tasks-table-start-timer,
html.dark-mode .row-options a.text-success {
  color: var(--able-primary, #01C38D) !important;
}

/* ==========================================================================
   ABLE PRO UNIVERSAL DATATABLES SYSTEM (DARK MODE)
   ========================================================================== */

/* Dark Mode DataTables Length Select (Arrow 1) */
html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper select[name$="_length"],
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper select[name$="_length"],
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper select[name$="_length"] {
  background-color: var(--able-surface, #141822) !important;
  color: #FFFFFF !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B98A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select:hover,
html.dark-mode .dataTables_wrapper .dataTables_length select:focus,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus,
body.dark-mode .dataTables_wrapper .dataTables_length select:hover,
body.dark-mode .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.15) !important;
}

/* Dark Mode Action Buttons (Arrow 2) */
html.dark-mode .dataTables_wrapper .dt-buttons .btn,
html.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .buttons-collection,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-default-dt-options,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-dt-reload,
body.dark-mode .dataTables_wrapper .dt-buttons .btn,
body.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload {
  background-color: var(--able-surface, #141822) !important;
  color: #FFFFFF !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .dataTables_wrapper .dt-buttons .btn:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .buttons-collection:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload:hover {
  background-color: rgba(1, 195, 141, 0.15) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Search Bar Container (Arrows 3 & 4) */
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group {
  background-color: var(--able-bg, #0B0E14) !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.15) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
html.dark-mode .dataTables_wrapper .dataTables_filter input[type="search"],
html.dark-mode .dataTables_wrapper .dataTables_filter input.form-control,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input[type="search"],
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input.form-control,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
body.dark-mode .dataTables_wrapper .dataTables_filter input[type="search"],
body.dark-mode .dataTables_wrapper .dataTables_filter input.form-control {
  color: #FFFFFF !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i {
  color: #8B98A5 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i {
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Export Menu */
html.dark-mode .dt-button-collection,
html.dark-mode div.dt-button-collection,
[data-theme="dark"] .dt-button-collection,
[data-theme="dark"] div.dt-button-collection,
body.dark-mode .dt-button-collection,
body.dark-mode div.dt-button-collection {
  background-color: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

html.dark-mode .dt-button-collection .dt-button,
html.dark-mode .dt-button-collection button.dt-button,
html.dark-mode .dt-button-collection a.dt-button,
html.dark-mode div.dt-button-collection a.dt-button,
html.dark-mode div.dt-button-collection button.dt-button,
html.dark-mode div.dt-button-collection .dropdown-menu>li>a,
[data-theme="dark"] .dt-button-collection .dt-button,
[data-theme="dark"] .dt-button-collection button.dt-button,
[data-theme="dark"] .dt-button-collection a.dt-button,
[data-theme="dark"] div.dt-button-collection a.dt-button,
[data-theme="dark"] div.dt-button-collection button.dt-button,
[data-theme="dark"] div.dt-button-collection .dropdown-menu>li>a,
body.dark-mode .dt-button-collection .dt-button,
body.dark-mode .dt-button-collection button.dt-button,
body.dark-mode .dt-button-collection a.dt-button,
body.dark-mode div.dt-button-collection a.dt-button,
body.dark-mode div.dt-button-collection button.dt-button,
body.dark-mode div.dt-button-collection .dropdown-menu>li>a {
  color: #FFFFFF !important;
  z-index: 100001 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html.dark-mode .dt-button-collection .dt-button:hover,
html.dark-mode .dt-button-collection button.dt-button:hover,
html.dark-mode .dt-button-collection a.dt-button:hover,
html.dark-mode div.dt-button-collection a.dt-button:hover,
html.dark-mode div.dt-button-collection button.dt-button:hover,
html.dark-mode div.dt-button-collection .dropdown-menu>li>a:hover,
[data-theme="dark"] .dt-button-collection .dt-button:hover,
[data-theme="dark"] .dt-button-collection button.dt-button:hover,
[data-theme="dark"] .dt-button-collection a.dt-button:hover,
[data-theme="dark"] div.dt-button-collection a.dt-button:hover,
[data-theme="dark"] div.dt-button-collection button.dt-button:hover,
[data-theme="dark"] div.dt-button-collection .dropdown-menu>li>a:hover,
body.dark-mode .dt-button-collection .dt-button:hover,
body.dark-mode .dt-button-collection button.dt-button:hover,
body.dark-mode .dt-button-collection a.dt-button:hover,
body.dark-mode div.dt-button-collection a.dt-button:hover,
body.dark-mode div.dt-button-collection button.dt-button:hover,
body.dark-mode div.dt-button-collection .dropdown-menu>li>a:hover {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Headers */
html.dark-mode table.dataTable thead th,
html.dark-mode .dataTables_wrapper table.table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] .dataTables_wrapper table.table thead th,
body.dark-mode table.dataTable thead th,
body.dark-mode .dataTables_wrapper table.table thead th {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
}

/* Dark Mode Cells */
html.dark-mode table.dataTable tbody td,
html.dark-mode .dataTables_wrapper table.table tbody td,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] .dataTables_wrapper table.table tbody td,
body.dark-mode table.dataTable tbody td,
body.dark-mode .dataTables_wrapper table.table tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

/* Dark Mode Row Hover */
html.dark-mode table.dataTable tbody tr,
html.dark-mode .dataTables_wrapper table.table tbody tr,
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] .dataTables_wrapper table.table tbody tr,
body.dark-mode table.dataTable tbody tr,
body.dark-mode .dataTables_wrapper table.table tbody tr {
  background-color: #141822 !important;
}

html.dark-mode table.dataTable tbody tr:hover td,
html.dark-mode .dataTables_wrapper table.table tbody tr:hover td,
[data-theme="dark"] table.dataTable tbody tr:hover td,
[data-theme="dark"] .dataTables_wrapper table.table tbody tr:hover td,
body.dark-mode table.dataTable tbody tr:hover td,
body.dark-mode .dataTables_wrapper table.table tbody tr:hover td {
  background-color: rgba(1, 195, 141, 0.08) !important;
}

/* Dark Mode Empty State */
html.dark-mode table.dataTable tbody td.dataTables_empty,
html.dark-mode .dataTables_wrapper table.table tbody td.dataTables_empty,
[data-theme="dark"] table.dataTable tbody td.dataTables_empty,
[data-theme="dark"] .dataTables_wrapper table.table tbody td.dataTables_empty,
body.dark-mode table.dataTable tbody td.dataTables_empty,
body.dark-mode .dataTables_wrapper table.table tbody td.dataTables_empty {
  background-color: #141822 !important;
  color: #8B98A5 !important;
}

/* Dark Mode Table Links */
html.dark-mode table.dataTable tbody td a:not(.btn),
[data-theme="dark"] table.dataTable tbody td a:not(.btn),
body.dark-mode table.dataTable tbody td a:not(.btn) {
  color: #F8FAFC !important;
}

html.dark-mode table.dataTable tbody td a:not(.btn):hover,
[data-theme="dark"] table.dataTable tbody td a:not(.btn):hover,
body.dark-mode table.dataTable tbody td a:not(.btn):hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Pagination */
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a {
  background: #141822 !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover {
  background: rgba(1, 195, 141, 0.15) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a {
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_info {
  color: #8B98A5 !important;
}

/* ==========================================================================
   ABLE PRO PROJECT TIMESHEETS & KPI CARDS
   ========================================================================== */

.able-timesheet-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-timesheets {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-top: 12px !important;
  border: none !important;
}

.table-timesheets thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table-timesheets tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-timesheets tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Timesheet Modal Able Pro */
#timesheet .modal-dialog {
  border-radius: 16px !important;
  margin-top: 50px !important;
}

/* Dark mode for Timesheets */
html.dark-mode .able-timesheet-kpi-card,
body.dark-mode .able-timesheet-kpi-card,
[data-theme="dark"] .able-timesheet-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-timesheet-kpi-card:hover,
body.dark-mode .able-timesheet-kpi-card:hover,
[data-theme="dark"] .able-timesheet-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-timesheet-kpi-card .tw-text-xs,
body.dark-mode .able-timesheet-kpi-card .tw-text-xs,
[data-theme="dark"] .able-timesheet-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-timesheet-kpi-card .tw-text-2xl,
body.dark-mode .able-timesheet-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-timesheet-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-timesheets-card,
body.dark-mode .able-timesheets-card,
[data-theme="dark"] .able-timesheets-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-timesheets thead th,
body.dark-mode .table-timesheets thead th,
[data-theme="dark"] .table-timesheets thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-timesheets tbody td,
body.dark-mode .table-timesheets tbody td,
[data-theme="dark"] .table-timesheets tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-timesheets tbody td a,
body.dark-mode .table-timesheets tbody td a,
[data-theme="dark"] .table-timesheets tbody td a {
  color: #F8FAFC !important;
  font-weight: 500 !important;
}

html.dark-mode .table-timesheets tbody td a:hover,
body.dark-mode .table-timesheets tbody td a:hover,
[data-theme="dark"] .table-timesheets tbody td a:hover {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .table-timesheets tbody tr:hover td,
body.dark-mode .table-timesheets tbody tr:hover td,
[data-theme="dark"] .table-timesheets tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #timesheet .modal-content,
body.dark-mode #timesheet .modal-content,
[data-theme="dark"] #timesheet .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #timesheet .modal-header,
html.dark-mode #timesheet .modal-footer,
body.dark-mode #timesheet .modal-header,
body.dark-mode #timesheet .modal-footer,
[data-theme="dark"] #timesheet .modal-header,
[data-theme="dark"] #timesheet .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #timesheet .modal-title,
body.dark-mode #timesheet .modal-title,
[data-theme="dark"] #timesheet .modal-title {
  color: #F8FAFC !important;
}

html.dark-mode #timesheet .timesheet-start-end-time,
html.dark-mode #timesheet .timesheet-duration,
body.dark-mode #timesheet .timesheet-start-end-time,
body.dark-mode #timesheet .timesheet-duration,
[data-theme="dark"] #timesheet .timesheet-start-end-time,
[data-theme="dark"] #timesheet .timesheet-duration {
  background: #151C24 !important;
  border-color: #2E3844 !important;
}

/* ==========================================================================
   ABLE PRO PROJECT MILESTONES & KANBAN
   ========================================================================== */

.able-milestone-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.kan-ban-content,
#kan-ban .kan-ban-content,
.kan-ban-content-wrapper,
#kan-ban .kan-ban-content-wrapper {
  background: transparent !important;
}

.able-kanban-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-milestones {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: none !important;
}

.table-milestones thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
}

.table-milestones tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-milestones tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Dark Mode for Milestones & Kanban */
html.dark-mode .able-milestone-kpi-card,
body.dark-mode .able-milestone-kpi-card,
[data-theme="dark"] .able-milestone-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-milestone-kpi-card:hover,
body.dark-mode .able-milestone-kpi-card:hover,
[data-theme="dark"] .able-milestone-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-milestone-kpi-card .tw-text-xs,
body.dark-mode .able-milestone-kpi-card .tw-text-xs,
[data-theme="dark"] .able-milestone-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-milestone-kpi-card .tw-text-2xl,
body.dark-mode .able-milestone-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-milestone-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-kanban-column-card,
body.dark-mode .able-kanban-column-card,
[data-theme="dark"] .able-kanban-column-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kanban-column-header,
body.dark-mode .able-kanban-column-header,
[data-theme="dark"] .able-kanban-column-header {
  background: #151C24 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .able-kanban-task-card,
body.dark-mode .able-kanban-task-card,
[data-theme="dark"] .able-kanban-task-card {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-kanban-task-card:hover,
body.dark-mode .able-kanban-task-card:hover,
[data-theme="dark"] .able-kanban-task-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #2A3644 !important;
}

html.dark-mode .able-kanban-task-card .task_milestone,
body.dark-mode .able-kanban-task-card .task_milestone,
[data-theme="dark"] .able-kanban-task-card .task_milestone {
  color: #F8FAFC !important;
}

html.dark-mode .able-kanban-task-card .tw-border-t,
body.dark-mode .able-kanban-task-card .tw-border-t,
[data-theme="dark"] .able-kanban-task-card .tw-border-t {
  border-color: #2E3844 !important;
}

html.dark-mode .able-milestones-table-card,
body.dark-mode .able-milestones-table-card,
[data-theme="dark"] .able-milestones-table-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-milestones thead th,
body.dark-mode .table-milestones thead th,
[data-theme="dark"] .table-milestones thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-milestones tbody td,
body.dark-mode .table-milestones tbody td,
[data-theme="dark"] .table-milestones tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-milestones tbody td a,
body.dark-mode .table-milestones tbody td a,
[data-theme="dark"] .table-milestones tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode .table-milestones tbody tr:hover td,
body.dark-mode .table-milestones tbody tr:hover td,
[data-theme="dark"] .table-milestones tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #milestone .modal-content,
body.dark-mode #milestone .modal-content,
[data-theme="dark"] #milestone .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #milestone .modal-header,
html.dark-mode #milestone .modal-footer,
body.dark-mode #milestone .modal-header,
body.dark-mode #milestone .modal-footer,
[data-theme="dark"] #milestone .modal-header,
[data-theme="dark"] #milestone .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #milestone .modal-title,
body.dark-mode #milestone .modal-title,
[data-theme="dark"] #milestone .modal-title {
  color: #F8FAFC !important;
}

/* Kanban Wrapper & Popovers in Dark Mode */
html.dark-mode .kan-ban-content-wrapper,
body.dark-mode .kan-ban-content-wrapper,
[data-theme="dark"] .kan-ban-content-wrapper {
  background: #1B232C !important;
}

html.dark-mode .popover,
body.dark-mode .popover,
[data-theme="dark"] .popover {
  background-color: #1B232C !important;
  border: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .popover .popover-title,
body.dark-mode .popover .popover-title,
[data-theme="dark"] .popover .popover-title {
  background-color: #151C24 !important;
  border-bottom: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .popover .popover-content,
body.dark-mode .popover .popover-content,
[data-theme="dark"] .popover .popover-content {
  color: #CBD5E1 !important;
}

html.dark-mode .popover.bottom>.arrow:after {
  border-bottom-color: #1B232C !important;
}

html.dark-mode .popover.top>.arrow:after {
  border-top-color: #1B232C !important;
}

/* ==========================================================================
   ABLE PRO PROJECT FILES & DROPZONE
   ========================================================================== */

.able-dropzone-box {
  border: 2px dashed var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #ffffff) !important;
  min-height: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.able-dropzone-box:hover,
.able-dropzone-box.dz-drag-hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.02) !important;
}

.able-dropzone-box:hover .able-dropzone-icon,
.able-dropzone-box.dz-drag-hover .able-dropzone-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(1, 195, 141, 0.2);
}

.able-dropzone-icon {
  transition: all 0.2s ease-in-out;
}

.able-file-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-project-files {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: none !important;
}

.table-project-files thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
}

.table-project-files tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-project-files tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

.table-project-files .project-file-image {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  object-fit: cover !important;
  transition: transform 0.15s ease;
}

.table-project-files .project-file-image:hover {
  transform: scale(1.08);
}

/* Dark Mode for Project Files & Dropzone */
html.dark-mode .able-dropzone-box,
body.dark-mode .able-dropzone-box,
[data-theme="dark"] .able-dropzone-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-dropzone-box:hover,
html.dark-mode .able-dropzone-box.dz-drag-hover,
body.dark-mode .able-dropzone-box:hover,
[data-theme="dark"] .able-dropzone-box:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.05) !important;
}

html.dark-mode .able-dropzone-box h4,
body.dark-mode .able-dropzone-box h4,
[data-theme="dark"] .able-dropzone-box h4 {
  color: #F8FAFC !important;
}

html.dark-mode .able-file-kpi-card,
body.dark-mode .able-file-kpi-card,
[data-theme="dark"] .able-file-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-file-kpi-card:hover,
body.dark-mode .able-file-kpi-card:hover,
[data-theme="dark"] .able-file-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-file-kpi-card .tw-text-xs,
body.dark-mode .able-file-kpi-card .tw-text-xs,
[data-theme="dark"] .able-file-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-file-kpi-card .tw-text-2xl,
body.dark-mode .able-file-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-file-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-files-table-card,
body.dark-mode .able-files-table-card,
[data-theme="dark"] .able-files-table-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-project-files thead th,
body.dark-mode .table-project-files thead th,
[data-theme="dark"] .table-project-files thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-project-files tbody td,
body.dark-mode .table-project-files tbody td,
[data-theme="dark"] .table-project-files tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-project-files tbody td a,
body.dark-mode .table-project-files tbody td a,
[data-theme="dark"] .table-project-files tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode .table-project-files tbody td a:hover,
body.dark-mode .table-project-files tbody td a:hover,
[data-theme="dark"] .table-project-files tbody td a:hover {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .table-project-files tbody tr:hover td,
body.dark-mode .table-project-files tbody tr:hover td,
[data-theme="dark"] .table-project-files tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #project_files_bulk_actions .modal-content,
body.dark-mode #project_files_bulk_actions .modal-content,
[data-theme="dark"] #project_files_bulk_actions .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #project_files_bulk_actions .modal-header,
html.dark-mode #project_files_bulk_actions .modal-footer,
body.dark-mode #project_files_bulk_actions .modal-header,
body.dark-mode #project_files_bulk_actions .modal-footer,
[data-theme="dark"] #project_files_bulk_actions .modal-header,
[data-theme="dark"] #project_files_bulk_actions .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #project_files_bulk_actions .modal-title,
body.dark-mode #project_files_bulk_actions .modal-title,
[data-theme="dark"] #project_files_bulk_actions .modal-title {
  color: #F8FAFC !important;
}

/* ==========================================================================
   ABLE PRO PROJECT FIELD LOGS (BITÁCORA DE CAMPO)
   ========================================================================== */

.able-fieldlog-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.able-fieldlog-entry-card:hover {
  border-color: rgba(1, 195, 141, 0.3) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Dark Mode for Field Logs */
html.dark-mode .able-fieldlog-kpi-card,
body.dark-mode .able-fieldlog-kpi-card,
[data-theme="dark"] .able-fieldlog-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-fieldlog-kpi-card:hover,
body.dark-mode .able-fieldlog-kpi-card:hover,
[data-theme="dark"] .able-fieldlog-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-fieldlog-kpi-card .tw-text-xs,
body.dark-mode .able-fieldlog-kpi-card .tw-text-xs,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-fieldlog-kpi-card .tw-text-2xl,
html.dark-mode .able-fieldlog-kpi-card .tw-text-lg,
body.dark-mode .able-fieldlog-kpi-card .tw-text-2xl,
body.dark-mode .able-fieldlog-kpi-card .tw-text-lg,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-lg {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-form-card,
html.dark-mode .able-fieldlog-feed-card,
body.dark-mode .able-fieldlog-form-card,
body.dark-mode .able-fieldlog-feed-card,
[data-theme="dark"] .able-fieldlog-form-card,
[data-theme="dark"] .able-fieldlog-feed-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-fieldlog-form-card h4,
html.dark-mode .able-fieldlog-feed-card h4,
body.dark-mode .able-fieldlog-form-card h4,
body.dark-mode .able-fieldlog-feed-card h4,
[data-theme="dark"] .able-fieldlog-form-card h4,
[data-theme="dark"] .able-fieldlog-feed-card h4 {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-entry-card,
body.dark-mode .able-fieldlog-entry-card,
[data-theme="dark"] .able-fieldlog-entry-card {
  background: #242E3B !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-fieldlog-entry-card:hover,
body.dark-mode .able-fieldlog-entry-card:hover,
[data-theme="dark"] .able-fieldlog-entry-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #2A3644 !important;
}

html.dark-mode .able-fieldlog-entry-card .tw-font-extrabold,
html.dark-mode .able-fieldlog-entry-card b,
html.dark-mode .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed,
body.dark-mode .able-fieldlog-entry-card .tw-font-extrabold,
body.dark-mode .able-fieldlog-entry-card b,
body.dark-mode .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed,
[data-theme="dark"] .able-fieldlog-entry-card .tw-font-extrabold,
[data-theme="dark"] .able-fieldlog-entry-card b,
[data-theme="dark"] .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold,
body.dark-mode .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold,
[data-theme="dark"] .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}
















/* Able Pro Custom Tabs for CodeIgniter Views */
.able-nav-tabs {
  border-bottom: 1px solid var(--able-border) !important;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 0px !important;
}

.horizontal-tabs {
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.horizontal-tabs::-webkit-scrollbar {
  display: none;
}

.horizontal-scrollable-tabs .scroller {
  width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  text-align: center;
  border-radius: 50%;
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-muted) !important;
  position: absolute;
  top: 5px;
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.horizontal-scrollable-tabs .scroller:hover {
  color: var(--able-primary) !important;
  border-color: var(--able-primary) !important;
}

.horizontal-scrollable-tabs .arrow-left {
  left: 0;
}

.horizontal-scrollable-tabs .arrow-right {
  right: 0;
}

/* Fix for TinyMCE dropdowns (Font Family / Font Size) squeezed in toolbar */
.tox .tox-tbtn--select {
  width: auto !important;
  padding: 0 8px !important;
}

.tox .tox-tbtn__select-label {
  width: auto !important;
  min-width: 50px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
}

/* Fix for tables inside comments (TinyMCE) */
.contract-comments table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.contract-comments table th,
.contract-comments table td {
  border: 1px solid var(--able-border);
  padding: 0.75rem;
  vertical-align: top;
}

.contract-comments table th {
  background-color: var(--able-bg);
  font-weight: 600;
}

.able-nav-tabs>li {
  margin-bottom: -1px;
}

/* ==========================================================================
   Dark Mode Overrides for Third-Party Components (TinyMCE, Dropzone, DataTables)
   ========================================================================== */

/* TinyMCE Dark Mode UI */
[data-theme="dark"] .tox-tinymce,
body.dark-mode .tox-tinymce,
html.dark-mode .tox-tinymce {
  border: 1px solid var(--able-border, #2E3844) !important;
  background-color: var(--able-bg, #151C24) !important;
}

[data-theme="dark"] .tox .tox-editor-header,
[data-theme="dark"] .tox:not(.tox-tinymce-inline) .tox-editor-header,
[data-theme="dark"] .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header,
html.dark-mode .tox .tox-editor-header,
html.dark-mode .tox:not(.tox-tinymce-inline) .tox-editor-header,
html.dark-mode .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header,
body.dark-mode .tox .tox-editor-header,
body.dark-mode .tox:not(.tox-tinymce-inline) .tox-editor-header,
body.dark-mode .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header {
  background-color: var(--able-bg, #151C24) !important;
  background: var(--able-bg, #151C24) !important;
  border-bottom: 1px solid var(--able-border, #2E3844) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .tox .tox-toolbar-overlord,
html.dark-mode .tox .tox-toolbar-overlord,
body.dark-mode .tox .tox-toolbar-overlord {
  background-color: var(--able-bg, #151C24) !important;
  background: var(--able-bg, #151C24) !important;
}

[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__overflow,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-menubar,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-toolbar__overflow,
html.dark-mode .tox .tox-toolbar__primary,
html.dark-mode .tox .tox-menubar,
body.dark-mode .tox .tox-toolbar,
body.dark-mode .tox .tox-toolbar__overflow,
body.dark-mode .tox .tox-toolbar__primary,
body.dark-mode .tox .tox-menubar {
  background-color: var(--able-bg, #151C24) !important;
  background-image: none !important;
  background: var(--able-bg, #151C24) !important;
  border-color: var(--able-border, #2E3844) !important;
}

[data-theme="dark"] .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type),
html.dark-mode .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type),
body.dark-mode .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid var(--able-border, #2E3844) !important;
}

[data-theme="dark"] .tox .tox-toolbar__group,
html.dark-mode .tox .tox-toolbar__group,
body.dark-mode .tox .tox-toolbar__group {
  border-color: var(--able-border, #2E3844) !important;
}

[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox .tox-mbtn,
html.dark-mode .tox .tox-tbtn,
html.dark-mode .tox .tox-mbtn,
body.dark-mode .tox .tox-tbtn,
body.dark-mode .tox .tox-mbtn {
  color: var(--able-text-dark, #CBD5E1) !important;
}

[data-theme="dark"] .tox .tox-tbtn svg,
html.dark-mode .tox .tox-tbtn svg,
body.dark-mode .tox .tox-tbtn svg {
  fill: var(--able-text-dark, #CBD5E1) !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover,
[data-theme="dark"] .tox .tox-mbtn:hover,
html.dark-mode .tox .tox-tbtn:hover,
html.dark-mode .tox .tox-mbtn:hover,
body.dark-mode .tox .tox-tbtn:hover,
body.dark-mode .tox .tox-mbtn:hover {
  background-color: #242E3B !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover svg,
html.dark-mode .tox .tox-tbtn:hover svg,
body.dark-mode .tox .tox-tbtn:hover svg {
  fill: #FFFFFF !important;
}

[data-theme="dark"] .tox .tox-tbtn--enabled,
[data-theme="dark"] .tox .tox-tbtn--active,
html.dark-mode .tox .tox-tbtn--enabled,
html.dark-mode .tox .tox-tbtn--active,
body.dark-mode .tox .tox-tbtn--enabled,
body.dark-mode .tox .tox-tbtn--active {
  background-color: #2E3844 !important;
}

[data-theme="dark"] .tox .tox-statusbar,
html.dark-mode .tox .tox-statusbar,
body.dark-mode .tox .tox-statusbar {
  background-color: var(--able-bg, #151C24) !important;
  border-top: 1px solid var(--able-border, #2E3844) !important;
  color: var(--able-text-dark, #8B98A5) !important;
}

[data-theme="dark"] .tox .tox-edit-area__iframe,
[data-theme="dark"] .tox .tox-edit-area,
html.dark-mode .tox .tox-edit-area__iframe,
html.dark-mode .tox .tox-edit-area,
body.dark-mode .tox .tox-edit-area__iframe,
body.dark-mode .tox .tox-edit-area {
  background-color: var(--able-surface, #151C24) !important;
}

/* TinyMCE Floating Popover Quickbars */
[data-theme="dark"] .tox-pop .tox-pop__dialog,
html.dark-mode .tox-pop .tox-pop__dialog,
body.dark-mode .tox-pop .tox-pop__dialog {
  background-color: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .tox-pop .tox-pop__dialog .tox-toolbar,
html.dark-mode .tox-pop .tox-pop__dialog .tox-toolbar,
body.dark-mode .tox-pop .tox-pop__dialog .tox-toolbar {
  background: transparent !important;
  background-image: none !important;
}

/* Dropzone Dark Mode */
[data-theme="dark"] .dropzone:not(#task-comment-form),
body.dark-mode .dropzone:not(#task-comment-form),
html.dark-mode .dropzone:not(#task-comment-form) {
  background-color: var(--able-bg, #151C24) !important;
  border-color: var(--able-border, #2E3844) !important;
}

[data-theme="dark"] .dropzone .dz-message,
body.dark-mode .dropzone .dz-message {
  color: var(--able-text-dark) !important;
}

/* General Buttons Dark Mode */

[data-theme="dark"] .btn-default,
body.dark-mode .btn-default {
  background-color: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .btn-default:hover,
body.dark-mode .btn-default:hover {
  background-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

/* Global Dropdown Menu Dark Mode */
[data-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .dropdown-menu>li>a:not(.text-danger),
[data-theme="dark"] .dropdown-item:not(.text-danger),
body.dark-mode .dropdown-menu>li>a:not(.text-danger),
body.dark-mode .dropdown-item:not(.text-danger) {
  color: var(--able-text-dark);
}

[data-theme="dark"] .dropdown-menu>li>a:hover,
[data-theme="dark"] .dropdown-item:hover,
body.dark-mode .dropdown-menu>li>a:hover,
body.dark-mode .dropdown-item:hover {
  background-color: var(--able-bg) !important;
}

[data-theme="dark"] .dropdown-menu .divider,
[data-theme="dark"] .dropdown-menu .dropdown-divider,
body.dark-mode .dropdown-menu .divider,
body.dark-mode .dropdown-menu .dropdown-divider {
  background-color: var(--able-border) !important;
  border-top-color: var(--able-border) !important;
}

/* Fix TinyMCE inner text, icons, and menus */
[data-theme="dark"] .tox .tox-tbtn svg,
body.dark-mode .tox .tox-tbtn svg,
[data-theme="dark"] .tox .tox-tbtn__select-chevron svg,
body.dark-mode .tox .tox-tbtn__select-chevron svg {
  fill: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-tbtn--select,
[data-theme="dark"] .tox .tox-tbtn--bespoke,
body.dark-mode .tox .tox-tbtn--select,
body.dark-mode .tox .tox-tbtn--bespoke {
  background-color: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-tbtn__select-label,
body.dark-mode .tox .tox-tbtn__select-label {
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-menu,
body.dark-mode .tox .tox-menu {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .tox .tox-collection__item,
body.dark-mode .tox .tox-collection__item {
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-collection__item:hover,
[data-theme="dark"] .tox .tox-collection__item--active,
body.dark-mode .tox .tox-collection__item:hover,
body.dark-mode .tox .tox-collection__item--active {
  background-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

/* Fix TinyMCE iframe white background by using CSS invert filter */
[data-theme="dark"] .tox .tox-edit-area__iframe,
body.dark-mode .tox .tox-edit-area__iframe {
  filter: invert(0.9) hue-rotate(180deg) brightness(1.1);
}

/* Utility classes for dynamic dark mode support */
.able-bg-muted {
  background-color: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

.able-border-color {
  border-color: var(--able-border) !important;
}

.able-nav-tabs>li>a {
  border: none !important;
  background: transparent !important;
  color: var(--able-text-muted) !important;
  font-weight: 500;
  font-size: 14.5px;
  padding: 12px 4px !important;
  margin-right: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.able-nav-tabs>li>a:hover {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary-light) !important;
}

.able-nav-tabs>li.active>a,
.able-nav-tabs>li.active>a:focus,
.able-nav-tabs>li.active>a:hover {
  color: var(--able-primary) !important;
  border-bottom: 2px solid var(--able-primary) !important;
  background: transparent !important;
}

.able-nav-tabs .badge {
  background-color: var(--able-primary-light);
  color: var(--able-primary);
  border-radius: 12px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 12px;
}

/* ==========================================================================
   DASHBOARD WIDGETS & WELCOME BANNER DARK MODE ENHANCEMENTS
   ========================================================================== */

/* Segmented Control in Dark Mode */
html.dark-mode .able-segmented-control,
[data-theme="dark"] .able-segmented-control,
body.dark-mode .able-segmented-control {
  background: #0B0E14 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-segment-btn,
[data-theme="dark"] .able-segment-btn,
body.dark-mode .able-segment-btn {
  color: #8B98A5 !important;
}

html.dark-mode .able-segment-btn:hover,
[data-theme="dark"] .able-segment-btn:hover,
body.dark-mode .able-segment-btn:hover {
  color: #FFFFFF !important;
}

html.dark-mode .able-segment-btn.active,
[data-theme="dark"] .able-segment-btn.active,
body.dark-mode .able-segment-btn.active {
  background: #1E2636 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Calendar Selected Cell in Dark Mode */
html.dark-mode .widget-day-cell.is-selected,
[data-theme="dark"] .widget-day-cell.is-selected,
body.dark-mode .widget-day-cell.is-selected {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.35) 0%, rgba(1, 195, 141, 0.15) 100%), #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.5) !important;
  color: #FFFFFF !important;
}

html.dark-mode .widget-day-cell:hover,
[data-theme="dark"] .widget-day-cell:hover,
body.dark-mode .widget-day-cell:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Welcome Banner in Dark Mode (Obsidian Emerald Hero) */
html.dark-mode .welcomeBanner,
[data-theme="dark"] .welcomeBanner,
body.dark-mode .welcomeBanner {
  background: radial-gradient(circle at 90% 40%, rgba(1, 195, 141, 0.16) 0%, rgba(1, 195, 141, 0.02) 45%, transparent 70%),
    linear-gradient(135deg, #161C28 0%, #10141D 100%) !important;
  border: 1px solid rgba(1, 195, 141, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(1, 195, 141, 0.1) !important;
}

html.dark-mode .welcomeBanner .welcome-user-name,
[data-theme="dark"] .welcomeBanner .welcome-user-name,
body.dark-mode .welcomeBanner .welcome-user-name {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FFFFFF 40%, #01C38D 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark-mode .welcomeBanner .banner-greeting-chip,
[data-theme="dark"] .welcomeBanner .banner-greeting-chip,
body.dark-mode .welcomeBanner .banner-greeting-chip {
  background: rgba(1, 195, 141, 0.12) !important;
  border-color: rgba(1, 195, 141, 0.3) !important;
  color: #01C38D !important;
}

html.dark-mode .welcomeBanner .greeting-dot,
[data-theme="dark"] .welcomeBanner .greeting-dot,
body.dark-mode .welcomeBanner .greeting-dot {
  background: #01C38D !important;
  box-shadow: 0 0 8px #01C38D !important;
}

html.dark-mode .welcomeBanner .able-banner-btn,
[data-theme="dark"] .welcomeBanner .able-banner-btn,
body.dark-mode .welcomeBanner .able-banner-btn {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
}

html.dark-mode .welcomeBanner .able-banner-btn i,
[data-theme="dark"] .welcomeBanner .able-banner-btn i,
body.dark-mode .welcomeBanner .able-banner-btn i {
  color: #01C38D !important;
}

html.dark-mode .welcomeBanner .able-banner-btn:hover,
[data-theme="dark"] .welcomeBanner .able-banner-btn:hover,
body.dark-mode .welcomeBanner .able-banner-btn:hover {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.34) 0%, rgba(1, 195, 141, 0.12) 100%), #141822 !important;
  border-color: rgba(1, 195, 141, 0.65) !important;
  box-shadow: 0 6px 22px rgba(1, 195, 141, 0.3) !important;
}

html.dark-mode .welcomeBanner .able-banner-btn-outline,
[data-theme="dark"] .welcomeBanner .able-banner-btn-outline,
body.dark-mode .welcomeBanner .able-banner-btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark-mode .welcomeBanner .able-banner-btn-outline i,
[data-theme="dark"] .welcomeBanner .able-banner-btn-outline i,
body.dark-mode .welcomeBanner .able-banner-btn-outline i {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-mode .welcomeBanner .rocket-img,
[data-theme="dark"] .welcomeBanner .rocket-img,
body.dark-mode .welcomeBanner .rocket-img {
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 25px rgba(1, 195, 141, 0.25)) !important;
}

/* Dashboard Cards in Dark Mode */
html.dark-mode .able-kpi-card,
[data-theme="dark"] .able-kpi-card,
body.dark-mode .able-kpi-card,
html.dark-mode .able-widget-card,
[data-theme="dark"] .able-widget-card,
body.dark-mode .able-widget-card,
html.dark-mode .able-project-card,
[data-theme="dark"] .able-project-card,
body.dark-mode .able-project-card,
html.dark-mode .able-chart-card,
[data-theme="dark"] .able-chart-card,
body.dark-mode .able-chart-card {
  background: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .able-project-item:hover,
[data-theme="dark"] .able-project-item:hover,
body.dark-mode .able-project-item:hover,
html.dark-mode .able-todo-item:hover,
[data-theme="dark"] .able-todo-item:hover,
body.dark-mode .able-todo-item:hover,
html.dark-mode .able-activity-item:hover,
[data-theme="dark"] .able-activity-item:hover,
body.dark-mode .able-activity-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .text-darkText,
[data-theme="dark"] .text-darkText,
body.dark-mode .text-darkText {
  color: #FFFFFF !important;
}

html.dark-mode .text-muted,
[data-theme="dark"] .text-muted,
body.dark-mode .text-muted {
  color: #8C99A5 !important;
}

/* Fix raw checkbox spacing in contract form (Vue forms) */
#contract-form input[type="checkbox"] {
  margin-right: 6px !important;
  vertical-align: middle !important;
  position: relative;
  top: -2px;
  /* slight visual alignment fix */
}

/* Add margin to labels that contain checkboxes */
#contract-form label:has(input[type="checkbox"]) {
  margin-right: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer;
}

/* Fallback if they are siblings (input + label) */
#contract-form input[type="checkbox"]+label {
  margin-right: 20px !important;
}

/* Fallback if checkboxes are direct children of a div and need spacing */
#contract-form input[type="checkbox"]+input[type="checkbox"] {
  margin-left: 16px !important;
}

/* ==========================================================================
   ABLE PRO GLOBAL TABS & PREVIEW ENHANCEMENTS (PREVENT CLIPPING GLOBALLY)
   ========================================================================== */

/* 1. Eliminate legacy negative margins that clip the navbar across all modules */
.panel-full-width-tabs,
.preview-tabs-top,
.horizontal-scrollable-tabs,
.preview-tabs-top.panel-full-width-tabs {
  margin-top: 0 !important;
}

.panel-full-width-tabs .nav,
.preview-tabs-top .nav,
.horizontal-scrollable-tabs .nav,
.panel-full-width-tabs .horizontal-tabs>ul,
.preview-tabs-top .horizontal-tabs>ul,
.horizontal-scrollable-tabs .horizontal-tabs>ul,
.panel-full-width-tabs>.horizontal-tabs>.nav-tabs {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Wrapper inside preview drawer */
.able-invoice-preview-wrapper,
.able-preview-wrapper {
  position: relative;
  width: 100%;
}

/* Horizontal tabs container */
.able-invoice-tabs-wrapper,
.horizontal-scrollable-tabs {
  position: relative;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  width: 100%;
}

.able-invoice-tabs-wrapper .horizontal-tabs,
.horizontal-scrollable-tabs .horizontal-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.able-invoice-tabs-wrapper .horizontal-tabs::-webkit-scrollbar,
.horizontal-scrollable-tabs .horizontal-tabs::-webkit-scrollbar {
  display: none;
}

.able-invoice-tabs-wrapper .able-nav-tabs,
.horizontal-scrollable-tabs .nav-tabs,
.able-nav-tabs {
  border-bottom: 1px solid var(--able-border) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li,
.horizontal-scrollable-tabs .nav-tabs>li,
.able-nav-tabs>li {
  float: none !important;
  margin: 0 !important;
  list-style: none !important;
  flex-shrink: 0 !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li>a,
.horizontal-scrollable-tabs .nav-tabs>li>a,
.able-nav-tabs>li>a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li>a:hover,
.horizontal-scrollable-tabs .nav-tabs>li>a:hover,
.able-nav-tabs>li>a:hover {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary-light) !important;
  background: transparent !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a:focus,
.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a:hover,
.horizontal-scrollable-tabs .nav-tabs>li.active>a,
.horizontal-scrollable-tabs .nav-tabs>li.active>a:focus,
.horizontal-scrollable-tabs .nav-tabs>li.active>a:hover,
.able-nav-tabs>li.active>a,
.able-nav-tabs>li.active>a:focus,
.able-nav-tabs>li.active>a:hover {
  color: var(--able-primary) !important;
  border-bottom: 2px solid var(--able-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs .badge,
.horizontal-scrollable-tabs .nav-tabs .badge,
.able-nav-tabs .badge {
  background-color: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-radius: 10px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
}

/* Dark mode for horizontal scrollable tabs */
html.dark-mode .horizontal-scrollable-tabs .nav-tabs,
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
html.dark-mode .able-nav-tabs,
body.dark-mode .horizontal-scrollable-tabs .nav-tabs,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
body.dark-mode .able-nav-tabs,
[data-theme="dark"] .horizontal-scrollable-tabs .nav-tabs,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs,
[data-theme="dark"] .able-nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .horizontal-scrollable-tabs .nav-tabs>li>a,
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
html.dark-mode .able-nav-tabs>li>a,
body.dark-mode .horizontal-scrollable-tabs .nav-tabs>li>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
body.dark-mode .able-nav-tabs>li>a,
[data-theme="dark"] .horizontal-scrollable-tabs .nav-tabs>li>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
[data-theme="dark"] .able-nav-tabs>li>a {
  color: #8B98A5 !important;
}

html.dark-mode .horizontal-scrollable-tabs .nav-tabs>li>a:hover,
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a:hover,
html.dark-mode .able-nav-tabs>li>a:hover,
body.dark-mode .horizontal-scrollable-tabs .nav-tabs>li>a:hover,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a:hover,
body.dark-mode .able-nav-tabs>li>a:hover,
[data-theme="dark"] .horizontal-scrollable-tabs .nav-tabs>li>a:hover,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li>a:hover,
[data-theme="dark"] .able-nav-tabs>li>a:hover {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .horizontal-scrollable-tabs .nav-tabs>li.active>a,
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
html.dark-mode .able-nav-tabs>li.active>a,
body.dark-mode .horizontal-scrollable-tabs .nav-tabs>li.active>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
body.dark-mode .able-nav-tabs>li.active>a,
[data-theme="dark"] .horizontal-scrollable-tabs .nav-tabs>li.active>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
[data-theme="dark"] .able-nav-tabs>li.active>a {
  color: var(--able-primary, #01C38D) !important;
  border-bottom-color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .horizontal-scrollable-tabs .nav-tabs .badge,
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
html.dark-mode .able-nav-tabs .badge,
body.dark-mode .horizontal-scrollable-tabs .nav-tabs .badge,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
body.dark-mode .able-nav-tabs .badge,
[data-theme="dark"] .horizontal-scrollable-tabs .nav-tabs .badge,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs .badge,
[data-theme="dark"] .able-nav-tabs .badge {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-invoice-tabs-wrapper .scroller,
.horizontal-scrollable-tabs .scroller {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 5px !important;
  z-index: 20 !important;
  cursor: pointer !important;
  float: none !important;
  box-sizing: border-box !important;
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease-in-out !important;
}

.able-invoice-tabs-wrapper .scroller[style*="display: none"],
.horizontal-scrollable-tabs .scroller[style*="display: none"] {
  display: none !important;
}

.able-invoice-tabs-wrapper .scroller i,
.horizontal-scrollable-tabs .scroller i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 15px !important;
  text-align: center !important;
}

.able-invoice-tabs-wrapper .scroller:hover,
.horizontal-scrollable-tabs .scroller:hover {
  color: var(--able-primary, #01C38D) !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 3px 8px rgba(1, 195, 141, 0.25) !important;
}

.able-invoice-tabs-wrapper .arrow-left,
.horizontal-scrollable-tabs .arrow-left {
  left: 0 !important;
  right: auto !important;
  float: none !important;
}

.able-invoice-tabs-wrapper .arrow-right,
.horizontal-scrollable-tabs .arrow-right {
  right: 0 !important;
  left: auto !important;
  float: none !important;
}

/* Items Preview Table Enhancements */
.items-preview td.dragger,
.invoice-items-preview td.dragger,
.estimate-items-preview td.dragger,
.credit-note-items-preview td.dragger,
.proposal-items-preview td.dragger,
table.items-preview td.dragger,
.able-items-table-wrapper td.dragger {
  background: none !important;
  cursor: default !important;
  padding-left: 8px !important;
  text-align: center !important;
}

.able-items-table-wrapper {
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  background: var(--able-surface) !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

.able-items-table-wrapper table.table.items {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.able-items-table-wrapper table.table.items thead th,
.invoice-items-preview thead th {
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  border-top: none !important;
}

.able-items-table-wrapper table.table.items tbody td,
.invoice-items-preview tbody td {
  border-bottom: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
}

/* Dark mode support for invoice preview and tabs */
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs {
  border-color: #29313B !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li>a {
  color: #94A3B8 !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary) !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs .badge {
  background-color: rgba(70, 128, 255, 0.18) !important;
  color: #699DFE !important;
}

/* Dark mode scroller buttons: high contrast and distinctive */
html.dark-mode .able-invoice-tabs-wrapper .scroller,
body.dark-mode .able-invoice-tabs-wrapper .scroller,
[data-theme="dark"] .able-invoice-tabs-wrapper .scroller,
html.dark-mode .horizontal-scrollable-tabs .scroller,
body.dark-mode .horizontal-scrollable-tabs .scroller,
[data-theme="dark"] .horizontal-scrollable-tabs .scroller {
  background: #252D37 !important;
  border: 1px solid #475569 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-invoice-tabs-wrapper .scroller:hover,
body.dark-mode .able-invoice-tabs-wrapper .scroller:hover,
[data-theme="dark"] .able-invoice-tabs-wrapper .scroller:hover,
html.dark-mode .horizontal-scrollable-tabs .scroller:hover,
body.dark-mode .horizontal-scrollable-tabs .scroller:hover,
[data-theme="dark"] .horizontal-scrollable-tabs .scroller:hover {
  background: #334155 !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 4px 12px rgba(1, 195, 141, 0.3) !important;
}

/* Items Preview Table in Dark Mode */
html.dark-mode .able-items-table-wrapper,
body.dark-mode .able-items-table-wrapper,
[data-theme="dark"] .able-items-table-wrapper {
  background: #1D2630 !important;
  border-color: #29313B !important;
}

html.dark-mode .able-items-table-wrapper table.table.items thead th,
body.dark-mode .able-items-table-wrapper table.table.items thead th,
[data-theme="dark"] .able-items-table-wrapper table.table.items thead th {
  background: #131920 !important;
  color: #94A3B8 !important;
  border-color: #29313B !important;
}

html.dark-mode .able-items-table-wrapper table.table.items tbody td,
body.dark-mode .able-items-table-wrapper table.table.items tbody td,
[data-theme="dark"] .able-items-table-wrapper table.table.items tbody td,
html.dark-mode .table.items tbody td,
body.dark-mode .table.items tbody td,
[data-theme="dark"] .table.items tbody td {
  border-color: #29313B !important;
  color: #F8FAFC !important;
}

html.dark-mode .table.items tbody td strong,
body.dark-mode .table.items tbody td strong,
[data-theme="dark"] .table.items tbody td strong {
  color: #FFFFFF !important;
}

/* Item long description text visibility in Dark Mode */
html.dark-mode .table.items tbody td .description span,
body.dark-mode .table.items tbody td .description span,
[data-theme="dark"] .table.items tbody td .description span,
html.dark-mode .table.items tbody td .item-long-desc,
body.dark-mode .table.items tbody td .item-long-desc,
[data-theme="dark"] .table.items tbody td .item-long-desc,
html.dark-mode .table.items tbody td span[style*="color:#424242"],
body.dark-mode .table.items tbody td span[style*="color:#424242"],
[data-theme="dark"] .table.items tbody td span[style*="color:#424242"] {
  color: #94A3B8 !important;
}

html.dark-mode .table.items tbody td.cabys span,
body.dark-mode .table.items tbody td.cabys span,
[data-theme="dark"] .table.items tbody td.cabys span {
  color: #CBD5E1 !important;
}

/* Totals section in Dark Mode */
html.dark-mode table.table.text-right tr td,
body.dark-mode table.table.text-right tr td,
[data-theme="dark"] table.table.text-right tr td {
  border-color: #29313B !important;
  color: #CBD5E1 !important;
}

html.dark-mode table.table.text-right tr td span,
body.dark-mode table.table.text-right tr td span,
[data-theme="dark"] table.table.text-right tr td span {
  color: #CBD5E1 !important;
}

html.dark-mode table.table.text-right tr td.total,
body.dark-mode table.table.text-right tr td.total,
[data-theme="dark"] table.table.text-right tr td.total,
html.dark-mode table.table.text-right tr td.subtotal,
body.dark-mode table.table.text-right tr td.subtotal,
[data-theme="dark"] table.table.text-right tr td.subtotal {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Address, Project & Customer Info in Dark Mode */
html.dark-mode #invoice-preview address,
html.dark-mode #estimate-preview address,
html.dark-mode #proposal-preview-mount-point address,
body.dark-mode #invoice-preview address,
body.dark-mode #estimate-preview address,
[data-theme="dark"] #invoice-preview address,
[data-theme="dark"] #estimate-preview address {
  color: #94A3B8 !important;
}

html.dark-mode #invoice-preview p,
html.dark-mode #estimate-preview p,
html.dark-mode #proposal-preview-mount-point p,
body.dark-mode #invoice-preview p,
body.dark-mode #estimate-preview p,
[data-theme="dark"] #invoice-preview p,
[data-theme="dark"] #estimate-preview p {
  color: #CBD5E1 !important;
}

html.dark-mode #invoice-preview p span.bold,
html.dark-mode #estimate-preview p span.bold,
body.dark-mode #invoice-preview p span.bold,
body.dark-mode #estimate-preview p span.bold,
[data-theme="dark"] #invoice-preview p span.bold,
[data-theme="dark"] #estimate-preview p span.bold {
  color: #F1F5F9 !important;
}

/* ==========================================================================
   VIEW TRANSITIONS API FOR DARK / LIGHT MODE SWITCHING
   ========================================================================== */

/* Disable default crossfade animation while custom circular reveal runs */
html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Ensure new theme snapshot renders on top of the old theme during animation */
html.theme-transitioning::view-transition-old(root) {
  z-index: 1;
}

html.theme-transitioning::view-transition-new(root) {
  z-index: 999999;
}

/* Accessibility: Disable all view transitions when prefers-reduced-motion is requested */
@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Smooth surface transition fallback for browsers without View Transitions */
html:not(.theme-transitioning) body,
html:not(.theme-transitioning) #wrapper,
html:not(.theme-transitioning) #content,
html:not(.theme-transitioning) .panel_s,
html:not(.theme-transitioning) .panel-body,
html:not(.theme-transitioning) .v-card,
html:not(.theme-transitioning) .v-navigation-drawer,
html:not(.theme-transitioning) .v-app-bar,
html:not(.theme-transitioning) .able-table-card,
html:not(.theme-transitioning) .able-invoice-preview-wrapper,
html:not(.theme-transitioning) .able-customizer-drawer {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   ABLE PRO VUETIFY GLOBAL COMPONENT NORMALIZATION
   ========================================================================== */

/* Vuetify Outlined Cards: Fix Vuetify's default 'thin solid currentColor' black border */
.v-card--variant-outlined {
  border: 1px solid var(--able-border, #E8EBEE) !important;
}

.v-card--variant-outlined .v-divider {
  border-color: var(--able-border, #E8EBEE) !important;
}

/* Vuetify Outlined Input Fields (VTextField, VSelect, VTextarea, VAutocomplete, VCombobox) */
.v-field--variant-outlined .v-field__outline {
  color: #BEC8D0 !important;
  --v-field-border-opacity: 1 !important;
}

.v-field--variant-outlined:hover .v-field__outline {
  color: var(--able-secondary, #5B6B79) !important;
}

.v-field--variant-outlined.v-field--focused .v-field__outline {
  color: var(--able-primary, #01C38D) !important;
  --v-field-border-width: 1px !important;
}

/* Dark mode overrides for cards and fields */
html.dark-mode .v-card--variant-outlined,
body.dark-mode .v-card--variant-outlined,
[data-theme="dark"] .v-card--variant-outlined {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .v-card--variant-outlined .v-divider,
body.dark-mode .v-card--variant-outlined .v-divider,
[data-theme="dark"] .v-card--variant-outlined .v-divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .v-field--variant-outlined .v-field__outline,
body.dark-mode .v-field--variant-outlined .v-field__outline,
[data-theme="dark"] .v-field--variant-outlined .v-field__outline {
  color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .v-field--variant-outlined:hover .v-field__outline,
body.dark-mode .v-field--variant-outlined:hover .v-field__outline,
[data-theme="dark"] .v-field--variant-outlined:hover .v-field__outline {
  color: rgba(255, 255, 255, 0.3) !important;
}

html.dark-mode .v-field--variant-outlined.v-field--focused .v-field__outline,
body.dark-mode .v-field--variant-outlined.v-field--focused .v-field__outline,
[data-theme="dark"] .v-field--variant-outlined.v-field--focused .v-field__outline {
  color: var(--able-primary, #01C38D) !important;
}

/**
 * Able Pro Theme, Sidebar & Header Stylesheet for Kapix ERP SaaS
 * Colors: Dynamic CSS variables supported by Live Customizer
 */

:root {
  --able-primary: #01C38D;
  --able-primary-rgb: 1, 195, 141;
  --able-primary-dark: #00AA7B;
  --able-primary-light: #E6F9F3;
  --able-secondary: #5B6B79;
  --able-success: #2ca87f;
  --able-warning: #e58a00;
  --able-error: #dc2626;
  --able-info: #3ec9d6;
  --able-bg: #F8F9FA;
  --able-surface: #FFFFFF;
  --able-surface-light: #F8F9FA;
  --able-border: #E8EBEE;
  --able-text-dark: #1D2630;
  --able-text-muted: #5B6B79;
  --able-radius: 8px;
  --able-sidebar-width: 250px;
  --able-card-shadow: 0 8px 24px rgba(19, 25, 32, 0.06);
}

/* ==========================================================================
   DARK MODE CSS VARIABLES
   ========================================================================== */

html.dark-mode,
html[data-theme="dark"],
body.dark-mode,
[data-theme="dark"] {
  --able-bg: #0B0E14 !important;
  --able-surface: #141822 !important;
  --able-surface-light: #0F131C !important;
  --able-border: rgba(255, 255, 255, 0.08) !important;
  --able-text-dark: #FFFFFF !important;
  --able-text-muted: #8B98A5 !important;
  --able-primary-light: rgba(var(--able-primary-rgb, 1, 195, 141), 0.15);
  --able-radius: 16px !important;
  --able-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  background-color: #0B0E14 !important;
  color: #FFFFFF !important;
}

/* Global Typography & Layout */
body,
button,
input,
select,
textarea {
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6 {
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--able-text-dark) !important;
  letter-spacing: -0.2px !important;
}

h3,
.text-h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

h4,
.text-h4 {
  font-size: 22px !important;
  font-weight: 600 !important;
}

h5,
.text-h5 {
  font-size: 16px !important;
  font-weight: 600 !important;
}

h6,
.text-h6,
.text-subtitle-1 {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.text-subtitle-2 {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.text-lightText {
  color: var(--able-text-muted, #5B6B79) !important;
}

.text-darkText,
.text-dark {
  color: var(--able-text-dark, #1D2630) !important;
}

.text-muted,
.text-medium-emphasis {
  color: var(--able-text-muted, #5B6B79) !important;
}

/* UNIVERSAL DARK MODE TEXT CONTRAST ENFORCEMENT */
html.dark-mode,
html[data-theme="dark"],
body.dark-mode,
[data-theme="dark"] {
  --able-text-dark: #FFFFFF !important;
  --able-text-muted: #8B98A5 !important;
}

html.dark-mode .text-darkText,
html.dark-mode .text-dark,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .text-h1,
html.dark-mode .text-h2,
html.dark-mode .text-h3,
html.dark-mode .text-h4,
html.dark-mode .text-h5,
html.dark-mode .text-h6,
html.dark-mode .text-subtitle-1,
html.dark-mode .text-subtitle-2,
html.dark-mode .v-card-title,
html.dark-mode .v-card-text h5,
html.dark-mode .v-card-text h6,
html.dark-mode .v-list-item-title,
html[data-theme="dark"] .text-darkText,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-h1,
html[data-theme="dark"] .text-h2,
html[data-theme="dark"] .text-h3,
html[data-theme="dark"] .text-h4,
html[data-theme="dark"] .text-h5,
html[data-theme="dark"] .text-h6,
html[data-theme="dark"] .text-subtitle-1,
html[data-theme="dark"] .text-subtitle-2,
html[data-theme="dark"] .v-card-title,
html[data-theme="dark"] .v-card-text h5,
html[data-theme="dark"] .v-card-text h6,
html[data-theme="dark"] .v-list-item-title {
  color: #E8EBEE !important;
}

html.dark-mode .text-muted,
html.dark-mode .text-medium-emphasis,
html.dark-mode .text-lightText,
html.dark-mode .text-caption,
html.dark-mode .v-list-item-subtitle,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-medium-emphasis,
html[data-theme="dark"] .text-lightText,
html[data-theme="dark"] .text-caption,
html[data-theme="dark"] .v-list-item-subtitle {
  color: #8C99A5 !important;
}

#wrapper {
  background-color: transparent !important;
  margin-left: var(--able-sidebar-width) !important;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-liquid-bg="none"]:not(.has-custom-bg-img)[data-bg-pattern="none"] #wrapper {
  background-color: var(--able-bg) !important;
}

/* Header */
#header,
.able-pro-header {
  background: var(--able-surface) !important;
  border-bottom: 1px solid var(--able-border) !important;
  box-shadow: none !important;
  height: 74px !important;
  margin-left: var(--able-sidebar-width) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSE & EXPAND (DESKTOP & MOBILE)
   ========================================================================== */

body.hide-sidebar:not(.show-sidebar) #menu,
body.hide-sidebar:not(.show-sidebar) .able-pro-sidebar {
  transform: translateX(-100%) !important;
}

body.hide-sidebar:not(.show-sidebar) #wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

body.hide-sidebar:not(.show-sidebar) #header,
body.hide-sidebar:not(.show-sidebar) .able-pro-header {
  margin-left: 0 !important;
  width: 100% !important;
}

body.hide-sidebar:not(.show-sidebar) .btn-bottom-toolbar {
  margin-left: 0 !important;
  width: 100% !important;
}

.able-sidebar-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.able-sidebar-toggle:hover {
  background: var(--able-border) !important;
  color: var(--able-primary) !important;
}

.able-header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-left: 16px !important;
}

/* Header Search */
.able-header-left {
  display: flex !important;
  align-items: center !important;
}

.able-search-wrapper {
  position: relative !important;
}

.able-search-input-box {
  display: flex !important;
  align-items: center !important;
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  height: 40px !important;
  width: 240px !important;
  transition: all 0.2s ease !important;
}

.able-search-input-box:focus-within {
  background: var(--able-surface) !important;
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.2) !important;
  width: 300px !important;
}

.able-search-icon {
  color: var(--able-text-muted) !important;
  font-size: 13px !important;
  margin-right: 8px !important;
}

.able-search-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--able-text-dark) !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.able-search-input::placeholder {
  color: var(--able-text-muted) !important;
  font-weight: 500 !important;
}

/* Header Right Actions */
.able-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-header-item {
  position: relative !important;
}

.able-header-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--able-bg) !important;
  border: 1px solid transparent !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.able-header-btn:hover {
  background: var(--able-border) !important;
  color: var(--able-primary) !important;
}

.able-header-badge,
.able-notification-badge,
.able-todo-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background: var(--able-success) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 17px !important;
  height: 17px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid var(--able-surface) !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

.able-header-badge.hide,
.able-notification-badge.hide,
.able-todo-badge.hide {
  display: none !important;
}

.able-notif-badge {
  background: var(--able-success, #01C38D) !important;
  color: #FFFFFF !important;
}

.able-todo-badge {
  background: #E58A00 !important;
  color: #FFFFFF !important;
}

.able-badge-dot {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 2px solid var(--able-surface) !important;
}

/* User Avatar & Dropdown */
.able-profile-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
}

.able-header-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--able-border) !important;
  background-color: var(--able-primary-light, #E9F0FF) !important;
  transition: all 0.2s ease !important;
}

.able-header-avatar:hover {
  border-color: var(--able-primary) !important;
  transform: scale(1.05) !important;
}

.able-profile-dropdown {
  width: 290px !important;
  background: var(--able-surface) !important;
  border-radius: 12px !important;
  border: 1px solid var(--able-border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2) !important;
  padding: 16px !important;
  margin-top: 10px !important;
}

.able-profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
}

.able-profile-avatar-lg {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: var(--able-primary-light, #E9F0FF) !important;
  border: 2px solid var(--able-border) !important;
}

.staff-profile-image,
.staff-profile-image-small,
.staff-profile-image-thumb,
.staff-profile-xs-image,
.client-profile-image,
.client-profile-image-small,
.profile-avatar-wrapper img {
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: var(--able-primary-light, #E9F0FF);
}

.able-profile-header-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.able-profile-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin: 0 0 2px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-profile-role {
  font-size: 10.5px !important;
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
  width: fit-content !important;
}

.able-profile-email {
  font-size: 11.5px !important;
  color: var(--able-text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-profile-body {
  padding-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.able-profile-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--able-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-profile-menu-item:hover {
  background: var(--able-bg) !important;
  color: var(--able-primary) !important;
}

.able-profile-divider {
  height: 1px !important;
  background: var(--able-border) !important;
  margin: 6px 0 !important;
}

.able-logout-item {
  color: var(--able-error) !important;
}

.able-logout-item:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: var(--able-error) !important;
}

/* Notifications Dropdown */
.able-notifications-dropdown {
  width: 380px !important;
  background: var(--able-surface) !important;
  border-radius: 12px !important;
  border: 1px solid var(--able-border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}

.able-notif-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--able-border) !important;
}

.able-notif-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin: 0 !important;
}

.able-notif-mark-read {
  font-size: 12px !important;
  color: var(--able-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}

.able-notif-mark-read:hover {
  text-decoration: underline !important;
  opacity: 0.85 !important;
}

.able-notif-list {
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 12px 16px !important;
}

.able-notif-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-notif-item:hover {
  background: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

.able-notif-item.unread {
  background: var(--able-primary-light) !important;
  border-color: var(--able-primary) !important;
}

.able-notif-icon-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.able-notif-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.able-notif-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.able-notif-text {
  font-size: 12.5px !important;
  color: var(--able-text-dark) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.able-notif-time {
  font-size: 11px !important;
  color: var(--able-text-muted) !important;
  margin-top: 2px !important;
  display: block !important;
}

.able-notif-empty {
  text-align: center !important;
  padding: 32px 16px !important;
  color: var(--able-text-muted) !important;
}

.able-notif-empty i {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}

.able-notif-footer {
  padding: 12px !important;
  text-align: center !important;
  border-top: 1px solid var(--able-border) !important;
  background: var(--able-bg) !important;
}

.able-notif-view-all {
  font-size: 12.5px !important;
  color: var(--able-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Mega Menu Dropdown */
.able-megamenu-dropdown {
  width: 320px !important;
  background: var(--able-surface) !important;
  border-radius: 12px !important;
  border: 1px solid var(--able-border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2) !important;
  padding: 16px !important;
  margin-top: 10px !important;
}

.able-megamenu-header h6 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin: 0 0 12px 0 !important;
}

.able-megamenu-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.able-megamenu-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 8px !important;
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  gap: 6px !important;
}

.able-megamenu-item i {
  font-size: 20px !important;
}

.able-megamenu-item span {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--able-text-dark) !important;
}

.able-megamenu-item:hover {
  background: var(--able-bg) !important;
  border-color: var(--able-primary) !important;
}

/* ==========================================================================
   ABLE PRO SIDEBAR (PIXEL-PERFECT ORIGINAL)
   ========================================================================== */

/* ==========================================================================
   ABLE PRO SIDEBAR (PIXEL-PERFECT OFFICIAL TEMPLATE)
   ========================================================================== */

.able-pro-sidebar,
#menu {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--able-sidebar-width, 260px) !important;
  background: var(--able-surface, #FFFFFF) !important;
  border-right: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: none !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Brand Logo Area */
.able-brand-header {
  padding: 20px 24px 16px 24px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: none !important;
}

.able-brand-link,
.able-brand-header .logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  max-width: 100% !important;
}

.able-brand-logo,
.able-brand-header img {
  max-height: 38px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: opacity 0.2s ease !important;
}

.able-brand-logo-svg {
  height: 28px !important;
  width: auto !important;
}

.able-brand-logo-light {
  display: block !important;
}

.able-brand-logo-dark {
  display: none !important;
}

body.dark-mode .able-brand-logo-light,
[data-theme="dark"] .able-brand-logo-light {
  display: none !important;
}

body.dark-mode .able-brand-logo-dark,
[data-theme="dark"] .able-brand-logo-dark {
  display: block !important;
}

.able-brand-text,
.able-brand-header .logo-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

/* Nav Scroll Container */
.able-nav-scroll-container {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-bottom: 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--able-border) transparent !important;
}

.able-nav-scroll-container::-webkit-scrollbar {
  width: 5px !important;
}

.able-nav-scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--able-border) !important;
  border-radius: 10px !important;
}

/* Menu List */
.able-pro-sidebar .able-menu-list,
.able-pro-sidebar #side-menu {
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Section Subheaders */
.able-pro-sidebar .able-nav-group-header {
  padding: 16px 20px 6px 20px !important;
  list-style: none !important;
}

.able-pro-sidebar .able-nav-group-header span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

/* Sidebar Items */
.able-pro-sidebar #side-menu>li,
.able-pro-sidebar .able-nav-item {
  display: block !important;
  position: relative !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

.able-pro-sidebar #side-menu>li>a,
.able-pro-sidebar .able-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-pro-sidebar .able-nav-icon,
.able-pro-sidebar #side-menu>li>a i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.pc-icon,
.able-nav-svg-icon {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  pointer-events: none !important;
  transition: color 0.15s ease, stroke 0.15s ease !important;
}

.pc-icon *,
.able-nav-svg-icon * {
  pointer-events: none !important;
}

.able-pro-sidebar .able-nav-link:hover .pc-icon,
.able-pro-sidebar #side-menu>li>a:hover .pc-icon,
.able-pro-sidebar .able-nav-link:hover .able-nav-svg-icon,
.able-pro-sidebar #side-menu>li>a:hover .able-nav-svg-icon {
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link.active .pc-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .pc-icon,
.able-pro-sidebar #side-menu>li.active>a .pc-icon,
.able-pro-sidebar .able-nav-link.active .able-nav-svg-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-svg-icon,
.able-pro-sidebar #side-menu>li.active>a .able-nav-svg-icon {
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-title,
.able-pro-sidebar #side-menu>li>a span.nav-text-modern,
.able-pro-sidebar #side-menu>li>a span.menu-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  white-space: nowrap !important;
  text-align: left !important;
  flex-grow: 1 !important;
}

.able-pro-sidebar .able-nav-link:hover,
.able-pro-sidebar #side-menu>li>a:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link:hover .able-nav-icon,
.able-pro-sidebar .able-nav-link:hover .able-nav-title,
.able-pro-sidebar #side-menu>li>a:hover i,
.able-pro-sidebar #side-menu>li>a:hover span {
  color: var(--able-primary, #01C38D) !important;
}

/* Active Item Style (Official Able Pro Light-Green Pill) */
.able-pro-sidebar .able-nav-link.active,
.able-pro-sidebar .able-nav-item.active>.able-nav-link,
.able-pro-sidebar #side-menu>li.active>a,
.able-pro-sidebar #side-menu>li.active>a:hover,
.able-pro-sidebar #side-menu>li.active>a:focus {
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  border-radius: 12px !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link.active,
html.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a,
body.dark-mode .able-pro-sidebar .able-nav-link.active,
body.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a,
[data-theme="dark"] .able-pro-sidebar .able-nav-link.active,
[data-theme="dark"] .able-pro-sidebar .able-nav-item.active>.able-nav-link,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.18) 0%, rgba(1, 195, 141, 0.05) 100%) !important;
  border: 1px solid rgba(1, 195, 141, 0.35) !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link.active .able-nav-title,
html.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
html.dark-mode .able-pro-sidebar #side-menu>li.active>a span.menu-text,
body.dark-mode .able-pro-sidebar .able-nav-link.active .able-nav-title,
body.dark-mode .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
body.dark-mode .able-pro-sidebar #side-menu>li.active>a span.menu-text,
[data-theme="dark"] .able-pro-sidebar .able-nav-link.active .able-nav-title,
[data-theme="dark"] .able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
[data-theme="dark"] .able-pro-sidebar #side-menu>li.active>a span.menu-text {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

html.dark-mode .able-pro-sidebar .able-nav-link:hover,
html.dark-mode .able-pro-sidebar #side-menu>li>a:hover,
body.dark-mode .able-pro-sidebar .able-nav-link:hover,
body.dark-mode .able-pro-sidebar #side-menu>li>a:hover,
[data-theme="dark"] .able-pro-sidebar .able-nav-link:hover,
[data-theme="dark"] .able-pro-sidebar #side-menu>li>a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

.able-pro-sidebar .able-nav-link.active .able-nav-icon,
.able-pro-sidebar .able-nav-link.active .able-nav-icon i,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-icon,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-icon i,
.able-pro-sidebar #side-menu>li.active>a i {
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-sidebar .able-nav-link.active .able-nav-title,
.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-title,
.able-pro-sidebar #side-menu>li.active>a span.nav-text-modern,
.able-pro-sidebar #side-menu>li.active>a span.menu-text {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

.able-pro-sidebar .able-nav-arrow {
  margin-left: auto !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  transition: transform 0.2s ease, color 0.2s ease, stroke 0.2s ease !important;
  flex-shrink: 0 !important;
}

.able-pro-sidebar .able-nav-item.active>.able-nav-link .able-nav-arrow,
.able-pro-sidebar .able-nav-link[aria-expanded="true"] .able-nav-arrow,
.able-pro-sidebar #side-menu>li.active>a .able-nav-arrow {
  transform: rotate(180deg) !important;
  color: var(--able-primary, #01C38D) !important;
  stroke: var(--able-primary, #01C38D) !important;
}

/* Submenus with Bullet Points (Vertical Accordion) */
.able-pro-sidebar .able-submenu,
.able-pro-sidebar #side-menu .nav-second-level {
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border-left: none !important;
  width: 100% !important;
}

.able-pro-sidebar .able-submenu:not(.in):not(.collapsing) {
  display: none !important;
}

.able-pro-sidebar .able-submenu.in,
.able-pro-sidebar .able-submenu.collapsing {
  display: block !important;
}

.able-pro-sidebar .able-submenu-item,
.able-pro-sidebar #side-menu .nav-second-level li {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

.able-pro-sidebar .able-submenu-link,
.able-pro-sidebar #side-menu .nav-second-level li a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px 8px 36px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-pro-sidebar .able-submenu-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: var(--able-text-muted, #5B6B79) !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.able-pro-sidebar .able-submenu-title {
  font-size: 13.5px !important;
  color: inherit !important;
}

.able-pro-sidebar .able-submenu-link:hover {
  color: var(--able-primary, #01C38D) !important;
  background-color: var(--able-bg, #F8F9FA) !important;
}

.able-pro-sidebar .able-submenu-link:hover .able-submenu-bullet {
  background-color: var(--able-primary, #01C38D) !important;
  transform: scale(1.3) !important;
}

.able-pro-sidebar .able-submenu-item.active>.able-submenu-link,
.able-pro-sidebar #side-menu .nav-second-level li.active a {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

.able-pro-sidebar .able-submenu-bullet.active,
.able-pro-sidebar .able-submenu-item.active .able-submenu-bullet,
.able-pro-sidebar #side-menu .nav-second-level li.active .able-submenu-bullet {
  background-color: var(--able-primary, #01C38D) !important;
  width: 6px !important;
  height: 6px !important;
}

/* ==========================================================================
   ABLE PRO SETUP MENU (CONFIGURATION SECONDARY SIDEBAR)
   ========================================================================== */

@keyframes ableSetupSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  30% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ableSetupSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes ableSetupSlideInRTL {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ableSetupSlideOutRTL {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

#setup-menu-wrapper,
body.admin #setup-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--able-sidebar-width, 260px) !important;
  width: var(--able-sidebar-width, 260px) !important;
  height: 100vh !important;
  background: var(--able-surface, #FFFFFF) !important;
  border-right: 1px dashed var(--able-border, #E8EBEE) !important;
  border-left: 1px dashed var(--able-border, #E8EBEE) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
  z-index: 1030 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

#setup-menu-wrapper.fadeInLeft,
body.admin #setup-menu-wrapper.fadeInLeft,
#setup-menu-wrapper.display-block:not(.fadeOutLeft),
body.admin #setup-menu-wrapper.display-block:not(.fadeOutLeft) {
  display: block !important;
  animation: ableSetupSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

#setup-menu-wrapper.fadeOutLeft,
body.admin #setup-menu-wrapper.fadeOutLeft {
  animation: ableSetupSlideOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

#setup-menu-wrapper:not(.display-block):not(.fadeInLeft) {
  display: none !important;
}

[dir="rtl"] #setup-menu-wrapper,
[dir="rtl"] body.admin #setup-menu-wrapper {
  left: auto !important;
  right: var(--able-sidebar-width, 260px) !important;
  border-left: 1px dashed var(--able-border, #E8EBEE) !important;
  border-right: none !important;
}

[dir="rtl"] #setup-menu-wrapper.fadeInLeft,
[dir="rtl"] body.admin #setup-menu-wrapper.fadeInLeft,
[dir="rtl"] #setup-menu-wrapper.display-block:not(.fadeOutLeft),
[dir="rtl"] body.admin #setup-menu-wrapper.display-block:not(.fadeOutLeft) {
  display: block !important;
  animation: ableSetupSlideInRTL 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[dir="rtl"] #setup-menu-wrapper.fadeOutLeft,
[dir="rtl"] body.admin #setup-menu-wrapper.fadeOutLeft {
  animation: ableSetupSlideOutRTL 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@media (max-width: 991px) {

  #setup-menu-wrapper,
  body.admin #setup-menu-wrapper {
    left: 0 !important;
    width: 280px !important;
    z-index: 1060 !important;
  }
}

/* Header in Setup Menu */
#setup-menu-wrapper .setup-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 20px 16px 20px !important;
  height: 70px !important;
  border-bottom: 1px dashed var(--able-border, #E8EBEE) !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

#setup-menu-wrapper .setup-menu-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
}

#setup-menu-wrapper .close-customizer,
#setup-menu-wrapper .close-modern {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

#setup-menu-wrapper .close-customizer:hover,
#setup-menu-wrapper .close-modern:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Setup Menu Navigation List */
#setup-menu-wrapper #setup-menu,
#setup-menu-wrapper .setup-menu-nav {
  list-style: none !important;
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#setup-menu-wrapper #setup-menu>li,
#setup-menu-wrapper .setup-item-modern {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

#setup-menu-wrapper #setup-menu>li>a,
#setup-menu-wrapper .setup-item-modern>a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  gap: 12px !important;
}

#setup-menu-wrapper #setup-menu>li>a:hover,
#setup-menu-wrapper .setup-item-modern>a:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

#setup-menu-wrapper #setup-menu>li.active>a,
#setup-menu-wrapper .setup-item-modern.active>a {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 500 !important;
}

#setup-menu-wrapper .setup-icon-modern,
#setup-menu-wrapper #setup-menu>li>a i.menu-icon {
  font-size: 16px !important;
  width: 18px !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#setup-menu-wrapper .setup-text-modern,
#setup-menu-wrapper #setup-menu>li>a span.menu-text {
  font-size: 13.5px !important;
  color: inherit !important;
  flex-grow: 1 !important;
}

/* Submenus in Setup Menu */
#setup-menu-wrapper .setup-submenu-modern,
#setup-menu-wrapper #setup-menu .nav-second-level {
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

#setup-menu-wrapper .setup-subitem-modern,
#setup-menu-wrapper #setup-menu .nav-second-level li {
  display: block !important;
  margin: 2px 14px !important;
  padding: 0 !important;
}

#setup-menu-wrapper .setup-subitem-modern a,
#setup-menu-wrapper #setup-menu .nav-second-level li a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 14px 7px 32px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

#setup-menu-wrapper .setup-subitem-modern a:hover,
#setup-menu-wrapper #setup-menu .nav-second-level li a:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* ExtraBox (Support Card) */
.able-extrabox {
  margin: 20px 16px 10px 16px !important;
  background: var(--able-bg) !important;
  border: 1px dashed var(--able-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
}

.able-extrabox-icon {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 8px auto !important;
  border-radius: 50% !important;
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.able-extrabox-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin-bottom: 2px !important;
}

.able-extrabox-desc {
  font-size: 11.5px !important;
  color: var(--able-text-muted) !important;
  margin-bottom: 12px !important;
}

.able-extrabox-btn {
  background-color: var(--able-primary) !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

/* Panel & Card Dark Mode Overrides */
html.dark-mode .panel_s,
html.dark-mode .panel-body,
html.dark-mode .v-card,
html.dark-mode .modal-content,
body.dark-mode .panel_s,
body.dark-mode .panel-body,
body.dark-mode .v-card,
body.dark-mode .modal-content,
[data-theme="dark"] .panel_s,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .v-card,
[data-theme="dark"] .modal-content {
  background-color: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
}

body.dark-mode .alert-warning {
  background-color: #2a2415 !important;
  border-color: #59441a !important;
  color: #f7dcb3 !important;
}

body.dark-mode .alert-info {
  background-color: #16262e !important;
  border-color: #204554 !important;
  color: #c5eff3 !important;
}

html.dark-mode .able-widget-sheet,
body.dark-mode .able-widget-sheet,
[data-theme="dark"] .able-widget-sheet {
  background-color: #0F131C !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
}

/* Responsive */
@media (max-width: 991px) {

  .able-pro-sidebar,
  #menu {
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease-in-out !important;
  }

  body.show-sidebar .able-pro-sidebar,
  body.show-sidebar #menu {
    transform: translateX(0) !important;
  }

  #wrapper,
  #header,
  .able-pro-header {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   ABLE PRO FORM & TRANSACTION PAGES (INVOICES / ESTIMATES / PROPOSALS)
   ========================================================================== */

.invoice-form .panel_s,
.estimate-form .panel_s,
.proposal-form .panel_s,
.panel_s.accounting-template {
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  background: var(--able-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-bottom: 24px !important;
}

.invoice-form .panel-body,
.estimate-form .panel-body,
.panel_s.accounting-template>.panel-body {
  padding: 24px !important;
  background: var(--able-surface) !important;
}

/* Able Pro Form Controls */
.invoice-form .form-control,
.estimate-form .form-control,
.accounting-template .form-control {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  font-size: 13.5px !important;
  height: 40px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.invoice-form .bootstrap-select>.btn,
.estimate-form .bootstrap-select>.btn,
.bootstrap-select>.btn.dropdown-toggle {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  font-size: 13.5px !important;
  height: 40px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  line-height: normal !important;
}

.bootstrap-select>.btn .filter-option {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.bootstrap-select>.btn .filter-option-inner-inner {
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bootstrap-select .bs-caret {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.bootstrap-select .bs-caret .caret {
  margin-top: 0 !important;
  border-top-color: var(--able-text-muted) !important;
}

.invoice-form textarea.form-control,
.estimate-form textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

.invoice-form .form-control:focus,
.estimate-form .form-control:focus,
.invoice-form .bootstrap-select>.btn:focus,
.estimate-form .bootstrap-select>.btn:focus {
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light) !important;
}

/* Modern Able Pro Select Groups (Client, Items, Tasks) */
.able-client-select-group,
.able-item-select-group {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-client-select-group .bootstrap-select,
.able-item-select-group .bootstrap-select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.able-client-select-group .able-add-btn,
.able-item-select-group .able-add-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--able-text-dark) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.able-client-select-group .able-add-btn:hover,
.able-item-select-group .able-add-btn:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-color: var(--able-border) !important;
}

/* Unified Input Group styling for Bootstrap-Select + Add Button */
.input-group.input-group-select,
.input-group {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  position: relative !important;
}

.input-group.input-group-select .bootstrap-select,
.input-group .bootstrap-select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.input-group.input-group-select .bootstrap-select>.btn,
.input-group .bootstrap-select>.btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.input-group-btn>.btn,
.input-group-btn>a.btn,
.input-group-addon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--able-border) !important;
  border-radius: 0 8px 8px 0 !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  border-color: var(--able-border) !important;
  padding: 0 12px !important;
}

.input-group-btn>.btn:hover,
.input-group-btn>a.btn:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-color: var(--able-border) !important;
}

/* Bootstrap Select Dropdown Menu & Search styling */
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(19, 25, 32, 0.08) !important;
  background: var(--able-surface) !important;
  padding: 8px 0 !important;
  margin-top: 4px !important;
}

.bootstrap-select .bs-searchbox {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--able-border) !important;
}

.bootstrap-select .bs-searchbox .form-control {
  border-radius: 6px !important;
  border: 1px solid var(--able-border) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  height: 36px !important;
  background: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
}

.bootstrap-select .bs-searchbox .form-control:focus {
  border-color: var(--able-primary) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light) !important;
  background: var(--able-surface) !important;
}

.bootstrap-select .dropdown-menu li a {
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  color: var(--able-text-dark) !important;
  transition: all 0.15s ease !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a {
  background-color: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
}

.bootstrap-select .dropdown-menu .text-muted,
.bootstrap-select .dropdown-menu small {
  color: var(--able-text-muted) !important;
  font-size: 11.5px !important;
}

/* Address Boxes (From / To) */
.accounting-template address {
  background: var(--able-bg) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--able-text-muted) !important;
}

/* Items Table */
.invoice-items-table,
.table.items {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

.invoice-items-table thead th,
.table.items thead th {
  background: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  border-top: none !important;
}

.invoice-items-table tbody td,
.table.items tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--able-border) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

/* Main input row for adding items */
.table.items tr.main td {
  background-color: transparent !important;
  background: transparent !important;
}

.table.items tr.main td textarea.form-control {
  height: 38px !important;
  min-height: 38px !important;
  resize: vertical !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding: 8px 10px !important;
}

.table.items tr.main td textarea.form-control:focus {
  height: 70px !important;
}

.table.items tr.main td button.btn-primary {
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--able-primary) !important;
  border-color: var(--able-primary) !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.2) !important;
  margin: 0 auto !important;
}

/* Bottom Toolbar */
.btn-bottom-toolbar {
  background: var(--able-surface) !important;
  border-top: 1px solid var(--able-border) !important;
  box-shadow: 0 -4px 16px rgba(19, 25, 32, 0.05) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.btn-bottom-toolbar .btn-group {
  display: inline-flex !important;
  align-items: stretch !important;
}

.btn-bottom-toolbar .btn-primary,
.btn-bottom-toolbar .btn-success,
.btn-bottom-toolbar .btn-info,
.btn-bottom-toolbar .btn-group>.btn:first-child:not(:last-child) {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.35) !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-bottom-toolbar .btn-group>.btn:only-child,
.btn-bottom-toolbar>.btn-primary:only-child {
  border-radius: 10px !important;
}

.btn-bottom-toolbar .btn-group>.dropdown-toggle {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 0 10px 10px 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.35) !important;
  padding: 8px 10px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-bottom-toolbar .btn-default {
  border-radius: 8px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
  padding: 8px 16px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 500 !important;
}

.btn-bottom-toolbar .btn-default:hover {
  background: var(--able-bg) !important;
}



/* ==========================================================================
   Able Pro Global Modal Design
   ========================================================================== */
.modal-content {
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(19, 25, 32, 0.16) !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  overflow: hidden !important;
}

.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: none !important;
  content: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 18px 24px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.modal-header .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  flex-grow: 1 !important;
}

.modal-header .close,
.modal-header button.close {
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  opacity: 0.7 !important;
  margin: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.modal-header .close:hover,
.modal-header button.close:hover {
  opacity: 1 !important;
  color: var(--able-text-dark, #1D2630) !important;
}

.modal-body {
  padding: 24px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
}

.modal-footer {
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 16px 24px !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  background-color: #01C38D !important;
  border: 1px solid #01C38D !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.25) !important;
}

html.dark-mode .modal-footer .btn-primary,
html.dark-mode .modal-footer button[type="submit"],
[data-theme="dark"] .modal-footer .btn-primary,
[data-theme="dark"] .modal-footer button[type="submit"] {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
}

.modal-footer .btn-default {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-dark, #1D2630) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.modal-body .form-group {
  margin-bottom: 16px !important;
}

.modal-body label.control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-dark, #1D2630) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.modal-body input.form-control,
.modal-body textarea.form-control {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}

.modal-body input.form-control:focus,
.modal-body textarea.form-control:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px var(--able-primary-light, #E6F9F3) !important;
}

.modal-body .bootstrap-select .btn.dropdown-toggle {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  height: 38px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
}

/* ==========================================================================
   Able Pro Customer 360 / Client Profile Design
   ========================================================================== */

/* Hero Banner Card */
.able-customer-hero-card {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
}

.able-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.able-hero-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 12px !important;
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.able-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.able-hero-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.able-hero-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  font-size: 12.5px !important;
  color: var(--able-text-muted, #5B6B79) !important;
}

.able-hero-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark, #1D2630) !important;
  line-height: 1.2 !important;
}

/* Vertical Navigation Card */
.able-customer-nav-card {
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  padding: 10px 8px !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
}

.able-customer-nav-card .able-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.able-customer-nav-card .able-nav-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.able-customer-nav-card .able-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  margin-bottom: 2px !important;
}

.able-customer-nav-card .able-nav-item:hover {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #01C38D) !important;
}

.able-customer-nav-card .able-nav-item.active {
  background-color: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

.able-customer-nav-card .able-nav-left-part {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.able-customer-nav-card .able-nav-icon {
  font-size: 15px !important;
  width: 20px !important;
  text-align: center !important;
  color: inherit !important;
  display: inline-block !important;
}

.able-customer-nav-card .able-nav-label {
  font-size: 13.5px !important;
}

.able-customer-nav-card .able-nav-badge {
  background-color: rgba(1, 195, 141, 0.12) !important;
  color: var(--able-primary, #01C38D) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}

.able-customer-nav-card .able-nav-item.active .able-nav-badge {
  background-color: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
}

/* Content Panel & Subtabs */
.able-content-panel {
  background-color: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.04);
  overflow: hidden;
}

.customer-profile-tabs.nav-tabs-horizontal {
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
}

.customer-profile-tabs.nav-tabs-horizontal>li>a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 12px 18px !important;
  background: transparent !important;
}

.customer-profile-tabs.nav-tabs-horizontal>li.active>a,
.customer-profile-tabs.nav-tabs-horizontal>li>a:hover {
  color: var(--able-primary, #01C38D) !important;
  border-bottom-color: var(--able-primary, #01C38D) !important;
  background: transparent !important;
}

.able-panel-footer {
  background-color: var(--able-bg, #F8F9FA);
  border-top: 1px solid var(--able-border, #E8EBEE);
  padding: 16px 24px;
}

/* ==========================================================================
   ABLE PRO GRIDSTACK DASHBOARD & WIDGETS
   ========================================================================== */

.able-dashboard-toolbar {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.grid-stack {
  margin-top: 8px !important;
}

.grid-stack-item-content {
  overflow: hidden !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.grid-stack-item-content>.widget {
  height: 100% !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.grid-stack-item-content .panel_s {
  height: 100% !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  background: var(--able-surface) !important;
  border-radius: 12px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  border: 1px solid var(--able-border) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.grid-stack-item-content .panel_s:hover {
  box-shadow: 0 12px 32px rgba(19, 25, 32, 0.08) !important;
}

.grid-stack-item-content .panel-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  background: transparent !important;
}

.grid-stack-item-content .panel-body>.row {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.grid-stack-item-content .panel-body>.row>div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Able Pro Widget Dragger */
.widget-dragger {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--able-text-muted, #5B6B79) !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 6px !important;
  cursor: move !important;
  cursor: grab !important;
  z-index: 99 !important;
  opacity: 0.65;
  transition: all 0.2s ease-in-out !important;
}

.widget-dragger:before {
  content: "\f58e" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
}

.grid-stack-item:hover .widget-dragger,
.widget-dragger:hover {
  opacity: 1 !important;
  color: var(--able-primary, #01C38D) !important;
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  transform: scale(1.05);
}

.widget-dragger:active {
  cursor: grabbing !important;
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
}

.grid-stack-item-content .panel-body>.tw-flex:first-of-type,
.grid-stack-item-content .panel-body>.widget-dragger+.tw-flex,
.grid-stack-item-content .panel-body>.horizontal-scrollable-tabs {
  padding-left: 28px !important;
}

.relative-chart-wrapper canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#calendar {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

.activity-feed,
.todo-items-container,
.grid-stack-item-content .table-responsive {
  height: 100% !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Able Pro Stat Cards */
.donezo-stat-card {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: var(--able-card-shadow, 0 8px 24px rgba(19, 25, 32, 0.04)) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.donezo-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(19, 25, 32, 0.08) !important;
}

.donezo-stat-card.donezo-stat-featured {
  background: linear-gradient(135deg, #01C38D 0%, #00AA7B 100%) !important;
  border-color: #01C38D !important;
  color: #FFFFFF !important;
}

.donezo-stat-card.donezo-stat-featured .donezo-stat-label,
.donezo-stat-card.donezo-stat-featured .donezo-stat-number,
.donezo-stat-card.donezo-stat-featured .donezo-stat-fraction {
  color: #FFFFFF !important;
}

.donezo-stat-card.donezo-stat-featured .donezo-stat-arrow {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

.donezo-stat-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.donezo-stat-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--able-text-muted) !important;
}

.donezo-stat-number {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--able-text-dark) !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.donezo-stat-arrow {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.donezo-stat-arrow:hover {
  background: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
}

.donezo-stat-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--able-text-muted) !important;
}

.donezo-percent-success {
  background: rgba(46, 204, 113, 0.12) !important;
  color: #2ECC71 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* FullCalendar styling in Able Pro */
#calendar .fc-toolbar {
  margin-bottom: 16px !important;
}

#calendar .fc-toolbar h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
}

#calendar .fc-button {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

#calendar .fc-button-active,
#calendar .fc-state-active {
  background: var(--able-primary) !important;
  color: #ffffff !important;
  border-color: var(--able-primary) !important;
}

#calendar .fc-day-header {
  padding: 8px 0 !important;
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  font-weight: 600 !important;
  border-color: var(--able-border) !important;
}

#calendar td,
#calendar th {
  border-color: var(--able-border) !important;
}

/* Mobile Gridstack */
@media (max-width: 768px) {
  .grid-stack {
    height: auto !important;
  }

  .grid-stack-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
  }

  .grid-stack-item-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  .grid-stack-item-content>.widget,
  .grid-stack-item-content .panel_s,
  .grid-stack-item-content .panel-body {
    height: auto !important;
  }

  #calendar,
  .activity-feed,
  .todo-items-container,
  .grid-stack-item-content .table-responsive {
    height: auto !important;
    max-height: 60vh !important;
  }
}

/* Able Pro Form Table & Selectpicker Dropdown Fix
   Nota: el wrapper .s_table.table-responsive NO debe ir aquí; quitarle el scroll
   hace que las tablas con min-width (facturas, cotizaciones, gastos) se salgan
   de la tarjeta. El scroll horizontal lo restaura la regla
   ".table-responsive.s_table" y los desplegables usan data-container="body". */
.table-main-invoice-edit,
.expense-items-styled {
  overflow: visible !important;
}

.bs-container.dropdown {
  z-index: 1060 !important;
}

/* Able Pro Full-Screen Preloader */
#able-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0B0E14;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  user-select: none;
}

html:not(.dark-mode) #able-page-loader,
html[data-theme="light"] #able-page-loader {
  background-color: #F8F9FA;
}

#able-page-loader.is-done {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.able-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateY(-8px);
}

.able-loader-logo-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.able-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(1, 195, 141, 0.15);
  border-top-color: #01C38D;
  animation: able-loader-spin 0.9s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
  box-shadow: 0 0 24px rgba(1, 195, 141, 0.25);
}

.able-loader-ring-inner {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 2px dashed rgba(1, 195, 141, 0.35);
  animation: able-loader-spin-reverse 2.4s linear infinite;
}

.able-loader-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: able-loader-pulse 1.8s ease-in-out infinite;
}

.able-loader-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.able-loader-brand .brand-text {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}

html:not(.dark-mode) .able-loader-brand .brand-text,
html[data-theme="light"] .able-loader-brand .brand-text {
  color: #1D2630;
}

.able-loader-brand .brand-badge {
  background: linear-gradient(135deg, #01C38D 0%, #00AA7B 100%);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.able-loader-progress-track {
  width: 140px;
  height: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

html:not(.dark-mode) .able-loader-progress-track,
html[data-theme="light"] .able-loader-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.able-loader-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #01C38D, #00E5A3, #01C38D);
  border-radius: 4px;
  animation: able-loader-slide 1.4s ease-in-out infinite;
}

@keyframes able-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes able-loader-spin-reverse {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes able-loader-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes able-loader-slide {
  0% {
    left: -40%;
  }

  50% {
    left: 40%;
    width: 50%;
  }

  100% {
    left: 100%;
    width: 30%;
  }
}

/* ==========================================================================
   ABLE PRO PROJECT TABS & OVERVIEW
   ========================================================================== */

.able-project-nav-container {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 12px !important;
  padding: 6px 8px !important;
  box-shadow: var(--able-card-shadow) !important;
}

.able-project-nav-link {
  color: var(--able-text-muted) !important;
}

.able-project-nav-link:hover {
  color: var(--able-primary) !important;
  background: var(--able-bg) !important;
}

.able-project-nav-item.active .able-project-nav-link {
  color: var(--able-primary) !important;
  background: var(--able-primary-light) !important;
}

.able-project-nav-item.active .able-project-nav-link i {
  color: var(--able-primary) !important;
}

/* Dark mode dashboard & project cards */
html.dark-mode .dashboard-card,
body.dark-mode .dashboard-card,
[data-theme="dark"] .dashboard-card {
  background: var(--able-surface) !important;
  border-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

html.dark-mode .dashboard-card .tw-bg-slate-50,
body.dark-mode .dashboard-card .tw-bg-slate-50,
[data-theme="dark"] .dashboard-card .tw-bg-slate-50 {
  background: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

html.dark-mode .dashboard-card .tw-text-slate-800,
html.dark-mode .dashboard-card .tw-text-slate-900,
body.dark-mode .dashboard-card .tw-text-slate-800,
body.dark-mode .dashboard-card .tw-text-slate-900,
[data-theme="dark"] .dashboard-card .tw-text-slate-800,
[data-theme="dark"] .dashboard-card .tw-text-slate-900 {
  color: var(--able-text-dark) !important;
}

html.dark-mode .dashboard-card .tw-text-slate-400,
html.dark-mode .dashboard-card .tw-text-slate-500,
html.dark-mode .dashboard-card .tw-text-slate-600,
body.dark-mode .dashboard-card .tw-text-slate-400,
body.dark-mode .dashboard-card .tw-text-slate-500,
body.dark-mode .dashboard-card .tw-text-slate-600,
[data-theme="dark"] .dashboard-card .tw-text-slate-400,
[data-theme="dark"] .dashboard-card .tw-text-slate-500,
[data-theme="dark"] .dashboard-card .tw-text-slate-600 {
  color: var(--able-text-muted) !important;
}

html.dark-mode .dashboard-card .tw-border-slate-100,
html.dark-mode .dashboard-card .tw-border-slate-50,
body.dark-mode .dashboard-card .tw-border-slate-100,
body.dark-mode .dashboard-card .tw-border-slate-50,
[data-theme="dark"] .dashboard-card .tw-border-slate-100,
[data-theme="dark"] .dashboard-card .tw-border-slate-50 {
  border-color: var(--able-border) !important;
}

html.dark-mode .dashboard-card .tw-bg-slate-100,
body.dark-mode .dashboard-card .tw-bg-slate-100,
[data-theme="dark"] .dashboard-card .tw-bg-slate-100 {
  background: var(--able-border) !important;
}

/* ==========================================================================
   ABLE PRO TASKS TABLE & DATATABLES
   ========================================================================== */

/* Able Pro Tasks Card Wrapper */
.able-tasks-card {
  background: var(--able-surface, #ffffff) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 12px !important;
  box-shadow: var(--able-card-shadow, 0 4px 18px -2px rgba(0, 0, 0, 0.03)) !important;
}

/* ==========================================================================
   ABLE PRO UNIVERSAL DATATABLES SYSTEM (LIGHT MODE)
   ========================================================================== */

/* DataTables Wrapper Controls (Length, Buttons, Filter) */
.dataTables_wrapper .dataTables_length,
.tasks-table .dataTables_length {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  vertical-align: middle !important;
}

.dataTables_wrapper .dataTables_length label,
.tasks-table .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  margin-bottom: 0 !important;
}

/* Arrow 1 Fix: Length selector 38px, rounded 8px, custom SVG chevron arrow */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select[name$="_length"],
.table-rel-tasks_length select,
.table-tasks_length select,
.tasks-table .dataTables_length select {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 13px 13px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper select[name$="_length"]:hover,
.dataTables_wrapper select[name$="_length"]:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px var(--able-primary-light, #E6F9F3) !important;
}

/* Arrow 2 Fix: Action Buttons (Exportar, Reload, Options) */
.dataTables_wrapper .dt-buttons,
.tasks-table .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px !important;
  margin-bottom: 12px !important;
  vertical-align: middle !important;
  gap: 6px !important;
}

.dataTables_wrapper .dt-buttons.btn-group>.btn,
.tasks-table .dt-buttons.btn-group>.btn {
  float: none !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .buttons-collection,
.dataTables_wrapper .dt-buttons .btn-default-dt-options,
.dataTables_wrapper .dt-buttons .btn-dt-reload,
.tasks-table .dt-buttons .btn,
.tasks-table .dt-buttons .buttons-collection,
.table-rel-tasks_wrapper .dt-buttons .btn {
  height: 38px !important;
  line-height: 24px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .buttons-collection:hover,
.dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
.dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
.tasks-table .dt-buttons .btn:hover,
.table-rel-tasks_wrapper .dt-buttons .btn:hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(1, 195, 141, 0.12) !important;
}

.dataTables_wrapper .dt-buttons .btn:active,
.dataTables_wrapper .dt-buttons .buttons-collection:active,
.dataTables_wrapper .dt-buttons .btn-dt-reload:active {
  transform: translateY(0) !important;
}

/* Reload Icon styling with smooth rotate on hover */
.dataTables_wrapper .dt-buttons .btn-dt-reload {
  width: 38px !important;
  padding: 0 !important;
}

.dataTables_wrapper .dt-buttons .btn-dt-reload i,
.dataTables_wrapper .dt-buttons .btn-dt-reload .fa {
  font-size: 13px !important;
  transition: transform 0.3s ease !important;
}

.dataTables_wrapper .dt-buttons .btn-dt-reload:hover i,
.dataTables_wrapper .dt-buttons .btn-dt-reload:hover .fa {
  transform: rotate(90deg) !important;
}

/* Export Dropdown Menu & Backdrop Fix */
div.dt-button-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99990 !important;
  background: transparent !important;
}

.dt-button-collection,
div.dt-button-collection {
  position: absolute !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
  margin-top: 6px !important;
  min-width: 170px !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

div.dt-button-collection ul.dropdown-menu {
  position: relative !important;
  display: block !important;
  z-index: 100000 !important;
  min-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dt-button-collection .dt-button,
.dt-button-collection button.dt-button,
.dt-button-collection a.dt-button,
div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button,
div.dt-button-collection .dropdown-menu>li>a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100001 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.dt-button-collection .dt-button span,
div.dt-button-collection a.dt-button span,
div.dt-button-collection button.dt-button span,
div.dt-button-collection .dropdown-menu>li>a span {
  pointer-events: none !important;
}

.dt-button-collection .dt-button:hover,
.dt-button-collection button.dt-button:hover,
.dt-button-collection a.dt-button:hover,
div.dt-button-collection a.dt-button:hover,
div.dt-button-collection button.dt-button:hover,
div.dt-button-collection .dropdown-menu>li>a:hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Arrows 3 & 4 Fix: Unified Seamless Search Bar Container */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px !important;
  text-align: right !important;
}

.dataTables_wrapper .dataTables_filter label {
  font-weight: normal !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
  display: inline-block !important;
}

.dataTables_wrapper .dataTables_filter .input-group {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 38px !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.dataTables_wrapper .dataTables_filter .input-group:focus-within,
.dataTables_wrapper .dataTables_filter .input-group:hover {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px var(--able-primary-light, #E6F9F3) !important;
}

.dataTables_wrapper .dataTables_filter .input-group .input-group-addon {
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 12px !important;
  color: var(--able-text-muted, #5B6B79) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: auto !important;
  min-width: 34px !important;
  height: 100% !important;
}

.dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
.dataTables_wrapper .dataTables_filter .input-group .input-group-addon i {
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
}

.dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
.dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i {
  color: var(--able-primary, #01C38D) !important;
}

.dataTables_wrapper .dataTables_filter .input-group input[type="search"],
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input.form-control,
.tasks-table .dataTables_filter input,
.table-rel-tasks_filter input,
.table-tasks_filter input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: 100% !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  border-radius: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder,
.dataTables_wrapper .dataTables_filter input.form-control::placeholder {
  color: var(--able-text-muted, #8B98A5) !important;
  opacity: 0.8 !important;
}

/* Arrow 4 Fix: Universal DataTables Header (High-contrast, 11.5px bold, crisp typography) */
table.dataTable,
.dataTables_wrapper table.table,
.table-rel-tasks,
.table-tasks,
.tasks-table table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  border: none !important;
}

table.dataTable thead th,
.dataTables_wrapper table.table thead th,
.table-rel-tasks thead th,
.table-tasks thead th,
.tasks-table table.table thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-dark, #1D2630) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  position: relative !important;
  user-select: none !important;
}

/* Sorting arrows styling */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer !important;
  padding-right: 26px !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 0.3 !important;
  font-size: 11px !important;
  bottom: 12px !important;
  right: 10px !important;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 1 !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Universal Table Rows & Cells */
table.dataTable tbody tr,
.dataTables_wrapper table.table tbody tr {
  background-color: var(--able-surface, #FFFFFF) !important;
  transition: background-color 0.15s ease !important;
}

table.dataTable tbody td,
.dataTables_wrapper table.table tbody td,
.table-rel-tasks tbody td,
.table-tasks tbody td,
.tasks-table table.table tbody td {
  padding: 13px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

table.dataTable tbody tr:hover td,
.dataTables_wrapper table.table tbody tr:hover td,
.table-rel-tasks tbody tr:hover td,
.table-tasks tbody tr:hover td,
.tasks-table table.table tbody tr:hover td {
  background-color: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Empty Table State: Spacious, centered, clean Able Pro card style */
table.dataTable tbody td.dataTables_empty,
.dataTables_wrapper table.table tbody td.dataTables_empty {
  padding: 44px 20px !important;
  text-align: center !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--able-surface, #FFFFFF) !important;
}

/* Table Checkboxes & Action Links */
table.dataTable input[type="checkbox"],
.dataTables_wrapper table.table input[type="checkbox"] {
  accent-color: var(--able-primary, #01C38D) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

table.dataTable tbody td a:not(.btn),
.dataTables_wrapper table.table tbody td a:not(.btn) {
  color: var(--able-text-dark, #1D2630);
  font-weight: 500;
  transition: color 0.15s ease;
}

table.dataTable tbody td a:not(.btn):hover,
.dataTables_wrapper table.table tbody td a:not(.btn):hover {
  color: var(--able-primary, #01C38D) !important;
  text-decoration: none !important;
}

/* Status Badges in Table */
.table-rel-tasks .task-status-table,
.table-tasks .task-status-table,
.tasks-table .label {
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Universal DataTables Pagination */
.dataTables_wrapper .dataTables_paginate,
.tasks-table .dataTables_paginate,
.table-rel-tasks_paginate,
.table-tasks_paginate {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
.dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
.tasks-table .dataTables_paginate .paginate_button:not(li),
.table-rel-tasks_paginate .paginate_button:not(li),
.table-tasks_paginate .paginate_button:not(li) {
  border-radius: 8px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
.dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
.tasks-table .dataTables_paginate .paginate_button:not(li):hover,
.table-rel-tasks_paginate .paginate_button:not(li):hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
.tasks-table .dataTables_paginate .paginate_button:not(li).current,
.table-rel-tasks_paginate .paginate_button:not(li).current {
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(li).disabled,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dataTables_wrapper .dataTables_info,
.tasks-table .dataTables_info,
.table-rel-tasks_info,
.table-tasks_info {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ==========================================================================
   ABLE PRO OFFICIAL KANBAN BOARD (MATCHING TEMPLATE)
   ========================================================================== */

#kan-ban-tab {
  padding-bottom: 30px !important;
  background: transparent !important;
  overflow-x: auto !important;
}

#kan-ban {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  width: max-content !important;
  min-width: 100% !important;
}

.able-pro-kanban-col,
.tasks-kanban.kan-ban-col {
  min-width: 275px !important;
  width: 285px !important;
  max-width: 285px !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: top !important;
  float: none !important;
  align-self: flex-start !important;
}

.tasks-kanban .kan-ban-col-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

.able-pro-column-box {
  background: #F4F6F8 !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  padding: 16px !important;
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
}

/* OVERRIDE PERFEX MAIN.JS FORCED HEIGHTS & SCROLLBARS */
.tasks-kanban .kan-ban-content-wrapper,
.tasks-kanban .kan-ban-content {
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

.tasks-kanban ul.tasks-status {
  min-height: 8px !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.able-pro-column-header {
  margin-bottom: 14px !important;
}

.able-pro-column-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1D2630 !important;
  margin: 0 !important;
}

.able-pro-task-item {
  list-style: none !important;
  margin-bottom: 12px !important;
  cursor: grab !important;
}

.able-pro-task-item.ui-sortable-helper {
  cursor: grabbing !important;
  transform: rotate(2deg) scale(1.02) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
}

.able-pro-card-box {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-pro-task-item:hover .able-pro-card-box {
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.able-pro-card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.able-pro-card-title a {
  color: #1D2630 !important;
}

.able-pro-card-title a:hover {
  color: var(--able-primary, #01C38D) !important;
}

.able-pro-story-link {
  color: var(--able-primary, #01C38D) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.able-pro-story-link:hover {
  text-decoration: underline !important;
}

.able-pro-card-more-btn {
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  color: #8C8C8C !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.able-pro-card-more-btn:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

.able-pro-add-task-btn {
  width: 100% !important;
  border: 1px dashed #BEC8D0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5B6B79 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-align: center !important;
}

.able-pro-add-task-btn:hover {
  background: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark mode for Able Pro Kanban */
html.dark-mode .able-pro-column-box,
body.dark-mode .able-pro-column-box,
[data-theme="dark"] .able-pro-column-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-pro-column-title,
body.dark-mode .able-pro-column-title,
[data-theme="dark"] .able-pro-column-title {
  color: #E8EBEE !important;
}

html.dark-mode .able-pro-card-box,
body.dark-mode .able-pro-card-box,
[data-theme="dark"] .able-pro-card-box {
  background: #242E3B !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-pro-card-title a,
body.dark-mode .able-pro-card-title a,
[data-theme="dark"] .able-pro-card-title a {
  color: #E8EBEE !important;
}

html.dark-mode .able-pro-add-task-btn,
body.dark-mode .able-pro-add-task-btn,
[data-theme="dark"] .able-pro-add-task-btn {
  border-color: #3F4D5A !important;
  color: #8C8C8C !important;
}

html.dark-mode .able-pro-add-task-btn:hover,
body.dark-mode .able-pro-add-task-btn:hover,
[data-theme="dark"] .able-pro-add-task-btn:hover {
  background: #242E3B !important;
  border-color: var(--able-primary) !important;
  color: var(--able-primary) !important;
}

/* ==========================================================================
   ABLE PRO TASK DETAIL MODAL (2-COLUMN DIALOG WITH TABS)
   ========================================================================== */

#task-modal.modal {
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}

#task-modal .modal-dialog {
  position: relative !important;
  width: 1160px !important;
  max-width: 96vw !important;
  margin: 25px auto !important;
  border-radius: 16px !important;
  z-index: 1050 !important;
  animation: ableModalFadeIn 0.2s ease !important;
}

@keyframes ableModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#task-modal .modal-content {
  border-radius: 16px !important;
  border: 1px solid #E8EBEE !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.18) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Modal Header */
#task-modal .task-single-header {
  background: #ffffff !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  gap: 16px !important;
}

#task-modal .task-single-header-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#task-modal .task-single-header .modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  letter-spacing: -0.2px !important;
}

#task-modal .task-single-header .modal-title .label,
#task-modal .task-single-header .modal-title .task-status-table {
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
}

#task-modal .task-single-header .close,
#task-modal .task-single-header .able-modal-close {
  position: static !important;
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#task-modal .task-single-header .close:hover,
#task-modal .task-single-header .able-modal-close:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: rotate(90deg) scale(1.05) !important;
}

#task-modal .task-single-header p {
  display: none !important;
}

/* Modal Body: 2-Column Split */
#task-modal .modal-body {
  padding: 0 !important;
  background: #ffffff !important;
}

#task-modal .modal-body .row {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
}

/* Left Column */
#task-modal .task-single-col-left {
  width: 68% !important;
  float: left !important;
  padding: 24px 28px !important;
  background: #ffffff !important;
  min-height: 560px !important;
  border-right: 1px solid #E8EBEE !important;
}

/* Right Column (Properties Card) */
#task-modal .task-single-col-right {
  width: 32% !important;
  float: left !important;
  background: #F8F9FA !important;
  padding: 24px 20px !important;
  min-height: 560px !important;
  position: relative !important;
}

/* Meta Creator/Relation Box */
#task-modal .task-info-created,
#task-modal .task-single-related-wrapper {
  font-size: 12.5px !important;
  color: #5B6B79 !important;
  margin-bottom: 4px !important;
  line-height: 1.5 !important;
}

#task-modal .task-single-related-wrapper a {
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

/* Action Buttons Bar */
#task-modal .task-single-col-left .btn {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
}

#task-modal .task-single-col-left .btn-primary {
  background: linear-gradient(135deg, #01C38D 0%, #009E72 100%) !important;
  background-color: #01C38D !important;
  border: 1px solid #01C38D !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(1, 195, 141, 0.25) !important;
  border-radius: 8px !important;
}

html.dark-mode #task-modal .task-single-col-left .btn-primary,
[data-theme="dark"] #task-modal .task-single-col-left .btn-primary {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
  border-radius: 12px !important;
}

#task-modal .task-single-col-left .btn-default {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  color: #5B6B79 !important;
}

#task-modal .task-single-col-left .btn-default:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

/* Description Card */
#task-modal .task-single-col-left h4.th,
#task-modal .task-single-col-left h4.bold,
#task-modal .task-single-col-left h4.task-info-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

#task-modal #task_view_description {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #5B6B79 !important;
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

/* Able Pro Nav Tabs inside Task Modal */
#task-modal .able-task-tabs-container {
  margin-top: 20px !important;
}

#task-modal .able-nav-tabs {
  display: flex !important;
  gap: 6px !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding-bottom: 0 !important;
}

#task-modal .able-nav-tabs li {
  margin-bottom: -1px !important;
}

#task-modal .able-nav-tabs li a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: #5B6B79 !important;
  padding: 8px 14px !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

#task-modal .able-nav-tabs li a:hover {
  background: #F8F9FA !important;
  color: #1D2630 !important;
}

#task-modal .able-nav-tabs li.active a {
  background: transparent !important;
  color: var(--able-primary, #01C38D) !important;
  border-bottom: 2px solid var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
}

#task-modal .able-tab-content {
  padding-top: 14px !important;
}

#task-modal .tasks-subtasks-wrapper,
#task-modal .checklist-templates-wrapper {
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}

#task-modal .checklist-item {
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  transition: background 0.15s ease !important;
}

#task-modal .checklist-item:hover {
  background: #F8F9FA !important;
}

#task-modal #task-comments .task-comment {
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

#task-modal #task-attachment,
#task-modal .dropzone {
  border: 2px dashed #BEC8D0 !important;
  border-radius: 12px !important;
  background: #F8F9FA !important;
  padding: 18px !important;
  text-align: center !important;
  color: #5B6B79 !important;
  font-size: 12px !important;
  margin-top: 10px !important;
}

#task-modal #task-attachment:hover,
#task-modal .dropzone:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.04) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* ==========================================================================
   ABLE PRO TASK RIGHT COLUMN (SURFACE CARDS & PROPERTY PANELS)
   ========================================================================== */

#task-modal .task-single-col-right {
  width: 34% !important;
  flex: 0 0 34% !important;
  background: #F8F9FA !important;
  border-left: 1px solid #E8EBEE !important;
  padding: 20px 16px !important;
  min-height: 560px !important;
  position: relative !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Assigned From Alert */
#task-modal .able-assigned-from-alert {
  border-radius: 10px !important;
  font-size: 12.5px !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1E40AF !important;
}

/* Able Pro Surface Cards */
#task-modal .task-single-col-right .able-card {
  background: #FFFFFF !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(19, 25, 32, 0.04) !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#task-modal .task-single-col-right .able-card:hover,
#task-modal .task-single-col-right .able-card:focus-within,
#task-modal .task-single-col-right .able-card:has(.open) {
  border-color: #DDE2E7 !important;
  box-shadow: 0 4px 14px rgba(19, 25, 32, 0.07) !important;
  z-index: 20 !important;
}

/* Able Pro Card Header */
#task-modal .task-single-col-right .able-card-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

#task-modal .task-single-col-right .able-card-header h4.task-info-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1D2630 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: -0.1px !important;
}

/* Tonal Icon Badges */
#task-modal .task-single-col-right .able-card-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

#task-modal .task-single-col-right .able-badge-primary {
  background: rgba(1, 195, 141, 0.12) !important;
  color: #01C38D !important;
}

#task-modal .task-single-col-right .able-badge-blue {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #3B82F6 !important;
}

#task-modal .task-single-col-right .able-badge-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #F59E0B !important;
}

#task-modal .task-single-col-right .able-badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .able-badge-purple {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8B5CF6 !important;
}

#task-modal .task-single-col-right .able-badge-cyan {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284C7 !important;
}

/* Able Pro Action Button (••• & +) */
#task-modal .task-single-col-right .able-btn-icon,
#task-modal .task-single-col-right .task-menu-options .trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  background: #F8F9FA !important;
  border: 1px solid #E8EBEE !important;
  color: #64748B !important;
  font-size: 13px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

#task-modal .task-single-col-right .able-btn-icon:hover,
#task-modal .task-single-col-right .task-menu-options .trigger:hover {
  background: var(--able-primary-light, #E9F0FF) !important;
  color: var(--able-primary, #01C38D) !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.15) !important;
}

#task-modal .task-single-col-right .able-btn-icon-sm {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}

/* Card Body */
#task-modal .task-single-col-right .able-card-body {
  padding: 12px 14px !important;
}

#task-modal .task-single-col-right .able-card-body.tw-p-0 {
  padding: 0 !important;
}

/* Task Info Property Items List */
#task-modal .task-single-col-right .task-info-list {
  padding: 2px 0 !important;
}

#task-modal .task-single-col-right .task-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin: 0 !important;
  transition: background 0.15s ease !important;
  background: transparent !important;
}

#task-modal .task-single-col-right .task-info:last-of-type {
  border-bottom: none !important;
}

#task-modal .task-single-col-right .task-info:hover {
  background: #F8F9FA !important;
}

#task-modal .task-single-col-right .task-info h5 {
  font-size: 12.5px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
  line-height: 1.4 !important;
}

#task-modal .task-single-col-right .task-info h5 > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#task-modal .task-single-col-right .task-info h5>i,
#task-modal .task-single-col-right .task-info .task-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  margin: 0 6px 0 0 !important;
  text-align: center !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  float: none !important;
}

/* Tonal Icons per property */
#task-modal .task-single-col-right .task-info-status .task-info-icon {
  background: rgba(1, 195, 141, 0.12) !important;
  color: #01C38D !important;
}

#task-modal .task-single-col-right .task-info-finished .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-info-start-date .task-info-icon {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #3B82F6 !important;
}

#task-modal .task-single-col-right .task-info-due-date .task-info-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #F59E0B !important;
}

#task-modal .task-single-col-right .task-info-priority .task-info-icon {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}

#task-modal .task-single-col-right .task-info-hourly-rate .task-info-icon {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8B5CF6 !important;
}

#task-modal .task-single-col-right .task-info-billable .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-billable-amount .task-info-icon {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

#task-modal .task-single-col-right .task-info-user-logged-time .task-info-icon {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #0891B2 !important;
}

#task-modal .task-single-col-right .task-info-total-logged-time .task-info-icon {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284C7 !important;
}

#task-modal .task-single-col-right .task-info h5 span,
#task-modal .task-single-col-right .task-info h5 a {
  font-weight: 600 !important;
  color: #1D2630 !important;
  font-size: 12.5px !important;
}

/* Datepicker & Inline Editable Inputs */
#task-modal .task-single-col-right .task-info-inline-input-edit {
  border: 1px solid #E2E8F0 !important;
  background: #F8F9FA !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1D2630 !important;
  text-align: right !important;
  max-width: 150px !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .task-info-inline-input-edit:focus,
#task-modal .task-single-col-right .task-info-inline-input-edit:hover {
  background: #FFFFFF !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px rgba(1, 195, 141, 0.15) !important;
  outline: none !important;
}

/* Priority & Status Pills */
#task-modal .task-single-col-right .able-priority-badge {
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Tags Container */
#task-modal .task-single-col-right .able-task-tags-container {
  padding: 10px 14px !important;
  border-top: 1px solid #F1F5F9 !important;
  background: #FAFBFD !important;
}

#task-modal .task-single-col-right .tagsinput {
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  min-height: 34px !important;
}

#task-modal .task-single-col-right .tagsinput .tag {
  background: var(--able-primary-light, #E9F0FF) !important;
  color: var(--able-primary, #01C38D) !important;
  border: 1px solid rgba(1, 195, 141, 0.2) !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

#task-modal .task-single-col-right .tagsinput .tag a {
  color: var(--able-primary, #01C38D) !important;
  opacity: 0.7 !important;
  margin-left: 4px !important;
}

#task-modal .task-single-col-right .tagsinput .tag a:hover {
  opacity: 1 !important;
}

/* Able Pro Avatar Stack for Assignees & Followers */
#task-modal .task-single-col-right .able-avatar-stack {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  transition: transform 0.15s ease !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user:hover {
  transform: translateY(-2px) scale(1.05) !important;
  z-index: 10 !important;
}

#task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  object-fit: cover !important;
}

#task-modal .task-single-col-right .able-avatar-stack .remove-task-user {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  text-decoration: none !important;
}

#task-modal .task-single-col-right .able-avatar-stack .task-user:hover .remove-task-user {
  display: flex !important;
}

/* Dependencies Items */
#task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
#task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div {
  border-radius: 8px !important;
  border: 1px solid #E8EBEE !important;
  background: #FAFBFD !important;
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div:hover,
#task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div:hover {
  border-color: #CBD5E1 !important;
  background: #FFFFFF !important;
}

/* Dropzone in Sidebar */
#task-modal .task-single-col-right .dropzone {
  border: 2px dashed #CBD5E1 !important;
  border-radius: 10px !important;
  background: #FAFBFD !important;
  padding: 18px 12px !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  min-height: auto !important;
}

#task-modal .task-single-col-right .dropzone:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.03) !important;
}

#task-modal .task-single-col-right .gpicker {
  background: #FFFFFF !important;
  border: 1px solid #E8EBEE !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}

#task-modal .task-single-col-right .gpicker:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Hide raw hr separators when using Able Pro cards */
#task-modal .task-single-col-right .task-info-separator {
  display: none !important;
}

/* Dark mode Task Modal */
html.dark-mode #task-modal .modal-content,
body.dark-mode #task-modal .modal-content,
[data-theme="dark"] #task-modal .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .modal-body,
body.dark-mode #task-modal .modal-body,
[data-theme="dark"] #task-modal .modal-body {
  background: #1B232C !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .modal-header,
body.dark-mode #task-modal .modal-header,
[data-theme="dark"] #task-modal .modal-header {
  background: #1B232C !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode #task-modal .modal-footer,
body.dark-mode #task-modal .modal-footer,
[data-theme="dark"] #task-modal .modal-footer {
  background: #1B232C !important;
  border-top: 1px solid #2E3844 !important;
}

html.dark-mode #task-modal .task-single-header,
html.dark-mode #task-modal .task-single-col-left,
body.dark-mode #task-modal .task-single-header,
body.dark-mode #task-modal .task-single-col-left,
[data-theme="dark"] #task-modal .task-single-header,
[data-theme="dark"] #task-modal .task-single-col-left {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right,
body.dark-mode #task-modal .task-single-col-right,
[data-theme="dark"] #task-modal .task-single-col-right {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

/* Headings & Texts inside Task Modal */
html.dark-mode #task-modal .modal-title,
html.dark-mode #task-modal h4,
html.dark-mode #task-modal h5,
html.dark-mode #task-modal .task-info-heading,
html.dark-mode #task-modal .chk-heading,
html.dark-mode #task-modal .tw-text-neutral-800,
html.dark-mode #task-modal .tw-text-neutral-700,
html.dark-mode #task-modal .tw-text-neutral-600,
body.dark-mode #task-modal .modal-title,
body.dark-mode #task-modal h4,
body.dark-mode #task-modal h5,
body.dark-mode #task-modal .task-info-heading,
body.dark-mode #task-modal .chk-heading,
body.dark-mode #task-modal .tw-text-neutral-800,
body.dark-mode #task-modal .tw-text-neutral-700,
body.dark-mode #task-modal .tw-text-neutral-600,
[data-theme="dark"] #task-modal .modal-title,
[data-theme="dark"] #task-modal h4,
[data-theme="dark"] #task-modal h5,
[data-theme="dark"] #task-modal .task-info-heading,
[data-theme="dark"] #task-modal .chk-heading,
[data-theme="dark"] #task-modal .tw-text-neutral-800,
[data-theme="dark"] #task-modal .tw-text-neutral-700,
[data-theme="dark"] #task-modal .tw-text-neutral-600 {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-info-created,
html.dark-mode #task-modal .task-single-related-wrapper,
html.dark-mode #task-modal .task-info h5,
html.dark-mode #task-modal .text-muted,
body.dark-mode #task-modal .task-info-created,
body.dark-mode #task-modal .task-single-related-wrapper,
body.dark-mode #task-modal .task-info h5,
body.dark-mode #task-modal .text-muted,
[data-theme="dark"] #task-modal .task-info-created,
[data-theme="dark"] #task-modal .task-single-related-wrapper,
[data-theme="dark"] #task-modal .task-info h5,
[data-theme="dark"] #task-modal .text-muted {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-info h5 span,
html.dark-mode #task-modal .task-info h5 a,
html.dark-mode #task-modal .task-info h5 input,
html.dark-mode #task-modal .task-single-related-wrapper a,
body.dark-mode #task-modal .task-info h5 span,
body.dark-mode #task-modal .task-info h5 a,
body.dark-mode #task-modal .task-info h5 input,
body.dark-mode #task-modal .task-single-related-wrapper a,
[data-theme="dark"] #task-modal .task-info h5 span,
[data-theme="dark"] #task-modal .task-info h5 a,
[data-theme="dark"] #task-modal .task-info h5 input,
[data-theme="dark"] #task-modal .task-single-related-wrapper a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-info,
html.dark-mode #task-modal .able-nav-tabs,
html.dark-mode #task-modal hr,
body.dark-mode #task-modal .task-info,
body.dark-mode #task-modal .able-nav-tabs,
body.dark-mode #task-modal hr,
[data-theme="dark"] #task-modal .task-info,
[data-theme="dark"] #task-modal .able-nav-tabs,
[data-theme="dark"] #task-modal hr {
  border-color: #2E3844 !important;
}

/* Nav Tabs in Dark Mode */
html.dark-mode #task-modal .able-nav-tabs li a,
body.dark-mode #task-modal .able-nav-tabs li a,
[data-theme="dark"] #task-modal .able-nav-tabs li a {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .able-nav-tabs li a:hover,
body.dark-mode #task-modal .able-nav-tabs li a:hover,
[data-theme="dark"] #task-modal .able-nav-tabs li a:hover {
  background: #242E3B !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .able-nav-tabs li.active a,
body.dark-mode #task-modal .able-nav-tabs li.active a,
[data-theme="dark"] #task-modal .able-nav-tabs li.active a {
  color: var(--able-primary, #01C38D) !important;
  border-bottom-color: var(--able-primary, #01C38D) !important;
  background: transparent !important;
}

/* Subtasks, Description & Tabs Containers in Dark Mode */
html.dark-mode #task-modal .subtasks-section,
html.dark-mode #task-modal .tasks-subtasks-wrapper,
html.dark-mode #task-modal #task_view_description,
html.dark-mode #task-modal .checklist-templates-wrapper,
body.dark-mode #task-modal .subtasks-section,
body.dark-mode #task-modal .tasks-subtasks-wrapper,
body.dark-mode #task-modal #task_view_description,
body.dark-mode #task-modal .checklist-templates-wrapper,
[data-theme="dark"] #task-modal .subtasks-section,
[data-theme="dark"] #task-modal .tasks-subtasks-wrapper,
[data-theme="dark"] #task-modal #task_view_description,
[data-theme="dark"] #task-modal .checklist-templates-wrapper {
  background: #242E3B !important;
  border: 1px solid #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .subtasks-table,
html.dark-mode #task-modal .subtasks-table tbody td,
body.dark-mode #task-modal .subtasks-table,
body.dark-mode #task-modal .subtasks-table tbody td,
[data-theme="dark"] #task-modal .subtasks-table,
[data-theme="dark"] #task-modal .subtasks-table tbody td {
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .subtasks-table tbody td a,
body.dark-mode #task-modal .subtasks-table tbody td a,
[data-theme="dark"] #task-modal .subtasks-table tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .checklist-item:hover,
body.dark-mode #task-modal .checklist-item:hover,
[data-theme="dark"] #task-modal .checklist-item:hover {
  background: #2A3644 !important;
}

html.dark-mode #task-modal .task-info-inline-input-edit,
body.dark-mode #task-modal .task-info-inline-input-edit,
[data-theme="dark"] #task-modal .task-info-inline-input-edit {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

/* Comments in Dark Mode */
html.dark-mode #task-modal #task-comment-form,
body.dark-mode #task-modal #task-comment-form,
[data-theme="dark"] #task-modal #task-comment-form {
  background-color: transparent !important;
}

html.dark-mode #task-modal #task_comment,
html.dark-mode #task-modal .edit-task-comment textarea,
html.dark-mode #task-modal .inline-reply-box textarea,
body.dark-mode #task-modal #task_comment,
body.dark-mode #task-modal .edit-task-comment textarea,
body.dark-mode #task-modal .inline-reply-box textarea,
[data-theme="dark"] #task-modal #task_comment,
[data-theme="dark"] #task-modal .edit-task-comment textarea,
[data-theme="dark"] #task-modal .inline-reply-box textarea {
  background: #151C24 !important;
  border: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal #task-comments .task-comment,
body.dark-mode #task-modal #task-comments .task-comment,
[data-theme="dark"] #task-modal #task-comments .task-comment {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal #task-comments .task-comment-reply,
html.dark-mode #task-modal .inline-reply-box,
body.dark-mode #task-modal #task-comments .task-comment-reply,
body.dark-mode #task-modal .inline-reply-box,
[data-theme="dark"] #task-modal #task-comments .task-comment-reply,
[data-theme="dark"] #task-modal .inline-reply-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .comment-thread-container,
body.dark-mode #task-modal .comment-thread-container,
[data-theme="dark"] #task-modal .comment-thread-container {
  border-left-color: #2E3844 !important;
}

html.dark-mode #task-modal #task-comments .task-comment .comment-content,
body.dark-mode #task-modal #task-comments .task-comment .comment-content,
[data-theme="dark"] #task-modal #task-comments .task-comment .comment-content {
  color: #E2E8F0 !important;
}

html.dark-mode #task-modal #task-comments .task-comment a.bold,
body.dark-mode #task-modal #task-comments .task-comment a.bold,
[data-theme="dark"] #task-modal #task-comments .task-comment a.bold {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal #task-attachment,
html.dark-mode #task-modal .dropzone,
body.dark-mode #task-modal #task-attachment,
body.dark-mode #task-modal .dropzone,
[data-theme="dark"] #task-modal #task-attachment,
[data-theme="dark"] #task-modal .dropzone {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
}

/* Dependencies, Reminders and Lower Right Sidebar Sections in Dark Mode */
html.dark-mode #task-modal .task-dependencies-section,
html.dark-mode #task-modal .task-reminders-section,
body.dark-mode #task-modal .task-dependencies-section,
body.dark-mode #task-modal .task-reminders-section,
[data-theme="dark"] #task-modal .task-dependencies-section,
[data-theme="dark"] #task-modal .task-reminders-section {
  color: #CBD5E1 !important;
}

html.dark-mode #task-modal .task-single-col-right svg,
body.dark-mode #task-modal .task-single-col-right svg,
[data-theme="dark"] #task-modal .task-single-col-right svg {
  color: #94A3B8 !important;
}

/* Task Modal Right Sidebar Dark Mode Enhancements */
html.dark-mode #task-modal .task-single-col-right,
body.dark-mode #task-modal .task-single-col-right,
[data-theme="dark"] #task-modal .task-single-col-right {
  background: #141A23 !important;
  border-left: 1px solid #26303D !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card,
body.dark-mode #task-modal .task-single-col-right .able-card,
[data-theme="dark"] #task-modal .task-single-col-right .able-card {
  background: #1D2630 !important;
  border-color: #29313B !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card:hover,
body.dark-mode #task-modal .task-single-col-right .able-card:hover,
[data-theme="dark"] #task-modal .task-single-col-right .able-card:hover {
  border-color: #384352 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card-header,
body.dark-mode #task-modal .task-single-col-right .able-card-header,
[data-theme="dark"] #task-modal .task-single-col-right .able-card-header {
  background: #1D2630 !important;
  border-bottom-color: #283340 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-card-header h4.task-info-heading,
body.dark-mode #task-modal .task-single-col-right .able-card-header h4.task-info-heading,
[data-theme="dark"] #task-modal .task-single-col-right .able-card-header h4.task-info-heading {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .able-btn-icon,
html.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger,
body.dark-mode #task-modal .task-single-col-right .able-btn-icon,
body.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger,
[data-theme="dark"] #task-modal .task-single-col-right .able-btn-icon,
[data-theme="dark"] #task-modal .task-single-col-right .task-menu-options .trigger {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-btn-icon:hover,
html.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger:hover,
body.dark-mode #task-modal .task-single-col-right .able-btn-icon:hover,
body.dark-mode #task-modal .task-single-col-right .task-menu-options .trigger:hover,
[data-theme="dark"] #task-modal .task-single-col-right .able-btn-icon:hover,
[data-theme="dark"] #task-modal .task-single-col-right .task-menu-options .trigger:hover {
  background: #2D3949 !important;
  color: #F8FAFC !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.25) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info,
body.dark-mode #task-modal .task-single-col-right .task-info,
[data-theme="dark"] #task-modal .task-single-col-right .task-info {
  border-bottom-color: #242E3B !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info:hover,
body.dark-mode #task-modal .task-single-col-right .task-info:hover,
[data-theme="dark"] #task-modal .task-single-col-right .task-info:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info h5,
body.dark-mode #task-modal .task-single-col-right .task-info h5,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 {
  color: #94A3B8 !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info h5 span,
html.dark-mode #task-modal .task-single-col-right .task-info h5 a,
body.dark-mode #task-modal .task-single-col-right .task-info h5 span,
body.dark-mode #task-modal .task-single-col-right .task-info h5 a,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 span,
[data-theme="dark"] #task-modal .task-single-col-right .task-info h5 a {
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit,
body.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit,
[data-theme="dark"] #task-modal .task-single-col-right .task-info-inline-input-edit {
  background: #141A23 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit:focus,
body.dark-mode #task-modal .task-single-col-right .task-info-inline-input-edit:focus,
[data-theme="dark"] #task-modal .task-single-col-right .task-info-inline-input-edit:focus {
  background: #1D2630 !important;
  border-color: var(--able-primary, #01C38D) !important;
}

html.dark-mode #task-modal .task-single-col-right .able-task-tags-container,
body.dark-mode #task-modal .task-single-col-right .able-task-tags-container,
[data-theme="dark"] #task-modal .task-single-col-right .able-task-tags-container {
  background: #18202A !important;
  border-top-color: #283340 !important;
}

html.dark-mode #task-modal .task-single-col-right .tagsinput,
body.dark-mode #task-modal .task-single-col-right .tagsinput,
[data-theme="dark"] #task-modal .task-single-col-right .tagsinput {
  background: #141A23 !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small,
body.dark-mode #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small,
[data-theme="dark"] #task-modal .task-single-col-right .able-avatar-stack img.staff-profile-image-small {
  box-shadow: 0 0 0 2px #1D2630, 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
html.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div,
body.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
body.dark-mode #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div,
[data-theme="dark"] #task-modal .task-single-col-right .task-dependencies-section [id^="task-predecessors-"]>div,
[data-theme="dark"] #task-modal .task-single-col-right .task-dependencies-section [id^="task-successors-"]>div {
  background: #141A23 !important;
  border-color: #2E3844 !important;
}

html.dark-mode #task-modal .task-single-col-right .gpicker,
body.dark-mode #task-modal .task-single-col-right .gpicker,
[data-theme="dark"] #task-modal .task-single-col-right .gpicker {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   ABLE PRO WYSIWYG / RICH TEXT EDITOR (TINYMCE & QUILL)
   ========================================================================== */

/* TinyMCE Container */
.tox-tinymce {
  border: 1px solid #E8EBEE !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  background: #F8F9FA !important;
  border-bottom: 1px solid #E8EBEE !important;
  padding: 4px 6px !important;
}

.tox .tox-tbtn {
  border-radius: 6px !important;
  margin: 1px !important;
  height: 28px !important;
  width: 28px !important;
  color: #5B6B79 !important;
  transition: all 0.15s ease !important;
}

.tox .tox-tbtn:hover {
  background: #E8EBEE !important;
  color: #1D2630 !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--active {
  background: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

.tox .tox-statusbar {
  border-top: 1px solid #E8EBEE !important;
  background: #F8F9FA !important;
}

/* Quill Editor Container */
.ql-toolbar.ql-snow {
  border: 1px solid #E8EBEE !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  background: #F8F9FA !important;
  padding: 6px 10px !important;
}

.ql-container.ql-snow {
  border: 1px solid #E8EBEE !important;
  border-top: none !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #1D2630 !important;
}

.ql-snow .ql-stroke {
  stroke: #5B6B79 !important;
}

.ql-snow .ql-fill {
  fill: #5B6B79 !important;
}

.ql-snow .ql-picker {
  color: #5B6B79 !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
  background: rgba(1, 195, 141, 0.12) !important;
  border-radius: 6px !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--able-primary, #01C38D) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--able-primary, #01C38D) !important;
}

/* Dark mode for WYSIWYG */
html.dark-mode .tox-tinymce,
[data-theme="dark"] .tox-tinymce,
html.dark-mode .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-toolbar.ql-snow,
html.dark-mode .ql-container.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  color: #E8EBEE !important;
}

html.dark-mode .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar {
  background: #151C24 !important;
  border-color: #2E3844 !important;
}

html.dark-mode .ql-snow .ql-stroke,
[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: #A0AEC0 !important;
}

html.dark-mode .ql-snow .ql-fill,
[data-theme="dark"] .ql-snow .ql-fill {
  fill: #A0AEC0 !important;
}

/* ==========================================================================
   ABLE PRO MENTIONS & COMMENT REPLIES
   ========================================================================== */

/* Mention Pill Badges in Comments & Editors */
span.mention {
  background: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* TinyMCE Mention Autocomplete Dropdown */
.tox .tox-autocompleter {
  border-radius: 10px !important;
  border: 1px solid #E8EBEE !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  padding: 4px !important;
  background: #ffffff !important;
}

.tox .tox-collection__item {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1D2630 !important;
  transition: all 0.12s ease !important;
}

.tox .tox-collection__item:hover,
.tox .tox-collection__item--active {
  background: rgba(1, 195, 141, 0.12) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
}

/* Comment Reply Button */
.btn-reply-comment {
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  background: #ffffff !important;
  border: 1px solid #E8EBEE !important;
  color: var(--able-primary, #01C38D) !important;
  transition: all 0.15s ease !important;
}

.btn-reply-comment:hover {
  background: rgba(1, 195, 141, 0.1) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark mode for Mentions */
html.dark-mode span.mention,
[data-theme="dark"] span.mention {
  background: rgba(1, 195, 141, 0.25) !important;
  color: #05e2a5 !important;
}

html.dark-mode .tox .tox-autocompleter,
[data-theme="dark"] .tox .tox-autocompleter {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .tox .tox-collection__item,
[data-theme="dark"] .tox .tox-collection__item {
  color: #E8EBEE !important;
}

html.dark-mode .btn-reply-comment,
[data-theme="dark"] .btn-reply-comment {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  color: #05e2a5 !important;
}

/* ==========================================================================
   ABLE PRO TASKS & PROJECT TASKS - DARK MODE HIGH CONTRAST REFINEMENTS
   ========================================================================== */

/* Task Summary Cards (Top Status Grid) */
html.dark-mode .able-task-summary-card,
body.dark-mode .able-task-summary-card,
[data-theme="dark"] .able-task-summary-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-task-summary-card:hover,
body.dark-mode .able-task-summary-card:hover,
[data-theme="dark"] .able-task-summary-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
  transform: translateY(-2px);
}

html.dark-mode .able-task-summary-card .tw-text-xs,
body.dark-mode .able-task-summary-card .tw-text-xs,
[data-theme="dark"] .able-task-summary-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-task-summary-card .tw-text-2xl,
body.dark-mode .able-task-summary-card .tw-text-2xl,
[data-theme="dark"] .able-task-summary-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-task-summary-card .tw-border-t,
body.dark-mode .able-task-summary-card .tw-border-t,
[data-theme="dark"] .able-task-summary-card .tw-border-t {
  border-color: #2E3844 !important;
}

/* Tasks Card in Project / Admin Views */
html.dark-mode .able-tasks-card,
body.dark-mode .able-tasks-card,
[data-theme="dark"] .able-tasks-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Tasks Table Header */
html.dark-mode .table-rel-tasks thead th,
html.dark-mode .table-tasks thead th,
html.dark-mode .tasks-table table.table thead th,
html.dark-mode table.tasks thead th,
html.dark-mode table.dataTable thead th,
body.dark-mode .table-rel-tasks thead th,
body.dark-mode .table-tasks thead th,
body.dark-mode .tasks-table table.table thead th,
[data-theme="dark"] .table-rel-tasks thead th,
[data-theme="dark"] .table-tasks thead th,
[data-theme="dark"] .tasks-table table.table thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
  border-top: none !important;
}

/* Tasks Table Cells */
html.dark-mode .table-rel-tasks tbody td,
html.dark-mode .table-tasks tbody td,
html.dark-mode .tasks-table table.table tbody td,
html.dark-mode table.tasks tbody td,
html.dark-mode table.dataTable tbody td,
body.dark-mode .table-rel-tasks tbody td,
body.dark-mode .table-tasks tbody td,
body.dark-mode .tasks-table table.table tbody td,
[data-theme="dark"] .table-rel-tasks tbody td,
[data-theme="dark"] .table-tasks tbody td,
[data-theme="dark"] .tasks-table table.table tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
  background: transparent !important;
}

/* Tasks Table Row Hover */
html.dark-mode .table-rel-tasks tbody tr:hover td,
html.dark-mode .table-tasks tbody tr:hover td,
html.dark-mode .tasks-table table.table tbody tr:hover td,
html.dark-mode table.tasks tbody tr:hover td,
html.dark-mode table.dataTable tbody tr:hover td,
body.dark-mode .table-rel-tasks tbody tr:hover td,
body.dark-mode .table-tasks tbody tr:hover td,
[data-theme="dark"] .table-rel-tasks tbody tr:hover td,
[data-theme="dark"] .table-tasks tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

/* Task Name in Table (Crystal Clear White / Light Text) */
html.dark-mode .table-rel-tasks a.main-tasks-table-href-name,
html.dark-mode .table-tasks a.main-tasks-table-href-name,
html.dark-mode .tasks-table a.main-tasks-table-href-name,
html.dark-mode a.main-tasks-table-href-name,
body.dark-mode a.main-tasks-table-href-name,
[data-theme="dark"] a.main-tasks-table-href-name,
html.dark-mode .table-rel-tasks tbody td a.main-tasks-table-href-name,
html.dark-mode .table-tasks tbody td a.main-tasks-table-href-name,
html.dark-mode .tasks-table tbody td a.main-tasks-table-href-name {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

html.dark-mode a.main-tasks-table-href-name:hover,
body.dark-mode a.main-tasks-table-href-name:hover,
[data-theme="dark"] a.main-tasks-table-href-name:hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Task ID (#) Column */
html.dark-mode .table-rel-tasks tbody td:nth-child(2) a,
html.dark-mode .table-tasks tbody td:nth-child(2) a,
html.dark-mode .tasks-table table.table tbody td:nth-child(2) a,
body.dark-mode .table-tasks tbody td:nth-child(2) a,
[data-theme="dark"] .table-tasks tbody td:nth-child(2) a {
  color: #94A3B8 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html.dark-mode .table-rel-tasks tbody td:nth-child(2) a:hover,
html.dark-mode .table-tasks tbody td:nth-child(2) a:hover,
html.dark-mode .tasks-table table.table tbody td:nth-child(2) a:hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Row Action Options (under task name) */
html.dark-mode .row-options,
body.dark-mode .row-options,
[data-theme="dark"] .row-options {
  color: #64748B !important;
}

html.dark-mode .row-options a,
body.dark-mode .row-options a,
[data-theme="dark"] .row-options a {
  color: #94A3B8 !important;
  text-decoration: none !important;
}

html.dark-mode .row-options a:hover,
body.dark-mode .row-options a:hover,
[data-theme="dark"] .row-options a:hover {
  color: #F8FAFC !important;
}

html.dark-mode .row-options a.text-danger,
html.dark-mode .row-options a._delete,
html.dark-mode .row-options a.task-delete {
  color: #F87171 !important;
}

html.dark-mode .row-options a.tasks-table-start-timer,
html.dark-mode .row-options a.text-success {
  color: var(--able-primary, #01C38D) !important;
}

/* ==========================================================================
   ABLE PRO UNIVERSAL DATATABLES SYSTEM (DARK MODE)
   ========================================================================== */

/* Dark Mode DataTables Length Select (Arrow 1) */
html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper select[name$="_length"],
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper select[name$="_length"],
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper select[name$="_length"] {
  background-color: var(--able-surface, #141822) !important;
  color: #FFFFFF !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B98A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select:hover,
html.dark-mode .dataTables_wrapper .dataTables_length select:focus,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus,
body.dark-mode .dataTables_wrapper .dataTables_length select:hover,
body.dark-mode .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.15) !important;
}

/* Dark Mode Action Buttons (Arrow 2) */
html.dark-mode .dataTables_wrapper .dt-buttons .btn,
html.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .buttons-collection,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-default-dt-options,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-dt-reload,
body.dark-mode .dataTables_wrapper .dt-buttons .btn,
body.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload {
  background-color: var(--able-surface, #141822) !important;
  color: #FFFFFF !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .dataTables_wrapper .dt-buttons .btn:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
html.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .buttons-collection:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn-dt-reload:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .buttons-collection:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-default-dt-options:hover,
body.dark-mode .dataTables_wrapper .dt-buttons .btn-dt-reload:hover {
  background-color: rgba(1, 195, 141, 0.15) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Search Bar Container (Arrows 3 & 4) */
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group {
  background-color: var(--able-bg, #0B0E14) !important;
  border-color: var(--able-border, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 3px rgba(1, 195, 141, 0.15) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
html.dark-mode .dataTables_wrapper .dataTables_filter input[type="search"],
html.dark-mode .dataTables_wrapper .dataTables_filter input.form-control,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input[type="search"],
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input.form-control,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group input[type="search"],
body.dark-mode .dataTables_wrapper .dataTables_filter input[type="search"],
body.dark-mode .dataTables_wrapper .dataTables_filter input.form-control {
  color: #FFFFFF !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon .fa,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group .input-group-addon i {
  color: #8B98A5 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
html.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon .fa,
body.dark-mode .dataTables_wrapper .dataTables_filter .input-group:focus-within .input-group-addon i {
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Export Menu */
html.dark-mode .dt-button-collection,
html.dark-mode div.dt-button-collection,
[data-theme="dark"] .dt-button-collection,
[data-theme="dark"] div.dt-button-collection,
body.dark-mode .dt-button-collection,
body.dark-mode div.dt-button-collection {
  background-color: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

html.dark-mode .dt-button-collection .dt-button,
html.dark-mode .dt-button-collection button.dt-button,
html.dark-mode .dt-button-collection a.dt-button,
html.dark-mode div.dt-button-collection a.dt-button,
html.dark-mode div.dt-button-collection button.dt-button,
html.dark-mode div.dt-button-collection .dropdown-menu>li>a,
[data-theme="dark"] .dt-button-collection .dt-button,
[data-theme="dark"] .dt-button-collection button.dt-button,
[data-theme="dark"] .dt-button-collection a.dt-button,
[data-theme="dark"] div.dt-button-collection a.dt-button,
[data-theme="dark"] div.dt-button-collection button.dt-button,
[data-theme="dark"] div.dt-button-collection .dropdown-menu>li>a,
body.dark-mode .dt-button-collection .dt-button,
body.dark-mode .dt-button-collection button.dt-button,
body.dark-mode .dt-button-collection a.dt-button,
body.dark-mode div.dt-button-collection a.dt-button,
body.dark-mode div.dt-button-collection button.dt-button,
body.dark-mode div.dt-button-collection .dropdown-menu>li>a {
  color: #FFFFFF !important;
  z-index: 100001 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html.dark-mode .dt-button-collection .dt-button:hover,
html.dark-mode .dt-button-collection button.dt-button:hover,
html.dark-mode .dt-button-collection a.dt-button:hover,
html.dark-mode div.dt-button-collection a.dt-button:hover,
html.dark-mode div.dt-button-collection button.dt-button:hover,
html.dark-mode div.dt-button-collection .dropdown-menu>li>a:hover,
[data-theme="dark"] .dt-button-collection .dt-button:hover,
[data-theme="dark"] .dt-button-collection button.dt-button:hover,
[data-theme="dark"] .dt-button-collection a.dt-button:hover,
[data-theme="dark"] div.dt-button-collection a.dt-button:hover,
[data-theme="dark"] div.dt-button-collection button.dt-button:hover,
[data-theme="dark"] div.dt-button-collection .dropdown-menu>li>a:hover,
body.dark-mode .dt-button-collection .dt-button:hover,
body.dark-mode .dt-button-collection button.dt-button:hover,
body.dark-mode .dt-button-collection a.dt-button:hover,
body.dark-mode div.dt-button-collection a.dt-button:hover,
body.dark-mode div.dt-button-collection button.dt-button:hover,
body.dark-mode div.dt-button-collection .dropdown-menu>li>a:hover {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Headers */
html.dark-mode table.dataTable thead th,
html.dark-mode .dataTables_wrapper table.table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] .dataTables_wrapper table.table thead th,
body.dark-mode table.dataTable thead th,
body.dark-mode .dataTables_wrapper table.table thead th {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
}

/* Dark Mode Cells */
html.dark-mode table.dataTable tbody td,
html.dark-mode .dataTables_wrapper table.table tbody td,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] .dataTables_wrapper table.table tbody td,
body.dark-mode table.dataTable tbody td,
body.dark-mode .dataTables_wrapper table.table tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

/* Dark Mode Row Hover */
html.dark-mode table.dataTable tbody tr,
html.dark-mode .dataTables_wrapper table.table tbody tr,
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] .dataTables_wrapper table.table tbody tr,
body.dark-mode table.dataTable tbody tr,
body.dark-mode .dataTables_wrapper table.table tbody tr {
  background-color: #141822 !important;
}

html.dark-mode table.dataTable tbody tr:hover td,
html.dark-mode .dataTables_wrapper table.table tbody tr:hover td,
[data-theme="dark"] table.dataTable tbody tr:hover td,
[data-theme="dark"] .dataTables_wrapper table.table tbody tr:hover td,
body.dark-mode table.dataTable tbody tr:hover td,
body.dark-mode .dataTables_wrapper table.table tbody tr:hover td {
  background-color: rgba(1, 195, 141, 0.08) !important;
}

/* Dark Mode Empty State */
html.dark-mode table.dataTable tbody td.dataTables_empty,
html.dark-mode .dataTables_wrapper table.table tbody td.dataTables_empty,
[data-theme="dark"] table.dataTable tbody td.dataTables_empty,
[data-theme="dark"] .dataTables_wrapper table.table tbody td.dataTables_empty,
body.dark-mode table.dataTable tbody td.dataTables_empty,
body.dark-mode .dataTables_wrapper table.table tbody td.dataTables_empty {
  background-color: #141822 !important;
  color: #8B98A5 !important;
}

/* Dark Mode Table Links */
html.dark-mode table.dataTable tbody td a:not(.btn),
[data-theme="dark"] table.dataTable tbody td a:not(.btn),
body.dark-mode table.dataTable tbody td a:not(.btn) {
  color: #F8FAFC !important;
}

html.dark-mode table.dataTable tbody td a:not(.btn):hover,
[data-theme="dark"] table.dataTable tbody td a:not(.btn):hover,
body.dark-mode table.dataTable tbody td a:not(.btn):hover {
  color: var(--able-primary, #01C38D) !important;
}

/* Dark Mode Pagination */
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li),
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a {
  background: #141822 !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li):hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a:hover {
  background: rgba(1, 195, 141, 0.15) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(li).current,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a {
  background: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_info {
  color: #8B98A5 !important;
}

/* ==========================================================================
   ABLE PRO PROJECT TIMESHEETS & KPI CARDS
   ========================================================================== */

.able-timesheet-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-timesheets {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-top: 12px !important;
  border: none !important;
}

.table-timesheets thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table-timesheets tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-timesheets tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Timesheet Modal Able Pro */
#timesheet .modal-dialog {
  border-radius: 16px !important;
  margin-top: 50px !important;
}

/* Dark mode for Timesheets */
html.dark-mode .able-timesheet-kpi-card,
body.dark-mode .able-timesheet-kpi-card,
[data-theme="dark"] .able-timesheet-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-timesheet-kpi-card:hover,
body.dark-mode .able-timesheet-kpi-card:hover,
[data-theme="dark"] .able-timesheet-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-timesheet-kpi-card .tw-text-xs,
body.dark-mode .able-timesheet-kpi-card .tw-text-xs,
[data-theme="dark"] .able-timesheet-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-timesheet-kpi-card .tw-text-2xl,
body.dark-mode .able-timesheet-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-timesheet-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-timesheets-card,
body.dark-mode .able-timesheets-card,
[data-theme="dark"] .able-timesheets-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-timesheets thead th,
body.dark-mode .table-timesheets thead th,
[data-theme="dark"] .table-timesheets thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-timesheets tbody td,
body.dark-mode .table-timesheets tbody td,
[data-theme="dark"] .table-timesheets tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-timesheets tbody td a,
body.dark-mode .table-timesheets tbody td a,
[data-theme="dark"] .table-timesheets tbody td a {
  color: #F8FAFC !important;
  font-weight: 500 !important;
}

html.dark-mode .table-timesheets tbody td a:hover,
body.dark-mode .table-timesheets tbody td a:hover,
[data-theme="dark"] .table-timesheets tbody td a:hover {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .table-timesheets tbody tr:hover td,
body.dark-mode .table-timesheets tbody tr:hover td,
[data-theme="dark"] .table-timesheets tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #timesheet .modal-content,
body.dark-mode #timesheet .modal-content,
[data-theme="dark"] #timesheet .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #timesheet .modal-header,
html.dark-mode #timesheet .modal-footer,
body.dark-mode #timesheet .modal-header,
body.dark-mode #timesheet .modal-footer,
[data-theme="dark"] #timesheet .modal-header,
[data-theme="dark"] #timesheet .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #timesheet .modal-title,
body.dark-mode #timesheet .modal-title,
[data-theme="dark"] #timesheet .modal-title {
  color: #F8FAFC !important;
}

html.dark-mode #timesheet .timesheet-start-end-time,
html.dark-mode #timesheet .timesheet-duration,
body.dark-mode #timesheet .timesheet-start-end-time,
body.dark-mode #timesheet .timesheet-duration,
[data-theme="dark"] #timesheet .timesheet-start-end-time,
[data-theme="dark"] #timesheet .timesheet-duration {
  background: #151C24 !important;
  border-color: #2E3844 !important;
}

/* ==========================================================================
   ABLE PRO PROJECT MILESTONES & KANBAN
   ========================================================================== */

.able-milestone-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.kan-ban-content,
#kan-ban .kan-ban-content,
.kan-ban-content-wrapper,
#kan-ban .kan-ban-content-wrapper {
  background: transparent !important;
}

.able-kanban-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-milestones {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: none !important;
}

.table-milestones thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
}

.table-milestones tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-milestones tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

/* Dark Mode for Milestones & Kanban */
html.dark-mode .able-milestone-kpi-card,
body.dark-mode .able-milestone-kpi-card,
[data-theme="dark"] .able-milestone-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-milestone-kpi-card:hover,
body.dark-mode .able-milestone-kpi-card:hover,
[data-theme="dark"] .able-milestone-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-milestone-kpi-card .tw-text-xs,
body.dark-mode .able-milestone-kpi-card .tw-text-xs,
[data-theme="dark"] .able-milestone-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-milestone-kpi-card .tw-text-2xl,
body.dark-mode .able-milestone-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-milestone-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-kanban-column-card,
body.dark-mode .able-kanban-column-card,
[data-theme="dark"] .able-kanban-column-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kanban-column-header,
body.dark-mode .able-kanban-column-header,
[data-theme="dark"] .able-kanban-column-header {
  background: #151C24 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .able-kanban-task-card,
body.dark-mode .able-kanban-task-card,
[data-theme="dark"] .able-kanban-task-card {
  background: #242E3B !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-kanban-task-card:hover,
body.dark-mode .able-kanban-task-card:hover,
[data-theme="dark"] .able-kanban-task-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #2A3644 !important;
}

html.dark-mode .able-kanban-task-card .task_milestone,
body.dark-mode .able-kanban-task-card .task_milestone,
[data-theme="dark"] .able-kanban-task-card .task_milestone {
  color: #F8FAFC !important;
}

html.dark-mode .able-kanban-task-card .tw-border-t,
body.dark-mode .able-kanban-task-card .tw-border-t,
[data-theme="dark"] .able-kanban-task-card .tw-border-t {
  border-color: #2E3844 !important;
}

html.dark-mode .able-milestones-table-card,
body.dark-mode .able-milestones-table-card,
[data-theme="dark"] .able-milestones-table-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-milestones thead th,
body.dark-mode .table-milestones thead th,
[data-theme="dark"] .table-milestones thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-milestones tbody td,
body.dark-mode .table-milestones tbody td,
[data-theme="dark"] .table-milestones tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-milestones tbody td a,
body.dark-mode .table-milestones tbody td a,
[data-theme="dark"] .table-milestones tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode .table-milestones tbody tr:hover td,
body.dark-mode .table-milestones tbody tr:hover td,
[data-theme="dark"] .table-milestones tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #milestone .modal-content,
body.dark-mode #milestone .modal-content,
[data-theme="dark"] #milestone .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #milestone .modal-header,
html.dark-mode #milestone .modal-footer,
body.dark-mode #milestone .modal-header,
body.dark-mode #milestone .modal-footer,
[data-theme="dark"] #milestone .modal-header,
[data-theme="dark"] #milestone .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #milestone .modal-title,
body.dark-mode #milestone .modal-title,
[data-theme="dark"] #milestone .modal-title {
  color: #F8FAFC !important;
}

/* Kanban Wrapper & Popovers in Dark Mode */
html.dark-mode .kan-ban-content-wrapper,
body.dark-mode .kan-ban-content-wrapper,
[data-theme="dark"] .kan-ban-content-wrapper {
  background: #1B232C !important;
}

html.dark-mode .popover,
body.dark-mode .popover,
[data-theme="dark"] .popover {
  background-color: #1B232C !important;
  border: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .popover .popover-title,
body.dark-mode .popover .popover-title,
[data-theme="dark"] .popover .popover-title {
  background-color: #151C24 !important;
  border-bottom: 1px solid #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .popover .popover-content,
body.dark-mode .popover .popover-content,
[data-theme="dark"] .popover .popover-content {
  color: #CBD5E1 !important;
}

html.dark-mode .popover.bottom>.arrow:after {
  border-bottom-color: #1B232C !important;
}

html.dark-mode .popover.top>.arrow:after {
  border-top-color: #1B232C !important;
}

/* ==========================================================================
   ABLE PRO PROJECT FILES & DROPZONE
   ========================================================================== */

.able-dropzone-box {
  border: 2px dashed var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #ffffff) !important;
  min-height: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.able-dropzone-box:hover,
.able-dropzone-box.dz-drag-hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.02) !important;
}

.able-dropzone-box:hover .able-dropzone-icon,
.able-dropzone-box.dz-drag-hover .able-dropzone-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(1, 195, 141, 0.2);
}

.able-dropzone-icon {
  transition: all 0.2s ease-in-out;
}

.able-file-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.table-project-files {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: none !important;
}

.table-project-files thead th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
}

.table-project-files tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  color: var(--able-text-dark, #1D2630) !important;
  background: transparent !important;
}

.table-project-files tbody tr:hover td {
  background: var(--able-primary-light, rgba(1, 195, 141, 0.04)) !important;
}

.table-project-files .project-file-image {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  object-fit: cover !important;
  transition: transform 0.15s ease;
}

.table-project-files .project-file-image:hover {
  transform: scale(1.08);
}

/* Dark Mode for Project Files & Dropzone */
html.dark-mode .able-dropzone-box,
body.dark-mode .able-dropzone-box,
[data-theme="dark"] .able-dropzone-box {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-dropzone-box:hover,
html.dark-mode .able-dropzone-box.dz-drag-hover,
body.dark-mode .able-dropzone-box:hover,
[data-theme="dark"] .able-dropzone-box:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: rgba(1, 195, 141, 0.05) !important;
}

html.dark-mode .able-dropzone-box h4,
body.dark-mode .able-dropzone-box h4,
[data-theme="dark"] .able-dropzone-box h4 {
  color: #F8FAFC !important;
}

html.dark-mode .able-file-kpi-card,
body.dark-mode .able-file-kpi-card,
[data-theme="dark"] .able-file-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-file-kpi-card:hover,
body.dark-mode .able-file-kpi-card:hover,
[data-theme="dark"] .able-file-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-file-kpi-card .tw-text-xs,
body.dark-mode .able-file-kpi-card .tw-text-xs,
[data-theme="dark"] .able-file-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-file-kpi-card .tw-text-2xl,
body.dark-mode .able-file-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-file-kpi-card .tw-text-2xl {
  color: #F8FAFC !important;
}

html.dark-mode .able-files-table-card,
body.dark-mode .able-files-table-card,
[data-theme="dark"] .able-files-table-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-project-files thead th,
body.dark-mode .table-project-files thead th,
[data-theme="dark"] .table-project-files thead th {
  background: #151C24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid #2E3844 !important;
}

html.dark-mode .table-project-files tbody td,
body.dark-mode .table-project-files tbody td,
[data-theme="dark"] .table-project-files tbody td {
  color: #CBD5E1 !important;
  border-bottom: 1px solid #242E3B !important;
}

html.dark-mode .table-project-files tbody td a,
body.dark-mode .table-project-files tbody td a,
[data-theme="dark"] .table-project-files tbody td a {
  color: #F8FAFC !important;
}

html.dark-mode .table-project-files tbody td a:hover,
body.dark-mode .table-project-files tbody td a:hover,
[data-theme="dark"] .table-project-files tbody td a:hover {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .table-project-files tbody tr:hover td,
body.dark-mode .table-project-files tbody tr:hover td,
[data-theme="dark"] .table-project-files tbody tr:hover td {
  background: rgba(1, 195, 141, 0.08) !important;
}

html.dark-mode #project_files_bulk_actions .modal-content,
body.dark-mode #project_files_bulk_actions .modal-content,
[data-theme="dark"] #project_files_bulk_actions .modal-content {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #project_files_bulk_actions .modal-header,
html.dark-mode #project_files_bulk_actions .modal-footer,
body.dark-mode #project_files_bulk_actions .modal-header,
body.dark-mode #project_files_bulk_actions .modal-footer,
[data-theme="dark"] #project_files_bulk_actions .modal-header,
[data-theme="dark"] #project_files_bulk_actions .modal-footer {
  background: #1B232C !important;
  border-color: #2E3844 !important;
}

html.dark-mode #project_files_bulk_actions .modal-title,
body.dark-mode #project_files_bulk_actions .modal-title,
[data-theme="dark"] #project_files_bulk_actions .modal-title {
  color: #F8FAFC !important;
}

/* ==========================================================================
   ABLE PRO PROJECT FIELD LOGS (BITÁCORA DE CAMPO)
   ========================================================================== */

.able-fieldlog-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--able-primary, #01C38D) !important;
}

.able-fieldlog-entry-card:hover {
  border-color: rgba(1, 195, 141, 0.3) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Dark Mode for Field Logs */
html.dark-mode .able-fieldlog-kpi-card,
body.dark-mode .able-fieldlog-kpi-card,
[data-theme="dark"] .able-fieldlog-kpi-card {
  background: #1B232C !important;
  border: 1px solid #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-fieldlog-kpi-card:hover,
body.dark-mode .able-fieldlog-kpi-card:hover,
[data-theme="dark"] .able-fieldlog-kpi-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #242E3B !important;
}

html.dark-mode .able-fieldlog-kpi-card .tw-text-xs,
body.dark-mode .able-fieldlog-kpi-card .tw-text-xs,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-xs {
  color: #94A3B8 !important;
}

html.dark-mode .able-fieldlog-kpi-card .tw-text-2xl,
html.dark-mode .able-fieldlog-kpi-card .tw-text-lg,
body.dark-mode .able-fieldlog-kpi-card .tw-text-2xl,
body.dark-mode .able-fieldlog-kpi-card .tw-text-lg,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-2xl,
[data-theme="dark"] .able-fieldlog-kpi-card .tw-text-lg {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-form-card,
html.dark-mode .able-fieldlog-feed-card,
body.dark-mode .able-fieldlog-form-card,
body.dark-mode .able-fieldlog-feed-card,
[data-theme="dark"] .able-fieldlog-form-card,
[data-theme="dark"] .able-fieldlog-feed-card {
  background: #1B232C !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-fieldlog-form-card h4,
html.dark-mode .able-fieldlog-feed-card h4,
body.dark-mode .able-fieldlog-form-card h4,
body.dark-mode .able-fieldlog-feed-card h4,
[data-theme="dark"] .able-fieldlog-form-card h4,
[data-theme="dark"] .able-fieldlog-feed-card h4 {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-entry-card,
body.dark-mode .able-fieldlog-entry-card,
[data-theme="dark"] .able-fieldlog-entry-card {
  background: #242E3B !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-fieldlog-entry-card:hover,
body.dark-mode .able-fieldlog-entry-card:hover,
[data-theme="dark"] .able-fieldlog-entry-card:hover {
  border-color: var(--able-primary, #01C38D) !important;
  background: #2A3644 !important;
}

html.dark-mode .able-fieldlog-entry-card .tw-font-extrabold,
html.dark-mode .able-fieldlog-entry-card b,
html.dark-mode .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed,
body.dark-mode .able-fieldlog-entry-card .tw-font-extrabold,
body.dark-mode .able-fieldlog-entry-card b,
body.dark-mode .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed,
[data-theme="dark"] .able-fieldlog-entry-card .tw-font-extrabold,
[data-theme="dark"] .able-fieldlog-entry-card b,
[data-theme="dark"] .able-fieldlog-entry-card .tw-text-xs.tw-leading-relaxed {
  color: #F8FAFC !important;
}

html.dark-mode .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold,
body.dark-mode .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold,
[data-theme="dark"] .able-fieldlog-entry-card span.tw-text-xs.tw-font-semibold {
  background: #151C24 !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}
















/* Able Pro Custom Tabs for CodeIgniter Views */
.able-nav-tabs {
  border-bottom: 1px solid var(--able-border) !important;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 0px !important;
}

.horizontal-tabs {
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.horizontal-tabs::-webkit-scrollbar {
  display: none;
}

.horizontal-scrollable-tabs .scroller {
  width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  text-align: center;
  border-radius: 50%;
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-muted) !important;
  position: absolute;
  top: 5px;
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.horizontal-scrollable-tabs .scroller:hover {
  color: var(--able-primary) !important;
  border-color: var(--able-primary) !important;
}

.horizontal-scrollable-tabs .arrow-left {
  left: 0;
}

.horizontal-scrollable-tabs .arrow-right {
  right: 0;
}

/* Fix for TinyMCE dropdowns (Font Family / Font Size) squeezed in toolbar */
.tox .tox-tbtn--select {
  width: auto !important;
  padding: 0 8px !important;
}

.tox .tox-tbtn__select-label {
  width: auto !important;
  min-width: 50px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
}

/* Fix for tables inside comments (TinyMCE) */
.contract-comments table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.contract-comments table th,
.contract-comments table td {
  border: 1px solid var(--able-border);
  padding: 0.75rem;
  vertical-align: top;
}

.contract-comments table th {
  background-color: var(--able-bg);
  font-weight: 600;
}

.able-nav-tabs>li {
  margin-bottom: -1px;
}

/* ==========================================================================
   Dark Mode Overrides for Third-Party Components (TinyMCE, Dropzone, DataTables)
   ========================================================================== */

/* TinyMCE Dark Mode UI */
[data-theme="dark"] .tox-tinymce,
body.dark-mode .tox-tinymce {
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__overflow,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-menubar,
body.dark-mode .tox .tox-toolbar,
body.dark-mode .tox .tox-toolbar__primary,
body.dark-mode .tox .tox-menubar {
  background-color: var(--able-bg) !important;
  background: var(--able-bg) !important;
}

[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox .tox-mbtn,
body.dark-mode .tox .tox-tbtn,
body.dark-mode .tox .tox-mbtn {
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover,
[data-theme="dark"] .tox .tox-mbtn:hover,
body.dark-mode .tox .tox-tbtn:hover,
body.dark-mode .tox .tox-mbtn:hover {
  background-color: var(--able-border) !important;
}

[data-theme="dark"] .tox .tox-statusbar,
body.dark-mode .tox .tox-statusbar {
  background-color: var(--able-bg) !important;
  border-top: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-edit-area__iframe,
body.dark-mode .tox .tox-edit-area__iframe {
  background-color: var(--able-surface) !important;
}

/* Fix for TinyMCE iframe body (using CSS filter as a fallback if iframe body is hardcoded white) */
[data-theme="dark"] .tox .tox-edit-area,
body.dark-mode .tox .tox-edit-area {
  background-color: var(--able-surface) !important;
}

/* Dropzone Dark Mode */
[data-theme="dark"] .dropzone,
body.dark-mode .dropzone {
  background-color: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

[data-theme="dark"] .dropzone .dz-message,
body.dark-mode .dropzone .dz-message {
  color: var(--able-text-dark) !important;
}

/* General Buttons Dark Mode */

[data-theme="dark"] .btn-default,
body.dark-mode .btn-default {
  background-color: var(--able-bg) !important;
  color: var(--able-text-dark) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .btn-default:hover,
body.dark-mode .btn-default:hover {
  background-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

/* Global Dropdown Menu Dark Mode */
[data-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .dropdown-menu>li>a:not(.text-danger),
[data-theme="dark"] .dropdown-item:not(.text-danger),
body.dark-mode .dropdown-menu>li>a:not(.text-danger),
body.dark-mode .dropdown-item:not(.text-danger) {
  color: var(--able-text-dark);
}

[data-theme="dark"] .dropdown-menu>li>a:hover,
[data-theme="dark"] .dropdown-item:hover,
body.dark-mode .dropdown-menu>li>a:hover,
body.dark-mode .dropdown-item:hover {
  background-color: var(--able-bg) !important;
}

[data-theme="dark"] .dropdown-menu .divider,
[data-theme="dark"] .dropdown-menu .dropdown-divider,
body.dark-mode .dropdown-menu .divider,
body.dark-mode .dropdown-menu .dropdown-divider {
  background-color: var(--able-border) !important;
  border-top-color: var(--able-border) !important;
}

/* Fix TinyMCE inner text, icons, and menus */
[data-theme="dark"] .tox .tox-tbtn svg,
body.dark-mode .tox .tox-tbtn svg,
[data-theme="dark"] .tox .tox-tbtn__select-chevron svg,
body.dark-mode .tox .tox-tbtn__select-chevron svg {
  fill: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-tbtn--select,
[data-theme="dark"] .tox .tox-tbtn--bespoke,
body.dark-mode .tox .tox-tbtn--select,
body.dark-mode .tox .tox-tbtn--bespoke {
  background-color: var(--able-surface) !important;
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-tbtn__select-label,
body.dark-mode .tox .tox-tbtn__select-label {
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-menu,
body.dark-mode .tox .tox-menu {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
}

[data-theme="dark"] .tox .tox-collection__item,
body.dark-mode .tox .tox-collection__item {
  color: var(--able-text-dark) !important;
}

[data-theme="dark"] .tox .tox-collection__item:hover,
[data-theme="dark"] .tox .tox-collection__item--active,
body.dark-mode .tox .tox-collection__item:hover,
body.dark-mode .tox .tox-collection__item--active {
  background-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

/* Fix TinyMCE iframe white background by using CSS invert filter */
[data-theme="dark"] .tox .tox-edit-area__iframe,
body.dark-mode .tox .tox-edit-area__iframe {
  filter: invert(0.9) hue-rotate(180deg) brightness(1.1);
}

/* Utility classes for dynamic dark mode support */
.able-bg-muted {
  background-color: var(--able-bg) !important;
  border-color: var(--able-border) !important;
}

.able-border-color {
  border-color: var(--able-border) !important;
}

.able-nav-tabs>li>a {
  border: none !important;
  background: transparent !important;
  color: var(--able-text-muted) !important;
  font-weight: 500;
  font-size: 14.5px;
  padding: 12px 4px !important;
  margin-right: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.able-nav-tabs>li>a:hover {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary-light) !important;
}

.able-nav-tabs>li.active>a,
.able-nav-tabs>li.active>a:focus,
.able-nav-tabs>li.active>a:hover {
  color: var(--able-primary) !important;
  border-bottom: 2px solid var(--able-primary) !important;
  background: transparent !important;
}

.able-nav-tabs .badge {
  background-color: var(--able-primary-light);
  color: var(--able-primary);
  border-radius: 12px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 12px;
}

/* ==========================================================================
   DASHBOARD WIDGETS & WELCOME BANNER DARK MODE ENHANCEMENTS
   ========================================================================== */

/* Segmented Control in Dark Mode */
html.dark-mode .able-segmented-control,
[data-theme="dark"] .able-segmented-control,
body.dark-mode .able-segmented-control {
  background: #0B0E14 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-segment-btn,
[data-theme="dark"] .able-segment-btn,
body.dark-mode .able-segment-btn {
  color: #8B98A5 !important;
}

html.dark-mode .able-segment-btn:hover,
[data-theme="dark"] .able-segment-btn:hover,
body.dark-mode .able-segment-btn:hover {
  color: #FFFFFF !important;
}

html.dark-mode .able-segment-btn.active,
[data-theme="dark"] .able-segment-btn.active,
body.dark-mode .able-segment-btn.active {
  background: #1E2636 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Calendar Selected Cell in Dark Mode */
html.dark-mode .widget-day-cell.is-selected,
[data-theme="dark"] .widget-day-cell.is-selected,
body.dark-mode .widget-day-cell.is-selected {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.35) 0%, rgba(1, 195, 141, 0.15) 100%), #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.5) !important;
  color: #FFFFFF !important;
}

html.dark-mode .widget-day-cell:hover,
[data-theme="dark"] .widget-day-cell:hover,
body.dark-mode .widget-day-cell:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Welcome Banner in Dark Mode (Obsidian Emerald Hero) */
html.dark-mode .welcomeBanner,
[data-theme="dark"] .welcomeBanner,
body.dark-mode .welcomeBanner {
  background: radial-gradient(circle at 90% 40%, rgba(1, 195, 141, 0.16) 0%, rgba(1, 195, 141, 0.02) 45%, transparent 70%),
    linear-gradient(135deg, #161C28 0%, #10141D 100%) !important;
  border: 1px solid rgba(1, 195, 141, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(1, 195, 141, 0.1) !important;
}

html.dark-mode .welcomeBanner .welcome-user-name,
[data-theme="dark"] .welcomeBanner .welcome-user-name,
body.dark-mode .welcomeBanner .welcome-user-name {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FFFFFF 40%, #01C38D 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark-mode .welcomeBanner .banner-greeting-chip,
[data-theme="dark"] .welcomeBanner .banner-greeting-chip,
body.dark-mode .welcomeBanner .banner-greeting-chip {
  background: rgba(1, 195, 141, 0.12) !important;
  border-color: rgba(1, 195, 141, 0.3) !important;
  color: #01C38D !important;
}

html.dark-mode .welcomeBanner .greeting-dot,
[data-theme="dark"] .welcomeBanner .greeting-dot,
body.dark-mode .welcomeBanner .greeting-dot {
  background: #01C38D !important;
  box-shadow: 0 0 8px #01C38D !important;
}

html.dark-mode .welcomeBanner .able-banner-btn,
[data-theme="dark"] .welcomeBanner .able-banner-btn,
body.dark-mode .welcomeBanner .able-banner-btn {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.22) 0%, rgba(1, 195, 141, 0.06) 100%), #141822 !important;
  background-color: #141822 !important;
  border: 1px solid rgba(1, 195, 141, 0.38) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(1, 195, 141, 0.18) !important;
}

html.dark-mode .welcomeBanner .able-banner-btn i,
[data-theme="dark"] .welcomeBanner .able-banner-btn i,
body.dark-mode .welcomeBanner .able-banner-btn i {
  color: #01C38D !important;
}

html.dark-mode .welcomeBanner .able-banner-btn:hover,
[data-theme="dark"] .welcomeBanner .able-banner-btn:hover,
body.dark-mode .welcomeBanner .able-banner-btn:hover {
  background: linear-gradient(135deg, rgba(1, 195, 141, 0.34) 0%, rgba(1, 195, 141, 0.12) 100%), #141822 !important;
  border-color: rgba(1, 195, 141, 0.65) !important;
  box-shadow: 0 6px 22px rgba(1, 195, 141, 0.3) !important;
}

html.dark-mode .welcomeBanner .able-banner-btn-outline,
[data-theme="dark"] .welcomeBanner .able-banner-btn-outline,
body.dark-mode .welcomeBanner .able-banner-btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark-mode .welcomeBanner .able-banner-btn-outline i,
[data-theme="dark"] .welcomeBanner .able-banner-btn-outline i,
body.dark-mode .welcomeBanner .able-banner-btn-outline i {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-mode .welcomeBanner .rocket-img,
[data-theme="dark"] .welcomeBanner .rocket-img,
body.dark-mode .welcomeBanner .rocket-img {
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 25px rgba(1, 195, 141, 0.25)) !important;
}

/* Dashboard Cards in Dark Mode */
html.dark-mode .able-kpi-card,
[data-theme="dark"] .able-kpi-card,
body.dark-mode .able-kpi-card,
html.dark-mode .able-widget-card,
[data-theme="dark"] .able-widget-card,
body.dark-mode .able-widget-card,
html.dark-mode .able-project-card,
[data-theme="dark"] .able-project-card,
body.dark-mode .able-project-card,
html.dark-mode .able-chart-card,
[data-theme="dark"] .able-chart-card,
body.dark-mode .able-chart-card {
  background: #141822 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .able-project-item:hover,
[data-theme="dark"] .able-project-item:hover,
body.dark-mode .able-project-item:hover,
html.dark-mode .able-todo-item:hover,
[data-theme="dark"] .able-todo-item:hover,
body.dark-mode .able-todo-item:hover,
html.dark-mode .able-activity-item:hover,
[data-theme="dark"] .able-activity-item:hover,
body.dark-mode .able-activity-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .text-darkText,
[data-theme="dark"] .text-darkText,
body.dark-mode .text-darkText {
  color: #FFFFFF !important;
}

html.dark-mode .text-muted,
[data-theme="dark"] .text-muted,
body.dark-mode .text-muted {
  color: #8C99A5 !important;
}

/* Fix raw checkbox spacing in contract form (Vue forms) */
#contract-form input[type="checkbox"] {
  margin-right: 6px !important;
  vertical-align: middle !important;
  position: relative;
  top: -2px;
  /* slight visual alignment fix */
}

/* Add margin to labels that contain checkboxes */
#contract-form label:has(input[type="checkbox"]) {
  margin-right: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer;
}

/* Fallback if they are siblings (input + label) */
#contract-form input[type="checkbox"]+label {
  margin-right: 20px !important;
}

/* Fallback if checkboxes are direct children of a div and need spacing */
#contract-form input[type="checkbox"]+input[type="checkbox"] {
  margin-left: 16px !important;
}

/* ==========================================================================
   ABLE PRO INVOICE PREVIEW & TABS ENHANCEMENTS
   ========================================================================== */

/* Wrapper inside preview drawer */
.able-invoice-preview-wrapper {
  position: relative;
  width: 100%;
}

/* Horizontal tabs container */
.able-invoice-tabs-wrapper {
  position: relative;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  width: 100%;
}

.able-invoice-tabs-wrapper .horizontal-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.able-invoice-tabs-wrapper .horizontal-tabs::-webkit-scrollbar {
  display: none;
}

.able-invoice-tabs-wrapper .able-nav-tabs {
  border-bottom: 1px solid var(--able-border) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li {
  float: none !important;
  margin: 0 !important;
  list-style: none !important;
  flex-shrink: 0 !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li>a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li>a:hover {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary-light) !important;
  background: transparent !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a:focus,
.able-invoice-tabs-wrapper .able-nav-tabs>li.active>a:hover {
  color: var(--able-primary) !important;
  border-bottom: 2px solid var(--able-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.able-invoice-tabs-wrapper .able-nav-tabs .badge {
  background-color: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
  border-radius: 10px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
}

.able-invoice-tabs-wrapper .scroller,
.horizontal-scrollable-tabs .scroller {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 5px !important;
  z-index: 20 !important;
  cursor: pointer !important;
  float: none !important;
  box-sizing: border-box !important;
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease-in-out !important;
}

.able-invoice-tabs-wrapper .scroller[style*="display: none"],
.horizontal-scrollable-tabs .scroller[style*="display: none"] {
  display: none !important;
}

.able-invoice-tabs-wrapper .scroller i,
.horizontal-scrollable-tabs .scroller i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 15px !important;
  text-align: center !important;
}

.able-invoice-tabs-wrapper .scroller:hover,
.horizontal-scrollable-tabs .scroller:hover {
  color: var(--able-primary, #01C38D) !important;
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 3px 8px rgba(1, 195, 141, 0.25) !important;
}

.able-invoice-tabs-wrapper .arrow-left,
.horizontal-scrollable-tabs .arrow-left {
  left: 0 !important;
  right: auto !important;
  float: none !important;
}

.able-invoice-tabs-wrapper .arrow-right,
.horizontal-scrollable-tabs .arrow-right {
  right: 0 !important;
  left: auto !important;
  float: none !important;
}

/* Items Preview Table Enhancements */
.items-preview td.dragger,
.invoice-items-preview td.dragger,
.estimate-items-preview td.dragger {
  background: none !important;
  cursor: default !important;
  padding-left: 8px !important;
  text-align: center !important;
}

.able-items-table-wrapper {
  border: 1px solid var(--able-border) !important;
  border-radius: 10px !important;
  background: var(--able-surface) !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

.able-items-table-wrapper table.table.items {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.able-items-table-wrapper table.table.items thead th,
.invoice-items-preview thead th {
  background: var(--able-bg) !important;
  color: var(--able-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--able-border) !important;
  border-top: none !important;
}

.able-items-table-wrapper table.table.items tbody td,
.invoice-items-preview tbody td {
  border-bottom: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
}

/* Dark mode support for invoice preview and tabs */
html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs {
  border-color: #29313B !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li>a {
  color: #94A3B8 !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs>li.active>a {
  color: var(--able-primary) !important;
  border-bottom-color: var(--able-primary) !important;
}

html.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
body.dark-mode .able-invoice-tabs-wrapper .able-nav-tabs .badge,
[data-theme="dark"] .able-invoice-tabs-wrapper .able-nav-tabs .badge {
  background-color: rgba(70, 128, 255, 0.18) !important;
  color: #699DFE !important;
}

/* Dark mode scroller buttons: high contrast and distinctive */
html.dark-mode .able-invoice-tabs-wrapper .scroller,
body.dark-mode .able-invoice-tabs-wrapper .scroller,
[data-theme="dark"] .able-invoice-tabs-wrapper .scroller,
html.dark-mode .horizontal-scrollable-tabs .scroller,
body.dark-mode .horizontal-scrollable-tabs .scroller,
[data-theme="dark"] .horizontal-scrollable-tabs .scroller {
  background: #252D37 !important;
  border: 1px solid #475569 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-invoice-tabs-wrapper .scroller:hover,
body.dark-mode .able-invoice-tabs-wrapper .scroller:hover,
[data-theme="dark"] .able-invoice-tabs-wrapper .scroller:hover,
html.dark-mode .horizontal-scrollable-tabs .scroller:hover,
body.dark-mode .horizontal-scrollable-tabs .scroller:hover,
[data-theme="dark"] .horizontal-scrollable-tabs .scroller:hover {
  background: #334155 !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 4px 12px rgba(1, 195, 141, 0.3) !important;
}

/* Items Preview Table in Dark Mode */
html.dark-mode .able-items-table-wrapper,
body.dark-mode .able-items-table-wrapper,
[data-theme="dark"] .able-items-table-wrapper {
  background: #1D2630 !important;
  border-color: #29313B !important;
}

html.dark-mode .able-items-table-wrapper table.table.items thead th,
body.dark-mode .able-items-table-wrapper table.table.items thead th,
[data-theme="dark"] .able-items-table-wrapper table.table.items thead th {
  background: #131920 !important;
  color: #94A3B8 !important;
  border-color: #29313B !important;
}

html.dark-mode .able-items-table-wrapper table.table.items tbody td,
body.dark-mode .able-items-table-wrapper table.table.items tbody td,
[data-theme="dark"] .able-items-table-wrapper table.table.items tbody td,
html.dark-mode .table.items tbody td,
body.dark-mode .table.items tbody td,
[data-theme="dark"] .table.items tbody td {
  border-color: #29313B !important;
  color: #F8FAFC !important;
}

html.dark-mode .table.items tbody td strong,
body.dark-mode .table.items tbody td strong,
[data-theme="dark"] .table.items tbody td strong {
  color: #FFFFFF !important;
}

/* Item long description text visibility in Dark Mode */
html.dark-mode .table.items tbody td .description span,
body.dark-mode .table.items tbody td .description span,
[data-theme="dark"] .table.items tbody td .description span,
html.dark-mode .table.items tbody td .item-long-desc,
body.dark-mode .table.items tbody td .item-long-desc,
[data-theme="dark"] .table.items tbody td .item-long-desc,
html.dark-mode .table.items tbody td span[style*="color:#424242"],
body.dark-mode .table.items tbody td span[style*="color:#424242"],
[data-theme="dark"] .table.items tbody td span[style*="color:#424242"] {
  color: #94A3B8 !important;
}

html.dark-mode .table.items tbody td.cabys span,
body.dark-mode .table.items tbody td.cabys span,
[data-theme="dark"] .table.items tbody td.cabys span {
  color: #CBD5E1 !important;
}

/* Totals section in Dark Mode */
html.dark-mode table.table.text-right tr td,
body.dark-mode table.table.text-right tr td,
[data-theme="dark"] table.table.text-right tr td {
  border-color: #29313B !important;
  color: #CBD5E1 !important;
}

html.dark-mode table.table.text-right tr td span,
body.dark-mode table.table.text-right tr td span,
[data-theme="dark"] table.table.text-right tr td span {
  color: #CBD5E1 !important;
}

html.dark-mode table.table.text-right tr td.total,
body.dark-mode table.table.text-right tr td.total,
[data-theme="dark"] table.table.text-right tr td.total,
html.dark-mode table.table.text-right tr td.subtotal,
body.dark-mode table.table.text-right tr td.subtotal,
[data-theme="dark"] table.table.text-right tr td.subtotal {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Address, Project & Customer Info in Dark Mode */
html.dark-mode #invoice-preview address,
html.dark-mode #estimate-preview address,
html.dark-mode #proposal-preview-mount-point address,
body.dark-mode #invoice-preview address,
body.dark-mode #estimate-preview address,
[data-theme="dark"] #invoice-preview address,
[data-theme="dark"] #estimate-preview address {
  color: #94A3B8 !important;
}

html.dark-mode #invoice-preview p,
html.dark-mode #estimate-preview p,
html.dark-mode #proposal-preview-mount-point p,
body.dark-mode #invoice-preview p,
body.dark-mode #estimate-preview p,
[data-theme="dark"] #invoice-preview p,
[data-theme="dark"] #estimate-preview p {
  color: #CBD5E1 !important;
}

html.dark-mode #invoice-preview p span.bold,
html.dark-mode #estimate-preview p span.bold,
body.dark-mode #invoice-preview p span.bold,
body.dark-mode #estimate-preview p span.bold,
[data-theme="dark"] #invoice-preview p span.bold,
[data-theme="dark"] #estimate-preview p span.bold {
  color: #F1F5F9 !important;
}

/* ==========================================================================
   VIEW TRANSITIONS API FOR DARK / LIGHT MODE SWITCHING
   ========================================================================== */

/* Disable default crossfade animation while custom circular reveal runs */
html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Ensure new theme snapshot renders on top of the old theme during animation */
html.theme-transitioning::view-transition-old(root) {
  z-index: 1;
}

html.theme-transitioning::view-transition-new(root) {
  z-index: 999999;
}

/* Accessibility: Disable all view transitions when prefers-reduced-motion is requested */
@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Smooth surface transition fallback for browsers without View Transitions */
html:not(.theme-transitioning) body,
html:not(.theme-transitioning) #wrapper,
html:not(.theme-transitioning) #content,
html:not(.theme-transitioning) .panel_s,
html:not(.theme-transitioning) .panel-body,
html:not(.theme-transitioning) .v-card,
html:not(.theme-transitioning) .v-navigation-drawer,
html:not(.theme-transitioning) .v-app-bar,
html:not(.theme-transitioning) .able-table-card,
html:not(.theme-transitioning) .able-invoice-preview-wrapper,
html:not(.theme-transitioning) .able-customizer-drawer {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   EXPENSE VIEW — ABLE PRO THEME STYLES
   ========================================================================== */

/* ---- Expense Items Table ---- */
.expense-items-styled thead tr th {
  background-color: var(--able-surface-light) !important;
  color: var(--able-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--able-border) !important;
  padding: 10px 8px !important;
}

.expense-items-styled tbody tr {
  transition: background-color 0.15s ease !important;
}

.expense-items-styled tbody tr:hover {
  background-color: var(--able-primary-light) !important;
}

.expense-items-styled tbody tr td {
  border-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
  vertical-align: middle !important;
}

/* Dark mode table */
html.dark-mode .expense-items-styled thead tr th,
[data-theme="dark"] .expense-items-styled thead tr th {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: var(--able-border) !important;
}

html.dark-mode .expense-items-styled tbody tr:hover,
[data-theme="dark"] .expense-items-styled tbody tr:hover {
  background-color: rgba(1, 195, 141, 0.08) !important;
}

/* ---- Expense form card hover ---- */
.accounting-template {
  transition: box-shadow 0.25s ease !important;
}

/* ---- Dropzone area ---- */
#dropzoneDragArea.dz-message {
  border: 2px dashed var(--able-border) !important;
  border-radius: var(--able-radius) !important;
  background-color: var(--able-surface-light) !important;
  color: var(--able-text-muted) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
  padding: 24px !important;
  text-align: center !important;
}

#dropzoneDragArea.dz-message:hover,
#dropzoneDragArea.dz-message.dz-drag-hover {
  border-color: var(--able-primary) !important;
  background-color: var(--able-primary-light) !important;
  color: var(--able-primary) !important;
}

/* ---- "+ Add field" links ---- */
a[onclick*="onExpenseAddFieldClick"] {
  transition: color 0.2s ease, gap 0.2s ease !important;
}

a[onclick*="onExpenseAddFieldClick"] i {
  transition: transform 0.2s ease !important;
}

a[onclick*="onExpenseAddFieldClick"]:hover i {
  transform: rotate(90deg) !important;
}

/* ---- Tax fields panel ---- */
#taxFields,
#paymentModeField {
  animation: slideDown 0.2s ease !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Submit / action buttons ---- */
.accounting-template .btn-primary {
  transition: box-shadow 0.2s ease, transform 0.1s ease !important;
}

.accounting-template .btn-primary:active {
  transform: scale(0.97) !important;
}

/* ---- Totals mini card dark mode ---- */
html.dark-mode .tw-bg-\[var\(--able-surface-light\)\],
[data-theme="dark"] .tw-bg-\[var\(--able-surface-light\)\] {
  background-color: var(--able-surface-light) !important;
}

/* ==========================================================================
   EXPENSES STATS TOP — SELECTPICKER BUTTON VISIBILITY & DARK MODE
   ========================================================================== */

/* 1. Base button style — keeps caret icon inside the button */
.expenses-filter-select .btn.dropdown-toggle {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  border-radius: 6px !important;
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 72px !important;
  height: 28px !important;
  line-height: normal !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.expenses-filter-select .btn.dropdown-toggle:hover {
  border-color: var(--able-primary) !important;
}

.expenses-filter-select .btn.dropdown-toggle .filter-option {
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}

.expenses-filter-select .btn.dropdown-toggle .filter-option-inner-inner {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--able-text-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.expenses-filter-select .btn.dropdown-toggle .bs-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  flex: 0 0 auto !important;
}

.expenses-filter-select .btn.dropdown-toggle .caret {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  border-top-color: var(--able-text-muted) !important;
}

/* 2. Eliminate horizontal scroll on all dropdown menus */
.dropdown-menu,
.dropdown-menu .inner,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu .inner,
.bs-container .dropdown-menu,
.bs-container .dropdown-menu .inner {
  overflow-x: hidden !important;
}

.bootstrap-select .dropdown-menu li a,
.bs-container .dropdown-menu li a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3. Carets visible in dark mode — White */
html.dark-mode .bootstrap-select .dropdown-toggle .caret,
html.dark-mode .bootstrap-select .bs-caret .caret,
html.dark-mode .expenses-filter-select .btn .caret,
html.dark-mode .btn .caret,
[data-theme="dark"] .bootstrap-select .dropdown-toggle .caret,
[data-theme="dark"] .bootstrap-select .bs-caret .caret,
[data-theme="dark"] .expenses-filter-select .btn .caret,
[data-theme="dark"] .btn .caret,
body.dark-mode .bootstrap-select .dropdown-toggle .caret,
body.dark-mode .bootstrap-select .bs-caret .caret,
body.dark-mode .expenses-filter-select .btn .caret,
body.dark-mode .btn .caret {
  border-top-color: #ffffff !important;
  color: #ffffff !important;
}

/* 4. Dropdown Menu Dark Mode — matches contracts view */
html.dark-mode .dropdown-menu,
html.dark-mode .bootstrap-select .dropdown-menu,
html.dark-mode .bs-container .dropdown-menu,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .bootstrap-select .dropdown-menu,
[data-theme="dark"] .bs-container .dropdown-menu,
body.dark-mode .dropdown-menu,
body.dark-mode .bootstrap-select .dropdown-menu,
body.dark-mode .bs-container .dropdown-menu {
  background-color: var(--able-surface, #141822) !important;
  border: 1px solid var(--able-border, #29313B) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

html.dark-mode .dropdown-menu li a,
html.dark-mode .bootstrap-select .dropdown-menu li a,
html.dark-mode .bs-container .dropdown-menu li a,
[data-theme="dark"] .dropdown-menu li a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a,
[data-theme="dark"] .bs-container .dropdown-menu li a,
body.dark-mode .dropdown-menu li a,
body.dark-mode .bootstrap-select .dropdown-menu li a,
body.dark-mode .bs-container .dropdown-menu li a {
  color: var(--able-text-dark, #dadcde) !important;
  background-color: transparent !important;
}

html.dark-mode .dropdown-menu li a:hover,
html.dark-mode .dropdown-menu li a:focus,
html.dark-mode .bootstrap-select .dropdown-menu li a:hover,
html.dark-mode .bootstrap-select .dropdown-menu li a:focus,
html.dark-mode .bs-container .dropdown-menu li a:hover,
html.dark-mode .bs-container .dropdown-menu li a:focus,
[data-theme="dark"] .dropdown-menu li a:hover,
[data-theme="dark"] .dropdown-menu li a:focus,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:focus,
[data-theme="dark"] .bs-container .dropdown-menu li a:hover,
[data-theme="dark"] .bs-container .dropdown-menu li a:focus,
body.dark-mode .dropdown-menu li a:hover,
body.dark-mode .dropdown-menu li a:focus,
body.dark-mode .bootstrap-select .dropdown-menu li a:hover,
body.dark-mode .bootstrap-select .dropdown-menu li a:focus,
body.dark-mode .bs-container .dropdown-menu li a:hover,
body.dark-mode .bs-container .dropdown-menu li a:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li.selected>a,
html.dark-mode .bootstrap-select .dropdown-menu li.active>a,
html.dark-mode .bs-container .dropdown-menu li.selected>a,
html.dark-mode .bs-container .dropdown-menu li.active>a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected>a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.active>a,
[data-theme="dark"] .bs-container .dropdown-menu li.selected>a,
[data-theme="dark"] .bs-container .dropdown-menu li.active>a,
body.dark-mode .bootstrap-select .dropdown-menu li.selected>a,
body.dark-mode .bootstrap-select .dropdown-menu li.active>a,
body.dark-mode .bs-container .dropdown-menu li.selected>a,
body.dark-mode .bs-container .dropdown-menu li.active>a {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li.selected>a .check-mark,
html.dark-mode .bs-container .dropdown-menu li.selected>a .check-mark,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected>a .check-mark,
[data-theme="dark"] .bs-container .dropdown-menu li.selected>a .check-mark,
body.dark-mode .bootstrap-select .dropdown-menu li.selected>a .check-mark,
body.dark-mode .bs-container .dropdown-menu li.selected>a .check-mark {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .dropdown-menu .divider,
html.dark-mode .bootstrap-select .dropdown-menu .divider,
html.dark-mode .bs-container .dropdown-menu .divider,
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Submit / action buttons ---- */
.accounting-template .btn-primary {
  transition: box-shadow 0.2s ease, transform 0.1s ease !important;
}

.accounting-template .btn-primary:active {
  transform: scale(0.97) !important;
}

/* ---- Totals mini card dark mode ---- */
html.dark-mode .tw-bg-\[var\(--able-surface-light\)\],
[data-theme="dark"] .tw-bg-\[var\(--able-surface-light\)\] {
  background-color: var(--able-surface-light) !important;
}

/* ==========================================================================
   EXPENSES STATS TOP — SELECTPICKER BUTTON VISIBILITY & DARK MODE
   ========================================================================== */

/* 1. Base button style — keeps caret icon inside the button */
.expenses-filter-select .btn.dropdown-toggle {
  background-color: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  border-radius: 6px !important;
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 72px !important;
  height: 28px !important;
  line-height: normal !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.expenses-filter-select .btn.dropdown-toggle:hover {
  border-color: var(--able-primary) !important;
}

.expenses-filter-select .btn.dropdown-toggle .filter-option {
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}

.expenses-filter-select .btn.dropdown-toggle .filter-option-inner-inner {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--able-text-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.expenses-filter-select .btn.dropdown-toggle .bs-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  flex: 0 0 auto !important;
}

.expenses-filter-select .btn.dropdown-toggle .caret {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  border-top-color: var(--able-text-muted) !important;
}

/* 2. Eliminate horizontal scroll on all dropdown menus */
.dropdown-menu,
.dropdown-menu .inner,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu .inner,
.bs-container .dropdown-menu,
.bs-container .dropdown-menu .inner {
  overflow-x: hidden !important;
}

.bootstrap-select .dropdown-menu li a,
.bs-container .dropdown-menu li a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3. Carets visible in dark mode — White */
html.dark-mode .bootstrap-select .dropdown-toggle .caret,
html.dark-mode .bootstrap-select .bs-caret .caret,
html.dark-mode .expenses-filter-select .btn .caret,
html.dark-mode .btn .caret,
[data-theme="dark"] .bootstrap-select .dropdown-toggle .caret,
[data-theme="dark"] .bootstrap-select .bs-caret .caret,
[data-theme="dark"] .expenses-filter-select .btn .caret,
[data-theme="dark"] .btn .caret,
body.dark-mode .bootstrap-select .dropdown-toggle .caret,
body.dark-mode .bootstrap-select .bs-caret .caret,
body.dark-mode .expenses-filter-select .btn .caret,
body.dark-mode .btn .caret {
  border-top-color: #ffffff !important;
  color: #ffffff !important;
}

/* 4. Dropdown Menu Dark Mode — matches contracts view */
html.dark-mode .dropdown-menu,
html.dark-mode .bootstrap-select .dropdown-menu,
html.dark-mode .bs-container .dropdown-menu,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .bootstrap-select .dropdown-menu,
[data-theme="dark"] .bs-container .dropdown-menu,
body.dark-mode .dropdown-menu,
body.dark-mode .bootstrap-select .dropdown-menu,
body.dark-mode .bs-container .dropdown-menu {
  background-color: var(--able-surface, #141822) !important;
  border: 1px solid var(--able-border, #29313B) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

html.dark-mode .dropdown-menu li a,
html.dark-mode .bootstrap-select .dropdown-menu li a,
html.dark-mode .bs-container .dropdown-menu li a,
[data-theme="dark"] .dropdown-menu li a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a,
[data-theme="dark"] .bs-container .dropdown-menu li a,
body.dark-mode .dropdown-menu li a,
body.dark-mode .bootstrap-select .dropdown-menu li a,
body.dark-mode .bs-container .dropdown-menu li a {
  color: var(--able-text-dark, #dadcde) !important;
  background-color: transparent !important;
}

html.dark-mode .dropdown-menu li a:hover,
html.dark-mode .dropdown-menu li a:focus,
html.dark-mode .bootstrap-select .dropdown-menu li a:hover,
html.dark-mode .bootstrap-select .dropdown-menu li a:focus,
html.dark-mode .bs-container .dropdown-menu li a:hover,
html.dark-mode .bs-container .dropdown-menu li a:focus,
[data-theme="dark"] .dropdown-menu li a:hover,
[data-theme="dark"] .dropdown-menu li a:focus,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:focus,
[data-theme="dark"] .bs-container .dropdown-menu li a:hover,
[data-theme="dark"] .bs-container .dropdown-menu li a:focus,
body.dark-mode .dropdown-menu li a:hover,
body.dark-mode .dropdown-menu li a:focus,
body.dark-mode .bootstrap-select .dropdown-menu li a:hover,
body.dark-mode .bootstrap-select .dropdown-menu li a:focus,
body.dark-mode .bs-container .dropdown-menu li a:hover,
body.dark-mode .bs-container .dropdown-menu li a:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li.selected>a,
html.dark-mode .bootstrap-select .dropdown-menu li.active>a,
html.dark-mode .bs-container .dropdown-menu li.selected>a,
html.dark-mode .bs-container .dropdown-menu li.active>a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected>a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.active>a,
[data-theme="dark"] .bs-container .dropdown-menu li.selected>a,
[data-theme="dark"] .bs-container .dropdown-menu li.active>a,
body.dark-mode .bootstrap-select .dropdown-menu li.selected>a,
body.dark-mode .bootstrap-select .dropdown-menu li.active>a,
body.dark-mode .bs-container .dropdown-menu li.selected>a,
body.dark-mode .bs-container .dropdown-menu li.active>a {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li.selected>a .check-mark,
html.dark-mode .bs-container .dropdown-menu li.selected>a .check-mark,
[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected>a .check-mark,
[data-theme="dark"] .bs-container .dropdown-menu li.selected>a .check-mark,
body.dark-mode .bootstrap-select .dropdown-menu li.selected>a .check-mark,
body.dark-mode .bs-container .dropdown-menu li.selected>a .check-mark {
  color: var(--able-primary, #01C38D) !important;
}

html.dark-mode .dropdown-menu .divider,
html.dark-mode .bootstrap-select .dropdown-menu .divider,
html.dark-mode .bs-container .dropdown-menu .divider,
[data-theme="dark"] .dropdown-menu .divider,
[data-theme="dark"] .bootstrap-select .dropdown-menu .divider,
[data-theme="dark"] .bs-container .dropdown-menu .divider,
body.dark-mode .dropdown-menu .divider,
body.dark-mode .bootstrap-select .dropdown-menu .divider,
body.dark-mode .bs-container .dropdown-menu .divider {
  background-color: var(--able-border, #29313B) !important;
}

/* Fix explicit white backgrounds on bootstrap-select dropdowns in dark mode */
html.dark-mode .bootstrap-select .dropdown-menu,
body.dark-mode .bootstrap-select .dropdown-menu,
html.dark-mode .bs-container .dropdown-menu,
body.dark-mode .bs-container .dropdown-menu,
[data-theme="dark"] .bootstrap-select .dropdown-menu,
[data-theme="dark"] .bs-container .dropdown-menu,
[data-theme="dark"] .bootstrap-select .dropdown-menu .inner,
[data-theme="dark"] .bs-container .dropdown-menu .inner,
[data-theme="dark"] .bootstrap-select .dropdown-menu ul,
[data-theme="dark"] .bs-container .dropdown-menu ul {
  background: #141822 !important;
  background-color: #141822 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .bootstrap-select .dropdown-menu li,
[data-theme="dark"] .bs-container .dropdown-menu li,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a,
[data-theme="dark"] .bs-container .dropdown-menu li a {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="dark"] .bootstrap-select .dropdown-menu li a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a span.text,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a i,
[data-theme="dark"] .bs-container .dropdown-menu li a,
[data-theme="dark"] .bs-container .dropdown-menu li a span.text,
[data-theme="dark"] .bs-container .dropdown-menu li a i {
  color: #ffffff !important;
}

[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:focus,
[data-theme="dark"] .bs-container .dropdown-menu li a:hover,
[data-theme="dark"] .bs-container .dropdown-menu li a:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Fix disabled select and form-controls background in dark mode */
html.dark-mode .bootstrap-select>.btn.disabled,
html.dark-mode .bootstrap-select>.btn:disabled,
body.dark-mode .bootstrap-select>.btn.disabled,
body.dark-mode .bootstrap-select>.btn:disabled,
[data-theme="dark"] .bootstrap-select>.btn.disabled,
[data-theme="dark"] .bootstrap-select>.btn:disabled,
html.dark-mode .bootstrap-select.disabled>.btn,
body.dark-mode .bootstrap-select.disabled>.btn,
[data-theme="dark"] .bootstrap-select.disabled>.btn,
html.dark-mode .bootstrap-select.disabled .dropdown-toggle,
body.dark-mode .bootstrap-select.disabled .dropdown-toggle,
[data-theme="dark"] .bootstrap-select.disabled .dropdown-toggle,
html.dark-mode .form-control:disabled,
html.dark-mode .form-control[disabled],
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[disabled],
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[disabled],
html.dark-mode input:disabled,
body.dark-mode input:disabled,
[data-theme="dark"] input:disabled,
html.dark-mode select:disabled,
body.dark-mode select:disabled,
[data-theme="dark"] select:disabled,
html.dark-mode .btn.disabled,
html.dark-mode .btn[disabled],
body.dark-mode .btn.disabled,
body.dark-mode .btn[disabled],
[data-theme="dark"] .btn.disabled,
[data-theme="dark"] .btn[disabled] {
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
  opacity: 0.7 !important;
}

/* Fix searchbox in bootstrap-select dropdowns */
html.dark-mode .bootstrap-select .dropdown-menu .bs-searchbox,
body.dark-mode .bootstrap-select .dropdown-menu .bs-searchbox,
[data-theme="dark"] .bootstrap-select .dropdown-menu .bs-searchbox,
html.dark-mode .bs-container .dropdown-menu .bs-searchbox,
body.dark-mode .bs-container .dropdown-menu .bs-searchbox,
[data-theme="dark"] .bs-container .dropdown-menu .bs-searchbox {
  background: transparent !important;
  background-color: transparent !important;
}

html.dark-mode .bootstrap-select .dropdown-menu .bs-searchbox input,
body.dark-mode .bootstrap-select .dropdown-menu .bs-searchbox input,
[data-theme="dark"] .bootstrap-select .dropdown-menu .bs-searchbox input,
html.dark-mode .bs-container .dropdown-menu .bs-searchbox input,
body.dark-mode .bs-container .dropdown-menu .bs-searchbox input,
[data-theme="dark"] .bs-container .dropdown-menu .bs-searchbox input {
  background: #141822 !important;
  background-color: #141822 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Fix ajax-bootstrap-select status box */
[data-theme="dark"] .bootstrap-select .status,
[data-theme="dark"] .bs-container .status {
  background: transparent !important;
  background-color: transparent !important;
  color: #94A3B8 !important;
}

/* Fix table headers in dark mode */
[data-theme="dark"] table.items thead th,
[data-theme="dark"] table.invoice-items-table thead th,
[data-theme="dark"] table.items thead,
[data-theme="dark"] table.invoice-items-table thead,
[data-theme="dark"] .table-main-invoice-edit thead,
[data-theme="dark"] .table-main-invoice-edit thead th {
  background: #141822 !important;
  background-color: #141822 !important;
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Universal bulletproof fix for ALL dropdowns (including appended to body) */
html.dark-mode[data-theme="dark"] body .dropdown-menu,
html.dark-mode[data-theme="dark"] body .dropdown-menu .inner,
html.dark-mode[data-theme="dark"] body ul.dropdown-menu,
html.dark-mode[data-theme="dark"] body .bootstrap-select .dropdown-menu,
html.dark-mode[data-theme="dark"] body .bs-container .dropdown-menu {
  background: #141822 !important;
  background-color: #141822 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode[data-theme="dark"] body .dropdown-menu li,
html.dark-mode[data-theme="dark"] body .dropdown-menu li a,
html.dark-mode[data-theme="dark"] body .bootstrap-select .dropdown-menu li a,
html.dark-mode[data-theme="dark"] body .bs-container .dropdown-menu li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

html.dark-mode[data-theme="dark"] body .dropdown-menu li a span.text,
html.dark-mode[data-theme="dark"] body .dropdown-menu li a i,
html.dark-mode[data-theme="dark"] body .dropdown-menu li a .check-mark {
  color: #ffffff !important;
}

html.dark-mode[data-theme="dark"] body .dropdown-menu li a:hover,
html.dark-mode[data-theme="dark"] body .dropdown-menu li a:focus,
html.dark-mode[data-theme="dark"] body .dropdown-menu li.selected>a,
html.dark-mode[data-theme="dark"] body .dropdown-menu li.active>a,
html.dark-mode[data-theme="dark"] body .bootstrap-select .dropdown-menu li.selected>a,
html.dark-mode[data-theme="dark"] body .bs-container .dropdown-menu li.selected>a {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   ABLE PRO CLIENT PORTAL (FRONTEND DE CLIENTES)
   ========================================================================== */

/* Base & Layout */
body.customers {
  background-color: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text, #1E293B) !important;
  font-family: "Public Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.customers .modern-wrapper,
body.customers #wrapper {
  background-color: transparent !important;
  min-height: calc(100vh - 140px);
}

body.customers .modern-content,
body.customers #content {
  padding-top: 16px !important;
  padding-bottom: 40px !important;
}

/* 1. Header & Navigation */
.navbar.modern-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: 0 2px 12px rgba(19, 25, 32, 0.04) !important;
  min-height: 64px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

.navbar.modern-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 64px !important;
}

.navbar-brand-wrapper {
  display: flex !important;
  align-items: center !important;
}

.navbar.modern-header a.navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-right: 24px !important;
  height: auto !important;
}

.navbar.modern-header a.navbar-brand img {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

.modern-navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  list-style: none !important;
}

.modern-navbar-nav>li>a.modern-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #64748B) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  line-height: normal !important;
}

.modern-navbar-nav>li>a.modern-nav-link:hover,
.modern-navbar-nav>li>a.modern-nav-link:focus {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: var(--able-border, #E8EBEE) !important;
  transform: none !important;
}

.modern-navbar-nav>li.active>a.modern-nav-link {
  background: var(--able-primary-light, #E9F0FF) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* Theme Toggle Button */
.able-client-theme-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  color: var(--able-text-muted, #64748B) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.able-client-theme-btn:hover {
  background: var(--able-border, #E8EBEE) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: var(--able-primary, #4680FF) !important;
}

/* Profile Trigger */
.modern-profile-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 3px 12px 3px 4px !important;
  border-radius: 20px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  line-height: normal !important;
}

.modern-profile-trigger:hover,
.modern-profile-dropdown.open .modern-profile-trigger {
  background: var(--able-surface, #FFFFFF) !important;
  border-color: var(--able-primary, #4680FF) !important;
  box-shadow: 0 2px 8px rgba(70, 128, 255, 0.15) !important;
}

.modern-avatar-wrapper {
  width: 30px !important;
  height: 30px !important;
  position: relative !important;
}

.modern-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid var(--able-primary, #4680FF) !important;
}

.modern-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text, #1E293B) !important;
}

.modern-chevron {
  font-size: 11px !important;
  color: var(--able-text-muted, #64748B) !important;
}

/* Profile Dropdown */
.modern-dropdown-menu {
  margin-top: 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 16px 40px rgba(19, 25, 32, 0.12), 0 2px 8px rgba(19, 25, 32, 0.04) !important;
  padding: 6px 0 !important;
  min-width: 240px !important;
}

.modern-dropdown-header {
  padding: 12px 18px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  margin-bottom: 4px !important;
}

.modern-dropdown-header .user-info-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--able-text, #1E293B) !important;
}

.modern-dropdown-header .user-info-email {
  font-size: 12px !important;
  color: var(--able-text-muted, #64748B) !important;
}

.modern-dropdown-menu>li>a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text, #1E293B) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.modern-dropdown-menu>li>a:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
}

/* 2. Hero Welcome Banner */
.able-client-hero-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0F766E 100%) !important;
  border-radius: 14px !important;
  padding: 26px 32px !important;
  color: #FFFFFF !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
  display: block !important;
}

.able-client-hero-banner .modern-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #E2E8F0 !important;
  backdrop-filter: blur(8px) !important;
  margin-bottom: 8px !important;
}

.able-client-hero-banner .hero-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 8px var(--able-primary, #01C38D) !important;
}

.able-client-hero-banner .able-hero-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 6px 0 !important;
}

.able-client-hero-banner .modern-hero-subtitle {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 0 !important;
  max-width: 600px !important;
}

.able-client-hero-banner .able-hero-btn {
  height: 38px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--able-primary, #4680FF) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.3) !important;
}

.able-client-hero-banner .able-hero-btn-outline {
  height: 38px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.able-client-hero-banner .able-hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

/* 3. SaaS Container & Instance Cards */
.section-client-dashboard>.ps-container,
.section-client-dashboard .ps-container,
.single-theme,
.ps-view {
  display: block !important;
}

/* Hero compacto: sin altura mínima y contenido en fila (texto izq, acciones der) */
.able-client-hero-banner {
  min-height: 0 !important;
}

.able-client-hero-banner .modern-hero-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.able-client-hero-banner .modern-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}

.ps-container .panel_s,
.single-theme .panel_s,
.agency-theme .company.panel_s {
  border-radius: 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.ps-container .panel_s:hover,
.agency-theme .company.panel_s:hover {
  box-shadow: 0 8px 24px rgba(19, 25, 32, 0.08) !important;
  border-color: var(--able-primary, #4680FF) !important;
}

/* Quota & Resource Meters */
#widget-saas_top_stats .panel_s {
  border-radius: 12px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03) !important;
  padding: 16px !important;
}

#widget-saas_top_stats .progress {
  height: 7px !important;
  border-radius: 10px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
}

/* 4. Client Tables & Panels */
body.customers .panel_s {
  border-radius: 14px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.04) !important;
}

body.customers .table {
  color: var(--able-text, #1E293B) !important;
}

body.customers .table>thead>tr>th {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #64748B) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
}

body.customers .table>tbody>tr>td {
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

/* Footer */
.footer.modern-footer {
  background: transparent !important;
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  padding: 22px 0 !important;
  color: var(--able-text-muted, #64748B) !important;
  font-size: 13px !important;
}

/* ==========================================================================
   ABLE PRO CLIENT PORTAL - DARK MODE
   ========================================================================== */

html.dark-mode body.customers,
body.customers.dark-mode,
[data-theme="dark"] body.customers {
  background-color: #0B0E14 !important;
  color: #F8FAFC !important;
}

html.dark-mode .navbar.modern-header,
body.customers.dark-mode .navbar.modern-header,
[data-theme="dark"] .navbar.modern-header {
  background: rgba(19, 25, 32, 0.9) !important;
  border-bottom-color: #2E3844 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .modern-navbar-nav>li>a.modern-nav-link,
body.customers.dark-mode .modern-navbar-nav>li>a.modern-nav-link,
[data-theme="dark"] .modern-navbar-nav>li>a.modern-nav-link {
  color: #94A3B8 !important;
}

html.dark-mode .modern-navbar-nav>li>a.modern-nav-link:hover,
body.customers.dark-mode .modern-navbar-nav>li>a.modern-nav-link:hover,
[data-theme="dark"] .modern-navbar-nav>li>a.modern-nav-link:hover {
  background: #1E2533 !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: #2E3844 !important;
}

html.dark-mode .modern-navbar-nav>li.active>a.modern-nav-link,
body.customers.dark-mode .modern-navbar-nav>li.active>a.modern-nav-link,
[data-theme="dark"] .modern-navbar-nav>li.active>a.modern-nav-link {
  background: rgba(70, 128, 255, 0.15) !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .able-client-theme-btn,
body.customers.dark-mode .able-client-theme-btn,
[data-theme="dark"] .able-client-theme-btn {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-client-theme-btn:hover,
body.customers.dark-mode .able-client-theme-btn:hover,
[data-theme="dark"] .able-client-theme-btn:hover {
  background: #1E2533 !important;
  border-color: var(--able-primary, #4680FF) !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .modern-profile-trigger,
body.customers.dark-mode .modern-profile-trigger,
[data-theme="dark"] .modern-profile-trigger {
  background: #141822 !important;
  border-color: #2E3844 !important;
}

html.dark-mode .modern-user-name,
body.customers.dark-mode .modern-user-name,
[data-theme="dark"] .modern-user-name {
  color: #F8FAFC !important;
}

html.dark-mode .modern-dropdown-menu,
body.customers.dark-mode .modern-dropdown-menu,
[data-theme="dark"] .modern-dropdown-menu {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modern-dropdown-header,
body.customers.dark-mode .modern-dropdown-header,
[data-theme="dark"] .modern-dropdown-header {
  background: #0E121B !important;
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .modern-dropdown-header .user-info-name,
body.customers.dark-mode .modern-dropdown-header .user-info-name,
[data-theme="dark"] .modern-dropdown-header .user-info-name {
  color: #FFFFFF !important;
}

html.dark-mode .modern-dropdown-header .user-info-email,
body.customers.dark-mode .modern-dropdown-header .user-info-email,
[data-theme="dark"] .modern-dropdown-header .user-info-email {
  color: #94A3B8 !important;
}

html.dark-mode .modern-dropdown-menu>li>a,
body.customers.dark-mode .modern-dropdown-menu>li>a,
[data-theme="dark"] .modern-dropdown-menu>li>a {
  color: #CBD5E1 !important;
}

html.dark-mode .modern-dropdown-menu>li>a:hover,
body.customers.dark-mode .modern-dropdown-menu>li>a:hover,
[data-theme="dark"] .modern-dropdown-menu>li>a:hover {
  background: #1E2533 !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .ps-container .panel_s,
html.dark-mode .single-theme .panel_s,
html.dark-mode .agency-theme .company.panel_s,
html.dark-mode #widget-saas_top_stats .panel_s,
html.dark-mode body.customers .panel_s,
body.customers.dark-mode .panel_s,
[data-theme="dark"] body.customers .panel_s {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode #widget-saas_top_stats h4,
html.dark-mode .section-title-wrapper h3,
body.customers.dark-mode .section-title-wrapper h3 {
  color: #F8FAFC !important;
}

html.dark-mode #widget-saas_top_stats .progress,
body.customers.dark-mode #widget-saas_top_stats .progress {
  background: #0E121B !important;
  border-color: #2E3844 !important;
}

html.dark-mode body.customers .table,
body.customers.dark-mode .table {
  color: #F8FAFC !important;
}

html.dark-mode body.customers .table>thead>tr>th,
body.customers.dark-mode .table>thead>tr>th {
  background: #0E121B !important;
  color: #94A3B8 !important;
  border-bottom-color: #2E3844 !important;
}

html.dark-mode body.customers .table>tbody>tr>td,
body.customers.dark-mode .table>tbody>tr>td {
  border-top-color: #2E3844 !important;
}

html.dark-mode .footer.modern-footer,
body.customers.dark-mode .footer.modern-footer,
[data-theme="dark"] .footer.modern-footer {
  border-top-color: #2E3844 !important;
  color: #94A3B8 !important;
}

html.dark-mode .company-info .panel_s,
body.customers.dark-mode .company-info .panel_s,
[data-theme="dark"] .company-info .panel_s {
  background: #141822 !important;
  border-color: #2E3844 !important;
}

html.dark-mode .company-info .panel_s span,
body.customers.dark-mode .company-info .panel_s span,
[data-theme="dark"] .company-info .panel_s span {
  color: #F8FAFC !important;
}

html.dark-mode .company-info .btn-default,
body.customers.dark-mode .company-info .btn-default,
[data-theme="dark"] .company-info .btn-default {
  background: #1E2533 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .company-info h3,
body.customers.dark-mode .company-info h3,
[data-theme="dark"] .company-info h3 {
  color: #FFFFFF !important;
}

html.dark-mode .company-info label,
body.customers.dark-mode .company-info label,
[data-theme="dark"] .company-info label {
  color: #94A3B8 !important;
}




/* ==========================================================================
   ABLE PRO CLIENT PORTAL - SIDEBAR & TOP HEADER ARCHITECTURE
   ========================================================================== */

/* 1. Client Sidebar */
#menu.able-client-sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--able-sidebar-width, 260px) !important;
  background: var(--able-surface, #FFFFFF) !important;
  border-right: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: none !important;
  z-index: 1045 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-client-brand-header {
  padding: 16px 20px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  flex-shrink: 0 !important;
}

.able-client-logo-wrap {
  display: flex !important;
  align-items: center !important;
  max-width: 180px !important;
  overflow: hidden !important;
}

.able-client-logo-wrap a.logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.able-client-logo-wrap img {
  max-height: 38px !important;
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.able-client-logo-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.2px !important;
}

.able-sidebar-close {
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  color: var(--able-text-muted, #64748B) !important;
  cursor: pointer !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.able-sidebar-close:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
}

/* Sidebar User Info Card */
.able-client-sidebar-user {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  margin: 12px 14px 4px 14px !important;
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

.able-client-sidebar-user-avatar {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

.able-client-sidebar-user-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--able-primary, #4680FF) !important;
}

.able-client-sidebar-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.able-client-sidebar-user-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--able-text, #1E293B) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-client-sidebar-user-company {
  font-size: 11.5px !important;
  color: var(--able-text-muted, #64748B) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
}

/* Sidebar Navigation Menu */
.able-client-sidebar-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 10px 14px 16px 14px !important;
  scrollbar-width: thin !important;
}

.modern-nav-subheader {
  padding: 12px 12px 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--able-text-muted, #94A3B8) !important;
}

.able-client-nav-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.able-client-nav-menu>li>a.modern-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #475569) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.able-client-nav-menu>li>a.modern-nav-link:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: var(--able-border, #E8EBEE) !important;
}

.able-client-nav-menu>li.active>a.modern-nav-link,
.able-client-nav-menu>li>a.modern-nav-link.active {
  background: var(--able-primary-light, rgba(70, 128, 255, 0.12)) !important;
  color: var(--able-primary, #4680FF) !important;
  font-weight: 600 !important;
  border-color: transparent !important;
}

.able-nav-icon-wrapper {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

.active-indicator {
  position: absolute !important;
  right: 12px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--able-primary, #4680FF) !important;
}

/* Sidebar Footer */
.able-client-sidebar-footer {
  padding: 12px 14px !important;
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  flex-shrink: 0 !important;
}

.able-client-sidebar-logout-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.able-client-sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #DC2626 !important;
}

/* 2. Top Header */
.able-client-top-header {
  position: fixed !important;
  top: 0 !important;
  left: var(--able-sidebar-width, 260px) !important;
  right: 0 !important;
  height: 70px !important;
  z-index: 1030 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: 0 2px 10px rgba(19, 25, 32, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-client-guest-header {
  left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Guest (sin sidebar): el header jamás debe heredar el margin del sidebar */
body.customers:not(.has-client-sidebar) #header,
body.customers:not(.has-client-sidebar) .able-pro-header {
  margin-left: 0 !important;
  width: 100% !important;
  left: 0 !important;
}

.able-client-top-header .able-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.able-client-header-brand-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.able-client-header-company {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--able-text, #1E293B) !important;
}

.able-client-header-tag {
  font-size: 11px !important;
  color: var(--able-text-muted, #64748B) !important;
  letter-spacing: 0.3px !important;
}

.able-client-top-header .able-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.able-announcements-btn {
  position: relative !important;
}

.able-announcements-btn .badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 10px !important;
  padding: 2px 5px !important;
  border-radius: 10px !important;
}

/* 3. Main Content & Footer with Sidebar */
body.customers.has-client-sidebar #wrapper,
html.hide-sidebar body.customers.has-client-sidebar #wrapper {
  margin-left: var(--able-sidebar-width, 260px) !important;
  margin-top: 70px !important;
  min-height: calc(100vh - 70px) !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.customers.has-client-sidebar .footer {
  margin-left: var(--able-sidebar-width, 260px) !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.customers.has-client-sidebar #wrapper .container {
  width: 100% !important;
  max-width: 1440px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* 4. Desktop Collapsed State */
@media (min-width: 992px) {

  body.customers.hide-sidebar #menu.able-client-sidebar,
  html.hide-sidebar body.customers #menu.able-client-sidebar {
    transform: translateX(-100%) !important;
  }

  body.customers.hide-sidebar .able-client-top-header,
  html.hide-sidebar body.customers .able-client-top-header {
    left: 0 !important;
  }

  body.customers.hide-sidebar #wrapper,
  html.hide-sidebar body.customers #wrapper {
    margin-left: 0 !important;
  }

  body.customers.hide-sidebar .footer,
  html.hide-sidebar body.customers .footer {
    margin-left: 0 !important;
  }
}

/* 5. Mobile & Tablet Responsive */
@media (max-width: 991px) {
  body.customers #menu.able-client-sidebar {
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }

  body.customers.show-sidebar #menu.able-client-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 1055 !important;
  }

  body.customers .able-client-top-header {
    left: 0 !important;
    padding: 0 16px !important;
  }

  body.customers #wrapper {
    margin-left: 0 !important;
    margin-top: 70px !important;
  }

  body.customers .footer {
    margin-left: 0 !important;
  }

  .able-sidebar-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1048 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease !important;
  }

  body.customers.show-sidebar .able-sidebar-backdrop {
    display: block !important;
    opacity: 1 !important;
  }
}

/* 6. Dark Mode Overrides for Client Sidebar & Header */
html.dark-mode body.customers #menu.able-client-sidebar,
body.customers.dark-mode #menu.able-client-sidebar,
[data-theme="dark"] body.customers #menu.able-client-sidebar {
  background: #141822 !important;
  border-right-color: #2E3844 !important;
}

html.dark-mode .able-client-brand-header,
body.customers.dark-mode .able-client-brand-header,
[data-theme="dark"] .able-client-brand-header {
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .able-client-logo-text,
body.customers.dark-mode .able-client-logo-text,
[data-theme="dark"] .able-client-logo-text {
  color: #FFFFFF !important;
}

html.dark-mode .able-client-sidebar-user,
body.customers.dark-mode .able-client-sidebar-user,
[data-theme="dark"] .able-client-sidebar-user {
  background: #0E121B !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-client-sidebar-user-name,
body.customers.dark-mode .able-client-sidebar-user-name,
[data-theme="dark"] .able-client-sidebar-user-name {
  color: #F8FAFC !important;
}

html.dark-mode .able-client-sidebar-user-company,
body.customers.dark-mode .able-client-sidebar-user-company,
[data-theme="dark"] .able-client-sidebar-user-company {
  color: #94A3B8 !important;
}

html.dark-mode .modern-nav-subheader,
body.customers.dark-mode .modern-nav-subheader,
[data-theme="dark"] .modern-nav-subheader {
  color: #64748B !important;
}

html.dark-mode .able-client-nav-menu>li>a.modern-nav-link,
body.customers.dark-mode .able-client-nav-menu>li>a.modern-nav-link,
[data-theme="dark"] .able-client-nav-menu>li>a.modern-nav-link {
  color: #94A3B8 !important;
}

html.dark-mode .able-client-nav-menu>li>a.modern-nav-link:hover,
body.customers.dark-mode .able-client-nav-menu>li>a.modern-nav-link:hover,
[data-theme="dark"] .able-client-nav-menu>li>a.modern-nav-link:hover {
  background: #1E2533 !important;
  color: var(--able-primary, #4680FF) !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-client-nav-menu>li.active>a.modern-nav-link,
body.customers.dark-mode .able-client-nav-menu>li.active>a.modern-nav-link,
[data-theme="dark"] .able-client-nav-menu>li.active>a.modern-nav-link {
  background: rgba(70, 128, 255, 0.18) !important;
  color: var(--able-primary, #4680FF) !important;
}

html.dark-mode .able-client-sidebar-footer,
body.customers.dark-mode .able-client-sidebar-footer,
[data-theme="dark"] .able-client-sidebar-footer {
  border-top-color: #2E3844 !important;
  background: #141822 !important;
}

html.dark-mode .able-client-top-header,
body.customers.dark-mode .able-client-top-header,
[data-theme="dark"] .able-client-top-header {
  background: rgba(19, 25, 32, 0.9) !important;
  border-bottom-color: #2E3844 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-client-header-company,
body.customers.dark-mode .able-client-header-company,
[data-theme="dark"] .able-client-header-company {
  color: #FFFFFF !important;
}

html.dark-mode .able-client-header-tag,
body.customers.dark-mode .able-client-header-tag,
[data-theme="dark"] .able-client-header-tag {
  color: #94A3B8 !important;
}


/* ==========================================================================
   ABLE PRO CLIENT DASHBOARD - MODERN WIDGETS (PROJECTS, INVOICES & CHART)
   ========================================================================== */

/* 1. Projects KPI Grid */
.able-projects-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

@media (max-width: 1200px) {
  .able-projects-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .able-projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .able-projects-grid {
    grid-template-columns: 1fr !important;
  }
}

.able-project-card {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-top: 3.5px solid var(--status-color, var(--able-primary, #4680FF)) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

.able-project-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(19, 25, 32, 0.08) !important;
  border-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  text-decoration: none !important;
}

.able-project-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.able-project-status-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-muted, #64748B) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.able-project-icon-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.able-project-card:hover .able-project-icon-box {
  transform: scale(1.08) !important;
}

.able-project-card-body {
  margin-top: 12px !important;
}

.able-project-count {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
}

.able-project-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.able-project-view-pill {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--status-color, var(--able-primary, #4680FF)) !important;
  display: inline-flex !important;
  align-items: center !important;
  opacity: 0.75 !important;
  transition: opacity 0.15s ease !important;
}

.able-project-card:hover .able-project-view-pill {
  opacity: 1 !important;
}

/* 2. Invoices KPI Grid */
.able-invoices-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.able-invoices-stats-grid:before,
.able-invoices-stats-grid:after,
.able-projects-grid:before,
.able-projects-grid:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.able-invoices-stats-grid>.able-kpi-col,
.able-invoices-stats-grid>[class*="col-"],
.able-invoices-stats-grid>div {
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .able-invoices-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .able-invoices-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.able-kpi-card {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03) !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.able-kpi-card>.v-card-text,
.able-kpi-card .v-card-text,
.able-kpi-card .v-card-text.pa-5 {
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.able-widget-sheet {
  width: 100% !important;
  box-sizing: border-box !important;
}

.able-kpi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(19, 25, 32, 0.08) !important;
  text-decoration: none !important;
}

.able-kpi-card:focus,
.able-project-card:focus,
.able-kpi-card:active,
.able-project-card:active {
  outline: none !important;
  text-decoration: none !important;
}

.able-kpi-card.card-unpaid:hover,
.able-kpi-card.card-unpaid:focus {
  border-color: #FF4D4F !important;
}

.able-kpi-card.card-paid:hover,
.able-kpi-card.card-paid:focus {
  border-color: #2CA87F !important;
}

.able-kpi-card.card-overdue:hover,
.able-kpi-card.card-overdue:focus {
  border-color: #E58A00 !important;
}

.able-kpi-card.card-partially-paid:hover,
.able-kpi-card.card-partially-paid:focus {
  border-color: #4680FF !important;
}

.able-kpi-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.able-kpi-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  flex-shrink: 0 !important;
}

.able-kpi-avatar.bg-rose-subtle {
  background: #FFF1F0 !important;
}

.able-kpi-avatar.bg-emerald-subtle {
  background: #E6F7ED !important;
}

.able-kpi-avatar.bg-amber-subtle {
  background: #FFF7E6 !important;
}

.able-kpi-avatar.bg-primary-subtle {
  background: #E9F0FF !important;
}

.text-rose {
  color: #FF4D4F !important;
}

.text-emerald {
  color: #2CA87F !important;
}

.text-amber {
  color: #E58A00 !important;
}

.able-kpi-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
}

.able-kpi-badge.badge-rose {
  color: #FF4D4F !important;
  background: rgba(255, 77, 79, 0.12) !important;
}

.able-kpi-badge.badge-emerald {
  color: #2CA87F !important;
  background: rgba(44, 168, 127, 0.12) !important;
}

.able-kpi-badge.badge-amber {
  color: #E58A00 !important;
  background: rgba(229, 138, 0, 0.12) !important;
}

.able-kpi-badge.badge-primary {
  color: #4680FF !important;
  background: rgba(70, 128, 255, 0.12) !important;
}

.able-kpi-card-body {
  margin-top: 14px !important;
}

.able-kpi-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #64748B) !important;
  display: block !important;
}

.able-kpi-number-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.able-kpi-value {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--able-text, #1E293B);
}

.able-kpi-total {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #94A3B8) !important;
}

.able-kpi-progress-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--able-bg, #F1F5F9) !important;
  overflow: hidden !important;
  margin-top: 14px !important;
  width: 100% !important;
}

.able-kpi-progress-bar {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.able-kpi-progress-bar.progress-rose {
  background: linear-gradient(90deg, #FF4D4F, #FF7875) !important;
}

.able-kpi-progress-bar.progress-emerald {
  background: linear-gradient(90deg, #2CA87F, #40C097) !important;
}

.able-kpi-progress-bar.progress-amber {
  background: linear-gradient(90deg, #E58A00, #FFC069) !important;
}

.able-kpi-progress-bar.progress-primary {
  background: linear-gradient(90deg, #4680FF, #69A0FF) !important;
}

/* 3. Annual Invoices Chart Card */
.able-chart-card {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(19, 25, 32, 0.03) !important;
  overflow: hidden !important;
  margin-top: 20px !important;
}

.able-chart-card .panel-body {
  padding: 0 !important;
}

.able-chart-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--able-border, #E8EBEE) !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.able-chart-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.able-chart-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  margin: 0 !important;
  letter-spacing: -0.2px !important;
}

.able-chart-subtitle {
  font-size: 12.5px !important;
  color: var(--able-text-muted, #64748B) !important;
  margin: 0 !important;
}

.able-chart-controls {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.able-select-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.able-select-wrap .bootstrap-select .btn-default {
  background: var(--able-bg, #F8F9FA) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 8px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text, #1E293B) !important;
  padding: 6px 12px !important;
}

.able-select-wrap .bootstrap-select .btn-default:hover,
.able-select-wrap .bootstrap-select.open .btn-default {
  border-color: var(--able-primary, #4680FF) !important;
}

.able-chart-canvas-container {
  padding: 16px 22px 20px 22px !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES - DASHBOARD WIDGETS
   ========================================================================== */

html.dark-mode .able-project-card,
body.customers.dark-mode .able-project-card,
[data-theme="dark"] .able-project-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  border-top-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .able-project-card:hover,
body.customers.dark-mode .able-project-card:hover,
[data-theme="dark"] .able-project-card:hover {
  border-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-project-status-name,
body.customers.dark-mode .able-project-status-name,
[data-theme="dark"] .able-project-status-name {
  color: #94A3B8 !important;
}

html.dark-mode .able-project-count,
body.customers.dark-mode .able-project-count,
[data-theme="dark"] .able-project-count {
  color: #F8FAFC !important;
}

html.dark-mode .able-kpi-card,
body.customers.dark-mode .able-kpi-card,
[data-theme="dark"] .able-kpi-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .able-kpi-avatar.bg-rose-subtle,
body.customers.dark-mode .able-kpi-avatar.bg-rose-subtle {
  background: rgba(255, 77, 79, 0.16) !important;
}

html.dark-mode .able-kpi-avatar.bg-emerald-subtle,
body.customers.dark-mode .able-kpi-avatar.bg-emerald-subtle {
  background: rgba(44, 168, 127, 0.16) !important;
}

html.dark-mode .able-kpi-avatar.bg-amber-subtle,
body.customers.dark-mode .able-kpi-avatar.bg-amber-subtle {
  background: rgba(229, 138, 0, 0.16) !important;
}

html.dark-mode .able-kpi-avatar.bg-primary-subtle,
body.customers.dark-mode .able-kpi-avatar.bg-primary-subtle {
  background: rgba(70, 128, 255, 0.16) !important;
}

html.dark-mode .able-kpi-label,
body.customers.dark-mode .able-kpi-label,
[data-theme="dark"] .able-kpi-label {
  color: #94A3B8 !important;
}

html.dark-mode .able-kpi-value,
body.customers.dark-mode .able-kpi-value,
[data-theme="dark"] .able-kpi-value {
  color: #F8FAFC !important;
}

html.dark-mode .able-kpi-total,
body.customers.dark-mode .able-kpi-total,
[data-theme="dark"] .able-kpi-total {
  color: #64748B !important;
}

html.dark-mode .able-kpi-progress-track,
body.customers.dark-mode .able-kpi-progress-track,
[data-theme="dark"] .able-kpi-progress-track {
  background: #0E121B !important;
}

html.dark-mode .able-chart-card,
body.customers.dark-mode .able-chart-card,
[data-theme="dark"] .able-chart-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-chart-card-header,
body.customers.dark-mode .able-chart-card-header,
[data-theme="dark"] .able-chart-card-header {
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .able-chart-title,
body.customers.dark-mode .able-chart-title,
[data-theme="dark"] .able-chart-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-chart-subtitle,
body.customers.dark-mode .able-chart-subtitle,
[data-theme="dark"] .able-chart-subtitle {
  color: #94A3B8 !important;
}

html.dark-mode .able-select-wrap .bootstrap-select .btn-default,
body.customers.dark-mode .able-select-wrap .bootstrap-select .btn-default,
[data-theme="dark"] .able-select-wrap .bootstrap-select .btn-default {
  background: #1E2533 !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

/* ==========================================================================
   ABLE PRO - KNOWLEDGE BASE (BASE DE CONOCIMIENTO)
   ========================================================================== */

.kb-search-jumbotron,
.jumbotron.kb-search-jumbotron {
  background: transparent !important;
  padding: 0 !important;
  margin-top: -10px !important;
  margin-bottom: 24px !important;
  border: none !important;
}

.able-kb-hero-wrapper {
  margin-top: -10px;
  margin-bottom: 26px;
  width: 100%;
}

.able-kb-hero {
  background: linear-gradient(135deg, rgba(70, 128, 255, 0.05) 0%, rgba(114, 103, 239, 0.04) 100%), var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 16px;
  padding: 38px 24px 34px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(19, 25, 32, 0.03);
}

.able-kb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(70, 128, 255, 0.1);
  color: var(--able-primary, #4680FF);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.able-kb-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0 0 10px 0;
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.able-kb-subtitle {
  font-size: 14.5px;
  color: var(--able-text-muted, #64748B);
  max-width: 620px;
  margin: 0 auto 26px auto;
  line-height: 1.5;
}

.able-kb-search-box {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

.able-kb-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--able-surface, #FFFFFF);
  border: 1.5px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  padding: 5px 6px 5px 44px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

.able-kb-input-wrap:focus-within {
  border-color: var(--able-primary, #4680FF);
  box-shadow: 0 0 0 3px rgba(70, 128, 255, 0.15);
}

.able-kb-input-icon {
  position: absolute;
  left: 16px;
  color: var(--able-text-muted, #94A3B8);
  font-size: 16px;
  pointer-events: none;
}

.able-kb-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  height: 42px !important;
  font-size: 15px !important;
  color: var(--able-text, #1E293B) !important;
  width: 100% !important;
  padding: 0 10px 0 0 !important;
}

.able-kb-input::placeholder {
  color: var(--able-text-muted, #94A3B8);
}

.able-kb-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--able-text-muted, #94A3B8);
  background: rgba(0, 0, 0, 0.05);
  margin-right: 8px;
  transition: all 0.2s ease;
  text-decoration: none !important;
  flex-shrink: 0;
}

.able-kb-clear-btn:hover {
  color: #FF4D4F;
  background: rgba(255, 77, 79, 0.12);
}

.able-kb-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--able-primary, #4680FF);
  color: #FFFFFF !important;
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.able-kb-submit-btn:hover {
  background: #2563EB;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.3);
}

/* Empty State Card */
.able-kb-empty-card {
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 14px;
  padding: 50px 24px;
  text-align: center;
  max-width: 580px;
  margin: 10px auto 40px auto;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.03);
}

.able-kb-empty-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(70, 128, 255, 0.1);
  color: var(--able-primary, #4680FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}

.able-kb-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0 0 8px 0;
}

.able-kb-empty-text {
  font-size: 14px;
  color: var(--able-text-muted, #64748B);
  line-height: 1.5;
  margin: 0 auto 24px auto;
  max-width: 440px;
}

.able-kb-empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Categories Grid */
.able-kb-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
}

.able-kb-category-card {
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03);
}

.able-kb-category-card:hover {
  transform: translateY(-3px);
  border-color: var(--able-primary, #4680FF);
  box-shadow: 0 10px 24px rgba(70, 128, 255, 0.08);
}

.able-kb-category-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.able-kb-category-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--able-primary, #4680FF);
  background: rgba(70, 128, 255, 0.1);
}

.able-kb-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--able-bg, #F8F9FA);
  color: var(--able-text-muted, #64748B);
  border: 1px solid var(--able-border, #E8EBEE);
}

.able-kb-category-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.able-kb-category-title a {
  color: var(--able-text, #1E293B);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.able-kb-category-title a:hover {
  color: var(--able-primary, #4680FF);
}

.able-kb-category-desc {
  font-size: 13.5px;
  color: var(--able-text-muted, #64748B);
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.able-kb-preview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  border-top: 1px dashed var(--able-border, #E8EBEE);
  padding-top: 12px;
}

.able-kb-preview-list li {
  margin-bottom: 8px;
}

.able-kb-preview-list li:last-child {
  margin-bottom: 0;
}

.able-kb-preview-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--able-text-muted, #64748B);
  text-decoration: none !important;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.able-kb-preview-list a i {
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}

.able-kb-preview-list a:hover {
  color: var(--able-primary, #4680FF);
}

.able-kb-category-footer {
  border-top: 1px solid var(--able-border, #E8EBEE);
  padding-top: 14px;
  margin-top: auto;
}

.able-kb-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--able-primary, #4680FF);
  text-decoration: none !important;
  transition: gap 0.2s ease;
}

.able-kb-category-link:hover i {
  transform: translateX(4px);
}

/* Articles List View */
.able-kb-articles-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.able-kb-article-card {
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(19, 25, 32, 0.02);
  text-decoration: none !important;
}

.able-kb-article-card:hover {
  border-color: var(--able-primary, #4680FF);
  box-shadow: 0 8px 20px rgba(70, 128, 255, 0.08);
  transform: translateY(-2px);
}

.able-kb-article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(70, 128, 255, 0.08);
  color: var(--able-primary, #4680FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.able-kb-article-content {
  flex: 1;
  min-width: 0;
}

.able-kb-article-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.able-kb-article-title {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.able-kb-article-title a {
  color: var(--able-text, #1E293B);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.able-kb-article-card:hover .able-kb-article-title a {
  color: var(--able-primary, #4680FF);
}

.able-kb-article-date {
  font-size: 12px;
  color: var(--able-text-muted, #94A3B8);
  white-space: nowrap;
}

.able-kb-article-excerpt {
  font-size: 13.5px;
  color: var(--able-text-muted, #64748B);
  margin: 0;
  line-height: 1.45;
}

.able-kb-article-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--able-bg, #F8F9FA);
  color: var(--able-text-muted, #64748B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.able-kb-article-card:hover .able-kb-article-action-btn {
  background: var(--able-primary, #4680FF);
  color: #FFFFFF;
}

/* Single Article Card */
.able-kb-single-card {
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(19, 25, 32, 0.03);
}

.able-kb-single-header {
  border-bottom: 1px solid var(--able-border, #E8EBEE);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.able-kb-single-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0 0 10px 0;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.able-kb-single-meta {
  font-size: 12.5px;
  color: var(--able-text-muted, #94A3B8);
  display: flex;
  align-items: center;
  gap: 14px;
}

.able-kb-single-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--able-text, #334155);
  margin-bottom: 30px;
}

.able-kb-single-content p {
  margin-bottom: 16px;
}

.able-kb-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.able-kb-feedback-container {
  border-top: 1px solid var(--able-border, #E8EBEE);
  padding-top: 22px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.able-kb-feedback-header {
  display: flex;
  align-items: center;
}

.able-kb-feedback-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--able-text, #1E293B);
  margin: 0;
}

.able-kb-feedback-btn-group {
  display: flex;
  gap: 10px;
}

.able-kb-feedback-btn {
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text, #1E293B) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.able-kb-feedback-yes:hover {
  border-color: #2CA87F !important;
  color: #2CA87F !important;
  background: rgba(44, 168, 127, 0.08) !important;
}

.able-kb-feedback-no:hover {
  border-color: #FF4D4F !important;
  color: #FF4D4F !important;
  background: rgba(255, 77, 79, 0.08) !important;
}

/* Sidebar Cards */
.able-kb-sidebar-card {
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03);
}

.able-kb-sidebar-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--able-border, #E8EBEE);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.able-kb-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0;
}

.able-kb-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.able-kb-related-item {
  border-bottom: 1px dashed var(--able-border, #E8EBEE);
  padding-bottom: 12px;
}

.able-kb-related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.able-kb-related-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.35;
}

.able-kb-related-heading a {
  color: var(--able-text, #1E293B);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.able-kb-related-heading a:hover {
  color: var(--able-primary, #4680FF);
}

.able-kb-related-excerpt {
  font-size: 12.5px;
  color: var(--able-text-muted, #64748B);
  margin: 0;
  line-height: 1.4;
}

.able-kb-help-card {
  background: linear-gradient(135deg, rgba(70, 128, 255, 0.06) 0%, rgba(114, 103, 239, 0.04) 100%), var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03);
}

.able-kb-help-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(70, 128, 255, 0.1);
  color: var(--able-primary, #4680FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.able-kb-help-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0 0 6px 0;
}

.able-kb-help-desc {
  font-size: 13px;
  color: var(--able-text-muted, #64748B);
  margin: 0 0 16px 0;
  line-height: 1.45;
}

/* Nav & Header Actions */
.able-kb-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--able-text-muted, #64748B);
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.able-kb-back-btn:hover {
  color: var(--able-primary, #4680FF);
  transform: translateX(-2px);
}

.able-kb-category-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.able-kb-category-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0;
  display: flex;
  align-items: center;
}

.able-kb-count-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 12px;
  background: var(--able-bg, #F8F9FA);
  color: var(--able-text-muted, #64748B);
  border: 1px solid var(--able-border, #E8EBEE);
}

.able-kb-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.able-kb-results-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0;
  display: flex;
  align-items: center;
}

.able-kb-btn-outline {
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text, #1E293B) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  transition: all 0.15s ease !important;
}

.able-kb-btn-outline:hover {
  border-color: var(--able-primary, #4680FF) !important;
  color: var(--able-primary, #4680FF) !important;
}

.able-kb-btn-primary {
  background: var(--able-primary, #4680FF) !important;
  border-color: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 8px 18px !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.25) !important;
  transition: all 0.15s ease !important;
}

.able-kb-btn-primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES - KNOWLEDGE BASE
   ========================================================================== */

html.dark-mode .kb-search-jumbotron,
body.customers.dark-mode .kb-search-jumbotron,
[data-theme="dark"] .kb-search-jumbotron {
  background: transparent !important;
}

html.dark-mode .able-kb-hero,
body.customers.dark-mode .able-kb-hero,
[data-theme="dark"] .able-kb-hero {
  background: linear-gradient(135deg, rgba(70, 128, 255, 0.08) 0%, rgba(20, 24, 34, 0.95) 100%), #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-kb-badge,
body.customers.dark-mode .able-kb-badge,
[data-theme="dark"] .able-kb-badge {
  background: rgba(70, 128, 255, 0.16) !important;
  color: #70A1FF !important;
}

html.dark-mode .able-kb-title,
body.customers.dark-mode .able-kb-title,
[data-theme="dark"] .able-kb-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-subtitle,
body.customers.dark-mode .able-kb-subtitle,
[data-theme="dark"] .able-kb-subtitle {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-input-wrap,
body.customers.dark-mode .able-kb-input-wrap,
[data-theme="dark"] .able-kb-input-wrap {
  background: #1A202C !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-kb-input,
body.customers.dark-mode .able-kb-input,
[data-theme="dark"] .able-kb-input {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-input::placeholder,
body.customers.dark-mode .able-kb-input::placeholder,
[data-theme="dark"] .able-kb-input::placeholder {
  color: #64748B !important;
}

html.dark-mode .able-kb-input-icon,
body.customers.dark-mode .able-kb-input-icon,
[data-theme="dark"] .able-kb-input-icon {
  color: #64748B !important;
}

html.dark-mode .able-kb-clear-btn,
body.customers.dark-mode .able-kb-clear-btn,
[data-theme="dark"] .able-kb-clear-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-empty-card,
body.customers.dark-mode .able-kb-empty-card,
[data-theme="dark"] .able-kb-empty-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kb-empty-title,
body.customers.dark-mode .able-kb-empty-title,
[data-theme="dark"] .able-kb-empty-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-empty-text,
body.customers.dark-mode .able-kb-empty-text,
[data-theme="dark"] .able-kb-empty-text {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-category-card,
body.customers.dark-mode .able-kb-category-card,
[data-theme="dark"] .able-kb-category-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kb-category-card:hover,
body.customers.dark-mode .able-kb-category-card:hover,
[data-theme="dark"] .able-kb-category-card:hover {
  border-color: #4680FF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-kb-category-title a,
body.customers.dark-mode .able-kb-category-title a,
[data-theme="dark"] .able-kb-category-title a {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-category-title a:hover,
body.customers.dark-mode .able-kb-category-title a:hover,
[data-theme="dark"] .able-kb-category-title a:hover {
  color: #70A1FF !important;
}

html.dark-mode .able-kb-category-desc,
body.customers.dark-mode .able-kb-category-desc,
[data-theme="dark"] .able-kb-category-desc {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-preview-list,
body.customers.dark-mode .able-kb-preview-list,
[data-theme="dark"] .able-kb-preview-list {
  border-top-color: #2E3844 !important;
}

html.dark-mode .able-kb-preview-list a,
body.customers.dark-mode .able-kb-preview-list a,
[data-theme="dark"] .able-kb-preview-list a {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-preview-list a:hover,
body.customers.dark-mode .able-kb-preview-list a:hover,
[data-theme="dark"] .able-kb-preview-list a:hover {
  color: #70A1FF !important;
}

html.dark-mode .able-kb-category-footer,
body.customers.dark-mode .able-kb-category-footer,
[data-theme="dark"] .able-kb-category-footer {
  border-top-color: #2E3844 !important;
}

html.dark-mode .able-kb-badge-pill,
body.customers.dark-mode .able-kb-badge-pill,
[data-theme="dark"] .able-kb-badge-pill,
html.dark-mode .able-kb-count-pill,
body.customers.dark-mode .able-kb-count-pill,
[data-theme="dark"] .able-kb-count-pill {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-article-card,
body.customers.dark-mode .able-kb-article-card,
[data-theme="dark"] .able-kb-article-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kb-article-card:hover,
body.customers.dark-mode .able-kb-article-card:hover,
[data-theme="dark"] .able-kb-article-card:hover {
  border-color: #4680FF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-kb-article-title a,
body.customers.dark-mode .able-kb-article-title a,
[data-theme="dark"] .able-kb-article-title a {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-article-card:hover .able-kb-article-title a,
body.customers.dark-mode .able-kb-article-card:hover .able-kb-article-title a,
[data-theme="dark"] .able-kb-article-card:hover .able-kb-article-title a {
  color: #70A1FF !important;
}

html.dark-mode .able-kb-article-date,
body.customers.dark-mode .able-kb-article-date,
[data-theme="dark"] .able-kb-article-date {
  color: #64748B !important;
}

html.dark-mode .able-kb-article-excerpt,
body.customers.dark-mode .able-kb-article-excerpt,
[data-theme="dark"] .able-kb-article-excerpt {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-article-action-btn,
body.customers.dark-mode .able-kb-article-action-btn,
[data-theme="dark"] .able-kb-article-action-btn {
  background: #1A202C !important;
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-single-card,
body.customers.dark-mode .able-kb-single-card,
[data-theme="dark"] .able-kb-single-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .able-kb-single-header,
body.customers.dark-mode .able-kb-single-header,
[data-theme="dark"] .able-kb-single-header {
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .able-kb-single-heading,
body.customers.dark-mode .able-kb-single-heading,
[data-theme="dark"] .able-kb-single-heading,
html.dark-mode .able-kb-category-title,
body.customers.dark-mode .able-kb-category-title,
[data-theme="dark"] .able-kb-category-title,
html.dark-mode .able-kb-results-title,
body.customers.dark-mode .able-kb-results-title,
[data-theme="dark"] .able-kb-results-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-single-meta,
body.customers.dark-mode .able-kb-single-meta,
[data-theme="dark"] .able-kb-single-meta {
  color: #64748B !important;
}

html.dark-mode .able-kb-single-content,
body.customers.dark-mode .able-kb-single-content,
[data-theme="dark"] .able-kb-single-content,
html.dark-mode .able-kb-single-content p,
body.customers.dark-mode .able-kb-single-content p,
[data-theme="dark"] .able-kb-single-content p,
html.dark-mode .able-kb-single-content span,
body.customers.dark-mode .able-kb-single-content span,
[data-theme="dark"] .able-kb-single-content span,
html.dark-mode .able-kb-single-content li,
body.customers.dark-mode .able-kb-single-content li,
[data-theme="dark"] .able-kb-single-content li {
  color: #CBD5E1 !important;
}

html.dark-mode .able-kb-feedback-container,
body.customers.dark-mode .able-kb-feedback-container,
[data-theme="dark"] .able-kb-feedback-container {
  border-top-color: #2E3844 !important;
}

html.dark-mode .able-kb-feedback-title,
body.customers.dark-mode .able-kb-feedback-title,
[data-theme="dark"] .able-kb-feedback-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-feedback-btn,
body.customers.dark-mode .able-kb-feedback-btn,
[data-theme="dark"] .able-kb-feedback-btn {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-sidebar-card,
body.customers.dark-mode .able-kb-sidebar-card,
[data-theme="dark"] .able-kb-sidebar-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .able-kb-sidebar-header,
body.customers.dark-mode .able-kb-sidebar-header,
[data-theme="dark"] .able-kb-sidebar-header {
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .able-kb-sidebar-title,
body.customers.dark-mode .able-kb-sidebar-title,
[data-theme="dark"] .able-kb-sidebar-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-related-item,
body.customers.dark-mode .able-kb-related-item,
[data-theme="dark"] .able-kb-related-item {
  border-bottom-color: #2E3844 !important;
}

html.dark-mode .able-kb-related-heading a,
body.customers.dark-mode .able-kb-related-heading a,
[data-theme="dark"] .able-kb-related-heading a {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-related-heading a:hover,
body.customers.dark-mode .able-kb-related-heading a:hover,
[data-theme="dark"] .able-kb-related-heading a:hover {
  color: #70A1FF !important;
}

html.dark-mode .able-kb-related-excerpt,
body.customers.dark-mode .able-kb-related-excerpt,
[data-theme="dark"] .able-kb-related-excerpt {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-help-card,
body.customers.dark-mode .able-kb-help-card,
[data-theme="dark"] .able-kb-help-card {
  background: linear-gradient(135deg, rgba(70, 128, 255, 0.08) 0%, rgba(20, 24, 34, 0.95) 100%), #141822 !important;
  border-color: #2E3844 !important;
}

html.dark-mode .able-kb-help-title,
body.customers.dark-mode .able-kb-help-title,
[data-theme="dark"] .able-kb-help-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-help-desc,
body.customers.dark-mode .able-kb-help-desc,
[data-theme="dark"] .able-kb-help-desc {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-back-btn,
body.customers.dark-mode .able-kb-back-btn,
[data-theme="dark"] .able-kb-back-btn {
  color: #94A3B8 !important;
}

html.dark-mode .able-kb-back-btn:hover,
body.customers.dark-mode .able-kb-back-btn:hover,
[data-theme="dark"] .able-kb-back-btn:hover {
  color: #70A1FF !important;
}

html.dark-mode .able-kb-btn-outline,
body.customers.dark-mode .able-kb-btn-outline,
[data-theme="dark"] .able-kb-btn-outline {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-kb-btn-outline:hover,
body.customers.dark-mode .able-kb-btn-outline:hover,
[data-theme="dark"] .able-kb-btn-outline:hover {
  border-color: #4680FF !important;
  color: #4680FF !important;
}

/* ==========================================================================
   ABLE PRO - CLIENT PORTAL: SUBMENU PILLS, CONTRACTS, ESTIMATES & TICKETS
   ========================================================================== */

/* Submenu Pills (Archivos, Calendario, etc.) */
.modern-submenu-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-muted, #64748B) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(19, 25, 32, 0.03) !important;
  text-decoration: none !important;
}

.modern-submenu-pill:hover {
  border-color: var(--able-primary, #4680FF) !important;
  color: var(--able-primary, #4680FF) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.12) !important;
}

.modern-submenu-pill.active {
  background: var(--able-primary, #4680FF) !important;
  border-color: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.25) !important;
}

/* Common Section Headers & Cards */
.able-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.able-section-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.able-section-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: -0.2px !important;
}

.able-table-card {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(19, 25, 32, 0.03) !important;
  overflow: hidden !important;
}

.able-table-card .panel-body {
  padding: 20px 22px !important;
}

/* Contracts: Chart Empty State & Avatar */
.able-chart-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--able-primary, #4680FF);
  background: rgba(70, 128, 255, 0.1);
  flex-shrink: 0;
}

.able-chart-empty-wrap {
  padding: 44px 20px;
  text-align: center;
}

.able-chart-empty-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(70, 128, 255, 0.08);
  color: var(--able-primary, #4680FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}

.able-chart-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin: 0 0 6px 0;
}

.able-chart-empty-desc {
  font-size: 13.5px;
  color: var(--able-text-muted, #64748B);
  margin: 0;
}

/* Estimates KPI Grid */
.able-estimates-stats-grid {
  display: grid !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.able-estimates-stats-grid.has-4-cols {
  grid-template-columns: repeat(4, 1fr) !important;
}

.able-estimates-stats-grid.has-5-cols {
  grid-template-columns: repeat(5, 1fr) !important;
}

.able-estimates-stats-grid:before,
.able-estimates-stats-grid:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.able-estimates-stats-grid>.able-kpi-col,
.able-estimates-stats-grid>[class*="col-"],
.able-estimates-stats-grid>div {
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 1199px) {
  .able-estimates-stats-grid.has-5-cols {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 991px) {

  .able-estimates-stats-grid.has-4-cols,
  .able-estimates-stats-grid.has-5-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {

  .able-estimates-stats-grid.has-4-cols,
  .able-estimates-stats-grid.has-5-cols {
    grid-template-columns: 1fr !important;
  }
}

/* Estimates Card hover border accents */
.able-kpi-card.card-draft:hover,
.able-kpi-card.card-draft:focus {
  border-color: #64748B !important;
}

.able-kpi-card.card-sent:hover,
.able-kpi-card.card-sent:focus {
  border-color: #4680FF !important;
}

.able-kpi-card.card-expired:hover,
.able-kpi-card.card-expired:focus {
  border-color: #E58A00 !important;
}

.able-kpi-card.card-declined:hover,
.able-kpi-card.card-declined:focus {
  border-color: #FF4D4F !important;
}

.able-kpi-card.card-accepted:hover,
.able-kpi-card.card-accepted:focus {
  border-color: #2CA87F !important;
}

/* Progress bar bg helpers */
.bg-slate {
  background-color: #64748B !important;
}

.bg-slate-subtle {
  background: rgba(100, 116, 139, 0.12) !important;
  color: #64748B !important;
}

/* Tickets Grid & Status Cards */
.able-tickets-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (max-width: 1199px) {
  .able-tickets-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .able-tickets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .able-tickets-grid {
    grid-template-columns: 1fr !important;
  }
}

.able-ticket-status-card {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-top: 3px solid var(--status-color, var(--able-primary, #4680FF)) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(19, 25, 32, 0.03) !important;
  height: 100% !important;
}

.able-ticket-status-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 10px 24px rgba(19, 25, 32, 0.08) !important;
  text-decoration: none !important;
}

.able-ticket-status-card.is-active {
  border-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 0 0 2px rgba(70, 128, 255, 0.2) !important;
}

.able-ticket-status-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.able-ticket-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.able-ticket-status-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--able-text-muted, #64748B) !important;
  line-height: 1.3 !important;
}

.able-ticket-status-count-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.able-ticket-status-count {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}

.able-ticket-view-pill {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-text-muted, #94A3B8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
}

.able-ticket-status-card:hover .able-ticket-view-pill {
  opacity: 1 !important;
  background: var(--status-color, var(--able-primary, #4680FF)) !important;
  color: #FFFFFF !important;
  transform: translateX(2px) !important;
}

.able-new-ticket-btn {
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(70, 128, 255, 0.25) !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES - CONTRACTS, ESTIMATES & TICKETS
   ========================================================================== */

html.dark-mode .modern-submenu-pill,
body.customers.dark-mode .modern-submenu-pill,
[data-theme="dark"] .modern-submenu-pill {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #94A3B8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .modern-submenu-pill:hover,
body.customers.dark-mode .modern-submenu-pill:hover,
[data-theme="dark"] .modern-submenu-pill:hover {
  border-color: #4680FF !important;
  color: #70A1FF !important;
}

html.dark-mode .modern-submenu-pill.active,
body.customers.dark-mode .modern-submenu-pill.active,
[data-theme="dark"] .modern-submenu-pill.active {
  background: #4680FF !important;
  border-color: #4680FF !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-section-title,
body.customers.dark-mode .able-section-title,
[data-theme="dark"] .able-section-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-table-card,
body.customers.dark-mode .able-table-card,
[data-theme="dark"] .able-table-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .able-chart-empty-avatar,
body.customers.dark-mode .able-chart-empty-avatar,
[data-theme="dark"] .able-chart-empty-avatar {
  background: rgba(70, 128, 255, 0.16) !important;
}

html.dark-mode .able-chart-empty-title,
body.customers.dark-mode .able-chart-empty-title,
[data-theme="dark"] .able-chart-empty-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-chart-empty-desc,
body.customers.dark-mode .able-chart-empty-desc,
[data-theme="dark"] .able-chart-empty-desc {
  color: #94A3B8 !important;
}

html.dark-mode .able-ticket-status-card,
body.customers.dark-mode .able-ticket-status-card,
[data-theme="dark"] .able-ticket-status-card {
  background: #141822 !important;
  border-color: #2E3844 !important;
  border-top-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .able-ticket-status-card:hover,
body.customers.dark-mode .able-ticket-status-card:hover,
[data-theme="dark"] .able-ticket-status-card:hover {
  border-color: var(--status-color, var(--able-primary, #4680FF)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .able-ticket-status-name,
body.customers.dark-mode .able-ticket-status-name,
[data-theme="dark"] .able-ticket-status-name {
  color: #94A3B8 !important;
}

html.dark-mode .able-ticket-status-count,
body.customers.dark-mode .able-ticket-status-count,
[data-theme="dark"] .able-ticket-status-count {
  color: #F8FAFC !important;
}

html.dark-mode .able-ticket-view-pill,
body.customers.dark-mode .able-ticket-view-pill,
[data-theme="dark"] .able-ticket-view-pill {
  background: #1E2533 !important;
  color: #94A3B8 !important;
}

/* ==========================================================================
   ABLE PRO - CLIENT CALENDAR & FULLCALENDAR MODERNIZATION
   ========================================================================== */

/* Calendar Card & Legend */
.able-calendar-card {
  overflow: hidden !important;
}

.able-calendar-card .panel-body.able-calendar-body {
  padding: 24px !important;
}

.able-calendar-legend {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.able-calendar-legend-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--able-text-muted, #64748B) !important;
}

.able-calendar-legend-item .legend-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* Annulling forced scrollbar on calendar view */
.fc-view,
#calendar .fc-view {
  overflow: visible !important;
}

/* FullCalendar Container & Theme */
#calendar {
  --fc-page-bg-color: transparent;
  --fc-border-color: var(--able-border, #E8EBEE);
  --fc-neutral-bg-color: #F8F9FA;
  font-family: inherit !important;
}

/* Toolbar Controls */
#calendar .fc-header-toolbar,
.fc .fc-toolbar.fc-header-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

#calendar .fc-toolbar-title,
.fc .fc-toolbar-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  letter-spacing: -0.3px !important;
  text-transform: capitalize !important;
  margin: 0 !important;
}

/* Navigation & View Switcher Buttons */
#calendar .fc-button-group,
.fc .fc-button-group {
  display: inline-flex !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  box-shadow: 0 1px 3px rgba(19, 25, 32, 0.03) !important;
}

#calendar .fc-button,
.fc .fc-button {
  background: var(--able-surface, #FFFFFF) !important;
  border: none !important;
  color: var(--able-text, #1E293B) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 15px !important;
  text-transform: capitalize !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
}

#calendar .fc-button:hover,
.fc .fc-button:hover {
  background: var(--able-bg, #F8F9FA) !important;
  color: var(--able-primary, #4680FF) !important;
}

#calendar .fc-button-primary.fc-button-active,
.fc .fc-button-primary.fc-button-active,
#calendar .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(70, 128, 255, 0.25) !important;
}

#calendar .fc-today-button,
.fc .fc-today-button {
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  margin-left: 8px !important;
}

/* Column Header (Days of week) */
#calendar .fc-col-header-cell,
.fc .fc-col-header-cell {
  background: var(--able-bg, #F8F9FA) !important;
  border-color: var(--able-border, #E8EBEE) !important;
  padding: 10px 4px !important;
}

#calendar .fc-col-header-cell-cushion,
.fc .fc-col-header-cell-cushion {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--able-text-muted, #64748B) !important;
  text-decoration: none !important;
}

/* Grid Table & Day Cells */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th,
#calendar .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
  border-color: var(--able-border, #E8EBEE) !important;
}

#calendar .fc-daygrid-day-frame,
.fc .fc-daygrid-day-frame {
  min-height: 105px !important;
  padding: 4px !important;
}

#calendar .fc-daygrid-day,
.fc .fc-daygrid-day {
  background: var(--able-surface, #FFFFFF) !important;
  transition: background 0.15s ease !important;
}

/* Day Numbers */
#calendar .fc-daygrid-day-number,
.fc .fc-daygrid-day-number {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--able-text, #1E293B) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
}

/* TODAY Cell Styling */
#calendar .fc-daygrid-day.fc-day-today,
.fc .fc-daygrid-day.fc-day-today {
  background: rgba(70, 128, 255, 0.04) !important;
}

#calendar .fc-day-today .fc-daygrid-day-number,
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--able-primary, #4680FF) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  margin: 3px !important;
  box-shadow: 0 2px 6px rgba(70, 128, 255, 0.35) !important;
}

/* OTHER MONTH / DISABLED DAY CELLS - LIGHT MODE */
#calendar .fc-day-other,
.fc .fc-day-other,
#calendar .fc-daygrid-day.fc-day-other,
.fc .fc-daygrid-day.fc-day-other,
#calendar .fc-day-other .fc-daygrid-day-frame,
.fc .fc-day-other .fc-daygrid-day-frame,
#calendar .fc-day-other .fc-daygrid-day-bg,
.fc .fc-day-other .fc-daygrid-day-bg,
#calendar .fc-day-disabled,
.fc .fc-day-disabled,
#calendar .fc-day-disabled .fc-daygrid-day-frame,
.fc .fc-day-disabled .fc-daygrid-day-frame {
  background: #F8F9FA !important;
}

#calendar .fc-day-other .fc-daygrid-day-top,
.fc .fc-day-other .fc-daygrid-day-top {
  opacity: 0.35 !important;
}

/* Event Pills */
#calendar .fc-event,
.fc .fc-event,
#calendar .fc-daygrid-event,
.fc .fc-daygrid-event {
  border: none !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
  margin: 2px 3px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}

#calendar .fc-event:hover,
.fc .fc-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES - FULLCALENDAR
   ========================================================================== */

html.dark-mode #calendar,
body.customers.dark-mode #calendar,
[data-theme="dark"] #calendar {
  --fc-page-bg-color: transparent;
  --fc-border-color: #242C38;
  --fc-neutral-bg-color: #0E121B;
}

html.dark-mode #calendar .fc-toolbar-title,
body.customers.dark-mode #calendar .fc-toolbar-title,
[data-theme="dark"] #calendar .fc-toolbar-title {
  color: #F8FAFC !important;
}

html.dark-mode #calendar .fc-button-group,
body.customers.dark-mode #calendar .fc-button-group,
[data-theme="dark"] #calendar .fc-button-group {
  border-color: #2E3844 !important;
}

html.dark-mode #calendar .fc-button,
body.customers.dark-mode #calendar .fc-button,
[data-theme="dark"] #calendar .fc-button {
  background: #141822 !important;
  color: #CBD5E1 !important;
  border-color: #2E3844 !important;
}

html.dark-mode #calendar .fc-button:hover,
body.customers.dark-mode #calendar .fc-button:hover,
[data-theme="dark"] #calendar .fc-button:hover {
  background: #1E2533 !important;
  color: #70A1FF !important;
}

html.dark-mode #calendar .fc-button-primary.fc-button-active,
body.customers.dark-mode #calendar .fc-button-primary.fc-button-active,
[data-theme="dark"] #calendar .fc-button-primary.fc-button-active {
  background: #4680FF !important;
  color: #FFFFFF !important;
}

html.dark-mode #calendar .fc-today-button,
body.customers.dark-mode #calendar .fc-today-button,
[data-theme="dark"] #calendar .fc-today-button {
  background: #141822 !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode #calendar .fc-col-header-cell,
body.customers.dark-mode #calendar .fc-col-header-cell,
[data-theme="dark"] #calendar .fc-col-header-cell {
  background: #10141D !important;
  border-color: #242C38 !important;
}

html.dark-mode #calendar .fc-col-header-cell-cushion,
body.customers.dark-mode #calendar .fc-col-header-cell-cushion,
[data-theme="dark"] #calendar .fc-col-header-cell-cushion {
  color: #94A3B8 !important;
}

html.dark-mode #calendar .fc-theme-standard td,
body.customers.dark-mode #calendar .fc-theme-standard td,
[data-theme="dark"] #calendar .fc-theme-standard td,
html.dark-mode #calendar .fc-theme-standard th,
body.customers.dark-mode #calendar .fc-theme-standard th,
[data-theme="dark"] #calendar .fc-theme-standard th,
html.dark-mode #calendar .fc-scrollgrid,
body.customers.dark-mode #calendar .fc-scrollgrid,
[data-theme="dark"] #calendar .fc-scrollgrid {
  border-color: #242C38 !important;
}

html.dark-mode #calendar .fc-daygrid-day,
body.customers.dark-mode #calendar .fc-daygrid-day,
[data-theme="dark"] #calendar .fc-daygrid-day {
  background: #141822 !important;
}

html.dark-mode #calendar .fc-daygrid-day-number,
body.customers.dark-mode #calendar .fc-daygrid-day-number,
[data-theme="dark"] #calendar .fc-daygrid-day-number {
  color: #CBD5E1 !important;
}

/* FIX CRÍTICO: CELDAS DE OTROS MESES EN MODO OSCURO (ELIMINA EL FONDO BLANCO) */
html.dark-mode #calendar .fc-day-other,
body.customers.dark-mode #calendar .fc-day-other,
[data-theme="dark"] #calendar .fc-day-other,
html.dark-mode #calendar .fc-daygrid-day.fc-day-other,
body.customers.dark-mode #calendar .fc-daygrid-day.fc-day-other,
[data-theme="dark"] #calendar .fc-daygrid-day.fc-day-other,
html.dark-mode #calendar .fc-day-other .fc-daygrid-day-frame,
body.customers.dark-mode #calendar .fc-day-other .fc-daygrid-day-frame,
[data-theme="dark"] #calendar .fc-day-other .fc-daygrid-day-frame,
html.dark-mode #calendar .fc-day-other .fc-daygrid-day-bg,
body.customers.dark-mode #calendar .fc-day-other .fc-daygrid-day-bg,
[data-theme="dark"] #calendar .fc-day-other .fc-daygrid-day-bg,
html.dark-mode #calendar .fc-day-disabled,
body.customers.dark-mode #calendar .fc-day-disabled,
[data-theme="dark"] #calendar .fc-day-disabled,
html.dark-mode #calendar .fc-day-disabled .fc-daygrid-day-frame,
body.customers.dark-mode #calendar .fc-day-disabled .fc-daygrid-day-frame,
[data-theme="dark"] #calendar .fc-day-disabled .fc-daygrid-day-frame {
  background: #0E121B !important;
}

html.dark-mode #calendar .fc-day-other .fc-daygrid-day-number,
body.customers.dark-mode #calendar .fc-day-other .fc-daygrid-day-number,
[data-theme="dark"] #calendar .fc-day-other .fc-daygrid-day-number {
  color: #475569 !important;
}

html.dark-mode #calendar .fc-daygrid-day.fc-day-today,
body.customers.dark-mode #calendar .fc-daygrid-day.fc-day-today,
[data-theme="dark"] #calendar .fc-daygrid-day.fc-day-today {
  background: rgba(70, 128, 255, 0.08) !important;
}

/* Popover in Dark Mode */
html.dark-mode .fc-theme-standard .fc-popover,
body.customers.dark-mode .fc-theme-standard .fc-popover,
[data-theme="dark"] .fc-theme-standard .fc-popover {
  background: #141822 !important;
  border-color: #2E3844 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .fc-theme-standard .fc-popover-header,
body.customers.dark-mode .fc-theme-standard .fc-popover-header,
[data-theme="dark"] .fc-theme-standard .fc-popover-header {
  background: #1A202C !important;
  color: #F8FAFC !important;
}

html.dark-mode .able-calendar-legend-item,
body.customers.dark-mode .able-calendar-legend-item,
[data-theme="dark"] .able-calendar-legend-item {
  color: #94A3B8 !important;
}

/* ==========================================================================
   ABLE PRO - CLIENT FILES MODULE (.able-files-container)
   ========================================================================== */

.able-files-container {
  width: 100%;
}

/* KPI Stats Grid */
.able-files-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

.able-file-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--able-surface, #FFFFFF);
  border: 1px solid var(--able-border, #E8EBEE);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.able-file-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #D3D8DF;
}

.able-file-stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.able-file-stat-icon-wrap.stat-blue {
  background: rgba(70, 128, 255, 0.1);
  color: #4680FF;
}

.able-file-stat-icon-wrap.stat-red {
  background: rgba(255, 77, 79, 0.1);
  color: #FF4D4F;
}

.able-file-stat-icon-wrap.stat-purple {
  background: rgba(114, 101, 230, 0.1);
  color: #7265E6;
}

.able-file-stat-icon-wrap.stat-amber {
  background: rgba(229, 138, 0, 0.1);
  color: #E58A00;
}

.able-file-stat-content {
  display: flex;
  flex-direction: column;
}

.able-file-stat-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--able-text-muted, #64748B);
  line-height: 1.2;
}

.able-file-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  line-height: 1.2;
  margin-top: 4px;
}

/* Dropzone Panel & Form */
.able-dropzone-panel {
  background: var(--able-surface, #FFFFFF) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.able-dropzone-body {
  padding: 22px !important;
}

form.able-pro-dropzone,
#files-upload.dropzone {
  background: #F8FAFC !important;
  border: 2px dashed #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 32px 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  min-height: 160px !important;
}

form.able-pro-dropzone:hover,
#files-upload.dropzone:hover,
#files-upload.dropzone.dz-drag-hover {
  background: rgba(70, 128, 255, 0.03) !important;
  border-color: #4680FF !important;
  transform: scale(1.002);
}

.able-dropzone-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.able-dropzone-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(70, 128, 255, 0.1);
  color: #4680FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
  transition: transform 0.2s ease, background 0.2s ease;
}

form.able-pro-dropzone:hover .able-dropzone-icon-circle,
#files-upload.dropzone:hover .able-dropzone-icon-circle {
  transform: translateY(-3px) scale(1.05);
  background: rgba(70, 128, 255, 0.16);
}

.able-dropzone-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--able-text, #1E293B) !important;
  margin: 0 0 6px 0 !important;
}

.able-dropzone-subtitle {
  font-size: 13.5px !important;
  color: var(--able-text-muted, #64748B) !important;
  margin: 0 0 14px 0 !important;
}

.able-dropzone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.able-dropzone-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 4px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Cloud Storage Toolbar */
.able-cloud-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--able-border, #E8EBEE);
}

.able-cloud-info {
  font-size: 13px;
  font-weight: 500;
}

.able-cloud-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.able-cloud-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text, #1E293B) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.able-cloud-btn:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07) !important;
}

/* Files Table Card */
.able-files-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.able-file-row:hover td {
  background: rgba(70, 128, 255, 0.02) !important;
}

.able-file-info-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* File MIME Badges */
.able-file-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.able-badge-pdf {
  background: rgba(255, 77, 79, 0.1);
  color: #FF4D4F;
}

.able-badge-word {
  background: rgba(70, 128, 255, 0.1);
  color: #4680FF;
}

.able-badge-excel {
  background: rgba(44, 168, 127, 0.1);
  color: #2CA87F;
}

.able-badge-image {
  background: rgba(114, 101, 230, 0.1);
  color: #7265E6;
}

.able-badge-archive {
  background: rgba(229, 138, 0, 0.1);
  color: #E58A00;
}

.able-badge-text {
  background: rgba(100, 116, 139, 0.1);
  color: #64748B;
}

.able-badge-audio {
  background: rgba(234, 88, 12, 0.1);
  color: #EA580C;
}

.able-badge-video {
  background: rgba(217, 70, 239, 0.1);
  color: #D946EF;
}

.able-badge-default {
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}

/* Thumbnail preview for images */
.able-file-thumbnail-wrap {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--able-border, #E8EBEE);
  position: relative;
  flex-shrink: 0;
  background: #F8FAFC;
}

.able-file-img-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.able-file-thumbnail-wrap:hover .able-file-img-thumb {
  transform: scale(1.1);
}

.able-thumb-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #94A3B8;
}

/* Text metadata */
.able-file-text-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.able-file-link-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--able-text, #1E293B);
  text-decoration: none;
  transition: color 0.15s ease;
  word-break: break-word;
}

.able-file-link-title:hover {
  color: var(--able-primary, #4680FF);
  text-decoration: none;
}

.able-file-sub-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.able-file-type-pill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #EEF2F6;
  color: #475569;
}

.able-file-external-pill {
  font-size: 11px;
  font-weight: 500;
  color: #0284C7;
  background: rgba(2, 132, 199, 0.08);
  padding: 1px 7px;
  border-radius: 4px;
}

.able-file-date-wrap {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--able-text-muted, #64748B);
}

/* Action buttons */
.able-file-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.able-action-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.able-download-btn {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

.able-download-btn:hover {
  background: #4680FF !important;
  border-color: #4680FF !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(70, 128, 255, 0.3) !important;
}

.able-delete-btn {
  background: rgba(255, 77, 79, 0.08) !important;
  border: 1px solid rgba(255, 77, 79, 0.2) !important;
  color: #FF4D4F !important;
}

.able-delete-btn:hover {
  background: #FF4D4F !important;
  border-color: #FF4D4F !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(255, 77, 79, 0.3) !important;
}

/* Empty State */
.able-files-empty-wrap {
  padding: 48px 20px;
  text-align: center;
}

.able-files-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(70, 128, 255, 0.08);
  color: #4680FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px auto;
}

.able-files-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--able-text, #1E293B);
  margin-bottom: 6px;
}

.able-files-empty-desc {
  font-size: 13.5px;
  color: var(--able-text-muted, #64748B);
  max-width: 440px;
  margin: 0 auto;
}

/* ==========================================================================
   DARK MODE OVERRIDES - CLIENT FILES MODULE
   ========================================================================== */

html.dark-mode .able-files-container,
body.customers.dark-mode .able-files-container,
[data-theme="dark"] .able-files-container {
  --able-surface: #141822;
  --able-border: #242C38;
}

html.dark-mode .able-file-stat-card,
body.customers.dark-mode .able-file-stat-card,
[data-theme="dark"] .able-file-stat-card {
  background: #141822 !important;
  border-color: #242C38 !important;
  box-shadow: none !important;
}

html.dark-mode .able-file-stat-card:hover,
body.customers.dark-mode .able-file-stat-card:hover,
[data-theme="dark"] .able-file-stat-card:hover {
  border-color: #334155 !important;
}

html.dark-mode .able-file-stat-label,
body.customers.dark-mode .able-file-stat-label,
[data-theme="dark"] .able-file-stat-label {
  color: #94A3B8 !important;
}

html.dark-mode .able-file-stat-value,
body.customers.dark-mode .able-file-stat-value,
[data-theme="dark"] .able-file-stat-value {
  color: #F8FAFC !important;
}

html.dark-mode .able-dropzone-panel,
body.customers.dark-mode .able-dropzone-panel,
[data-theme="dark"] .able-dropzone-panel {
  background: #141822 !important;
  border-color: #242C38 !important;
}

html.dark-mode form.able-pro-dropzone,
html.dark-mode #files-upload.dropzone,
body.customers.dark-mode form.able-pro-dropzone,
body.customers.dark-mode #files-upload.dropzone,
[data-theme="dark"] form.able-pro-dropzone,
[data-theme="dark"] #files-upload.dropzone {
  background: #10141D !important;
  border-color: #2E3844 !important;
}

html.dark-mode form.able-pro-dropzone:hover,
html.dark-mode #files-upload.dropzone:hover,
html.dark-mode #files-upload.dropzone.dz-drag-hover,
body.customers.dark-mode form.able-pro-dropzone:hover,
body.customers.dark-mode #files-upload.dropzone:hover,
body.customers.dark-mode #files-upload.dropzone.dz-drag-hover,
[data-theme="dark"] form.able-pro-dropzone:hover,
[data-theme="dark"] #files-upload.dropzone:hover,
[data-theme="dark"] #files-upload.dropzone.dz-drag-hover {
  background: rgba(70, 128, 255, 0.06) !important;
  border-color: #4680FF !important;
}

html.dark-mode .able-dropzone-title,
body.customers.dark-mode .able-dropzone-title,
[data-theme="dark"] .able-dropzone-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-dropzone-subtitle,
body.customers.dark-mode .able-dropzone-subtitle,
[data-theme="dark"] .able-dropzone-subtitle {
  color: #94A3B8 !important;
}

html.dark-mode .able-dropzone-tag,
body.customers.dark-mode .able-dropzone-tag,
[data-theme="dark"] .able-dropzone-tag {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode .able-cloud-toolbar,
body.customers.dark-mode .able-cloud-toolbar,
[data-theme="dark"] .able-cloud-toolbar {
  border-color: #242C38 !important;
}

html.dark-mode .able-cloud-btn,
body.customers.dark-mode .able-cloud-btn,
[data-theme="dark"] .able-cloud-btn {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #E2E8F0 !important;
}

html.dark-mode .able-cloud-btn:hover,
body.customers.dark-mode .able-cloud-btn:hover,
[data-theme="dark"] .able-cloud-btn:hover {
  background: #242C38 !important;
  border-color: #3B4758 !important;
}

html.dark-mode .able-file-row:hover td,
body.customers.dark-mode .able-file-row:hover td,
[data-theme="dark"] .able-file-row:hover td {
  background: rgba(70, 128, 255, 0.05) !important;
}

html.dark-mode .able-file-link-title,
body.customers.dark-mode .able-file-link-title,
[data-theme="dark"] .able-file-link-title {
  color: #E2E8F0 !important;
}

html.dark-mode .able-file-link-title:hover,
body.customers.dark-mode .able-file-link-title:hover,
[data-theme="dark"] .able-file-link-title:hover {
  color: #70A1FF !important;
}

html.dark-mode .able-file-type-pill,
body.customers.dark-mode .able-file-type-pill,
[data-theme="dark"] .able-file-type-pill {
  background: #1A202C !important;
  color: #94A3B8 !important;
}

html.dark-mode .able-file-thumbnail-wrap,
body.customers.dark-mode .able-file-thumbnail-wrap,
[data-theme="dark"] .able-file-thumbnail-wrap {
  background: #10141D !important;
  border-color: #242C38 !important;
}

html.dark-mode .able-download-btn,
body.customers.dark-mode .able-download-btn,
[data-theme="dark"] .able-download-btn {
  background: #1A202C !important;
  border-color: #2E3844 !important;
  color: #CBD5E1 !important;
}

html.dark-mode .able-download-btn:hover,
body.customers.dark-mode .able-download-btn:hover,
[data-theme="dark"] .able-download-btn:hover {
  background: #4680FF !important;
  border-color: #4680FF !important;
  color: #FFFFFF !important;
}

html.dark-mode .able-files-empty-title,
body.customers.dark-mode .able-files-empty-title,
[data-theme="dark"] .able-files-empty-title {
  color: #F8FAFC !important;
}

html.dark-mode .able-files-empty-desc,
body.customers.dark-mode .able-files-empty-desc,
[data-theme="dark"] .able-files-empty-desc {
  color: #94A3B8 !important;
}

/* ==========================================================================
   ABLE PRO — SPLIT-SCREEN PREVIEW PANEL (GLOBAL)
   Applies to: invoices, estimates, expenses, proposals, credit_notes.
   Targets the shared structure: .small-table-right-col > div (the AJAX target)
   and .able-invoice-preview-wrapper (the inner content injected via AJAX).
   ========================================================================== */

/* ── Left panel table card ───────────────────────────────────────────────── */
#small-table .panel_s {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: var(--able-radius, 12px) !important;
  box-shadow: var(--able-card-shadow, 0 4px 20px 0 rgba(0, 0, 0, 0.05)) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

html.dark-mode #small-table .panel_s,
body.dark-mode #small-table .panel_s,
[data-theme="dark"] #small-table .panel_s {
  background: var(--able-surface) !important;
  border-color: var(--able-border) !important;
}

/* ── Right panel: preview card wrapper ───────────────────────────────────── */
.small-table-right-col>div:not(.hide) {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: var(--able-radius, 12px) !important;
  box-shadow: var(--able-card-shadow, 0 4px 20px 0 rgba(0, 0, 0, 0.05)) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
}

html.dark-mode .small-table-right-col>div:not(.hide),
body.dark-mode .small-table-right-col>div:not(.hide),
[data-theme="dark"] .small-table-right-col>div:not(.hide) {
  background: var(--able-surface) !important;
  border-color: var(--able-border) !important;
  box-shadow: var(--able-card-shadow) !important;
}

/* ── Inner preview content container ────────────────────────────────────── */
.able-invoice-preview-wrapper {
  padding: 0 !important;
  background: var(--able-surface) !important;
}

/* ── Tab Bar Container at the top header of preview card ─────────────────── */
.able-invoice-preview-wrapper .able-invoice-tabs-wrapper,
.able-invoice-preview-wrapper .horizontal-scrollable-tabs {
  background: var(--able-bg, #f1f4f8) !important;
  border-bottom: 1px solid var(--able-border) !important;
  padding: 10px 16px 0 16px !important;
  margin-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}

html.dark-mode .able-invoice-preview-wrapper .able-invoice-tabs-wrapper,
body.dark-mode .able-invoice-preview-wrapper .able-invoice-tabs-wrapper,
[data-theme="dark"] .able-invoice-preview-wrapper .able-invoice-tabs-wrapper {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--able-border) !important;
}

.able-invoice-preview-wrapper .able-nav-tabs,
.able-invoice-preview-wrapper .nav-tabs {
  border-bottom: none !important;
  gap: 6px !important;
  align-items: flex-end !important;
  margin-bottom: 0 !important;
}

.able-invoice-preview-wrapper .able-nav-tabs>li>a,
.able-invoice-preview-wrapper .nav-tabs>li>a {
  padding: 10px 18px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #64748b) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

.able-invoice-preview-wrapper .able-nav-tabs>li>a:hover,
.able-invoice-preview-wrapper .nav-tabs>li>a:hover {
  color: var(--able-primary) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

html.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover,
html.dark-mode .able-invoice-preview-wrapper .nav-tabs>li>a:hover,
body.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover,
body.dark-mode .able-invoice-preview-wrapper .nav-tabs>li>a:hover,
[data-theme="dark"] .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover,
[data-theme="dark"] .able-invoice-preview-wrapper .nav-tabs>li>a:hover {
  color: var(--able-primary, #01C38D) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Active tab: White card tab seamlessly merging into the white content area below */
.able-invoice-preview-wrapper .able-nav-tabs>li.active>a,
.able-invoice-preview-wrapper .nav-tabs>li.active>a {
  background: var(--able-surface) !important;
  color: var(--able-text-dark, #1e293b) !important;
  font-weight: 600 !important;
  border: 1px solid var(--able-border) !important;
  border-bottom: 1px solid var(--able-surface) !important;
  margin-bottom: -1px !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03) !important;
  border-radius: 8px 8px 0 0 !important;
}

html.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li.active>a,
html.dark-mode .able-invoice-preview-wrapper .nav-tabs>li.active>a,
body.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li.active>a,
body.dark-mode .able-invoice-preview-wrapper .nav-tabs>li.active>a,
[data-theme="dark"] .able-invoice-preview-wrapper .able-nav-tabs>li.active>a,
[data-theme="dark"] .able-invoice-preview-wrapper .nav-tabs>li.active>a {
  background: #141822 !important;
  background-color: #141822 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom-color: #141822 !important;
}

html.dark-mode .able-invoice-preview-wrapper .nav-tabs .badge,
body.dark-mode .able-invoice-preview-wrapper .nav-tabs .badge,
[data-theme="dark"] .able-invoice-preview-wrapper .nav-tabs .badge,
html.dark-mode .able-invoice-preview-wrapper .able-nav-tabs .badge,
body.dark-mode .able-invoice-preview-wrapper .able-nav-tabs .badge,
[data-theme="dark"] .able-invoice-preview-wrapper .able-nav-tabs .badge {
  background-color: rgba(1, 195, 141, 0.2) !important;
  color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
}

html.dark-mode .able-invoice-preview-wrapper .nav-tabs>li>a:hover .badge,
body.dark-mode .able-invoice-preview-wrapper .nav-tabs>li>a:hover .badge,
[data-theme="dark"] .able-invoice-preview-wrapper .nav-tabs>li>a:hover .badge,
html.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover .badge,
body.dark-mode .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover .badge,
[data-theme="dark"] .able-invoice-preview-wrapper .able-nav-tabs>li>a:hover .badge {
  background-color: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
}

/* Vertical separator line before expand toggle */
.able-invoice-preview-wrapper .tab-separator {
  border-left: 1px solid var(--able-border) !important;
  padding-left: 8px !important;
  margin-left: 4px !important;
  padding-bottom: 6px !important;
}

/* Full view expand icon box */
.able-invoice-preview-wrapper .toggle_view a {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--able-border) !important;
  background: var(--able-surface) !important;
  color: var(--able-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.able-invoice-preview-wrapper .toggle_view a:hover {
  color: var(--able-primary) !important;
  border-color: var(--able-primary) !important;
}

/* Content padding inside preview wrapper */
.able-invoice-preview-wrapper>.row,
.able-invoice-preview-wrapper>.tab-content,
.able-invoice-preview-wrapper>.hr-panel-separator {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.able-invoice-preview-wrapper>.tab-content {
  padding-bottom: 24px !important;
}

.able-invoice-preview-wrapper>.row:first-of-type {
  padding-top: 20px !important;
}

/* ── Preview section title (e.g. expense category, invoice #) ────────────── */
.able-invoice-preview-wrapper h3,
.able-invoice-preview-wrapper #expenseCategory {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin: 0 0 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
}

html.dark-mode .able-invoice-preview-wrapper h3,
body.dark-mode .able-invoice-preview-wrapper h3,
[data-theme="dark"] .able-invoice-preview-wrapper h3 {
  color: #FFFFFF !important;
}

/* ── Preview subtitles / secondary headings ──────────────────────────────── */
.able-invoice-preview-wrapper h4,
.able-invoice-preview-wrapper #expenseName {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--able-text-dark) !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
}

.able-invoice-preview-wrapper #expenserCreator {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--able-text-muted) !important;
  margin: 0 0 16px !important;
}

html.dark-mode .able-invoice-preview-wrapper h4,
body.dark-mode .able-invoice-preview-wrapper h4,
[data-theme="dark"] .able-invoice-preview-wrapper h4 {
  color: var(--able-text-muted) !important;
}

/* ── Action Buttons Header (Right side top) ───────────────────────────────── */
.able-invoice-preview-wrapper ._buttons .btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  transition: all 0.15s ease !important;
}

.able-invoice-preview-wrapper ._buttons .btn-default {
  background: var(--able-surface) !important;
  border: 1px solid var(--able-border) !important;
  color: var(--able-text-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.able-invoice-preview-wrapper ._buttons .btn-default:hover {
  background: var(--able-bg, #f8f9fa) !important;
  border-color: var(--able-border) !important;
}

/* ── Expense Amount & Detail Lines (Left Column) ──────────────────────────── */
.able-invoice-preview-wrapper #amountWrapper {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

.able-invoice-preview-wrapper #amountWrapper .bold {
  font-weight: 600 !important;
  color: var(--able-text-dark) !important;
  font-size: 14px !important;
}

html.dark-mode .able-invoice-preview-wrapper #amountWrapper .bold,
body.dark-mode .able-invoice-preview-wrapper #amountWrapper .bold,
[data-theme="dark"] .able-invoice-preview-wrapper #amountWrapper .bold {
  color: #FFFFFF !important;
}

.able-invoice-preview-wrapper p {
  color: var(--able-text-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

html.dark-mode .able-invoice-preview-wrapper p,
body.dark-mode .able-invoice-preview-wrapper p,
[data-theme="dark"] .able-invoice-preview-wrapper p {
  color: var(--able-text-muted) !important;
}

/* ── Field labels (e.g. Fecha:, Nº ref:) ────────────────────────────────── */
.able-invoice-preview-wrapper .bold,
.able-invoice-preview-wrapper span.bold {
  font-weight: 600 !important;
  color: var(--able-text-dark) !important;
}

html.dark-mode .able-invoice-preview-wrapper .bold,
body.dark-mode .able-invoice-preview-wrapper .bold,
[data-theme="dark"] .able-invoice-preview-wrapper .bold {
  color: #E8EBEE !important;
}

.able-invoice-preview-wrapper .text-muted {
  color: var(--able-text-muted) !important;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.able-invoice-preview-wrapper a:not(.btn):not([class*="nav-"]) {
  color: var(--able-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.able-invoice-preview-wrapper a:not(.btn):not([class*="nav-"]):hover {
  color: var(--able-primary-dark) !important;
  text-decoration: underline !important;
}

/* ── Items & Accounting Tables Headings / Dark Mode Overrides ───────────── */
.able-invoice-preview-wrapper .table {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--able-border) !important;
  margin-top: 12px !important;
}

.able-invoice-preview-wrapper .table>thead>tr>th {
  background: var(--able-bg, #f8f9fa) !important;
  color: var(--able-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--able-border) !important;
  padding: 10px 12px !important;
}

.able-invoice-preview-wrapper .table>tbody>tr>td {
  padding: 10px 12px !important;
  font-size: 13px !important;
  border-color: var(--able-border) !important;
  color: var(--able-text-dark) !important;
}

/* Dark Mode Overrides for ALL preview tables & Accounting Journal Entries tab */
html.dark-mode .able-invoice-preview-wrapper .table,
body.dark-mode .able-invoice-preview-wrapper .table,
[data-theme="dark"] .able-invoice-preview-wrapper .table,
html.dark-mode #tab_acc_expense_journal_entries .table,
body.dark-mode #tab_acc_expense_journal_entries .table,
[data-theme="dark"] #tab_acc_expense_journal_entries .table {
  background-color: transparent !important;
  border-color: var(--able-border, #29313b) !important;
}

html.dark-mode .able-invoice-preview-wrapper .table>thead>tr>th,
body.dark-mode .able-invoice-preview-wrapper .table>thead>tr>th,
[data-theme="dark"] .able-invoice-preview-wrapper .table>thead>tr>th,
html.dark-mode #tab_acc_expense_journal_entries .table>thead>tr>th,
body.dark-mode #tab_acc_expense_journal_entries .table>thead>tr>th,
[data-theme="dark"] #tab_acc_expense_journal_entries .table>thead>tr>th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  border-color: var(--able-border, #29313b) !important;
}

html.dark-mode .able-invoice-preview-wrapper .table>tbody>tr,
html.dark-mode .able-invoice-preview-wrapper .table>tbody>tr>td,
html.dark-mode .able-invoice-preview-wrapper .table>tbody>tr>th,
body.dark-mode .able-invoice-preview-wrapper .table>tbody>tr,
body.dark-mode .able-invoice-preview-wrapper .table>tbody>tr>td,
body.dark-mode .able-invoice-preview-wrapper .table>tbody>tr>th,
[data-theme="dark"] .able-invoice-preview-wrapper .table>tbody>tr,
[data-theme="dark"] .able-invoice-preview-wrapper .table>tbody>tr>td,
[data-theme="dark"] .able-invoice-preview-wrapper .table>tbody>tr>th,
html.dark-mode #tab_acc_expense_journal_entries .table>tbody>tr,
html.dark-mode #tab_acc_expense_journal_entries .table>tbody>tr>td,
body.dark-mode #tab_acc_expense_journal_entries .table>tbody>tr,
body.dark-mode #tab_acc_expense_journal_entries .table>tbody>tr>td,
[data-theme="dark"] #tab_acc_expense_journal_entries .table>tbody>tr,
[data-theme="dark"] #tab_acc_expense_journal_entries .table>tbody>tr>td {
  background-color: transparent !important;
  color: #CBD5E1 !important;
  border-color: var(--able-border, #29313b) !important;
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(odd),
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>td,
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>th,
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd),
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>td,
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>th,
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd),
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>td,
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>th,
html.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd),
html.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd)>td,
body.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd),
body.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd)>td,
[data-theme="dark"] .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd),
[data-theme="dark"] .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(odd)>td,
html.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd),
html.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd)>td,
body.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd),
body.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd)>td,
[data-theme="dark"] #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd),
[data-theme="dark"] #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(odd)>td {
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: #E2E8F0 !important;
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(even),
html.dark-mode .table-striped>tbody>tr:nth-of-type(even)>td,
html.dark-mode .table-striped>tbody>tr:nth-of-type(even)>th,
body.dark-mode .table-striped>tbody>tr:nth-of-type(even),
body.dark-mode .table-striped>tbody>tr:nth-of-type(even)>td,
body.dark-mode .table-striped>tbody>tr:nth-of-type(even)>th,
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(even),
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(even)>td,
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(even)>th,
html.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even),
html.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even)>td,
body.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even),
body.dark-mode .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even)>td,
[data-theme="dark"] .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even),
[data-theme="dark"] .able-invoice-preview-wrapper .table-striped>tbody>tr:nth-of-type(even)>td,
html.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even),
html.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even)>td,
body.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even),
body.dark-mode #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even)>td,
[data-theme="dark"] #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even),
[data-theme="dark"] #tab_acc_expense_journal_entries .table-striped>tbody>tr:nth-of-type(even)>td {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

html.dark-mode .able-invoice-preview-wrapper .table tr.bold,
html.dark-mode .able-invoice-preview-wrapper .table tr.bold>td,
body.dark-mode .able-invoice-preview-wrapper .table tr.bold,
body.dark-mode .able-invoice-preview-wrapper .table tr.bold>td,
[data-theme="dark"] .able-invoice-preview-wrapper .table tr.bold,
[data-theme="dark"] .able-invoice-preview-wrapper .table tr.bold>td,
html.dark-mode #tab_acc_expense_journal_entries .table tr.bold,
html.dark-mode #tab_acc_expense_journal_entries .table tr.bold>td,
body.dark-mode #tab_acc_expense_journal_entries .table tr.bold,
body.dark-mode #tab_acc_expense_journal_entries .table tr.bold>td,
[data-theme="dark"] #tab_acc_expense_journal_entries .table tr.bold,
[data-theme="dark"] #tab_acc_expense_journal_entries .table tr.bold>td {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ── Receipt Attachment Section (Right Column) ────────────────────────────── */
.able-invoice-preview-wrapper #expenseReceipt h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--able-text-dark) !important;
  margin-bottom: 12px !important;
}

.able-invoice-preview-wrapper #expenseReceipt .row {
  background: var(--able-bg, #f8f9fa) !important;
  border: 1px solid var(--able-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

html.dark-mode .able-invoice-preview-wrapper #expenseReceipt .row,
body.dark-mode .able-invoice-preview-wrapper #expenseReceipt .row,
[data-theme="dark"] .able-invoice-preview-wrapper #expenseReceipt .row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--able-border) !important;
}

.able-invoice-preview-wrapper #expenseReceipt i.fa-file-pdf,
.able-invoice-preview-wrapper #expenseReceipt [class*="mime-"] {
  font-size: 20px !important;
  color: #ff5252 !important;
  margin-right: 8px !important;
}

/* ── Dropzone in preview ──────────────────────────────────────────────────── */
.small-table-right-col .dropzone {
  border: 2px dashed var(--able-border) !important;
  border-radius: var(--able-radius, 12px) !important;
  background: var(--able-bg, #f8f9fa) !important;
  padding: 24px !important;
  text-align: center !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.small-table-right-col .dropzone:hover,
.small-table-right-col .dropzone.dz-drag-hover {
  border-color: var(--able-primary) !important;
  background: rgba(70, 128, 255, 0.06) !important;
}

html.dark-mode .small-table-right-col .dropzone,
body.dark-mode .small-table-right-col .dropzone,
[data-theme="dark"] .small-table-right-col .dropzone {
  border-color: var(--able-border) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Report Active Item in Dark Mode */
html.dark-mode .report-list-item.v-list-item--active,
body.dark-mode .report-list-item.v-list-item--active,
[data-theme="dark"] .report-list-item.v-list-item--active {
  color: #01C38D !important;
}

html.dark-mode .report-list-item.v-list-item--active>.v-list-item__overlay,
body.dark-mode .report-list-item.v-list-item--active>.v-list-item__overlay,
[data-theme="dark"] .report-list-item.v-list-item--active>.v-list-item__overlay {
  background-color: #01C38D !important;
  opacity: 0.16 !important;
}

/* ==========================================================================
   ApexCharts Universal Dark Mode Overrides
   ========================================================================== */
html.dark-mode .apexcharts-canvas text,
body.dark-mode .apexcharts-canvas text,
[data-theme="dark"] .apexcharts-canvas text,
html.dark-mode .apexcharts-canvas .apexcharts-text,
body.dark-mode .apexcharts-canvas .apexcharts-text,
[data-theme="dark"] .apexcharts-canvas .apexcharts-text,
html.dark-mode .apexcharts-canvas .apexcharts-xaxis-label,
body.dark-mode .apexcharts-canvas .apexcharts-xaxis-label,
[data-theme="dark"] .apexcharts-canvas .apexcharts-xaxis-label,
html.dark-mode .apexcharts-canvas .apexcharts-yaxis-label,
body.dark-mode .apexcharts-canvas .apexcharts-yaxis-label,
[data-theme="dark"] .apexcharts-canvas .apexcharts-yaxis-label,
html.dark-mode .apexcharts-text tspan,
html[data-theme="dark"] .apexcharts-text tspan,
body.dark-mode .apexcharts-text tspan,
[data-theme="dark"] .apexcharts-text tspan {
  fill: #CBD5E1 !important;
  color: #CBD5E1 !important;
}

html.dark-mode .apexcharts-canvas .apexcharts-gridline,
body.dark-mode .apexcharts-canvas .apexcharts-gridline,
[data-theme="dark"] .apexcharts-canvas .apexcharts-gridline,
html.dark-mode .apexcharts-canvas .apexcharts-xaxis-tick,
body.dark-mode .apexcharts-canvas .apexcharts-xaxis-tick,
[data-theme="dark"] .apexcharts-canvas .apexcharts-xaxis-tick {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .apexcharts-canvas .apexcharts-legend-text,
body.dark-mode .apexcharts-canvas .apexcharts-legend-text,
[data-theme="dark"] .apexcharts-canvas .apexcharts-legend-text {
  color: #CBD5E1 !important;
}

html.dark-mode .apexcharts-tooltip,
body.dark-mode .apexcharts-tooltip,
[data-theme="dark"] .apexcharts-tooltip {
  background: #1D2630 !important;
  border-color: #29313B !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .apexcharts-tooltip-title,
body.dark-mode .apexcharts-tooltip-title,
[data-theme="dark"] .apexcharts-tooltip-title {
  background: #161D26 !important;
  border-bottom: 1px solid #29313B !important;
  color: #FFFFFF !important;
}

html.dark-mode .apexcharts-tooltip-text,
body.dark-mode .apexcharts-tooltip-text,
[data-theme="dark"] .apexcharts-tooltip-text {
  color: #E2E8F0 !important;
}

html.dark-mode .apexcharts-menu,
body.dark-mode .apexcharts-menu,
[data-theme="dark"] .apexcharts-menu {
  background: #1D2630 !important;
  border-color: #29313B !important;
  color: #FFFFFF !important;
}

html.dark-mode .apexcharts-menu-item:hover,
body.dark-mode .apexcharts-menu-item:hover,
[data-theme="dark"] .apexcharts-menu-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #01C38D !important;
}

/* ==========================================================================
   GLOBAL FORM CONTROLS & INPUTS DARK MODE STYLES
   ========================================================================== */

html.dark-mode input.form-control,
html.dark-mode select.form-control,
html.dark-mode textarea.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
body.dark-mode input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--able-surface, #1D2630) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--able-border, rgba(255, 255, 255, 0.12)) !important;
  color-scheme: dark !important;
}

html.dark-mode select.form-control option,
html[data-theme="dark"] select.form-control option,
body.dark-mode select.form-control option,
[data-theme="dark"] select.form-control option {
  background-color: #1D2630 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   DATATABLES LOADING SKELETON — DARK MODE VARIANT
   El esqueleto de carga (table-loading.png) es blanco; en oscuro se usa la
   variante transparente para que no deslumbre.
   ========================================================================== */

html.dark-mode .table-loading,
html[data-theme="dark"] .table-loading,
body.dark-mode .table-loading,
[data-theme="dark"] .table-loading {
  background-image: url("../images/table-loading-dark.png") !important;
}

/* ==========================================================================
   LEADS STATUS PILLS — ABLE PRO (MODO CLARO + OSCURO)
   El color de cada estado llega en --status-color; color-mix garantiza
   contraste en ambos modos sin importar el color configurado.
   ========================================================================== */

.table .label.able-lead-pill {
  --pill: var(--status-color, var(--able-primary, #01C38D));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--pill) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill) 35%, transparent);
  color: var(--pill);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

.table a.label.able-lead-pill:hover,
.table a.label.able-lead-pill:focus {
  color: var(--pill);
  opacity: 0.85;
  text-decoration: none;
}

html.dark-mode .table .label.able-lead-pill,
html[data-theme="dark"] .table .label.able-lead-pill,
body.dark-mode .table .label.able-lead-pill,
[data-theme="dark"] .table .label.able-lead-pill {
  background: color-mix(in srgb, var(--pill) 16%, transparent);
  border-color: color-mix(in srgb, var(--pill) 48%, transparent);
  color: color-mix(in srgb, var(--pill) 62%, #ffffff);
}

html.dark-mode .table a.label.able-lead-pill:hover,
html[data-theme="dark"] .table a.label.able-lead-pill:hover,
body.dark-mode .table a.label.able-lead-pill:hover,
[data-theme="dark"] .table a.label.able-lead-pill:hover {
  color: color-mix(in srgb, var(--pill) 62%, #ffffff);
}

dark-mode select.form-control,
html.dark-mode textarea.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
body.dark-mode input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--able-surface, #1D2630) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--able-border, rgba(255, 255, 255, 0.12)) !important;
  color-scheme: dark !important;
}

html.dark-mode select.form-control option,
html[data-theme="dark"] select.form-control option,
body.dark-mode select.form-control option,
[data-theme="dark"] select.form-control option {
  background-color: #1D2630 !important;
  color: #FFFFFF !important;
}

/* Universal Table Product Thumbnails */
.able-product-thumb,
img.images_w_table {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background-color: var(--able-bg, #F8F9FA) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

html.dark-mode .able-product-thumb,
[data-theme="dark"] .able-product-thumb,
html.dark-mode img.images_w_table,
[data-theme="dark"] img.images_w_table {
  border-color: var(--able-border, #29313B) !important;
  background-color: #161C24 !important;
}

/* Universal Table Responsive Wrapper for DataTables */
.able-datatable-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.able-datatable-responsive::-webkit-scrollbar {
  height: 6px;
}

.able-datatable-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.able-datatable-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.able-datatable-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

html.dark-mode .able-datatable-responsive::-webkit-scrollbar-thumb,
[data-theme="dark"] .able-datatable-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   ABLE PRO DATATABLES PAGINATION & JUMP-SELECT CLEANUP (RESOLVES DOUBLE-BOX)
   ========================================================================== */

/* 1. Eliminate stray/unaligned dt-page-jump dropdown */
.dt-page-jump,
.dataTables_wrapper .dt-page-jump,
.dataTables_paging .dt-page-jump {
  display: none !important;
}

/* 2. Container alignment */
.dataTables_wrapper .dataTables_paginate,
.dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination,
div.dataTables_paginate ul.pagination {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 3. STRICT RESET for the LI wrapper so it never renders a duplicate border or box */
.dataTables_wrapper .dataTables_paginate ul.pagination>li,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.paginate_button,
div.dataTables_paginate ul.pagination>li,
div.dataTables_paginate ul.pagination>li.paginate_button,
body.admin .dataTables_wrapper .dataTables_paginate ul.pagination>li,
body.admin .dataTables_wrapper .dataTables_paginate ul.pagination>li.paginate_button,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-flex !important;
  float: none !important;
}

/* 4. Able Pro interactive button styles (light mode default) */
.dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
.dataTables_wrapper .dataTables_paginate ul.pagination>li>span,
.dataTables_wrapper .dataTables_paginate>a.paginate_button,
.tasks-table .dataTables_paginate ul.pagination>li>a,
.table-rel-tasks_paginate ul.pagination>li>a,
.table-tasks_paginate ul.pagination>li>a {
  border-radius: 8px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background: var(--able-surface, #FFFFFF) !important;
  color: var(--able-text-dark, #1D2630) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  margin: 0 !important;
  float: none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination>li:not(.active):not(.disabled)>a:hover,
.dataTables_wrapper .dataTables_paginate>a.paginate_button:not(.current):not(.disabled):hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: var(--able-primary, #01C38D) !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.active>span,
.dataTables_wrapper .dataTables_paginate>a.paginate_button.current,
.tasks-table .dataTables_paginate ul.pagination>li.active>a,
.table-rel-tasks_paginate ul.pagination>li.active>a,
.table-tasks_paginate ul.pagination>li.active>a {
  background: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a,
.dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>span,
.dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: var(--able-border, #E8EBEE) !important;
  color: var(--able-text-muted, #5B6B79) !important;
  box-shadow: none !important;
}

/* 5. Able Pro interactive button styles (Dark Mode) */
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>span,
html.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li>span,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate>a.paginate_button,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li>span,
body.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #C0C8D0 !important;
  box-shadow: none !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li:not(.active):not(.disabled)>a:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li:not(.active):not(.disabled)>a:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li:not(.active):not(.disabled)>a:hover {
  background: rgba(1, 195, 141, 0.18) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>span,
html.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>span,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate>a.paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.active>span,
body.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button.current {
  background: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
  border-color: var(--able-primary, #01C38D) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(1, 195, 141, 0.4) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a,
html.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>span,
html.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>span,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>a,
body.dark-mode .dataTables_wrapper .dataTables_paginate ul.pagination>li.disabled>span,
body.dark-mode .dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.25) !important;
  opacity: 0.4 !important;
}

/* ==========================================================================
   ABLE PRO SPLIT-VIEW PREVIEW & ITEM DETAIL (PREVENTS DOUBLE-CARD BUG)
   ========================================================================== */

/* 1. Neutralize inner panel_s inside .small-table-right-col */
.small-table-right-col .panel_s,
.small-table-right-col .panel_s.able-card,
.small-table-right-col>div>.panel_s {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.small-table-right-col .panel_s .panel-body,
.small-table-right-col>div>.panel-body,
.small-table-right-col>div>.col-md-12 {
  padding: 0 !important;
}

/* 2. Able Pro Item Detail Preview Structure */
.able-item-detail-preview {
  display: flex;
  flex-direction: column;
  background: var(--able-surface, #FFFFFF);
  border-radius: var(--able-radius, 12px);
  overflow: hidden;
}

.able-item-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--able-surface, #FFFFFF);
  border-bottom: 1px solid var(--able-border, #E8EBEE);
}

.able-item-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.able-item-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background: rgba(1, 195, 141, 0.12);
  color: var(--able-primary, #01C38D);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.able-item-header-meta {
  min-width: 0;
}

.able-item-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--able-text-dark, #1D2630);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.able-item-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.able-code-badge,
.able-sku-badge,
.able-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

.able-code-badge {
  background: var(--able-bg, #F8F9FA);
  border: 1px solid var(--able-border, #E8EBEE);
  color: var(--able-text-muted, #5B6B79);
}

.able-sku-badge {
  background: rgba(70, 128, 255, 0.1);
  color: #4680FF;
}

.able-group-badge {
  background: rgba(1, 195, 141, 0.12);
  color: var(--able-primary, #01C38D);
}

.able-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--able-border, #E8EBEE);
  background: transparent;
  color: var(--able-text-muted, #5B6B79);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.able-close-btn:hover {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #DC2626 !important;
  border-color: rgba(220, 53, 69, 0.25) !important;
}

.able-item-preview-body {
  padding: 20px;
  background: var(--able-surface, #FFFFFF);
}

/* Hero Showcase */
.able-item-gallery-card {
  border-radius: 12px;
  border: 1px solid var(--able-border, #E8EBEE);
  background: var(--able-bg, #F8F9FA);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
}

.able-item-hero-image-wrap {
  width: 100%;
  text-align: center;
}

.able-hero-link {
  position: relative;
  display: inline-block;
  width: 100%;
}

.able-item-hero-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
}

.able-zoom-indicator {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.able-hero-link:hover .able-zoom-indicator {
  opacity: 1;
}

.able-gallery-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 4px;
}

.able-item-strip-thumb {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
}

.able-placeholder-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
  gap: 12px;
}

.able-item-hero-placeholder {
  width: 90px !important;
  height: 90px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.able-placeholder-caption {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--able-text-muted, #5B6B79);
}

/* Price KPIs */
.able-price-kpis {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.able-price-kpi-box {
  flex: 1;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--able-border, #E8EBEE);
  background: var(--able-bg, #F8F9FA);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.able-price-kpi-box.primary .able-kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--able-primary, #01C38D);
}

.able-price-kpi-box.secondary .able-kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--able-text-dark, #1D2630);
}

.able-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--able-text-muted, #5B6B79);
}

/* Specs Card */
.able-item-specs-card {
  border-radius: 12px;
  border: 1px solid var(--able-border, #E8EBEE);
  background: var(--able-bg, #F8F9FA);
  padding: 18px 20px;
}

.able-specs-header {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px 0;
  color: var(--able-text-dark, #1D2630);
  display: flex;
  align-items: center;
  gap: 8px;
}

.able-specs-table {
  width: 100%;
  margin-bottom: 0;
  background: transparent !important;
}

.able-specs-table td {
  padding: 8px 10px !important;
  border-top: 1px solid var(--able-border, #E8EBEE) !important;
  font-size: 13px !important;
  background: transparent !important;
  vertical-align: middle !important;
}

.able-specs-table tr:first-child td {
  border-top: none !important;
}

.able-spec-label {
  color: var(--able-text-muted, #5B6B79);
  font-weight: 500;
  width: 38%;
}

.able-spec-value {
  color: var(--able-text-dark, #1D2630);
}

.able-custom-fields-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--able-border, #E8EBEE);
}

.able-cf-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--able-text-muted, #5B6B79);
  margin: 0 0 10px 0;
}

.able-cf-item {
  font-size: 12.5px;
}

.able-cf-label {
  color: var(--able-text-muted, #5B6B79);
  margin-right: 4px;
}

.able-cf-val {
  font-weight: 600;
  color: var(--able-text-dark, #1D2630);
}

/* Inventory Metric Cards */
.able-inventory-metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--able-border, #E8EBEE);
  background: var(--able-bg, #F8F9FA);
}

.able-inv-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(70, 128, 255, 0.1);
  color: #4680FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.able-inv-code {
  font-size: 13px;
  font-weight: 700;
  color: var(--able-text-dark, #1D2630);
  display: block;
}

.able-inv-stock {
  font-size: 12px;
  color: var(--able-text-muted, #5B6B79);
}

/* Dark Mode Overrides */
html.dark-mode .able-item-detail-preview,
[data-theme="dark"] .able-item-detail-preview,
body.dark-mode .able-item-detail-preview {
  background: var(--able-surface, #1E2530);
}

html.dark-mode .able-item-preview-header,
[data-theme="dark"] .able-item-preview-header,
body.dark-mode .able-item-preview-header {
  background: var(--able-surface, #1E2530);
  border-bottom-color: var(--able-border, #29313B);
}

html.dark-mode .able-item-title,
[data-theme="dark"] .able-item-title,
body.dark-mode .able-item-title,
html.dark-mode .able-specs-header,
[data-theme="dark"] .able-specs-header,
body.dark-mode .able-specs-header,
html.dark-mode .able-spec-value,
[data-theme="dark"] .able-spec-value,
body.dark-mode .able-spec-value,
html.dark-mode .able-price-kpi-box.secondary .able-kpi-value,
[data-theme="dark"] .able-price-kpi-box.secondary .able-kpi-value,
body.dark-mode .able-price-kpi-box.secondary .able-kpi-value,
html.dark-mode .able-inv-code,
[data-theme="dark"] .able-inv-code,
body.dark-mode .able-inv-code {
  color: #FFFFFF !important;
}

html.dark-mode .able-item-gallery-card,
[data-theme="dark"] .able-item-gallery-card,
body.dark-mode .able-item-gallery-card,
html.dark-mode .able-price-kpi-box,
[data-theme="dark"] .able-price-kpi-box,
body.dark-mode .able-price-kpi-box,
html.dark-mode .able-item-specs-card,
[data-theme="dark"] .able-item-specs-card,
body.dark-mode .able-item-specs-card,
html.dark-mode .able-inventory-metric-card,
[data-theme="dark"] .able-inventory-metric-card,
body.dark-mode .able-inventory-metric-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .able-specs-table td,
[data-theme="dark"] .able-specs-table td,
body.dark-mode .able-specs-table td {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .able-close-btn,
[data-theme="dark"] .able-close-btn,
body.dark-mode .able-close-btn {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   ABLE PRO CUSTOMER & VENDOR TABS (.navbar-pills-flat / .customer-tabs)
   Fixes white card in Dark Mode & modernizes vertical tabs
   ========================================================================== */

.navbar-pills-flat,
.customer-tabs,
ul.customer-tabs {
  border-radius: var(--able-radius, 12px) !important;
  border: 1px solid var(--able-border, #E8EBEE) !important;
  background-color: var(--able-surface, #FFFFFF) !important;
  box-shadow: var(--able-card-shadow, 0 4px 20px 0 rgba(0, 0, 0, 0.05)) !important;
  padding: 6px !important;
  margin-bottom: 20px !important;
}

.navbar-pills-flat>li>a,
.customer-tabs>li>a,
ul.customer-tabs>li>a {
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 0 0 3px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--able-text-muted, #5B6B79) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
}

.navbar-pills-flat>li>a:hover,
.customer-tabs>li>a:hover,
ul.customer-tabs>li>a:hover {
  background: var(--able-primary-light, #E6F9F3) !important;
  color: var(--able-primary, #01C38D) !important;
}

.navbar-pills-flat>li.active>a,
.navbar-pills-flat>li.active>a:hover,
.navbar-pills-flat>li.active>a:focus,
.customer-tabs>li.active>a,
.customer-tabs>li.active>a:hover,
.customer-tabs>li.active>a:focus,
ul.customer-tabs>li.active>a,
ul.customer-tabs>li.active>a:hover,
ul.customer-tabs>li.active>a:focus {
  background: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(1, 195, 141, 0.3) !important;
}

.navbar-pills-flat>li.active>a i,
.customer-tabs>li.active>a i {
  color: #FFFFFF !important;
}

/* Dark mode for customer & vendor tabs */
html.dark-mode .navbar-pills-flat,
html.dark-mode .customer-tabs,
html.dark-mode ul.customer-tabs,
[data-theme="dark"] .navbar-pills-flat,
[data-theme="dark"] .customer-tabs,
[data-theme="dark"] ul.customer-tabs,
body.dark-mode .navbar-pills-flat,
body.dark-mode .customer-tabs,
body.dark-mode ul.customer-tabs {
  background-color: var(--able-surface, #1E2530) !important;
  border-color: var(--able-border, #29313B) !important;
  box-shadow: var(--able-card-shadow, none) !important;
}

html.dark-mode .navbar-pills-flat>li>a,
html.dark-mode .customer-tabs>li>a,
html.dark-mode ul.customer-tabs>li>a,
[data-theme="dark"] .navbar-pills-flat>li>a,
[data-theme="dark"] .customer-tabs>li>a,
[data-theme="dark"] ul.customer-tabs>li>a,
body.dark-mode .navbar-pills-flat>li>a,
body.dark-mode .customer-tabs>li>a,
body.dark-mode ul.customer-tabs>li>a {
  color: #CBD5E1 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html.dark-mode .navbar-pills-flat>li>a:hover,
html.dark-mode .customer-tabs>li>a:hover,
html.dark-mode ul.customer-tabs>li>a:hover,
[data-theme="dark"] .navbar-pills-flat>li>a:hover,
[data-theme="dark"] .customer-tabs>li>a:hover,
[data-theme="dark"] ul.customer-tabs>li>a:hover,
body.dark-mode .navbar-pills-flat>li>a:hover,
body.dark-mode .customer-tabs>li>a:hover,
body.dark-mode ul.customer-tabs>li>a:hover {
  background: rgba(1, 195, 141, 0.15) !important;
  color: #FFFFFF !important;
}

html.dark-mode .navbar-pills-flat>li.active>a,
html.dark-mode .navbar-pills-flat>li.active>a:hover,
html.dark-mode .navbar-pills-flat>li.active>a:focus,
html.dark-mode .customer-tabs>li.active>a,
html.dark-mode .customer-tabs>li.active>a:hover,
html.dark-mode .customer-tabs>li.active>a:focus,
[data-theme="dark"] .navbar-pills-flat>li.active>a,
[data-theme="dark"] .customer-tabs>li.active>a,
body.dark-mode .navbar-pills-flat>li.active>a,
body.dark-mode .customer-tabs>li.active>a {
  background: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(1, 195, 141, 0.4) !important;
}

/* ==========================================================================
   ABLE PRO INPUT-GROUP ALIGNMENT (PREVENTS DETACHED / OVERFLOWING BUTTONS)
   ========================================================================== */

.input-group {
  display: flex !important;
  width: 100% !important;
  position: relative !important;
  align-items: stretch !important;
}

.input-group>.form-control,
.input-group>select.form-control,
.input-group>select {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  box-sizing: border-box !important;
}

.input-group>textarea.form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.input-group>.input-group-btn,
.input-group>.input-group-addon {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.input-group>.input-group-btn>.btn,
.input-group>.input-group-addon>.btn,
.input-group>.input-group-btn>button,
.input-group>.input-group-addon {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

/* Standardize form inputs height across vendor form and common forms */
.vendor-form input.form-control,
.vendor-form select.form-control,
.vendor-form .bootstrap-select>.btn.dropdown-toggle,
.customer-form input.form-control,
.customer-form select.form-control,
.customer-form .bootstrap-select>.btn.dropdown-toggle {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Dark mode for input group addons & buttons */
html.dark-mode .input-group-addon,
html.dark-mode .input-group-btn>.btn:not(.btn-primary),
[data-theme="dark"] .input-group-addon,
[data-theme="dark"] .input-group-btn>.btn:not(.btn-primary),
body.dark-mode .input-group-addon,
body.dark-mode .input-group-btn>.btn:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
}

html.dark-mode .input-group-btn>.btn:not(.btn-primary):hover,
[data-theme="dark"] .input-group-btn>.btn:not(.btn-primary):hover,
body.dark-mode .input-group-btn>.btn:not(.btn-primary):hover {
  background: rgba(1, 195, 141, 0.18) !important;
  border-color: var(--able-primary, #01C38D) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   DROPDOWN & SELECTPICKER Z-INDEX ELEVATION / STACKING CONTEXT FIX
   Ensures dropdowns (especially with data-container="body") float above all cards/inputs
   ========================================================================== */

/* Elevate bootstrap-select dropdowns & body containers */
.bs-container,
.bs-container.dropdown,
.bootstrap-select.bs-container,
body>.bootstrap-select.bs-container,
body>.bs-container {
  z-index: 1000050 !important;
}

.bs-container .dropdown-menu,
.bootstrap-select.bs-container .dropdown-menu,
body>.bootstrap-select.bs-container .dropdown-menu,
body>.bs-container .dropdown-menu {
  z-index: 1000060 !important;
}

.bootstrap-select.open {
  z-index: 1060 !important;
}

.bootstrap-select.open>.dropdown-menu {
  z-index: 1070 !important;
}

/* Dark mode support for body-attached selectpicker containers */
html.dark-mode .bs-container .dropdown-menu,
[data-theme="dark"] .bs-container .dropdown-menu,
body.dark-mode .bs-container .dropdown-menu {
  background-color: var(--able-surface, #1E2530) !important;
  background: var(--able-surface, #1E2530) !important;
  border-color: var(--able-border, #29313B) !important;
  color: var(--able-text-dark, #F1F5F9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .bs-container .dropdown-menu li a,
[data-theme="dark"] .bs-container .dropdown-menu li a,
body.dark-mode .bs-container .dropdown-menu li a {
  color: var(--able-text-dark, #CBD5E1) !important;
}

html.dark-mode .bs-container .dropdown-menu li a:hover,
html.dark-mode .bs-container .dropdown-menu li a:focus,
html.dark-mode .bs-container .dropdown-menu li.active a,
html.dark-mode .bs-container .dropdown-menu li.selected a,
[data-theme="dark"] .bs-container .dropdown-menu li a:hover,
[data-theme="dark"] .bs-container .dropdown-menu li a:focus,
[data-theme="dark"] .bs-container .dropdown-menu li.active a,
[data-theme="dark"] .bs-container .dropdown-menu li.selected a {
  background-color: rgba(1, 195, 141, 0.15) !important;
  color: #01C38D !important;
}

html.dark-mode .bs-container .bs-searchbox {
  background: var(--able-surface, #1E2530) !important;
  border-bottom: 1px solid var(--able-border, #29313B) !important;
}

html.dark-mode .bs-container .bs-searchbox input.form-control,
html.dark-mode .bs-container .bs-searchbox .form-control {
  background-color: var(--able-bg, #141A21) !important;
  color: var(--able-text-dark, #F1F5F9) !important;
  border: 1px solid var(--able-border, #29313B) !important;
}

/* Base hierarchy for form sections and cards: top card floats above items card */
._transaction_form .pur-top-row,
._transaction_form .pur-request-top-card,
.pur-top-row,
.pur-request-top-card {
  position: relative !important;
  z-index: 25 !important;
}

._transaction_form .pur-items-row,
._transaction_form .pur-request-items-card,
.pur-items-row,
.pur-request-items-card {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   Universal Panel Default & Otros Cargos Dark Mode Styling
   ========================================================================== */

html.dark-mode .panel-default,
body.dark-mode .panel-default,
[data-theme="dark"] .panel-default,
html.dark-mode #hacienda-oc-wrapper .panel,
body.dark-mode #hacienda-oc-wrapper .panel,
[data-theme="dark"] #hacienda-oc-wrapper .panel,
html.dark-mode #hacienda-nd-oc-wrapper,
body.dark-mode #hacienda-nd-oc-wrapper,
[data-theme="dark"] #hacienda-nd-oc-wrapper {
  background-color: #141822 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
}

html.dark-mode .panel-default>.panel-heading,
body.dark-mode .panel-default>.panel-heading,
[data-theme="dark"] .panel-default>.panel-heading,
html.dark-mode #hacienda-oc-wrapper .panel-heading,
body.dark-mode #hacienda-oc-wrapper .panel-heading,
[data-theme="dark"] #hacienda-oc-wrapper .panel-heading,
html.dark-mode #hacienda-nd-oc-wrapper .panel-heading,
body.dark-mode #hacienda-nd-oc-wrapper .panel-heading,
[data-theme="dark"] #hacienda-nd-oc-wrapper .panel-heading {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  padding: 11px 16px !important;
}

html.dark-mode .panel-default>.panel-heading i,
body.dark-mode .panel-default>.panel-heading i,
[data-theme="dark"] .panel-default>.panel-heading i,
html.dark-mode #hacienda-oc-wrapper .panel-heading i,
body.dark-mode #hacienda-oc-wrapper .panel-heading i,
[data-theme="dark"] #hacienda-oc-wrapper .panel-heading i,
html.dark-mode #hacienda-nd-oc-wrapper .panel-heading i,
body.dark-mode #hacienda-nd-oc-wrapper .panel-heading i,
[data-theme="dark"] #hacienda-nd-oc-wrapper .panel-heading i {
  color: var(--able-primary, #01C38D) !important;
  margin-right: 6px;
}

html.dark-mode .panel-default>.panel-body,
body.dark-mode .panel-default>.panel-body,
[data-theme="dark"] .panel-default>.panel-body,
html.dark-mode #hacienda-oc-wrapper .panel-body,
body.dark-mode #hacienda-oc-wrapper .panel-body,
[data-theme="dark"] #hacienda-oc-wrapper .panel-body,
html.dark-mode #hacienda-nd-oc-wrapper .panel-body,
body.dark-mode #hacienda-nd-oc-wrapper .panel-body,
[data-theme="dark"] #hacienda-nd-oc-wrapper .panel-body {
  background-color: transparent !important;
  color: #E2E8F0 !important;
  border-radius: 0 0 12px 12px !important;
}

html.dark-mode #hacienda-oc-wrapper .checkbox label,
body.dark-mode #hacienda-oc-wrapper .checkbox label,
[data-theme="dark"] #hacienda-oc-wrapper .checkbox label,
html.dark-mode #hacienda-oc-wrapper label,
body.dark-mode #hacienda-oc-wrapper label,
[data-theme="dark"] #hacienda-oc-wrapper label,
html.dark-mode #hacienda-nd-oc-wrapper label,
body.dark-mode #hacienda-nd-oc-wrapper label,
[data-theme="dark"] #hacienda-nd-oc-wrapper label {
  color: #E2E8F0 !important;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

html.dark-mode #hacienda-oc-wrapper input[type="checkbox"],
body.dark-mode #hacienda-oc-wrapper input[type="checkbox"] {
  accent-color: var(--able-primary, #01C38D);
  cursor: pointer;
}

html.dark-mode #hacienda-oc-wrapper .form-control,
body.dark-mode #hacienda-oc-wrapper .form-control,
[data-theme="dark"] #hacienda-oc-wrapper .form-control {
  background-color: #0E121A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

html.dark-mode #hacienda-oc-wrapper .form-control:focus,
body.dark-mode #hacienda-oc-wrapper .form-control:focus,
[data-theme="dark"] #hacienda-oc-wrapper .form-control:focus {
  border-color: var(--able-primary, #01C38D) !important;
  box-shadow: 0 0 0 2px rgba(1, 195, 141, 0.25) !important;
}

html.dark-mode #hacienda-oc-wrapper select.form-control option,
body.dark-mode #hacienda-oc-wrapper select.form-control option,
[data-theme="dark"] #hacienda-oc-wrapper select.form-control option {
  background-color: #141822 !important;
  color: #FFFFFF !important;
}

html.dark-mode #hacienda_oc_buscar_btn,
body.dark-mode #hacienda_oc_buscar_btn,
[data-theme="dark"] #hacienda_oc_buscar_btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark-mode #hacienda_oc_buscar_btn:hover,
body.dark-mode #hacienda_oc_buscar_btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* New task relation button styling */
a.new-task-relation,
a[onclick*="new_task_from_relation"] {
  background: var(--able-primary, #01C38D) !important;
  background-color: var(--able-primary, #01C38D) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

a.new-task-relation *,
a[onclick*="new_task_from_relation"] * {
  color: #ffffff !important;
}

a.new-task-relation:hover,
a[onclick*="new_task_from_relation"]:hover {
  opacity: 0.92 !important;
  color: #ffffff !important;
}

/* Ensure proper spacing between toolbar action buttons */
._buttons>.btn.pull-left,
._buttons>a.pull-left,
._buttons>button.pull-left,
._buttons .new-invoice-list {
  margin-right: 10px !important;
}

/* Flex gap utilities in headers/toolbars */
.gap-1 {
  gap: 4px !important;
}

.gap-2 {
  gap: 8px !important;
}

.gap-3 {
  gap: 12px !important;
}

.gap-4 {
  gap: 16px !important;
}

.gap-5 {
  gap: 20px !important;
}

/* ==========================================================================
   DARK MODE — PANEL HEADING & FOOTER (modal "Registrar pago" and similar)
   Covers .panel_s > .panel-heading and .panel-footer that Bootstrap renders
   with a hard-coded light background not overridden elsewhere.
   ========================================================================== */

html.dark-mode .panel_s>.panel-heading,
body.dark-mode .panel_s>.panel-heading,
[data-theme="dark"] .panel_s>.panel-heading,
html.dark-mode .panel-heading,
body.dark-mode .panel-heading,
[data-theme="dark"] .panel-heading {
  background-color: #141822 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

html.dark-mode .panel_s>.panel-heading .panel-title,
body.dark-mode .panel_s>.panel-heading .panel-title,
[data-theme="dark"] .panel_s>.panel-heading .panel-title,
html.dark-mode .panel-heading .panel-title,
body.dark-mode .panel-heading .panel-title,
[data-theme="dark"] .panel-heading .panel-title {
  color: #FFFFFF !important;
}

html.dark-mode .panel_s>.panel-footer,
body.dark-mode .panel_s>.panel-footer,
[data-theme="dark"] .panel_s>.panel-footer,
html.dark-mode .panel-footer,
body.dark-mode .panel-footer,
[data-theme="dark"] .panel-footer {
  background-color: #141822 !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Ticket conversation and details follow the active Able Pro surface tokens. */
.able-ticket-conversation,
.able-ticket-details {
  background: var(--able-surface, #fff) !important;
  border-color: var(--able-border, #e8ebee) !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.04);
}

.able-ticket-details-header {
  background: var(--able-surface, #fff) !important;
  border-color: var(--able-border, #e8ebee) !important;
}

body.dark-mode .able-ticket-conversation,
body.dark-mode .able-ticket-details,
body.dark-mode .able-ticket-details-header,
[data-theme="dark"] .able-ticket-conversation,
[data-theme="dark"] .able-ticket-details,
[data-theme="dark"] .able-ticket-details-header {
  background: var(--able-surface, #1d2630) !important;
  border-color: var(--able-border, #29313b) !important;
}

/* Public support ticket: clear hierarchy for ticket details, reply composer and history. */
body.customers .able-public-ticket {
  margin-top: 26px;
  margin-bottom: 36px;
  color: var(--able-text-dark, #1e293b);
}

.able-public-ticket .able-ticket-layout {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
}

.able-public-ticket .able-ticket-layout > [class*="col-"] {
  float: none;
}

.able-public-ticket .ticket-info > h4,
.able-public-ticket .able-ticket-thread > h4 {
  margin: 0 0 12px !important;
  color: var(--able-text-dark, #1e293b) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.4;
}

.able-public-ticket .able-ticket-details,
.able-public-ticket .single-ticket-reply-area,
.able-public-ticket .able-ticket-conversation {
  overflow: hidden;
  border: 1px solid var(--able-border, #e8ebee) !important;
  border-radius: 14px !important;
  background: var(--able-surface, #fff) !important;
  box-shadow: 0 5px 18px rgba(19, 25, 32, 0.05) !important;
}

.able-public-ticket .able-ticket-details .panel-body,
.able-public-ticket .single-ticket-reply-area .panel-body,
.able-public-ticket .able-ticket-conversation .panel-body {
  padding: 20px !important;
  background: transparent !important;
  color: var(--able-text-dark, #1e293b) !important;
}

.able-public-ticket .able-ticket-details h4.tw-font-medium {
  margin: 0 0 12px !important;
  color: var(--able-text-dark, #1e293b) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.able-public-ticket .able-ticket-details .tw-divide-y > p,
.able-public-ticket .able-ticket-details .tw-divide-y > div {
  border-color: var(--able-border, #e8ebee) !important;
}

.able-public-ticket .able-ticket-details .tw-text-neutral-500,
.able-public-ticket .able-ticket-author .text-muted {
  color: var(--able-text-muted, #64748b) !important;
}

/* Let select menus escape the modal frame instead of clipping at its footer. */
.modal-content {
  overflow: visible !important;
}

.modal .bootstrap-select .dropdown-menu,
.modal .select2-dropdown,
.modal .ui-selectmenu-menu {
  z-index: 1060 !important;
}

.able-public-ticket .able-ticket-details .tw-text-neutral-700 {
  color: var(--able-text-dark, #1e293b) !important;
}

.able-public-ticket .single-ticket-reply-area textarea.form-control {
  min-height: 150px;
  padding: 12px 14px;
  resize: vertical;
  border: 1px solid var(--able-border, #e8ebee) !important;
  border-radius: 10px !important;
  background: var(--able-bg, #f8f9fa) !important;
  color: var(--able-text-dark, #1e293b) !important;
  box-shadow: none !important;
}

.able-public-ticket .single-ticket-reply-area textarea.form-control:focus {
  border-color: var(--able-primary, #4680ff) !important;
  box-shadow: 0 0 0 3px rgba(var(--able-primary-rgb, 70, 128, 255), 0.14) !important;
}

.able-public-ticket .single-ticket-reply-area .control-label {
  color: var(--able-text-muted, #64748b) !important;
  font-size: 12px;
  font-weight: 600;
}

.able-public-ticket .alert-warning {
  border: 1px solid #f2d68a !important;
  border-left: 4px solid #e5a900 !important;
  border-radius: 10px !important;
  background: #fffbeb !important;
  color: #713f12 !important;
}

.able-public-ticket .able-ticket-separator {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--able-border, #e8ebee);
}

.able-public-ticket .single-ticket-reply-area .panel-footer,
.able-public-ticket .able-ticket-conversation .panel-footer {
  padding: 12px 20px !important;
  border-color: var(--able-border, #e8ebee) !important;
  background: var(--able-bg, #f8f9fa) !important;
}

.able-public-ticket .single-ticket-reply-area .btn-primary {
  min-height: 40px;
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--able-primary, #4680ff) !important;
  box-shadow: 0 4px 12px rgba(var(--able-primary-rgb, 70, 128, 255), 0.22) !important;
}

.able-public-ticket .able-ticket-conversation {
  margin-bottom: 18px;
}

.able-public-ticket .able-ticket-conversation .panel-heading {
  padding: 15px 20px !important;
  border-color: var(--able-border, #e8ebee) !important;
  background: var(--able-bg, #f8f9fa) !important;
}

.able-public-ticket .able-ticket-conversation .panel-title {
  color: var(--able-text-dark, #1e293b) !important;
  font-size: 16px;
  font-weight: 650;
}

.able-public-ticket .able-ticket-author {
  border-color: var(--able-border, #e8ebee) !important;
  color: var(--able-text-dark, #1e293b) !important;
  overflow-wrap: anywhere;
}

.able-public-ticket .able-ticket-message-body {
  min-width: 0;
  color: var(--able-text-dark, #1e293b) !important;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.able-public-ticket .able-ticket-message-body img {
  max-width: 100% !important;
  height: auto !important;
}

.able-public-ticket .able-ticket-message-body table {
  max-width: 100%;
}

.able-public-ticket .client-reply .panel-body {
  background: var(--able-surface, #fff) !important;
  color: var(--able-text-dark, #1e293b) !important;
}

.able-public-ticket .client-reply .panel-footer {
  color: var(--able-text-muted, #64748b) !important;
}

html.dark-mode .able-public-ticket .able-ticket-details .tw-text-neutral-500,
html.dark-mode .able-public-ticket .able-ticket-author .text-muted,
body.customers.dark-mode .able-public-ticket .able-ticket-details .tw-text-neutral-500,
body.customers.dark-mode .able-public-ticket .able-ticket-author .text-muted,
[data-theme="dark"] .able-public-ticket .able-ticket-details .tw-text-neutral-500,
[data-theme="dark"] .able-public-ticket .able-ticket-author .text-muted {
  color: var(--able-text-muted, #94a3b8) !important;
}

html.dark-mode .able-public-ticket .able-ticket-details .tw-text-neutral-700,
html.dark-mode .able-public-ticket .able-ticket-details h4,
html.dark-mode .able-public-ticket .able-ticket-message-body,
body.customers.dark-mode .able-public-ticket .able-ticket-details .tw-text-neutral-700,
body.customers.dark-mode .able-public-ticket .able-ticket-details h4,
body.customers.dark-mode .able-public-ticket .able-ticket-message-body,
[data-theme="dark"] .able-public-ticket .able-ticket-details .tw-text-neutral-700,
[data-theme="dark"] .able-public-ticket .able-ticket-details h4,
[data-theme="dark"] .able-public-ticket .able-ticket-message-body {
  color: var(--able-text-dark, #f8fafc) !important;
}

html.dark-mode .able-public-ticket .client-reply .panel-body,
body.customers.dark-mode .able-public-ticket .client-reply .panel-body,
[data-theme="dark"] .able-public-ticket .client-reply .panel-body {
  background: var(--able-surface, #1d2630) !important;
  color: var(--able-text-dark, #f8fafc) !important;
}

html.dark-mode .able-public-ticket .alert-warning,
body.customers.dark-mode .able-public-ticket .alert-warning,
[data-theme="dark"] .able-public-ticket .alert-warning {
  border-color: rgba(245, 187, 66, 0.28) !important;
  border-left-color: #e5a900 !important;
  background: #282315 !important;
  color: #f7dcb3 !important;
}

html.dark-mode .able-public-ticket .able-ticket-message-body,
body.customers.dark-mode .able-public-ticket .able-ticket-message-body,
[data-theme="dark"] .able-public-ticket .able-ticket-message-body {
  color: var(--able-text-dark, #f8fafc) !important;
}

html.dark-mode .able-public-ticket .able-ticket-message-body *,
body.customers.dark-mode .able-public-ticket .able-ticket-message-body *,
[data-theme="dark"] .able-public-ticket .able-ticket-message-body * {
  color: inherit !important;
}

html.dark-mode .able-public-ticket .able-ticket-message-body a,
body.customers.dark-mode .able-public-ticket .able-ticket-message-body a,
[data-theme="dark"] .able-public-ticket .able-ticket-message-body a {
  color: #91b4ff !important;
}

@media (min-width: 992px) {
  .able-public-ticket .ticket-info {
    position: sticky;
    top: 88px;
    align-self: flex-start;
  }
}

@media (max-width: 767px) {
  body.customers .able-public-ticket {
    margin-top: 16px;
  }

  .able-public-ticket .able-ticket-layout > [class*="col-"] {
    width: 100%;
  }

  .able-public-ticket .able-ticket-details .panel-body,
  .able-public-ticket .single-ticket-reply-area .panel-body,
  .able-public-ticket .able-ticket-conversation .panel-body {
    padding: 16px !important;
  }

  .able-public-ticket .able-ticket-author {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--able-border, #e8ebee);
  }
}