/* ==========================================================================
   PERFEX CRM - MASTER CUSTOM OVERRIDES (2026 EDITION)
   Cleaned, Consolidated, and Mobile-Optimized UX/UI
   ========================================================================== */

:root {
  /* --- Colors (Modern Slate & Blue Palette) --- */
  --theme-primary: #2563eb;
  --theme-primary-hover: #1d4ed8;
  --theme-primary-soft: rgba(37, 99, 235, 0.15);
  
  --theme-bg: #f8fafc;
  --theme-surface: #ffffff;
  --theme-surface-hover: #f1f5f9;
  
  --theme-text-strong: #0f172a;
  --theme-text: #334155;
  --theme-text-muted: #64748b;
  --theme-placeholder: #94a3b8;
  
  --theme-border: #e2e8f0;
  --theme-border-input: #cbd5e1;
  --theme-border-hover: #cbd5e1;
  
  --theme-success: #10b981;
  --theme-danger: #ef4444;
  --theme-warning: #f59e0b;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.15);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
  
  --input-height-desktop: 44px;
  --input-height-mobile: 48px;
  
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bd-page-head, .bd-header-wrapper, .rm-page-head, .wf-detached-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px !important;
}

.bd-page-title, .rm-page-title, h4.no-margin {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--theme-text-strong) !important;
  line-height: 1.2 !important;
}

.bd-page-subtitle, p.text-muted, .rm-page-subtitle {
  margin-top: 6px !important;
  color: var(--theme-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

:is(.panel_s, .card, .panel, .client-sidebar-card) {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
  transition: box-shadow 0.2s ease !important;
  overflow: visible !important;
}
.panel_s:hover { box-shadow: var(--shadow-md) !important; }
.panel-body, .card-body { padding: 24px !important; }

.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--input-height-desktop) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  text-transform: none !important;
  cursor: pointer;
}
.btn > i, .btn > svg { margin: 0 !important; font-size: 16px !important; }

.btn-primary, .btn-info { background-color: var(--theme-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-info:hover {
  background-color: var(--theme-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.4) !important;
}

.btn-default { background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border-input) !important; }
.btn-default:hover, .btn-default:focus { background-color: var(--theme-surface-hover) !important; color: var(--theme-text-strong) !important; border-color: #94a3b8 !important; }

.btn-danger { background-color: var(--theme-danger) !important; color: #fff !important; }
.btn-danger:hover { background-color: #dc2626 !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important; }
.btn-success { background-color: var(--theme-success) !important; color: #fff !important; }

:is(.btn-icon, .bd-icon-action, .contracts-row-options a, .bd-icon-btn) {
  width: 38px !important; height: 38px !important; min-height: 38px !important;
  padding: 0 !important; border-radius: var(--radius-sm) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--theme-surface) !important; border: 1px solid var(--theme-border-input) !important; color: var(--theme-text-muted) !important;
}
:is(.btn-icon, .bd-icon-action, .contracts-row-options a, .bd-icon-btn):hover { background: var(--theme-bg) !important; color: var(--theme-primary) !important; border-color: var(--theme-border-input) !important; }

.bd-icon-btn-danger,
.contracts-row-options a._delete,
.bd-project-row-actions .bd-icon-btn-danger {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
.bd-icon-btn-danger:hover,
.contracts-row-options a._delete:hover,
.bd-project-row-actions .bd-icon-btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

:is(.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], textarea, select, .form-select, .bootstrap-select > .dropdown-toggle) {
  display: block !important;
  width: 100% !important;
  min-height: var(--input-height-desktop) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--theme-text-strong) !important;
  background-color: var(--theme-surface) !important;
  border: 1px solid var(--theme-border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: var(--transition) !important;
  appearance: none;
}
textarea.form-control { min-height: 100px !important; resize: vertical; }

:is(.form-control, textarea, select, .bootstrap-select > .dropdown-toggle):focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--theme-primary) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
  background-color: var(--theme-surface) !important;
  z-index: 5;
}

::placeholder,
.form-control::placeholder,
textarea::placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner,
.bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option {
  color: var(--theme-placeholder) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.bootstrap-select .filter-option-inner-inner { color: var(--theme-text-strong) !important; }

.input-group { display: flex !important; align-items: stretch !important; width: 100% !important; border-radius: var(--radius-md) !important; box-shadow: none !important; }
.input-group-addon, .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  padding: 0 14px !important;
  background-color: var(--theme-surface-hover) !important;
  color: var(--theme-text-muted) !important;
  border: 1px solid var(--theme-border-input) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.input-group > :is(.input-group-addon, .input-group-text):first-child {
  border-right: 0 !important;
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
  border-top-left-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important;
}
.input-group > :is(.form-control, .bootstrap-select > .dropdown-toggle):not(:first-child) {
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}
.input-group > :is(.input-group-addon, .input-group-text):last-child {
  border-left: 0 !important;
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important;
}
.input-group > :is(.form-control, .bootstrap-select > .dropdown-toggle):not(:last-child) {
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}

.bootstrap-select { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; }
.bootstrap-select.form-control { border: 0 !important; padding: 0 !important; min-height: 0 !important; }
.bootstrap-select > .dropdown-toggle { display: flex !important; align-items: center !important; padding-right: 36px !important; }
select.form-control:not([multiple]), select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}

.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  background-color: var(--theme-surface) !important;
  overflow: visible !important;
}
.modal-header {
  background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%) !important;
  border-bottom: 0 !important;
  padding: 20px 24px !important;
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.modal-title { font-weight: 800 !important; color: #ffffff !important; font-size: 18px !important; margin: 0 !important; }
.modal-header .modal-title { flex: 1 1 auto !important; min-width: 0 !important; }
.modal-header .close,
.modal-header .btn-close {
  margin: 0 0 0 auto !important;
  float: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  opacity: .92 !important;
  text-shadow: none !important;
  transform: translateY(0) !important;
  position: relative !important;
  top: 0 !important;
}
.modal-header .close:hover,
.modal-header .btn-close:hover {
  opacity: 1 !important;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(200%) !important;
}
.modal-body { padding: 24px !important; color: var(--theme-text) !important; background-color: #fcfcfc !important; }
.modal-footer {
  background-color: var(--theme-bg) !important;
  border-top: 1px solid var(--theme-border) !important;
  padding: 16px 24px !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}
.modal .bootstrap-select, .modal .bootstrap-select.show { z-index: 1065 !important; }
.modal .bootstrap-select .dropdown-menu { z-index: 1066 !important; }

:is(.nav-tabs, .nav-pills, .custom-nav-pills, .horizontal-scrollable-tabs .nav-pills) {
  display: flex !important; flex-wrap: nowrap !important; gap: 8px !important;
  background: var(--theme-surface-hover) !important; padding: 6px !important;
  border-radius: var(--radius-md) !important; border: none !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
:is(.nav-tabs, .nav-pills)::-webkit-scrollbar { display: none; }
:is(.nav-tabs, .nav-pills) > li { margin: 0 !important; flex: 0 0 auto; }
:is(.nav-tabs, .nav-pills) > li > a {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important;
  color: var(--theme-text-muted) !important; background: transparent !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  white-space: nowrap; transition: var(--transition) !important;
}
:is(.nav-tabs, .nav-pills) > li.active > a, :is(.nav-tabs, .nav-pills) > li > a:hover {
  background-color: var(--theme-surface) !important; color: var(--theme-primary) !important; box-shadow: var(--shadow-sm) !important;
}

.dataTables_wrapper { width: 100%; overflow-x: auto; }
table.dataTable {
  width: 100% !important; background: var(--theme-surface) !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  border: 1px solid var(--theme-border-input) !important; border-radius: var(--radius-md) !important;
  margin-bottom: 20px !important; box-shadow: var(--shadow-sm) !important;
}
table.dataTable thead th {
  background: var(--theme-bg) !important; color: var(--theme-text-muted) !important;
  font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important;
  letter-spacing: 0.05em !important; padding: 16px 20px !important;
  border-bottom: 1px solid var(--theme-border-input) !important; border-top: none !important;
}
table.dataTable tbody td {
  padding: 16px 20px !important; font-size: 14px !important; color: var(--theme-text) !important;
  border-bottom: 1px solid var(--theme-surface-hover) !important; vertical-align: middle !important;
}
table.dataTable tbody tr:hover td { background-color: var(--theme-surface-hover) !important; }
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable thead th.sorting::before, table.dataTable thead th.sorting::after { display: none !important; }

.dataTables_wrapper .row.bd-dt-toolbar, .dataTables_wrapper .row:first-child {
  display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: space-between !important; gap: 16px !important; margin-bottom: 16px !important;
}
.dataTables_filter { margin: 0 !important; }
.dataTables_filter label { font-size: 0 !important; margin: 0 !important; }
.dataTables_filter input {
  height: var(--input-height-desktop) !important; min-width: 280px !important; max-width: 100% !important;
  border-radius: var(--radius-md) !important; border: 1px solid var(--theme-border-input) !important;
  padding: 10px 14px 10px 38px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center !important;
}

.badge, .label { border-radius: var(--radius-pill) !important; font-weight: 700 !important; padding: 4px 10px !important; font-size: 11px !important; letter-spacing: 0.03em; text-transform: uppercase; }

/* KPI cards (global) */
.bd-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

.bd-kpi-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.bd-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  opacity: .95;
}

.bd-kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--theme-border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

.bd-kpi-val {
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.bd-kpi-label {
  display: inline-flex !important;
  align-items: center !important;
  max-width: calc(100% - 56px) !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bd-kpi-icon {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
}

.kpi-green.bd-kpi-card::before { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.kpi-green .bd-kpi-icon { color: #15803d !important; background: #dcfce7 !important; }
.kpi-orange.bd-kpi-card::before { background: linear-gradient(90deg, #fb923c, #f97316) !important; }
.kpi-orange .bd-kpi-icon { color: #c2410c !important; background: #ffedd5 !important; }
.kpi-red.bd-kpi-card::before { background: linear-gradient(90deg, #f87171, #ef4444) !important; }
.kpi-red .bd-kpi-icon { color: #b91c1c !important; background: #fee2e2 !important; }
.kpi-gray.bd-kpi-card::before { background: linear-gradient(90deg, #94a3b8, #64748b) !important; }
.kpi-gray .bd-kpi-icon { color: #475569 !important; background: #e2e8f0 !important; }
.kpi-info.bd-kpi-card::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important; }
.kpi-info .bd-kpi-icon { color: #0369a1 !important; background: #e0f2fe !important; }

/* Expenses totals KPI cards (admin/expenses) */
#stats-top {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#expenses_total > dl {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 22px 0 !important;
}

#expenses_total > dl > div {
  position: relative !important;
  overflow: hidden !important;
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

#expenses_total > dl > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  opacity: .95;
}

#expenses_total > dl > div:hover {
  transform: translateY(-2px) !important;
  border-color: var(--theme-border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

#expenses_total > dl > div:nth-child(1)::before { background: linear-gradient(90deg, #fb923c, #f97316) !important; }
#expenses_total > dl > div:nth-child(2)::before { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
#expenses_total > dl > div:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #d97706) !important; }
#expenses_total > dl > div:nth-child(4)::before { background: linear-gradient(90deg, #f87171, #ef4444) !important; }
#expenses_total > dl > div:nth-child(5)::before { background: linear-gradient(90deg, #34d399, #10b981) !important; }

#expenses_total dt {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
  color: #64748b !important;
}

#expenses_total dd {
  margin: 0 !important;
}

#expenses_total dd > div {
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

/* Expenses top filters (year/currency) compact toolbar */
#expenses_total > .tw-inline-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 0 10px 0 !important;
}

#expenses_total .simple-bootstrap-select {
  display: inline-flex !important;
  align-items: center !important;
}

#expenses_total .simple-bootstrap-select .bootstrap-select {
  width: auto !important;
  min-width: 88px !important;
}

#expenses_total .simple-bootstrap-select .bootstrap-select > .dropdown-toggle {
  min-height: 32px !important;
  height: 32px !important;
  padding: 4px 30px 4px 10px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#expenses_total .simple-bootstrap-select .bootstrap-select .filter-option-inner-inner {
  font-size: 13px !important;
  line-height: 20px !important;
  color: #0f172a !important;
}

#expenses_total .simple-bootstrap-select .bootstrap-select > .dropdown-toggle .bs-caret,
#expenses_total .simple-bootstrap-select .bootstrap-select > .dropdown-toggle .caret {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

body > .float-alert.alert {
  position: fixed !important; top: 24px !important; right: 24px !important; max-width: 420px !important;
  background: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important; padding: 16px 20px !important; display: flex !important; align-items: center !important; gap: 12px !important;
  z-index: 10850 !important; backdrop-filter: blur(8px);
}

.bd-contract-chat-panel { border: 1px solid var(--theme-border-input); border-radius: var(--radius-lg); background: var(--theme-surface); padding: 16px; }
.bd-contract-chat-bubble { border-radius: var(--radius-md); padding: 12px 16px; background: var(--theme-surface-hover); border: 1px solid var(--theme-border); font-size: 14px; }
.bd-contract-chat-item.is-outgoing .bd-contract-chat-bubble { background: #dcfce7; border-color: #86efac; }

/* Flatpickr year input fix (global input overrides should not break month/year controls) */
.flatpickr-calendar input,
.flatpickr-calendar select {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  width: 6.5ch !important;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  width: 100% !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  :is(.form-control, input, select, textarea, .btn, .bootstrap-select > .dropdown-toggle, .input-group-addon, .input-group-text, .dataTables_filter input) {
    font-size: 16px !important;
    min-height: var(--input-height-mobile) !important;
  }

  .btn { width: 100% !important; margin-bottom: 8px !important; }
  :is(.btn-icon, .bd-icon-action, .contracts-row-options a, .bd-icon-btn) { width: 48px !important; height: 48px !important; min-height: 48px !important; }
  .bd-page-head { flex-direction: column; align-items: flex-start !important; }

  .dataTables_wrapper .dataTables_filter { text-align: left !important; margin-bottom: 16px !important; width: 100% !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; max-width: 100% !important; }

  #expenses_total > dl {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }

  #expenses_total > dl > div {
    flex: 0 0 220px !important;
    min-height: 104px !important;
    padding: 14px !important;
  }

  #expenses_total dd > div { font-size: 24px !important; }

  #expenses_total > .tw-inline-flex {
    justify-content: flex-start !important;
  }

  .bd-kpi-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
  }

  .bd-kpi-card {
    flex: 0 0 220px !important;
    min-height: 104px !important;
    padding: 14px !important;
  }

  .bd-kpi-val { font-size: 24px !important; }
  .bd-kpi-label { max-width: calc(100% - 50px) !important; font-size: 10px !important; min-height: 24px !important; }
  .bd-kpi-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; top: 12px !important; right: 12px !important; }
}

/* =====================================================================
   COMPATIBILITY PATCHES PRESERVED FROM LEGACY FILE
   ===================================================================== */

/* Workforce page headers */
.wf-admin-page .panel_s > .panel-body > .clearfix:first-child,
.wf-admin-page .panel_s > .panel-body > .d-flex.align-items-start.justify-content-between:first-child {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px 0;
}

.wf-admin-page .panel_s > .panel-body > .clearfix:first-child .pull-left,
.wf-admin-page .panel_s > .panel-body > .clearfix:first-child .pull-right {
  float: none !important;
}

.wf-admin-page .panel_s > .panel-body h4.no-margin {
  margin: 0 !important;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #0f172a;
  line-height: 1.2;
}

.wf-admin-page .wf-detached-head {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

@media (max-width: 767.98px) {
  .wf-admin-page .panel_s > .panel-body > .clearfix:first-child,
  .wf-admin-page .panel_s > .panel-body > .d-flex.align-items-start.justify-content-between:first-child {
    align-items: flex-start;
  }
  .wf-admin-page .wf-detached-head {
    align-items: flex-start;
  }
  .wf-admin-page .panel_s > .panel-body h4.no-margin {
    font-size: 22px;
  }
}

/* ==========================================================================
   7. INVOICES TABLE TOOLBAR (DESKTOP ONE-ROW ALIGNMENT)
   ========================================================================== */
@media (min-width: 992px) {
  #small-table .dataTables_wrapper > .row:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  #small-table .dataTables_wrapper > .row:first-child > .col-sm-6,
  #small-table .dataTables_wrapper > .row:first-child > .col-md-6 {
    float: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #small-table .dataTables_wrapper > .row:first-child > .col-sm-6:first-child,
  #small-table .dataTables_wrapper > .row:first-child > .col-md-6:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #small-table .dataTables_wrapper > .row:first-child > .col-sm-6:last-child,
  #small-table .dataTables_wrapper > .row:first-child > .col-md-6:last-child {
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  #small-table .dataTables_wrapper .dataTables_filter {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #small-table .dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  #small-table .dataTables_wrapper .dataTables_filter input[type="search"] {
    width: 280px !important;
    min-width: 220px !important;
    max-width: 320px !important;
  }

  #small-table .dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
}

/* Hard override: invoices datatable toolbar must stay in one desktop row */
@media (min-width: 992px) {
  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row:first-child,
  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row:first-child > [class*="col-"],
  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar > [class*="col-"] {
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row:first-child > [class*="col-"]:first-child,
  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar > [class*="col-"]:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row:first-child > [class*="col-"]:last-child,
  #small-table .dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar > [class*="col-"]:last-child {
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
  }

  #small-table .dataTables_wrapper .dataTables_filter,
  #small-table .dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  #small-table .dataTables_wrapper .dataTables_filter input[type="search"] {
    width: 260px !important;
    min-width: 220px !important;
    max-width: 280px !important;
  }

  #small-table .dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* Contracts row options */
.table-contracts .badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.contracts-row-options,
.bd-project-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Workforce select arrow consistency */
.wf-admin-page select.form-control:not(.selectpicker),
.wf-admin-page select.form-select,
.wf-profile-grid select.form-control:not(.selectpicker),
.wf-profile-grid select.form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2.45rem !important;
  background-color: #fff !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='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.82rem center !important;
  background-size: 14px 14px !important;
}

/* FINAL DATATABLES PAGINATION FIX V3 */
.dataTables_wrapper .dt-page-jump {
  display: none !important;
}

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

.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button {
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a.page-link {
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  line-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe4ef !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.active > a.page-link,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button > a.page-link.current {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.disabled > a.page-link,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.disabled > a.page-link:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}

/* MOBILE DATATABLE CARDS engine */
.dataTables_wrapper .bd-mobile-cards {
  display: none;
}

.bd-mobile-cards-active .bd-mobile-cards {
  display: grid;
  gap: 8px;
}

.bd-mobile-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 10px 10px 9px;
  position: relative;
}

.bd-mobile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  min-width: 0;
}

.bd-mobile-card-title {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bd-mobile-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  border-top: 1px solid #eef2f7;
  padding-top: 7px;
}

.bd-mobile-action-btn {
  flex: 1 1 0;
  min-width: 40px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #334155 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

@media (max-width: 768px) {
  .dataTables_wrapper.form-inline.dt-bootstrap.bd-mobile-cards-active .table-responsive {
    display: none !important;
  }
}

/* Datatables search toolbar layout compatibility */
.dataTables_wrapper .bulk-actions-btn.bd-dt-bulk-duplicate,
.dataTables_wrapper .bulk-actions-btn.bd-dt-bulk-trigger:not(.bd-dt-bulk-primary) {
  display: none !important;
}

.dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 12px 0 !important;
  width: 100% !important;
}

.dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar > .bd-dt-right .dataTables_filter {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.dataTables_wrapper.form-inline.dt-bootstrap > .row.bd-dt-toolbar > .bd-dt-right .dataTables_filter:not(:first-of-type) {
  display: none !important;
}

/* ==========================================================================
   CONTRACT COMMENTS CHAT (WhatsApp-like layout restore)
   ========================================================================== */
.contract-comments.bd-contract-chat-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 620px;
  background-color: #efeae2 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239baeb8' fill-opacity='0.13'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.contract-comments .bd-contract-chat-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.contract-comments .bd-contract-chat-item {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.contract-comments .bd-contract-chat-item.is-outgoing {
  flex-direction: row-reverse !important;
}

.contract-comments .bd-contract-chat-avatar img,
.contract-comments .bd-contract-chat-avatar .bd-contract-chat-avatar-fallback {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e2e8f0 !important;
  color: #64748b !important;
}

.contract-comments .bd-contract-chat-body {
  max-width: min(78%, 780px);
  min-width: 160px;
}

.contract-comments .bd-contract-chat-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.contract-comments .bd-contract-chat-item.is-outgoing .bd-contract-chat-meta {
  justify-content: flex-end !important;
}

.contract-comments .bd-contract-chat-author {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f766e !important;
}

.contract-comments .bd-contract-chat-time {
  font-size: 10px !important;
  color: #667781 !important;
}

.contract-comments .bd-contract-chat-actions a {
  color: #64748b !important;
  padding: 2px 4px !important;
}

.contract-comments .bd-contract-chat-bubble {
  position: relative !important;
  border-radius: 0 12px 12px 12px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  padding: 10px 12px !important;
  color: #111b21 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.contract-comments .bd-contract-chat-item.is-outgoing .bd-contract-chat-bubble {
  background: #d9fdd3 !important;
  border-color: #bbf7d0 !important;
  border-radius: 12px 0 12px 12px !important;
}

.contract-comments .bd-contract-chat-composer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 12px !important;
  border-top: 1px solid var(--theme-border) !important;
  background: #f0f2f5 !important;
}

.contract-comments .bd-contract-chat-composer textarea {
  flex: 1 !important;
  min-height: 44px !important;
  max-height: 120px !important;
  border-radius: 24px !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  padding: 10px 16px !important;
  resize: none !important;
}

.contract-comments .bd-contract-chat-send {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #00a884 !important;
  border-color: #00a884 !important;
}

.contract-comments .bd-contract-chat-send:hover {
  background: #008f6f !important;
  border-color: #008f6f !important;
}

/* ==========================================================================
   KPI + PLACEHOLDER + TOOLBAR OVERRIDES (requested)
   ========================================================================== */
/* ==========================================================================
   1. KPI KARTICE (Modern SaaS Soft-Float Design)
   ========================================================================== */
.bd-kpi-grid,
#stats-top .tw-grid,
.quick-top-stats .tw-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.bd-kpi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  overflow: hidden !important;
  min-height: 108px !important;
  cursor: pointer;
}

.bd-kpi-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #e2e8f0 !important;
  transition: background 0.3s ease !important;
}

.bd-kpi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.bd-kpi-val {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.03em !important;
}

.bd-kpi-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.bd-kpi-icon {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  transition: transform 0.3s ease !important;
}

.bd-kpi-card:hover .bd-kpi-icon { transform: translateY(-50%) scale(1.1) !important; }

.kpi-blue .bd-kpi-icon { background: #eff6ff !important; color: #3b82f6 !important; }
.kpi-blue:hover::before { background: #3b82f6 !important; }

.kpi-green .bd-kpi-icon { background: #f0fdf4 !important; color: #10b981 !important; }
.kpi-green:hover::before { background: #10b981 !important; }

.kpi-orange .bd-kpi-icon { background: #fff7ed !important; color: #f59e0b !important; }
.kpi-orange:hover::before { background: #f59e0b !important; }

.kpi-red .bd-kpi-icon { background: #fef2f2 !important; color: #ef4444 !important; }
.kpi-red:hover::before { background: #ef4444 !important; }

.kpi-gray .bd-kpi-icon { background: #f8fafc !important; color: #64748b !important; }
.kpi-gray:hover::before { background: #64748b !important; }

/* ==========================================================================
   2. UNIFIED TOOLBAR
   ========================================================================== */
.dataTables_wrapper .row.bd-dt-toolbar,
.dataTables_wrapper > .row:first-child {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  background: #f8fafc !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
}

.dataTables_wrapper .col-md-6:first-child, .bd-dt-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto;
  flex-wrap: wrap !important;
}

.dataTables_wrapper .col-md-6:last-child, .bd-dt-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* ==========================================================================
   3. PRETRAGA I PLACEHOLDER
   ========================================================================== */
.dataTables_filter { margin: 0 !important; width: auto !important; max-width: 320px; }
.dataTables_filter label { font-size: 0 !important; margin: 0 !important; width: 100%; }

.dataTables_filter input[type="search"] {
  height: 44px !important;
  width: 100% !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  background-image: none !important;
}

/* Fix: when DT search uses input-group (icon + input), don't force pill radius */
.dataTables_filter .input-group input[type="search"]{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

/* Make icon box same height + perfect vertical centering */
.dataTables_filter .input-group .input-group-addon,
.dataTables_filter .input-group .input-group-text{
  min-height: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Prevent double borders on the join */
.dataTables_filter .input-group .input-group-addon{
  border-right: 0 !important;
}

.dataTables_filter input[type="search"]::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.dataTables_filter input[type="search"]:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: none !important;
}

/* ==========================================================================
   4. IZVOZ I MASOVNE RADNJE
   ========================================================================== */
.dt-buttons, .bd-dt-buttons { display: flex !important; gap: 8px !important; margin: 0 !important; }

.dt-buttons .btn,
.bulk-actions-btn {
  height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
}

.dt-buttons .btn i, .bulk-actions-btn i {
  font-size: 14px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

.dt-buttons .btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}
.dt-buttons .btn:hover i { color: #3b82f6 !important; }

.bulk-actions-btn {
  background-color: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}
.bulk-actions-btn i { color: #ef4444 !important; }

.bulk-actions-btn:hover {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
  transform: translateY(-1px);
}
.bulk-actions-btn:hover i { color: #ffffff !important; }

/* Prikazi samo jedan bulk actions gumb */
.dataTables_wrapper .bulk-actions-btn.bd-dt-bulk-duplicate,
.dataTables_wrapper .bulk-actions-btn.bd-dt-bulk-trigger:not(.bd-dt-bulk-primary) {
  display: none !important;
}

/* ==========================================================================
   5. BROJ STRANICA (Length Dropdown)
   ========================================================================== */
.dataTables_length { display: inline-flex !important; align-items: center !important; margin: 0 !important; }
.dataTables_length label {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 13px !important; font-weight: 500 !important; color: #64748b !important; margin: 0 !important;
}

.dataTables_length select,
.dataTables_length .bootstrap-select > .dropdown-toggle {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 32px 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.2s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

/* Fix: bootstrap-select already has caret; remove our SVG arrow only for bootstrap-select */
.dataTables_length .bootstrap-select > .dropdown-toggle {
  background-image: none !important;
  position: relative !important;
  padding-right: 44px !important; /* space for caret */
}

/* Place caret nicely (no overlay over text) */
.dataTables_length .bootstrap-select > .dropdown-toggle .caret {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Ensure label text doesn't sit under the caret */
.dataTables_length .bootstrap-select .filter-option {
  padding-right: 22px !important;
}

.dataTables_length select:hover,
.dataTables_length .bootstrap-select > .dropdown-toggle:hover { border-color: #94a3b8 !important; }
.dataTables_length select:focus { border-color: #3b82f6 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; }

/* ==========================================================================
   6. MOBILNA OPTIMIZACIJA
   ========================================================================== */
@media (max-width: 768px) {
  .bd-kpi-grid, #stats-top .tw-grid, .quick-top-stats .tw-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bd-kpi-grid::-webkit-scrollbar { display: none; }
  .bd-kpi-card {
    flex: 0 0 85% !important;
    min-width: 260px !important;
    scroll-snap-align: center;
  }

  .dataTables_wrapper .row.bd-dt-toolbar, .dataTables_wrapper > .row:first-child {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 12px !important;
  }
  .dataTables_wrapper .col-md-6:first-child, .bd-dt-left {
    justify-content: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .dt-buttons { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr; }
  .dt-buttons .btn, .bulk-actions-btn { width: 100% !important; height: 48px !important; }

  .dataTables_length { justify-content: space-between !important; }
  .dataTables_length select { height: 48px !important; }

  .dataTables_wrapper .col-md-6:last-child, .bd-dt-right {
    justify-content: flex-end !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  .dataTables_filter { max-width: 100% !important; }
  .dataTables_filter input[type="search"] {
    min-width: 100% !important;
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
  }
}
/* ==========================================================
   BD INVOICES – HEADER ACTIONS (MOBILE FIRST OVERRIDES)
   ========================================================== */
.bd-invoices-page .bd-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.bd-invoices-page .bd-page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.bd-invoices-page .bd-page-actions .btn {
  width: auto !important;            /* override global .btn { width:100% } */
  margin-bottom: 0 !important;       /* override global margin-bottom */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.bd-invoices-page .bd-page-actions .bd-icon-btn {
  width: 42px !important;
  min-width: 42px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 768px) {
  /* override global .bd-page-head { flex-direction: column } */
  .bd-invoices-page .bd-page-head {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* keep actions on one line; allow horizontal scroll instead of wrapping */
  .bd-invoices-page .bd-page-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }

  /* keep header buttons compact (override min-height rule) */
  .bd-invoices-page .bd-page-actions .btn {
    min-height: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 520px) {
  .bd-invoices-page .bd-btn-text { display: none !important; }
}

/* ==========================================================
   BD INVOICES – MOBILE DATATABLE TOOLBAR LAYOUT (SEARCH TOP)
   ========================================================== */
@media (max-width: 768px) {
  /* Target only invoices page */
  .bd-invoices-page .dataTables_wrapper > .row:first-child,
  .bd-invoices-page .dataTables_wrapper .row.bd-dt-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Put search column first and full width */
  .bd-invoices-page .dataTables_wrapper > .row:first-child .col-md-6:last-child,
  .bd-invoices-page .dataTables_wrapper .row.bd-dt-toolbar .bd-dt-right {
    order: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  .bd-invoices-page .dataTables_filter {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Controls row under search: single-line + horizontal scroll */
  .bd-invoices-page .dataTables_wrapper > .row:first-child .col-md-6:first-child,
  .bd-invoices-page .dataTables_wrapper .row.bd-dt-toolbar .bd-dt-left {
    order: 2 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }

  .bd-invoices-page .dataTables_wrapper > .row:first-child .col-md-6:first-child::-webkit-scrollbar,
  .bd-invoices-page .dataTables_wrapper .row.bd-dt-toolbar .bd-dt-left::-webkit-scrollbar {
    display: none;
  }

  /* Stop dt-buttons from becoming big grid buttons on mobile */
  .bd-invoices-page .dt-buttons {
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
  }

  .bd-invoices-page .dt-buttons .btn,
  .bd-invoices-page .bulk-actions-btn {
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
  }

  /* Make length dropdown compact */
  .bd-invoices-page .dataTables_length select,
  .bd-invoices-page .dataTables_length .bootstrap-select > .dropdown-toggle {
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 12px !important;
    padding-right: 36px !important;
  }

  /* Match search height to controls (keeps toolbar visually tight) */
  .bd-invoices-page .dataTables_filter input[type="search"] {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }
}

/* Keep invoice lock/recurring icons on one line in invoice number cell */
.bd-invoices-page .bd-invoice-num-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.bd-invoices-page .bd-invoice-num-badges .bd-invoice-num-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ==========================================================
   BD INVOICES – ICON ONLY TOOLBAR BUTTONS (MOBILE)
   ========================================================== */
@media (max-width: 520px) {
  .bd-invoices-page .dt-buttons .btn,
  .bd-invoices-page .dataTables_wrapper .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* Hide text labels on dt-buttons + refresh/export-style buttons */
  .bd-invoices-page .dt-buttons .btn .bd-btn-text,
  .bd-invoices-page .dataTables_wrapper .btn .bd-btn-text {
    display: none !important;
  }

  /* If text is not wrapped, hide any direct text nodes by shrinking font */
  .bd-invoices-page .dt-buttons .btn,
  .bd-invoices-page .dataTables_wrapper .btn.btn-default {
    font-size: 0 !important;
  }
  .bd-invoices-page .dt-buttons .btn i,
  .bd-invoices-page .dataTables_wrapper .btn.btn-default i {
    font-size: 16px !important;
  }

  /* Make icon buttons square-ish */
  .bd-invoices-page .dt-buttons .btn,
  .bd-invoices-page .dataTables_wrapper .btn.btn-default {
    width: 42px !important;
    min-width: 42px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Setup > submenu icons visibility on light background */
#setup-menu-wrapper #setup-menu > li > ul.nav-second-level > li > a i.menu-icon {
  color: #475569 !important;
}
#setup-menu-wrapper #setup-menu > li > ul.nav-second-level > li > a:hover i.menu-icon,
#setup-menu-wrapper #setup-menu > li > ul.nav-second-level > li.active > a i.menu-icon {
  color: #0f172a !important;
}

/* ==========================================================
   BD INVOICES – STICKY (PINNED) COLUMNS
   ========================================================== */
.bd-invoices-page .panel-table-full{
  overflow-x: auto !important; /* ensure sticky has a scroll parent */
  -webkit-overflow-scrolling: touch;
}

.bd-invoices-page table.table-invoices{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Base sticky */
.bd-invoices-page .bd-sticky-col,
.bd-invoices-page .bd-sticky-col-2,
.bd-invoices-page .bd-sticky-col-3{
  position: sticky !important;
  background: var(--theme-surface) !important;
  z-index: 3;
}

/* Header above body */
.bd-invoices-page thead th.bd-sticky-col,
.bd-invoices-page thead th.bd-sticky-col-2,
.bd-invoices-page thead th.bd-sticky-col-3{
  z-index: 6 !important;
}

/* Left offsets (set by JS) */
.bd-invoices-page .bd-sticky-col{ left: 0 !important; }
.bd-invoices-page .bd-sticky-col-2{ left: var(--bd-sticky-left-2, 44px) !important; }
.bd-invoices-page .bd-sticky-col-3{ left: var(--bd-sticky-left-3, 220px) !important; }

/* Nice separator so you SEE pinned area */
.bd-invoices-page td.bd-sticky-col,
.bd-invoices-page td.bd-sticky-col-2,
.bd-invoices-page td.bd-sticky-col-3{
  box-shadow: 1px 0 0 var(--theme-border) !important;
}

/* Optional: soften overlap when zebra rows exist */
.bd-invoices-page tbody tr:hover td.bd-sticky-col,
.bd-invoices-page tbody tr:hover td.bd-sticky-col-2,
.bd-invoices-page tbody tr:hover td.bd-sticky-col-3{
  background: var(--theme-surface-hover) !important;
}

/* ==========================================================
   BD INVOICES – STICKY RIGHT ACTIONS + ACTION BTN STYLE
   ========================================================== */
.bd-invoices-page .bd-sticky-right{
  position: sticky !important;
  right: 0 !important;
  background: var(--theme-surface) !important;
  z-index: 5;
  box-shadow: -1px 0 0 var(--theme-border) !important; /* separator */
}
.bd-invoices-page thead th.bd-sticky-right{
  z-index: 8 !important;
}

/* Make actions column look like premium icon buttons */
.bd-invoices-page td[data-bd-col="actions"],
.bd-invoices-page th[data-bd-col="actions"]{
  white-space: nowrap;
}

.bd-invoices-page .table-invoices .btn.btn-default.btn-icon,
.bd-invoices-page .table-invoices .btn.btn-default{
  border-radius: 12px !important;
}

.bd-invoices-page .table-invoices .btn.btn-default.btn-icon,
.bd-invoices-page .table-invoices .btn.btn-default.btn-icon:focus{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--theme-border) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

.bd-invoices-page .table-invoices .btn.btn-default.btn-icon:hover{
  background: var(--theme-surface-hover) !important;
  border-color: var(--theme-border-hover) !important;
}

/* ==========================================================
   BD INVOICES – BULK ACTIONS BAR
   ========================================================== */
.bd-invoices-page .bd-bulkbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-bottom:12px;
  border:1px solid var(--theme-border);
  background:#fff;
  border-radius:16px;
  box-shadow: var(--shadow-sm);
}

.bd-invoices-page .bd-bulkbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}

.bd-invoices-page .bd-bulkbar-count{
  font-weight:600;
  color:var(--theme-text);
}

.bd-invoices-page .bd-bulkbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.bd-invoices-page .bd-bulkbar .btn{
  height:40px !important;
  min-height:40px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}

@media (max-width: 768px){
  .bd-invoices-page .bd-bulkbar{
    position: sticky;
    top: 8px;
    z-index: 20;
  }
  .bd-invoices-page .bd-bulkbar-actions{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom: 4px;
  }
  .bd-invoices-page .bd-bulkbar-actions::-webkit-scrollbar{ display:none; }
}

@media (max-width: 520px){
  .bd-invoices-page .bd-bulkbar .bd-btn-text{ display:none !important; }
  .bd-invoices-page .bd-bulkbar .btn{
    width:42px !important;
    min-width:42px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ==========================================================
   BD INVOICES – BULK BAR DROPDOWN "MORE"
   ========================================================== */
.bd-invoices-page #bdInvoiceBulkBar .bd-bulkbar-more .dropdown-menu{
  border-radius: 14px !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 8px !important;
  min-width: 220px !important;
}

.bd-invoices-page #bdInvoiceBulkBar .bd-bulkbar-more .dropdown-menu a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

.bd-invoices-page #bdInvoiceBulkBar .bd-bulkbar-more .dropdown-menu a:hover{
  background: var(--theme-surface-hover) !important;
}

.bd-invoices-page #bdInvoiceBulkBar .bd-bulkbar-more .dropdown-menu i{
  width:18px;
  text-align:center;
}

/* Mobile icon-only already handled by .bd-btn-text rule in bulkbar,
   but ensure dropdown button stays square-ish */
@media (max-width: 520px){
  .bd-invoices-page #bdInvoiceBulkBar .bd-bulkbar-more .btn{
    width:42px !important;
    min-width:42px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ============================
   BD INVOICES – MOBILE HEADER FIX
   ============================ */
@media (max-width: 768px){
  .bd-invoices-page .bd-inv-head{
    flex-direction: row !important;         /* override global column */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .bd-invoices-page .bd-page-actions{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .bd-invoices-page .bd-page-actions-scroll{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }
  .bd-invoices-page .bd-page-actions-scroll::-webkit-scrollbar{ display:none; }

  .bd-invoices-page .bd-page-actions-primary,
  .bd-invoices-page .bd-page-actions-tools{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  /* override global: .btn { width:100% } */
  .bd-invoices-page .bd-page-actions .btn{
    width: auto !important;
    margin-bottom: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* icon tool buttons compact */
  .bd-invoices-page .bd-page-actions-tools .bd-icon-btn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
}

@media (max-width: 520px){
  .bd-invoices-page .bd-page-actions-primary .bd-btn-text{ display:none !important; }
  .bd-invoices-page .bd-page-actions-primary .btn{
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.bd-invoices-page table.table-invoices thead th{
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--theme-text-muted) !important;
  padding: 12px 12px !important;
}

.bd-invoices-page table.table-invoices tbody td{
  padding: 14px 12px !important;
  vertical-align: middle !important;
}

.bd-invoices-page table.table-invoices tbody tr:hover td{
  background: var(--theme-surface-hover) !important;
}

.bd-invoices-page table.table-invoices td:nth-child(1),
.bd-invoices-page table.table-invoices th:nth-child(1){
  width: 44px;
}

/* ===========================================
   BD INVOICES – MOBILE HEADER OVERRIDES (HARD)
   =========================================== */
@media (max-width: 768px){
  .bd-invoices-page .bd-page-head{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .bd-invoices-page .bd-page-actions{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .bd-invoices-page .bd-page-actions-scroll{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }
  .bd-invoices-page .bd-page-actions-scroll::-webkit-scrollbar{ display:none; }

  /* kill global .btn { width:100% } */
  .bd-invoices-page .bd-page-actions .btn{
    width: auto !important;
    margin-bottom: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* tool buttons: always icon */
  .bd-invoices-page .bd-page-actions-tools .bd-btn-text{ display:none !important; }
  .bd-invoices-page .bd-page-actions-tools .bd-icon-btn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
}

@media (max-width: 520px){
  /* primary actions: icon-only */
  .bd-invoices-page .bd-page-actions-primary .bd-btn-text{ display:none !important; }
  .bd-invoices-page .bd-page-actions-primary .btn{
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.bd-invoices-page .panel-table-full{
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.bd-invoices-page .dropdown-menu{
  z-index: 9999 !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md) !important;
}