.sidebar,
#wrapper,
#header {
  transition: margin-left 0.3s ease;
}

#header {
  z-index: 10000;
  margin-left: 260px;
  transition: margin-left 0.3s ease;
}

/* ══════════════════════════════════════════════════
   HEADER — Nav Bar Items
   ══════════════════════════════════════════════════ */

/* Slightly more breathing room between all icon items */
.nav.navbar-nav.navbar-right {
  gap: 2px !important;
  padding-right: 14px !important;
}

/* ── Quick-Create Split Pill ── */
.qc-pill-anchor {
  display: inline-flex;
  align-items: center;
  align-self: center;
  text-decoration: none !important;
  padding: 0 2px;
}

.qc-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(140deg, #2563eb 0%, #3b82f6 100%);
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
  transition: box-shadow 0.2s ease, transform 0.18s ease;
  overflow: hidden;
}

.qc-pill-anchor:hover .qc-pill {
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.52);
  transform: translateY(-1px);
}

.qc-pill-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
}

.qc-pill-icon {
  font-size: 13px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qc-pill-anchor:hover .qc-pill-icon {
  transform: rotate(90deg);
}

.qc-pill-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

.qc-pill-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px 0 7px;
  height: 30px;
  color: rgba(255, 255, 255, 0.85);
}

.qc-pill-chevron {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.open > .qc-pill-anchor .qc-pill-chevron {
  transform: rotate(180deg);
}

/* ── Notification bell ── */
/* padding-based hover — no fixed w/h so fa-lg icon is never clipped */
.header-notifications .notifications-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 10px;
  transition: background 0.15s !important;
  color: #6b7280;
  text-decoration: none !important;
}

/* cancel the -mt-1.5 that shifts the inner span off-baseline */
.header-notifications .notifications-icon > span {
  margin-top: 0 !important;
}

.header-notifications .notifications-icon i.fa-bell {
  transition: color 0.15s;
}

/* ── Language switcher ── */
.header-languages > a.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 34px !important;
  gap: 5px !important;
  padding: 0 10px !important;
  border-radius: 10px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  transition: background 0.15s, color 0.15s !important;
  text-decoration: none !important;
}

.header-languages > a.dropdown-toggle:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

.header-languages > a.dropdown-toggle i.fa-globe {
  font-size: 17px !important;
  color: #6b7280 !important;
  transition: color 0.15s;
}

.header-languages > a.dropdown-toggle:hover i.fa-globe {
  color: #6b7280 !important;
}

.header-languages > a.dropdown-toggle i.fa-chevron-down {
  font-size: 9px !important;
  color: #9ca3af;
}

/* ── User profile button ── */
.header-user-profile > a.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  padding: 4px 8px 4px 4px !important;
  transition: background 0.15s !important;
  text-decoration: none !important;
  height: auto !important;
}

.header-user-profile > a.dropdown-toggle:hover {
  background: #f3f4f6 !important;
}

.header-user-profile > a.dropdown-toggle img {
  border: 2px solid #e5e7eb;
  transition: border-color 0.15s;
}

.header-user-profile > a.dropdown-toggle:hover img {
  border-color: #d1d5db;
}

/* ══════════════════════════════════════════════════
   Finance Overview: Modern Progress Bar Layout
   ══════════════════════════════════════════════════ */

/* ── Finance Overview: Modern Progress Bar Layout ── */
.finance-summary .finance-stat-row {
  margin-bottom: 2px;
}

.finance-summary .finance-stat-row a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Reset old overlay trick that relied on negative margin */
.finance-summary .progress-finance-status {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Progress bar base overrides for finance section */
.finance-summary .progress {
  box-shadow: none !important;
}

.finance-summary .progress .progress-bar {
  box-shadow: none !important;
  transition: width 0.6s ease;
}

/* ── Finance Overview: KPI Cards ── */
#invoices_total dl {
  margin-top: 4px;
}

@media (max-width: 767px) {
  #invoices_total dl {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #invoices_total dl {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════
   DASHBOARD CALENDAR — Modern Premium Redesign
   ══════════════════════════════════════════════════ */

/* FullCalendar v5 CSS variable overrides (dashboard scope) */
#calendar .fc {
  --fc-border-color: #e2e8f0;
  --fc-today-bg-color: #eff6ff;
  --fc-highlight-color: #dbeafe;
  --fc-event-border-color: transparent;
  --fc-event-text-color: #fff;
  --fc-neutral-bg-color: #f8fafc;
  --fc-neutral-text-color: #6b7280;
}

/* ── Panel card wrapper ── */
.widget:has(#calendar) .panel_s {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* ── Toolbar ── */
#calendar .fc-toolbar.fc-header-toolbar {
  margin-bottom: 18px !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#calendar .fc-toolbar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
}

/* ── All buttons: clean base ── */
#calendar .fc-button {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#calendar .fc-button:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

#calendar .fc-button:focus,
#calendar .fc-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* ── Active view button (Month / Week / Day) ── */
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(37,99,235,0.28) !important;
}

/* ── Prev / Next — blue pill ── */
#calendar .fc-button.fc-prev-button,
#calendar .fc-button.fc-next-button,
#calendar .fc-prev-button.fc-button-primary,
#calendar .fc-next-button.fc-button-primary {
  padding: 6px 10px !important;
  background-color: #2563eb !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25) !important;
}

#calendar .fc-button.fc-prev-button:hover,
#calendar .fc-button.fc-next-button:hover,
#calendar .fc-prev-button.fc-button-primary:hover,
#calendar .fc-next-button.fc-button-primary:hover {
  background-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.35) !important;
}

#calendar .fc-prev-button .fc-icon,
#calendar .fc-next-button .fc-icon {
  font-size: 13px !important;
}

/* ── Button groups ── */
#calendar .fc-button-group {
  gap: 4px !important;
}

#calendar .fc-button-group .fc-button {
  border-radius: 8px !important;
}

/* ── Column headers (SUN MON TUE …) ── */
#calendar .fc-col-header-cell {
  background: #f8fafc !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#calendar .fc-col-header-cell-cushion {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  padding: 0 !important;
}

/* ── Day number ── */
#calendar .fc-daygrid-day-number {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
  line-height: 1 !important;
}

/* Current-month days — darker */
#calendar .fc-daygrid-day:not(.fc-day-other) .fc-daygrid-day-number {
  color: #475569 !important;
}

/* ── Today cell ── */
#calendar .fc-day-today {
  background-color: #eff6ff !important;
}

#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number,
#calendar .fc-daygrid-day.fc-day-today a.fc-daygrid-day-number,
#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-top a {
  background: #2563eb !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* ── Other-month cells ── */
#calendar .fc-day-other {
  background-color: #f8fafc !important;
}

#calendar .fc-day-other .fc-daygrid-day-number {
  color: #d1d5db !important;
}

/* ── Grid / scrollgrid ── */
#calendar .fc-scrollgrid {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#calendar .fc td,
#calendar .fc th {
  border-color: #e2e8f0 !important;
}

/* ── Events ── */
#calendar .fc-event {
  border-radius: 5px !important;
  border: none !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 2px 7px !important;
  cursor: pointer;
  transition: opacity 0.14s, filter 0.14s !important;
}

#calendar .fc-event:hover {
  opacity: 0.86 !important;
  filter: brightness(0.94);
}

#calendar .fc-event .fc-event-title {
  font-weight: 500 !important;
}

/* ── "+N more" link ── */
#calendar .fc-more-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  transition: all 0.14s !important;
}

#calendar .fc-more-link:hover {
  color: #334155 !important;
  background: #f1f5f9 !important;
  text-decoration: none !important;
}

/* ── Popover ── */
#calendar .fc-popover {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

#calendar .fc-popover-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 8px 12px !important;
}

#calendar .fc-popover-close {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* ── Calendar filter panel ── */
#calendar_filters {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

#calendar_filters .checkbox label {
  font-size: 12.5px !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

#calendar_filters hr { display: none; }

#calendar_filters .btn-default {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  border-color: #e2e8f0 !important;
  color: #374151 !important;
}

#calendar_filters .btn-success {
  background: #2563eb !important;
  border-color: #2563eb !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════
   USER DATA WIDGET — Complete Modern Redesign
   ══════════════════════════════════════════════════ */

/* ── Panel Container ── */
.user-data.panel_s {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
  overflow: hidden;
}

/* ── Panel Header ── */
.ud-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.ud-panel-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ud-panel-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, #2563eb 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.ud-panel-head-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.3;
}
.ud-panel-head-sub {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0 0 !important;
}

/* ── Tab Content spacing ── */
.ud-tab-content {
  padding-top: 14px !important;
}

/* ── Segmented Tab: Notification Badge (red pill) ── */
.user-data .nav-tabs-horizontal .badge.dash-badge {
  background-color: #ef4444 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 20px !important;
  min-width: 16px !important;
  line-height: 14px !important;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── "View All" Link ── */
.user-data a.dash-view-all {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  opacity: 1;
  transition: opacity 0.15s;
}

.user-data a.dash-view-all:hover {
  opacity: 0.75;
}

/* ── Tab Content Padding ── */
.user-data .home-activity .tab-content {
  padding-left: 4px;
  padding-right: 4px;
}

/* ── DataTable: Search Input & Length Select ── */

/* Left toolbar gap */
.user-data .dataTables_length { margin-right: 6px; }
.user-data .dt-buttons .btn + .btn { margin-left: 4px; }

.user-data .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Search — unified input-group box */
.user-data .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.user-data .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.user-data .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

.user-data .dataTables_filter input[type="search"],
.user-data .dataTables_filter input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  background: transparent !important;
  min-width: 180px;
}

.user-data .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* ── Tab Navigation: Modern Underline Style ── */
.user-data .nav-tabs-horizontal.nav-tabs-segmented {
  border-bottom: 2px solid #f1f5f9 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li > a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 16px !important;
  margin-bottom: -2px !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap;
}
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li.active > a,
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li.active > a:hover,
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li.active > a:focus {
  color: #2563eb !important;
  border-bottom: 2.5px solid #2563eb !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li > a:hover {
  color: #334155 !important;
  border-bottom-color: #e2e8f0 !important;
  background: transparent !important;
}
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li > a .menu-icon {
  font-size: 12.5px;
  opacity: 0.65;
  margin-right: 2px;
}
.user-data .nav-tabs-horizontal.nav-tabs-segmented > li.active > a .menu-icon {
  opacity: 1;
  color: #2563eb;
}

/* ── Empty State ── */
.ud-empty-state {
  padding: 36px 0 44px;
  text-align: center;
}
.ud-empty-illus {
  display: flex;
  justify-content: center;
  margin: 0 auto 18px;
}
.ud-empty-illus svg {
  display: block;
}
.ud-empty-icon {
  width: 80px;
  height: 80px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.ud-empty-icon i {
  font-size: 28px;
  color: #2563eb;
}
.ud-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.ud-empty-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 auto 22px;
  max-width: 280px;
  line-height: 1.6;
}
.ud-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2563eb;
  color: #fff !important;
  border-radius: 9px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ud-empty-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   PROPOSAL REDESIGN — Modern Professional UI
   ══════════════════════════════════════════════════ */

/* ── Page Header Bar ── */
.proposal-redesign .proposal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.proposal-redesign .proposal-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Header icon box ── */
.proposal-redesign .proposal-header-icon-wrap {
  width: 46px;
  height: 46px;
  background: #2563eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
}

/* ── Header subtitle ── */
.proposal-redesign .proposal-page-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1.4;
}

.proposal-redesign .proposal-page-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.proposal-redesign .proposal-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a2332;
  letter-spacing: -0.01em;
}

.proposal-redesign .proposal-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.proposal-redesign .proposal-merge-hint {
  margin: 0;
  font-size: 12px;
  color: #8a96a3;
  margin-right: 6px;
}

/* ── Action Buttons ── */
.proposal-redesign .proposal-btn-primary {
  background: var(--btn-p-bg);
  border: 1px solid var(--btn-p-border);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: var(--btn-p-shadow);
}

.proposal-redesign .proposal-btn-primary:hover,
.proposal-redesign .proposal-btn-primary:focus {
  background: var(--btn-p-bg-h);
  border-color: var(--btn-p-border-h);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.28);
}

.proposal-redesign .proposal-btn-secondary {
  background: #fff;
  border: 1.5px solid #d1d9e0;
  color: #374151;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  transition: background 0.15s, border-color 0.15s;
}

.proposal-redesign .proposal-btn-secondary:hover,
.proposal-redesign .proposal-btn-secondary:focus {
  background: #f8fafc;
  border-color: #9ca3af;
  color: #1a2332;
}

/* ── Main Card ── */
.proposal-redesign .proposal-card {
  border-radius: 14px !important;
  border: 1px solid #e8ecf0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03) !important;
  overflow: hidden;
}

.proposal-redesign .proposal-card-body {
  padding: 28px 28px 20px !important;
}

/* ── Two-Column Layout ── */
.proposal-redesign .proposal-form-row {
  margin: 0 -14px;
}

.proposal-redesign .proposal-col {
  padding: 0 14px;
}

.proposal-redesign .proposal-col-left {
  border-right: 1px solid #f0f2f5;
}

/* ── Section Labels ── */
.proposal-redesign .proposal-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid #2563eb;
  border-bottom: none;
}

.proposal-redesign .proposal-section-icon {
  font-size: 13px;
  color: #2563eb;
}

/* ── Form Controls Enhancement ── */
.proposal-redesign .form-group label.control-label,
.proposal-redesign .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.proposal-redesign .form-group .form-control {
  border: 1px solid #d1d9e0;
  border-radius: 8px;
  font-size: 13px;
  color: #1a2332;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fafbfc;
}

.proposal-redesign .form-group .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.09);
  background: #fff;
  outline: none;
}

.proposal-redesign .form-group textarea.form-control {
  border-radius: 8px;
  resize: vertical;
  min-height: 72px;
}

/* ── Bootstrap-select wrapper (border/radius only — no padding/color on button) ── */
.proposal-redesign .bootstrap-select > .dropdown-toggle {
  border: 1px solid #d1d9e0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #fafbfc !important;
}

.proposal-redesign .bootstrap-select.open > .dropdown-toggle,
.proposal-redesign .bootstrap-select > .dropdown-toggle:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.09) !important;
  background: #fff !important;
}

/* ── Tags input ── */
.proposal-redesign .tagsinput {
  border: 1px solid #d1d9e0 !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  min-height: 38px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.proposal-redesign .tagsinput:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.09) !important;
  background: #fff !important;
}

/* ── Toggle row (Allow Comments) ── */
.proposal-redesign .proposal-meta-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
}

/* hide fa-tag icon from Tags label */
.proposal-redesign .proposal-meta-group .form-group label .fa {
  display: none;
}

.proposal-redesign .proposal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #eaecf0;
  border-radius: 10px;
}

.proposal-redesign .proposal-toggle-label span {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* ── Proposal: onoffswitch resized + clip fix ── */
.proposal-redesign .onoffswitch {
  width: 52px;
}
.proposal-redesign .onoffswitch-label {
  position: relative !important;
  overflow: hidden !important;
  height: 28px !important;
  line-height: 28px !important;
  border-radius: 14px !important;
}
.proposal-redesign .onoffswitch-label:before {
  width: 22px !important;
  top: 3px !important;
  bottom: 3px !important;
  right: 27px !important;
  border-radius: 50% !important;
}
.proposal-redesign .onoffswitch-checkbox:checked + .onoffswitch-label:before {
  right: 3px !important;
}

/* ── Right column: address textarea compact ── */
.proposal-redesign .proposal-col-right textarea.form-control {
  min-height: 60px !important;
}

/* ── Right column: tighter row gap for address fields ── */
.proposal-redesign .proposal-col-right .row {
  margin-left: -8px;
  margin-right: -8px;
}
.proposal-redesign .proposal-col-right .row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

/* ── Left column divider: slightly stronger ── */
.proposal-redesign .proposal-col-left {
  border-right: 1px solid #e5e7eb;
}

/* ── Items separator ── */
.proposal-redesign .proposal-items-separator {
  margin: 0 !important;
  border-color: #f0f2f5 !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .proposal-redesign .proposal-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .proposal-redesign .proposal-col-left {
    border-right: none;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .proposal-redesign .proposal-card-body {
    padding: 16px !important;
  }
}

/* ── Proposal: date input-group join fix ── */
.proposal-redesign .input-group.date .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.proposal-redesign .input-group .input-group-addon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-color: #d1d5db !important;
  background: #f8fafc !important;
  color: #6b7280 !important;
}


/* ── Proposal: Add Item input-group join fix ── */
.proposal-redesign .input-group-select .items-select-wrapper {
  display: table-cell;
  width: 100%;
}
.proposal-redesign .input-group-select .items-select-wrapper .bootstrap-select {
  width: 100% !important;
}
.proposal-redesign .input-group-select .items-select-wrapper .bootstrap-select > .dropdown-toggle {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.proposal-redesign .input-group-select .input-group-btn > .btn {
  border-radius: 0 8px 8px 0 !important;
  border-color: #d1d5db !important;
  border-left: 1px solid #d1d5db !important;
  background: #fff !important;
  color: #6b7280 !important;
}

/* Estimate form redesign */
.estimate-redesign {
  --estimate-border: #e5e7eb;
  --estimate-border-strong: #d5dbe3;
  --estimate-bg: #f7f9fc;
  --estimate-panel: #ffffff;
  --estimate-muted: #64748b;
  --estimate-text: #172033;
  --estimate-accent: #2563eb;
  --estimate-accent-soft: #eff6ff;
  --estimate-green-soft: #ecfdf5;
}

.estimate-redesign .estimate-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.estimate-redesign .estimate-page-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

/* ── Page header icon box ── */
.estimate-redesign .estimate-page-header-icon {
  width: 46px;
  height: 46px;
  background: var(--estimate-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
}

/* ── Page subtitle ── */
.estimate-redesign .estimate-page-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1.4;
}

.estimate-redesign .estimate-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--estimate-accent);
  background: var(--estimate-accent-soft);
  border: 1px solid #dbeafe;
  flex-shrink: 0;
}

/* ── Section labels (inside card columns + notes) ── */
.estimate-redesign .estimate-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid var(--estimate-accent);
}

.estimate-redesign .estimate-section-icon {
  font-size: 12px;
  color: var(--estimate-accent);
}

/* ── Notes section: hide duplicate label rendered by render_textarea ── */
.estimate-redesign .estimate-notes-col .form-group > label {
  display: none;
}

.estimate-redesign .estimate-page-title {
  margin: 0;
  color: var(--estimate-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.estimate-redesign .estimate-card.panel_s {
  background: var(--estimate-panel);
  border: 1px solid var(--estimate-border) !important;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.estimate-redesign .estimate-details-body {
  padding: 24px 26px 22px !important;
}

.estimate-redesign .estimate-details-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 22px;
}

.estimate-redesign .estimate-details-primary {
  padding-right: 22px;
}

.estimate-redesign .estimate-details-secondary {
  padding-left: 22px;
  border-left: 1px solid #eef2f7;
}

.estimate-redesign .estimate-meta-panel {
  margin-left: 0 !important;
}

.estimate-redesign .form-group {
  margin-bottom: 16px;
}

.estimate-redesign .form-group label,
.estimate-redesign label.control-label {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}

.estimate-redesign .form-control,
.estimate-redesign .bootstrap-select > .dropdown-toggle,
.estimate-redesign .tagsinput {
  min-height: 36px;
  border: 1px solid var(--estimate-border-strong) !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  color: var(--estimate-text) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.estimate-redesign .form-control:focus,
.estimate-redesign .bootstrap-select.open > .dropdown-toggle,
.estimate-redesign .bootstrap-select > .dropdown-toggle:focus,
.estimate-redesign .tagsinput:focus-within {
  border-color: var(--estimate-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11) !important;
  background-color: #fff !important;
}

.estimate-redesign textarea.form-control {
  min-height: 76px;
  resize: vertical;
}

.estimate-redesign .input-group-addon {
  background: #f8fafc;
  border-color: var(--estimate-border-strong);
  color: #475569;
  font-weight: 600;
}

.estimate-redesign .input-group .form-control,
.estimate-redesign .input-group .bootstrap-select > .dropdown-toggle {
  border-radius: 0 !important;
}

.estimate-redesign .input-group .form-control:first-child,
.estimate-redesign .input-group .bootstrap-select:first-child > .dropdown-toggle,
.estimate-redesign .input-group-select .items-select-wrapper .bootstrap-select > .dropdown-toggle {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

.estimate-redesign .input-group .form-control:last-child,
.estimate-redesign .input-group .bootstrap-select:last-child > .dropdown-toggle {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

.estimate-redesign .input-group-addon:first-child {
  border-right: 0;
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.estimate-redesign .input-group-addon:last-child {
  border-left: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

.estimate-redesign .input-group-select .items-select-wrapper .bootstrap-select > .dropdown-toggle {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.estimate-redesign .input-group-select .items-select-wrapper {
  display: table-cell;
  width: 100%;
}

.estimate-redesign .input-group-select .items-select-wrapper .bootstrap-select {
  width: 100% !important;
}

.estimate-redesign .input-group-select .input-group-btn > .btn {
  min-height: 36px;
  border-color: var(--estimate-border-strong) !important;
  border-radius: 0 7px 7px 0 !important;
  box-shadow: none !important;
}

.estimate-redesign #discount-total .form-control {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

.estimate-redesign .estimate-address-row {
  margin-top: 6px;
  margin-bottom: 6px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.estimate-redesign .estimate-address-row p.bold {
  color: var(--estimate-text);
  font-size: 12px;
  margin-bottom: 8px;
}

.estimate-redesign .estimate-address-row address {
  color: var(--estimate-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

.estimate-redesign .edit_shipping_billing_info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 7px;
  color: var(--estimate-accent);
  background: var(--estimate-accent-soft);
}

.estimate-redesign .estimate-section-separator {
  margin: 0 !important;
  border-color: #eef2f7 !important;
}

.estimate-redesign .estimate-items-body {
  padding: 22px 26px 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.estimate-redesign .estimate-items-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  row-gap: 12px;
}

.estimate-redesign .items-wrapper {
  margin-bottom: 0 !important;
}

.estimate-redesign .show_quantity_as_wrapper {
  color: #475569;
  font-size: 13px;
}

.estimate-redesign .show_quantity_as_wrapper .mtop10 {
  margin-top: 2px !important;
}

.estimate-redesign .show_quantity_as_wrapper span {
  font-weight: 600;
}

.estimate-redesign .show_quantity_as_wrapper .radio-inline {
  margin-left: 10px;
}

.estimate-redesign .estimate-items-table-wrap {
  border: 1px solid var(--estimate-border);
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}

.estimate-redesign .estimate-items-table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.estimate-redesign .estimate-items-table thead > tr > th {
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px;
  font-weight: 700;
  border-color: var(--estimate-border) !important;
  padding: 10px 12px !important;
}

.estimate-redesign .estimate-items-table tbody > tr > td {
  border-color: #edf1f6 !important;
  background: #fff;
  padding: 14px 10px !important;
  vertical-align: top;
}

.estimate-redesign .estimate-items-table tbody > tr.main > td {
  background: #fbfdff;
}

.estimate-redesign .estimate-items-table textarea.form-control {
  min-height: 76px;
}

.estimate-redesign .estimate-items-table .input-transparent {
  margin-top: 6px;
  min-height: 28px;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--estimate-muted) !important;
}

.estimate-redesign .estimate-items-table .btn.btn-primary {
  border-radius: 7px !important;
  min-width: 38px;
  min-height: 34px;
}

.estimate-redesign .estimate-totals-wrap {
  margin-top: 22px;
}

.estimate-redesign .estimate-totals-table {
  margin-top: 0 !important;
  background: #fff;
  border: 1px solid var(--estimate-border);
  border-radius: 8px;
  overflow: hidden;
}

.estimate-redesign .estimate-totals-table > tbody > tr > td {
  border-color: #edf1f6 !important;
  padding: 12px 14px !important;
  vertical-align: middle;
}

.estimate-redesign .estimate-totals-table > tbody > tr:last-child > td {
  background: #f8fafc;
  color: var(--estimate-text);
  font-weight: 700;
}

.estimate-redesign .estimate-notes-body {
  padding: 24px 26px 26px !important;
  background: #fff;
}

.estimate-redesign .btn-bottom-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.estimate-redesign .btn-bottom-toolbar .btn {
  min-height: 36px;
  border-radius: 7px !important;
  font-weight: 700;
}

.estimate-redesign .btn-bottom-toolbar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
}

.estimate-redesign .btn-bottom-toolbar .btn-primary:hover,
.estimate-redesign .btn-bottom-toolbar .btn-primary:focus {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

@media (max-width: 991px) {
  .estimate-redesign .estimate-details-primary,
  .estimate-redesign .estimate-details-secondary {
    padding-left: 15px;
    padding-right: 15px;
  }

  .estimate-redesign .estimate-details-secondary {
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .estimate-redesign .estimate-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .estimate-redesign .estimate-details-body,
  .estimate-redesign .estimate-items-body,
  .estimate-redesign .estimate-notes-body {
    padding: 18px !important;
  }

  .estimate-redesign .estimate-items-toolbar {
    display: block;
  }

  .estimate-redesign .show_quantity_as_wrapper {
    text-align: left !important;
    margin-top: 12px;
  }

  .estimate-redesign .estimate-totals-wrap {
    margin-left: 0;
    width: 100%;
  }
}

.user-data .dataTables_filter label,
.user-data .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* ── DataTable: Column Headers ── */
.user-data table.dataTable thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 12px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* ── DataTable: Body Rows ── */
.user-data table.dataTable tbody > tr > td {
  padding: 10px 12px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: #374151;
  border-top: 1px solid #f3f4f6 !important;
}

.user-data table.dataTable tbody > tr:hover > td {
  background-color: #f8fafc !important;
}

/* ── DataTable: Pagination ── */
.user-data .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

.user-data .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

.user-data .dataTables_paginate .paginate_button.current,
.user-data .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

.user-data .dataTables_paginate .paginate_button.disabled,
.user-data .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

.user-data .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

/* ── Activity Feed — Modern Timeline ── */
.user-data .dash-activity-feed {
  padding: 4px 0 0;
}

.user-data .dash-activity-feed .feed-item {
  padding-left: 28px;
  padding-bottom: 16px;
  border-left: 2px solid #e2e8f0;
  position: relative;
}

.user-data .dash-activity-feed .feed-item:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}

/* Filled circle node */
.user-data .dash-activity-feed .feed-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #bfdbfe;
}

/* Timestamp */
.user-data .dash-activity-feed .feed-item .date {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
  top: 0;
}

/* Staff name */
.user-data .dash-activity-feed .feed-item .activity-user {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

/* Description text */
.user-data .dash-activity-feed .feed-item .activity-desc {
  display: block;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 1px;
}

/* ── Status/Priority Labels in Tables (soft pill upgrade) ── */
.user-data .label {
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════
   SUBSCRIPTIONS PAGE — Modern Billing Dashboard
   ══════════════════════════════════════════════════ */

/* Action bar */
.subscriptions-page .subs-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* New Subscription button */
.subscriptions-page .subs-new-btn.btn.btn-primary {
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 1px 3px rgba(59,130,246,0.18) !important;
}

/* Main panel */
.subscriptions-page .subs-panel.panel_s {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* Section header */
.subscriptions-page .subs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.subscriptions-page .subs-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.subscriptions-page .subs-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #635bff;
}
.subscriptions-page .subs-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}
.subscriptions-page .subs-title-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 1px;
}

/* KPI card grid */
.subscriptions-page .subs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .subscriptions-page .subs-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .subscriptions-page .subs-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual KPI card */
.subscriptions-page .subs-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px 18px;
  position: relative;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.subscriptions-page .subs-kpi-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 16px rgba(99,102,241,0.10);
}

/* Top row: icon + label */
.subscriptions-page .subs-kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Icon box */
.subscriptions-page .subs-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Count */
.subscriptions-page .subs-kpi-count {
  font-size: 32px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Label */
.subscriptions-page .subs-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* Panel separator */
.subscriptions-page .hr-panel-separator {
  margin: 0 -15px 20px;
  border-color: #f1f5f9;
}

/* DataTable wrapper */
.subscriptions-page .panel-table-full {
  overflow-x: auto;
}

/* DataTable controls row — left toolbar gap */
.subscriptions-page .dataTables_wrapper .dataTables_length {
  margin-right: 6px;
}

.subscriptions-page .dataTables_wrapper .dt-buttons .btn + .btn {
  margin-left: 4px;
}

/* Length select */
.subscriptions-page .dataTables_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Search — icon + input unified border box */
.subscriptions-page .dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.subscriptions-page .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #635bff;
  box-shadow: 0 0 0 3px rgba(99,91,255,0.1);
}

.subscriptions-page .dataTables_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

.subscriptions-page .dataTables_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 180px;
}

.subscriptions-page .dataTables_wrapper .dataTables_filter input:focus {
  border: none !important;
  outline: none !important;
}

/* Table header */
.subscriptions-page table.dataTable thead th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  padding: 10px 12px !important;
}

/* Table rows */
.subscriptions-page table.dataTable tbody td {
  border-bottom: 1px solid #f8fafc !important;
  padding: 11px 12px !important;
  font-size: 13px !important;
  color: #374151 !important;
  vertical-align: middle !important;
}
.subscriptions-page table.dataTable tbody tr:hover td {
  background: #f8fafc !important;
}
.subscriptions-page table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Empty state */
.subscriptions-page table.dataTable tbody td.dataTables_empty {
  text-align: center !important;
  padding: 56px 20px !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.subscriptions-page table.dataTable tbody td.dataTables_empty::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background-color: #f5f3ff;
  border-radius: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23635bff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
}

/* Pagination */
.subscriptions-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
}
.subscriptions-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.subscriptions-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #635bff !important;
  border-color: #635bff !important;
  color: #fff !important;
  box-shadow: none !important;
}
.subscriptions-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f5f3ff !important;
  border-color: #e9d5ff !important;
  color: #635bff !important;
}

/* ══════════════════════════════════════════════════
   LATEST PROJECT ACTIVITY — Modern Timeline
   ══════════════════════════════════════════════════ */

/* Panel */
.projects-activity.panel_s {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* Scrollable feed area — height preserved from style.css.
   padding-left gives the absolute-positioned dot room so overflow-y:scroll doesn't clip it. */
.projects-activity .activity-feed.proj-activity-feed {
  padding: 4px 4px 0 14px;
}

/* Timeline item */
.projects-activity .proj-activity-feed .feed-item {
  padding-left: 26px;
  padding-bottom: 18px;
  border-left: 2px solid #e2e8f0;
  position: relative;
}

.projects-activity .proj-activity-feed .feed-item:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}

/* Filled circle node — replaces hollow circle */
.projects-activity .proj-activity-feed .feed-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #bfdbfe;
}

/* Timestamp badge */
.projects-activity .proj-activity-feed .feed-item .date {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
  top: 0;
  position: relative;
}

/* Feed text container */
.projects-activity .proj-activity-feed .feed-item .text {
  top: 0;
  position: relative;
  color: #374151;
}

/* Staff name + description row */
.projects-activity .proj-act-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Staff / contact name */
.projects-activity .proj-act-name,
.projects-activity a.proj-act-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}

.projects-activity a.proj-act-name:hover {
  color: #2563eb;
  text-decoration: none;
}

/* Activity description key */
.projects-activity .proj-act-desc {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Project link row */
.projects-activity .proj-act-project {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

.projects-activity .proj-act-proj-link {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
  font-size: 12px;
}

.projects-activity .proj-act-proj-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Additional data (serialized / metadata) */
.projects-activity .proj-act-meta {
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  padding: 5px 10px;
  word-break: break-all;
  font-family: ui-monospace, monospace;
  line-height: 1.45;
}

/* Customer badge inside name */
.projects-activity .label.label-info {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   CONTRACTS EXPIRING SOON — Modern Table Widget
   ══════════════════════════════════════════════════ */

.contracts-expiring.panel_s {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* Controls: search input */
.contracts-expiring .dataTables_filter input[type="search"],
.contracts-expiring .dataTables_filter input[type="text"] {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: auto !important;
}

.contracts-expiring .dataTables_filter input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* Controls: length select */
.contracts-expiring .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Controls: export buttons */
.contracts-expiring .dt-buttons .btn,
.contracts-expiring .buttons-html5,
.contracts-expiring .buttons-print {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  color: #374151 !important;
}

.contracts-expiring .dt-buttons .btn:hover,
.contracts-expiring .buttons-html5:hover,
.contracts-expiring .buttons-print:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}

/* Column headers */
.contracts-expiring table.dataTable thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* Body rows */
.contracts-expiring table.dataTable tbody > tr > td {
  padding: 13px 14px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: #374151;
  border-top: 1px solid #f3f4f6 !important;
}

.contracts-expiring table.dataTable tbody > tr:hover > td {
  background-color: #f8fafc !important;
  transition: background-color 0.12s ease;
}

/* Pagination buttons */
.contracts-expiring .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

.contracts-expiring .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

.contracts-expiring .dataTables_paginate .paginate_button.current,
.contracts-expiring .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

.contracts-expiring .dataTables_paginate .paginate_button.disabled,
.contracts-expiring .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

.contracts-expiring .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

.contracts-expiring .dataTables_filter label,
.contracts-expiring .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* ══════════════════════════════════════════════════
   STAFF TICKETS REPORT — Modern Table Widget
   ══════════════════════════════════════════════════ */

#tickets_report .panel_s {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* Controls: search input */
#tickets-report-table-wrapper .dataTables_filter input[type="search"],
#tickets-report-table-wrapper .dataTables_filter input[type="text"] {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: auto !important;
}

#tickets-report-table-wrapper .dataTables_filter input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* Controls: length select */
#tickets-report-table-wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Controls: export buttons */
#tickets-report-table-wrapper .dt-buttons .btn,
#tickets-report-table-wrapper .buttons-html5,
#tickets-report-table-wrapper .buttons-print {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  color: #374151 !important;
}

#tickets-report-table-wrapper .dt-buttons .btn:hover,
#tickets-report-table-wrapper .buttons-html5:hover,
#tickets-report-table-wrapper .buttons-print:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}

#tickets-report-table-wrapper .dataTables_filter label,
#tickets-report-table-wrapper .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* Column headers */
.table-ticket-reports thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* Body rows */
.table-ticket-reports tbody > tr > td {
  padding: 13px 14px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: #374151;
  border-top: 1px solid #f3f4f6 !important;
}

.table-ticket-reports tbody > tr:hover > td {
  background-color: #f8fafc !important;
  transition: background-color 0.12s ease;
}

/* Pagination buttons */
#tickets-report-table-wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

#tickets-report-table-wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

#tickets-report-table-wrapper .dataTables_paginate .paginate_button.current,
#tickets-report-table-wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

#tickets-report-table-wrapper .dataTables_paginate .paginate_button.disabled,
#tickets-report-table-wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

#tickets-report-table-wrapper .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

/* ══════════════════════════════════════════════════
   CUSTOMERS PAGE — KPI Cards
   ══════════════════════════════════════════════════ */

.clients-kpi-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}

.clients-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.clients-kpi-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.clients-kpi-number {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  margin-bottom: 5px;
}

.clients-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.35;
}

.clients-contacts-link {
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
}

.clients-contacts-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════
   CUSTOMERS PAGE — Action Bar Buttons
   ══════════════════════════════════════════════════ */

.clients-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

.clients-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}

.clients-action-bar .btn-default {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.clients-action-bar .btn-default:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}

/* ══════════════════════════════════════════════════
   CUSTOMERS TABLE — Modern Table Styling
   ══════════════════════════════════════════════════ */

#clients-table-panel {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* Left toolbar: length + buttons — gap */
#clients_wrapper .dataTables_length {
  margin-right: 6px;
}

#clients_wrapper .dt-buttons .btn + .btn {
  margin-left: 4px;
}

/* Length select */
#clients_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Export / DataTable buttons */
#clients_wrapper .dt-buttons .btn,
#clients_wrapper .buttons-html5,
#clients_wrapper .buttons-print {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  color: #374151 !important;
}

#clients_wrapper .dt-buttons .btn:hover,
#clients_wrapper .buttons-html5:hover,
#clients_wrapper .buttons-print:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
}

/* Search — icon + input share one unified border box */
#clients_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#clients_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

#clients_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#clients_wrapper .dataTables_filter input[type="search"],
#clients_wrapper .dataTables_filter input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  background: transparent !important;
  min-width: 180px;
}

#clients_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

#clients_wrapper .dataTables_filter label,
#clients_wrapper .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* Column headers */
.table-clients thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* Body rows */
.table-clients tbody > tr > td {
  padding: 10px 14px 26px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f3f4f6 !important;
  color: #374151;
}

.table-clients tbody > tr:hover > td {
  background-color: #f8fafc !important;
  transition: background-color 0.12s ease;
}

/* Company cell — anchor for absolutely-positioned row-options */
.table-clients .clients-company-cell {
  position: relative !important;
}

/* Row options — always absolute so they never affect td height */
.table-clients .row-options {
  position: absolute !important;
  left: -9999em !important;
  top: 100% !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* Override global "position: static on hover" — stay absolute, just move into view */
.table-clients tr:hover td .row-options {
  position: absolute !important;
  left: 0 !important;
}

/* Company name in table */
.clients-company-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
}

.clients-company-name:hover {
  color: #2563eb !important;
}

/* Pagination */
#clients_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

#clients_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

#clients_wrapper .dataTables_paginate .paginate_button.current,
#clients_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

#clients_wrapper .dataTables_paginate .paginate_button.disabled,
#clients_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

#clients_wrapper .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

/* Customer group labels */
.table-clients .label.label-default.customer-group-list {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════
   CUSTOMERS TABLE — Toggle Switch (Active column)
   ══════════════════════════════════════════════════ */

.table-clients .onoffswitch {
  width: 42px;
}

.table-clients .onoffswitch-label {
  border-radius: 20px !important;
  border-color: #e2e8f0 !important;
  background: #e2e8f0 !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.table-clients .onoffswitch-label:before {
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
  transition: all 0.2s !important;
}

.table-clients .onoffswitch-checkbox:checked + .onoffswitch-label {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   SIDEBAR — Modern Pill Active Highlight
   ══════════════════════════════════════════════════ */

.sidebar .nav.metis-menu > li.active > a {
  background: rgba(37,99,235,0.09) !important;
  border-radius: 8px;
  color: #2563eb !important;
  font-weight: 600;
}

.sidebar .nav.metis-menu > li.active > a .menu-icon {
  color: #2563eb !important;
}

.sidebar .nav.metis-menu > li.active > a .menu-text {
  color: #2563eb !important;
}

.sidebar .nav.metis-menu > li > a {
  border-radius: 8px;
  margin: 1px 6px;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar .nav.metis-menu > li > a:hover {
  background: rgba(37,99,235,0.05) !important;
  color: #2563eb !important;
}

.sidebar .nav.metis-menu > li > a:hover .menu-icon {
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   PROPOSALS PAGE — Header
   ══════════════════════════════════════════════════ */

.proposals-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.proposals-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.proposals-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.proposals-header-icon i {
  font-size: 20px;
  color: #3b82f6;
}

.proposals-header-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  line-height: 1.3;
}

.proposals-header-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 2px 0 0 !important;
  line-height: 1.4;
}

.proposals-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Header icon-only buttons */
.proposals-header-btn {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: background 0.15s, border-color 0.15s !important;
  padding: 7px 12px !important;
}

.proposals-header-btn:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}

/* New Proposal primary button */
.new-proposal-btn {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(99,102,241,0.25) !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.new-proposal-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════
   PROPOSALS TABLE PANEL
   ══════════════════════════════════════════════════ */

#proposals-table-panel {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* DataTable controls */
#proposals_wrapper .dataTables_length { margin-right: 6px; }
#proposals_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#proposals_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

#proposals_wrapper .dt-buttons .btn,
#proposals_wrapper .buttons-html5,
#proposals_wrapper .buttons-print {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  color: #374151 !important;
}

#proposals_wrapper .dt-buttons .btn:hover,
#proposals_wrapper .buttons-html5:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
}

#proposals_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#proposals_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

#proposals_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#proposals_wrapper .dataTables_filter input[type="search"],
#proposals_wrapper .dataTables_filter input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  background: transparent !important;
  min-width: 180px;
}

#proposals_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

#proposals_wrapper .dataTables_filter label,
#proposals_wrapper .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* Column headers */
.table-proposals thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* Body rows */
.table-proposals tbody > tr > td {
  padding: 10px 14px 6px !important;
  font-size: 13px !important;
  vertical-align: top !important;
  border-top: 1px solid #f3f4f6 !important;
  color: #374151;
}

/* Row options — opacity/visibility only so hover never causes jump */
.table-proposals .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.table-proposals tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-proposals tbody > tr:hover > td {
  background-color: #f8fafc !important;
  transition: background-color 0.12s ease;
}

/* Pagination */
#proposals_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

#proposals_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

#proposals_wrapper .dataTables_paginate .paginate_button.current,
#proposals_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
  box-shadow: none !important;
}

#proposals_wrapper .dataTables_paginate .paginate_button.disabled,
#proposals_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

#proposals_wrapper .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

/* ══════════════════════════════════════════════════
   PROPOSALS TABLE — Column Enhancements
   ══════════════════════════════════════════════════ */

/* Proposal number — monospace code badge */
.proposals-num-link {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.12s, color 0.12s;
}

.proposals-num-link:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none !important;
}

/* Subject link */
.proposals-subject-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
}

.proposals-subject-link:hover {
  color: #2563eb !important;
  text-decoration: none !important;
}

/* To cell — type badge + name */
.props-to-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.props-type-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}

.props-type-lead {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.props-type-customer {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* ══════════════════════════════════════════════════
   PROPOSALS TABLE — Status Badges
   ══════════════════════════════════════════════════ */

.table-proposals .label {
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.4;
}
.table-proposals .label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Open */
.table-proposals .label-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

/* Declined */
.table-proposals .label-danger {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
}

/* Accepted */
.table-proposals .label-success {
  background: #ecfdf5 !important;
  color: #10b981 !important;
  border-color: #a7f3d0 !important;
}

/* Revised / Sent */
.table-proposals .label-info {
  background: #eff6ff !important;
  color: #3b82f6 !important;
  border-color: #bfdbfe !important;
}

/* Draft / Default */
.table-proposals .label-default {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* Total amount */
.table-proposals td .tw-font-medium {
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Tags in proposals table */
.table-proposals .label-tag {
  border-radius: 20px !important;
  font-size: 10.5px !important;
  padding: 2px 8px !important;
}

/* Subject secondary line (recipient name below subject) */
.props-subject-meta {
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.3;
}

/* TO column empty dash */
.props-to-empty {
  color: #d1d5db;
  font-weight: 500;
}

/* Date columns with calendar icon */
.props-date-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.props-cal-icon {
  color: #6366f1;
  font-size: 12px;
  flex-shrink: 0;
}

/* Date Created — two-line layout */
.props-dc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.props-dc-time {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 400;
}

/* Actions â‹® column */
.proposals-actions-th {
  width: 40px !important;
  text-align: center !important;
  padding: 10px 8px !important;
}

.table-proposals tbody > tr > td:last-child {
  text-align: center;
  padding: 10px 8px !important;
  vertical-align: middle !important;
}

.props-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.props-actions-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}

.props-actions-btn:hover {
  background: #f1f5f9;
  color: #374151;
}

.table-proposals tr:hover .props-actions-btn {
  color: #6b7280;
}

/* ═══════════════════════════════════════════════════
   PROPOSALS — KPI Summary Grid + Doc Icon
   ═══════════════════════════════════════════════════ */

.proposals-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 576px) {
  .proposals-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .proposals-kpi-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Subject column — colored doc icon injected by JS */
.table-proposals .prop-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 12px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   ESTIMATES PAGE — Header
   ══════════════════════════════════════════════════ */

.estimates-stats-link {
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none !important;
  transition: color 0.12s;
}

.estimates-stats-link:hover {
  color: #1d4ed8;
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════
   ESTIMATES PAGE — KPI Status Cards
   ══════════════════════════════════════════════════ */

.estimates-kpi-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: inherit;
}

.estimates-kpi-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
  transform: translateY(-1px);
  border-color: #d1d5db;
}

.estimates-kpi-btn:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.estimates-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.estimates-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.estimates-kpi-pct {
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 500;
  flex-shrink: 0;
}

.estimates-kpi-num {
  font-size: 30px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  margin-bottom: 5px;
}

.estimates-kpi-sub {
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════
   ESTIMATES PAGE — Action Bar Buttons
   ══════════════════════════════════════════════════ */

.estimates-action-bar .new-estimate-btn,
.estimates-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.estimates-action-bar .new-estimate-btn:hover,
.estimates-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

.estimates-action-bar .btn-default,
.estimates-action-bar .switch-pipeline,
.estimates-action-bar .btn-with-tooltip,
.estimates-action-bar .toggle-small-view {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.estimates-action-bar .btn-default:hover,
.estimates-action-bar .switch-pipeline:hover,
.estimates-action-bar .btn-with-tooltip:hover,
.estimates-action-bar .toggle-small-view:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}

/* ══════════════════════════════════════════════════
   ESTIMATES TABLE PANEL & DATATABLE CONTROLS
   ══════════════════════════════════════════════════ */

#estimates-table-panel {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

#estimates_wrapper .dataTables_length { margin-right: 6px; }
#estimates_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#estimates_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

#estimates_wrapper .dt-buttons .btn,
#estimates_wrapper .buttons-html5,
#estimates_wrapper .buttons-print {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  color: #374151 !important;
}

#estimates_wrapper .dt-buttons .btn:hover,
#estimates_wrapper .buttons-html5:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
}

#estimates_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#estimates_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

#estimates_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#estimates_wrapper .dataTables_filter input[type="search"],
#estimates_wrapper .dataTables_filter input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  background: transparent !important;
  min-width: 180px;
}

#estimates_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

#estimates_wrapper .dataTables_filter label,
#estimates_wrapper .dataTables_length label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

/* Column headers */
.table-estimates thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

/* Body rows */
.table-estimates tbody > tr > td {
  padding: 10px 14px 6px !important;
  font-size: 13px !important;
  vertical-align: top !important;
  border-top: 1px solid #f3f4f6 !important;
  color: #374151;
}

.table-estimates tbody > tr:hover > td {
  background-color: #f8fafc !important;
  transition: background-color 0.12s ease;
}

/* Row options — opacity/visibility only so hover never causes jump */
.table-estimates .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.table-estimates tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Pagination */
#estimates_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: background 0.1s;
}

#estimates_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}

#estimates_wrapper .dataTables_paginate .paginate_button.current,
#estimates_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

#estimates_wrapper .dataTables_paginate .paginate_button.disabled,
#estimates_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: default !important;
}

#estimates_wrapper .dataTables_info {
  font-size: 12px;
  color: #9ca3af;
  padding-top: 10px !important;
}

/* ══════════════════════════════════════════════════
   ESTIMATES TABLE — Column Enhancements
   ══════════════════════════════════════════════════ */

/* Estimate number — monospace code badge */
.estimates-num-link {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.12s, color 0.12s;
}

.estimates-num-link:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none !important;
}

/* Customer link */
.estimates-customer-link {
  font-weight: 600 !important;
  color: #374151 !important;
  text-decoration: none !important;
}

.estimates-customer-link:hover {
  color: #2563eb !important;
}

.estimates-deleted-customer {
  color: #9ca3af;
  font-style: italic;
}

/* Amount bold */
.table-estimates td .tw-font-medium {
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Invoiced badge */
.table-estimates .text-success.tw-font-medium {
  color: #10b981 !important;
  font-size: 11.5px !important;
}

/* Tags */
.table-estimates .label-tag {
  border-radius: 20px !important;
  font-size: 10.5px !important;
  padding: 2px 8px !important;
}

/* ══════════════════════════════════════════════════
   ESTIMATES TABLE — Status Badges
   ══════════════════════════════════════════════════ */

.table-estimates .label {
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.4;
}
.table-estimates .label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Draft */
.table-estimates .label-default {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* Sent */
.table-estimates .label-info {
  background: #eff6ff !important;
  color: #3b82f6 !important;
  border-color: #bfdbfe !important;
}

/* Expired */
.table-estimates .label-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

/* Declined */
.table-estimates .label-danger {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
}

/* Accepted */
.table-estimates .label-success {
  background: #ecfdf5 !important;
  color: #10b981 !important;
  border-color: #a7f3d0 !important;
}

/* ═══════════════════════════════════════════════════
   ESTIMATES — KPI Wrap, Grid, Chart, Doc Icon
   ═══════════════════════════════════════════════════ */

/* KPI button reset so proj-kpi-card styles apply cleanly */
.estimates-kpi-card-btn {
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* Flex wrapper: cards left, chart right */
.estimates-kpi-wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

/* Responsive grid for 5 status cards */
.estimates-kpi-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  min-width: 0;
}
@media (min-width: 576px) {
  .estimates-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .estimates-kpi-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 767px) {
  .estimates-kpi-wrap { flex-direction: column; }
  .estimates-chart-wrap { width: 100% !important; }
}

/* Donut chart card */
.estimates-chart-wrap {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.estimates-chart-wrap canvas {
  max-width: 160px;
  max-height: 160px;
}
.estimates-chart-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-bottom: 10px;
  text-align: center;
}

/* Colored doc icon in estimate # column */
.table-estimates .est-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 7px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   INVOICES — KPI / Quick-Stats Cards
   ══════════════════════════════════════════════════ */

.invoices-kpi-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  text-align: left;
  width: 100%;
}

.invoices-kpi-btn:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  background: #fff;
}

.invoices-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.invoices-kpi-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.invoices-kpi-pct {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 20px;
  padding: 1px 8px;
}

.invoices-kpi-num {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.invoices-kpi-sub {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════
   INVOICES — Action Bar
   ══════════════════════════════════════════════════ */

.invoices-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 4px;
}

.invoices-action-bar .btn {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.invoices-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.invoices-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

.invoices-action-bar .btn-default {
  border-color: #94a3b8 !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.invoices-action-bar .btn-default:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

/* ══════════════════════════════════════════════════
   INVOICES — Table Panel
   ══════════════════════════════════════════════════ */

#invoices-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   INVOICES — DataTable Wrapper
   ══════════════════════════════════════════════════ */

#invoices_wrapper .dataTables_length { margin-right: 6px; }
#invoices_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#invoices_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

#invoices_wrapper .DTTT_container .btn,
#invoices_wrapper .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

#invoices_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#invoices_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

#invoices_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#invoices_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}

#invoices_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ══════════════════════════════════════════════════
   INVOICES TABLE — Row styling
   ══════════════════════════════════════════════════ */

.table-invoices > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}

.table-invoices > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-invoices > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-invoices > tbody > tr:hover > td {
  background: #fafafa !important;
}

/* Invoice number link */
.table-invoices a.invoices-num-link {
  font-weight: 700;
  color: #4f46e5;
  font-size: 13.5px;
  text-decoration: none;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  letter-spacing: 0.01em;
}

.table-invoices a.invoices-num-link:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* Customer / company link */
.table-invoices a.invoices-customer-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}

.table-invoices a.invoices-customer-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.table-invoices .invoices-deleted-customer {
  color: #9ca3af;
  font-style: italic;
  font-size: 13px;
}

/* Row options — opacity/visibility only so hover never causes jump */
.table-invoices .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.table-invoices tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-invoices .row-options a {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.table-invoices .row-options a:hover {
  color: #4f46e5 !important;
}

/* Recurring label badge */
.table-invoices .label.label-primary {
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 2px 9px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   INVOICES TABLE — Status Badges
   ══════════════════════════════════════════════════ */

.table-invoices .label {
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  display: inline-block;
  line-height: 1.5;
}

.table-invoices .label::before {
  content: '●';
  display: inline-block;
  margin-right: 5px;
  font-size: 7px;
  vertical-align: middle;
  line-height: 1;
}

/* Draft */
.table-invoices .label-default {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* Sent / Viewed */
.table-invoices .label-info {
  background: #eff6ff !important;
  color: #3b82f6 !important;
  border-color: #bfdbfe !important;
}

/* Overdue */
.table-invoices .label-danger {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
}

/* Partially Paid */
.table-invoices .label-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

/* Paid */
.table-invoices .label-success {
  background: #ecfdf5 !important;
  color: #10b981 !important;
  border-color: #a7f3d0 !important;
}

/* Cancelled */
.table-invoices .label-primary {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border-color: #ddd6fe !important;
}

/* Overdue — override shared label-warning to orange */
.table-invoices .label.invoice-status-4 {
  background: #fff7ed !important;
  color: #f97316 !important;
  border-color: #fed7aa !important;
}

/* ══════════════════════════════════════════════════
   PAYMENTS — Table Panel
   ══════════════════════════════════════════════════ */

#payments-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: visible !important;
}

#payments-table-panel .panel-body {
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════
   PAYMENTS — DataTable Controls
   ══════════════════════════════════════════════════ */

#payments_wrapper .dataTables_filter input {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#payments_wrapper .dataTables_filter input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none;
}

#payments_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

#payments_wrapper .DTTT_container .btn,
#payments_wrapper .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ══════════════════════════════════════════════════
   PAYMENTS TABLE — Row Styling
   ══════════════════════════════════════════════════ */

.table-payments > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  background: #fafafa !important;
}

.table-payments > tbody > tr > td {
  padding: 10px 16px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
  overflow: visible !important;
}

.table-payments > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-payments > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* Payment # number link */
.table-payments a.pmts-num-link {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  text-decoration: none;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 9px;
  letter-spacing: 0.01em;
  transition: background 0.15s;
}

.table-payments a.pmts-num-link:hover {
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
}

/* Customer link */
.table-payments a.pmts-customer-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}

.table-payments a.pmts-customer-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Amount */
.table-payments .pmts-amount {
  font-weight: 800;
  font-size: 14.5px;
  color: #111827;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════
   PAYMENTS — Payment Mode Badges
   ══════════════════════════════════════════════════ */

.pmts-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pmts-badge-bank {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.pmts-badge-card {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}

.pmts-badge-online {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.pmts-badge-cash {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.pmts-badge-default {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

/* ══════════════════════════════════════════════════
   PAYMENTS — Row Action Buttons
   ══════════════════════════════════════════════════ */

.table-payments .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-top: 4px;
  transition: opacity 0.12s;
}

.table-payments tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-payments .pmts-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  font-weight: 500;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.12s;
}

.table-payments .pmts-row-action:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe;
  background: #eef2ff;
  text-decoration: none !important;
}

.table-payments .pmts-row-action.pmts-row-danger:hover {
  color: #dc2626 !important;
  border-color: #fecaca;
  background: #fef2f2;
}

.pmts-dd-danger:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.pmts-dd-danger i {
  color: #fca5a5 !important;
}

.pmts-dd-danger:hover i {
  color: #dc2626 !important;
}

/* ══════════════════════════════════════════════════
   CREDIT NOTES — Action Bar
   ══════════════════════════════════════════════════ */

.credit-notes-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 4px;
}

.credit-notes-action-bar .btn {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 13px;
}

.credit-notes-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.credit-notes-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

.credit-notes-action-bar .btn-default {
  border-color: #94a3b8 !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.credit-notes-action-bar .btn-default:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

/* ══════════════════════════════════════════════════
   CREDIT NOTES — Table Panel
   ══════════════════════════════════════════════════ */

#credit-notes-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   CREDIT NOTES — DataTable Controls
   ══════════════════════════════════════════════════ */

#credit_notes_wrapper .dataTables_length { margin-right: 6px; }
#credit_notes_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#credit_notes_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

#credit_notes_wrapper .DTTT_container .btn,
#credit_notes_wrapper .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

#credit_notes_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#credit_notes_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

#credit_notes_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#credit_notes_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}

#credit_notes_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ══════════════════════════════════════════════════
   CREDIT NOTES TABLE — Row Styling
   ══════════════════════════════════════════════════ */

.table-credit-notes > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  background: #fafafa !important;
}

.table-credit-notes > tbody > tr > td {
  padding: 10px 16px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

/* Row options — opacity/visibility only so hover never causes jump */
.table-credit-notes .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.table-credit-notes tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-credit-notes > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-credit-notes > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* Credit Note # link — badge style matching Proposal # */
.table-credit-notes a.cn-num-link {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.12s, color 0.12s;
}

.table-credit-notes a.cn-num-link:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none !important;
}

/* Row options edit link */
.table-credit-notes .cn-edit-link {
  font-size: 12px !important;
  color: #6b7280 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.table-credit-notes .cn-edit-link:hover {
  color: #4f46e5 !important;
  text-decoration: none;
}

/* Customer link */
.table-credit-notes a.cn-customer-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}

.table-credit-notes a.cn-customer-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.table-credit-notes .cn-deleted-customer {
  color: #9ca3af;
  font-style: italic;
  font-size: 13px;
}

/* Amount */
.table-credit-notes .cn-amount {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  letter-spacing: -0.01em;
}

/* Remaining Amount — color-coded */
.table-credit-notes .cn-remaining {
  font-weight: 700;
  font-size: 13.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  display: inline-block;
}

.table-credit-notes .cn-remaining-full {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.table-credit-notes .cn-remaining-partial {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

.table-credit-notes .cn-remaining-zero {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
}

/* ══════════════════════════════════════════════════
   CREDIT NOTES TABLE — Status Badges
   ══════════════════════════════════════════════════ */

.table-credit-notes .label {
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border: 1px solid transparent !important;
  display: inline-block;
  line-height: 1.5;
  text-transform: capitalize;
}

/* Open */
.table-credit-notes .label-default,
.table-credit-notes .credit-note-status-1 {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

/* Closed / Used */
.table-credit-notes .label-success,
.table-credit-notes .credit-note-status-2 {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* Void */
.table-credit-notes .label-warning,
.table-credit-notes .credit-note-status-3 {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}

.table-credit-notes .label-danger,
.table-credit-notes .credit-note-status-4 {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* ══════════════════════════════════════════════════
   ITEMS — Page Header
   ══════════════════════════════════════════════════ */

.items-page-header {
  padding-bottom: 4px;
}

.items-groups-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5 !important;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  padding: 3px 12px;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}

.items-groups-chip:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #4338ca !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   ITEMS — Action Bar
   ══════════════════════════════════════════════════ */

.items-action-bar .btn {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 13px;
}

.items-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.items-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

.items-action-bar .btn-default {
  border-color: #94a3b8 !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.items-action-bar .btn-default:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

/* ══════════════════════════════════════════════════
   ITEMS — Table Panel
   ══════════════════════════════════════════════════ */

#items-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   ITEMS — DataTable Controls
   ══════════════════════════════════════════════════ */

#invoice_items_wrapper .dataTables_length { margin-right: 6px; }
#invoice_items_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#invoice_items_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

#invoice_items_wrapper .DTTT_container .btn,
#invoice_items_wrapper .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

#invoice_items_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#invoice_items_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

#invoice_items_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#invoice_items_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}

#invoice_items_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ══════════════════════════════════════════════════
   ITEMS TABLE — Row Styling
   ══════════════════════════════════════════════════ */

.table-invoice-items > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 11px 14px !important;
  white-space: nowrap;
  background: #fafafa !important;
}

.table-invoice-items > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-invoice-items > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-invoice-items > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* Description / item name link */
.table-invoice-items a.items-desc-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}

.table-invoice-items a.items-desc-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Long description column — muted */
.table-invoice-items > tbody > tr > td:nth-child(3) {
  color: #6b7280;
  font-size: 12.5px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row options — opacity/visibility only so hover never causes jump */
.table-invoice-items .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}

.table-invoice-items tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-invoice-items .items-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  font-weight: 500;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.12s;
  cursor: pointer;
}

.table-invoice-items .items-row-action:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe;
  background: #eef2ff;
  text-decoration: none !important;
}

.table-invoice-items .items-row-action.items-row-danger:hover {
  color: #dc2626 !important;
  border-color: #fecaca;
  background: #fef2f2;
}

.table-invoice-items .items-row-action i {
  font-size: 11px;
}

/* Rate */
.table-invoice-items .items-rate {
  font-weight: 800;
  font-size: 14px;
  color: #111827;
  letter-spacing: -0.01em;
}

/* Tax badges */
.table-invoice-items .items-tax-badge {
  display: inline-block;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: default;
}

.table-invoice-items .items-tax-zero {
  color: #d1d5db;
  font-size: 14px;
  font-weight: 500;
}

/* Unit badge */
.table-invoice-items .items-unit-badge {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 500;
}

/* Group tag — dynamically colored via inline style */
.table-invoice-items .items-group-tag {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════
   ITEMS — Bulk Actions button
   ══════════════════════════════════════════════════ */

.table-invoice-items .bulk-actions-btn,
a.bulk-actions-btn {
  border-radius: 8px !important;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════
   GROUPS MODAL — Full Redesign
   ══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  #groups .modal-dialog {
    width: 560px;
    margin: 48px auto;
  }
}

#groups .gm-modal-content {
  border: none !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(17, 24, 39, 0.18),
    0 6px 24px rgba(17, 24, 39, 0.10) !important;
}

/* ── Header ── */
#groups .gm-modal-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 24px 18px 24px;
  position: relative;
}

#groups .gm-modal-close {
  float: none !important;
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: #9ca3af !important;
  opacity: 1 !important;
  text-shadow: none !important;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
#groups .gm-modal-close:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

#groups .gm-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 44px;
}

#groups .gm-header-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 11px;
}
#groups .gm-header-icon i {
  font-size: 18px;
  color: #4f46e5;
}

#groups .gm-modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

#groups .gm-modal-sub {
  font-size: 12.5px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

/* ── Body ── */
#groups .gm-modal-body {
  background: #f9fafb;
  padding: 20px 20px 0 20px;
}

/* Add group card */
#groups .gm-add-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

#groups .gm-add-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

#groups .gm-add-input {
  flex: 1;
  border-radius: 9px !important;
  border: 1.5px solid #e5e7eb !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #fafafa !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  height: auto !important;
}
#groups .gm-add-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
  background: #fff !important;
  outline: none !important;
}
#groups .gm-add-input::placeholder { color: #9ca3af; }

#groups .gm-add-btn {
  flex-shrink: 0;
  border-radius: 9px !important;
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px !important;
  box-shadow: var(--btn-p-shadow) !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, box-shadow 0.15s;
}
#groups .gm-add-btn:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}
#groups .gm-add-btn i { font-size: 11px; }

/* Table section card */
#groups .gm-table-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* DataTable controls inside modal */
#groups .dataTables_wrapper { padding: 12px 16px 4px; }

#groups .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

#groups .DTTT_container .btn,
#groups .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

#groups .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: border-color 0.15s;
}
#groups .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
#groups .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  box-shadow: none !important;
}
#groups .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 160px;
}
#groups .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Groups table — header */
#groups .table-items-groups > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 11px 16px !important;
  background: #fafafa !important;
  white-space: nowrap;
}

/* Groups table — rows */
#groups .table-items-groups > tbody > tr > td {
  padding: 10px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
  color: #374151;
}
#groups .table-items-groups > tbody > tr:last-child > td {
  border-bottom: none !important;
}
#groups .table-items-groups > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* ID column pill */
#groups .gm-group-id {
  display: inline-block;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
}

/* Group name */
#groups .gm-group-name {
  font-weight: 600;
  color: #111827;
}

/* Inline edit row */
#groups .gm-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
#groups .gm-edit-input {
  flex: 1;
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  background: #fafafa !important;
  height: auto !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
#groups .gm-edit-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none !important;
}
#groups .gm-edit-save-btn {
  border-radius: 8px !important;
  font-size: 12.5px;
  padding: 7px 16px !important;
  font-weight: 600;
  white-space: nowrap;
}

/* Row-options — opacity/visibility only (no jump on hover) */
#groups .table-items-groups .row-options {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
#groups .table-items-groups tr.row-has-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Row action buttons */
#groups .gm-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  font-weight: 500;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.12s;
}
#groups .gm-row-action:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe;
  background: #eef2ff;
  text-decoration: none !important;
}
#groups .gm-row-danger:hover {
  color: #dc2626 !important;
  border-color: #fecaca;
  background: #fef2f2;
}

/* ── Footer ── */
#groups .gm-modal-footer {
  background: #f8faff;
  border-top: 1px solid #e5e7eb;
  padding: 14px 20px;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}
#groups .gm-close-btn {
  border-radius: 9px !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: background 0.15s, border-color 0.15s;
}
#groups .gm-close-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* ══════════════════════════════════════════════════
   EXPENSES — KPI Cards
   ══════════════════════════════════════════════════ */

.exp-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.exp-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  border-color: #d1d5db;
}

.exp-kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.exp-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.exp-kpi-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.exp-kpi-amount {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════
   EXPENSES — Action Bar
   ══════════════════════════════════════════════════ */

.expenses-action-bar .btn {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 13px;
}

.expenses-action-bar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.expenses-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

.expenses-action-bar .btn-default {
  border-color: #94a3b8 !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.expenses-action-bar .btn-default:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

/* ══════════════════════════════════════════════════
   EXPENSES — Table Panel + Controls
   ══════════════════════════════════════════════════ */

#expenses-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* Left toolbar gap */
#expenses-table-panel .dataTables_length {
  margin-right: 6px;
}

#expenses-table-panel .dt-buttons .btn + .btn {
  margin-left: 4px;
}

#expenses-table-panel .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

#expenses-table-panel .DTTT_container .btn,
#expenses-table-panel .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

/* Search — unified input-group box */
#expenses-table-panel .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#expenses-table-panel .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

#expenses-table-panel .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#expenses-table-panel .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}

#expenses-table-panel .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ══════════════════════════════════════════════════
   EXPENSES TABLE — Row Styling
   ══════════════════════════════════════════════════ */

.table-expenses > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 11px 14px !important;
  white-space: nowrap;
  background: #fafafa !important;
}

.table-expenses > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-expenses > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-expenses > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* Category cell — flex with icon */
.table-expenses .exp-cat-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.table-expenses .exp-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.table-expenses a.exp-category-link {
  font-weight: 700;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
  display: block;
  line-height: 1.3;
}

.table-expenses a.exp-category-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Billing status badges */
.table-expenses .exp-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.table-expenses .exp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.table-expenses .exp-status-unbilled {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.table-expenses .exp-status-billed {
  background: #ecfdf5;
  color: #16a34a;
  border-color: #a7f3d0;
}

.table-expenses .exp-status-recurring {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* Row options — always in flow (no jump), just invisible until hover */
.table-expenses .row-options {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}

.table-expenses tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-expenses .exp-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  font-weight: 500;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.12s;
}

.table-expenses .exp-row-action:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe;
  background: #eef2ff;
  text-decoration: none !important;
}

.table-expenses .exp-row-action.exp-row-danger:hover {
  color: #dc2626 !important;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Amount */
.table-expenses .exp-amount {
  font-weight: 800;
  font-size: 14.5px;
  color: #111827;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Expense name link */
.table-expenses a.exp-name-link {
  font-weight: 500;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
}

.table-expenses a.exp-name-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Customer link */
.table-expenses a.exp-customer-link {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
  text-decoration: none;
}

.table-expenses a.exp-customer-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Payment mode badge */
.table-expenses .exp-payment-badge {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Reference # column — monospace */
.table-expenses > tbody > tr > td:nth-child(11) {
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════
   PROJECTS — Action Bar
   ══════════════════════════════════════════════════ */

.projects-action-bar .btn-primary {
  border-radius: 8px !important;
  font-weight: 600 !important;
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.projects-action-bar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}

.projects-action-bar .btn-default {
  border-radius: 8px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ══════════════════════════════════════════════════
   PROJECTS — Status Filter Pills (stats bar)
   ══════════════════════════════════════════════════ */

.proj-stats-bar {
  gap: 6px !important;
}

.proj-stat-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid color-mix(in srgb, var(--proj-color, #6b7280) 30%, transparent) !important;
  background: color-mix(in srgb, var(--proj-color, #6b7280) 7%, #fff) !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.proj-stat-pill:hover {
  background: color-mix(in srgb, var(--proj-color, #6b7280) 15%, #fff) !important;
  border-color: color-mix(in srgb, var(--proj-color, #6b7280) 60%, transparent) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  text-decoration: none !important;
}

.proj-stat-count {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.proj-stat-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
  .proj-stat-pill {
    border-color: #e5e7eb !important;
    background: #f9fafb !important;
  }
}

/* ══════════════════════════════════════════════════
   PROJECTS — Table Panel + Controls
   ══════════════════════════════════════════════════ */

#projects-table-panel {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* Left toolbar gap */
#projects-table-panel .dataTables_length {
  margin-right: 6px;
}

#projects-table-panel .dt-buttons .btn + .btn {
  margin-left: 4px;
}

#projects-table-panel .dataTables_length select {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

#projects-table-panel .DTTT_container .btn,
#projects-table-panel .dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: #94a3b8 !important;
  background: #fff !important;
  color: #374151 !important;
}

/* Search — unified input-group box */
#projects-table-panel .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#projects-table-panel .dataTables_filter .input-group:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

#projects-table-panel .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

#projects-table-panel .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}

#projects-table-panel .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ══════════════════════════════════════════════════
   PROJECTS TABLE — Row Styling
   ══════════════════════════════════════════════════ */

.table-projects > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 14px !important;
  white-space: nowrap;
  background: #fafafa !important;
}

.table-projects > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-projects > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-projects > tbody > tr:hover > td {
  background: #f9fafb !important;
}

/* Row options — always in flow so height never changes (no jump) */
.table-projects .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.table-projects tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Project # */
.table-projects a.proj-num-link {
  font-weight: 700;
  color: #9ca3af;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
  text-decoration: none;
}

.table-projects a.proj-num-link:hover {
  color: #4f46e5;
}

/* Project name */
.table-projects a.proj-name-link {
  font-weight: 700;
  color: #111827;
  font-size: 14px;
  text-decoration: none;
  display: block;
  line-height: 1.3;
}

.table-projects a.proj-name-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Row options */
.table-projects .row-options {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s;
  min-height: 16px;
}

.table-projects tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.table-projects .proj-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  font-weight: 500;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.12s;
}

.table-projects .proj-row-action:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe;
  background: #eef2ff;
  text-decoration: none !important;
}

.table-projects .proj-row-action.proj-row-danger:hover {
  color: #dc2626 !important;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Customer link */
.table-projects a.proj-customer-link {
  font-weight: 600;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
}

.table-projects a.proj-customer-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Deadline color coding */
.table-projects .proj-deadline {
  font-weight: 600;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-block;
}

.table-projects .proj-deadline-past {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.table-projects .proj-deadline-soon {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.table-projects .proj-deadline-near {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
}

.table-projects .proj-deadline-ok {
  color: #374151;
  background: transparent;
  border: none;
}

.table-projects .proj-deadline-empty {
  color: #d1d5db;
}

/* Members stack */
.table-projects .proj-members-stack img,
.table-projects .proj-members-stack .staff-profile-image {
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* Status pill */
.table-projects .proj-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-projects .proj-status-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   PROJECTS — KPI Cards v2 (circular icon + progress bar)
   ═══════════════════════════════════════════════════ */

.proj-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-decoration: none !important;
  transition: box-shadow 0.15s, border-color 0.15s;
  cursor: pointer;
}
.proj-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  border-color: #d1d5db;
  text-decoration: none !important;
}
.proj-kpi-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.proj-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.proj-kpi-text {
  min-width: 0;
}
.proj-kpi-status {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}
.proj-kpi-count {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  margin-bottom: 2px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.proj-kpi-pct {
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 500;
}
.proj-kpi-bar-track {
  height: 4px;
  background: #f3f4f6;
  border-radius: 99px;
  overflow: hidden;
}
.proj-kpi-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Project name — doc icon injected by JS */
.table-projects .proj-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 12px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
}

/* Billing type cell with icon */
.table-projects .proj-billing-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.table-projects .proj-billing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   TASKS MANAGEMENT PAGE — Modern SaaS Task Tracker
   ══════════════════════════════════════════════════ */

/* ── Summary KPI cards ── */
.tasks-summary-grid button {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  padding: 14px 16px !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
  text-align: left !important;
}
.tasks-summary-grid button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}
.tasks-summary-grid button .tw-font-semibold {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
  margin-right: 0 !important;
}
.tasks-summary-grid button .tw-font-medium {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}
.tasks-summary-grid button .tw-text-sm.tw-text-neutral-800 {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* ── Control buttons ── */
.tasks-manage-page ._buttons .btn.btn-primary.new {
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(59,130,246,0.22) !important;
}
.tasks-manage-page ._buttons .btn.btn-default {
  border-radius: 8px !important;
  border-color: #e2e8f0 !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.tasks-manage-page ._buttons .btn.btn-default:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* ── Main panel ── */
.tasks-manage-page .panel_s {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* ── DataTable top controls ── */

/* Left toolbar gap */
.tasks-manage-page .dataTables_wrapper .dataTables_length {
  margin-right: 6px;
}

.tasks-manage-page .dataTables_wrapper .dt-buttons .btn + .btn {
  margin-left: 4px;
}

.tasks-manage-page .dataTables_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Search — unified input-group box */
.tasks-manage-page .dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tasks-manage-page .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.tasks-manage-page .dataTables_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}

.tasks-manage-page .dataTables_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 5px 10px 5px 4px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 180px;
}

.tasks-manage-page .dataTables_wrapper .dataTables_filter input:focus {
  border: none !important;
  outline: none !important;
}
.tasks-manage-page .dataTables_wrapper .bulk-actions-btn,
.tasks-manage-page .dataTables_wrapper .btn.btn-default {
  border-radius: 7px !important;
  font-size: 13px !important;
  border-color: #e2e8f0 !important;
}

/* ── Table header ── */
.tasks-manage-page table.table-tasks thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

/* ── Table rows ── */
.tasks-manage-page table.table-tasks tbody td {
  padding: 10px 12px 6px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f8fafc !important;
  font-size: 13px !important;
  color: #374151 !important;
}
.tasks-manage-page table.table-tasks tbody tr:hover td {
  background: #f8fafc !important;
}
.tasks-manage-page table.table-tasks tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Task name link ── */
.tasks-manage-page .main-tasks-table-href-name {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.tasks-manage-page .main-tasks-table-href-name:hover {
  color: #2563eb !important;
  text-decoration: none !important;
}

/* ── Related entity link (project/client sub-label) ── */
.tasks-manage-page .task-table-related {
  font-size: 11px !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 4px !important;
  padding: 1px 7px !important;
  margin-top: 3px !important;
  display: inline-block !important;
  text-decoration: none !important;
}
.tasks-manage-page .task-table-related:hover {
  color: #475569 !important;
  background: #f1f5f9 !important;
}

/* ── Status badge (dropdown toggle with .label class) ── */
.tasks-manage-page table.table-tasks .label {
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
}

/* ── Priority badge ── */
.tasks-manage-page table.table-tasks td .dropdown-toggle:not(.label),
.tasks-manage-page table.table-tasks td span.inline-block {
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,0.05) !important;
  text-decoration: none !important;
}

/* ── Overdue row — enhance the existing red left border ── */
.tasks-manage-page table.table-tasks tbody tr.row-border-danger td:first-child {
  border-left: 3px solid #ef4444 !important;
}

/* ── Row options (Start Timer | Edit | Delete) ── */
.tasks-manage-page .row-options {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  margin-top: 4px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tasks-manage-page table.table-tasks tr.has-row-options:hover .row-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tasks-manage-page .row-options a:not(.text-danger) {
  color: #64748b !important;
}
.tasks-manage-page .row-options a:not(.text-danger):hover {
  color: #2563eb !important;
}

/* ── Pagination ── */
.tasks-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
}
.tasks-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.tasks-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}
.tasks-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   STAFF MANAGEMENT PAGE — Modern SaaS Team Directory
   ══════════════════════════════════════════════════ */

/* ── + New Staff Member button ── */
.staff-manage-page .btn.btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.staff-manage-page .btn.btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

/* ── Name cell flex layout ── */
.table-staff .staff-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── Avatar link wrapper ── */
.table-staff .staff-avatar-link {
  flex: 0 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 0 !important;
}

/* ── Colored initials badge ── */
.table-staff .staff-initials-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* ── Profile photo (when present) ── */
.table-staff .staff-avatar-img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #e2e8f0 !important;
}

/* ── Name info block ── */
.table-staff .staff-name-info {
  display: block !important;
  min-width: 0 !important;
  position: relative !important;
}

.table-staff .staff-name-link {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  display: block !important;
  vertical-align: middle !important;
}
.table-staff .staff-name-link:hover {
  color: #2563eb !important;
  text-decoration: none !important;
}

/* ── Email sub-label under the name ── */
.table-staff .staff-email-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
  line-height: 1.3 !important;
}
.table-staff .staff-email-sub a {
  color: #94a3b8 !important;
  text-decoration: none !important;
}
.table-staff .staff-email-sub a:hover {
  color: #64748b !important;
}

/* ── Row options (View / Delete) ── */
/* Always absolute so it never contributes to row height; hidden off-screen by default */
.table-staff .row-options {
  position: absolute !important;
  left: -9999em !important;
  top: 100% !important;
  margin-top: 2px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}
/* Override the global "position: static on hover" — keep absolute, just move left: 0 */
.table-staff tr:hover td .row-options {
  position: absolute !important;
  left: 0 !important;
}
.table-staff .row-options a:not(.text-danger) {
  color: #64748b !important;
}
.table-staff .row-options a:not(.text-danger):hover {
  color: #2563eb !important;
}

/* ── Role pill badge ── */
.table-staff .staff-role-pill {
  display: inline-block !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* ── Recent activity: green pulse dot ── */
@keyframes staff-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  50%       { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

.table-staff .staff-pulse-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  margin-right: 5px !important;
  vertical-align: middle !important;
  animation: staff-pulse 1.6s ease-in-out infinite !important;
}

.table-staff .staff-login-recent {
  color: #16a34a !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Never login — low-contrast faded text ── */
.table-staff .staff-never-login {
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-style: italic !important;
}

/* ── Toggle switch (Active column) ── */
.table-staff .onoffswitch {
  width: 42px !important;
}
.table-staff .onoffswitch-label {
  border-radius: 20px !important;
  border-color: #e2e8f0 !important;
  background: #e2e8f0 !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.table-staff .onoffswitch-label:before {
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
  transition: all 0.2s !important;
}
.table-staff .onoffswitch-checkbox:checked + .onoffswitch-label {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* ── Row hover & dividers ── */
.table-staff tbody tr {
  transition: background 0.12s !important;
}
.table-staff tbody tr:hover td {
  background: #f8fafc !important;
}
.table-staff tbody tr td,
.table-staff tbody tr th {
  border-top: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}

/* ── Length select ── */
.staff-manage-page .dataTables_wrapper .dataTables_length { margin-right: 6px; }
.staff-manage-page .dataTables_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

.staff-manage-page .dataTables_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

/* ── Search — unified input-group box ── */
.staff-manage-page .dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.staff-manage-page .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.staff-manage-page .dataTables_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}
.staff-manage-page .dataTables_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}
.staff-manage-page .dataTables_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Export button ── */
.staff-manage-page .dt-export-buttons .btn,
.staff-manage-page .buttons-collection,
.staff-manage-page .buttons-html5 {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.staff-manage-page .dt-export-buttons .btn:hover,
.staff-manage-page .buttons-collection:hover,
.staff-manage-page .buttons-html5:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* ── Pagination ── */
.staff-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
}
.staff-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.staff-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}
.staff-manage-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   CUSTOMER GROUPS PAGE — Modern SaaS Management Panel
   ══════════════════════════════════════════════════ */

/* ── Search — unified input-group box ── */
#customer-groups_wrapper .dataTables_length { margin-right: 6px; }
#customer-groups_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }

#customer-groups_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#customer-groups_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
#customer-groups_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}
#customer-groups_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}
#customer-groups_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}
#customer-groups_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

/* ── New Customer Group button ── */
.customer-groups-page .btn.btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.customer-groups-page .btn.btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

/* ── Table header ── */
.table-customer-groups thead tr th {
  padding: 10px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* ── Table rows ── */
.table-customer-groups tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 13.5px !important;
  color: #111827 !important;
}
.table-customer-groups tbody tr { transition: background 0.12s !important; }
.table-customer-groups tbody tr:hover td { background: #f8fafc !important; }

/* ── Name cell ── */
.table-customer-groups .cg-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── Colored group badge ── */
.table-customer-groups .cg-group-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* ── Group name link ── */
.table-customer-groups .cg-name-link {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.table-customer-groups .cg-name-link:hover { color: #2563eb !important; }

/* ── Members count badge ── */
.table-customer-groups .cg-member-badge {
  display: inline-block !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ── Actions container ── */
.table-customer-groups .cg-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Edit button ── */
.table-customer-groups .cg-btn-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-customer-groups .cg-btn-edit:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

/* ── Delete button ── */
.table-customer-groups .cg-btn-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-customer-groups .cg-btn-delete:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
}


/* ── Pagination ── */
.customer-groups-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
}
.customer-groups-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.customer-groups-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}
.customer-groups-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   DEPARTMENTS PAGE — Modern SaaS Panel
   ══════════════════════════════════════════════════ */

/* ── New Department button ── */
.departments-page .btn.btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.departments-page .btn.btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

/* ── Table header ── */
.table-departments thead tr th {
  padding: 10px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* ── Table rows ── */
.table-departments tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
  color: #374151 !important;
}
.table-departments tbody tr { transition: background 0.12s !important; }
.table-departments tbody tr:hover td { background: #f8fafc !important; }

/* ── ID badge ── */
.table-departments .dept-id-badge {
  display: inline-block !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ── Name cell ── */
.table-departments .dept-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── Colored letter badge ── */
.table-departments .dept-group-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* ── Department name link ── */
.table-departments .dept-name-link {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.table-departments .dept-name-link:hover { color: #2563eb !important; }

/* ── Email link ── */
.table-departments .dept-email-link {
  color: #374151 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.table-departments .dept-email-link:hover { color: #2563eb !important; }
.table-departments .dept-email-icon {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

/* ── Calendar ID tag ── */
.table-departments .dept-cal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* ── Empty dash ── */
.table-departments .dept-empty {
  color: #d1d5db !important;
  font-size: 14px !important;
}

/* ── Actions container ── */
.table-departments .dept-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Edit button ── */
.table-departments .dept-btn-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-departments .dept-btn-edit:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

/* ── Delete button ── */
.table-departments .dept-btn-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-departments .dept-btn-delete:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecaca !important;
}

/* ── Search — unified input-group box ── */
.departments-page .dataTables_wrapper .dataTables_length { margin-right: 6px; }
.departments-page .dataTables_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }
.departments-page .dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.departments-page .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.departments-page .dataTables_wrapper .dataTables_filter .input-group-addon {
  border: none !important;
  background: transparent !important;
  padding: 6px 4px 6px 10px !important;
  color: #9ca3af !important;
  font-size: 12px;
  box-shadow: none !important;
}
.departments-page .dataTables_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  min-width: 180px;
}
.departments-page .dataTables_wrapper .dataTables_filter input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* ── Pagination ── */
.departments-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
}
.departments-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.departments-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}
.departments-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════
   TICKET PRIORITIES PAGE
   ══════════════════════════════════════════════════ */

.priorities-page .btn.btn-primary {
  background: var(--btn-p-bg) !important; border-color: var(--btn-p-border) !important;
  border-radius: 8px !important; font-size: 13px !important;
  font-weight: 600 !important; padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.priorities-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.table-priorities thead tr th {
  padding: 10px 16px !important; font-size: 11px !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; color: #6b7280 !important;
  background: #f9fafb !important; border-bottom: 1px solid #e5e7eb !important; border-top: none !important;
}
.table-priorities tbody tr td {
  padding: 13px 16px !important; vertical-align: middle !important; border-top: 1px solid #f1f5f9 !important;
}
.table-priorities tbody tr { transition: background 0.12s !important; }
.table-priorities tbody tr:hover td { background: #f8fafc !important; }
.table-priorities .prio-id-badge {
  display: inline-block !important; background: #f1f5f9 !important; color: #64748b !important;
  border-radius: 5px !important; padding: 2px 8px !important; font-size: 11.5px !important; font-weight: 600 !important;
}
.table-priorities .prio-name-pill {
  display: inline-block !important; border-radius: 20px !important; padding: 4px 14px !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.03em !important;
  text-decoration: none !important; text-transform: uppercase !important; transition: opacity 0.15s !important;
}
.table-priorities .prio-name-pill:hover { opacity: 0.82 !important; }
.table-priorities .prio-pill-low    { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.table-priorities .prio-pill-medium { background: #fef9c3 !important; color: #a16207 !important; border: 1px solid #fde68a !important; }
.table-priorities .prio-pill-high   { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
.table-priorities .prio-pill-default{ background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important; }
.table-priorities .prio-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
.table-priorities .prio-btn-edit,
.table-priorities .prio-btn-delete {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; border-radius: 7px !important;
  background: transparent !important; border: 1px solid transparent !important;
  color: #64748b !important; font-size: 14px !important; text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-priorities .prio-btn-edit:hover   { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; }
.table-priorities .prio-btn-delete:hover { background: #fef2f2 !important; color: #ef4444 !important; border-color: #fecaca !important; }

/* ══════════════════════════════════════════════════
   PREDEFINED REPLIES PAGE
   ══════════════════════════════════════════════════ */

.predefined-replies-page .btn.btn-primary {
  background: var(--btn-p-bg) !important; border-color: var(--btn-p-border) !important;
  border-radius: 8px !important; font-size: 13px !important;
  font-weight: 600 !important; padding: 8px 16px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.predefined-replies-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.table-predefined-replies thead tr th {
  padding: 10px 16px !important; font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important;
  color: #6b7280 !important; background: #f9fafb !important; border-bottom: 1px solid #e5e7eb !important;
}
.table-predefined-replies tbody tr td {
  padding: 13px 16px !important; vertical-align: middle !important; border-top: 1px solid #f1f5f9 !important;
}
.table-predefined-replies tbody tr { transition: background 0.12s !important; }
.table-predefined-replies tbody tr:hover td { background: #f8fafc !important; }
.table-predefined-replies .preply-name-cell { display: flex !important; align-items: center !important; gap: 10px !important; }
.table-predefined-replies .preply-doc-icon {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; border-radius: 7px !important;
  background: #f0f9ff !important; color: #0284c7 !important; font-size: 13px !important; flex-shrink: 0 !important;
}
.table-predefined-replies .preply-name-link {
  font-size: 13.5px !important; font-weight: 600 !important; color: #111827 !important;
  text-decoration: none !important; white-space: nowrap !important;
}
.table-predefined-replies .preply-name-link:hover { color: #2563eb !important; }
.table-predefined-replies .preply-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
.table-predefined-replies .preply-btn-edit,
.table-predefined-replies .preply-btn-delete {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; border-radius: 7px !important;
  background: transparent !important; border: 1px solid transparent !important;
  color: #64748b !important; font-size: 14px !important; text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.table-predefined-replies .preply-btn-edit:hover   { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; }
.table-predefined-replies .preply-btn-delete:hover { background: #fef2f2 !important; color: #ef4444 !important; border-color: #fecaca !important; }
/* ── Search — unified input-group box ── */
.predefined-replies-page .dataTables_wrapper .dataTables_length { margin-right: 6px; }
.predefined-replies-page .dataTables_wrapper .dt-buttons .btn + .btn { margin-left: 4px; }
.predefined-replies-page .dataTables_wrapper .dataTables_filter .input-group {
  display: inline-flex !important; align-items: center;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.predefined-replies-page .dataTables_wrapper .dataTables_filter .input-group:focus-within {
  border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.predefined-replies-page .dataTables_wrapper .dataTables_filter .input-group-addon {
  border: none !important; background: transparent !important;
  padding: 6px 4px 6px 10px !important; color: #9ca3af !important;
  font-size: 12px; box-shadow: none !important;
}
.predefined-replies-page .dataTables_wrapper .dataTables_filter input {
  border: none !important; border-radius: 0 !important;
  padding: 6px 12px 6px 4px !important; font-size: 13px !important;
  box-shadow: none !important; outline: none !important;
  background: transparent !important; min-width: 180px;
}
.predefined-replies-page .dataTables_wrapper .dataTables_filter input:focus {
  border: none !important; box-shadow: none !important;
}
.predefined-replies-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important; font-size: 13px !important; padding: 4px 10px !important;
  margin: 0 1px !important; border: 1px solid transparent !important; color: #374151 !important;
}
.predefined-replies-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.predefined-replies-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; box-shadow: none !important;
}
.predefined-replies-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important; border-color: #bfdbfe !important; color: #2563eb !important;
}

/* =====================================================================
   TICKET SERVICES PAGE  (.services-page)
   ===================================================================== */
.services-page .table-services th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px;
}
.services-page .table-services td {
    vertical-align: top;
    padding: 10px 14px 6px;
    border-bottom: 1px solid #f3f4f6;
}
.services-page .table-services tbody tr:last-child td { border-bottom: none; }
.services-page .table-services tbody tr:hover td { background: #f9fafb; }

/* ID badge */
.svc-id-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Name cell */
.svc-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.svc-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.svc-name-link {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}
.svc-name-link:hover { color: #2563eb; text-decoration: none; }

/* Action buttons */
.svc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.svc-btn-edit,
.svc-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.svc-btn-edit { color: #6b7280; background: transparent; }
.svc-btn-edit:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
.svc-btn-delete { color: #6b7280; background: transparent; }
.svc-btn-delete:hover { background: #fef2f2; color: #dc2626; text-decoration: none; }


/* =====================================================================
   SPAM FILTERS PAGE  (.spam-filters-page)
   ===================================================================== */

/* Tab styling */
.spam-filters-page .nav-tabs-segmented {
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0 !important;
}
.spam-filters-page .nav-tabs-segmented > li > a {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    border-radius: 0;
    background: transparent;
}
.spam-filters-page .nav-tabs-segmented > li.active > a,
.spam-filters-page .nav-tabs-segmented > li > a:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: transparent;
}

/* Table headers */
.spam-filters-page .table-sender th,
.spam-filters-page .table-subject th,
.spam-filters-page .table-phrase th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px;
}

/* Table cells */
.spam-filters-page .table-sender td,
.spam-filters-page .table-subject td,
.spam-filters-page .table-phrase td {
    vertical-align: top;
    padding: 10px 14px 6px;
    border-bottom: 1px solid #f3f4f6;
}
.spam-filters-page .table-sender tbody tr:last-child td,
.spam-filters-page .table-subject tbody tr:last-child td,
.spam-filters-page .table-phrase tbody tr:last-child td { border-bottom: none; }
.spam-filters-page .table-sender tbody tr:hover td,
.spam-filters-page .table-subject tbody tr:hover td,
.spam-filters-page .table-phrase tbody tr:hover td { background: #f9fafb; }

/* Value cell */
.sf-value-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.sf-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
    flex-shrink: 0;
}
.sf-value-text {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    word-break: break-all;
}

/* Action buttons */
.sf-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.sf-btn-edit,
.sf-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sf-btn-edit { color: #6b7280; background: transparent; }
.sf-btn-edit:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
.sf-btn-delete { color: #6b7280; background: transparent; }
.sf-btn-delete:hover { background: #fef2f2; color: #dc2626; text-decoration: none; }

/* Options td: positioned anchor for absolute action buttons */
.services-page .table-services td:last-child,
.spam-filters-page .table-sender td:last-child,
.spam-filters-page .table-subject td:last-child,
.spam-filters-page .table-phrase td:last-child {
    position: relative;
    min-width: 80px;
}

/* Button styling — Services & Spam Filters pages */
.services-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.services-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.spam-filters-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.spam-filters-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

/* =====================================================================
   TICKET STATUSES PAGE  (.statuses-page)
   ===================================================================== */
.statuses-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.statuses-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.statuses-page .table-statuses th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px;
}
.statuses-page .table-statuses td {
    vertical-align: middle;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.statuses-page .table-statuses tbody tr:last-child td { border-bottom: none; }
.statuses-page .table-statuses tbody tr:hover td { background: #f9fafb; }

/* ID badge */
.ts-id-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Name cell */
.ts-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ts-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.ts-name-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ts-name-link {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}
.ts-name-link:hover { color: #2563eb; text-decoration: none; }
.ts-count-badge {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

/* Action buttons */
.ts-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ts-btn-edit,
.ts-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ts-btn-edit { color: #6b7280; background: transparent; }
.ts-btn-edit:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
.ts-btn-delete { color: #6b7280; background: transparent; }
.ts-btn-delete:hover { background: #fef2f2; color: #dc2626; text-decoration: none; }

/* =====================================================================
   LEAD SOURCES PAGE  (.lead-sources-page)
   ===================================================================== */
.lead-sources-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.lead-sources-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.lead-sources-page .table-lead-sources th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px;
}
.lead-sources-page .table-lead-sources td {
    vertical-align: middle;
    padding: 10px 14px 26px;
    border-bottom: 1px solid #f3f4f6;
}
.lead-sources-page .table-lead-sources tbody tr:last-child td { border-bottom: none; }
.lead-sources-page .table-lead-sources tbody tr:hover td { background: #f9fafb; }

/* ID badge */
.src-id-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Name cell */
.src-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.src-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.src-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.src-name-link {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}
.src-name-link:hover { color: #2563eb; text-decoration: none; }
.src-count-badge {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

/* Action buttons */
.lead-sources-page .table-lead-sources td:last-child {
    position: relative;
    min-width: 80px;
}
.src-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    bottom: 4px;
    left: 14px;
}
.src-btn-edit,
.src-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.src-btn-edit { color: #6b7280; background: transparent; }
.src-btn-edit:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
.src-btn-delete { color: #6b7280; background: transparent; }
.src-btn-delete:hover { background: #fef2f2; color: #dc2626; text-decoration: none; }

/* Lead sources — alignment fix */
.lead-sources-page .table-lead-sources td {
    vertical-align: middle !important;
    padding: 12px 14px !important;
}
.lead-sources-page .table-lead-sources td:last-child {
    position: static !important;
}
.src-actions {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================================
   LEAD STATUSES PAGE  (.lead-statuses-page)
   ===================================================================== */
.lead-statuses-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.lead-statuses-page .btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

.lead-statuses-page .table-lead-statuses th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px;
}
.lead-statuses-page .table-lead-statuses td {
    vertical-align: middle;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.lead-statuses-page .table-lead-statuses tbody tr:last-child td { border-bottom: none; }
.lead-statuses-page .table-lead-statuses tbody tr:hover td { background: #f9fafb; }

/* ID badge */
.lst-id-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Name cell */
.lst-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lst-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.lst-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lst-name-link {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}
.lst-name-link:hover { color: #2563eb; text-decoration: none; }
.lst-count-badge {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

/* Action buttons */
.lst-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lst-btn-edit,
.lst-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.lst-btn-edit { color: #6b7280; background: transparent; }
.lst-btn-edit:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
.lst-btn-delete { color: #6b7280; background: transparent; }
.lst-btn-delete:hover { background: #fef2f2; color: #dc2626; text-decoration: none; }

/* =====================================================================
   EMAIL INTEGRATION PAGE  (.ei-page)
   ===================================================================== */
.ei-page {
    max-width: 1100px;
}

/* Page header */
.ei-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ei-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}
.ei-page-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}
.ei-spam-btn {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: background .15s !important;
}
.ei-spam-btn:hover { background: #f1f5f9 !important; }

/* Alert */
.ei-alert { border-radius: 8px; margin-bottom: 16px; }

/* Active toggle bar */
.ei-toggle-bar {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.ei-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.ei-toggle-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.ei-toggle-label { cursor: pointer; margin: 0; }
.ei-toggle-track {
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 999px;
    padding: 2px;
    transition: background .2s;
    cursor: pointer;
}
.ei-toggle-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform .2s;
}
.ei-toggle-input:checked ~ .ei-toggle-label .ei-toggle-track { background: #2563eb; }
.ei-toggle-input:checked ~ .ei-toggle-label .ei-toggle-thumb { transform: translateX(20px); }
.ei-toggle-text {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Grid */
.ei-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Cards */
.ei-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ei-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
}
.ei-card-icon {
    font-size: 18px;
    color: #2563eb;
    margin-top: 2px;
    flex-shrink: 0;
}
.ei-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}
.ei-card-desc {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.ei-card-body {
    padding: 20px;
}

/* Input styling inside cards */
.ei-card-body .form-group label.control-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.ei-card-body .form-control {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    color: #111827 !important;
    box-shadow: none !important;
    transition: border-color .15s !important;
}
.ei-card-body .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}
.ei-card-body .input-group .form-control { border-radius: 8px 0 0 8px !important; }
.ei-card-body .input-group-btn .btn {
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid #d1d5db !important;
    border-left: none !important;
    background: #f9fafb !important;
    color: #374151 !important;
}
.ei-card-body .input-group-btn .btn:hover { background: #f1f5f9 !important; }

/* Retrieve folders link */
.ei-retrieve-link {
    font-size: 12px;
    color: #2563eb;
    margin-left: 8px;
    font-weight: 500;
}

/* Encryption radio group */
.ei-radio-group { margin-bottom: 0; }
.ei-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.ei-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.ei-radio-option:hover { border-color: #2563eb; background: #eff6ff; }
.ei-radio-option input[type="radio"] { display: none; }
.ei-radio-dot {
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s;
}
.ei-radio-option input[type="radio"]:checked ~ .ei-radio-dot {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: inset 0 0 0 3px #fff;
}
.ei-radio-option input[type="radio"]:checked ~ * { color: #2563eb; }
.ei-radio-option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }

/* Checkboxes */
.ei-check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.ei-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    transition: background .15s, border-color .15s;
}
.ei-check-item:hover { background: #f9fafb; border-color: #e5e7eb; }
.ei-check-item input[type="checkbox"] { display: none; }
.ei-check-box {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: border-color .15s, background .15s;
    background: #fff;
}
.ei-check-item input:checked ~ .ei-check-box {
    border-color: #2563eb;
    background: #2563eb;
}
.ei-check-item input:checked ~ .ei-check-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.ei-check-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}
.ei-help-icon {
    color: #9ca3af;
    font-size: 12px;
    margin-left: 4px;
}

/* Section divider & label */
.ei-section-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 16px 0;
}
.ei-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 10px;
}

/* Footer action bar */
.ei-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ei-test-btn {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
    transition: background .15s, border-color .15s !important;
}
.ei-test-btn:hover { background: #f9fafb !important; border-color: #9ca3af !important; color: #111827 !important; }
.ei-test-btn.disabled { opacity: .5; pointer-events: none; }
.ei-save-btn {
    background: var(--btn-p-bg) !important;
    border: 1px solid var(--btn-p-border) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background .15s, box-shadow .15s !important;
}
.ei-save-btn:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; box-shadow: var(--btn-p-shadow-h) !important; }

/* Email integration — full width, no max-width constraint */
.ei-page { max-width: 100% !important; }

/* Email integration — centered with equal left/right margin */
.ei-page {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Email integration — wider */
.ei-page { max-width: 1200px !important; }

/* Leads Forms — New Form button */
.btn-forms-new.btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: var(--btn-p-shadow) !important;
}
.btn-forms-new.btn.btn-primary:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; }

/* =====================================================================
   MODULES PAGE  (.modules-page)
   ===================================================================== */

/* Upload card */
.mod-upload-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.mod-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}
.mod-upload-body { flex: 1; }
.mod-upload-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
.mod-upload-desc {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}
.mod-upload-desc code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
}
.mod-upload-form { margin: 0; }
.mod-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mod-file-input {
    font-size: 13px;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}
.mod-install-btn {
    background: var(--btn-p-bg) !important;
    border: 1px solid var(--btn-p-border) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    white-space: nowrap;
    box-shadow: var(--btn-p-shadow) !important;
    transition: background .15s, box-shadow .15s !important;
}
.mod-install-btn:hover { background: var(--btn-p-bg-h) !important; border-color: var(--btn-p-border-h) !important; box-shadow: var(--btn-p-shadow-h) !important; }

/* Table */
.modules-page .table-modules th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 16px;
}
.modules-page .table-modules td {
    vertical-align: top;
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
}
.modules-page .table-modules tbody tr:last-child td { border-bottom: none; }
.modules-page .table-modules tbody tr:hover td { background: #fafafa; }
.mod-row-active td { background: #f0fdf4 !important; }
.mod-row-active:hover td { background: #dcfce7 !important; }
.mod-row-warning td { background: #fffbeb !important; }
.mod-row-warning:hover td { background: #fef3c7 !important; }

/* Module name cell */
.mod-name-cell { display: flex; gap: 12px; align-items: flex-start; }
.mod-name-info { display: flex; flex-direction: column; gap: 8px; }
.mod-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mod-name-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Status badges */
.mod-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.mod-status-active   { background: #dcfce7; color: #16a34a; }
.mod-status-inactive { background: #f1f5f9; color: #64748b; }
.mod-status-upgrade  { background: #fef3c7; color: #d97706; }
.mod-status-dot { font-size: 6px; }

/* Action buttons */
.mod-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mod-actions a,
.mod-action-activate,
.mod-action-deactivate,
.mod-action-upgrade,
.mod-action-uninstall {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    border: 1px solid transparent;
}
.mod-action-activate  { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.mod-action-activate:hover  { background: #dbeafe; color: #1d4ed8; text-decoration: none; }
.mod-action-deactivate { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.mod-action-deactivate:hover { background: #e2e8f0; color: #1e293b; text-decoration: none; }
.mod-action-upgrade   { background: #fef3c7; color: #d97706; border-color: #fde68a; }
.mod-action-upgrade:hover   { background: #fde68a; color: #b45309; text-decoration: none; }
.mod-action-uninstall { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.mod-action-uninstall:hover { background: #fee2e2; color: #b91c1c; text-decoration: none; }
/* Fallback for hook-injected links */
.mod-actions a:not([class]) { background: #f1f5f9; color: #374151; border-color: #e5e7eb; }
.mod-actions a:not([class]):hover { background: #e5e7eb; text-decoration: none; }

/* Inline alerts */
.mod-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}
.mod-alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.mod-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.mod-alert-link    { color: inherit; font-weight: 600; text-decoration: underline; }
.mod-alert-link:hover { opacity: .8; }

/* Description cell */
.mod-desc-cell { display: flex; flex-direction: column; gap: 6px; }
.mod-desc-text { font-size: 13px; color: #374151; margin: 0; line-height: 1.5; }
.mod-meta { font-size: 12px; color: #9ca3af; }
.mod-meta a { color: #6b7280; }
.mod-meta a:hover { color: #2563eb; }
.mod-version-badge {
    display: inline-block;
    padding: 1px 7px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.mod-author-link { color: #2563eb; text-decoration: none; }
.mod-author-link:hover { text-decoration: underline; }

/* =====================================================================
   EMAIL TEMPLATES PAGE  (.email-templates)
   ===================================================================== */

/* Page title */
.email-templates h4.tw-font-bold.tw-text-lg {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 20px;
}

/* Remove panel shadow, add clean border */
.email-templates .panel_s {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.email-templates .panel-body { padding: 0 !important; }
.email-templates .panel-body > .row { margin: 0 !important; }
.email-templates .panel-body > .row > .col-md-12 { padding: 0 !important; }

/* Section heading */
.email-templates .email-template-heading {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #374151 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-left: 4px solid #2563eb !important;
    padding: 11px 16px !important;
    margin: 0 !important;
    clear: both;
}

/* Enable All / Disable All links inside heading */
.email-templates .email-template-heading a.pull-right {
    float: none !important;
    margin-left: 6px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: all .15s !important;
}
.email-templates .email-template-heading a.pull-right:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}
/* Push enable/disable all to right end */
.email-templates .email-template-heading a.pull-right:first-of-type {
    margin-left: auto !important;
}

/* Remove table bordered styles */
.email-templates .table-responsive { margin: 0 !important; }
.email-templates .table.table-bordered {
    border: none !important;
    margin: 0 !important;
}
.email-templates .table.table-bordered,
.email-templates .table.table-bordered > thead > tr > th,
.email-templates .table.table-bordered > tbody > tr > td {
    border: none !important;
}

/* Hide thead (Template Name header is redundant in each section) */
.email-templates .table.table-bordered thead { display: none; }

/* Template rows */
.email-templates .table.table-bordered > tbody > tr > td {
    padding: 11px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    background: #fff;
    transition: background .12s;
}
.email-templates .table.table-bordered > tbody > tr:last-child > td {
    border-bottom: none !important;
}
.email-templates .table.table-bordered > tbody > tr:hover > td {
    background: #f9fafb !important;
}

/* Template name links */
.email-templates .table.table-bordered > tbody > tr > td > a:not(.pull-right) {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    text-decoration: none !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a:not(.pull-right):hover {
    color: #2563eb !important;
}

/* Disabled template rows — muted */
.email-templates .table.table-bordered > tbody > tr > td.tw-line-through,
.email-templates .table.table-bordered > tbody > tr > td.text-throught {
    opacity: .55;
}
.email-templates .table.table-bordered > tbody > tr > td.tw-line-through > a:not(.pull-right),
.email-templates .table.table-bordered > tbody > tr > td.text-throught > a:not(.pull-right) {
    text-decoration: line-through !important;
    color: #6b7280 !important;
}

/* Enable / Disable per-row toggle links */
.email-templates .table.table-bordered > tbody > tr > td > a.pull-right {
    float: right !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .15s !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a.pull-right small {
    font-size: inherit !important;
    font-weight: inherit !important;
}
/* Active template → Disable link (red) */
.email-templates .table.table-bordered > tbody > tr > td:not(.tw-line-through):not(.text-throught) > a.pull-right {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}
.email-templates .table.table-bordered > tbody > tr > td:not(.tw-line-through):not(.text-throught) > a.pull-right:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}
/* Inactive template → Enable link (green) */
.email-templates .table.table-bordered > tbody > tr > td.tw-line-through > a.pull-right,
.email-templates .table.table-bordered > tbody > tr > td.text-throught > a.pull-right {
    background: #dcfce7 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    opacity: 1 !important;
}
.email-templates .table.table-bordered > tbody > tr > td.tw-line-through > a.pull-right:hover,
.email-templates .table.table-bordered > tbody > tr > td.text-throught > a.pull-right:hover {
    background: #bbf7d0 !important;
    color: #15803d !important;
}

/* Email templates — bigger text and gap fix */
.email-templates .table.table-bordered > tbody > tr > td > a:not(.pull-right) {
    font-size: 14px !important;
    color: #111827 !important;
    font-weight: 500 !important;
}
.email-templates .table.table-bordered > tbody > tr > td {
    padding-right: 140px !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a.pull-right {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.email-templates .table.table-bordered > tbody > tr > td {
    position: relative !important;
}

/* Email templates — bigger section heading text */
.email-templates .email-template-heading {
    font-size: 14px !important;
    letter-spacing: .02em !important;
}

/* Email templates — bigger Disable All / Enable All button text */
.email-templates .email-template-heading a.pull-right {
    font-size: 13px !important;
    padding: 5px 14px !important;
}

/* Email templates — Disable All / Enable All button text 15px */
.email-templates .email-template-heading a.pull-right {
    font-size: 15px !important;
}

/* Email templates — Disable All / Enable All 17px bold */
.email-templates .email-template-heading a.pull-right {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* Email templates — fix button order: Enable All left, Disable All right */
.email-templates .email-template-heading a.pull-right:first-of-type {
    margin-left: 0 !important;
    order: 2 !important;
}
.email-templates .email-template-heading a.pull-right:last-of-type {
    margin-left: auto !important;
    order: 1 !important;
}

/* Email templates — gap between Enable All and Disable All */
.email-templates .email-template-heading a.pull-right {
    margin-left: 8px !important;
}
.email-templates .email-template-heading a.pull-right:last-of-type {
    margin-left: auto !important;
}

/* =====================================================================
   EMAIL TEMPLATES — FINAL CLEAN FIX
   ===================================================================== */

/* Section heading: flex, title left, buttons right with gap */
.email-templates .email-template-heading {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
.email-templates .email-template-heading a.pull-right {
    float: none !important;
    order: unset !important;
    margin-left: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #374151 !important;
    text-decoration: none !important;
}
.email-templates .email-template-heading a.pull-right:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}
/* Push both buttons to the right with spacing */
.email-templates .email-template-heading a.pull-right:first-of-type {
    margin-left: auto !important;
    margin-right: 8px !important;
    order: unset !important;
}
.email-templates .email-template-heading a.pull-right:last-of-type {
    margin-left: 0 !important;
    order: unset !important;
}

/* Template rows: name visible, Disable/Enable button right */
.email-templates .table.table-bordered > tbody > tr > td {
    position: relative !important;
    padding: 11px 150px 11px 16px !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a:not(.pull-right) {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    text-decoration: none !important;
    display: inline !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a:not(.pull-right):hover {
    color: #2563eb !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a.pull-right {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Email templates — Enable All LEFT, Disable All RIGHT */
/* DOM: first-of-type=Disable All, last-of-type=Enable All */
.email-templates .email-template-heading a.pull-right:last-of-type {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}
.email-templates .email-template-heading a.pull-right:first-of-type {
    order: 2 !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* Email templates — row layout fix: no reserved gap, button flows naturally */
.email-templates .table.table-bordered > tbody > tr > td {
    position: static !important;
    padding: 11px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.email-templates .table.table-bordered > tbody > tr > td > a.pull-right {
    position: static !important;
    transform: none !important;
    float: none !important;
    flex-shrink: 0 !important;
}

/* Email templates — Enable All / Disable All as button group */
.email-templates .email-template-heading a.pull-right:last-of-type {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
    margin-right: 0 !important;
}
.email-templates .email-template-heading a.pull-right:first-of-type {
    border-radius: 0 6px 6px 0 !important;
    margin-left: 0 !important;
}

/* Email templates — remove divider between Enable All / Disable All */
.email-templates .email-template-heading a.pull-right:last-of-type {
    border-right: none !important;
}
.email-templates .email-template-heading a.pull-right:first-of-type {
    border-left: none !important;
}

/* Custom Fields page — primary button blue */
.custom-fields-page .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    color: #fff !important;
}
.custom-fields-page .btn.btn-primary:hover {
    background: var(--btn-p-bg-h) !important;
    border-color: var(--btn-p-border-h) !important;
}

/* =====================================================================
   GDPR PAGE
   ===================================================================== */

/* Left sidebar nav */
.gdpr-page .col-md-3 {
    padding-right: 8px !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    padding: 6px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li {
    margin: 0 !important;
    border: none !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li > a {
    display: block !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    transition: all .14s !important;
    line-height: 1.4 !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li > a:hover {
    background: #f8fafc !important;
    color: #2563eb !important;
    border-left-color: #bfdbfe !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li.active > a,
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li.active > a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-left-color: #2563eb !important;
    font-weight: 600 !important;
}
.gdpr-page .nav.navbar-pills.navbar-pills-flat.nav-tabs.nav-stacked > li + li {
    border-top: 1px solid #f3f4f6 !important;
}

/* Right content panel */
.gdpr-page .col-md-9 .panel_s {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
}
.gdpr-page .col-md-9 .panel-body {
    padding: 28px 28px 20px !important;
}

/* Page title h4 */
.gdpr-page .col-md-9 .panel-body > h4.no-mtop,
.gdpr-page .col-md-9 .panel-body h4.no-mtop.mbot15 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.gdpr-page .col-md-9 .panel-body > h4.no-mtop small a,
.gdpr-page .col-md-9 .panel-body h4.no-mtop.mbot15 small a {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #2563eb !important;
    text-decoration: none !important;
}
.gdpr-page .col-md-9 .panel-body > h4.no-mtop small a:hover {
    text-decoration: underline !important;
}

/* Inline tab nav (Config / Removal Requests) */
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin {
    border-bottom: 2px solid #e5e7eb !important;
    margin-bottom: 20px !important;
}
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin > li > a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 9px 16px !important;
    margin-bottom: -2px !important;
    background: transparent !important;
    transition: all .14s !important;
}
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin > li > a:hover {
    color: #374151 !important;
    background: transparent !important;
    border-bottom-color: #d1d5db !important;
}
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin > li.active > a,
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin > li.active > a:hover {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.gdpr-page .nav.nav-tabs.tabs-in-body-no-margin > li.active > a .badge {
    background: #2563eb !important;
}

/* Section headings inside tab content */
.gdpr-page .tab-pane h4,
.gdpr-page .panel-body h4:not(.no-mtop) {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #6b7280 !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* Separators */
.gdpr-page .hr-panel-separator,
.gdpr-page hr {
    border-color: #f3f4f6 !important;
    margin: 12px 0 !important;
}

/* Yes/No radio rows */
.gdpr-page .form-group .radio {
    margin: 4px 0 !important;
}
.gdpr-page .form-group label {
    font-size: 13.5px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Select dropdowns */
.gdpr-page .select-placeholder {
    margin-top: 6px !important;
}

/* Save button bar */
.gdpr-page ~ .btn-bottom-toolbar,
.gdpr-page + .btn-bottom-toolbar {
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 14px 24px !important;
    margin-top: 0 !important;
}
.btn-bottom-toolbar .btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    color: #fff !important;
    padding: 8px 24px !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.btn-bottom-toolbar .btn.btn-primary:hover {
    background: var(--btn-p-bg-h) !important;
    border-color: var(--btn-p-border-h) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM SIDEBAR REDESIGN — 2025
   Matched to Finvu-style dark navy SaaS sidebar
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Color Design Tokens ── */
:root {
  --sb-bg:          #1B2038;
  --sb-hover:       rgba(255, 255, 255, 0.05);
  --sb-border:      rgba(255, 255, 255, 0.07);
  --sb-accent-p:    #7245CC;
  --sb-accent-s:    #4A78D0;
  --sb-teal:        #2EC4A0;
  --sb-text:        #E2E8F0;
  --sb-text-muted:  #8B92B0;
  --sb-text-dim:    #5A6282;
  --sb-glow-p:      rgba(114, 69, 204, 0.55);
  --sb-t:           180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Primary Button Color Tokens (change here to update ALL buttons) ── */
  --btn-p-bg:       linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  --btn-p-border:   #6d28d9;
  --btn-p-shadow:   0 2px 6px rgba(124,58,237,.30);
  --btn-p-bg-h:     linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  --btn-p-border-h: #5b21b6;
  --btn-p-shadow-h: 0 4px 12px rgba(124,58,237,.40);
}

/* ── Font (text labels only — never touch icon/fa span elements) ── */
.sidebar-premium .menu-text,
.sidebar-premium .sub-menu-text,
.sidebar-premium .sb-brand-name,
.sidebar-premium .sb-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Outer Layout Shell (transparent — just holds the width/position) ── */
.sidebar.sidebar-premium {
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  padding:     0 !important;
  width:       260px !important;
}

/* ── Layout: adjust content wrapper for new sidebar width ── */
#wrapper                                           { margin-left: 260px !important; }
body.hide-sidebar:not(.show-sidebar) #menu         { margin-left: -260px !important; }
body.page-small #menu                              { margin-left: -260px !important; }
body.page-small.show-sidebar #wrapper              { margin-left: 260px !important; }

/* Header + Wrapper mirror sidebar collapse states */
body.hide-sidebar:not(.show-sidebar) #header       { margin-left: 0 !important; }
body.page-small:not(.show-sidebar) #header         { margin-left: 0 !important; }
body.page-small.show-sidebar #header               { margin-left: 260px !important; }
body.hide-sidebar:not(.show-sidebar) #wrapper      { margin-left: 0 !important; }
body.page-small:not(.show-sidebar) #wrapper        { margin-left: 0 !important; }
body.customers #wrapper                            { margin-left: 0 !important; }

@media (max-width: 768px) {
  #header                                          { margin-left: 0 !important; }
  .sidebar                                         { z-index: 10001 !important; }
}

/* RTL mirrors */
[dir="rtl"] .sidebar.sidebar-premium                                          { right: 0; left: auto; }
[dir="rtl"] #wrapper                                                          { margin-right: 260px !important; margin-left: 0 !important; }
[dir="rtl"] body.hide-sidebar:not(.show-sidebar) .sidebar-premium            { margin-right: -260px !important; margin-left: 0 !important; }
[dir="rtl"] body.hide-sidebar:not(.show-sidebar) #wrapper                    { margin-right: 0 !important; }
[dir="rtl"] body.page-small .sidebar-premium                                 { margin-right: -260px !important; margin-left: 0 !important; }
[dir="rtl"] body.page-small.show-sidebar .sidebar-premium                    { margin-right: 0 !important; }
[dir="rtl"] body.page-small.show-sidebar #wrapper                            { margin-right: 260px !important; margin-left: 0 !important; }

/* ── Card (flush with sidebar edges) ── */
.sidebar-premium .sidebar-body {
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  bottom:        0;
  background:    var(--sb-bg);
  border-radius: 0;
  border-right:  1px solid var(--sb-border);
  box-shadow:    4px 0 24px rgba(0, 0, 0, 0.45);
  overflow-x:    hidden;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* ── Brand / Logo Area ── */
.sb-brand {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        14px 16px 14px 24px;
  border-bottom:  1px solid var(--sb-border);
  margin-top:     0;
  position:       sticky;
  top:            0;
  background:     var(--sb-bg);
  z-index:        2;
}

.sb-logo-mark {
  width:          34px;
  height:         34px;
  border-radius:  10px;
  background:     linear-gradient(135deg, #7245CC 0%, #4A78D0 100%);
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  box-shadow:     0 4px 12px rgba(114, 69, 204, 0.4);
}

.sb-brand-name {
  flex:           1;
  font-size:      18px;
  font-weight:    700;
  color:          #E2E8F0 !important;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  letter-spacing: 0.02em;
  font-family:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.sb-collapse-btn {
  width:          28px;
  height:         28px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border-radius:  7px;
  border:         1px solid var(--sb-border);
  color:          var(--sb-text-muted);
  font-size:      11px;
  background:     transparent;
  cursor:         pointer;
  flex-shrink:    0;
  transition:     background var(--sb-t), color var(--sb-t), border-color var(--sb-t);
  text-decoration: none;
}

.sb-collapse-btn:hover {
  background:    rgba(255,255,255,0.08);
  color:         var(--sb-text);
  border-color:  rgba(255,255,255,0.15);
  text-decoration: none;
}

/* Scrollbar track */
.sidebar-premium .sidebar-body::-webkit-scrollbar       { width: 3px; }
.sidebar-premium .sidebar-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-premium .sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sidebar-premium .sidebar-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Menu List ── */
.sidebar-premium ul.nav#side-menu {
  margin-top:  0 !important;
  padding:     10px 12px 32px !important;
}

/* ── Top-level List Items ── */
.sidebar-premium ul.nav > li {
  border-left:  none !important;
  margin-bottom: 2px !important;
  position:     relative !important;
}

/* ── ALL Menu Links (base) ── */
.sidebar-premium ul.nav li > a {
  display:         flex !important;
  align-items:     center !important;
  padding:         9px 10px !important;
  color:           var(--sb-text-muted) !important;
  font-size:       13.5px !important;
  font-weight:     500 !important;
  border-radius:   10px !important;
  border:          1px solid transparent !important;
  transition:
    background   var(--sb-t),
    color        var(--sb-t),
    border-color var(--sb-t),
    box-shadow   var(--sb-t) !important;
  position:        relative !important;
  margin-top:      0 !important;
  text-decoration: none !important;
  letter-spacing:  0.01em !important;
}

/* ── Icon ── */
.sidebar-premium ul.nav li > a > i.menu-icon {
  color:          var(--sb-text-dim) !important;
  font-size:      16px !important;
  width:          22px !important;
  height:         22px !important;
  display:        flex !important;
  align-items:    center !important;
  justify-content: center !important;
  margin-right:   10px !important;
  float:          none !important;
  flex-shrink:    0 !important;
  border-radius:  6px !important;
  padding:        3px !important;
  text-align:     center !important;
  transition:     color var(--sb-t), background var(--sb-t) !important;
}

/* ── Menu Text ── */
.sidebar-premium ul.nav li > a > .menu-text {
  flex:           1 !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
  font-weight:    500 !important;
}

/* ── Arrow (metisMenu expand indicator) ── */
.sidebar-premium ul.nav li > a > .fa.arrow {
  float:          none !important;
  margin-left:    auto !important;
  padding-top:    0 !important;
  flex-shrink:    0 !important;
  font-size:      0 !important;
  color:          transparent !important;
  line-height:    0 !important;
  width:          20px !important;
  height:         20px !important;
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  border:         none !important;
  background:     none !important;
}

/* Suppress any ::before content from FontAwesome/MetisMenu */
.sidebar-premium ul.nav li > a > .fa.arrow::before {
  content:   none !important;
  display:   none !important;
}

/* CSS chevron via ::after — clean, no FA conflict */
.sidebar-premium ul.nav li > a > .fa.arrow::after {
  content:         '' !important;
  display:         block !important;
  width:           7px !important;
  height:          7px !important;
  border-right:    2px solid var(--sb-text-muted) !important;
  border-top:      2px solid var(--sb-text-muted) !important;
  border-left:     none !important;
  border-bottom:   none !important;
  transform:       rotate(45deg) !important;
  transition:      transform var(--sb-t), border-color var(--sb-t) !important;
  font-family:     unset !important;
  margin-top:      -2px !important;
}

/* Rotated when expanded */
.sidebar-premium ul.nav li > a[aria-expanded="true"] > .fa.arrow::after {
  transform:       rotate(135deg) !important;
  margin-top:      2px !important;
  border-color:    var(--sb-teal) !important;
}

/* ── Badge ── */
.sidebar-premium ul.nav li > a > .badge {
  float:          none !important;
  margin-left:    auto !important;
  flex-shrink:    0 !important;
  font-size:      10px !important;
  padding:        2px 7px !important;
  border-radius:  20px !important;
  line-height:    14px !important;
}

/* ══════════════════════
   HOVER STATE
   ══════════════════════ */
.sidebar-premium ul.nav > li:hover > a:first-child,
.sidebar-premium ul.nav > li > a:hover,
.sidebar-premium ul.nav > li > a:focus {
  background:   var(--sb-hover) !important;
  color:        var(--sb-text) !important;
  border-color: transparent !important;
  box-shadow:   none !important;
}

.sidebar-premium ul.nav > li > a:hover > i.menu-icon,
.sidebar-premium ul.nav > li > a:focus > i.menu-icon {
  opacity: 1 !important;
}

.sidebar-premium ul.nav > li:hover > a:first-child > .fa.arrow::after,
.sidebar-premium ul.nav > li > a:hover > .fa.arrow::after {
  border-color: var(--sb-text-muted) !important;
}

/* ══════════════════════════════════════════════════
   ACTIVE STATE — Solid gradient (leaf items/current page)
   ══════════════════════════════════════════════════ */
.sidebar-premium ul.nav > li.active > a:first-child {
  background:   linear-gradient(90deg, #6B3DC8 0%, #4A70CF 100%) !important;
  border:       none !important;
  border-radius: 10px !important;
  color:        #FFFFFF !important;
  font-weight:  600 !important;
  box-shadow:
    0 4px 20px rgba(107, 61, 200, 0.45),
    0 1px  4px rgba(0, 0, 0, 0.3) !important;
}

/* Icon on solid-gradient active item */
.sidebar-premium ul.nav > li.active > a:first-child > i.menu-icon {
  background:    rgba(255, 255, 255, 0.18) !important;
  color:         #FFFFFF !important;
  width:         28px !important;
  height:        28px !important;
  border-radius: 8px !important;
}

/* Left glow indicator */
.sidebar-premium ul.nav > li.active > a:first-child::before {
  content: none !important;
}

/* Active text — force white on all active items */
.sidebar-premium ul.nav > li.active > a:first-child,
.sidebar-premium ul.nav > li.active > a:first-child .menu-text,
.sidebar-premium ul.nav > li.active > a:first-child .sub-menu-text,
.sidebar-premium ul.nav li.active > a {
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════
   EXPANDABLE PARENT ACTIVE STATE (teal accent)
   Applied when parent has active children but is itself expandable
   ══════════════════════════════════════════════════ */
.sidebar-premium ul.nav > li.active:has(> ul.nav-second-level) > a:first-child {
  background:   rgba(46, 196, 160, 0.1) !important;
  border:       none !important;
  border-radius: 10px !important;
  color:        var(--sb-teal) !important;
  font-weight:  600 !important;
  box-shadow:   none !important;
}

.sidebar-premium ul.nav > li.active:has(> ul.nav-second-level) > a:first-child > i.menu-icon {
  background:    rgba(46, 196, 160, 0.18) !important;
  color:         var(--sb-teal) !important;
  width:         28px !important;
  height:        28px !important;
  border-radius: 8px !important;
}

.sidebar-premium ul.nav > li.active:has(> ul.nav-second-level) > a:first-child > .menu-text {
  color: var(--sb-teal) !important;
}

.sidebar-premium ul.nav > li.active:has(> ul.nav-second-level) > a:first-child > .fa.arrow::after {
  border-color: var(--sb-teal) !important;
}

/* ══════════════════════
   SUBMENU CONTAINER
   ══════════════════════ */
.sidebar-premium ul.nav > li > .nav-second-level {
  position:    relative !important;
  padding:     0 !important;
  background:  transparent !important;
}

/* Spacing via child margins — safe for Bootstrap collapse animation */
.sidebar-premium ul.nav > li > .nav-second-level > li:first-child {
  margin-top: 4px !important;
}
.sidebar-premium ul.nav > li > .nav-second-level > li:last-child {
  margin-bottom: 8px !important;
}

/* Vertical connector line — teal */
.sidebar-premium ul.nav > li > .nav-second-level::before {
  content:     '' !important;
  position:    absolute !important;
  left:        23px !important;
  top:         10px !important;
  bottom:      14px !important;
  width:       1px !important;
  background:  linear-gradient(
    180deg,
    transparent 0%,
    rgba(46, 196, 160, 0.35) 15%,
    rgba(46, 196, 160, 0.35) 85%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* ── Submenu Links ── */
.sidebar-premium ul.nav li .nav-second-level li > a,
.sidebar-premium ul.nav li .nav-second-level li a {
  display:        flex !important;
  align-items:    center !important;
  padding:        7px 12px 7px 16px !important;
  color:          var(--sb-text-dim) !important;
  font-size:      13px !important;
  font-weight:    400 !important;
  border-radius:  8px !important;
  background:     transparent !important;
  box-shadow:     none !important;
  border:         1px solid transparent !important;
  position:       relative !important;
  transition:     color var(--sb-t), background var(--sb-t) !important;
  margin-top:     0 !important;
}

/* Dot indicator — removed */
.sidebar-premium ul.nav li .nav-second-level li > a::before,
.sidebar-premium ul.nav li .nav-second-level li a::before {
  display: none !important;
}

/* Submenu icon */
.sidebar-premium ul.nav > li .nav-second-level a .menu-icon {
  float:          none !important;
  width:          16px !important;
  height:         16px !important;
  font-size:      13px !important;
  line-height:    16px !important;
  text-align:     center !important;
  margin-right:   8px !important;
  flex-shrink:    0 !important;
  color:          rgba(139, 146, 176, 0.75) !important;
  transition:     color var(--sb-t) !important;
}

/* Submenu sub-text span */
.sidebar-premium ul.nav li .nav-second-level li > a > .sub-menu-text {
  flex: 1 !important;
}

/* Badge inside submenu */
.sidebar-premium ul.nav li .nav-second-level li > .badge,
#side-menu    li .nav-second-level li > .badge,
#setup-menu   li .nav-second-level li > .badge {
  position:   absolute !important;
  right:      10px !important;
  top:        50% !important;
  transform:  translateY(-50%) !important;
}

/* ── Submenu Hover ── */
.sidebar-premium ul.nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar-premium ul.nav > li .nav-second-level > li:not(.active) > a:focus {
  color:      var(--sb-text-muted) !important;
  background: rgba(30, 41, 59, 0.45) !important;
}


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

/* ── Submenu Active ── */
.sidebar-premium ul.nav li .nav-second-level li.active > a,
.sidebar-premium ul.nav li .nav-second-level li.active a {
  color:       var(--sb-text) !important;
  font-weight: 500 !important;
  background:  rgba(46, 196, 160, 0.08) !important;
}

.sidebar-premium ul.nav li .nav-second-level li.active > a::before,
.sidebar-premium ul.nav li .nav-second-level li.active a::before {
  display: none !important;
  width:       0 !important;
  height:      0 !important;
  left:        19px !important;
}

.sidebar-premium ul.nav li .nav-second-level li.active > a .menu-icon,
.sidebar-premium ul.nav li .nav-second-level li.active a .menu-icon {
  color: var(--sb-teal) !important;
}

/* ══════════════════════════════════════════════════
   PER-ITEM ICON COLORS (unique accent per section)
   ══════════════════════════════════════════════════ */

/* Dashboard — violet */
.sidebar-premium .menu-item-dashboard > a > i.menu-icon {
  color: #A78BFA !important;
  background: rgba(167, 139, 250, 0.12) !important;
}

/* Customers — sky blue */
.sidebar-premium .menu-item-customers > a > i.menu-icon {
  color: #60A5FA !important;
  background: rgba(96, 165, 250, 0.12) !important;
}

/* Sales — teal */
.sidebar-premium .menu-item-sales > a > i.menu-icon {
  color: #2EC4A0 !important;
  background: rgba(46, 196, 160, 0.12) !important;
}

/* Subscriptions — cyan */
.sidebar-premium .menu-item-subscriptions > a > i.menu-icon {
  color: #22D3EE !important;
  background: rgba(34, 211, 238, 0.12) !important;
}

/* Expenses — amber */
.sidebar-premium .menu-item-expenses > a > i.menu-icon {
  color: #FBBF24 !important;
  background: rgba(251, 191, 36, 0.12) !important;
}

/* Contracts — indigo */
.sidebar-premium .menu-item-contracts > a > i.menu-icon {
  color: #818CF8 !important;
  background: rgba(129, 140, 248, 0.12) !important;
}

/* Projects — emerald */
.sidebar-premium .menu-item-projects > a > i.menu-icon {
  color: #34D399 !important;
  background: rgba(52, 211, 153, 0.12) !important;
}

/* Tasks — pink */
.sidebar-premium .menu-item-tasks > a > i.menu-icon {
  color: #F472B6 !important;
  background: rgba(244, 114, 182, 0.12) !important;
}

/* Support — light blue */
.sidebar-premium .menu-item-support > a > i.menu-icon {
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
}

/* Leads — purple */
.sidebar-premium .menu-item-leads > a > i.menu-icon {
  color: #C084FC !important;
  background: rgba(192, 132, 252, 0.12) !important;
}

/* Estimate Request — yellow */
.sidebar-premium .menu-item-estimate_request > a > i.menu-icon {
  color: #FDE047 !important;
  background: rgba(253, 224, 71, 0.1) !important;
}

/* Knowledge Base — green */
.sidebar-premium .menu-item-knowledge-base > a > i.menu-icon {
  color: #4ADE80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
}

/* Utilities — slate */
.sidebar-premium .menu-item-utilities > a > i.menu-icon {
  color: var(--sb-text-muted) !important;
  background: rgba(139, 146, 176, 0.1) !important;
}

/* Reports — slate */
.sidebar-premium .menu-item-reports > a > i.menu-icon {
  color: var(--sb-text-muted) !important;
  background: rgba(139, 146, 176, 0.1) !important;
}

/* ── On hover: preserve per-item icon colors, just brighten slightly ── */
.sidebar-premium ul.nav > li:not(.active):hover > a:first-child > i.menu-icon {
  filter: brightness(1.25) !important;
}

/* ══════════════════════
   SETUP / SETTINGS MENU — sidebar item icon
   ══════════════════════ */
.sidebar-premium #setup-menu-item > a > i.menu-icon,
.sidebar-premium ul.nav li > a[href*="settings"] > i.menu-icon {
  color: var(--sb-text-muted) !important;
  background: rgba(139, 146, 176, 0.1) !important;
}

/* "Company" section label */
.sidebar-premium ul.nav > li.setup-section-label {
  padding: 8px 16px 4px !important;
  pointer-events: none !important;
  cursor: default !important;
  margin-bottom: 2px !important;
}
.sidebar-premium ul.nav > li.setup-section-label > span {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #E2E8F0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Divider below Settings item */
.sidebar-premium ul.nav > li:has(> a[href*="/settings"]) {
  border-bottom: 2px solid rgba(255, 255, 255, 0.18) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   SETUP PANEL (#setup-menu-wrapper) — full premium dark theme
   ══════════════════════════════════════════════════════════════════ */

/* Panel shell — hidden, setup items now live in main sidebar */
#setup-menu-wrapper {
  display: none !important;
  background:    var(--sb-bg) !important;
  border-right:  1px solid var(--sb-border) !important;
  box-shadow:    4px 0 24px rgba(0, 0, 0, 0.45) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.08) transparent !important;
}
#setup-menu-wrapper::-webkit-scrollbar       { width: 3px; }
#setup-menu-wrapper::-webkit-scrollbar-track { background: transparent; }
#setup-menu-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Heading "Setup" text */
#setup-menu-wrapper .customizer-heading {
  color:          var(--sb-text) !important;
  font-family:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size:      15px !important;
  font-weight:    700 !important;
  letter-spacing: 0.02em !important;
}

/* Heading row border */
#setup-menu > div:first-child {
  border-bottom: 1px solid var(--sb-border) !important;
  margin-bottom: 6px !important;
}

/* Close (×) button */
#setup-menu-wrapper .close-customizer {
  color:         var(--sb-text-muted) !important;
  border-radius: 7px !important;
  width:         28px !important;
  height:        28px !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  transition:    background var(--sb-t), color var(--sb-t) !important;
  cursor:        pointer !important;
}
#setup-menu-wrapper .close-customizer:hover {
  background: rgba(255,255,255,0.08) !important;
  color:      var(--sb-text) !important;
}

/* Menu list wrapper */
#setup-menu {
  padding: 0 12px 32px !important;
}

/* ── Top-level list items ── */
#setup-menu > li {
  border-left:   none !important;
  margin-bottom: 2px !important;
  position:      relative !important;
}

/* ── Top-level links (direct children only) ── */
#setup-menu > li > a {
  display:         flex !important;
  align-items:     center !important;
  padding:         9px 12px !important;
  color:           var(--sb-text-muted) !important;
  font-size:       13.5px !important;
  font-weight:     500 !important;
  border-radius:   10px !important;
  border:          1px solid transparent !important;
  transition:      background var(--sb-t), color var(--sb-t), border-color var(--sb-t) !important;
  position:        relative !important;
  text-decoration: none !important;
  letter-spacing:  0.01em !important;
  font-family:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Hide empty icon elements — setup items don't define icons */
#setup-menu > li > a > i.menu-icon {
  display: none !important;
}

/* Menu text */
#setup-menu > li > a > .menu-text {
  flex:          1 !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  font-weight:   500 !important;
}

/* Arrow chevron */
#setup-menu > li > a > .fa.arrow {
  font-size:       0 !important;
  color:           transparent !important;
  line-height:     0 !important;
  width:           20px !important;
  height:          20px !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  margin-left:     auto !important;
  flex-shrink:     0 !important;
  border:          none !important;
  background:      none !important;
}
#setup-menu > li > a > .fa.arrow::before {
  content: none !important;
  display: none !important;
}
#setup-menu > li > a > .fa.arrow::after {
  content:       '' !important;
  display:       block !important;
  width:         7px !important;
  height:        7px !important;
  border-right:  2px solid var(--sb-text-muted) !important;
  border-top:    2px solid var(--sb-text-muted) !important;
  border-left:   none !important;
  border-bottom: none !important;
  transform:     rotate(45deg) !important;
  margin-top:    -2px !important;
  transition:    transform var(--sb-t), border-color var(--sb-t) !important;
}
#setup-menu > li > a[aria-expanded="true"] > .fa.arrow::after {
  transform:    rotate(135deg) !important;
  margin-top:   2px !important;
  border-color: var(--sb-teal) !important;
}

/* Hover */
#setup-menu > li > a:hover,
#setup-menu > li > a:focus {
  background: var(--sb-hover) !important;
  color:      var(--sb-text) !important;
}
#setup-menu > li:hover > a > .fa.arrow::after {
  border-color: var(--sb-text-muted) !important;
}

/* Active leaf item */
#setup-menu > li.active:not(:has(> ul.nav-second-level)) > a {
  background:   linear-gradient(90deg, #6B3DC8 0%, #4A70CF 100%) !important;
  color:        #fff !important;
  border-color: rgba(114, 69, 204, 0.35) !important;
  box-shadow:   0 4px 16px rgba(106, 61, 200, 0.35) !important;
}

/* Active parent (has children) */
#setup-menu > li.active:has(> ul.nav-second-level) > a {
  background:   rgba(46, 196, 160, 0.08) !important;
  color:        var(--sb-teal) !important;
  box-shadow:   none !important;
  border-color: transparent !important;
}
#setup-menu > li.active:has(> ul.nav-second-level) > a > .menu-text {
  color: var(--sb-teal) !important;
}
#setup-menu > li.active:has(> ul.nav-second-level) > a > .fa.arrow::after {
  border-color: var(--sb-teal) !important;
}

/* Second-level submenu container */
#setup-menu li > .nav-second-level {
  position:   relative !important;
  padding:    0 !important;
  background: transparent !important;
}

#setup-menu li > .nav-second-level > li:first-child { margin-top: 4px !important; }
#setup-menu li > .nav-second-level > li:last-child  { margin-bottom: 8px !important; }

/* Vertical connector line */
#setup-menu li > .nav-second-level::before {
  content:    '' !important;
  position:   absolute !important;
  left:       23px !important;
  top:        10px !important;
  bottom:     14px !important;
  width:      1px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(46, 196, 160, 0.35) 15%,
    rgba(46, 196, 160, 0.35) 85%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* Submenu links */
#setup-menu .nav-second-level li > a {
  display:      flex !important;
  align-items:  center !important;
  padding:      7px 12px 7px 16px !important;
  color:        var(--sb-text-dim) !important;
  font-size:    13px !important;
  font-weight:  400 !important;
  border-radius: 8px !important;
  background:   transparent !important;
  border:       1px solid transparent !important;
  position:     relative !important;
  transition:   color var(--sb-t), background var(--sb-t) !important;
  font-family:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Dot indicator — removed */
#setup-menu .nav-second-level li > a::before {
  display: none !important;
}

/* Submenu text */
#setup-menu .nav-second-level li > a > .sub-menu-text {
  flex: 1 !important;
}

/* Submenu hover */
#setup-menu .nav-second-level li > a:hover {
  color:      var(--sb-text-muted) !important;
  background: rgba(30, 41, 59, 0.45) !important;
}

/* Submenu active */
#setup-menu .nav-second-level li.active > a {
  color:       var(--sb-text) !important;
  font-weight: 500 !important;
  background:  rgba(46, 196, 160, 0.08) !important;
}

/* ══════════════════════
   PINNED PROJECTS
   ══════════════════════ */
.sidebar-premium #side-menu.nav > li.pinned_project {
  padding: 0 !important;
}

.sidebar-premium #side-menu.nav > li.pinned_project > a {
  font-size: 12px !important;
  color:     var(--sb-text-dim) !important;
}

.sidebar-premium #side-menu.nav > li.pinned_project.active > a,
.sidebar-premium #side-menu.nav > li.pinned_project:hover  > a {
  color: var(--sb-text-muted) !important;
}

/* ══════════════════════
   ACCESSIBILITY
   ══════════════════════ */
.sidebar-premium ul.nav li > a:focus-visible {
  outline:        2px solid rgba(124, 58, 237, 0.65) !important;
  outline-offset: -2px !important;
}

/* ══════════════════════
   MOBILE RESPONSIVE
   ══════════════════════ */
@media (max-width: 768px) {
  /* Sidebar: fixed overlay — forced background so sidebar-body renders correctly */
  .sidebar.sidebar-premium {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 260px !important;
    z-index: 10001 !important;
    background: var(--sb-bg) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* sidebar-body fills its fixed parent */
  .sidebar.sidebar-premium .sidebar-body {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Higher specificity (1-2-1) beats body.page-small #menu (1-1-1) */
  body.page-small.show-sidebar #menu {
    margin-left: 0 !important;
  }

  /* Higher specificity (1-2-1) beats body.page-small.show-sidebar #wrapper 260px rule */
  body.page-small.show-sidebar #wrapper {
    margin-left: 0 !important;
  }

  /* Search bar: narrower on mobile to avoid overlapping icons */
  #top_search {
    width: 44vw !important;
    max-width: 210px !important;
  }

  /* Search input: remove extra right padding since Ctrl+K is hidden */
  #search_input {
    padding-right: 14px !important;
  }

  /* Hide Ctrl+K badge on mobile */
  .ctrl-k-hint {
    display: none !important;
  }
}

/* ── Newsfeed overlay: sits BELOW header so navbar stays visible ── */
#newsfeed {
  z-index: 9999 !important;
  top: 57px !important;
}

/* Close button repositioned below header */
#newsfeed .close_newsfeed {
  top: 12px !important;
  right: 16px !important;
}

@media (max-width: 768px) {
  /* Newsfeed full width on mobile */
  #newsfeed .col-md-6 {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #newsfeed .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 16px;
  }

  /* Textarea full width */
  #newsfeed textarea#post {
    width: 100% !important;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #top_search {
    width: 38vw !important;
    max-width: 160px !important;
  }

  /* Shrink right-side icons slightly on very small screens */
  .navbar-nav.navbar-right {
    gap: 0 !important;
    padding-right: 4px !important;
  }

  .header-user-profile .tw-block.tw-leading-tight {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════
   HEADER — Profile Dropdown (Modern Card Style)
   ══════════════════════════════════════════════════ */

.header-profile-dropdown {
  min-width: 230px !important;
  padding: 6px 0 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
  margin-top: 10px !important;
}

/* User info header block */
.profile-dd-header-item {
  pointer-events: none;
}

.profile-dd-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px 12px;
}

.profile-dd-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
}

.profile-dd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-dd-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dd-role {
  display: block;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
  text-transform: capitalize;
}

/* Menu item links */
.header-profile-dropdown > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: background 0.12s !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.header-profile-dropdown > li > a > i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #9ca3af;
  flex-shrink: 0;
  transition: color 0.12s;
}

.header-profile-dropdown > li > a:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.header-profile-dropdown > li > a:hover > i {
  color: #6366f1 !important;
}

/* Logout — red accent */
.header-profile-dropdown .header-logout > a {
  color: #ef4444 !important;
}

.header-profile-dropdown .header-logout > a > i {
  color: #ef4444 !important;
}

.header-profile-dropdown .header-logout > a:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.header-profile-dropdown .header-logout > a:hover > i {
  color: #dc2626 !important;
}

/* ══════════════════════════════════════════════════
   MOBILE — Hide desktop-only navbar-right items
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .nav.navbar-nav.navbar-right .header-notifications {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE NAVBAR — Collapse Menu Icons
   ══════════════════════════════════════════════════ */

.mobile-navbar .nav.navbar-nav > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 18px !important;
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}

.mobile-navbar .nav.navbar-nav > li > a > i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #9ca3af;
  flex-shrink: 0;
  transition: color 0.12s;
}

.mobile-navbar .nav.navbar-nav > li > a:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.mobile-navbar .nav.navbar-nav > li > a:hover > i {
  color: #6366f1 !important;
}

.mobile-navbar .header-logout > a {
  color: #ef4444 !important;
}

.mobile-navbar .header-logout > a > i {
  color: #ef4444 !important;
}

.mobile-navbar .header-logout > a:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.mobile-navbar .header-logout > a:hover > i {
  color: #dc2626 !important;
}

/* Sales transaction forms: keep action buttons in the page flow, not fixed over the sidebar. */
/* ══════════════════════════════════════════════════
   INVOICE REDESIGN — Modern Professional UI
   ══════════════════════════════════════════════════ */

.invoice-redesign {
  --inv-border: #e5e7eb;
  --inv-border-strong: #d5dbe3;
  --inv-accent: #2563eb;
  --inv-accent-soft: #eff6ff;
  --inv-text: #172033;
  --inv-muted: #64748b;
  --inv-panel: #ffffff;
}

/* ── Page header ── */
.invoice-redesign .invoice-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.invoice-redesign .invoice-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.invoice-redesign .invoice-page-header-icon {
  width: 46px;
  height: 46px;
  background: var(--inv-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
}
.invoice-redesign .invoice-page-title {
  margin: 0;
  color: var(--inv-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.invoice-redesign .invoice-page-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Main card ── */
.invoice-redesign .invoice-card.panel_s {
  background: var(--inv-panel);
  border: 1px solid var(--inv-border) !important;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
  overflow: hidden;
}
.invoice-redesign .invoice-details-body {
  padding: 24px 26px 22px !important;
}
.invoice-redesign .invoice-details-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 22px;
}
.invoice-redesign .invoice-details-primary {
  padding-right: 22px;
}
.invoice-redesign .invoice-details-secondary {
  padding-left: 22px;
  border-left: 1px solid #eef2f7;
}
.invoice-redesign .invoice-details-secondary > div {
  margin-left: 0 !important;
}

/* ── Section labels ── */
.invoice-redesign .invoice-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid var(--inv-accent);
}
.invoice-redesign .invoice-section-icon {
  font-size: 12px;
  color: var(--inv-accent);
}

/* ── Form controls ── */
.invoice-redesign .form-group label,
.invoice-redesign label.control-label {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}
.invoice-redesign .form-group {
  margin-bottom: 16px;
}
.invoice-redesign .form-control,
.invoice-redesign .bootstrap-select > .dropdown-toggle,
.invoice-redesign .tagsinput {
  min-height: 36px;
  border: 1px solid var(--inv-border-strong) !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  color: var(--inv-text) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invoice-redesign .form-control:focus,
.invoice-redesign .bootstrap-select.open > .dropdown-toggle,
.invoice-redesign .bootstrap-select > .dropdown-toggle:focus,
.invoice-redesign .tagsinput:focus-within {
  border-color: var(--inv-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.11) !important;
  background-color: #fff !important;
}
.invoice-redesign textarea.form-control {
  min-height: 76px;
  resize: vertical;
}

/* ── Input-group addons ── */
.invoice-redesign .input-group-addon {
  background: #f8fafc;
  border-color: var(--inv-border-strong);
  color: #475569;
  font-weight: 600;
}
.invoice-redesign .input-group .form-control {
  border-radius: 0 !important;
}
.invoice-redesign .input-group .form-control:first-child {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}
.invoice-redesign .input-group .form-control:last-child {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}
.invoice-redesign .input-group-addon:first-child {
  border-right: 0;
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.invoice-redesign .input-group-addon:last-child {
  border-left: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

/* ── Address section ── */
.invoice-redesign .invoice-details-primary .hr-10 {
  border-color: #eef2f7 !important;
}
.invoice-redesign .edit_shipping_billing_info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 7px;
  color: var(--inv-accent);
  background: var(--inv-accent-soft);
}
.invoice-redesign .invoice-details-primary address {
  color: var(--inv-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.invoice-redesign .invoice-details-primary p.bold {
  color: var(--inv-text);
  font-size: 12px;
  margin-bottom: 8px;
}

/* ── Section separator ── */
.invoice-redesign .invoice-section-separator {
  margin: 0 !important;
  border-color: #eef2f7 !important;
}

/* ── Items body ── */
.invoice-redesign .invoice-items-body {
  padding: 22px 26px 24px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

/* ── Notes body ── */
.invoice-redesign .invoice-notes-body {
  padding: 24px 26px 26px !important;
  background: #fff;
}
.invoice-redesign .invoice-notes-col .form-group > label {
  display: none;
}

/* ── Items table ── */
.invoice-redesign .items-wrapper {
  margin-bottom: 0 !important;
}
.invoice-redesign .input-transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--inv-muted) !important;
  min-height: 28px;
  margin-top: 4px;
}
.invoice-redesign .input-transparent:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
.invoice-redesign .input-group-select .items-select-wrapper {
  display: table-cell;
  width: 100%;
}
.invoice-redesign .input-group-select .items-select-wrapper .bootstrap-select {
  width: 100% !important;
}
.invoice-redesign .input-group-select .items-select-wrapper .bootstrap-select > .dropdown-toggle {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.invoice-redesign .input-group-select .input-group-btn > .btn {
  min-height: 36px;
  border-color: var(--inv-border-strong) !important;
  border-radius: 0 7px 7px 0 !important;
  box-shadow: none !important;
}

/* ── Bottom toolbar ── */
.invoice-redesign .btn-bottom-toolbar .btn {
  min-height: 36px;
  border-radius: 7px !important;
  font-weight: 700;
}
.invoice-redesign .btn-bottom-toolbar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
}
.invoice-redesign .btn-bottom-toolbar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

@media (max-width: 991px) {
  .invoice-redesign .invoice-details-primary,
  .invoice-redesign .invoice-details-secondary {
    padding-left: 15px;
    padding-right: 15px;
  }
  .invoice-redesign .invoice-details-secondary {
    border-left: 0;
  }
}
@media (max-width: 767px) {
  .invoice-redesign .invoice-page-header { flex-direction: column; align-items: flex-start; }
  .invoice-redesign .invoice-details-body,
  .invoice-redesign .invoice-items-body,
  .invoice-redesign .invoice-notes-body { padding: 18px !important; }
}

/* ── Invoice Totals Summary ── */
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 {
  background: linear-gradient(135deg, #eff6ff 0%, #f8faff 100%);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 6px 18px 10px !important;
  margin-top: 18px;
}
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 > .table {
  margin-bottom: 0;
}
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 > .table > tbody > tr > td {
  border-top: 1px solid #dbeafe !important;
  padding: 9px 4px;
  vertical-align: middle;
  color: var(--inv-text);
  font-size: 13px;
}
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 > .table > tbody > tr:first-child > td {
  border-top: none !important;
}
/* Discount & adjustment inputs: compact */
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 .input-group .form-control {
  height: 30px;
  min-height: 30px;
  padding: 3px 8px;
  font-size: 13px;
  border-radius: 6px !important;
}
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 .input-group-addon {
  padding: 3px 8px;
  font-size: 12px;
  height: 30px;
  line-height: 22px;
  border-radius: 6px;
}
/* Total value cell */
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 .table td.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--inv-accent);
  border-top: 2px solid var(--inv-accent) !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Total label cell (sibling before .total) */
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 .table tr:has(td.total) td {
  border-top: 2px solid var(--inv-accent) !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.invoice-redesign .invoice-items-body .col-md-8.col-md-offset-4 .table tr:has(td.total) .bold {
  font-size: 13px;
  font-weight: 700;
  color: var(--inv-text);
}

/* ── Notes Section ── */
.invoice-redesign .invoice-notes-body {
  padding: 24px 26px 28px !important;
}
.invoice-redesign .invoice-notes-col {
  padding-bottom: 4px;
}
.invoice-redesign .invoice-notes-col textarea.form-control {
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--inv-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px;
  color: var(--inv-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invoice-redesign .invoice-notes-col textarea.form-control:focus {
  border-color: var(--inv-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* ══════════════════════════════════════════════════ */

.invoice-form .btn-bottom-pusher,
.estimate-form .btn-bottom-pusher,
.credit-note-form .btn-bottom-pusher {
  display: none !important;
}

.invoice-form .btn-bottom-toolbar,
.estimate-form .btn-bottom-toolbar,
.credit-note-form .btn-bottom-toolbar {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 16px !important;
  padding: 14px 0 0 !important;
  background: transparent !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  z-index: auto !important;
}

.invoice-form .btn-bottom-toolbar .btn-group,
.estimate-form .btn-bottom-toolbar .btn-group {
  display: inline-flex !important;
  gap: 8px;
  vertical-align: middle;
}

.invoice-form .btn-bottom-toolbar .btn-group > .btn,
.estimate-form .btn-bottom-toolbar .btn-group > .btn {
  border-radius: 7px !important;
  margin-left: 0 !important;
}

.invoice-form .btn-bottom-toolbar .btn-group > .btn + .btn,
.estimate-form .btn-bottom-toolbar .btn-group > .btn + .btn {
  margin-left: 8px !important;
}

[dir="rtl"] .invoice-form .btn-bottom-toolbar,
[dir="rtl"] .estimate-form .btn-bottom-toolbar,
[dir="rtl"] .credit-note-form .btn-bottom-toolbar {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[dir="rtl"] .invoice-form .btn-bottom-toolbar .btn-group > .btn + .btn,
[dir="rtl"] .estimate-form .btn-bottom-toolbar .btn-group > .btn + .btn {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

@media (max-width: 500px) {
  .invoice-form .btn-bottom-toolbar,
  .estimate-form .btn-bottom-toolbar,
  .credit-note-form .btn-bottom-toolbar {
    padding-right: 0 !important;
    text-align: right !important;
  }
}

/* ════════════════════════════════════════════════════════════
   CREDIT NOTE REDESIGN
   ════════════════════════════════════════════════════════════ */

.credit-note-redesign {
  --inv-border: #e5e7eb;
  --inv-border-strong: #d5dbe3;
  --inv-accent: #2563eb;
  --inv-accent-soft: #eff6ff;
  --inv-text: #172033;
  --inv-muted: #64748b;
  --inv-panel: #ffffff;
}

/* ── Page header ── */
.credit-note-redesign .credit-note-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.credit-note-redesign .credit-note-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.credit-note-redesign .credit-note-page-header-icon {
  width: 46px;
  height: 46px;
  background: var(--inv-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
}
.credit-note-redesign .credit-note-page-title {
  margin: 0;
  color: var(--inv-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.credit-note-redesign .credit-note-page-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Main card ── */
.credit-note-redesign .credit-note-card.panel_s {
  background: var(--inv-panel);
  border: 1px solid var(--inv-border) !important;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
  overflow: hidden;
}
.credit-note-redesign .credit-note-details-body {
  padding: 24px 26px 22px !important;
}
.credit-note-redesign .credit-note-details-primary {
  padding-right: 22px;
}
.credit-note-redesign .credit-note-details-secondary {
  padding-left: 22px;
  border-left: 1px solid #eef2f7;
}
.credit-note-redesign .credit-note-details-secondary > div {
  margin-left: 0 !important;
}

/* ── Section labels ── */
.credit-note-redesign .credit-note-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid var(--inv-accent);
}
.credit-note-redesign .credit-note-section-icon {
  font-size: 12px;
  color: var(--inv-accent);
}

/* ── Form controls ── */
.credit-note-redesign .form-group label,
.credit-note-redesign label.control-label {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}
.credit-note-redesign .form-group {
  margin-bottom: 16px;
}
.credit-note-redesign .form-control,
.credit-note-redesign .bootstrap-select > .dropdown-toggle,
.credit-note-redesign .tagsinput {
  min-height: 36px;
  border: 1px solid var(--inv-border-strong) !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  color: var(--inv-text) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.credit-note-redesign .form-control:focus,
.credit-note-redesign .bootstrap-select.open > .dropdown-toggle,
.credit-note-redesign .bootstrap-select > .dropdown-toggle:focus,
.credit-note-redesign .tagsinput:focus-within {
  border-color: var(--inv-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.11) !important;
  background-color: #fff !important;
}
.credit-note-redesign textarea.form-control {
  min-height: 76px;
  resize: vertical;
}

/* ── Input-group addons ── */
.credit-note-redesign .input-group-addon {
  background: #f8fafc;
  border-color: var(--inv-border-strong);
  color: #475569;
  font-weight: 600;
}
.credit-note-redesign .input-group .form-control {
  border-radius: 0 !important;
}
.credit-note-redesign .input-group .form-control:first-child {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}
.credit-note-redesign .input-group .form-control:last-child {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}
.credit-note-redesign .input-group-addon:first-child {
  border-right: 0;
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.credit-note-redesign .input-group-addon:last-child {
  border-left: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

/* ── Address section ── */
.credit-note-redesign .credit-note-details-primary .hr-10 {
  border-color: #eef2f7 !important;
}
.credit-note-redesign .edit_shipping_billing_info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 7px;
  color: var(--inv-accent);
  background: var(--inv-accent-soft);
}
.credit-note-redesign .credit-note-details-primary address {
  color: var(--inv-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.credit-note-redesign .credit-note-details-primary p.bold {
  color: var(--inv-text);
  font-size: 12px;
  margin-bottom: 8px;
}

/* ── Section separator ── */
.credit-note-redesign .credit-note-section-separator {
  margin: 0 !important;
  border-color: #eef2f7 !important;
}

/* ── Items body ── */
.credit-note-redesign .credit-note-items-body {
  padding: 22px 26px 24px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

/* ── Items table ── */
.credit-note-redesign .items-wrapper {
  margin-bottom: 0 !important;
}
.credit-note-redesign .input-transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--inv-muted) !important;
  min-height: 28px;
  margin-top: 4px;
}
.credit-note-redesign .input-transparent:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
.credit-note-redesign .input-group-select .items-select-wrapper {
  display: table-cell;
  width: 100%;
}
.credit-note-redesign .input-group-select .items-select-wrapper .bootstrap-select {
  width: 100% !important;
}
.credit-note-redesign .input-group-select .items-select-wrapper .bootstrap-select > .dropdown-toggle {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.credit-note-redesign .input-group-select .input-group-btn > .btn {
  min-height: 36px;
  border-color: var(--inv-border-strong) !important;
  border-radius: 0 7px 7px 0 !important;
  box-shadow: none !important;
}

/* ── Totals summary ── */
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 {
  background: linear-gradient(135deg, #eff6ff 0%, #f8faff 100%);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 6px 18px 10px !important;
  margin-top: 18px;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 > .table {
  margin-bottom: 0;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 > .table > tbody > tr > td {
  border-top: 1px solid #dbeafe !important;
  padding: 9px 4px;
  vertical-align: middle;
  color: var(--inv-text);
  font-size: 13px;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 > .table > tbody > tr:first-child > td {
  border-top: none !important;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 .input-group .form-control {
  height: 30px;
  min-height: 30px;
  padding: 3px 8px;
  font-size: 13px;
  border-radius: 6px !important;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 .input-group-addon {
  padding: 3px 8px;
  font-size: 12px;
  height: 30px;
  line-height: 22px;
  border-radius: 6px;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 .table td.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--inv-accent);
  border-top: 2px solid var(--inv-accent) !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 .table tr:has(td.total) td {
  border-top: 2px solid var(--inv-accent) !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.credit-note-redesign .credit-note-items-body .col-md-8.col-md-offset-4 .table tr:has(td.total) .bold {
  font-size: 13px;
  font-weight: 700;
  color: var(--inv-text);
}

/* ── Notes body ── */
.credit-note-redesign .credit-note-notes-body {
  padding: 24px 26px 28px !important;
  background: #fff;
}
.credit-note-redesign .credit-note-notes-col .form-group > label {
  display: none;
}
.credit-note-redesign .credit-note-notes-col {
  padding-bottom: 4px;
}
.credit-note-redesign .credit-note-notes-col textarea.form-control {
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--inv-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px;
  color: var(--inv-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.credit-note-redesign .credit-note-notes-col textarea.form-control:focus {
  border-color: var(--inv-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* ── Bottom toolbar ── */
.credit-note-redesign .btn-bottom-toolbar .btn {
  min-height: 36px;
  border-radius: 7px !important;
  font-weight: 700;
}
.credit-note-redesign .btn-bottom-toolbar .btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
}
.credit-note-redesign .btn-bottom-toolbar .btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
}

@media (max-width: 991px) {
  .credit-note-redesign .credit-note-details-primary,
  .credit-note-redesign .credit-note-details-secondary {
    padding-left: 15px;
    padding-right: 15px;
  }
  .credit-note-redesign .credit-note-details-secondary {
    border-left: 0;
  }
}
@media (max-width: 767px) {
  .credit-note-redesign .credit-note-page-header { flex-direction: column; align-items: flex-start; }
  .credit-note-redesign .credit-note-details-body,
  .credit-note-redesign .credit-note-items-body,
  .credit-note-redesign .credit-note-notes-body { padding: 18px !important; }
}

/* ── END CREDIT NOTE REDESIGN ── */

/* ── END PREMIUM SIDEBAR REDESIGN ── */

/* ════════════════════════════════════════
   TICKET ADD PAGE REDESIGN
   ════════════════════════════════════════ */

/* ── Page Header ── */
.ticket-add-redesign .tkt-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.ticket-add-redesign .tkt-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-add-redesign .tkt-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ticket-add-redesign .tkt-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #eff6ff;
  border-radius: 8px;
  color: #2563eb;
  font-size: 14px;
  flex-shrink: 0;
}
.ticket-add-redesign .tkt-page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}
.ticket-add-redesign .tkt-page-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: #6b7280;
  padding-left: 42px;
}

.ticket-add-redesign .tkt-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 4px 10px;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.ticket-add-redesign .tkt-contact-badge:hover {
  background: #e5e7eb;
  color: #374151;
}
.ticket-add-redesign .tkt-contact-badge-active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

/* ── Submit button ── */
.ticket-add-redesign .tkt-btn-primary {
  background: var(--btn-p-bg) !important;
  border: 1px solid var(--btn-p-border) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  box-shadow: var(--btn-p-shadow) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
.ticket-add-redesign .tkt-btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}

/* ── Cards ── */
.ticket-add-redesign .tkt-card {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03) !important;
  margin-bottom: 16px !important;
}

.ticket-add-redesign .tkt-card-body {
  padding: 24px 24px 18px !important;
}

/* ── Section Label ── */
.ticket-add-redesign .tkt-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #374151;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f4;
}
.ticket-add-redesign .tkt-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #eff6ff;
  border-radius: 6px;
  color: #2563eb;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Two-column layout ── */
.ticket-add-redesign .tkt-form-row {
  margin: 0 -12px;
}
.ticket-add-redesign .tkt-col {
  padding: 0 12px;
}
.ticket-add-redesign .tkt-col-left {
  border-right: 1px solid #f0f2f4;
}

/* ── Form labels ── */
.ticket-add-redesign .form-group label,
.ticket-add-redesign .form-group label.control-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 5px !important;
}

/* ── Inputs ── */
.ticket-add-redesign .form-group .form-control {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #111827 !important;
  background: #fafbfc !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.ticket-add-redesign .form-group .form-control:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  background: #fff !important;
  outline: none !important;
}

/* ── Bootstrap-select (border/radius/bg only) ── */
.ticket-add-redesign .bootstrap-select > .dropdown-toggle {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.ticket-add-redesign .bootstrap-select.open > .dropdown-toggle,
.ticket-add-redesign .bootstrap-select > .dropdown-toggle:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  background: #fff !important;
}

/* ── Tags input ── */
.ticket-add-redesign .tagsinput {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  min-height: 38px;
}
.ticket-add-redesign .tagsinput:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* ── Service input-group join fix (flexbox) ── */
.ticket-add-redesign .input-group-select .input-group {
  display: flex !important;
  align-items: stretch !important;
}
.ticket-add-redesign .input-group-select .input-group > .bootstrap-select {
  flex: 1 1 auto !important;
  display: block !important;
  float: none !important;
  min-width: 0;
}
.ticket-add-redesign .input-group-select .input-group > .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ticket-add-redesign .input-group-select .input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  float: none !important;
  width: auto !important;
}
.ticket-add-redesign .input-group-select .input-group > .input-group-btn > .btn {
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #d1d5db !important;
  border-left: 0 !important;
  background: #fff !important;
  color: #6b7280 !important;
}

/* ── Custom fields row ── */
.ticket-add-redesign .tkt-custom-fields-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f2f4;
}

/* ── Body card: toolbar (predefined reply + kb) ── */
.ticket-add-redesign .tkt-body-toolbar {
  margin-bottom: 14px;
}

/* ── Toolbar item: icon + select side by side ── */
.ticket-add-redesign .tkt-toolbar-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.ticket-add-redesign .tkt-toolbar-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  width: 38px !important;
  flex-shrink: 0 !important;
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  border-right: 0 !important;
  border-radius: 8px 0 0 8px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}
.ticket-add-redesign .tkt-toolbar-item > .bootstrap-select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: block !important;
  float: none !important;
}
.ticket-add-redesign .tkt-toolbar-item > .bootstrap-select > .dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-left: 0 !important;
  width: 100% !important;
}

/* ── TinyMCE editor wrap ── */
.ticket-add-redesign .tkt-editor-wrap {
  margin-bottom: 0;
}
.ticket-add-redesign .tkt-editor-wrap .mce-panel,
.ticket-add-redesign .tkt-editor-wrap .tox-tinymce {
  border-radius: 8px !important;
  border-color: #d1d5db !important;
}

/* ── Attachments ── */
.ticket-add-redesign .tkt-attachments-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f2f4;
}
.ticket-add-redesign .tkt-attachments-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px !important;
}
.ticket-add-redesign .tkt-attachments-row .input-group .form-control {
  border-radius: 8px 0 0 8px !important;
}
.ticket-add-redesign .tkt-attachments-row .input-group-btn > .btn {
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #d1d5db !important;
  background: #f8fafc !important;
  color: #6b7280 !important;
}

/* ── Bottom action buttons ── */
.ticket-add-redesign .tkt-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}
.ticket-add-redesign .tkt-btn-cancel {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.ticket-add-redesign .tkt-btn-cancel:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .ticket-add-redesign .tkt-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .ticket-add-redesign .tkt-col-left {
    border-right: none;
    border-bottom: 1px solid #f0f2f4;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .ticket-add-redesign .tkt-page-subtitle {
    padding-left: 0;
  }
  .ticket-add-redesign .tkt-bottom-actions {
    flex-direction: column-reverse;
  }
}

/* ════════════════════════════════════════
   LEAD MODAL REDESIGN
   ════════════════════════════════════════ */

/* ── Modal dialog positioning ── */
.lead-modal .modal-dialog {
  margin-top: 60px !important;
  margin-bottom: 30px !important;
}

/* ── Modal shell ── */
.lead-modal .modal-content {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 90px);
}

/* ── Modal header ── */
.lead-modal .modal-header {
  background: #fff;
  border-bottom: 1px solid #f0f2f4 !important;
  padding: 16px 24px 14px !important;
}
.lead-modal .modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.01em;
}
.lead-modal .modal-header .close {
  color: #9ca3af !important;
  opacity: 1 !important;
  font-size: 22px !important;
  margin-top: -4px;
}
.lead-modal .modal-header .close:hover { color: #374151 !important; }

/* ── Modal body ── */
.lead-modal .modal-body {
  padding: 20px 24px 16px !important;
  background: #f9fafb !important;
  overflow-y: auto !important;
  flex: 1 1 auto;
}

/* ── Top section: Status / Source / Assigned ── */
.lead-modal .lead-edit > .col-md-4 .bootstrap-select > .dropdown-toggle,
.lead-modal .lead-edit > .col-md-4 .input-group .bootstrap-select > .dropdown-toggle {
  background: #fff !important;
}

/* ── Form labels ── */
.lead-modal .form-group label,
.lead-modal .form-group label.control-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.01em !important;
}

/* ── All inputs ── */
.lead-modal .form-control {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #111827 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.lead-modal .form-control:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  outline: none !important;
  background: #fff !important;
}
.lead-modal textarea.form-control {
  border-radius: 8px !important;
  resize: vertical !important;
}

/* ── Bootstrap-select (border/bg/radius only) ── */
.lead-modal .bootstrap-select > .dropdown-toggle {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.lead-modal .bootstrap-select.open > .dropdown-toggle,
.lead-modal .bootstrap-select > .dropdown-toggle:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  background: #fff !important;
}

/* ── Tags input ── */
.lead-modal .tagsinput {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  min-height: 36px;
  padding: 4px 8px !important;
}
.lead-modal .tagsinput:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}
/* hide fa-tag icon */
.lead-modal #inputTagsWrapper label .fa {
  display: none;
}

/* ── HR separators ── */
.lead-modal hr {
  border-color: #e5e7eb !important;
  margin: 14px 0 !important;
}

/* ── Input-group: Status + "+" / Source + "+" join fix (flexbox) ── */
.lead-modal .input-group-select .input-group {
  display: flex !important;
  align-items: stretch !important;
}
.lead-modal .input-group-select .input-group > .bootstrap-select {
  flex: 1 1 0 !important;
  display: block !important;
  float: none !important;
  min-width: 0 !important;
}
.lead-modal .input-group-select .input-group > .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.lead-modal .input-group-select .input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  float: none !important;
  width: auto !important;
}
.lead-modal .input-group-select .input-group > .input-group-btn > .btn,
.lead-modal .input-group-select .input-group > .input-group-btn > a.btn {
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #d1d5db !important;
  border-left: 0 !important;
  background: #fff !important;
  color: #6b7280 !important;
}
.lead-modal .input-group-select .input-group > .input-group-btn > .btn:hover {
  background: #f3f4f6 !important;
}

/* ── Lead Value + Website input-group-addon ── */
.lead-modal .input-group .form-control:not(:last-child) {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.lead-modal .input-group-addon {
  border: 1px solid #d1d5db !important;
  border-left: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: #f8fafc !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

/* ── Footer: submit + close buttons ── */
.lead-modal #lead-form-submit {
  background: var(--btn-p-bg) !important;
  border: 1px solid var(--btn-p-border) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 22px !important;
  box-shadow: var(--btn-p-shadow) !important;
}
.lead-modal #lead-form-submit:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}
.lead-modal .lead-edit [data-dismiss="modal"].btn {
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: #f8fafc !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
}
.lead-modal .lead-edit [data-dismiss="modal"].btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* ===== Task Add/Edit Modal Redesign ===== */
#_task_modal .modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

/* Attach Files button */
#_task_modal .task-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #2563eb !important;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb !important;
  background: #fff;
  line-height: 1.4;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
#_task_modal .task-attach-btn:hover {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
#_task_modal .task-attach-btn i {
  font-size: 12px;
}

/* ── Header ── */
#_task_modal .task-modal-header {
  background: #fff;
  border-bottom: 1px solid #f0f2f5 !important;
  padding: 18px 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#_task_modal .task-modal-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
#_task_modal .task-modal-icon-wrap {
  width: 46px;
  height: 46px;
  background: #2563eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}
#_task_modal .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
#_task_modal .task-modal-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 3px 0 0;
  line-height: 1.4;
}
#_task_modal .task-modal-close {
  float: none !important;
  font-size: 20px !important;
  opacity: 0.45;
  color: #374151;
  padding: 0;
  margin: 0;
  line-height: 1;
  order: 2;
  flex-shrink: 0;
}
#_task_modal .task-modal-close:hover { opacity: 0.8; }

/* ── Body ── */
#_task_modal .modal-body {
  background: #fff;
  padding: 18px 24px 10px !important;
}

/* Labels */
#_task_modal .modal-body label.control-label,
#_task_modal .modal-body .form-group > label,
#_task_modal .modal-body p.bold {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 5px !important;
}
#_task_modal .task-label-icon {
  margin-right: 5px;
  color: #2563eb;
  font-size: 12px;
}

/* Form controls (exclude date pickers) */
#_task_modal .modal-body .form-control:not([name="startdate"]):not([name="duedate"]) {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: #fff !important;
  height: 38px !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s;
}
#_task_modal .modal-body .form-control:not([name="startdate"]):not([name="duedate"]):focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.13) !important;
  outline: none !important;
}
#_task_modal .modal-body textarea.form-control {
  height: auto !important;
  min-height: 100px;
}

/* Bootstrap-select dropdowns */
#_task_modal .modal-body .bootstrap-select > .btn {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: #fff !important;
  height: 38px !important;
  box-shadow: none !important;
  padding: 7px 12px !important;
}
#_task_modal .modal-body .bootstrap-select > .btn:focus,
#_task_modal .modal-body .bootstrap-select.open > .btn {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.13) !important;
  outline: none !important;
}

/* Tags input */
#_task_modal .modal-body .bootstrap-tagsinput {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 5px 10px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  width: 100% !important;
}
#_task_modal .modal-body .bootstrap-tagsinput:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.13) !important;
}

/* HR separators */
#_task_modal .modal-body hr {
  border-color: #f0f2f5 !important;
  margin: 12px 0 !important;
}

/* ── Footer ── */
#_task_modal .task-modal-footer {
  background: #fff !important;
  border-top: 1px solid #f0f2f5 !important;
  padding: 14px 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
}
#_task_modal .task-modal-cancel-btn {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  box-shadow: none !important;
}
#_task_modal .task-modal-cancel-btn:hover {
  background: #f9fafb !important;
  border-color: #94a3b8 !important;
}
#_task_modal .task-modal-submit-btn {
  background: var(--btn-p-bg) !important;
  border: 1px solid var(--btn-p-border) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  box-shadow: var(--btn-p-shadow) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
#_task_modal .task-modal-submit-btn:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}
#_task_modal .task-modal-submit-btn i {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════
   TASK VIEW / DETAIL MODAL — Redesign
   ═══════════════════════════════════════════════════════ */

/* ── Header ── */
.task-single-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-bottom: 1px solid #bfdbfe !important;
  padding: 18px 24px 16px !important;
}
.task-single-header .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
  line-height: 1.4 !important;
}
.task-single-header .modal-title .label {
  font-size: 10.5px !important;
  border-radius: 20px !important;
  padding: 2px 9px !important;
  vertical-align: middle !important;
  font-weight: 600 !important;
}
.task-single-header .close {
  color: #1e3a5f !important;
  opacity: 0.45 !important;
  font-size: 22px !important;
  transition: opacity 0.15s;
}
.task-single-header .close:hover { opacity: 0.85 !important; }
.task-single-header p.tw-mb-0 {
  color: #64748b !important;
  font-size: 12.5px !important;
}
.task-single-header .back-to-from-task {
  color: #2563eb !important;
  font-size: 16px !important;
}

/* ── Mark Complete / Unmark buttons ── */
#task-single-mark-complete-btn {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 7px rgba(99,102,241,.30) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
#task-single-mark-complete-btn:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}

/* ── Left column HRs ── */
.task-single-col-left hr {
  border-color: #e2e8f0 !important;
  margin: 12px 0 !important;
}

/* ── Left column section headings (Description, Attachments) ── */
.task-single-col-left h4.th {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  border-left: 3px solid #2563eb !important;
  padding: 5px 0 5px 10px !important;
  background: #f8fafc !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 10px !important;
  margin-top: 4px !important;
}
/* Checklist heading */
.task-single-col-left h4.chk-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
}
/* Comments heading */
#taskCommentSlide h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  border-left: 3px solid #2563eb !important;
  padding: 5px 0 5px 10px !important;
  background: #f8fafc !important;
  border-radius: 0 6px 6px 0 !important;
}
/* Comment textarea */
#task_comment {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
#task_comment:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}
/* Comment submit button */
#addTaskCommentBtn {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--btn-p-shadow) !important;
}
#addTaskCommentBtn:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border-h) !important;
  box-shadow: var(--btn-p-shadow-h) !important;
}

/* ── Checklist progress bar ── */
.task-single-col-left .progress {
  height: 6px !important;
  border-radius: 10px !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
  margin-bottom: 8px !important;
}
.task-single-col-left .progress-bar-default {
  background: #2563eb !important;
  border-radius: 10px !important;
}

/* ── Right column — Task Info heading ── */
h4.task-info-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}
/* SVG icons in Reminders/Assignees/Followers headings */
h4.task-info-heading svg {
  color: #64748b !important;
  flex-shrink: 0;
}

/* ── Task Info icon box (fa icon in h4) ── */
h4.task-info-heading .task-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  font-size: 11.5px !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
}

/* ── Task info rows ── */
.task-info {
  padding: 7px 2px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.task-info h5 {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
.task-info h5 .tw-text-neutral-800 {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* ── Icon boxes in task info rows ── */
.task-info .task-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin-right: 4px !important;
  margin-top: 0 !important;
  vertical-align: middle !important;
}

/* Per-type icon colors */
.task-info-status      .task-info-icon { background: #eff6ff !important; color: #2563eb !important; }
.task-info-finished    .task-info-icon { background: #f0fdf4 !important; color: #16a34a !important; }
.task-info-start-date  .task-info-icon { background: #f0fdf4 !important; color: #16a34a !important; }
.task-info-due-date    .task-info-icon { background: #fff7ed !important; color: #ea580c !important; }
.task-info-priority    .task-info-icon { background: #fef2f2 !important; color: #dc2626 !important; }
.task-info-hourly-rate .task-info-icon { background: #f0fdfa !important; color: #0d9488 !important; }
.task-info-billable    .task-info-icon { background: #faf5ff !important; color: #7c3aed !important; }
.task-info-billable-amount .task-info-icon { background: #faf5ff !important; color: #7c3aed !important; }
.task-info-user-logged-time  .task-info-icon { background: #ecfeff !important; color: #0891b2 !important; }
.task-info-total-logged-time .task-info-icon { background: #f0f9ff !important; color: #0284c7 !important; }
.task-info-custom-field      .task-info-icon { background: #f8fafc !important; color: #64748b !important; }

/* ── HRs in right column ── */
hr.task-info-separator {
  border-color: #e2e8f0 !important;
  margin: 10px 0 !important;
}

/* ── Task meta info (created-by, related) ── */
.task-info-created {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}
.task-single-related-wrapper {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  margin-top: 3px !important;
}
.task-single-related-wrapper a {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════
   BATCH PAYMENT MODAL — Redesign
   ══════════════════════════════════════════════════ */

/* Header */
#batch-payment-modal .bp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
/* Kill Bootstrap clearfix phantom flex items */
#batch-payment-modal .bp-modal-header::before,
#batch-payment-modal .bp-modal-header::after {
  display: none !important;
  content: none !important;
}
#batch-payment-modal .bp-modal-header .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}
#batch-payment-modal .bp-modal-close {
  float: none !important;
  opacity: 0.5;
  font-size: 20px;
  line-height: 1;
  margin: 0;
  flex-shrink: 0;
}
#batch-payment-modal .bp-modal-close:hover {
  opacity: 1;
}

/* Body */
#batch-payment-modal .bp-modal-body {
  padding: 20px;
  background: #f9fafb;
}

/* Customer filter row */
#batch-payment-modal .bp-filter-row {
  margin-bottom: 14px;
  max-width: 400px;
}
#batch-payment-modal .bp-filter-row .bootstrap-select > .dropdown-toggle {
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
}

/* Apply To All bar */
#batch-payment-modal .bp-apply-all-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}
#batch-payment-modal .bp-apply-all-bar::before,
#batch-payment-modal .bp-apply-all-bar::after {
  display: none !important;
  content: none !important;
}
#batch-payment-modal .bp-apply-all-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
}
#batch-payment-modal .bp-apply-all-controls {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: center;
}
#batch-payment-modal .bp-apply-all-controls::before,
#batch-payment-modal .bp-apply-all-controls::after {
  display: none !important;
  content: none !important;
}
#batch-payment-modal .bp-apply-all-date {
  flex: 0 0 260px;
  max-width: 260px;
}
#batch-payment-modal .bp-apply-all-mode {
  flex: 0 0 300px;
  max-width: 300px;
}
#batch-payment-modal .bp-universal-date-wrap {
  margin-bottom: 0;
}
#batch-payment-modal .bp-universal-date-input {
  border-radius: 6px 0 0 6px;
  font-size: 13px;
  height: 34px;
  background: #fff;
  border: 1px solid #d1d5db;
}
#batch-payment-modal .bp-universal-date-wrap .input-group-addon {
  border-radius: 0 6px 6px 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-left: none;
  padding: 0 10px;
  line-height: 32px;
  color: #6b7280;
}
#batch-payment-modal .bp-apply-all-mode .bootstrap-select > .dropdown-toggle {
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  height: 34px;
  font-size: 13px;
}

/* Table */
#batch-payment-modal .bp-table {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 13px;
}
#batch-payment-modal .bp-table thead tr th {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  font-size: 12px;
  color: #374151;
  padding: 10px 12px;
  white-space: nowrap;
}
#batch-payment-modal .bp-table tbody tr td {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: #e5e7eb;
}
#batch-payment-modal .bp-table tbody tr:hover {
  background: #f9fafb;
}

/* Checkbox column */
#batch-payment-modal .bp-check-col {
  width: 36px;
  text-align: center;
  padding: 10px 8px !important;
}
#batch-payment-modal .bp-check-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}

/* Amount cell */
#batch-payment-modal .bp-amount-cell .form-group {
  margin-bottom: 2px;
}
#batch-payment-modal .bp-apply-full {
  display: block;
  margin-top: 2px;
  color: #6b7280;
  font-size: 11px;
  text-decoration: none;
}
#batch-payment-modal .bp-apply-full:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Remaining balance column */
#batch-payment-modal .bp-balance-col {
  white-space: nowrap;
  font-weight: 500;
  color: #111827;
}

/* Send email checkbox */
#batch-payment-modal .bp-send-email-wrap {
  margin-top: 0;
}
#batch-payment-modal .bp-send-email-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  cursor: pointer;
  margin: 0;
}
#batch-payment-modal .bp-send-email-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

/* Footer */
#batch-payment-modal .bp-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
}
#batch-payment-modal .bp-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
}
/* Kill Bootstrap clearfix phantom flex items */
#batch-payment-modal .bp-modal-footer::before,
#batch-payment-modal .bp-modal-footer::after {
  display: none !important;
  content: none !important;
}
#batch-payment-modal .bp-footer-total {
  font-size: 13px;
  color: #374151;
}
#batch-payment-modal .bp-footer-total strong {
  color: #111827;
  font-weight: 600;
}
#batch-payment-modal .bp-footer-total #bp-selected-info {
  color: #6b7280;
  margin-left: 4px;
}
#batch-payment-modal .bp-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#batch-payment-modal .bp-footer-actions .btn-default {
  border-radius: 5px;
  font-size: 13px;
}
#batch-payment-modal .bp-footer-actions .btn-primary {
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
}

/* Disabled row dimming */
#batch-payment-modal .bp-row.bp-row-disabled {
  opacity: 0.45;
}

/* ══════════════════════════════════════════════════
   SALES ITEM MODAL — Full Redesign
   ══════════════════════════════════════════════════ */

/* Dialog */
@media (min-width: 768px) {
  #sales_item_modal .sim-modal-dialog {
    width: 580px;
    margin: 48px auto;
  }
}

/* Content card */
#sales_item_modal .sim-modal-content {
  border: none !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(17, 24, 39, 0.18),
    0 6px 24px rgba(17, 24, 39, 0.10) !important;
}

/* ── Header ── */
#sales_item_modal .sim-modal-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 24px 18px 24px;
  position: relative;
}

/* Close button */
#sales_item_modal .sim-modal-close {
  float: none !important;
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: #9ca3af !important;
  opacity: 1 !important;
  text-shadow: none !important;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
#sales_item_modal .sim-modal-close:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

/* Header inner layout */
#sales_item_modal .sim-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 40px;
}

/* Icon */
#sales_item_modal .sim-header-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sales_item_modal .sim-header-icon i {
  font-size: 22px;
  color: #4f46e5;
}

/* Title */
#sales_item_modal .sim-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827 !important;
  margin: 0 0 2px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Subtitle */
#sales_item_modal .sim-modal-sub {
  font-size: 12.5px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}
#sales_item_modal .sim-modal-sub .add-title,
#sales_item_modal .sim-modal-sub .edit-title {
  display: inline;
}

/* ── Body ── */
#sales_item_modal .sim-modal-body {
  background: #fff;
  padding: 24px 24px 6px 24px;
}

/* Warning alert */
#sales_item_modal .sim-affect-warning {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  color: #92400e;
  font-size: 13px;
  padding: 11px 14px;
  margin-bottom: 20px;
}
#sales_item_modal .sim-affect-warning i {
  margin-top: 1px;
  color: #f59e0b;
  flex-shrink: 0;
}
#sales_item_modal .sim-affect-warning.hide {
  display: none !important;
}

/* Field spacing */
#sales_item_modal .sim-field-wrap {
  margin-bottom: 4px;
}

/* Labels */
#sales_item_modal .sim-modal-body .form-group label.control-label,
#sales_item_modal .sim-modal-body label.control-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280 !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Text inputs & textarea */
#sales_item_modal .sim-modal-body .form-control {
  border-radius: 9px !important;
  border: 1.5px solid #e5e7eb !important;
  padding: 10px 13px !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #fafafa !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
  height: auto !important;
}
#sales_item_modal .sim-modal-body .form-control:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
  background: #fff !important;
  outline: none !important;
}
#sales_item_modal .sim-modal-body textarea.form-control {
  resize: vertical;
  min-height: 82px;
}

/* Rate field with symbol prefix */
#sales_item_modal .sim-rate-wrap {
  position: relative;
}
#sales_item_modal .sim-rate-symbol {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}
#sales_item_modal .sim-rate-input {
  padding-left: 28px !important;
}

/* Tax two-column layout */
#sales_item_modal .sim-tax-row {
  display: flex;
  gap: 16px;
}
#sales_item_modal .sim-tax-col {
  flex: 1;
  min-width: 0;
}

/* Bootstrap-select buttons — only border/radius/shadow/background, NO padding or color */
#sales_item_modal .bootstrap-select > .dropdown-toggle {
  border-radius: 9px !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  background: #fafafa !important;
}
#sales_item_modal .bootstrap-select.open > .dropdown-toggle,
#sales_item_modal .bootstrap-select > .dropdown-toggle:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
  background: #fff !important;
  outline: none !important;
}

/* ── Divider between sections ── */
#sales_item_modal .sim-modal-body .form-group {
  margin-bottom: 16px;
}

/* ── Footer ── */
#sales_item_modal .sim-modal-footer {
  background: #f8faff;
  border-top: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Cancel button */
#sales_item_modal .sim-btn-cancel {
  border-radius: 9px !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: background 0.15s, border-color 0.15s;
}
#sales_item_modal .sim-btn-cancel:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* Save button */
#sales_item_modal .sim-btn-save {
  border-radius: 9px !important;
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 22px !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35) !important;
  transition: box-shadow 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#sales_item_modal .sim-btn-save:hover {
  background: var(--btn-p-bg-h) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.45) !important;
}
#sales_item_modal .sim-btn-save i {
  font-size: 11px;
}

/* lm-sections sit at 9px from modal-content — within overflow:hidden, no extra margin needed */

/* ── Status/Source "+" join fix inside lm-grid-3 ── */
.lead-modal .lm-section .form-group-select-input-group .input-group,
.lead-modal .lm-section .input-group-select .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.lead-modal .lm-section .input-group-select .input-group > .bootstrap-select {
  flex: 1 1 0 !important;
  display: block !important;
  float: none !important;
  min-width: 0 !important;
  width: 0 !important;
}
.lead-modal .lm-section .input-group-select .input-group > .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.lead-modal .lm-section .input-group-select .input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  float: none !important;
  width: auto !important;
}
.lead-modal .lm-section .input-group-select .input-group > .input-group-btn > .btn,
.lead-modal .lm-section .input-group-select .input-group > .input-group-btn > a.btn {
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #d1d5db !important;
  border-left: 0 !important;
  background: #fff !important;
  color: #6b7280 !important;
  padding: 6px 10px !important;
  white-space: nowrap;
}
.lead-modal .lm-section .input-group-select .input-group > .input-group-btn > .btn:hover,
.lead-modal .lm-section .input-group-select .input-group > .input-group-btn > a.btn:hover {
  background: #f3f4f6 !important;
}
/* Ensure selectpicker fills its lm-grid-3 cell */
.lead-modal .lm-section .lm-grid-3 > .input-group-select,
.lead-modal .lm-section .lm-grid-3 > .form-group { min-width: 0; }
.lead-modal .lm-section .lm-grid-3 .bootstrap-select { width: 100% !important; }

/* ══════════════════════════════════════════════════════════
   LEADS MODAL — lm-* Component Styles
══════════════════════════════════════════════════════════ */

/* Modal header */
.lm-modal-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 24px 16px;
  position: relative;
}
.lm-modal-close {
  position: absolute;
  right: 16px;
  top: 14px;
  opacity: 0.45;
  font-size: 22px;
  line-height: 1;
  z-index: 10;
  float: none;
}
.lm-modal-close:hover { opacity: 0.85; }
.lm-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 36px;
}
.lm-header-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.lm-header-text { flex: 1; min-width: 0; }
.lm-header-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 3px;
  line-height: 1.3;
}
.lm-header-subtitle {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
.lm-print-btn {
  margin-left: auto;
  color: #6b7280 !important;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  text-decoration: none !important;
}
.lm-print-btn:hover { color: #374151 !important; }

/* Sections */
.lead-wrapper .lm-section {
  padding: 18px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.lead-wrapper .lm-section:last-of-type { border-bottom: none; }
.lm-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lm-section-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.lm-section-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}

/* Grid layouts */
.lm-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.lm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .lm-grid-3, .lm-grid-2 { grid-template-columns: 1fr; }
}

/* Icon-prefixed inputs */
.lm-field-wrap { position: relative; }
.lm-field-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 4;
  font-size: 12px;
}
/* Per-field icon colors */
.fa-user.lm-field-icon     { color: #3b82f6; }
.fa-envelope.lm-field-icon { color: #6366f1; }
.fa-phone.lm-field-icon    { color: #10b981; }
.fa-briefcase.lm-field-icon{ color: #f59e0b; }
.fa-globe.lm-field-icon    { color: #06b6d4; }
.fa-building.lm-field-icon { color: #8b5cf6; }
.fa-city.lm-field-icon     { color: #0ea5e9; }
.fa-map.lm-field-icon      { color: #14b8a6; }
.fa-location-pin.lm-field-icon { color: #ef4444; }
.lm-field-wrap > .form-control { padding-left: 32px !important; }
.lm-field-wrap .input-group .form-control { padding-left: 32px !important; }

/* Checkboxes row */
.lm-checkboxes-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Footer */
.lm-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: #f8faff;
  border-top: 1px solid #e8ecf4;
}
.lm-btn-cancel {
  height: 36px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #374151;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.lm-btn-cancel:hover { background: #f3f4f6; }
.lm-btn-save {
  height: 36px;
  padding: 0 22px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  border-radius: 8px;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.15s;
  text-decoration: none !important;
}
.lm-btn-save:hover { opacity: 0.88; }

/* ══════════════════════════════════════════════════
   DASHBOARD — Page Header
   ══════════════════════════════════════════════════ */

.dash-page-header {
  display: flex;
  align-items: center;
  /* Pull up to align with the absolutely-positioned Dashboard Options button
     (.content has 25px padding-top; button sits at top:8px from wrapper) */
  margin-top: -18px;
  padding: 0 0 14px;
}

.dash-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(59,130,246,0.12);
}

.dash-header-icon i {
  font-size: 20px;
  color: #3b82f6;
}

.dash-header-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  line-height: 1.25;
}

.dash-header-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 3px 0 0 !important;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════
   FINANCE OVERVIEW — Stacked Breakdown Bar
   ══════════════════════════════════════════════════ */

/* Section header */
.fov-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.fov-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fov-section-icon svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.fov-icon-invoice  { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); }
.fov-icon-estimate { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.fov-icon-proposal { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }

.fov-section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

/* Stacked bar */
.fov-stacked-bar {
    display: flex;
    height: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 12px;
}

.fov-stacked-seg {
    height: 100%;
    transition: opacity 0.15s;
    cursor: pointer;
}

.fov-stacked-seg:hover {
    opacity: 0.75;
}

/* Status rows */
.fov-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #f9fafb !important;
    margin: 0 !important;
}

.fov-row:last-of-type {
    border-bottom: none !important;
}

.fov-row-zero {
    opacity: 0.38;
}

.fov-row-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fov-row-label {
    flex: 1;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    line-height: 1.2;
}

.fov-row-label:hover {
    color: #111827 !important;
    text-decoration: none !important;
}

.fov-row-count {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    min-width: 20px;
    text-align: right;
}

.fov-row-pct {
    font-size: 11.5px;
    color: #9ca3af;
    font-weight: 500;
    min-width: 48px;
    text-align: right;
}

/* ══════════════════════════════════════════════════
   DASHBOARD OPTIONS — Button & Panel
   ══════════════════════════════════════════════════ */

/* Trigger button */
.screen-options-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  top: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.screen-options-btn:hover {
  background: #f9fafb !important;
  border-color: #c7d2e0 !important;
  color: #111827 !important;
}

.screen-options-btn svg {
  color: #6b7280 !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0;
}

.screen-options-caret {
  font-size: 10px !important;
  color: #9ca3af !important;
  margin-left: 2px !important;
}

/* Floating panel */
.screen-options-area {
  width: 370px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.13), 0 2px 10px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}

/* Inner wrapper */
#dashboard-options {
  padding: 18px 18px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
}

/* Header — 2 rows:
   Row 1: title (full width)
   Row 2: [View Widgetable Area]  ...  [Reset Dashboard] */
#dashboard-options > div:first-child {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}

/* Title — own full row */
#dashboard-options > div:first-child h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  flex: 1 1 100%;
  order: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#dashboard-options > div:first-child h4 i {
  color: #9ca3af;
  font-size: 13px;
  flex-shrink: 0;
}

/* "View Widgetable Area" — row 2, left */
#viewWidgetableArea {
  order: 1 !important;
  flex-shrink: 0;
}

/* "Reset Dashboard" — row 2, right */
#dashboard-options > div:first-child > a:not(#viewWidgetableArea) {
  order: 2 !important;
  flex-shrink: 0;
  margin-left: auto;
}

/* Both buttons — same pill style */
#dashboard-options > div:first-child > a {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6366f1 !important;
  background: #ede9fe !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.12s !important;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

#dashboard-options > div:first-child > a:hover {
  background: #ddd6fe !important;
  text-decoration: none !important;
}

/* Checkbox items — 2-column grid cells */
#dashboard-options .checkbox {
  margin: 0 !important;
  padding: 7px 8px 7px 12px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f9fafb !important;
}

#dashboard-options .checkbox:nth-last-child(-n+2) {
  border-bottom: none !important;
}

#dashboard-options .checkbox input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #6366f1;
  border-radius: 4px;
}

#dashboard-options .checkbox label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  line-height: 1.3;
  user-select: none;
}

/* ══════════════════════════════════════════
   TODO PAGE  (/admin/todo)
══════════════════════════════════════════ */

/* ── Page Header ── */
.tdp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tdp-title {
  margin: 0 0 4px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2;
}
.tdp-subtitle {
  margin: 0 !important;
  font-size: 13px;
  color: #94a3b8;
}
.tdp-new-btn {
  flex-shrink: 0;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.tdp-new-icon {
  font-size: 13px;
}

/* ── Stats Row ── */
.tdp-stats-row {
  margin-bottom: 20px !important;
}
.tdp-stat-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tdp-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tdp-stat-icon--amber  { background: #fff7ed; color: #f59e0b; }
.tdp-stat-icon--blue   { background: #eff6ff; color: #3b82f6; }
.tdp-stat-icon--purple { background: #f5f3ff; color: #8b5cf6; }
.tdp-stat-icon--green  { background: #f0fdf4; color: #22c55e; }
.tdp-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tdp-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 4px;
}
.tdp-stat-count {
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  margin-bottom: 3px;
}
.tdp-stat-sub {
  font-size: 11.5px;
  color: #94a3b8;
}

/* ── Todo Card ── */
.todo-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
  margin-bottom: 20px;
}
.todo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
}
.todo-card-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.todo-card-head--amber { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.todo-card-head--blue  { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.todo-card-head-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.todo-card-head-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}
.todo-card-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.20);
  border-radius: 20px;
  padding: 3px 10px;
  flex-shrink: 0;
}

/* ── Todo List UL ── */
.todo-list-ul {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 60px;
}

/* ── Empty State ── */
.todo-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px 28px !important;
  text-align: center;
  gap: 0;
}
.todo-empty.hide {
  display: none !important;
}
.todo-empty-illus {
  width: 80px;
  height: 88px;
  margin-bottom: 14px;
}
.todo-empty-illus svg {
  width: 100%;
  height: 100%;
}
.todo-empty-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 5px;
}
.todo-empty-sub {
  display: block;
  font-size: 12.5px;
  color: #94a3b8;
}

/* ── Todo Item (tdi) ── */
.tdi {
  display: flex !important;
  align-items: center;
  padding: 11px 16px !important;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
  background: #fff;
  transition: background 0.15s;
  list-style: none !important;
}
.tdi:hover { background: #f8fafc; }
.todo-list-ul .tdi:last-child { border-bottom: none; }

.tdi-drag {
  color: #d1d5db;
  cursor: grab;
  font-size: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.tdi-drag:active { cursor: grabbing; }
.tdi:hover .tdi-drag { color: #9ca3af; }

.tdi .tdi-check,
.tdi .todo-checkbox {
  margin: 0 !important;
  flex-shrink: 0;
}

.tdi-body {
  flex: 1;
  min-width: 0;
}
.tdi .todo-description {
  font-size: 13.5px !important;
  color: #334155 !important;
  padding: 0 !important;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
  position: static !important;
}
.tdi .todo-description.line-throught {
  color: #94a3b8 !important;
  text-decoration: line-through;
}
.tdi .tdi-date,
.tdi .todo-date {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 0 0 !important;
}

.tdi-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s;
  flex-shrink: 0;
}
.tdi:hover .tdi-actions {
  opacity: 1;
  visibility: visible;
}
.tdi-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.tdi-edit { color: #6b7280; background: #f1f5f9; }
.tdi-edit:hover { background: #e0e7ff !important; color: #2563eb !important; }
.tdi-del  { color: #6b7280; background: #f1f5f9; }
.tdi-del:hover  { background: #fee2e2 !important; color: #ef4444 !important; }

/* ── Card Footer / Load More ── */
.todo-card-footer {
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: center;
}
.todo-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  padding: 7px 20px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.todo-loadmore:hover { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.todo-loadmore.disabled {
  color: #cbd5e1 !important;
  border-color: #f1f5f9 !important;
  background: #f8fafc !important;
  pointer-events: none;
}

/* ── Motivational Banner ── */
.tdp-banner {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.tdp-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}
.tdp-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 18px;
  flex-shrink: 0;
}
.tdp-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tdp-banner-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
}
.tdp-banner-line {
  font-size: 12.5px;
  color: #64748b;
  display: block;
}
.tdp-banner-deco {
  position: relative;
  width: 130px;
  height: 60px;
  flex-shrink: 0;
}
.tdp-deco-dot {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #bfdbfe;
  background: transparent;
  display: block;
}
.tdp-deco-dot--sm { width: 10px; height: 10px; }
.tdp-deco-dot--md { width: 16px; height: 16px; }
.tdp-deco-target {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #bfdbfe;
}

/* ══════════════════════════════════════════════════
   LEAD MODAL — Modern Tab Bar & Profile View
   ══════════════════════════════════════════════════ */

/* ── Tab bar pill style ── */
.lead-modal .nav-tabs-segmented {
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 4px !important;
  margin-bottom: 4px !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 2px;
}

.lead-modal .nav-tabs-segmented > li {
  float: none !important;
  margin: 0 !important;
}

.lead-modal .nav-tabs-segmented > li > a {
  border: none !important;
  border-radius: 7px !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s !important;
  line-height: 1.4 !important;
}

.lead-modal .nav-tabs-segmented > li > a:hover {
  background: rgba(255,255,255,0.75) !important;
  color: #374151 !important;
  text-decoration: none !important;
}

.lead-modal .nav-tabs-segmented > li.active > a,
.lead-modal .nav-tabs-segmented > li.active > a:focus,
.lead-modal .nav-tabs-segmented > li.active > a:hover {
  background: #fff !important;
  color: #6366f1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

.lead-modal .nav-tabs-segmented > li > a .menu-icon {
  font-size: 13px !important;
  color: #9ca3af !important;
  transition: color 0.15s;
  flex-shrink: 0;
}

.lead-modal .nav-tabs-segmented > li.active > a .menu-icon {
  color: #6366f1 !important;
}

.lead-modal .nav-tabs-segmented > li > a .badge {
  background: #e0e7ff !important;
  color: #4338ca !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
  box-shadow: none !important;
}

.lead-modal .nav-tabs-segmented > li.active > a .badge {
  background: #6366f1 !important;
  color: #fff !important;
}

/* ── Profile view — information columns as cards ── */
.lead-modal .lead-information-col {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f4;
  margin-bottom: 12px;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

.lead-modal .lead-info-heading {
  margin-bottom: 12px;
}

.lead-modal .lead-info-heading h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  display: block !important;
}

.lead-modal .lead-field-heading {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-top: 12px !important;
  margin-bottom: 3px !important;
  display: block !important;
}

.lead-modal .lead-field-heading.no-mtop {
  margin-top: 4px !important;
}

.lead-modal dl {
  margin-bottom: 0 !important;
}

.lead-modal dl dd {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  margin-bottom: 0 !important;
  line-height: 1.45 !important;
  word-break: break-word;
}

.lead-modal dl dd a {
  color: #2563eb !important;
  text-decoration: none !important;
}

.lead-modal dl dd a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* ── Latest Activity section ── */
.lead-modal .lead-latest-activity {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f4;
  padding: 14px 15px 10px !important;
  margin-top: 4px !important;
}

/* ── Action buttons (Convert to customer, Edit, More) ── */
.lead-modal .lead-top-btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.lead-modal .lead-convert-to-customer.btn-primary {
  background: var(--btn-p-bg) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: var(--btn-p-shadow) !important;
}

.lead-modal .lead-convert-to-customer.btn-primary:hover {
  background: var(--btn-p-bg-h) !important;
  border-color: var(--btn-p-border) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
}

/* ── Description Card ── */
.lead-modal .lead-desc-col {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f4;
  padding: 14px 15px 14px !important;
  margin-bottom: 12px;
}

.lead-modal .lead-desc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.lead-modal .lead-desc-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.lead-modal .lead-desc-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.lead-modal .lead-desc-body {
  font-size: 13.5px;
  font-weight: 400;
  color: #374151;
  line-height: 1.6;
}

/* ── Latest Activity Card ── */
.lead-modal .lead-latest-activity {
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid #f0f2f4 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  overflow: hidden;
}

.lead-modal .lead-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.lead-modal .lead-activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f5f3ff;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.lead-modal .lead-activity-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.lead-modal .lead-activity-feed-wrap {
  padding: 4px 0 !important;
}

/* Feed items inside latest activity */
.lead-modal .lead-activity-feed-wrap .feed-item,
.lead-modal .lead-activity-feed-wrap > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #f9fafb;
  font-size: 13px;
  color: #374151;
  line-height: 1.45;
}

.lead-modal .lead-activity-feed-wrap .feed-item:last-child,
.lead-modal .lead-activity-feed-wrap > div:last-child {
  border-bottom: none;
}

.lead-modal .lead-activity-feed-wrap img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 !important;
  border: 2px solid #e5e7eb;
}

.lead-modal .lead-activity-feed-wrap .date {
  font-size: 11.5px;
  color: #9ca3af;
  white-space: nowrap;
  margin-left: auto;
  padding-top: 2px;
  flex-shrink: 0;
}

.lead-modal .lead-activity-feed-wrap .text {
  flex: 1;
  font-size: 13px;
  color: #374151;
}

/* ══════════════════════════════════════════════════
   CONVERT TO CUSTOMER MODAL — ctc-*
   ══════════════════════════════════════════════════ */

.ctc-modal-dialog { margin-top: 50px !important; margin-bottom: 30px !important; }

.ctc-modal-content {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}

.ctc-modal-header {
  background: #fff;
  border-bottom: 1px solid #f0f2f4 !important;
  padding: 18px 24px 16px !important;
  position: relative;
}

.ctc-modal-close { position: absolute; right: 16px; top: 14px; opacity: 0.4; font-size: 22px; line-height: 1; z-index: 10; float: none; }
.ctc-modal-close:hover { opacity: 0.8; }

.ctc-header-content { display: flex; align-items: center; gap: 14px; padding-right: 36px; }

.ctc-header-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}

.ctc-header-text { flex: 1; min-width: 0; }

.ctc-header-title { font-size: 16px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 0 3px !important; line-height: 1.3 !important; }
.ctc-header-subtitle { font-size: 12.5px; color: #6b7280; margin: 0; line-height: 1.4; }

#convert_lead_to_client_modal .modal-body {
  padding: 0 !important;
  background: #f9fafb !important;
  overflow-y: auto !important;
  flex: 1 1 auto;
}

.ctc-section { padding: 18px 24px; background: #fff; border-bottom: 1px solid #f3f4f6; }

.ctc-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.ctc-section-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

.ctc-section-title { font-size: 13.5px; font-weight: 700; color: #374151; }

.ctc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ctc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ctc-grid-2 > .form-group, .ctc-grid-3 > .form-group { margin-bottom: 0 !important; }
.ctc-section > .form-group { margin-bottom: 14px !important; }
.ctc-section > .form-group:last-child { margin-bottom: 0 !important; }

@media (max-width: 768px) { .ctc-grid-2, .ctc-grid-3 { grid-template-columns: 1fr; } }

#convert_lead_to_client_modal .form-control {
  border: 1px solid #d1d5db !important; border-radius: 8px !important; font-size: 13px !important;
  color: #111827 !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important; height: 38px !important;
}

#convert_lead_to_client_modal .form-control:focus {
  border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; outline: none !important;
}

#convert_lead_to_client_modal textarea.form-control {
  height: auto !important; min-height: 72px !important; resize: vertical !important; border-radius: 8px !important;
}

#convert_lead_to_client_modal .form-group label,
#convert_lead_to_client_modal .form-group label.control-label,
#convert_lead_to_client_modal .ctc-label {
  font-size: 12px !important; font-weight: 600 !important; color: #4b5563 !important; margin-bottom: 5px !important; display: block !important;
}

#convert_lead_to_client_modal .bootstrap-select > .dropdown-toggle {
  border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important; height: 38px !important;
}

#convert_lead_to_client_modal .bootstrap-select.open > .dropdown-toggle,
#convert_lead_to_client_modal .bootstrap-select > .dropdown-toggle:focus {
  border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

.ctc-password-group .form-control { border-right: none !important; border-radius: 8px 0 0 8px !important; }
.ctc-password-group .input-group-addon { background: #fff !important; border: 1px solid #d1d5db !important; border-left: none !important; color: #6b7280 !important; }
.ctc-password-group .input-group-addon:last-child { border-radius: 0 8px 8px 0 !important; }

.ctc-checkboxes { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.ctc-checkbox { margin: 0 !important; padding: 9px 14px !important; background: #f9fafb !important; border-radius: 8px !important; border: 1px solid #f3f4f6 !important; }
.ctc-checkbox label { font-size: 13px !important; font-weight: 500 !important; color: #374151 !important; }

.ctc-modal-footer {
  background: #fff !important; border-top: 1px solid #f0f2f4 !important; padding: 14px 24px !important;
  display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important;
}

.ctc-btn-back { border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }

.ctc-btn-submit {
  border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important;
  background: var(--btn-p-bg) !important;
  border-color: #4f46e5 !important; box-shadow: 0 2px 8px rgba(79,70,229,0.22) !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
}

.ctc-btn-submit:hover {
  background: var(--btn-p-bg-h) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
}

/* ══════════════════════════════════════════════════
   PROJECT OVERVIEW REDESIGN  (po- prefix)
   ══════════════════════════════════════════════════ */

/* ── Section header: icon box + title/subtitle row ── */
.po-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.po-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 16px;
  flex-shrink: 0;
}

.po-section-icon--sm {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 13px;
}

.po-section-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.po-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a2332;
  line-height: 1.3;
}

.po-section-title--sm {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.po-section-subtitle {
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Icon colour themes ── */
.po-icon--indigo { color: #4f46e5; background: rgba(79,70,229,0.12); }
.po-icon--rose   { color: #e11d48; background: rgba(225,29,72,0.12); }
.po-icon--blue   { color: #2563eb; background: rgba(37,99,235,0.12); }
.po-icon--teal   { color: #0d9488; background: rgba(13,148,136,0.12); }
.po-icon--amber  { color: #d97706; background: rgba(217,119,6,0.12); }
.po-icon--violet { color: #7c3aed; background: rgba(124,58,237,0.12); }
.po-icon--slate  { color: #475569; background: rgba(71,85,105,0.12); }

/* ── Field labels ── */
.po-field-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
}

.po-field-label::before {
  display: none;
}

/* ── Field item bottom border ── */
.project-overview-left dl > div {
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.project-overview-left dl > div:last-child,
.project-overview-left dl > .clearfix {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.project-overview-left dl > .project-overview-description {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ── Field values ── */
.po-field-value {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.project-overview-description .po-field-value {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
}

.project-overview-date-finished .po-field-value {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ── Status pill badge ── */
.po-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ── Stat cards (Open Tasks / Days Left) ── */
.po-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.po-stat-body {
  flex: 1;
  min-width: 0;
}

.po-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 2px;
}

.po-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1px;
  line-height: 1.2;
}

.po-stat-percent {
  font-size: 11.5px;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* ── Expense Cards ── */
.po-exp-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
}

.po-exp-card-icon {
  margin-bottom: 2px;
}

.po-exp-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin: 0;
  line-height: 1.3;
}

.po-exp-card-value {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.po-icon--emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.po-icon--red {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* ── Expense column dots ── */
.po-expense-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.po-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.po-dot--slate { background: #64748b; }
.po-dot--blue  { background: #3b82f6; }
.po-dot--green { background: #22c55e; }
.po-dot--red   { background: #ef4444; }

/* ══════════════════════════════════════════════════
   LEAD TABS — Colored Icon Pills
   ══════════════════════════════════════════════════ */

.top-lead-menu .nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.top-lead-menu .nav-tabs > li > a .menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Profile — indigo */
.top-lead-menu a[href="#tab_lead_profile"] .menu-icon {
  color: #4f46e5 !important;
  background: rgba(79,70,229,0.18) !important;
}
/* Email Activity — sky */
.top-lead-menu a[href="#tab_email_activity"] .menu-icon {
  color: #0284c7 !important;
  background: rgba(2,132,199,0.18) !important;
}
/* Proposals — violet */
.top-lead-menu a[href="#tab_proposals_leads"] .menu-icon {
  color: #7c3aed !important;
  background: rgba(124,58,237,0.18) !important;
}
/* Tasks — pink */
.top-lead-menu a[href="#tab_tasks_leads"] .menu-icon {
  color: #db2777 !important;
  background: rgba(219,39,119,0.18) !important;
}
/* Attachments — blue */
.top-lead-menu a[href="#attachments"] .menu-icon {
  color: #2563eb !important;
  background: rgba(37,99,235,0.18) !important;
}
/* Reminders — amber */
.top-lead-menu a[href="#lead_reminders"] .menu-icon {
  color: #d97706 !important;
  background: rgba(217,119,6,0.18) !important;
}
/* Notes — rose */
.top-lead-menu a[href="#lead_notes"] .menu-icon {
  color: #e11d48 !important;
  background: rgba(225,29,72,0.18) !important;
}
/* Activity Log — teal */
.top-lead-menu a[href="#lead_activity"] .menu-icon {
  color: #0d9488 !important;
  background: rgba(13,148,136,0.18) !important;
}
/* GDPR — slate */
.top-lead-menu a[href="#gdpr"] .menu-icon {
  color: #475569 !important;
  background: rgba(71,85,105,0.18) !important;
}

/* Active & hover */
.top-lead-menu .nav-tabs > li.active > a .menu-icon,
.top-lead-menu .nav-tabs > li > a:hover .menu-icon {
  transform: scale(1.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  filter: saturate(1.3) !important;
}

/* ══════════════════════════════════════════════════
   PROJECT TABS — Colored Icon Pills
   ══════════════════════════════════════════════════ */

.project-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.project-tabs > li > a .menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Overview — indigo */
.project_tab_project_overview > a .menu-icon {
  color: #4f46e5 !important;
  background: rgba(79,70,229,0.18) !important;
}
/* Tasks — pink */
.project_tab_project_tasks > a .menu-icon {
  color: #db2777 !important;
  background: rgba(219,39,119,0.18) !important;
}
/* Timesheets — amber */
.project_tab_project_timesheets > a .menu-icon {
  color: #d97706 !important;
  background: rgba(217,119,6,0.18) !important;
}
/* Milestones — emerald */
.project_tab_project_milestones > a .menu-icon {
  color: #059669 !important;
  background: rgba(5,150,105,0.18) !important;
}
/* Files — blue */
.project_tab_project_files > a .menu-icon {
  color: #2563eb !important;
  background: rgba(37,99,235,0.18) !important;
}
/* Discussions — violet */
.project_tab_project_discussions > a .menu-icon {
  color: #7c3aed !important;
  background: rgba(124,58,237,0.18) !important;
}
/* Gantt — cyan */
.project_tab_project_gantt > a .menu-icon {
  color: #0891b2 !important;
  background: rgba(8,145,178,0.18) !important;
}
/* Tickets — red */
.project_tab_project_tickets > a .menu-icon {
  color: #dc2626 !important;
  background: rgba(220,38,38,0.18) !important;
}
/* Contracts — lime */
.project_tab_project_contracts > a .menu-icon {
  color: #4d7c0f !important;
  background: rgba(77,124,15,0.18) !important;
}
/* Sales — orange */
.project_tab_sales > a .menu-icon {
  color: #ea580c !important;
  background: rgba(234,88,12,0.18) !important;
}
/* Notes — rose */
.project_tab_project_notes > a .menu-icon {
  color: #e11d48 !important;
  background: rgba(225,29,72,0.18) !important;
}
/* Activity — teal */
.project_tab_project_activity > a .menu-icon {
  color: #0d9488 !important;
  background: rgba(13,148,136,0.18) !important;
}

/* Active & hover — lift + deepen */
.project-tabs > li.active > a .menu-icon,
.project-tabs > li > a:hover .menu-icon {
  transform: scale(1.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  filter: saturate(1.3) !important;
}

/* ── Global btn-primary — indigo gradient (overrides all above) ── */
.btn-primary,
.btn.btn-primary {
    background: var(--btn-p-bg) !important;
    border-color: var(--btn-p-border) !important;
    box-shadow: var(--btn-p-shadow) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--btn-p-bg-h) !important;
    border-color: var(--btn-p-border-h) !important;
    box-shadow: var(--btn-p-shadow-h) !important;
}

/* ── Global btn-default — modern style (high specificity via :not chain beats all per-page rules) ── */
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link) {
    border-color: #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.15s ease !important;
}
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):hover,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):focus {
    border-color: #94a3b8 !important;
    box-shadow: 0 3px 8px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.08) !important;
    color: #111827 !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTEXTUAL ICON COLORS — scoped to .btn-default buttons only
   ══════════════════════════════════════════════════════════════════ */

/* ── Upload / Import / Cloud → teal ── */
.btn-default .fa-upload,
.btn-default .fa-cloud-arrow-up,
.btn-default .fa-file-download { color: #0d9488 !important; }

/* ── Filter button — border always visible across all pages ── */
.btn-default:has(.fa-filter),
.btn-default:has(.fa.fa-filter) {
    border-color: #94a3b8 !important;
}

/* ── Filter icon → violet (matches primary button theme) ── */
.btn-default .fa-filter,
.btn-default .fa.fa-filter { color: #7c3aed !important; }

/* ── Settings / Sliders → slate-blue ── */
.btn-default .fa-sliders,
.btn-default .fa-cog,
.btn-default .fa-gear { color: #64748b !important; }

/* ── Refresh / Loading → neutral gray ── */
.btn-default .fa-refresh,
.btn-default .fa-arrows-rotate,
.btn-default .fa-sync,
.btn-default .fa-spinner,
.btn-default .fa-circle-notch { color: #94a3b8 !important; }

/* ── Documents / PDF / Print / Export → orange ── */
.btn-default .fa-file-pdf,
.btn-default .fa-file-zipper,
.btn-default .fa-file-excel,
.btn-default .fa-file-invoice,
.btn-default .fa-file-lines,
.btn-default .fa-file-text,
.btn-default .fa-file-text-o,
.btn-default .fa-file,
.btn-default .fa-receipt,
.btn-default .fa-print,
.dt-buttons .btn .fa-file-pdf,
.dt-buttons .btn .fa-file-zipper,
.dt-buttons .btn .fa-print { color: #ea580c !important; }

/* ── Edit / Save → violet ── */
.btn-default .fa-pen-to-square,
.btn-default .fa-edit,
.btn-default .fa-pencil-square,
.btn-default .fa-floppy-disk,
.btn-default .fa-floppy-o { color: #7c3aed !important; }

/* ── Delete / Remove / Cancel → rose ── */
.btn-default .fa-trash,
.btn-default .fa-trash-can,
.btn-default .fa-times,
.btn-default .fa-xmark,
.btn-default .fa-circle-xmark,
.btn-default .fa-remove,
.btn-default .fa-ban { color: #e11d48 !important; }

/* ── Add / Create → emerald ── */
.btn-default .fa-plus,
.btn-default .fa-plus-square,
.btn-default .fa-check,
.btn-default .fa-circle-check { color: #059669 !important; }

/* ── Users / People → blue ── */
.btn-default .fa-user,
.btn-default .fa-users,
.btn-default .fa-user-gear,
.btn-default .fa-user-group,
.btn-default .fa-user-plus,
.btn-default .fa-circle-user,
.btn-default .fa-user-tie,
.btn-default .fa-user-shield,
.btn-default .fa-user-slash { color: #3b82f6 !important; }

/* ── Communication / Mail → indigo ── */
.btn-default .fa-envelope,
.btn-default .fa-envelope-open,
.btn-default .fa-comment,
.btn-default .fa-comment-dots,
.btn-default .fa-comments,
.btn-default .fa-paper-plane,
.btn-default .fa-reply { color: #6366f1 !important; }

/* ── Finance / Money → emerald ── */
.btn-default .fa-dollar,
.btn-default .fa-dollar-sign,
.btn-default .fa-coins { color: #059669 !important; }

/* ── Calendar / Time → amber ── */
.btn-default .fa-calendar,
.btn-default .fa-calendar-check,
.btn-default .fa-calendar-days,
.btn-default .fa-clock,
.btn-default .fa-clock-o,
.btn-default .fa-clock-rotate-left { color: #d97706 !important; }

/* ── Alerts / Info → contextual ── */
.btn-default .fa-circle-info,
.btn-default .fa-info-circle,
.btn-default .fa-circle-question { color: #3b82f6 !important; }
.btn-default .fa-exclamation-triangle,
.btn-default .fa-triangle-exclamation,
.btn-default .fa-circle-exclamation,
.btn-default .fa-bell { color: #d97706 !important; }

/* ── Location / Map → red ── */
.btn-default .fa-map,
.btn-default .fa-map-marker,
.btn-default .fa-location-dot,
.btn-default .fa-location-pin { color: #dc2626 !important; }

/* ── Social brands → brand colors ── */
.btn-default .fa-facebook,
.btn-default .fa-facebook-f { color: #1877f2 !important; }
.btn-default .fa-linkedin,
.btn-default .fa-linkedin-in { color: #0a66c2 !important; }
.btn-default .fa-google      { color: #4285f4 !important; }
.btn-default .fa-skype       { color: #00aff0 !important; }
.btn-default .fa-dropbox     { color: #0061ff !important; }

/* ── View-switch / Navigation / Misc → muted slate ── */
.btn-default .fa-grip-vertical,
.btn-default .fa-table-list,
.btn-default .fa-th-list,
.btn-default .fa-align-left,
.btn-default .fa-angle-double-left,
.btn-default .fa-angles-left,
.btn-default .fa-angle-down,
.btn-default .fa-angle-left,
.btn-default .fa-angle-right,
.btn-default .fa-arrow-left,
.btn-default .fa-list,
.btn-default .fa-reorder,
.btn-default .fa-expand,
.btn-default .fa-external-link,
.btn-default .fa-up-right-from-square,
.btn-default .fa-link,
.btn-default .fa-lock,
.btn-default .fa-eye,
.btn-default .fa-eye-slash,
.btn-default .fa-paperclip,
.btn-default .fa-tag,
.btn-default .fa-image,
.btn-default .fa-bar-chart,
.btn-default .fa-signal,
.btn-default .fa-puzzle-piece,
.btn-default .fa-layer-group,
.btn-default .fa-briefcase,
.btn-default .fa-building,
.btn-default .fa-building-o,
.btn-default .fa-city,
.btn-default .fa-id-card,
.btn-default .fa-address-card,
.btn-default .fa-ticket,
.btn-default .fa-life-ring,
.btn-default .fa-robot,
.btn-default .fa-share-nodes,
.btn-default .fa-shield-halved,
.btn-default .fa-sort-amount,
.btn-default .fa-globe,
.btn-default .fa-tty,
.btn-default .fa-phone,
.btn-default .fa-phone-square,
.btn-default .fa-bolt,
.btn-default .fa-asterisk,
.btn-default .fa-flag,
.btn-default .fa-star,
.btn-default .fa-note-sticky,
.btn-default .fa-cube,
.btn-default .fa-toggle-on,
.btn-default .fa-toggle-off,
.btn-default .fa-gavel,
.btn-default .fa-list-check,
.btn-default .fa-mars,
.btn-default .fa-smile-o { color: #64748b !important; }


/* ══════════════════════════════════════════════════════════════════
   DataTable buttons — modern border/shadow (overrides all per-page
   ID-based rules by listing each wrapper explicitly, placed last)
   ══════════════════════════════════════════════════════════════════ */
#proposals_wrapper .dt-buttons .btn,
#proposals_wrapper .buttons-html5,
#clients_wrapper .dt-buttons .btn,
#clients_wrapper .buttons-html5,
#estimates_wrapper .dt-buttons .btn,
#estimates_wrapper .buttons-html5,
#invoices_wrapper .dt-buttons .btn,
#invoices_wrapper .DTTT_container .btn,
#payments_wrapper .dt-buttons .btn,
#payments_wrapper .DTTT_container .btn,
#credit_notes_wrapper .dt-buttons .btn,
#credit_notes_wrapper .DTTT_container .btn,
#invoice_items_wrapper .dt-buttons .btn,
#invoice_items_wrapper .DTTT_container .btn,
#groups .dt-buttons .btn,
#tickets-report-table-wrapper .dt-buttons .btn,
#customer-groups_wrapper .dt-buttons .btn,
.contracts-expiring .dt-buttons .btn,
.subscriptions-page .dataTables_wrapper .dt-buttons .btn,
.tasks-manage-page .dataTables_wrapper .dt-buttons .btn,
.staff-manage-page .dataTables_wrapper .dt-buttons .btn,
.departments-page .dataTables_wrapper .dt-buttons .btn,
.predefined-replies-page .dataTables_wrapper .dt-buttons .btn,
#expenses-table-panel .dt-buttons .btn,
#expenses-table-panel .DTTT_container .btn,
#projects-table-panel .dt-buttons .btn,
#projects-table-panel .DTTT_container .btn,
.user-data .dt-buttons .btn {
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#proposals_wrapper .dt-buttons .btn:hover,
#clients_wrapper .dt-buttons .btn:hover,
#estimates_wrapper .dt-buttons .btn:hover,
#invoices_wrapper .dt-buttons .btn:hover,
#payments_wrapper .dt-buttons .btn:hover,
#credit_notes_wrapper .dt-buttons .btn:hover,
#invoice_items_wrapper .dt-buttons .btn:hover,
#groups .dt-buttons .btn:hover,
#tickets-report-table-wrapper .dt-buttons .btn:hover,
#customer-groups_wrapper .dt-buttons .btn:hover,
.contracts-expiring .dt-buttons .btn:hover,
.subscriptions-page .dataTables_wrapper .dt-buttons .btn:hover,
.tasks-manage-page .dataTables_wrapper .dt-buttons .btn:hover,
.staff-manage-page .dataTables_wrapper .dt-buttons .btn:hover,
.departments-page .dataTables_wrapper .dt-buttons .btn:hover,
.predefined-replies-page .dataTables_wrapper .dt-buttons .btn:hover,
#expenses-table-panel .dt-buttons .btn:hover,
#projects-table-panel .dt-buttons .btn:hover,
.user-data .dt-buttons .btn:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 3px 8px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.08) !important;
}


/* ══════════════════════════════════════════════════════════════════
   DataTables length select (per-page dropdown) — modern border/shadow
   ══════════════════════════════════════════════════════════════════ */
#proposals_wrapper .dataTables_length select,
#clients_wrapper .dataTables_length select,
#estimates_wrapper .dataTables_length select,
#invoices_wrapper .dataTables_length select,
#payments_wrapper .dataTables_length select,
#credit_notes_wrapper .dataTables_length select,
#invoice_items_wrapper .dataTables_length select,
#groups .dataTables_length select,
#tickets-report-table-wrapper .dataTables_length select,
#customer-groups_wrapper .dataTables_length select,
.contracts-expiring .dataTables_length select,
.subscriptions-page .dataTables_wrapper .dataTables_length select,
.tasks-manage-page .dataTables_wrapper .dataTables_length select,
.staff-manage-page .dataTables_wrapper .dataTables_length select,
.departments-page .dataTables_wrapper .dataTables_length select,
.predefined-replies-page .dataTables_wrapper .dataTables_length select,
#expenses-table-panel .dataTables_length select,
#projects-table-panel .dataTables_length select,
.user-data .dataTables_length select {
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#proposals_wrapper .dataTables_length select:focus,
#clients_wrapper .dataTables_length select:focus,
#estimates_wrapper .dataTables_length select:focus,
#invoices_wrapper .dataTables_length select:focus,
#payments_wrapper .dataTables_length select:focus,
#credit_notes_wrapper .dataTables_length select:focus,
#invoice_items_wrapper .dataTables_length select:focus,
#groups .dataTables_length select:focus,
#tickets-report-table-wrapper .dataTables_length select:focus,
#customer-groups_wrapper .dataTables_length select:focus,
.contracts-expiring .dataTables_length select:focus,
.subscriptions-page .dataTables_wrapper .dataTables_length select:focus,
.tasks-manage-page .dataTables_wrapper .dataTables_length select:focus,
.staff-manage-page .dataTables_wrapper .dataTables_length select:focus,
.departments-page .dataTables_wrapper .dataTables_length select:focus,
.predefined-replies-page .dataTables_wrapper .dataTables_length select:focus,
#expenses-table-panel .dataTables_length select:focus,
#projects-table-panel .dataTables_length select:focus,
.user-data .dataTables_length select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   KNOWLEDGE BASE — Modern SaaS Redesign
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero / Search Section ── */
.kb-hero-section {
    position: relative;
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 45%, #7c3aed 100%);
    padding: 72px 24px 80px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 0;
}

/* Decorative background shapes */
.kb-hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.kb-hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    background: #fff;
}
.kb-hero-shape-1 { width: 320px; height: 320px; top: -120px; right: -80px; }
.kb-hero-shape-2 { width: 200px; height: 200px; bottom: -60px; left: 5%; }
.kb-hero-shape-3 { width: 140px; height: 140px; top: 30px; left: 20%; opacity: 0.07; }

.kb-hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.kb-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: #e0e7ff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    margin-bottom: 20px;
}

.kb-hero-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kb-hero-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    margin: 0 0 32px;
    font-weight: 400;
    line-height: 1.6;
}

.kb-hero-search-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 6px 6px 6px 18px;
    gap: 10px;
}

.kb-hero-search-icon {
    color: #9ca3af;
    font-size: 16px;
    flex-shrink: 0;
}

.kb-hero-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #1e1b4b;
    padding: 10px 0;
    font-family: inherit;
    min-width: 0;
}
.kb-hero-search-input::placeholder { color: #9ca3af; }

.kb-hero-search-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.18s, transform 0.18s;
    font-family: inherit;
    flex-shrink: 0;
}
.kb-hero-search-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.kb-hero-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}
.kb-hero-hint-tag {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.85);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: default;
    transition: background 0.15s;
}
.kb-hero-hint-tag:hover { background: rgba(255,255,255,0.22); }

/* ── Main Wrapper ── */
.kb-main-wrapper {
    padding: 40px 0 20px;
}

/* ── Empty State ── */
.kb-empty-state {
    text-align: center;
    padding: 60px 24px;
}
.kb-empty-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    margin-bottom: 22px;
}
.kb-empty-icon-wrap i {
    font-size: 32px;
    color: #6d28d9;
}
.kb-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0 0 10px;
}
.kb-empty-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* ── Categories Grid ── */
.kb-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 4px 0;
}
@media (max-width: 991px) { .kb-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kb-categories-grid { grid-template-columns: 1fr; } }

.kb-category-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    gap: 14px;
}
.kb-category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kb-cat-color, #6366f1);
    opacity: 0;
    transition: opacity 0.2s;
}
.kb-category-card:hover {
    box-shadow: 0 8px 32px rgba(99,102,241,0.13), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-3px);
    border-color: transparent;
    text-decoration: none;
}
.kb-category-card:hover::before { opacity: 1; }

.kb-category-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--kb-cat-color, #6366f1) 12%, transparent);
    color: var(--kb-cat-color, #6366f1);
    font-size: 20px;
    flex-shrink: 0;
}

.kb-category-body { flex: 1; }

.kb-category-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    line-height: 1.3;
}
.kb-category-card:hover .kb-category-name { color: var(--kb-cat-color, #6366f1); }

.kb-category-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-category-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}
.kb-category-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}
.kb-category-count i { color: var(--kb-cat-color, #6366f1); font-size: 13px; }
.kb-category-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f9fafb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #9ca3af;
    transition: background 0.18s, color 0.18s, transform 0.18s;
}
.kb-category-card:hover .kb-category-arrow {
    background: var(--kb-cat-color, #6366f1);
    color: #fff;
    transform: translateX(2px);
}

/* ── Articles List (category / search view) ── */
.kb-articles-outer { display: flex; flex-direction: column; gap: 32px; }

.kb-articles-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
}
.kb-articles-group-header i { color: #6366f1; font-size: 16px; }
.kb-articles-group-count {
    margin-left: auto;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
}

.kb-articles-cards { display: flex; flex-direction: column; gap: 12px; }

.kb-article-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.kb-article-card:hover {
    box-shadow: 0 6px 24px rgba(99,102,241,0.1), 0 2px 6px rgba(0,0,0,0.05);
    border-color: #c7d2fe;
    transform: translateY(-1px);
    text-decoration: none;
}

.kb-article-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.kb-article-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #6d28d9;
    transition: background 0.2s, color 0.2s;
}
.kb-article-card:hover .kb-article-card-icon {
    background: #6366f1;
    color: #fff;
}

.kb-article-card-content { flex: 1; min-width: 0; }

.kb-article-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    line-height: 1.4;
    transition: color 0.15s;
}
.kb-article-card:hover .kb-article-card-title { color: #4f46e5; }

.kb-article-card-excerpt {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-article-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.kb-article-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #9ca3af;
}
.kb-article-date i { font-size: 11px; }

.kb-article-readmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    transition: gap 0.15s;
}
.kb-article-card:hover .kb-article-readmore { gap: 8px; }
.kb-article-readmore i { font-size: 10px; }

/* ── Search Results Header ── */
.kb-search-results-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f7ff;
    border: 1px solid #e0e7ff;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 28px;
}
.kb-search-results-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.kb-search-results-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0 0 3px;
}
.kb-search-results-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* ══════════════════════════════════════════════════════
   TICKETS — KPI Grid
   ══════════════════════════════════════════════════════ */

.client-ticket-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (min-width: 768px) {
    .client-ticket-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px) {
    .client-ticket-kpi-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.client-ticket-kpi-card {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}
.client-ticket-kpi-card:hover {
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    border-color: #d1d5db !important;
}
.client-ticket-kpi-card .exp-kpi-label {
    text-decoration: none !important;
}
.client-ticket-kpi-card:hover .exp-kpi-label {
    text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════
   TICKETS TABLE — Row styling
   ══════════════════════════════════════════════════════ */

.table-tickets > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}

.table-tickets > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-tickets > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-tickets > tbody > tr:hover > td {
  background: #fafafa !important;
}

/* Ticket number link */
.table-tickets a.ticket-num-link {
  font-weight: 700;
  color: #4f46e5;
  font-size: 13.5px;
  text-decoration: none;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  letter-spacing: 0.01em;
}
.table-tickets a.ticket-num-link:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* Subject link */
.table-tickets a.ticket-subject-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}
.table-tickets a.ticket-subject-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Unread ticket — keep existing text-danger row coloring but only for the number */
.table-tickets tr.text-danger a.ticket-num-link {
  color: #ef4444 !important;
}
.table-tickets tr.text-danger a.ticket-num-link:hover {
  color: #dc2626 !important;
}
.table-tickets tr.text-danger td {
  color: inherit;
}

/* ══════════════════════════════════════════════════════
   TICKETS TABLE — Status Badge
   ══════════════════════════════════════════════════════ */

.table-tickets .ticket-status-badge {
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  display: inline-block;
  line-height: 1.5;
}

.table-tickets .ticket-status-badge::before {
  content: '●';
  display: inline-block;
  margin-right: 5px;
  font-size: 7px;
  vertical-align: middle;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════
   CONTRACTS — KPI Grid
   ══════════════════════════════════════════════════════ */

.client-contract-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (min-width: 992px) {
    .client-contract-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ══════════════════════════════════════════════════════
   CONTRACTS — Charts Grid
   ══════════════════════════════════════════════════════ */

.client-contracts-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
@media (min-width: 768px) {
    .client-contracts-charts-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.contracts-chart-panel.panel_s {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.contracts-chart-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   CONTRACTS TABLE — Row styling
   ══════════════════════════════════════════════════════ */

.table-contracts > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #6b7280 !important;
  border-bottom: 2px solid #f3f4f6 !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}

.table-contracts > tbody > tr > td {
  padding: 10px 14px 6px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13.5px;
}

.table-contracts > tbody > tr:last-child > td {
  border-bottom: none !important;
}

.table-contracts > tbody > tr:hover > td {
  background: #fafafa !important;
}

/* Subject link */
.table-contracts a.contract-subject-link {
  font-weight: 600;
  color: #111827;
  font-size: 13.5px;
  text-decoration: none;
}
.table-contracts a.contract-subject-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* Signature badges */
.contract-sig-badge {
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-block;
  line-height: 1.5;
  border: 1px solid transparent;
}
.contract-sig-badge::before {
  content: '●';
  display: inline-block;
  margin-right: 5px;
  font-size: 7px;
  vertical-align: middle;
  line-height: 1;
}
.contract-sig-signed {
  background: #ecfdf5;
  color: #10b981;
  border-color: #a7f3d0;
}
.contract-sig-unsigned {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
}

/* Expiry / date badges */
.contract-date-badge {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-block;
  line-height: 1.5;
  border: 1px solid transparent;
  margin-left: 4px;
  vertical-align: middle;
}
.contract-date-expired {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}
.contract-date-perpetual {
  background: #faf5ff;
  color: #8b5cf6;
  border-color: #ddd6fe;
}

/* ── Responsive tweaks ── */
@media (max-width: 600px) {
    .kb-hero-title { font-size: 26px; }
    .kb-hero-section { padding: 48px 16px 56px; }
    .kb-hero-search-wrap { padding: 5px 5px 5px 14px; }
    .kb-article-card-inner { flex-direction: column; gap: 10px; }
    .kb-article-card-icon { width: 36px; height: 36px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════
   CLIENT PORTAL — DASHBOARD REDESIGN
   ═══════════════════════════════════════════════════════ */

/* Greeting */
.client-dashboard-greeting {
    padding: 6px 0 22px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

/* Section heading row */
.client-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Project KPI Grid ── */
.client-proj-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (min-width: 576px) {
    .client-proj-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .client-proj-kpi-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Project card — link reset + hover */
a.client-proj-kpi-card {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}
a.client-proj-kpi-card:hover .exp-kpi-amount {
    color: #4f46e5;
}

/* ── Invoice KPI Grid ── */
.client-inv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
@media (min-width: 992px) {
    .client-inv-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Invoice label links */
.client-inv-kpi-grid .exp-kpi-label {
    text-decoration: none !important;
}
.client-inv-kpi-grid .exp-kpi-label:hover {
    text-decoration: underline !important;
}

/* Count denominator */
.exp-kpi-denom {
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1;
}

/* Slim progress bar row inside invoice cards */
.client-inv-progress {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.client-inv-progress .progress {
    flex: 1;
    height: 5px;
    margin: 0;
    border-radius: 99px;
    background: #f1f5f9;
    box-shadow: none;
}
.client-inv-progress .progress-bar {
    border-radius: 99px;
}
.client-inv-progress-pct {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

/* Chart panel */
.client-chart-panel.panel_s {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
    margin-top: 20px !important;
}

/* ═══════════════════════════════════════════════════════
   CUSTOMER PANEL HEADER — Modern Redesign
   ═══════════════════════════════════════════════════════ */

/* ── Base navbar ── */
nav.customers-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
  margin-bottom: 0 !important;
  min-height: 64px !important;
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ── Container: flex row ── */
nav.customers-header > .container {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  min-height: 64px !important;
  padding: 0 15px !important;
}

/* ── Navbar header (logo side) ── */
nav.customers-header .customers-navbar-header {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  flex-shrink: 0;
  padding: 0 !important;
}

/* ── Logo link ── */
nav.customers-header a.cn-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 24px 0 0 !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-decoration: none !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.customers-header a.cn-logo img {
  height: 32px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain;
  display: block !important;
}

/* ── Mobile toggle ── */
nav.customers-header .navbar-toggle {
  float: none !important;
  margin: 0 0 0 auto !important;
  padding: 8px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background 0.15s !important;
}

nav.customers-header .navbar-toggle:hover {
  background: #f3f4f6 !important;
}

nav.customers-header .navbar-toggle .icon-bar {
  background-color: #6b7280 !important;
}

/* ── Collapse area (desktop: always flex) ── */
@media (min-width: 768px) {
  nav.customers-header .navbar-collapse.customers-nav-body {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    overflow: visible !important;
    float: none !important;
  }
}

/* ── Nav links list ── */
nav.customers-header .customers-nav-links {
  display: flex !important;
  align-items: stretch !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
}

nav.customers-header .customers-nav-links > li {
  display: flex !important;
  align-items: stretch !important;
  float: none !important;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

/* Active li carries the bottom accent line */
nav.customers-header .customers-nav-links > li.active {
  border-bottom-color: #2563eb !important;
}

/* Nav link base */
nav.customers-header .customers-nav-links > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-top: none !important;
  transition: color 0.15s, background 0.15s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border-radius: 0 !important;
}

/* Hover */
nav.customers-header .customers-nav-links > li > a:hover {
  color: #374151 !important;
  background: #f9fafb !important;
}

/* Active link: light-blue pill, centered inside the li */
nav.customers-header .customers-nav-links > li.active > a {
  color: #2563eb !important;
  font-weight: 600 !important;
  background: #eff6ff !important;
  border-radius: 8px !important;
  align-self: center !important;
  margin: 0 4px !important;
  padding: 7px 12px !important;
}

/* ── Nav item icons via FA6 ::before pseudo-elements ── */
nav.customers-header .customers-nav-links > li > a::before {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-variant: normal;
  font-size: 13px;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

nav.customers-header .customers-nav-links > li.active > a::before,
nav.customers-header .customers-nav-links > li > a:hover::before {
  opacity: 0.85;
}

/* Knowledge Base — book (Solid, weight 900) */
nav.customers-header .customers-nav-item-knowledge-base > a::before {
  content: "\f02d";
  font-weight: 900;
}

/* Projects — folder-open (Solid, weight 900) */
nav.customers-header .customers-nav-item-projects > a::before {
  content: "\f07c";
  font-weight: 900;
}

/* Invoices — file-lines (Solid, weight 900) */
nav.customers-header .customers-nav-item-invoices > a::before {
  content: "\f15c";
  font-weight: 900;
}

/* Contracts — file (Solid, weight 900) */
nav.customers-header .customers-nav-item-contracts > a::before {
  content: "\f15b";
  font-weight: 900;
}

/* Estimates — calculator (Solid, weight 900) */
nav.customers-header .customers-nav-item-estimates > a::before {
  content: "\f1ec";
  font-weight: 900;
}

/* Proposals — file-signature (Solid, weight 900) */
nav.customers-header .customers-nav-item-proposals > a::before {
  content: "\f573";
  font-weight: 900;
}

/* Subscriptions — sync-alt (Solid, weight 900) */
nav.customers-header .customers-nav-item-subscriptions > a::before {
  content: "\f2f1";
  font-weight: 900;
}

/* Support — headset (Solid, weight 900) */
nav.customers-header .customers-nav-item-support > a::before {
  content: "\f590";
  font-weight: 900;
}

/* ── Right controls list ── */
nav.customers-header .customers-nav-right-list {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 8px 0 0 !important;
  gap: 4px !important;
  flex-shrink: 0;
}

nav.customers-header .customers-nav-right-list > li {
  display: flex !important;
  align-items: center !important;
  float: none !important;
}

/* ── Language switcher ── */
.cn-lang-item > a.cn-lang-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.cn-lang-item > a.cn-lang-btn:hover,
.cn-lang-item.open > a.cn-lang-btn {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.cn-lang-item > a.cn-lang-btn .fa-globe {
  font-size: 16px !important;
}

.cn-lang-label {
  font-size: 12.5px;
  font-weight: 600;
  color: inherit;
  letter-spacing: 0.01em;
}

.cn-lang-chevron {
  font-size: 9px !important;
  color: #9ca3af !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0;
}

.cn-lang-item.open .cn-lang-chevron {
  transform: rotate(180deg);
}

.cn-lang-dropdown {
  min-width: 170px !important;
  padding: 6px 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
  margin-top: 10px !important;
  right: 0 !important;
  left: auto !important;
  max-height: 300px;
  overflow-y: auto;
}

.cn-lang-dropdown > li > a {
  display: block !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: background 0.12s !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.cn-lang-dropdown > li > a:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.cn-lang-dropdown > li.active > a {
  color: #2563eb !important;
  font-weight: 600 !important;
  background: #eff6ff !important;
}

/* ── Bell button ── */
.cn-bell-item > a.cn-bell-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  position: relative;
  padding: 0 !important;
}

.cn-bell-item > a.cn-bell-btn:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.cn-bell-item > a.cn-bell-btn i {
  font-size: 17px !important;
}

/* Badge — indigo to match reference */
.cn-bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #4f46e5;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid #fff;
  line-height: 1;
}

/* ── Profile toggle ── */
nav.customers-header .cn-profile-li > a.cn-profile-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 8px 4px 4px !important;
  border-radius: 10px !important;
  height: auto !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
  color: inherit !important;
}

nav.customers-header .cn-profile-li > a.cn-profile-toggle:hover,
nav.customers-header .cn-profile-li.open > a.cn-profile-toggle {
  background: #f3f4f6 !important;
}

.cn-profile-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #e5e7eb !important;
  flex-shrink: 0;
  display: block !important;
}

.cn-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .cn-profile-name {
    display: none !important;
  }
}

.cn-profile-chevron {
  font-size: 9px !important;
  color: #9ca3af !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0;
}

nav.customers-header .cn-profile-li.open .cn-profile-chevron {
  transform: rotate(180deg);
}

/* ── Profile dropdown ── */
.cn-profile-dropdown {
  min-width: 230px !important;
  padding: 6px 0 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
  margin-top: 10px !important;
  right: 0 !important;
  left: auto !important;
}

.cn-dd-header-li {
  pointer-events: none;
  cursor: default;
}

.cn-dd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
}

.cn-dd-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
}

.cn-dd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cn-dd-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cn-dd-sub {
  display: block;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
}

.cn-profile-dropdown > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: background 0.12s !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}

.cn-profile-dropdown > li > a > i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #9ca3af;
  flex-shrink: 0;
  transition: color 0.12s;
}

.cn-profile-dropdown > li > a:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.cn-profile-dropdown > li > a:hover > i {
  color: #6366f1 !important;
}

.cn-profile-dropdown .dropdown-submenu > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

.cn-profile-dropdown .dropdown-submenu > a > i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #9ca3af;
  flex-shrink: 0;
}

.cn-profile-dropdown .cn-logout-item > a {
  color: #ef4444 !important;
}

.cn-profile-dropdown .cn-logout-item > a > i {
  color: #ef4444 !important;
}

.cn-profile-dropdown .cn-logout-item > a:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.cn-profile-dropdown .cn-logout-item > a:hover > i {
  color: #dc2626 !important;
}

.cn-profile-dropdown > li.divider {
  margin: 5px 0 !important;
  border-color: #f1f5f9 !important;
}

.cn-profile-dropdown .badge {
  background: #4f46e5 !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  margin-left: auto;
  font-weight: 700 !important;
}

/* ── Mobile layout (<768px) ── */
@media (max-width: 767px) {
  nav.customers-header {
    min-height: 56px !important;
  }

  nav.customers-header > .container {
    min-height: 56px !important;
    flex-wrap: wrap !important;
    padding: 0 12px !important;
  }

  nav.customers-header .customers-navbar-header {
    width: 100%;
    min-height: 56px;
  }

  nav.customers-header .navbar-collapse.customers-nav-body {
    width: 100%;
    border-top: 1px solid #f1f5f9;
    padding: 8px 0 12px !important;
    background: #ffffff;
  }

  nav.customers-header .customers-nav-links {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  nav.customers-header .customers-nav-links > li {
    border-bottom: none !important;
    border-left: 2px solid transparent;
  }

  nav.customers-header .customers-nav-links > li.active {
    border-left-color: #2563eb !important;
    border-bottom: none !important;
  }

  nav.customers-header .customers-nav-links > li > a {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    height: auto !important;
  }

  nav.customers-header .customers-nav-links > li.active > a {
    border-radius: 8px !important;
    margin: 0 4px !important;
    padding: 10px 16px !important;
    align-self: auto !important;
  }

  nav.customers-header .customers-nav-right-list {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 8px 12px 4px !important;
    border-top: 1px solid #f1f5f9;
    margin-top: 6px !important;
    width: 100%;
  }

  .cn-profile-name {
    display: none !important;
  }

  .cn-profile-dropdown {
    right: auto !important;
    left: 0 !important;
  }
}

/* ══════════════════════════════════════════════
   OPEN TICKET CLIENT PORTAL REDESIGN
   ══════════════════════════════════════════════ */

/* ── Outer wrapper ── */
.open-ticket-redesign {
  margin-top: 0;
}

/* ── Page Header ── */
.otkt-page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  margin-bottom: 16px;
}
.otkt-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.otkt-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f0eeff;
  border-radius: 10px;
  color: #7c3aed;
  font-size: 16px;
  flex-shrink: 0;
}
.otkt-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}
.otkt-page-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  padding-left: 52px;
}

/* ── Card ── */
.otkt-card {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03);
  background: #ffffff;
  overflow: hidden;
}
.otkt-card-body {
  padding: 24px 24px 18px;
}
.otkt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #f0f2f4;
  background: #fafbfc;
}

/* Neutralise residual panel_s styles inside redesign */
.open-ticket-redesign .panel_s {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

/* ── Field icons & required marker ── */
.otkt-field-icon {
  color: #7c3aed;
  margin-right: 5px;
  font-size: 13px;
}
.otkt-required {
  color: #ef4444;
  margin-left: 2px;
}

/* ── Form labels ── */
.open-ticket-redesign .form-group label,
.open-ticket-redesign .form-group label.control-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  display: flex;
  align-items: center;
}

/* ── Text / textarea inputs ── */
.open-ticket-redesign .form-group .form-control {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #111827 !important;
  background: #fafbfc !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.open-ticket-redesign .form-group .form-control:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
  background: #ffffff !important;
  outline: none !important;
}

/* ── Bootstrap-select (border/radius/bg only — no padding/color per memory) ── */
.open-ticket-redesign .bootstrap-select > .dropdown-toggle {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.open-ticket-redesign .bootstrap-select.open > .dropdown-toggle,
.open-ticket-redesign .bootstrap-select > .dropdown-toggle:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
  background: #ffffff !important;
  outline: none !important;
}

/* ── Attachments dashed area ── */
.otkt-attachments-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.otkt-attachments-drop-area {
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  padding: 16px;
  background: #fafbfc;
}
.otkt-attachments-drop-area .input-group .form-control {
  border-radius: 8px 0 0 8px !important;
}
.otkt-attachments-drop-area .input-group-btn > .btn {
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #d1d5db !important;
  background: #f8fafc !important;
  color: #6b7280 !important;
}

/* ── Footer info text ── */
.otkt-footer-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6b7280;
}
.otkt-footer-info .fa {
  color: #9ca3af;
  font-size: 14px;
}

/* ── Submit button ── */
.otkt-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .otkt-page-header {
    padding: 14px 16px;
  }
  .otkt-page-subtitle {
    padding-left: 0;
  }
  .otkt-card-body {
    padding: 18px 16px 14px;
  }
  .otkt-card-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .otkt-btn-submit {
    justify-content: center;
    width: 100%;
  }
}

/* ── END OPEN TICKET CLIENT PORTAL REDESIGN ── */

/* ══════════════════════════════════════════════
   CLIENT PORTAL — GDPR Rights Cards
   ══════════════════════════════════════════════ */

.gdpr-right {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 30px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.gdpr-right:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

.gdpr-right-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #eff6ff;
  border-radius: 12px;
  margin: 0 auto 16px;
  font-size: 19px;
  color: #2563eb;
}

.gdpr-right-icon--danger {
  background: #fff1f2;
  color: #e11d48;
}

.gdpr-right-icon--green {
  background: #f0fdf4;
  color: #16a34a;
}

.gdpr-right-icon--purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.gdpr-right .gdpr-right-heading {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 18px !important;
}

/* ══════════════════════════════════════════════
   CLIENT PORTAL — Announcements List
   ══════════════════════════════════════════════ */

.panel_s--announcements {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
  overflow: hidden;
}

.table-announcements > thead > tr > th {
  background: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6b7280 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.table-announcements > tbody > tr > td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
}

.table-announcements > tbody > tr:hover > td {
  background: #f8fafc !important;
}

.table-announcements > tbody > tr > td:last-child {
  color: #9ca3af;
  font-size: 13px;
}

.table-announcements > tbody > tr > td a {
  color: #2563eb;
  font-weight: 500;
}

.table-announcements > tbody > tr > td a:hover {
  color: #1d4ed8;
  text-decoration: none;
}

/* ══════════════════════════════════════════════
   CLIENT PORTAL — Single Announcement
   ══════════════════════════════════════════════ */

.section-announcement {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
  overflow: hidden;
}

.announcement-heading {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.015em;
}

.announcement-date {
  color: #6b7280 !important;
  font-size: 13px !important;
}

.panel_s--announcement-content {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
}

.announcement-content {
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
}

/* ── Customer area submenu (Files + Calendar) ── */
.customers #content > .container > .row {
  padding-top: 20px !important;
}
.customer-top-submenu {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ══════════════════════════════════════════════
   CLIENT PORTAL — SINGLE TICKET REDESIGN (stkt-*)
   ══════════════════════════════════════════════ */

/* ── Outer wrapper ── */
.single-ticket-redesign {
  margin-top: 0;
}

/* ── Page Header ── */
.stkt-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  min-height: 76px;
}
.stkt-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stkt-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stkt-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  border-radius: 12px;
  color: #ffffff;
  font-size: 18px;
  flex-shrink: 0;
}
.stkt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.stkt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.stkt-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stkt-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.stkt-back-btn:hover,
.stkt-back-btn:focus {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
  text-decoration: none !important;
}
.stkt-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}
.stkt-more-btn:hover,
.stkt-more-btn:focus {
  background: #f9fafb;
  border-color: #d1d5db;
  outline: none;
}

/* ── Main row ── */
.stkt-main-row {
  margin-top: 0;
}
.stkt-left-col,
.stkt-right-col {
  margin-bottom: 4px;
}

/* ── Ticket Info Card ── */
.stkt-info-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 22px;
  overflow: hidden;
}
.stkt-info-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.stkt-ticket-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: #ede9fe;
  border-radius: 10px;
  color: #7c3aed;
  font-size: 17px;
  flex-shrink: 0;
}
.stkt-ticket-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.45;
}
.stkt-pills-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f4;
}
.stkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.stkt-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Priority pill colours by priorityid */
.stkt-priority-pill[data-priorityid="1"] { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.stkt-priority-pill[data-priorityid="1"] .stkt-pill-dot { background: #15803d; }
.stkt-priority-pill[data-priorityid="2"] { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.stkt-priority-pill[data-priorityid="2"] .stkt-pill-dot { background: #d97706; }
.stkt-priority-pill[data-priorityid="3"] { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.stkt-priority-pill[data-priorityid="3"] .stkt-pill-dot { background: #dc2626; }
.stkt-priority-pill[data-priorityid="4"] { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.stkt-priority-pill[data-priorityid="4"] .stkt-pill-dot { background: #be185d; }
/* fallback if priorityid not matched */
.stkt-priority-pill:not([data-priorityid]) { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.stkt-priority-pill:not([data-priorityid]) .stkt-pill-dot { background: #6b7280; }

/* ── Metadata rows ── */
.stkt-meta-list {
  display: flex;
  flex-direction: column;
}
.stkt-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid #f0f4f8;
}
.stkt-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.stkt-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #f0f4ff;
  border-radius: 6px;
  color: #6366f1;
  font-size: 12px;
  flex-shrink: 0;
}
.stkt-meta-label {
  flex: 0 0 85px;
  font-size: 13px;
  color: #6b7280;
  padding-top: 5px;
  white-space: nowrap;
}
.stkt-meta-value {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: #111827;
  padding-top: 4px;
  min-width: 0;
}

/* ── Reply Card ── */
.stkt-reply-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 20px;
}
.stkt-reply-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f2f4;
}
.stkt-reply-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: #ede9fe;
  border-radius: 10px;
  color: #7c3aed;
  font-size: 17px;
  flex-shrink: 0;
}
.stkt-reply-header-text {
  flex: 1;
  min-width: 0;
}
.stkt-reply-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.stkt-reply-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.stkt-reply-body {
  padding: 20px 24px;
}
.stkt-reply-textarea {
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fafbfc !important;
  font-size: 14px !important;
  color: #111827 !important;
  padding: 14px !important;
  min-height: 160px;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.stkt-reply-textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
  outline: none !important;
  background: #ffffff !important;
}
.stkt-attach-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 14px 0 8px !important;
}
.stkt-field-icon {
  color: #7c3aed;
  font-size: 13px;
}
.stkt-reply-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid #f0f2f4;
  background: #fafbfc;
}
.stkt-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25) !important;
  transition: opacity 0.15s, box-shadow 0.15s !important;
}
.stkt-submit-btn:hover,
.stkt-submit-btn:focus {
  opacity: 0.9 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35) !important;
}

/* ── Conversation Card ── */
.stkt-convo-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 20px;
}
.stkt-convo-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid #f0f2f4;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.stkt-convo-card-header .fa {
  color: #7c3aed;
  font-size: 15px;
}
.stkt-message-wrap {
  display: flex;
  align-items: stretch;
  padding: 20px 22px;
  background: #fffbeb;
  min-height: 80px;
}
.stkt-convo-card:not(.client-reply) .stkt-message-wrap {
  background: #f0f9ff;
}
.stkt-message-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 110px;
  max-width: 130px;
  padding-right: 4px;
  flex-shrink: 0;
}
.stkt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #c4b5fd;
  color: #4c1d95;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.stkt-sender-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
}
.stkt-sender-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  word-break: break-word;
}
.stkt-sender-badge {
  display: inline-block;
  font-size: 11px;
  color: #6b7280;
  background: #f0f2f5;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.5;
}
.stkt-message-time {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  text-align: center;
}
.stkt-message-divider {
  width: 1px;
  background: #e5e7eb;
  margin: 0 18px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 40px;
}
.stkt-message-content {
  flex: 1;
  font-size: 14px;
  color: #374151;
  line-height: 1.65;
  min-width: 0;
  padding-top: 2px;
}
.stkt-message-separator {
  color: #d1d5db;
  font-size: 12px;
  margin: 8px 0 0;
}

/* Neutralise residual panel_s styles inside redesign */
.single-ticket-redesign .panel_s {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

/* ── Responsive: tablet ── */
@media (max-width: 991px) {
  .stkt-message-wrap {
    flex-direction: column;
    gap: 14px;
  }
  .stkt-message-left {
    flex-direction: row;
    align-items: flex-start;
    min-width: unset;
    max-width: unset;
    padding-right: 0;
    padding-bottom: 12px;
  }
  .stkt-sender-info {
    align-items: flex-start;
    text-align: left;
  }
  .stkt-message-time {
    text-align: left;
    white-space: normal;
  }
  .stkt-message-divider {
    width: 100%;
    height: 1px;
    min-height: unset;
    margin: 0;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
  .stkt-page-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: unset;
  }
  .stkt-page-title {
    font-size: 18px;
  }
  .stkt-reply-card-header {
    padding: 16px;
  }
  .stkt-reply-body {
    padding: 16px;
  }
  .stkt-reply-footer {
    padding: 12px 16px;
  }
  .stkt-reply-footer .stkt-submit-btn {
    width: 100%;
    justify-content: center !important;
  }
  .stkt-convo-card-header {
    padding: 12px 16px;
  }
  .stkt-message-wrap {
    padding: 16px;
  }
  .stkt-info-card {
    padding: 16px;
  }
  .stkt-meta-label {
    flex: 0 0 75px;
  }
}

/* ── END SINGLE TICKET REDESIGN ── */

/* ═══════════════════════════════════════════════════════════
   STATEMENT PAGE REDESIGN
   ═══════════════════════════════════════════════════════════ */

.stmt-page {
  background: #f0f4fa;
  min-height: 100vh;
  padding: 32px 40px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

/* ── Page Header ── */
.stmt-page-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stmt-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stmt-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #eff4ff;
  border-radius: 12px;
  color: #2563eb;
  font-size: 18px;
  flex-shrink: 0;
}

.stmt-icon-box--lg {
  width: 52px;
  height: 52px;
  font-size: 20px;
  border-radius: 14px;
}

.stmt-icon-box--sm {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 9px;
}

.stmt-page-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1e2d4a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.stmt-header-right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── Period Selector ── */
.stmt-period-outer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stmt-period-wrap {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dde6f0;
  border-radius: 10px;
  padding-left: 10px;
  gap: 4px;
  min-width: 180px;
  height: 44px;
}

.stmt-cal-icon {
  color: #2563eb;
  font-size: 13px;
  flex-shrink: 0;
  pointer-events: none;
}

.stmt-period-wrap .bootstrap-select > .dropdown-toggle {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 42px;
}

.stmt-period-wrap .bootstrap-select > .dropdown-toggle:focus,
.stmt-period-wrap .bootstrap-select > .dropdown-toggle:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.stmt-custom-period {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stmt-custom-period .period {
  display: block;
}

.stmt-custom-period .period.hide {
  display: none !important;
}

/* ── Action Buttons ── */
.stmt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #dde6f0;
  border-radius: 10px;
  color: #1e2d4a;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.stmt-action-btn:hover,
.stmt-action-btn:focus {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff !important;
  text-decoration: none;
}

.stmt-action-btn i {
  font-size: 13px;
}

/* ── Main Card ── */
.stmt-main-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #dde6f0;
  box-shadow: 0 4px 24px rgba(30, 45, 74, 0.08);
  padding: 32px;
}

/* ── Card Header ── */
.stmt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eef2f8;
  flex-wrap: wrap;
  gap: 12px;
}

.stmt-card-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stmt-client-name {
  font-size: 20px;
  font-weight: 700;
  color: #1e2d4a;
  line-height: 1.2;
}

.stmt-client-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 3px;
}

.stmt-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff4ff;
  border: 1px solid #c7d9fd;
  border-radius: 10px;
  padding: 8px 16px;
  color: #2563eb;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Top Row (Recipient + Account Summary) ── */
.stmt-top-row {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  align-items: stretch;
}

/* ── Recipient Panel ── */
.stmt-recipient-panel {
  flex: 1;
  background: #eff4ff;
  border: 1px solid #c7d9fd;
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stmt-recipient-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 2px;
}

.stmt-recipient-name {
  font-size: 16px;
  font-weight: 700;
  color: #1e2d4a;
}

/* ── Account Summary Card ── */
.stmt-summary-card {
  flex: 0 0 400px;
  border: 1px solid #dde6f0;
  border-radius: 14px;
  overflow: hidden;
}

.stmt-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e2d4a;
  padding: 16px 20px;
  border-bottom: 1px solid #eef2f8;
  margin: 0;
}

.stmt-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #eef2f8;
}

.stmt-summary-row:last-child {
  border-bottom: none;
}

.stmt-summary-row.balance-due {
  background: #eff4ff;
}

.stmt-summary-label {
  font-size: 14px;
  color: #64748b;
}

.stmt-summary-row.balance-due .stmt-summary-label {
  color: #1e2d4a;
}

.stmt-summary-amount {
  font-size: 14px;
  color: #1e2d4a;
  font-weight: 500;
}

.stmt-summary-row.balance-due .stmt-summary-amount {
  font-weight: 700;
}

/* ── Transactions Section ── */
.stmt-transactions {
  margin-top: 4px;
}

.stmt-txn-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1e2d4a;
}

/* ── Statement Table ── */
.stmt-table-wrap {
  border: 1px solid #dde6f0;
  border-radius: 12px;
  overflow: hidden;
}

.stmt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.stmt-table thead th {
  background: #f8fafc;
  color: #1e2d4a;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid #dde6f0;
  border-top: none;
  text-align: left;
}

.stmt-table thead th.text-right {
  text-align: right;
}

.stmt-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f4fa;
  font-size: 14px;
  color: #1e2d4a;
  vertical-align: middle;
  border-top: none;
}

.stmt-table tbody tr:last-child td {
  border-bottom: none;
}

.stmt-table tbody td.text-right {
  text-align: right;
}

.stmt-dash {
  color: #b0bec5;
}

/* ── Balance Due Footer ── */
.stmt-tfoot td {
  background: #eff4ff !important;
  padding: 14px 16px !important;
  border-top: 1px solid #dde6f0 !important;
  border-bottom: none !important;
  color: #1e2d4a;
  font-size: 14px;
}

.stmt-tfoot td:last-child {
  border-left: none !important;
}

.stmt-tfoot td:first-child {
  border-right: none !important;
}

/* ── Responsive: Tablet ── */
@media (max-width: 991px) {
  .stmt-page {
    padding: 24px 20px;
  }

  .stmt-top-row {
    flex-direction: column;
  }

  .stmt-summary-card {
    flex: unset;
    width: 100%;
  }

  .stmt-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
  .stmt-page {
    padding: 16px 12px;
  }

  .stmt-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .stmt-header-right {
    margin-left: 0;
    width: 100%;
  }

  .stmt-period-wrap {
    width: 100%;
    min-width: unset;
  }

  .stmt-page-title {
    font-size: 22px !important;
  }

  .stmt-action-btn {
    flex: 1;
    min-width: 120px;
  }

  .stmt-main-card {
    padding: 16px;
    border-radius: 14px;
  }

  .stmt-recipient-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .stmt-date-badge {
    white-space: normal;
  }

  .stmt-table-wrap {
    overflow-x: auto;
  }
}

/* ── END STATEMENT PAGE REDESIGN ── */

/* ═══════════════════════════════════════════════════════════
   FILES PAGE REDESIGN (/clients/files)
   ═══════════════════════════════════════════════════════════ */

/* Hide original heading — re-rendered inside card */
.files-redesign-hidden-heading {
  display: none !important;
}

/* ── Main card ── */
.files-redesign-card.panel_s {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden;
}

.files-redesign .panel-body {
  padding: 28px 32px !important;
}

/* ── Card header ── */
.files-redesign-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.files-redesign-hdr-icon {
  width: 48px;
  height: 48px;
  background: #e8f0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.files-redesign-hdr-icon i {
  color: #3b5bdb;
  font-size: 22px;
}

.files-redesign-title {
  margin: 0 0 3px;
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.files-redesign-subtitle {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.4;
}

/* ── Dropzone ── */
.files-redesign-dropzone.dropzone {
  background: #f0f4ff !important;
  border: 2px dashed #a5b4fc !important;
  border-radius: 14px !important;
  min-height: 290px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.files-redesign-dropzone .dz-message {
  margin: 0;
  text-align: center;
  padding: 36px 24px;
  width: 100%;
}

.files-rdz-icon-wrap {
  width: 68px;
  height: 68px;
  background: #dde4ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.files-rdz-icon-wrap i {
  color: #4361ee;
  font-size: 30px;
}

.files-rdz-primary {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}

.files-rdz-secondary {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 20px;
}

.files-rdz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3b5bdb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 91, 219, 0.30);
  margin-bottom: 14px;
  pointer-events: none; /* dropzone handles all clicks */
}

.files-redesign-dropzone:hover .files-rdz-btn {
  background: #2f4ec0;
}

.files-rdz-hint {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

/* Dropzone previews while uploading */
.files-redesign-dropzone .dz-preview {
  margin: 8px;
}

/* ── Google Drive / Dropbox buttons ── */
.files-redesign-external-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 20px;
}

.files-redesign-ext-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.files-redesign-ext-btn:hover {
  background: #f8fafc;
  border-color: #c7d2fe;
}

/* ── Empty state ── */
.files-redesign-empty {
  text-align: center;
  padding: 52px 24px;
  border-top: 1px solid #e2e8f0;
  margin-top: 8px;
}

.files-redesign-empty-icon {
  width: 56px;
  height: 56px;
  background: #e8f0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.files-redesign-empty-icon i {
  color: #4361ee;
  font-size: 24px;
}

.files-redesign-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}

.files-redesign-empty-sub {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}

/* ── Override global .preview_image and .table-image widths inside redesign ── */
.files-redesign .files-redesign-thumb.preview_image {
  width: 90px !important;
  height: 68px !important;
  margin: 0 !important;
}

.files-redesign .files-redesign-thumb .table-image {
  width: 90px !important;
  height: 68px !important;
  margin: 0 !important;
}

.files-redesign .files-redesign-thumb .table-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── File table container ── */
.files-redesign .dataTables_wrapper {
  margin-top: 4px;
}

/* DataTables wraps the table in .table-responsive via initComplete; put border/radius there */
.files-redesign .dataTables_wrapper .table-responsive {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0;
}

.files-redesign-table.table {
  border: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Neutralise .mtop15 on the table inside the redesign */
.files-redesign .files-redesign-table.mtop15 {
  margin-top: 0 !important;
}

/* Table header */
.files-redesign-table thead tr {
  background: #f1f5f9 !important;
}

.files-redesign-table thead th {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  white-space: nowrap;
}

/* Table body rows */
.files-redesign-table tbody td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
}

.files-redesign-table tbody tr:hover td {
  background: #f8fafc;
}

/* ── File cell ── */
.files-redesign-file-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.files-redesign-thumb {
  width: 90px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.files-redesign-thumb .table-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.files-redesign-thumb .table-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.files-redesign-thumb .table-image .text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.files-redesign-thumb-icon {
  background: #f1f5f9;
  color: #94a3b8;
}

.files-redesign-thumb-icon a {
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.files-redesign-file-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.files-redesign-file-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  display: block;
}

.files-redesign-file-name:hover {
  color: #3b5bdb !important;
  text-decoration: none !important;
}

.files-redesign-file-meta {
  font-size: 13px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.files-redesign-file-meta i {
  font-size: 11px;
}

/* ── Date cell ── */
.files-redesign-date-val {
  font-size: 14px;
  color: #334155;
  display: block;
}

/* ── Delete button ── */
.files-redesign-del-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #ef4444 !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important;
  padding: 0 !important;
}

.files-redesign-del-btn:hover {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  text-decoration: none !important;
}

/* ── DataTables controls ── */
.files-redesign .dataTables_wrapper .dataTables_length {
  float: left;
  margin-bottom: 14px;
}

.files-redesign .dataTables_wrapper .dataTables_length label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #475569 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

.files-redesign .dataTables_wrapper .dataTables_length select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #fff !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
}

.files-redesign .dataTables_wrapper .dataTables_filter {
  float: right;
  margin-bottom: 14px;
}

.files-redesign .dataTables_wrapper .dataTables_filter label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #475569 !important;
  margin: 0 !important;
}

.files-redesign .dataTables_wrapper .dataTables_filter input {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #fff !important;
  width: 280px !important;
  margin-left: 0 !important;
  box-shadow: none !important;
}

.files-redesign .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #a5b4fc !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.2) !important;
}

.files-redesign .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #94a3b8;
}

/* Clearfix */
.files-redesign .dataTables_wrapper > div:first-child::after,
.files-redesign .DTFC_LeftWrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* Info text */
.files-redesign .dataTables_wrapper .dataTables_info {
  font-size: 14px !important;
  color: #64748b !important;
  padding-top: 12px !important;
  float: left;
}

/* Pagination */
.files-redesign .dataTables_wrapper .dataTables_paginate {
  float: right;
  padding-top: 6px !important;
}

.files-redesign .dataTables_wrapper .paginate_button {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #334155 !important;
  background: #fff !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  margin: 0 2px !important;
  line-height: 1.4 !important;
  display: inline-block;
}

.files-redesign .dataTables_wrapper .paginate_button.current,
.files-redesign .dataTables_wrapper .paginate_button.current:hover {
  background: #3b5bdb !important;
  color: #fff !important;
  border-color: #3b5bdb !important;
}

.files-redesign .dataTables_wrapper .paginate_button:hover:not(.current):not(.disabled) {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

.files-redesign .dataTables_wrapper .paginate_button.disabled,
.files-redesign .dataTables_wrapper .paginate_button.disabled:hover {
  color: #94a3b8 !important;
  cursor: default !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* ── Responsive: tablet ── */
@media (max-width: 991px) {
  .files-redesign .panel-body {
    padding: 22px 20px !important;
  }

  .files-redesign-title {
    font-size: 20px;
  }

  .files-redesign .dataTables_wrapper .dataTables_filter input {
    width: 200px !important;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
  .files-redesign .panel-body {
    padding: 18px 16px !important;
  }

  .files-redesign-header {
    gap: 10px;
    margin-bottom: 20px;
  }

  .files-redesign-hdr-icon {
    width: 40px;
    height: 40px;
  }

  .files-redesign-hdr-icon i {
    font-size: 18px;
  }

  .files-redesign-title {
    font-size: 18px;
  }

  .files-redesign-subtitle {
    font-size: 13px;
  }

  .files-redesign-dropzone.dropzone {
    min-height: 220px !important;
  }

  .files-rdz-primary {
    font-size: 16px;
  }

  .files-redesign .dataTables_wrapper .dataTables_length,
  .files-redesign .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 10px;
  }

  .files-redesign .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }

  .files-redesign .dataTables_wrapper .dataTables_info,
  .files-redesign .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
  }

  .files-redesign-thumb {
    width: 60px;
    height: 50px;
  }

  .files-redesign-file-name {
    font-size: 14px !important;
    max-width: 160px;
  }

  .files-redesign-external-btns {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Horizontal scroll for table on very small screens */
  .files-redesign .files-redesign-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── END FILES PAGE REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE REDESIGN — scoped to body.customers_login / .login-redesign
   ═══════════════════════════════════════════════════════════════ */

body.customers_login {
    background: #f4f6fd;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(124,58,237,0.10) 0%, rgba(124,58,237,0) 45%),
        radial-gradient(circle at 90% 12%, rgba(147,51,234,0.09) 0%, rgba(147,51,234,0) 40%),
        radial-gradient(circle at 88% 92%, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0) 45%);
}

.login-redesign {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding: 48px 16px;
    overflow: hidden;
}

.login-redesign-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.login-redesign-shapes::before,
.login-redesign-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.login-redesign-shapes::before {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, rgba(99,102,241,0) 70%);
}

.login-redesign-shapes::after {
    width: 260px;
    height: 260px;
    right: -80px;
    top: -40px;
    background: radial-gradient(circle, rgba(147,51,234,0.12) 0%, rgba(147,51,234,0) 70%);
}

.login-redesign-heading,
.login-redesign-card {
    position: relative;
    z-index: 1;
    width: 100%;
}

.login-redesign-heading {
    max-width: 400px;
    margin: 0 auto 22px;
}

.login-redesign-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e2438;
    margin: 0 0 6px;
}

.login-redesign-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.login-redesign-card {
    max-width: 390px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 16px;
    box-shadow: 0 20px 40px -12px rgba(30,20,80,0.14), 0 4px 10px rgba(30,20,80,0.06);
    padding: 28px;
}

.login-redesign-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
    font-size: 22px;
}

.login-redesign-group {
    margin-bottom: 15px;
}

.login-redesign-group label {
    font-size: 13px;
    font-weight: 600;
    color: #1e2438;
    margin-bottom: 7px;
}

.login-redesign-input-wrap {
    position: relative;
}

.login-redesign-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b91a7;
    font-size: 15px;
    pointer-events: none;
}

.login-redesign-input-wrap .form-control {
    padding-left: 38px;
    padding-right: 38px;
}

.login-redesign-group .form-control {
    height: 40px;
    border-radius: 10px;
    border: 1px solid #dde1ec;
    background: #f9fafc;
    font-size: 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-redesign-group .form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

/* Bootstrap-select — border/radius/shadow/background only, never padding/color (clips text) */
.login-redesign .bootstrap-select > .dropdown-toggle {
    height: 40px !important;
    border: 1px solid #dde1ec !important;
    border-radius: 10px !important;
    background: #f9fafc !important;
    box-shadow: none !important;
}

.login-redesign .bootstrap-select.open > .dropdown-toggle,
.login-redesign .bootstrap-select > .dropdown-toggle:focus {
    border-color: #7c3aed !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}

.login-redesign .bootstrap-select .filter-option .fa-globe,
.login-redesign .bootstrap-select .dropdown-menu .fa-globe {
    color: #7c3aed;
    margin-right: 6px;
}

.login-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8b91a7;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
}

.login-pw-toggle:hover,
.login-pw-toggle:focus {
    color: #7c3aed;
}

.login-redesign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 13px 0 0;
}

.login-redesign-checkbox {
    margin: 0;
    display: flex;
    align-items: center;
}

.login-redesign-checkbox input[type="checkbox"] {
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
}

.login-redesign-checkbox label {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    color: #4b5266;
    padding-left: 0;
}

.login-redesign-forgot {
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed;
}

.login-redesign-forgot:hover,
.login-redesign-forgot:focus {
    color: #6d28d9;
    text-decoration: underline;
}

.login-redesign-buttons {
    margin: 16px 0 0;
}

.login-redesign-buttons .btn {
    height: 42px;
    line-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.login-redesign-buttons .btn + .btn {
    margin-top: 8px;
}

.login-redesign .btn-default {
    background: #fff !important;
    border: 1px solid #7c3aed !important;
    color: #7c3aed !important;
    box-shadow: none !important;
}

.login-redesign .btn-default:hover,
.login-redesign .btn-default:focus {
    background: rgba(124,58,237,0.06) !important;
    border-color: #6d28d9 !important;
    color: #6d28d9 !important;
}

@media (max-width: 480px) {
    .login-redesign {
        padding: 32px 12px;
    }

    .login-redesign-title {
        font-size: 26px;
    }

    .login-redesign-card {
        max-width: 100%;
        padding: 22px;
    }
}

/* ── END LOGIN PAGE REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════
   ADMIN LOGIN PAGE REDESIGN — scoped to body.login_admin
   ═══════════════════════════════════════════════════════════════ */

body.login_admin {
    background: #f4f6fd !important;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(124,58,237,0.10) 0%, rgba(124,58,237,0) 45%),
        radial-gradient(circle at 90% 12%, rgba(147,51,234,0.09) 0%, rgba(147,51,234,0) 40%),
        radial-gradient(circle at 88% 92%, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0) 45%) !important;
}

.admin-login-redesign {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 48px 16px;
    overflow: hidden;
}

.admin-login-redesign-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.admin-login-redesign-shapes::before,
.admin-login-redesign-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.admin-login-redesign-shapes::before {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, rgba(99,102,241,0) 70%);
}

.admin-login-redesign-shapes::after {
    width: 260px;
    height: 260px;
    right: -80px;
    top: -40px;
    background: radial-gradient(circle, rgba(147,51,234,0.12) 0%, rgba(147,51,234,0) 70%);
}

.admin-login-redesign .authentication-form-wrapper {
    position: relative;
    z-index: 1;
}

.admin-login-redesign-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 16px;
    box-shadow: 0 20px 40px -12px rgba(30,20,80,0.14), 0 4px 10px rgba(30,20,80,0.06);
    padding: 28px;
    margin: 0 8px;
}

.admin-login-redesign-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
    font-size: 22px;
}

.admin-login-input-wrap {
    position: relative;
}

.admin-login-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b91a7;
    font-size: 15px;
    pointer-events: none;
}

.admin-login-input-wrap .form-control {
    padding-left: 38px;
    padding-right: 38px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #dde1ec;
    background: #f9fafc;
    font-size: 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.admin-login-input-wrap .form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

.admin-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8b91a7;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
}

.admin-pw-toggle:hover,
.admin-pw-toggle:focus {
    color: #7c3aed;
}

.admin-login-forgot {
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed !important;
}

.admin-login-forgot:hover,
.admin-login-forgot:focus {
    color: #6d28d9 !important;
    text-decoration: underline;
}

.admin-login-redesign-checkbox {
    display: flex;
    align-items: center;
    margin: 14px 0 0;
}

.admin-login-redesign-checkbox input[type="checkbox"] {
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
}

.admin-login-redesign-checkbox label {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    color: #4b5266;
    padding-left: 0;
}

@media (max-width: 480px) {
    .admin-login-redesign {
        padding: 32px 12px;
    }

    .admin-login-redesign-card {
        padding: 22px;
        margin: 0;
    }
}

/* ── END ADMIN LOGIN PAGE REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE REDESIGN — scoped to body.register / .register-redesign
   ═══════════════════════════════════════════════════════════════ */

body.register {
    background: #f8f9ff;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(124,58,237,0.09) 0%, rgba(124,58,237,0) 45%),
        radial-gradient(circle at 92% 10%, rgba(147,51,234,0.08) 0%, rgba(147,51,234,0) 40%),
        radial-gradient(circle at 90% 95%, rgba(99,102,241,0.09) 0%, rgba(99,102,241,0) 45%);
}

.register-redesign {
    position: relative;
    padding: 48px 16px 64px;
    overflow: hidden;
}

.register-redesign-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.register-redesign-shapes::before,
.register-redesign-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.register-redesign-shapes::before {
    width: 260px;
    height: 260px;
    left: -70px;
    top: -40px;
    background: radial-gradient(circle, rgba(99,102,241,0.13) 0%, rgba(99,102,241,0) 70%);
}

.register-redesign-shapes::after {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(147,51,234,0.11) 0%, rgba(147,51,234,0) 70%);
}

.register-redesign-heading,
.register-redesign-card {
    position: relative;
    z-index: 1;
}

.register-redesign-heading {
    max-width: 600px;
    margin: 0 auto 26px;
}

.register-redesign-title {
    font-size: 38px;
    font-weight: 700;
    color: #1e2438;
    margin: 0 0 8px;
}

.register-redesign-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 22px;
}

.register-redesign-lang {
    width: 240px;
    margin: 0 auto;
}

.register-redesign-lang .bootstrap-select > .dropdown-toggle {
    height: 44px !important;
    border: 1px solid #dde1ec !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(30,20,80,0.05) !important;
}

.register-redesign-lang .bootstrap-select.open > .dropdown-toggle,
.register-redesign-lang .bootstrap-select > .dropdown-toggle:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}

.register-redesign-card {
    max-width: 1220px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 18px;
    box-shadow: 0 24px 48px -14px rgba(30,20,80,0.14), 0 4px 12px rgba(30,20,80,0.06);
    padding: 50px 48px;
}

.register-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}

.register-redesign-full {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.register-redesign-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.register-redesign-section-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
    font-size: 22px;
}

.register-redesign-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e2438;
    margin: 0;
}

.register-redesign-section-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 2px 0 0;
}

.register-redesign-group {
    margin-bottom: 18px;
}

.register-redesign-group label {
    font-size: 13px;
    font-weight: 600;
    color: #1e2438;
    margin-bottom: 7px;
}

.register-redesign-input-wrap {
    position: relative;
}

.register-redesign-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b91a7;
    font-size: 15px;
    pointer-events: none;
}

.register-redesign-input-wrap .form-control {
    padding-left: 38px;
}

.register-password-group .form-control,
.register-password-repeat-group .form-control {
    padding-right: 38px;
}

.register-redesign-card .form-control {
    height: 44px;
    border-radius: 9px;
    border: 1px solid #dfe4f0;
    background: #f9fafc;
    font-size: 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.register-redesign-card .form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

/* Bootstrap-select — border/radius/shadow/background only, never padding/color (clips text) */
.register-redesign-card .bootstrap-select > .dropdown-toggle {
    height: 44px !important;
    border: 1px solid #dfe4f0 !important;
    border-radius: 9px !important;
    background: #f9fafc !important;
    box-shadow: none !important;
}

.register-redesign-card .bootstrap-select.open > .dropdown-toggle,
.register-redesign-card .bootstrap-select > .dropdown-toggle:focus {
    border-color: #7c3aed !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}

.register-redesign-card .bootstrap-select .filter-option .fa-flag,
.register-redesign-lang .bootstrap-select .filter-option .fa-globe {
    color: #7c3aed;
    margin-right: 6px;
}

.register-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8b91a7;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
}

.register-pw-toggle:hover,
.register-pw-toggle:focus {
    color: #7c3aed;
}

.register-redesign-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.register-redesign-checkbox input[type="checkbox"] {
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
}

.register-redesign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 28px;
    border-top: 1px solid rgba(15,23,42,0.08);
}

.register-redesign-footer-login {
    font-size: 14px;
    color: #6b7280;
}

.register-redesign-footer-login a {
    color: #7c3aed;
    font-weight: 600;
    margin-left: 4px;
}

.register-redesign-footer-login a:hover,
.register-redesign-footer-login a:focus {
    color: #6d28d9;
    text-decoration: underline;
}

.register-redesign-submit {
    height: 44px;
    line-height: 42px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 20px -8px rgba(124,58,237,0.45);
}

.register-redesign-submit i {
    margin-left: 8px;
}

@media (max-width: 991px) {
    .register-redesign-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .register-redesign-card {
        padding: 36px 28px;
    }
}

@media (max-width: 640px) {
    .register-redesign-subgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .register-redesign {
        padding: 32px 12px 48px;
    }

    .register-redesign-title {
        font-size: 26px;
    }

    .register-redesign-lang {
        width: 100%;
    }

    .register-redesign-card {
        padding: 24px 18px;
    }

    .register-redesign-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .register-redesign-submit {
        width: 100%;
    }
}

/* ── END REGISTER PAGE REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════
   ADMIN FORGOT PASSWORD PAGE REDESIGN — scoped to body.authentication.forgot-password
   ═══════════════════════════════════════════════════════════════ */

body.authentication.forgot-password,
body.customers_forgot_password {
    background: #f7f8fd;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(124,58,237,0.09) 0%, rgba(124,58,237,0) 45%),
        radial-gradient(circle at 92% 10%, rgba(147,51,234,0.08) 0%, rgba(147,51,234,0) 40%),
        radial-gradient(circle at 90% 90%, rgba(99,102,241,0.09) 0%, rgba(99,102,241,0) 45%);
    min-height: 100vh;
}

.fp-redesign {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 16px 64px;
    overflow: hidden;
}

.fp-redesign-shapes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.fp-redesign-shapes::before,
.fp-redesign-shapes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.fp-redesign-shapes::before {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(99,102,241,0.13) 0%, rgba(99,102,241,0) 70%);
}

.fp-redesign-shapes::after {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -80px;
    background: radial-gradient(circle, rgba(147,51,234,0.11) 0%, rgba(147,51,234,0) 70%);
}

.fp-redesign-dots {
    position: fixed;
    right: 6%;
    bottom: 8%;
    width: 130px;
    height: 90px;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(124,58,237,0.22) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

.company-logo,
.fp-redesign-heading,
.fp-redesign-card,
.fp-redesign-back {
    position: relative;
    z-index: 1;
}

.fp-redesign-heading {
    max-width: 560px;
    margin: 0 auto 36px;
}

.fp-redesign-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #1e2438;
    margin: 0 0 14px;
}

.fp-redesign-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.fp-redesign-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 26px;
    box-shadow: 0 24px 48px -16px rgba(30,20,80,0.14), 0 6px 14px rgba(30,20,80,0.06);
    padding: 56px;
}

.fp-redesign-icon {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124,58,237,0.10);
    color: #7c3aed;
    font-size: 30px;
}

.fp-redesign-icon-lock {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
}

.fp-redesign-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(124,58,237,0.35);
}

.fp-redesign-spark-1 {
    top: 2px;
    left: -6px;
}

.fp-redesign-spark-2 {
    top: 14px;
    right: -12px;
    width: 4px;
    height: 4px;
}

.fp-redesign-spark-3 {
    bottom: 10px;
    left: -14px;
    width: 3px;
    height: 3px;
}

.fp-redesign-group {
    margin-bottom: 28px;
}

.fp-redesign-group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e2438;
    margin-bottom: 10px;
}

.fp-redesign-input-wrap {
    position: relative;
}

.fp-redesign-input-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #7c3aed;
    font-size: 17px;
    pointer-events: none;
}

.fp-redesign-input-wrap .form-control {
    height: 66px;
    padding-left: 54px;
    padding-right: 20px;
    border-radius: 13px;
    border: 1px solid #dde1f2;
    background: #f9fafc;
    font-size: 16px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fp-redesign-input-wrap .form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.14);
}

.fp-redesign-submit.btn.btn-primary {
    height: 66px;
    line-height: 66px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 15px;
    font-size: 17px;
    font-weight: 700;
    background-image: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    box-shadow: 0 12px 24px -8px rgba(124,58,237,0.45);
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.fp-redesign-submit.btn.btn-primary:hover,
.fp-redesign-submit.btn.btn-primary:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -8px rgba(124,58,237,0.5);
}

.fp-redesign-submit.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 16px -8px rgba(124,58,237,0.4);
}

.fp-redesign-submit .fa-arrow-right {
    margin-left: 10px;
}

.fp-redesign-back {
    text-align: center;
    margin-top: 32px;
}

.fp-redesign-back a {
    font-size: 16px;
    font-weight: 600;
    color: #7c3aed;
    transition: color 0.15s ease;
}

.fp-redesign-back a:hover,
.fp-redesign-back a:focus {
    color: #6d28d9;
    text-decoration: underline;
}

.fp-redesign-back .fa-arrow-left {
    margin-right: 6px;
}

@media (max-width: 991px) {
    .fp-redesign {
        max-width: 90%;
        padding: 44px 16px 56px;
    }

    .fp-redesign-title {
        font-size: 40px;
    }

    .fp-redesign-card {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .fp-redesign {
        max-width: calc(100% - 32px);
        padding: 32px 0 48px;
    }

    .fp-redesign-title {
        font-size: 32px;
    }

    .fp-redesign-subtitle {
        font-size: 16px;
    }

    .fp-redesign-card {
        padding: 24px;
        border-radius: 20px;
    }

    .fp-redesign-icon {
        width: 68px;
        height: 68px;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .fp-redesign-input-wrap .form-control,
    .fp-redesign-submit.btn.btn-primary {
        height: 58px;
        line-height: 58px;
    }
}

/* ── END ADMIN FORGOT PASSWORD PAGE REDESIGN ── */