/**
 * Login submit — fixes .btn-primary hover: theme used white text on #e8f2d9 (near-white).
 * Scoped to .uc-login-submit-btn only.
 */
.btn.btn-primary.uc-login-submit-btn:hover,
.btn.btn-primary.uc-login-submit-btn:focus-visible {
  --falcon-btn-hover-color: #ffffff;
  --falcon-btn-hover-bg: #356d31;
  --falcon-btn-hover-border-color: #356d31;
  color: #ffffff;
  background-color: #356d31;
  border-color: #356d31;
}

.btn.btn-primary.uc-login-submit-btn:active,
.btn.btn-primary.uc-login-submit-btn.active {
  --falcon-btn-active-color: #ffffff;
  --falcon-btn-active-bg: #2d5c29;
  --falcon-btn-active-border-color: #2d5c29;
  color: #ffffff;
  background-color: #2d5c29;
  border-color: #2d5c29;
}
/**
 * sidbar custom css
 */
.navbar-vertical.navbar-vibrant.custmize-sidebar .navbar-nav .nav-item .nav-link{
  letter-spacing: 0.05px;
}

/* =============================================================================
   UDHARICROP — Shared brand tokens (scoped via parent classes only; no globals)
   ============================================================================= */
:root {
  --uc-green: #42833e;
  --uc-green-deep: #14532d;
  --uc-green-hover: #356d31;
  --uc-green-soft: rgba(66, 131, 62, 0.12);
  --uc-green-ring: rgba(66, 131, 62, 0.35);
}

/* =============================================================================
   TOP NAVBAR — Search box (/dashboard & other pages using navbar)
   Class: .uc-navbar-search on Falcon .search-box wrapper (JS untouched).
   ============================================================================= */
.navbar-top .search-box.uc-navbar-search form {
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(20, 83, 45, 0.06), 0 4px 14px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.navbar-top .search-box.uc-navbar-search .search-input.form-control {
  min-height: 2.35rem;
  padding-left: 2.5rem;
  padding-right: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(20, 83, 45, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f6faf6 100%);
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.navbar-top .search-box.uc-navbar-search .search-input.form-control:hover {
  border-color: rgba(66, 131, 62, 0.35);
  background: #ffffff;
}

.navbar-top .search-box.uc-navbar-search .search-input.form-control:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  background: #ffffff;
  outline: none;
}

.navbar-top .search-box.uc-navbar-search .search-box-icon {
  color: var(--uc-green);
  opacity: 0.9;
}

/* =============================================================================
   DASHBOARD — CRM client filter toolbar (/dashboard welcome strip)
   Classes: .uc-dash-toolbar, .uc-dash-toolbar__select
   ============================================================================= */
.uc-dash-toolbar__select.form-select {
  min-width: 220px;
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background:
    linear-gradient(180deg, #ffffff 0%, #f3faf3 100%);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.uc-dash-toolbar__select.form-select:hover {
  border-color: rgba(66, 131, 62, 0.45);
  background: #ffffff;
}

.uc-dash-toolbar__select.form-select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

/* =============================================================================
   SHARED LISTING PAGE — wrapper (/customer and future CRUD tables)
   Classes: .uc-resource-page, .uc-resource-card, .uc-datatable-wrap
   ============================================================================= */
.uc-resource-page__inner {
  padding-bottom: 2rem;
}

.uc-resource-page .card.uc-resource-card.border-0 {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.08);
}

.uc-resource-card__header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.uc-resource-page .uc-resource-card__header h4.uc-resource-card__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.uc-resource-card__title i {
  opacity: 0.95;
}

.uc-resource-page .uc-resource-card__header a.btn.btn-sm.uc-resource-card__cta {
  border-radius: 999px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease,
    box-shadow 0.2s ease;
  letter-spacing: 0.08px;
}

.uc-resource-page .uc-resource-card__header a.btn.btn-sm.uc-resource-card__cta:hover,
.uc-resource-page .uc-resource-card__header a.btn.btn-sm.uc-resource-card__cta:focus-visible {
  background: #ffffff;
  color: var(--uc-green-deep);
  border-color: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15);
}

.uc-resource-page .uc-resource-card__header a.btn.btn-sm.uc-resource-card__cta:active {
  background: #ecf8ec;
  color: var(--uc-green-deep);
  transform: translateY(1px);
}

.uc-resource-card__body {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
}

/* =============================================================================
   SHARED DATA TABLE — reusable class for theme-aligned tables
   Apply: table.uc-table-common (+ optional .uc-datatable-wrap parent for DT)
   ============================================================================= */
.uc-datatable-wrap {
  border-radius: 0.65rem;
  overflow: visible;
}

.uc-table-common {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

.uc-table-common__head {
  background: transparent;
}

.uc-table-common thead.uc-table-common__head th {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  border: none;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 48%, #3d7d39 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.uc-table-common tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

.uc-table-common tbody tr {
  transition: background-color 0.18s ease;
}

.table.table-hover.uc-table-common > tbody > tr:hover > td,
.table.table-hover.uc-table-common > tbody > tr:hover > th {
  background-color: var(--uc-green-soft);
}

.uc-table-common tbody tr:nth-child(even) {
  background-color: rgba(246, 250, 246, 0.65);
}

.table.table-hover.uc-table-common > tbody > tr:nth-child(even):hover > td,
.table.table-hover.uc-table-common > tbody > tr:nth-child(even):hover > th {
  background-color: rgba(66, 131, 62, 0.14);
}

/* =============================================================================
   DataTables controls inside .uc-datatable-wrap (customer list / future pages)
   ============================================================================= */
.uc-datatable-wrap .dataTables_wrapper .dataTables_length label,
.uc-datatable-wrap .dataTables_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_length select:hover {
  border-color: rgba(66, 131, 62, 0.4);
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input[type="search"],
.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 200px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input[type="search"]:hover,
.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input.form-control:hover {
  border-color: rgba(66, 131, 62, 0.38);
  background: #ffffff;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input[type="search"]:focus,
.uc-datatable-wrap .dataTables_wrapper .dataTables_filter input.form-control:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

.uc-datatable-wrap .dataTables_wrapper .dataTables_info {
  font-size: 0.8rem;
  color: #64748b;
  padding-top: 0.75rem;
}

.uc-datatable-wrap .dataTables_wrapper .pagination {
  gap: 0.25rem;
  flex-wrap: wrap;
}

.uc-datatable-wrap .dataTables_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.uc-datatable-wrap .dataTables_wrapper ul.pagination .page-link:hover {
  background: var(--uc-green-soft);
  border-color: rgba(66, 131, 62, 0.28);
  color: var(--uc-green-hover);
}

.uc-datatable-wrap .dataTables_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.22);
}

.uc-datatable-wrap .dataTables_wrapper .page-item.disabled .page-link {
  opacity: 0.45;
}

.uc-datatable-wrap .dataTables_wrapper .row:last-child {
  margin-top: 0.5rem;
  align-items: center;
}

/* =============================================================================
   /client — Client list ONLY (http://127.0.0.1:8000/client)
   -----------------------------------------------------------------------------
   Files:
   - resources/views/Customer/index.blade.php → wrapper class .uc-client-index-page
   - app/Services/CustomerService.php → datatable HTML adds .uc-client-list-name-link on name <a>
   CSS only here (no global overrides). Other listing pages unchanged.
   -----------------------------------------------------------------------------
   (1) Client name: dark grey rgb(44 46 44) instead of default link blue.
   (2) ⋮ Action dropdown clipped when few rows / after search — caused by
       .uc-resource-card { overflow:hidden } + table.uc-table-common { overflow:hidden }
       + .table-responsive scrollport. Scoped overflow visible + bottom breathing room.
   ============================================================================= */

.uc-client-index-page #customer-table a.uc-client-list-name-link,
.uc-client-index-page #customer-table a.uc-client-list-name-link:visited {
  color: rgb(44, 46, 44) !important;
}

.uc-client-index-page #customer-table a.uc-client-list-name-link b {
  color: inherit !important;
  font-weight: 700;
}

.uc-client-index-page #customer-table a.uc-client-list-name-link:hover,
.uc-client-index-page #customer-table a.uc-client-list-name-link:focus {
  color: rgb(32, 34, 32) !important;
}

/* Allow dropdown to escape overflow:hidden from shared card + rounded table */
.uc-client-index-page .uc-resource-card {
  overflow: visible !important;
}

.uc-client-index-page #customer-table.table.uc-table-common {
  overflow: visible !important;
}

.uc-client-index-page .dataTables_wrapper {
  overflow: visible !important;
}

/* Keep horizontal scroll; add space below grid so menu is not cut when tbody is short */
.uc-client-index-page .uc-datatable-wrap.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 4rem;
  min-height: 12.5rem;
}

.uc-client-index-page .uc-datatable-wrap .dropdown-menu {
  z-index: 1060;
}

.uc-client-index-page #customer-table tbody td:last-child {
  overflow: visible !important;
}

/* =============================================================================
   /staff — Staff list ONLY (http://127.0.0.1:8000/staff)
   -----------------------------------------------------------------------------
   Files:
   - resources/views/Staff/index.blade.php → wrapper .uc-staff-index-page (outer container-fluid)
   - app/Services/StaffService.php → datatable maps name to <span class="uc-staff-list-name">…</span>
   Scoped: does not affect staff modals (they render outside .uc-staff-index-page).
   -----------------------------------------------------------------------------
   (1) Name column: rgb(44 46 44) (same as /client list).
   (2) ⋮ dropdown clipped with few rows / filtered — .table-responsive + short tbody;
       card overflow visible + padding/min-height under table area + DT wrapper visible.
   ============================================================================= */

.uc-staff-index-page #staff-table .uc-staff-list-name {
  color: rgb(44, 46, 44) !important;
  font-weight: 600;
}

.uc-staff-index-page .card.shadow-sm.border-0 {
  overflow: visible !important;
}

.uc-staff-index-page #staff-table.table {
  overflow: visible !important;
}

.uc-staff-index-page .dataTables_wrapper {
  overflow: visible !important;
}

.uc-staff-index-page .table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 4.5rem;
  min-height: 12.5rem;
}

.uc-staff-index-page .table-responsive .dropdown-menu {
  z-index: 1060;
}

.uc-staff-index-page #staff-table tbody td:last-child {
  overflow: visible !important;
}

/* =============================================================================
   /customer — SubCustomer list (Customer List)
   Scope: .uc-subcustomer-page (does not affect /client list page)
   ============================================================================= */

/* Filters row — labels & selects aligned with green theme */
.uc-subcustomer-page .uc-filter-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-green-deep);
}

.uc-subcustomer-page .uc-filter-select.form-select {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.2);
  background: linear-gradient(180deg, #ffffff 0%, #f5faf5 100%);
  font-weight: 600;
  font-size: 0.8125rem;
  color: #1e293b;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uc-subcustomer-page .uc-filter-select.form-select:hover {
  border-color: rgba(66, 131, 62, 0.42);
  background: #ffffff;
}

.uc-subcustomer-page .uc-filter-select.form-select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

/* Reset filters — light surface, normal weight (not heavy / dark navy) */
.uc-subcustomer-page button.btn.btn-sm.uc-reset-filters-btn {
  border-radius: 0.55rem;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #475569;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(100, 116, 139, 0.38);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.15s ease;
}

.uc-subcustomer-page button.btn.btn-sm.uc-reset-filters-btn:hover,
.uc-subcustomer-page button.btn.btn-sm.uc-reset-filters-btn:focus-visible {
  color: var(--uc-green-deep);
  background: #ffffff;
  border-color: rgba(66, 131, 62, 0.42);
  box-shadow: 0 2px 10px rgba(20, 83, 45, 0.1);
}

.uc-subcustomer-page button.btn.btn-sm.uc-reset-filters-btn:active {
  transform: translateY(1px);
}

/* DataTables top row — spacing so search/filter does not touch top edge */
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row.d-flex {
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.35rem;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row.d-flex .dataTables_filter {
  margin-left: auto;
  margin-bottom: 0;
  padding-top: 0.2rem;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row.d-flex .dt-buttons {
  margin-bottom: 0;
}

/* Equal height: Select All, Deselect All, Export CSV */
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .dt-buttons .btn.uc-dt-export-csv-btn,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .dt-buttons .dt-button.uc-dt-export-csv-btn {
  min-height: 2.375rem;
  height: 2.375rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.95rem;
  padding-right: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn {
  border-radius: 0.5rem;
  font-weight: 600;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--solid {
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 4px 12px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--solid:hover,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--solid:focus-visible {
  filter: brightness(1.05);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.24);
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--outline {
  border: 1px solid rgba(66, 131, 62, 0.42);
  color: var(--uc-green-deep);
  background: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--outline:hover,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row button.uc-bulk-action-btn--outline:focus-visible {
  background: rgba(66, 131, 62, 0.08);
  border-color: var(--uc-green);
  color: var(--uc-green-hover);
}

.uc-subcustomer-page .uc-subcustomer-bulk-actions .uc-bulk-delete-btn,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .uc-bulk-delete-btn {
  border-radius: 0.5rem;
  font-weight: 600;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
}

/* Export CSV (DataTables Buttons) — same toolbar height as bulk buttons */
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .dt-buttons .btn.uc-dt-export-csv-btn {
  border-radius: 0.5rem;
  font-weight: 600;
  border: 1px solid rgba(66, 131, 62, 0.38);
  color: var(--uc-green-deep);
  background: linear-gradient(180deg, #f7fbf7 0%, #ecf6ec 100%);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .dt-buttons .btn.uc-dt-export-csv-btn:hover,
.uc-subcustomer-datatable #customer-table_wrapper > div.uc-subcustomer-dt-top-row .dt-buttons .btn.uc-dt-export-csv-btn:focus-visible {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.2);
}

/* Wider search on this screen (placeholder set in JS) */
.uc-subcustomer-datatable .dataTables_filter input[type="search"],
.uc-subcustomer-datatable .dataTables_filter input.form-control {
  min-width: 260px;
}

/* Selected rows (bulk selection uses Bootstrap .table-active) */
.uc-subcustomer-page table.table.uc-table-common.table-hover > tbody > tr.table-active > td,
.uc-subcustomer-page table.table.uc-table-common.table-hover > tbody > tr.table-active:hover > td {
  background-color: rgba(66, 131, 62, 0.18);
}

.uc-subcustomer-page table.table.uc-table-common > tbody > tr.table-active > td:first-child {
  box-shadow: inset 3px 0 0 var(--uc-green);
}

/* Lighter table header on /customer only (no heavy green gradient on columns) */
.uc-subcustomer-page table.table.uc-table-common thead.uc-table-common__head th {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  box-shadow: none;
}

.uc-subcustomer-page table.table.uc-table-common thead.uc-table-common__head th.sorting,
.uc-subcustomer-page table.table.uc-table-common thead.uc-table-common__head th.sorting_asc,
.uc-subcustomer-page table.table.uc-table-common thead.uc-table-common__head th.sorting_desc {
  color: #1e293b;
}

/* Category badges (rendered from server / DataTables) */
.uc-subcustomer-page .category-badge {
  display: inline-block;
  padding: 0.32em 0.65em;
  border-radius: 0.35rem;
  color: #fff;
  font-size: 0.8125em;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.uc-subcustomer-page .category-badge.category-class_a {
  background: linear-gradient(135deg, #2f7d35 0%, #5fc477 100%);
}

.uc-subcustomer-page .category-badge.category-class_b {
  background: linear-gradient(135deg, #b8860b 0%, #e6d554 100%);
  color: #1e293b;
}

.uc-subcustomer-page .category-badge.category-class_c {
  background: linear-gradient(135deg, #d39e00 0%, #ffc107 100%);
  color: #1e293b;
}

.uc-subcustomer-page .category-badge.category-class_d {
  background: linear-gradient(135deg, #c62828 0%, #e06975 100%);
}

/* Table horizontal scroll shell */
.uc-subcustomer-page .uc-subcustomer-table-responsive {
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.08);
  background: #fff;
}

/* /customer — wider columns & single-line headers (scoped #customer-table only) */
.uc-subcustomer-page #customer-table thead.uc-table-common__head th {
  white-space: nowrap;
}

.uc-subcustomer-page #customer-table thead th:nth-child(1),
.uc-subcustomer-page #customer-table tbody td:nth-child(1) {
  width: 2.75rem;
  min-width: 2.75rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(2),
.uc-subcustomer-page #customer-table tbody td:nth-child(2) {
  min-width: 12.5rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(3),
.uc-subcustomer-page #customer-table tbody td:nth-child(3) {
  min-width: 15rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(4),
.uc-subcustomer-page #customer-table tbody td:nth-child(4) {
  min-width: 7rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(5),
.uc-subcustomer-page #customer-table tbody td:nth-child(5) {
  min-width: 13rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(6),
.uc-subcustomer-page #customer-table tbody td:nth-child(6) {
  min-width: 10rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(13),
.uc-subcustomer-page #customer-table tbody td:nth-child(13) {
  min-width: 10.5rem;
}

.uc-subcustomer-page #customer-table thead th:nth-child(14),
.uc-subcustomer-page #customer-table tbody td:nth-child(14) {
  min-width: 9rem;
}

.uc-subcustomer-page #customer-table tbody td:nth-child(2),
.uc-subcustomer-page #customer-table tbody td:nth-child(3) {
  white-space: nowrap;
}

/* Header checkbox on light thead */
.uc-subcustomer-page table.table.uc-table-common thead.uc-table-common__head input[type="checkbox"] {
  accent-color: var(--uc-green);
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   /staff — Staff list page styling (similar feel to /customer)
   Only CSS changes. Fully scoped by unique attributes/IDs on staff page.
   ============================================================================= */

/* Staff page header strip — make it like /customer green gradient */
.card:has(> .card-header a[data-bs-target="#todoModal"]) > .card-header,
.card:has(> .card-header a[data-bs-target="#todoViewModal"]) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(> .card-header a[data-bs-target="#todoModal"]) > .card-header h4,
.card:has(> .card-header a[data-bs-target="#todoViewModal"]) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.card:has(> .card-header a[data-bs-target="#todoModal"]) > .card-header h4 i,
.card:has(> .card-header a[data-bs-target="#todoViewModal"]) > .card-header h4 i {
  opacity: 0.95;
}

/* Top header actions (Create/View TO DO, Add Staff) — scoped by staff modals */
.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoModal"],
.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoViewModal"],
.card-header a.btn.btn-sm.btn-falcon-primary[href*="/staff/create"] {
  border-radius: 999px;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 500;
  letter-spacing: 0.08px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoModal"]:hover,
.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoModal"]:focus-visible,
.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoViewModal"]:hover,
.card-header a.btn.btn-sm.btn-falcon-primary[data-bs-target="#todoViewModal"]:focus-visible,
.card-header a.btn.btn-sm.btn-falcon-primary[href*="/staff/create"]:hover,
.card-header a.btn.btn-sm.btn-falcon-primary[href*="/staff/create"]:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   Staff DataTables — list + todo tables
   Targets: #staff-table, #staff-todo-table and their wrappers only
   ============================================================================= */

/* Table container look */
#staff-table,
#staff-todo-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

/* Light header like /customer */
#staff-table thead th,
#staff-todo-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

/* Cells */
#staff-table tbody td,
#staff-todo-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

/* Hover rows */
table.table.table-hover#staff-table > tbody > tr:hover > td,
table.table.table-hover#staff-todo-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

/* DataTables: spacing so search doesn't touch edges */
#staff-table_wrapper > .row:first-child,
#staff-todo-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}

#staff-table_wrapper .dataTables_filter,
#staff-todo-table_wrapper .dataTables_filter {
  margin-bottom: 0;
}

/* Controls: labels */
#staff-table_wrapper .dataTables_length label,
#staff-table_wrapper .dataTables_filter label,
#staff-todo-table_wrapper .dataTables_length label,
#staff-todo-table_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}
#staff-table_wrapper .dataTables_length label,
#staff-todo-table_wrapper .dataTables_length label,
.uc-datatable-wrap .dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Controls: length select */
#staff-table_wrapper .dataTables_length select,
#staff-todo-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#staff-table_wrapper .dataTables_length select:focus,
#staff-todo-table_wrapper .dataTables_length select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

/* Controls: search input */
#staff-table_wrapper .dataTables_filter input[type="search"],
#staff-table_wrapper .dataTables_filter input.form-control,
#staff-todo-table_wrapper .dataTables_filter input[type="search"],
#staff-todo-table_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 240px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#staff-table_wrapper .dataTables_filter input[type="search"]:focus,
#staff-table_wrapper .dataTables_filter input.form-control:focus,
#staff-todo-table_wrapper .dataTables_filter input[type="search"]:focus,
#staff-todo-table_wrapper .dataTables_filter input.form-control:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

/* Pagination */
#staff-table_wrapper ul.pagination .page-link,
#staff-todo-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#staff-table_wrapper ul.pagination .page-link:hover,
#staff-todo-table_wrapper ul.pagination .page-link:hover {
  background: var(--uc-green-soft);
  border-color: rgba(66, 131, 62, 0.28);
  color: var(--uc-green-hover);
}

#staff-table_wrapper ul.pagination .page-item.active .page-link,
#staff-todo-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* Wider key columns to avoid wrapping */
#staff-table thead th:nth-child(3),
#staff-table tbody td:nth-child(3) {
  min-width: 12rem; /* Name */
  white-space: nowrap;
}

#staff-table thead th:nth-child(4),
#staff-table tbody td:nth-child(4) {
  min-width: 14rem; /* Email */
  white-space: nowrap;
}

#staff-table thead th:nth-child(6),
#staff-table tbody td:nth-child(6) {
  min-width: 10rem; /* Username */
  white-space: nowrap;
}

/* =============================================================================
   /industry — Industry list page styling (similar feel to /customer)
   Only CSS changes. Scoped to unique IDs: #btn-add-industry, #btn-import-csv, #industry-table
   ============================================================================= */

/* Header strip (green gradient) — applies only when those buttons exist in header */
.card:has(> .card-header #btn-add-industry) > .card-header,
.card:has(> .card-header #btn-import-csv) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(> .card-header #btn-add-industry) > .card-header h4,
.card:has(> .card-header #btn-import-csv) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

/* Header buttons: Add Industry / Import CSV */
.card-header #btn-add-industry.btn,
.card-header #btn-import-csv.btn {
  border-radius: 999px;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 500;
  letter-spacing: 0.08px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-header #btn-add-industry.btn:hover,
.card-header #btn-add-industry.btn:focus-visible,
.card-header #btn-import-csv.btn:hover,
.card-header #btn-import-csv.btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

/* Industry DataTable (table + controls) */
#industry-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

#industry-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

#industry-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

table.table.table-hover#industry-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

#industry-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}

#industry-table_wrapper .dataTables_filter,
#industry-table_wrapper .dataTables_length {
  margin-bottom: 0;
}

#industry-table_wrapper .dataTables_length label,
#industry-table_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

#industry-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

#industry-table_wrapper .dataTables_filter input[type="search"],
#industry-table_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 220px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

#industry-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
}

#industry-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   /agency — Agency list page styling (similar feel to /customer)
   Only CSS changes. Scoped to unique IDs: #btn-add-agency, #btn-import-agency, #agency-table
   ============================================================================= */

.card:has(> .card-header #btn-add-agency) > .card-header,
.card:has(> .card-header #btn-import-agency) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(> .card-header #btn-add-agency) > .card-header h4,
.card:has(> .card-header #btn-import-agency) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.card-header #btn-add-agency.btn,
.card-header #btn-import-agency.btn {
  border-radius: 999px;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 500;
  letter-spacing: 0.08px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-header #btn-add-agency.btn:hover,
.card-header #btn-add-agency.btn:focus-visible,
.card-header #btn-import-agency.btn:hover,
.card-header #btn-import-agency.btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

#agency-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

#agency-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

#agency-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

table.table.table-hover#agency-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

#agency-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}

#agency-table_wrapper .dataTables_filter,
#agency-table_wrapper .dataTables_length {
  margin-bottom: 0;
}

#agency-table_wrapper .dataTables_length label,
#agency-table_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

#agency-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

#agency-table_wrapper .dataTables_filter input[type="search"],
#agency-table_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 240px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

#agency-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
}

#agency-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* -----------------------------------------------------------------------------
   Export CSV buttons — make same as /customer (scoped by table wrappers only)
   Applies to: /industry, /agency (DataTables Buttons uses className: btn btn-sm btn-info)
   ----------------------------------------------------------------------------- */

#industry-table_wrapper .dt-buttons .btn.btn-sm.btn-info,
#industry-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info,
#agency-table_wrapper .dt-buttons .btn.btn-sm.btn-info,
#agency-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info {
  border-radius: 0.5rem;
  font-weight: 600;
  border: 1px solid rgba(66, 131, 62, 0.38);
  color: var(--uc-green-deep);
  background: linear-gradient(180deg, #f7fbf7 0%, #ecf6ec 100%);
  min-height: 2.375rem;
  height: 2.375rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.95rem;
  padding-right: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#industry-table_wrapper .dt-buttons .btn.btn-sm.btn-info:hover,
#industry-table_wrapper .dt-buttons .btn.btn-sm.btn-info:focus-visible,
#industry-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info:hover,
#industry-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info:focus-visible,
#agency-table_wrapper .dt-buttons .btn.btn-sm.btn-info:hover,
#agency-table_wrapper .dt-buttons .btn.btn-sm.btn-info:focus-visible,
#agency-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info:hover,
#agency-table_wrapper .dt-buttons .dt-button.btn.btn-sm.btn-info:focus-visible {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.2);
}

/* =============================================================================
   /activity-log — Activity Logs page styling (similar feel to /customer)
   Only CSS changes. Scoped to unique ID: #activity-log-table and wrapper.
   ============================================================================= */

/* Header strip (green gradient) — only for the card that contains activity table */
.card:has(#activity-log-table) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(#activity-log-table) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.card:has(#activity-log-table) > .card-header h4 i {
  opacity: 0.95;
}

/* Table shell */
#activity-log-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

/* Light header (override thead bg-light) */
#activity-log-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
  text-align: left;
}

/* Cells */
#activity-log-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

/* Hover */
table.table.table-hover#activity-log-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

/* DataTables controls */
#activity-log-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}

#activity-log-table_wrapper .dataTables_filter,
#activity-log-table_wrapper .dataTables_length {
  margin-bottom: 0;
}

#activity-log-table_wrapper .dataTables_length label,
#activity-log-table_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

#activity-log-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

#activity-log-table_wrapper .dataTables_filter input[type="search"],
#activity-log-table_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 240px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

/* Pagination */
#activity-log-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
}

#activity-log-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   /customer/import — Import Customers page styling (similar feel to /customer list)
   Only CSS changes. Scoped via unique form id: #customer-import-form
   Note: This section does NOT require any markup changes.
   ============================================================================= */

/* Card header strip (green gradient) */
.card:has(#customer-import-form) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(#customer-import-form) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.card:has(#customer-import-form) > .card-header h4 i {
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05em;
}

/* Force header icon white even if it has .text-success */
.card:has(#customer-import-form) > .card-header h4 i.text-success,
.card:has(#customer-import-form) > .card-header h4 i.text-primary,
.card:has(#customer-import-form) > .card-header h4 i.text-muted {
  color: #ffffff;
}

/* "Download Sample" button — glass pill like customer header buttons */
.card:has(#customer-import-form) > .card-header a.btn.btn-outline-primary.btn-sm {
  border-radius: 999px;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 500;
  letter-spacing: 0.08px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:has(#customer-import-form) > .card-header a.btn.btn-outline-primary.btn-sm:hover,
.card:has(#customer-import-form) > .card-header a.btn.btn-outline-primary.btn-sm:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
  text-decoration: none;
}

/* Body surface */
.card:has(#customer-import-form) > .card-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
}

/* Form fields — aligned with theme */
#customer-import-form .form-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-green-deep);
}

#customer-import-form .form-select,
#customer-import-form .form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#customer-import-form .form-select:hover,
#customer-import-form .form-control:hover {
  border-color: rgba(66, 131, 62, 0.38);
  background: #ffffff;
}

#customer-import-form .form-select:focus,
#customer-import-form .form-control:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

/* File input group — make the right addon on-brand */
#customer-import-form .input-group {
  align-items: stretch;
}

#customer-import-form .input-group .input-group-text {
  border-radius: 0 0.55rem 0.55rem 0;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  min-width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  
}

#customer-import-form .input-group .input-group-text i {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
}

#customer-import-form .input-group .form-control[type="file"] {
  border-radius: 0.55rem 0 0 0.55rem;
  min-height: 2.5rem;
  height: 2.5rem;
  /* line-height: 2.5rem; */
}

/* File input — keep it clean (avoid broken native look) */
#customer-import-form input[type="file"].form-control {
  background: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
}

#customer-import-form input[type="file"].form-control::file-selector-button {
  border: 0;
  border-right: 1px solid rgba(20, 83, 45, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  color: var(--uc-green-deep);
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  margin: 0 0.75rem 0 0; /* gap before "No file chosen" */
  cursor: pointer;
}

#customer-import-form input[type="file"].form-control:hover::file-selector-button {
  background: #ffffff;
}

#customer-import-form .input-group:focus-within .input-group-text {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
}

/* Info alert — softer */
#customer-import-form .alert.alert-info {
  background: rgba(66, 131, 62, 0.08);
  color: #0f172a;
  border: 1px solid rgba(66, 131, 62, 0.18);
  border-radius: 0.65rem;
}

/* Submit button — same height + brand gradient */
#customer-import-form button.btn.btn-success[type="submit"] {
  border-radius: 0.6rem;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#customer-import-form button.btn.btn-success[type="submit"]:hover,
#customer-import-form button.btn.btn-success[type="submit"]:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(20, 83, 45, 0.22);
}

#customer-import-form button.btn.btn-success[type="submit"]:active {
  transform: translateY(1px);
}

/* =============================================================================
   /customer/create — Create Customer page styling (similar feel to /customer list)
   Only CSS changes. Scoped via unique form id: #customer-create-form
   ============================================================================= */

/* Form section cards */
#customer-create-form .card.mb-3 {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  padding: 0;
}

/* Card headers — green gradient strip */
#customer-create-form .card.mb-3 > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

#customer-create-form .card.mb-3 > .card-header h5,
#customer-create-form .card.mb-3 > .card-header h6 {
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .5px;

}

/* Card body surface */
#customer-create-form .card.mb-3 > .card-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
}

/* Labels */
#customer-create-form .form-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-green-deep);
}

/* Inputs / selects */
#customer-create-form .form-control,
#customer-create-form .form-select {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#customer-create-form .form-control:hover,
#customer-create-form .form-select:hover {
  border-color: rgba(66, 131, 62, 0.38);
  background: #ffffff;
}

#customer-create-form .form-control:focus,
#customer-create-form .form-select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

/* Contact persons block: add/remove buttons */
#customer-create-form #contact-person-list .btn.btn-danger.btn-sm,
#customer-create-form #contact-person-list .btn.btn-secondary.btn-sm {
  border-radius: 0.55rem;
  font-weight: 600;
  min-height: 2.25rem;
  height: 2.25rem;
}

#customer-create-form .btn.btn-sm.btn-secondary[onclick*="addContactPerson"] {
  border-radius: 0.6rem;
  font-weight: 600;
  border: 1px solid rgba(66, 131, 62, 0.28);
  background: rgba(66, 131, 62, 0.08);
  color: var(--uc-green-deep);
}

#customer-create-form .btn.btn-sm.btn-secondary[onclick*="addContactPerson"]:hover,
#customer-create-form .btn.btn-sm.btn-secondary[onclick*="addContactPerson"]:focus-visible {
  background: rgba(66, 131, 62, 0.12);
  border-color: rgba(66, 131, 62, 0.42);
}

/* Primary submit at bottom ("Create Customer") */
#customer-create-form button.btn.btn-primary[type="submit"] {
  border-radius: 0.65rem;
  min-height: 2.6rem;
  height: 2.6rem;
  padding: 0 1.35rem;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#customer-create-form button.btn.btn-primary[type="submit"]:hover,
#customer-create-form button.btn.btn-primary[type="submit"]:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.22);
}

#customer-create-form button.btn.btn-primary[type="submit"]:active {
  transform: translateY(1px);
}

/* =============================================================================
   /staff/create — Create Staff page styling (similar feel to /customer/create)
   Only CSS changes. Scoped via unique form id: #staff-profile-form
   ============================================================================= */

/* Form section cards */
#staff-profile-form .card.mb-3 {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  padding: 0;
}

/* Card headers — green gradient strip */
#staff-profile-form .card.mb-3 > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

#staff-profile-form .card.mb-3 > .card-header h5,
#staff-profile-form .card.mb-3 > .card-header h6 {
  margin: 0;
  color: #ffffff;
  font-weight: 600;
letter-spacing: .5px;
}

/* Card body surface */
#staff-profile-form .card.mb-3 > .card-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
}

/* Labels */
#staff-profile-form .form-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-green-deep);
}

/* Inputs / selects */
#staff-profile-form .form-control,
#staff-profile-form .form-select {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#staff-profile-form .form-control:hover,
#staff-profile-form .form-select:hover {
  border-color: rgba(66, 131, 62, 0.38);
  background: #ffffff;
}

#staff-profile-form .form-control:focus,
#staff-profile-form .form-select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

/* Profile preview */
#staff-profile-form #profile-picture-preview {
  border: 2px solid rgba(66, 131, 62, 0.25);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.12);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#staff-profile-form #profile-picture-preview:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 131, 62, 0.45);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.16);
}

/* Experiences "Add More" button */
#staff-profile-form #add-experience-btn.btn.btn-sm.btn-outline-primary {
  border-radius: 999px;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.95rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

#staff-profile-form #add-experience-btn.btn.btn-sm.btn-outline-primary:hover,
#staff-profile-form #add-experience-btn.btn.btn-sm.btn-outline-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
}

/* Documents "Add More" button — match Experiences button */
#staff-profile-form #add-education-document-btn.btn.btn-sm.btn-outline-primary {
  border-radius: 999px;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.95rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

#staff-profile-form #add-education-document-btn.btn.btn-sm.btn-outline-primary:hover,
#staff-profile-form #add-education-document-btn.btn.btn-sm.btn-outline-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
}

/* Experiences — equal height for Company/Position/City inputs */
#staff-profile-form .experience-item input.form-control.form-control-sm[name="company[]"],
#staff-profile-form .experience-item input.form-control.form-control-sm[name="position[]"],
#staff-profile-form .experience-item input.form-control.form-control-sm[name="city[]"] {
  min-height: 2.25rem;
  height: 2.25rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  line-height: 1.2;
}

/* Experience item divider */
#staff-profile-form .experience-item {
  border-bottom-color: rgba(20, 83, 45, 0.1);
}

/* Primary submit button (Create Staff) */
#staff-profile-form button.btn.btn-primary[type="submit"],
#staff-profile-form button.btn.btn-success[type="submit"] {
  border-radius: 0.65rem;
  min-height: 2.6rem;
  height: 2.6rem;
  padding: 0 1.35rem;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#staff-profile-form button.btn.btn-primary[type="submit"]:hover,
#staff-profile-form button.btn.btn-primary[type="submit"]:focus-visible,
#staff-profile-form button.btn.btn-success[type="submit"]:hover,
#staff-profile-form button.btn.btn-success[type="submit"]:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.22);
}

#staff-profile-form button.btn.btn-primary[type="submit"]:active,
#staff-profile-form button.btn.btn-success[type="submit"]:active {
  transform: translateY(1px);
}

/* =============================================================================
   /client — Client list page (uses uc-* classes)
   Only CSS changes. Scoped to the existing table wrapper on this page.
   ============================================================================= */

/* Add a bit more breathing room for DataTables top row on /client */
.uc-resource-page #customer-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  align-items: center;
}

.uc-resource-page #customer-table_wrapper .dataTables_filter,
.uc-resource-page #customer-table_wrapper .dataTables_length {
  margin-bottom: 0;
}

/* /client — make table look like /staff list (light header + subtle hover) */
.uc-resource-page table.table.table-hover#customer-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

.uc-resource-page table.table.table-hover#customer-table thead.uc-table-common__head th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

.uc-resource-page table.table.table-hover#customer-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

.uc-resource-page table.table.table-hover#customer-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

/* =============================================================================
   MODALS — Industry / Agency / Package popups
   Requirement: CSS-only, no markup changes.
   We create a reusable class `.uc-modal` (for future use) AND apply same styling
   by scoping to the existing modal IDs so nothing old breaks.

   Covered popups:
   - /industry: #industryModal, #importCsvModal
   - /agency:  #agencyModal, #importAgencyModal
   - /package: #agencyModal (same id used in this view)
   ============================================================================= */

/* Reusable modal class (optional future use) */
.uc-modal .modal-content {
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.uc-modal .modal-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding: 0.95rem 1.1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.uc-modal .modal-title {
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins", "Open Sans", sans-serif;
  letter-spacing: -0.01em;
}

.uc-modal .modal-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
  padding: 1.1rem 1.1rem;
}

.uc-modal .modal-footer {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border-top: 1px solid rgba(20, 83, 45, 0.08);
  padding: 0.9rem 1.1rem;
}

/* Apply the same look to existing modals via IDs */
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-content {
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding: 0.95rem 1.1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-title {
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins", "Open Sans", sans-serif;
  letter-spacing: -0.01em;
}

/* Close button contrast on green header */
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-header .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.9;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-header .btn-close:hover {
  opacity: 1;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 28%);
  padding: 1.1rem 1.1rem;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border-top: 1px solid rgba(20, 83, 45, 0.08);
  padding: 0.9rem 1.1rem;
}

/* Form controls inside these modals */
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-green-deep);
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-control,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-select {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-control:hover,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-select:hover {
  border-color: rgba(66, 131, 62, 0.38);
  background: #ffffff;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-control:focus,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .form-select:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
  background: #ffffff;
}

/* Footer buttons — align sizes and bring brand look */
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn {
  border-radius: 0.6rem;
  min-height: 2.4rem;
  height: 2.4rem;
  padding: 0 1.05rem;
  font-weight: 600;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-primary,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-success,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn[id*="save"] {
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-primary:hover,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-primary:focus-visible,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-success:hover,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-success:focus-visible,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn[id*="save"]:hover,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn[id*="save"]:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.22);
}

:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-primary:active,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn.btn-success:active,
:where(#industryModal, #importCsvModal, #agencyModal, #importAgencyModal) .modal-footer .btn[id*="save"]:active {
  transform: translateY(1px);
}

/* =============================================================================
   Close button — lighten for Industry/Agency/Package popups
   (User feedback: close button looked too dark)
   Scoped to: #importCsvModal, #agencyModal, #importAgencyModal
   ============================================================================= */

:where(#importCsvModal, #agencyModal, #importAgencyModal) .modal-header .btn-close {
  background-color: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

:where(#importCsvModal, #agencyModal, #importAgencyModal) .modal-header .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

/* =============================================================================
   /sales-followup-project/card — make both boxes more attractive
   Targets:
   - Empty state box: .trellowone-empty-card
   - Create project tile: .kanban-board-card-create
   ============================================================================= */

/* Empty state card: gradient surface + hover lift */
.trellowone-empty-wrap .trellowone-empty-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(66, 131, 62, 0.12) 0%, rgba(66, 131, 62, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.trellowone-empty-wrap .trellowone-empty-card:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 131, 62, 0.24);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

/* .trellowone-empty-wrap .trellowone-empty-title {
  font-family: "Poppins", "Open Sans", sans-serif;
  letter-spacing: -0.01em;
} */

.trellowone-empty-wrap .trellowone-empty-btn.btn.btn-primary {
  border-radius: 0.8rem;
  font-weight: 700;
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.trellowone-empty-wrap .trellowone-empty-btn.btn.btn-primary:hover,
.trellowone-empty-wrap .trellowone-empty-btn.btn.btn-primary:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(20, 83, 45, 0.22);
}

.trellowone-empty-wrap .trellowone-empty-btn.btn.btn-primary:active {
  transform: translateY(1px);
}

/* Create new project tile: dashed border + icon emphasis */
.kanban-boards-container-embedded .kanban-board-card.kanban-board-card-create {
  background:
    radial-gradient(1000px 420px at 20% 0%, rgba(66, 131, 62, 0.16) 0%, rgba(66, 131, 62, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border: 2px dashed rgba(66, 131, 62, 0.35);
}

.kanban-boards-container-embedded .kanban-board-card.kanban-board-card-create:hover {
  border-color: rgba(66, 131, 62, 0.55);
}

.kanban-boards-container-embedded .kanban-board-card-create .kanban-board-create-text {
  color: var(--uc-green-deep);
  /* font-family: "Poppins", "Open Sans", sans-serif;
  letter-spacing: -0.01em; */
}

.kanban-boards-container-embedded .kanban-board-card-create:hover .kanban-board-create-content::before {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.22);
}

/* =============================================================================
   /agency — Add Agency modal: "Add More" button (mobile-person rows)
   Scoped to: #agencyModal only (also used by /package modal; safe styling)
   ============================================================================= */

#agencyModal #add-mobile-person.btn.btn-success.btn-sm {
  border-radius: 999px;
  min-height: 2.35rem;
  height: 2.35rem;
  padding: 0 1.05rem;
  font-weight: 700;
  border: 1px solid rgba(66, 131, 62, 0.35);
  color: var(--uc-green-deep);
  background: linear-gradient(180deg, #f7fbf7 0%, #ecf6ec 100%);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.12);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#agencyModal #add-mobile-person.btn.btn-success.btn-sm:hover,
#agencyModal #add-mobile-person.btn.btn-success.btn-sm:focus-visible {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.18);
}

#agencyModal #add-mobile-person.btn.btn-success.btn-sm:active {
  transform: translateY(1px);
}

#agencyModal .btn-remove-mobile-person.btn.btn-danger {
  border-radius: 0.6rem;
  min-height: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   /sales-followup-project/card — Create tile icon (reliable, no FA dependency)
   ============================================================================= */

.kanban-boards-container-embedded .kanban-board-card-create .kanban-board-create-content::before {
  content: "+";
  font-family: inherit;
  font-weight: 600;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
      font-size: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 10px 22px rgba(20, 83, 45, 0.18);
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

/* =============================================================================
   /sales-followup-project/card — Project cards (e.g. "UDAY CEMENT PRODUCT")
   Make the real project boxes more attractive + hover/active.
   ============================================================================= */

.kanban-boards-container-embedded .kanban-board-card:not(.kanban-board-card-create) {
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.kanban-boards-container-embedded .kanban-board-card:not(.kanban-board-card-create):hover {
  transform: translateY(-3px);
  border-color: rgba(66, 131, 62, 0.28);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

.kanban-boards-container-embedded .kanban-board-card:not(.kanban-board-card-create):active {
  transform: translateY(-1px);
}

/* Bottom title strip */
.kanban-boards-container-embedded .kanban-board-card:not(.kanban-board-card-create) .kanban-board-card-content {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border-top: 1px solid rgba(20, 83, 45, 0.08);
}

.kanban-boards-container-embedded .kanban-board-card:not(.kanban-board-card-create) .kanban-board-initial {
  /* font-family: "Poppins", "Open Sans", sans-serif;
  font-weight: 700; */
  color: #0f172a;
  /* letter-spacing: -0.01em; */
}

/* =============================================================================
   /sales-followup-project/card — "Your Project" heading strip (Customer-like)
   Goal: make heading + icon look like a premium page header.
   Scoped to: .kanban-boards-container-embedded only
   ============================================================================= */

.kanban-boards-container-embedded .kanban-boards-header {
  margin-bottom: 1rem; /* reduce large gap from kanban.css */
}

.kanban-boards-container-embedded .kanban-boards-header-content {
  padding: 0.75rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  background:
    radial-gradient(900px 420px at 14% 0%, rgba(66, 131, 62, 0.14) 0%, rgba(66, 131, 62, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 252, 251, 0.94) 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.kanban-boards-container-embedded .kanban-user-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.95rem;
  box-shadow: 0 12px 26px rgba(20, 83, 45, 0.18);
  transition: none; /* avoid noisy hover */
}

.kanban-boards-container-embedded .kanban-user-icon:hover {
  transform: none;
  box-shadow: 0 12px 26px rgba(20, 83, 45, 0.18);
}

.kanban-boards-container-embedded .kanban-boards-title {
  font-size: 1.35rem;
  font-weight: 600;
  /* letter-spacing: -0.02em; */
  color: #0f172a;
}

/* =============================================================================
   /sales-followup-project/card — Create project popup improvements
   Notes:
   - Headings are REAL markup (no CSS-generated headings)
   - Do NOT change "Create" button styles
   Scoped to: #createBoardModal only
   ============================================================================= */

#createBoardModal .create-board-modal-content {
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

#createBoardModal .create-board-modal-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 30%);
  padding: 1rem 1.1rem 1.1rem;
}

/* Background + Colors headings */
#createBoardModal .uc-create-board-label,
#createBoardModal .uc-create-board-subhead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  
  font-size: 14px;
  font-weight: 600;
  color: #172b4d;
}

#createBoardModal .uc-create-board-subhead {
  margin-top: 0.85rem;
}

/* Background/Colors helper hint under headings */
#createBoardModal .uc-create-board-hint {
  margin-top: 0.25rem;
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
}

#createBoardModal .uc-create-board-subhead + .uc-create-board-hint {
  margin-top: 0.35rem;
}

/* Create project close (X) — force visible + no hover animation */
#createBoardModal .create-board-modal-header .btn-close.create-board-close-btn,
#createBoardModal .create-board-modal-header .create-board-close-btn.btn-close {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 999px;
  opacity: 1;
  transition: none;
  transform: none;
  background:
    rgba(255, 255, 255, 0.86)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 0.95rem 0.95rem
    no-repeat;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  filter: none;
}

#createBoardModal .create-board-modal-header .btn-close.create-board-close-btn:hover,
#createBoardModal .create-board-modal-header .btn-close.create-board-close-btn:focus,
#createBoardModal .create-board-modal-header .btn-close.create-board-close-btn:focus-visible {
  opacity: 1;
  transform: none;
  transition: none;
  filter: none;
  outline: none;
}

#createBoardModal .uc-create-board-label::before,
#createBoardModal .uc-create-board-subhead::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* Improve picker tiles */
#createBoardModal .create-board-bg-thumbnail,
#createBoardModal .create-board-color-box {
  border-radius: 0.75rem;
  border: 2px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#createBoardModal .create-board-bg-thumbnail:hover,
#createBoardModal .create-board-color-box:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 131, 62, 0.35);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

/* Three-dots button (...) */
#createBoardModal .create-board-more-colors-btn {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  border: 2px dashed rgba(66, 131, 62, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  color: transparent; /* hide raw "..." text */
  font-weight: 900;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  position: relative;
}

/* Render the three dots nicely (CSS-only; not a heading) */
#createBoardModal .create-board-more-colors-btn::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--uc-green-deep);
  box-shadow: 10px 0 0 var(--uc-green-deep), 20px 0 0 var(--uc-green-deep);
  transform: translateY(-1px);
}

#createBoardModal .create-board-more-colors-btn:hover,
#createBoardModal .create-board-more-colors-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(66, 131, 62, 0.55);
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.14);
  outline: none;
}

#createBoardModal .create-board-more-colors-btn:hover::before,
#createBoardModal .create-board-more-colors-btn:focus-visible::before {
  background: #0f172a;
  box-shadow: 10px 0 0 #0f172a, 20px 0 0 #0f172a;
}

#createBoardModal .create-board-more-colors-btn:active {
  transform: translateY(1px);
}

/* =============================================================================
   /sales-followup-project/card — Board background modals (more attractive)
   Applies to:
   - Board background: #moreColorsModal
   - Photos by Unsplash: #morePhotosModal
   - Colors: #moreColorsOnlyModal
   ============================================================================= */

/* Modal bodies: soft surface */
:where(#moreColorsModal, #morePhotosModal, #moreColorsOnlyModal) .modal-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 30%);
}

/* Section headers inside Board background */
#moreColorsModal .create-board-color-section-title {
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f172a;
}

/* View more buttons (both) — refine */
#moreColorsModal .create-board-color-view-more-btn {
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(66, 131, 62, 0.28);
  background: rgba(66, 131, 62, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#moreColorsModal .create-board-color-view-more-btn:hover,
#moreColorsModal .create-board-color-view-more-btn:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(20, 83, 45, 0.18);
  outline: none;
}

/* Photos grid items: stronger hover and selected ring */
:where(#moreColorsModal, #morePhotosModal) .create-board-photos-grid-item {
  border-radius: 0.85rem;
  border: 2px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

:where(#moreColorsModal, #morePhotosModal) .create-board-photos-grid-item:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 131, 62, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

/* Colors-only swatches */
#moreColorsOnlyModal .create-board-colors-only-swatch {
  border-radius: 0.85rem;
  border: 2px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#moreColorsOnlyModal .create-board-colors-only-swatch:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 131, 62, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

/* =============================================================================
   /sales-followup-project/card-detail — Three-dot menus + Customer/Pending columns
   CSS-only, scoped to the kanban detail page.
   Targets:
   - Top-right dropdown (Add Customer Details / Invoice / Checklist / Staff / Section)
   - Column headers (Customer / Pending) + their three-dot buttons
   - Column three-dot popup overlay (#listModal)
   ============================================================================= */

/* ---------- Top-right dropdown menu (bootstrap dropdown) ---------- */
.kanban-main-content .kanban-board-topbar-right .dropdown-menu.dropdown-menu-end {
  padding: 0.4rem;
  min-width: 240px;
  border-radius: 0.9rem;
  border: 1px solid rgba(20, 83, 45, 0.14);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.kanban-main-content .kanban-board-topbar-right .dropdown-menu .dropdown-item {
  border-radius: 0.7rem;
  padding: 0.55rem 0.75rem;
  font-weight: 600;
  color: #0f172a;
  transition: background 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

.kanban-main-content .kanban-board-topbar-right .dropdown-menu .dropdown-item:hover,
.kanban-main-content .kanban-board-topbar-right .dropdown-menu .dropdown-item:focus-visible {
  background: rgba(66, 131, 62, 0.10);
  color: var(--uc-green-deep);
  transform: translateY(-1px);
  outline: none;
}

.kanban-main-content .kanban-board-topbar-right .dropdown-menu .dropdown-item:active {
  transform: translateY(0);
}

/*
 * Class: uc-kanban-card-detail-topbar-dropdown-fix (on .kanban-board-topbar)
 * Issue: Card-view polish sets .kanban-board-inner > * { position: relative; z-index: 1 } on BOTH
 *        the topbar and .kanban-board-tab-content. The tab block follows the topbar in DOM,
 *        so it stacks above for the same z-index — clicks on the lower rows of the ⋮ dropdown
 *        hit the tab area (Add Invoice / Checklist / Staff / Section), not the menu links.
 * Fix: Raise only the topbar above the tab pane; dropdown keeps pointer-events on items.
 */
.kanban-main-content:has(#cardView) .kanban-board-inner > .kanban-board-topbar.uc-kanban-card-detail-topbar-dropdown-fix {
  z-index: 200;
}

.kanban-main-content:has(#cardView)
  .kanban-board-inner
  > .kanban-board-topbar.uc-kanban-card-detail-topbar-dropdown-fix
  .dropdown-menu {
  z-index: 1060;
}

/* =============================================================================
   Card-detail ⋮ menu modals — mirror Attach / Add checklist header + body rhythm
   Agency-style table for Assigned Staff (.uc-sfu-staff-assigned-*).
   All selectors use new uc-sfu-menu-modal-* classes (no edits to cp-reprsent-*).
   ============================================================================= */

.modal-dialog.uc-sfu-menu-modal-dialog:not(.uc-sfu-menu-modal-dialog--xl) {
  max-width: 440px;
}

.modal-content.uc-sfu-menu-modal-content {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header.uc-sfu-menu-modal-header {
  background: linear-gradient(135deg, rgba(162, 193, 159, 1) 0%, #42833e 100%);
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-title.uc-sfu-menu-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.btn-close.uc-sfu-menu-modal-close {
  opacity: 0.92;
  filter: brightness(0) invert(1);
}

.btn-close.uc-sfu-menu-modal-close:hover {
  opacity: 1;
}

form.uc-sfu-menu-modal-form-stack {
  display: flex;
  flex-direction: column;
}

form.uc-sfu-menu-modal-form-stack .modal-body.uc-sfu-menu-modal-body {
  flex: 1 1 auto;
}

form.uc-sfu-menu-modal-form-stack .modal-footer.uc-sfu-menu-modal-footer {
  margin-top: auto;
}

.modal-body.uc-sfu-menu-modal-body {
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-body.uc-sfu-menu-modal-body--staff {
  padding-top: 16px;
}

.modal-footer.uc-sfu-menu-modal-footer {
  padding: 12px 20px 18px;
  background: #f8faf8;
  border-top: 1px solid #e5e7eb !important;
}

.uc-sfu-menu-modal-field-group {
  margin-bottom: 0;
}

.uc-sfu-menu-modal-label {
  font-size: 14px;
  font-weight: 600;
  color: #172b4d;
  margin-bottom: 8px;
}

.modal-body.uc-sfu-menu-modal-body .form-control.uc-sfu-menu-modal-control {
  border: 1px solid #4c9aff;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
}

.modal-body.uc-sfu-menu-modal-body .form-control.uc-sfu-menu-modal-control:focus {
  border-color: #2684ff;
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.25);
  outline: none;
}

/*
 * CSV file row — mirrors Industry › Import Industry CSV (native input + dark Choose File button).
 * Classes: .uc-sfu-csv-field-industry-ref (group), .uc-sfu-csv-file-industry-ref (input)
 */
:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref.form-control {
  /* padding: 0.45rem 0.65rem; */
  padding: 6px 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #ffffff;
}

:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: #495057;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
}

:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref::file-selector-button:hover {
  background-color: #343a40;
}

:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref::-webkit-file-upload-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: #495057;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
}

:is(#customerCsvModal, #invoiceCsvModal) .uc-sfu-csv-file-industry-ref::-webkit-file-upload-button:hover {
  background-color: #343a40;
}

.uc-sfu-menu-modal-csv-sample-link {
  margin-top: 2px;
}

.uc-sfu-menu-modal-sample-anchor {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #0052cc;
  text-decoration: none;
}

.uc-sfu-menu-modal-sample-anchor:hover {
  text-decoration: underline;
  color: #0747a6;
}

.btn.uc-sfu-menu-modal-primary-btn {
  background-color: #42833e;
  border-color: #42833e;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.btn.uc-sfu-menu-modal-primary-btn:hover,
.btn.uc-sfu-menu-modal-primary-btn:focus {
  background-color: #356832;
  border-color: #356832;
  color: #ffffff;
}

/* ----- Customer Detail (checklist host) ----- */
.modal-content.uc-sfu-menu-modal-content--customer-detail .modal-body.uc-sfu-menu-modal-body--scroll {
  background-color: #ffffff;
}

.uc-sfu-customer-detail-kanban-wrap.kanban-board-lists {
  padding: 0;
  margin: 0;
  min-height: 0;
}

.uc-sfu-customer-detail-checklist-host {
  min-height: 140px;
  border-radius: 8px;
  border: 1px dashed rgba(66, 131, 62, 0.38);
  background: #f8faf8;
  padding: 12px;
}

.uc-sfu-customer-detail-checklist-host:not(:empty) {
  border-style: solid;
  border-color: #dfe1e6;
  background: #ffffff;
}

.uc-sfu-customer-detail-checklist-host:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.uc-sfu-customer-detail-checklist-host:empty::before {
  content: "Loading checklist…";
  font-size: 14px;
  font-weight: 600;
  color: #6b778c;
}

/* ----- Staff Detail: tabs + Select2 + Assigned table ----- */
.modal-content.uc-sfu-menu-modal-content--staff {
  display: flex;
  flex-direction: column;
}

.uc-sfu-menu-modal-tabs {
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #dfe1e6;
}

.uc-sfu-staff-nav-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.uc-sfu-staff-nav-tabs .nav-link {
  border: none;
  border-radius: 0;
  font-weight: 600;
  font-size: 14px;
  color: #6b778c;
  padding: 10px 16px;
}

.uc-sfu-staff-nav-tabs .nav-link:hover {
  color: #172b4d;
}

.uc-sfu-staff-nav-tabs .nav-link.active {
  color: #42833e;
  border-bottom: 3px solid #42833e;
  background: transparent;
}

.uc-sfu-staff-pane-add {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.uc-sfu-staff-select-wrap {
  flex: 1 1 auto;
}

.uc-sfu-staff-add-actions {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.uc-sfu-staff-pane-assign {
  padding-top: 6px;
}

#staffPopup .select2-container {
  width: 100% !important;
}

#staffPopup .select2-container .select2-selection--multiple {
  min-height: 118px;
  border: 1px solid #4c9aff !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  background: #ffffff !important;
}

#staffPopup .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #2684ff !important;
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.25);
}

#staffPopup .select2-dropdown {
  border-radius: 4px;
  border-color: #dfe1e6;
}

.uc-sfu-staff-assigned-table-wrap {
  margin-top: 4px;
}

.uc-sfu-staff-assigned-table-responsive {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.uc-sfu-staff-assigned-table thead.table-light th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.uc-sfu-staff-assigned-table td {
  font-size: 0.875rem;
  vertical-align: middle;
}

.uc-sfu-staff-assigned-table tbody tr:hover {
  background-color: rgba(66, 131, 62, 0.055);
}

/* Assigned Staff — DataTables: Show + Search one row; visible “Search” + comfortable inset */
#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_wrapper > .row:first-child {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  box-sizing: border-box;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_wrapper > .row:first-child > [class*="col-"] {
  flex: 0 1 auto;
  width: auto !important;
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  color: #475569;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_filter {
  margin-left: auto;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  color: #475569;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_filter input[type="search"] {
  font-size: 13px !important;
  line-height: 1.35;
  margin-left: 0 !important;
  border-radius: 6px;
  border: 1px solid rgba(20, 83, 45, 0.2);
  padding: 6px 10px;
  min-width: 12rem;
}

#staffPopup .uc-sfu-staff-assigned-table-wrap .dataTables_filter input[type="search"]:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 2px var(--uc-green-ring);
  outline: none;
}

/* Select2 dropdown above Bootstrap modal backdrop */
body.modal-open .select2-dropdown {
  z-index: 1066 !important;
}

/* ----- Card-detail topbar (desktop): search width hook ----- */
.kanban-main-content .uc-sfu-card-detail-topbar .uc-sfu-card-detail-topbar-search-wrap {
  width: min(250px, 34vw);
  min-width: 0;
  flex-shrink: 1;
}

.kanban-main-content .uc-sfu-card-detail-topbar .uc-sfu-card-detail-customer-search {
  width: 100%;
  max-width: 100%;
}

/* ---------- Columns (Customer / Pending) visual treatment ---------- */
.kanban-main-content .kanban-cards-row .kanban-list {
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.10);
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(66, 131, 62, 0.10) 0%, rgba(66, 131, 62, 0) 55%),
    rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.kanban-main-content .kanban-cards-row .kanban-list-header > span {

  color: #0f172a;
}

/* Customer column highlight */
.kanban-main-content .kanban-list:has(.kanban-cards[data-section="customer"]) .kanban-list-header > span {
  color: var(--uc-green-deep);
}

/* Pending column highlight (if section name maps to pending) */
.kanban-main-content .kanban-list:has(.kanban-cards[data-section="pending"]) .kanban-list-header > span {
  color: #b45309;
}

/* ---------- Column 3-dot button (⋯) ---------- */
.kanban-main-content .kanban-list-header .three-dot-btn {
  width: 34px;
  height: 34px;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

.kanban-main-content .kanban-list-header .three-dot-btn:hover,
.kanban-main-content .kanban-list-header .three-dot-btn:focus-visible {
  background: rgba(66, 131, 62, 0.12);
  border-color: rgba(66, 131, 62, 0.22);
  color: var(--uc-green-deep);
  transform: translateY(-1px);
  outline: none;
}

.kanban-main-content .kanban-list-header .three-dot-btn:active {
  transform: translateY(0);
}

/* ---------- Column 3-dot popup overlay (#listModal) ---------- */
.kanban-main-content #listModal.modal-overlay {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(6px);
}

.kanban-main-content #listModal .modal-box {
  border-radius: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

.kanban-main-content #listModal .modal-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding: 0.9rem 1rem;
}

.kanban-main-content #listModal .modal-header span {
  color: #ffffff;
  font-weight: 800;
  font-family: "Poppins", "Open Sans", sans-serif;
}

.kanban-main-content #listModal .modal-header button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.kanban-main-content #listModal .modal-header button:hover {
  transform: translateY(-1px) rotate(90deg);
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

.kanban-main-content #listModal .modal-body {
  background: linear-gradient(180deg, #fbfcfb 0%, #ffffff 35%);
  padding: 0.6rem 0;
}

.kanban-main-content #listModal .modal-body ul li {
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  margin: 0.15rem 0.5rem;
  font-weight: 600;
  color: #0f172a;
}

.kanban-main-content #listModal .modal-body ul li:hover {
  background: rgba(66, 131, 62, 0.10);
  color: var(--uc-green-deep);
}

.kanban-main-content #listModal .modal-body hr {
  border-top: 1px solid rgba(20, 83, 45, 0.10);
  margin: 0.5rem 0.75rem;
}

/* Attribution (content updated in Blade) */
#createBoardModal .create-board-attribution p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

#createBoardModal .create-board-attribution .create-board-link {
  color: var(--uc-green-deep);
  font-weight: 800;
  text-decoration: none;
}

#createBoardModal .create-board-attribution .create-board-link:hover {
  text-decoration: underline;
}

/* =============================================================================
   /sales-followup-project/card-detail — Table View (table + pagination + controls)
   Fixes (per screenshot):
   - "Show 10 entries" must stay on ONE line
   - Search input alignment/size should look premium
   - Pagination bar more attractive
   Scoped to: .kanban-main-content #tableView only
   ============================================================================= */

/*
 * Table View — horizontal scroll (responsive clipping fix)
 * Blade hooks: .uc-sfu-card-detail-tab-table, .uc-sfu-card-detail-kanban-table,
 *              .uc-sfu-card-detail-dt-scroll, .uc-sfu-card-detail-table-responsive
 * Root cause: base .kanban-table-wrapper { overflow: hidden } clips wide DataTables.
 */
.kanban-main-content #tableView.uc-sfu-card-detail-tab-table {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .kanban-table-wrapper.uc-sfu-card-detail-kanban-table {
  overflow-x: visible;
  overflow-y: visible;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .uc-sfu-card-detail-table-card-body {
  min-width: 0;
  overflow: visible;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .uc-sfu-card-detail-dt-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: min(500px, 72vh);
  overflow-x: auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(66, 131, 62, 0.35) rgba(15, 23, 42, 0.06);
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .uc-sfu-card-detail-dt-scroll::-webkit-scrollbar {
  height: 10px;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .uc-sfu-card-detail-dt-scroll::-webkit-scrollbar-thumb {
  background: rgba(66, 131, 62, 0.35);
  border-radius: 999px;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table .uc-sfu-card-detail-table-responsive {
  overflow: visible !important;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table #customer-table_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.kanban-main-content #tableView.uc-sfu-card-detail-tab-table #customer-table_wrapper > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep "Show 10 entries" in one line */
.kanban-main-content #tableView #customer-table_wrapper .dataTables_length {
  white-space: nowrap !important;
}

.kanban-main-content #tableView #customer-table_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.kanban-main-content #tableView #customer-table_wrapper .dataTables_length select {
  min-width: 4.25rem;
}

/* DataTables top row spacing */
.kanban-main-content #tableView #customer-table_wrapper > .row:first-child {
  align-items: center !important;
  row-gap: 0.65rem;
}

/* Search (DataTables) — not cramped */
.kanban-main-content #tableView #customer-table_wrapper .dataTables_filter {
  gap: 10px !important;
}

.kanban-main-content #tableView #customer-table_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.kanban-main-content #tableView #customer-table_wrapper .dataTables_filter input {
  height: 2.35rem !important;
  border-radius: 0.65rem !important;
  padding: 0.45rem 0.75rem !important;
  border: 1px solid rgba(20, 83, 45, 0.18) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

/* Bottom bar (info + pagination) */
.kanban-main-content #tableView #customer-table_wrapper > .row:last-child {
  margin-top: 0.75rem;
  align-items: center;
  row-gap: 0.65rem;
}

.kanban-main-content #tableView #customer-table_wrapper .dataTables_info {
  font-size: 0.82rem;
  color: #64748b;
}

.kanban-main-content #tableView #customer-table_wrapper ul.pagination {
  gap: 0.3rem;
  flex-wrap: wrap;
}

.kanban-main-content #tableView #customer-table_wrapper ul.pagination .page-link {
  border-radius: 0.55rem;
  padding: 0.4rem 0.75rem;
  font-weight: 700;
}

/* =============================================================================
   /sales-followup-project/card-detail — Topbar "Search customer..." input fix
   (User said it looks broken in screenshot)
   Scoped to kanban topbar only.
   ============================================================================= */

.kanban-main-content .kanban-board-topbar-left #customerSearch.form-control.form-control-sm {
  height: 2.35rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 251, 247, 0.92) 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.kanban-main-content .kanban-board-topbar-left #customerSearch.form-control.form-control-sm:focus {
  border-color: var(--uc-green);
  box-shadow: 0 0 0 3px var(--uc-green-ring), 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* =============================================================================
   /sales-followup-project/card-detail — Card View (Customer / Pending) polish
   Goals (per screenshot):
   - Reduce "white-white" feel (soft glass panel + subtle accents)
   - Make Customer cards/boxes more attractive
   - Make Pending column (incl. empty state) more attractive
   - Improve column action-list popup (3 dots -> Actions list)
   Scoped to: .kanban-main-content #cardView
   ============================================================================= */

/* Soft panel behind lists to reduce white feel (not dark) */
.kanban-main-content:has(#cardView) .kanban-board-inner {
  position: relative;
}

.kanban-main-content:has(#cardView) .kanban-board-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(66, 131, 62, 0.10) 0%, rgba(66, 131, 62, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

.kanban-main-content:has(#cardView) .kanban-board-inner > * {
  position: relative;
  z-index: 1;
}

/* Column headers: add subtle bottom separator + spacing */
.kanban-main-content #cardView .kanban-list-header {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(20, 83, 45, 0.10);
}

/* Column accent bar (Customer vs Pending) */
.kanban-main-content #cardView .kanban-list {
  overflow: hidden;
}

.kanban-main-content #cardView .kanban-list::before {
  content: "";
  display: block;
  height: 4px;
  background: rgba(15, 23, 42, 0.06);
}

.kanban-main-content #cardView .kanban-list:has(.kanban-cards[data-section="customer"])::before {
  background: linear-gradient(90deg, var(--uc-green-deep) 0%, var(--uc-green) 55%, #7cc76f 100%);
}

.kanban-main-content #cardView .kanban-list:has(.kanban-cards[data-section="pending"])::before {
  background: linear-gradient(90deg, #b45309 0%, #f59e0b 55%, #fde68a 100%);
}

/* Cards area spacing */
.kanban-main-content #cardView .kanban-cards.card-list {
  padding: 0.75rem;
  gap: 0.55rem;
}

/* Individual customer/pending card */
.kanban-main-content #cardView .kanban-cards .kanban-card {
  border-radius: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(520px 140px at 20% 0%, rgba(66, 131, 62, 0.10) 0%, rgba(66, 131, 62, 0) 60%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.kanban-main-content #cardView .kanban-cards .kanban-card:hover,
.kanban-main-content #cardView .kanban-cards .kanban-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(66, 131, 62, 0.30);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.kanban-main-content #cardView .kanban-cards .kanban-card-text {
  color: #0f172a;
  font-weight: 600;

}

/* Status dropdown in card: unify look */
.kanban-main-content #cardView .kanban-cards .kanban-card select.status-change {
  height: 2rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.kanban-main-content #cardView .kanban-cards .kanban-card select.status-change:hover,
.kanban-main-content #cardView .kanban-cards .kanban-card select.status-change:focus {
  border-color: rgba(66, 131, 62, 0.35);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

/* Empty state ("No Card Found") */
.kanban-main-content #cardView .kanban-cards .no-data {
  border-radius: 0.95rem;
  border: 1px dashed rgba(20, 83, 45, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(247, 251, 247, 0.86) 100%);
  padding: 1.25rem 0.9rem;
  text-align: center;
  font-weight: 800;
  color: #64748b;
}

/* ---------- Actions list popup (column 3-dot) refinements ---------- */
.kanban-main-content #listModal .modal-body ul {
  padding: 0.35rem 0;
}

.kanban-main-content #listModal .modal-body ul li {
  line-height: 1.15;
}

/* Section titles inside the list (Due Date / Category / Agency etc.) */
.kanban-main-content #listModal .modal-body ul li:not(:has(.filter-item)) {
  font-weight: 900;
  color: #0f172a;
}

.kanban-main-content #listModal .modal-body .filter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.kanban-main-content #listModal .modal-body .filter-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--uc-green-deep);
}

.kanban-main-content #listModal .modal-body ul li:has(.filter-item):hover .filter-item {
  color: var(--uc-green-deep);
}

/* ---------- Actions list popup (premium polish) ---------- */
.kanban-main-content #listModal .modal-box {
  width: min(520px, calc(100vw - 2rem));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
}

.kanban-main-content #listModal .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.kanban-main-content #listModal .modal-header button {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.26);
}

.kanban-main-content #listModal .modal-header button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28), 0 0 0 6px rgba(66, 131, 62, 0.22);
}

.kanban-main-content #listModal .modal-body {
  overflow: auto;
  padding: 0.65rem 0;
}

.kanban-main-content #listModal .modal-body ul {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

/* Section title rows (Due Date / Category / Agency etc.) */
.kanban-main-content #listModal .modal-body ul li:not(:has(.filter-item)):not(:has(hr)) {
  margin: 0.35rem 0.5rem 0.1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(66, 131, 62, 0.10);
  border: 1px solid rgba(66, 131, 62, 0.18);
  color: #0f172a;
}

/* Filter rows */
.kanban-main-content #listModal .modal-body ul li:has(.filter-item) {
  margin: 0.12rem 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.kanban-main-content #listModal .modal-body ul li:has(.filter-item):hover {
  transform: translateY(-1px);
  border-color: rgba(66, 131, 62, 0.26);
  background: linear-gradient(180deg, #ffffff 0%, rgba(247, 251, 247, 0.95) 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.kanban-main-content #listModal .modal-body ul li:has(.filter-item):active {
  transform: translateY(0);
}

.kanban-main-content #listModal .modal-body hr {
  border-top: 1px solid rgba(20, 83, 45, 0.10);
  margin: 0.75rem 0.75rem;
}

/* Scrollbar (subtle) */
.kanban-main-content #listModal .modal-body::-webkit-scrollbar {
  width: 10px;
}

.kanban-main-content #listModal .modal-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
}

.kanban-main-content #listModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(66, 131, 62, 0.28);
  border-radius: 999px;
}

.kanban-main-content #listModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 131, 62, 0.42);
}

/* =============================================================================
   /sales-followup-project/card-detail — Card View layout v2 + Background polish
   - Make Customer/Pending NOT look like just two boxes
   - Make background image more attractive (cinematic but not dark)
   Scoped to: card detail page Card View only
   ============================================================================= */

/* Background image polish */
.kanban-main-content:has(#cardView) .kanban-board-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.kanban-main-content:has(#cardView) .kanban-board-background .kanban-board-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  filter: saturate(1.12) contrast(1.05) brightness(0.98);
}

.kanban-main-content:has(#cardView) .kanban-board-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 14% 0%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(1200px 620px at 86% 0%, rgba(66, 131, 62, 0.20) 0%, rgba(66, 131, 62, 0) 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.06) 42%, rgba(15, 23, 42, 0.12) 100%),
    radial-gradient(1200px 820px at 50% 100%, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0) 58%);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Make the column row feel composed (not just two boxes) */
.kanban-main-content:has(#cardView) #cardView .kanban-list-header.kanban-cards-row {
  gap: 1.35rem;
  justify-content: center;
}

/* Customer column = primary panel */
.kanban-main-content:has(#cardView) #cardView .kanban-list:has(.kanban-cards[data-section="customer"]) {
  min-width: 380px;
  box-shadow: 0 30px 74px rgba(15, 23, 42, 0.16);
}

/* Pending column = secondary floating panel (offset + tiny tilt) */
.kanban-main-content:has(#cardView) #cardView .kanban-list:has(.kanban-cards[data-section="pending"]) {
  min-width: 310px;
  transform: translateY(16px) rotate(0.35deg);
  box-shadow: 0 26px 64px rgba(15, 23, 42, 0.14);
}

/* Add a soft "glow" around panels for separation from bg */
.kanban-main-content:has(#cardView) #cardView .kanban-list {
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 8px rgba(255, 255, 255, 0.06);
}

/* Pending header a little warmer for visual hierarchy */
.kanban-main-content:has(#cardView) #cardView .kanban-list:has(.kanban-cards[data-section="pending"]) > .kanban-list-header {
  background:
    radial-gradient(520px 110px at 15% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(255, 255, 255, 0.00) 56%),
    rgba(255, 255, 255, 0.62);
}

/* =============================================================================
   Card-detail board row — .uc-sfu-card-detail-board (scrollbars + calmer columns)
   Only applies when Blade adds the class on #cardView.
   ============================================================================= */

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board.kanban-board-lists {
  scrollbar-width: thin;
  scrollbar-color: rgba(66, 131, 62, 0.38) rgba(15, 23, 42, 0.06);
  padding-bottom: 10px;
  padding-left: 4px;
  padding-right: 8px;
  box-sizing: border-box;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board.kanban-board-lists::-webkit-scrollbar {
  height: 8px;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board.kanban-board-lists::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board.kanban-board-lists::-webkit-scrollbar-thumb {
  background: rgba(66, 131, 62, 0.35);
  border-radius: 999px;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-cards.card-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(66, 131, 62, 0.4) rgba(15, 23, 42, 0.05);
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-cards.card-list::-webkit-scrollbar {
  width: 7px;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-cards.card-list::-webkit-scrollbar-thumb {
  background: rgba(66, 131, 62, 0.38);
  border-radius: 999px;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-list {
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.45);
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-list:has(.kanban-cards[data-section="customer"]) {
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.45);
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-list:has(.kanban-cards[data-section="pending"]) {
  transform: none;
  box-shadow:
    0 15px 34px rgba(180, 83, 9, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.48);
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-cards .kanban-card select.status-change {
  min-width: 9rem;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 1.75rem;
  font-size: 0.8125rem;
}

.kanban-main-content:has(#cardView) #cardView.uc-sfu-card-detail-board .kanban-cards .no-data {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   /sales-followup-project/card — Board background + View more modals (uc-board-*)
   - Board background: #moreColorsModal
   - Photos by Unsplash (View more): #morePhotosModal
   - Colors (View more): #moreColorsOnlyModal
   Goals:
   - More attractive surfaces + typography
   - Close (X) always visible; NO hover animation / transitions
   ============================================================================= */

/* Shared SVG close icon (Bootstrap btn-close + kanban close classes) */
#moreColorsModal .modal-header .btn-close.create-board-color-close-btn,
#morePhotosModal .modal-header .btn-close.create-board-photos-close-btn,
#moreColorsOnlyModal .modal-header .btn-close.create-board-colors-only-close-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  opacity: 1;
  transition: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background-color: rgba(255, 255, 255, 0.96);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.95rem 0.95rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  filter: none;
}

/* Background modal close stays vertically centered (kanban uses absolute + translateY) */
#moreColorsModal .modal-header .btn-close.create-board-color-close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
}

#moreColorsModal .modal-header .btn-close.create-board-color-close-btn:hover,
#moreColorsModal .modal-header .btn-close.create-board-color-close-btn:focus,
#moreColorsModal .modal-header .btn-close.create-board-color-close-btn:focus-visible {
  transform: translateY(-50%);
  opacity: 1;
  transition: none;
  outline: none;
}

#morePhotosModal .modal-header .btn-close.create-board-photos-close-btn:hover,
#morePhotosModal .modal-header .btn-close.create-board-photos-close-btn:focus,
#morePhotosModal .modal-header .btn-close.create-board-photos-close-btn:focus-visible,
#moreColorsOnlyModal .modal-header .btn-close.create-board-colors-only-close-btn:hover,
#moreColorsOnlyModal .modal-header .btn-close.create-board-colors-only-close-btn:focus,
#moreColorsOnlyModal .modal-header .btn-close.create-board-colors-only-close-btn:focus-visible {
  transform: none;
  opacity: 1;
  transition: none;
  outline: none;
}

/* ---------- #moreColorsModal (Board background) ---------- */
#moreColorsModal .create-board-color-modal-content {
  border-radius: 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.18);
  background: linear-gradient(180deg, #fbfcfb 0%, #f3f6f4 100%);
}

#moreColorsModal .create-board-color-modal-header {
  padding: 1rem 3.35rem 1rem 1.15rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

#moreColorsModal .create-board-color-modal-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#moreColorsModal .create-board-color-modal-body {
  padding: 1.15rem 1.2rem 1.25rem;
}

#moreColorsModal .create-board-color-section-header {
  margin-bottom: 0.65rem;
}

/* ---------- #morePhotosModal (View more photos) ---------- */
#morePhotosModal .modal-dialog.create-board-photos-modal {
  max-width: min(460px, calc(100vw - 1.5rem));
  margin: 1rem auto;
}

#morePhotosModal .create-board-photos-modal-content {
  border-radius: 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.18);
  background: linear-gradient(180deg, #fbfcfb 0%, #f3f6f4 100%);
}

#morePhotosModal .create-board-photos-modal-header {
  padding: 0.85rem 1rem;
  gap: 0.65rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

#morePhotosModal .create-board-photos-back-btn {
  border-radius: 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(247, 251, 247, 0.95);
  transition: none;
}

#morePhotosModal .create-board-photos-header-center {
  flex: 1;
  justify-content: center;
  min-width: 0;
  gap: 0.35rem;
}

#morePhotosModal .create-board-photos-header-text {
  font-weight: 800;
  font-size: 0.92rem;
  color: #0f172a;
}

#morePhotosModal .create-board-photos-unsplash-link {
  font-weight: 900;
  font-size: 0.92rem;
  color: var(--uc-green-deep);
  text-decoration: none;
}

#morePhotosModal .create-board-photos-search-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 251, 247, 0.55) 100%);
}

#morePhotosModal .create-board-photos-search-box {
  border-radius: 0.85rem;
  border: 1px solid rgba(20, 83, 45, 0.14);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 22px rgba(15, 23, 42, 0.06);
}

#morePhotosModal .create-board-photos-search-input {
  border: none;
  border-radius: 0.85rem;
  padding: 0.7rem 0.9rem 0.7rem 2.55rem;
  font-weight: 600;
  color: #0f172a;
  background: transparent;
}

#morePhotosModal .create-board-photos-search-input:focus {
  outline: none;
  box-shadow: none;
}

#morePhotosModal .create-board-photos-search-section:focus-within .create-board-photos-search-box {
  border-color: rgba(66, 131, 62, 0.45);
  box-shadow: 0 0 0 3px var(--uc-green-ring), 0 14px 30px rgba(15, 23, 42, 0.08);
}

#morePhotosModal .create-board-photos-modal-body {
  padding: 1rem;
  max-height: min(62vh, 540px);
}

#morePhotosModal .create-board-photos-grid {
  gap: 0.75rem;
}

#morePhotosModal .create-board-photos-grid-item {
  border-radius: 0.85rem;
  background:
    radial-gradient(340px 120px at 20% 0%, rgba(66, 131, 62, 0.08) 0%, rgba(66, 131, 62, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* ---------- #moreColorsOnlyModal (View more colors) ---------- */
#moreColorsOnlyModal .modal-dialog.create-board-colors-only-modal {
  max-width: min(420px, calc(100vw - 1.5rem));
  margin: 1rem auto;
}

#moreColorsOnlyModal .create-board-colors-only-modal-content {
  border-radius: 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.18);
  background: linear-gradient(180deg, #fbfcfb 0%, #f3f6f4 100%);
}

#moreColorsOnlyModal .create-board-colors-only-modal-header {
  padding: 0.85rem 1rem;
  gap: 0.65rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

#moreColorsOnlyModal .create-board-colors-only-back-btn {
  border-radius: 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(247, 251, 247, 0.95);
  transition: none;
}

#moreColorsOnlyModal .create-board-colors-only-modal-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#moreColorsOnlyModal .create-board-colors-only-modal-body {
  padding: 1rem;
}

/* =============================================================================
   /role — Role list page (/role)
   Desktop polish only. Scoped to #role-table and its DataTables wrapper.
   ============================================================================= */

.card:has(#role-table) > .card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.card:has(#role-table) > .card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.card:has(#role-table) > .card-header h4 i {
  color: rgba(255, 255, 255, 0.92) !important;
}

.card:has(#role-table) > .card-header a.btn.btn-sm.btn-falcon-primary {
  border-radius: 999px;
  min-height: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-weight: 500;
  letter-spacing: 0.08px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:has(#role-table) > .card-header a.btn.btn-sm.btn-falcon-primary:hover,
.card:has(#role-table) > .card-header a.btn.btn-sm.btn-falcon-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--uc-green-deep);
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

#role-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  font-size: 0.875rem;
}

#role-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

#role-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

table.table.table-hover#role-table > tbody > tr:hover > td {
  background-color: var(--uc-green-soft);
}

#role-table tbody td:nth-child(3) .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  background: linear-gradient(180deg, #f0faf0 0%, #e5f4e5 100%) !important;
  color: var(--uc-green-deep) !important;
}

#role-table tbody td:nth-child(4) .btn {
  border-radius: 0.45rem;
}

#role-table tbody td:nth-child(4) form.d-inline-block {
  vertical-align: middle;
}

#role-table_wrapper > .row:first-child {
  padding-top: 0.65rem;
  padding-bottom: 0.55rem;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}

#role-table_wrapper .dataTables_filter,
#role-table_wrapper .dataTables_length {
  margin-bottom: 0;
}

#role-table_wrapper .dataTables_length label,
#role-table_wrapper .dataTables_filter label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

#role-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

#role-table_wrapper .dataTables_filter input[type="search"],
#role-table_wrapper .dataTables_filter input.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.45rem 0.75rem;
  min-width: 240px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

#role-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.35rem 0.65rem;
}

#role-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   /role/create — Role create page (/role/create)
   Desktop polish only. Scoped via #role-permission-form + summary card sibling.
   ============================================================================= */

.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.1) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%) !important;
}

.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light .card-body {
  padding: 1.15rem 1.35rem;
}

.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light h4.text-primary {
  color: var(--uc-green-deep) !important;
}

.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light .badge.bg-gradient-primary {
  border-radius: 999px;
  padding: 0.55rem 1rem !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.15);
}

form#role-permission-form > .card.shadow-lg.border-0 {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

form#role-permission-form .card-header.bg-gradient-primary.text-white {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%) !important;
  border-bottom: none;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
}

form#role-permission-form .card-header.bg-gradient-primary .badge.bg-success {
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

form#role-permission-form .card-body.bg-body-tertiary {
  padding: 1.35rem 1.35rem;
}

form#role-permission-form .form-label {
  font-weight: 600;
  color: #1e293b;
}

form#role-permission-form .form-control-lg {
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.14);
}

form#role-permission-form .d-flex.flex-wrap:has(#permission-search) {
  align-items: center;
  gap: 0.65rem;
}

form#role-permission-form #permission-search {
  flex: 1 1 260px;
  min-width: 220px;
  width: auto !important;
  max-width: 100%;
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.14);
  padding: 0.55rem 0.85rem;
}

form#role-permission-form #select-all-perms,
form#role-permission-form #deselect-all-perms {
  border-radius: 0.55rem;
  font-weight: 600;
  border: 1px solid rgba(20, 83, 45, 0.18);
  color: var(--uc-green-deep);
  background: linear-gradient(180deg, #ffffff 0%, #f5faf5 100%);
}

form#role-permission-form #select-all-perms:hover,
form#role-permission-form #select-all-perms:focus-visible,
form#role-permission-form #deselect-all-perms:hover,
form#role-permission-form #deselect-all-perms:focus-visible {
  border-color: rgba(66, 131, 62, 0.45);
  box-shadow: 0 0 0 3px rgba(66, 131, 62, 0.12);
}

form#role-permission-form #permission-list > .col-12 > .fw-bold.text-primary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0 0.25rem;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid rgba(20, 83, 45, 0.1);
}

form#role-permission-form .permission-item .animated-checkbox {
  height: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

form#role-permission-form .permission-item .form-check-label {
  font-weight: 500;
  color: #334155;
}

form#role-permission-form .card-footer.bg-light {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(20, 83, 45, 0.08);
}

form#role-permission-form .card-footer .btn.btn-success {
  border-radius: 0.65rem;
  font-weight: 700;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

/* --- /role/create: badge sizing + switch overflow fixes (scoped) ----------- */

/* Top summary badge: "Secure & Flexible" (reduce size across devices) */
.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light .badge.bg-gradient-primary {
  font-size: 0.95rem !important;
  line-height: 1.15;
}

.col-lg-12.mx-auto:has(#role-permission-form) > .card.border-0.shadow-sm.bg-light .badge.bg-gradient-primary i {
  font-size: 0.95em;
}

/* Form header badge: "Secure" */
form#role-permission-form .card-header.bg-gradient-primary .badge {
  font-size: 0.95rem !important;
  line-height: 1.15;
  padding: 0.5rem 0.9rem !important;
}

form#role-permission-form .card-header.bg-gradient-primary .badge i {
  font-size: 0.95em;
}

/* Permission switch layout: prevent overflow and keep switch inside */
form#role-permission-form .permission-item .animated-checkbox {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

form#role-permission-form .permission-item .animated-checkbox.form-switch {
  padding-left: 0.85rem; /* override bootstrap form-switch left indent */
}

form#role-permission-form .permission-item .animated-checkbox.form-switch .form-check-input {
  margin-left: 0 !important;
  margin-right: 0.6rem;
  float: none !important;
  flex: 0 0 auto;
}

form#role-permission-form .permission-item .animated-checkbox.form-switch .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =============================================================================
   Kanban / sales-followup card-detail — popup polish (CSS only)
   Classes used as hooks where noted; mostly scoped by modal IDs already in Blade.
   Part A: restore Bootstrap .btn-close (Blade inline `.modal-header button{background:none}` strips icon)
   Part B: #cardPopup — comments toolbar + checklist dropdown alignment
   Part C: Check List Details modals — agency-like DataTables + table skin
   ============================================================================= */

/* --- Part A: visible close (X) on card-detail Bootstrap modals ------------ */

:is(#customerCsvModal, #invoiceCsvModal, #customerPopup, #ChecklistModalByCustPopup, #staffPopup, #editStaffModal, #sectionPopup)
  .modal-header
  .btn-close,
/* Main card popup header only (not nested modals inside body) */
#cardPopup.modal > .modal-dialog > .modal-content > .modal-header .btn-close,
/* Nested Bootstrap modals inside card popup */
#cardPopup .modal .modal-header .btn-close {
  box-sizing: content-box;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  padding: 0.35em;
  color: #172b4d;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172640'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  border: 0;
  border-radius: 0.35rem;
  opacity: 0.85;
}

:is(#customerCsvModal, #invoiceCsvModal, #customerPopup, #ChecklistModalByCustPopup, #staffPopup, #editStaffModal, #sectionPopup)
  .modal-header
  .btn-close:hover,
#cardPopup.modal > .modal-dialog > .modal-content > .modal-header .btn-close:hover,
#cardPopup .modal .modal-header .btn-close:hover {
  opacity: 1;
}

/* --- Part B: card popup — comments / export / dates + toolbar ------------- */

#cardPopup .cp-reprsent-card-details-comments-header {
  align-items: flex-start;
  gap: 0.65rem;
}

#cardPopup .cp-reprsent-card-details-comments-title {
  flex: 1 1 auto;
  min-width: 0;
}

#cardPopup .cp-reprsent-card-details-comments-header .comment-actions {
  flex: 1 1 280px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 0.65rem;
}

/* Row 1: Show details + Export (Export pinned to the right side of this row) */



/* Row 2: date filters full width */
#cardPopup .comment-actions .date-filter {
  order: 3;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: end;
}

#cardPopup .comment-actions .date-filter .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.2rem;
}

#cardPopup .comment-actions .date-filter input.form-control-sm {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Top icon toolbar — checklist dropdown same height as siblings */
#cardPopup .cp-reprsent-card-details-actions {
  align-items: stretch;
}

#cardPopup .cp-reprsent-card-details-actions .dropdown {
  display: flex;
  align-items: stretch;
}

#cardPopup .cp-reprsent-card-details-actions .cp-reprsent-card-details-action-btn {
  min-height: 40px;
  box-sizing: border-box;
}

#cardPopup .cp-reprsent-card-details-actions .cp-reprsent-card-details-action-btn.dropdown-toggle {
  gap: 0.35rem;
}

#cardPopup .cp-reprsent-card-details-actions .cp-reprsent-card-details-action-btn.dropdown-toggle::after {
  margin-left: 0;
  align-self: center;
}

#cardPopup .cp-reprsent-card-details-actions .cp-reprsent-card-details-action-icon {
  font-size: 15px;
  line-height: 1;
}

/* --- Part C: Check List Details — modal chrome + agency-like table ---------- */

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-content {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(20, 83, 45, 0.12);
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-header .modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
}

/* Light close icon on green checklist modal headers */
:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  opacity: 0.9;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-header .btn-close:hover {
  opacity: 1;
}

/* Nested checklist modal lives inside #cardPopup — needs higher specificity than Part A */
#cardPopup #openChecklistViewModal .modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  opacity: 0.92;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-body {
  padding: 0.85rem 1rem 1rem;
  background: #f8fafb;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) .modal-body > .table-responsive {
  border-radius: 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.08);
  padding: 0.35rem;
  overflow-x: auto;
  max-width: 100%;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-tableBYcust,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  font-size: 0.875rem;
  margin-bottom: 0 !important;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-tableBYcust thead th,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-tableBYcust tbody td,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  vertical-align: middle;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  > .row:first-child,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal) #checklist-table_wrapper > .row:first-child {
  margin-left: 0;
  margin-right: 0;
  align-items: center;
  row-gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.35rem;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  .dataTables_length
  label,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  .dataTables_length
  label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  .dataTables_length
  select,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  .dataTables_length
  select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.3rem 2rem 0.3rem 0.55rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  .dataTables_filter
  label,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  .dataTables_filter
  label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
  gap: 0.35rem;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  .dataTables_filter
  input,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  .dataTables_filter
  input {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.4rem 0.65rem;
  min-width: 200px;
  font-size: 0.875rem;
  margin-left: 0.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  ul.pagination
  .page-link,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  ul.pagination
  .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.3rem 0.55rem;
}

:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-tableBYcust_wrapper
  ul.pagination
  .page-item.active
  .page-link,
:is(#ChecklistModalByCustPopup, #openChecklistViewModal)
  #checklist-table_wrapper
  ul.pagination
  .page-item.active
  .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   Sales follow-up — standalone page (/sales-followup-project/followup/...)
   New hook classes: .uc-sfu-followup-* (see customer_followup.blade.php)
   ============================================================================= */

.uc-sfu-followup-page {
  padding-bottom: 1.5rem;
}

.uc-sfu-followup-card {
  border-radius: 1rem !important;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.1) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
  padding: 0;
}

.uc-sfu-followup-card-header {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
  padding: 1rem 1.25rem !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.uc-sfu-followup-card-title {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.05rem;
}

.uc-sfu-followup-card-title i {
  color: rgba(255, 255, 255, 0.92) !important;
}

.uc-sfu-followup-card-body {
  padding: 1.35rem 1.35rem !important;
}

.uc-sfu-followup-form .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #334155;
  margin-bottom: 0.4rem;
}

.uc-sfu-followup-form .form-select,
.uc-sfu-followup-form .form-control {
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.14);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.uc-sfu-followup-form textarea.form-control {
  min-height: 120px;
  border-radius: 0.65rem;
}

.uc-sfu-followup-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem !important;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf4 100%);
  border-radius: 0.85rem;
  border: 1px solid rgba(20, 83, 45, 0.1);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.uc-sfu-followup-submit-btn {
  border-radius: 0.65rem !important;
  font-weight: 700 !important;
  padding: 0.55rem 1.35rem !important;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%) !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

.uc-sfu-followup-submit-btn:hover,
.uc-sfu-followup-submit-btn:focus-visible {
  filter: brightness(1.05);
  color: #ffffff !important;
}

/* =============================================================================
   Kanban card-detail — Customer Invoice Details modal (.uc-cdim-modal)
   Agency-like table + aligned filter toolbar
   ============================================================================= */

.uc-cdim-modal-content {
  border-radius: 0.95rem !important;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.14) !important;
}

.uc-cdim-modal-header {
  padding: 0.85rem 1.05rem !important;
  border-bottom: 1px solid rgba(20, 83, 45, 0.12) !important;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
}

.uc-cdim-modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff !important;
}

#cardPopup #customerInvoiceModal.uc-cdim-modal .modal-header .btn-close,
.uc-cdim-modal .modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  opacity: 0.92;
}

.uc-cdim-modal-body {
  padding: 1rem 1.05rem 1.15rem !important;
  background: #f8fafb;
}

/* Flex toolbar: avoids Bootstrap col % + CSS grid clash (was squeezing inputs/buttons) */
.uc-cdim-modal .uc-cdim-filter-toolbar.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
  background: #ffffff;
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.uc-cdim-modal .uc-cdim-filter-toolbar > [class*="col-"] {
  flex: 1 1 200px;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.uc-cdim-modal .uc-cdim-filter-toolbar > .col-md-2 {
  flex: 0 1 130px;
  min-width: 112px;
}

.uc-cdim-modal .uc-cdim-filter-toolbar .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.25rem;
}

.uc-cdim-modal .uc-cdim-filter-toolbar .form-control-sm {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
}

.uc-cdim-modal .uc-cdim-filter-toolbar .btn {
  width: 100%;
  min-height: 2.35rem;
  border-radius: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.uc-cdim-modal .uc-cdim-table-wrap {
  border-radius: 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.08);
  padding: 0.35rem;
  overflow-x: auto;
}

.uc-cdim-modal #invoice-table.uc-cdim-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  font-size: 0.8125rem;
  margin-bottom: 0 !important;
}

.uc-cdim-modal #invoice-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding: 0.65rem 0.5rem;
  vertical-align: middle;
}

.uc-cdim-modal #invoice-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  vertical-align: middle;
  padding: 0.55rem 0.45rem;
}

.uc-cdim-modal #invoice-table_wrapper > .row:first-child {
  margin-left: 0;
  margin-right: 0;
  align-items: center;
  row-gap: 0.5rem;
  padding: 0.25rem 0.15rem 0.5rem;
}

.uc-cdim-modal #invoice-table_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
}

.uc-cdim-modal #invoice-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.28rem 2rem 0.28rem 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

.uc-cdim-modal #invoice-table_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin-bottom: 0 !important;
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
}

.uc-cdim-modal #invoice-table_wrapper .dataTables_filter input {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.38rem 0.6rem;
  min-width: 160px;
  font-size: 0.875rem;
  margin-left: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

.uc-cdim-modal #invoice-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.28rem 0.5rem;
}

.uc-cdim-modal #invoice-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   Kanban card-detail — View Attachment modal (.uc-vam-modal)
   ============================================================================= */

.uc-vam-modal-content {
  border-radius: 0.95rem !important;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.14) !important;
}

.uc-vam-modal-header {
  padding: 0.85rem 1.05rem !important;
  border-bottom: 1px solid rgba(20, 83, 45, 0.12) !important;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
}

.uc-vam-modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff !important;
}

#cardPopup #ViewAttachmentModal.uc-vam-modal .modal-header .btn-close,
.uc-vam-modal .modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  opacity: 0.92;
}

.uc-vam-modal-body {
  padding: 1rem 1.05rem !important;
  background: #f8fafb;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}

.uc-vam-modal-footer {
  padding: 0.75rem 1rem !important;
  background: #ffffff;
}

.uc-vam-modal-footer-btn {
  border-radius: 0.55rem;
  font-weight: 600;
}

/* View Attachment — tiles built in JS (classes .uc-vam-att-* on card-detail) */
.uc-vam-modal .uc-vam-attachment-grid .uc-vam-att-col {
  margin-bottom: 1rem;
}

.uc-vam-modal .uc-vam-att-card {
  height: 100%;
  border-radius: 0.65rem;
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f6faf6 100%);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.uc-vam-modal .uc-vam-att-card:hover {
  border-color: rgba(66, 131, 62, 0.35);
  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.1);
}

.uc-vam-modal .uc-vam-att-row {
  display: grid;
  grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
  align-items: start;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
}

.uc-vam-modal .uc-vam-att-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: #64748b;
  padding-top: 0.12rem;
  line-height: 1.3;
}

.uc-vam-modal .uc-vam-att-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.45;
  word-break: break-word;
  min-width: 0;
}

.uc-vam-modal .uc-vam-att-row-text .uc-vam-att-text {
  font-weight: 400;
  color: #475569;
}

.uc-vam-modal .uc-vam-att-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
  text-decoration: none;
}

.uc-vam-modal .uc-vam-att-link:hover {
  color: var(--uc-green);
  text-decoration: underline;
}

.uc-vam-modal .uc-vam-att-empty {
  color: #94a3b8;
  font-weight: 500;
}

.uc-vam-modal .uc-vam-att-link-icon {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.uc-vam-modal .uc-vam-att-empty-msg {
  border-radius: 0.65rem;
  border: 1px dashed rgba(20, 83, 45, 0.18);
  background: rgba(66, 131, 62, 0.04);
  font-weight: 500;
}

/* =============================================================================
   Sales follow-up — lead show page “New Ticket” modal (#newTicketModal)
   Hook classes: .uc-new-ticket-modal-* (see show.blade.php)
   Ensures .btn-close icon is visible (some global resets strip background-image).
   ============================================================================= */

.uc-new-ticket-modal-content {
  border-radius: 0.95rem !important;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12) !important;
}

.uc-new-ticket-modal-header {
  padding: 0.85rem 1.05rem !important;
}

.uc-new-ticket-modal-title {
  font-weight: 600;
}

.uc-new-ticket-modal-close.btn-close {
  box-sizing: content-box;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  padding: 0.35em;
  opacity: 0.75;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172640'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
}

.uc-new-ticket-modal-close.btn-close:hover {
  opacity: 1;
}

/* =============================================================================
   Manage Payments modal (#paymentModal) — .uc-mp-modal
   Green header chrome (same family as .uc-cdim-modal) + agency-like payment list
   table / DataTables toolbar. Blade hooks: .uc-mp-* on card-detail, SubCustomer,
   Invoice/index.
   ============================================================================= */

.uc-mp-modal-content {
  border-radius: 0.95rem !important;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 45, 0.12) !important;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.14) !important;
}

.uc-mp-modal .uc-mp-modal-header {
  padding: 0.85rem 1.05rem !important;
  border-bottom: 1px solid rgba(20, 83, 45, 0.12) !important;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 52%, #5aad52 100%);
}

.uc-mp-modal .uc-mp-modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff !important;
  background: none !important;
}

#cardPopup #paymentModal.uc-mp-modal .modal-header .btn-close,
.uc-mp-modal .modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  opacity: 0.92;
  border-radius: 0.4rem;
}

#cardPopup #paymentModal.uc-mp-modal .modal-header .btn-close:hover,
.uc-mp-modal .modal-header .btn-close:hover {
  opacity: 1;
}

.uc-mp-modal-body {
  padding: 1rem 1.05rem 1.15rem !important;
  background: #f8fafb;
}

.uc-mp-modal-footer {
  padding: 0.75rem 1rem !important;
  background: #ffffff;
}

.uc-mp-modal .uc-mp-footer-close.btn-secondary {
  border-radius: 0.55rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

/* Tabs — pill strip (replaces default Bootstrap nav-tab underline clash) */
.uc-mp-modal .uc-mp-tabs.nav-tabs {
  border-bottom: none !important;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.4rem;
  margin-bottom: 1rem !important;
  border-radius: 0.65rem;
  background: rgba(66, 131, 62, 0.09);
}

.uc-mp-modal .uc-mp-tabs .uc-mp-tabs-link.nav-link {
  border: none !important;
  margin-bottom: 0 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1.05rem !important;
  font-weight: 600;
  font-size: 0.875rem;
  color: #334155;
  background: transparent;
}

.uc-mp-modal .uc-mp-tabs .uc-mp-tabs-link.nav-link:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--uc-green-deep);
}

.uc-mp-modal .uc-mp-tabs .uc-mp-tabs-link.nav-link.active {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* Add Payment — form fields + bill table + summary */
.uc-mp-modal-body .form-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: #334155;
}

.uc-mp-modal-body .form-control,
.uc-mp-modal-body .form-select,
.uc-mp-modal-body textarea.form-control {
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.16);
}

.uc-mp-modal-body .form-control:focus,
.uc-mp-modal-body .form-select:focus,
.uc-mp-modal-body textarea.form-control:focus {
  border-color: rgba(66, 131, 62, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(66, 131, 62, 0.12);
}

.uc-mp-modal .uc-mp-invoice-box {
  border-radius: 0.55rem !important;
  border-color: rgba(20, 83, 45, 0.12) !important;
}

.uc-mp-modal .uc-mp-summary-card {
  border-radius: 0.65rem !important;
  border-color: rgba(20, 83, 45, 0.1) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.uc-mp-modal #billWiseTable.uc-mp-bill-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  font-size: 0.8125rem;
}

.uc-mp-modal #billWiseTable.uc-mp-bill-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%);
  border-color: rgba(20, 83, 45, 0.1);
  padding: 0.6rem 0.45rem;
  vertical-align: middle;
}

.uc-mp-modal #billWiseTable.uc-mp-bill-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  vertical-align: middle;
  padding: 0.5rem 0.4rem;
}

.uc-mp-modal #billWiseTable.uc-mp-bill-table tfoot td {
  border-color: rgba(20, 83, 45, 0.08);
  background: #f1f5f2 !important;
  font-size: 0.8125rem;
}

.uc-mp-modal-body .btn-success {
  border-radius: 0.55rem;
  font-weight: 600;
}

.uc-mp-modal-body .btn-primary {
  border-radius: 0.55rem;
  font-weight: 600;
}

.uc-mp-modal-body .btn-secondary {
  border-radius: 0.55rem;
  font-weight: 600;
}

/* Payment List — agency / invoice-modal style table shell */
.uc-mp-modal .uc-mp-table-wrap {
  border-radius: 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.08);
  padding: 0.35rem;
  overflow-x: auto;
}

#paymentModal.uc-mp-modal #payment-list-table.uc-mp-dt-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  font-size: 0.8125rem;
}

#paymentModal.uc-mp-modal #payment-list-table thead th {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 55%, #e8f2e8 100%) !important;
  border: none;
  border-bottom: 1px solid rgba(66, 131, 62, 0.22);
  padding: 0.65rem 0.5rem;
  vertical-align: middle;
}

#paymentModal.uc-mp-modal #payment-list-table tbody td {
  border-color: rgba(20, 83, 45, 0.07);
  vertical-align: middle;
  padding: 0.55rem 0.45rem;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper > .row:first-child {
  margin-left: 0;
  margin-right: 0;
  align-items: center;
  row-gap: 0.5rem;
  padding: 0.25rem 0.15rem 0.5rem;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper .dataTables_length select {
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.28rem 2rem 0.28rem 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--uc-green-deep);
  background-color: #ffffff;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin-bottom: 0 !important;
  font-weight: 600;
  font-size: 0.8rem;
  color: #475569;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper .dataTables_filter input {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.18);
  padding: 0.38rem 0.6rem;
  min-width: 160px;
  font-size: 0.875rem;
  margin-left: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper .dataTables_info {
  font-size: 0.8125rem;
  color: #64748b;
  padding-top: 0.35rem;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper ul.pagination .page-link {
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--uc-green-deep);
  border: 1px solid rgba(20, 83, 45, 0.12);
  padding: 0.28rem 0.5rem;
}

#paymentModal.uc-mp-modal #payment-list-table_wrapper ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

/* =============================================================================
   Sales follow-up — Customer Dashboard header toolbar
   Route: /sales-followup-project/customer-dashboard/{id}
   Blade hooks: .uc-cdash-* (customer_dashboard.blade.php)
   ============================================================================= */

.uc-cdash-header-card {
  border-radius: 0.95rem !important;
  border: 1px solid rgba(20, 83, 45, 0.1) !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

.uc-cdash-header-top {
  border-bottom: 1px solid rgba(20, 83, 45, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbf9 100%);
}

/* Row: date + client (left / grows) | Submit + Export (right) */
.uc-cdash-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  row-gap: 0.75rem;
}

.uc-cdash-toolbar-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: end;
}

.uc-cdash-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.uc-cdash-toolbar-primary .uc-cdash-date-input.form-control-sm {
  width: auto;
  min-width: 138px;
  max-width: 168px;
  flex: 0 0 auto;
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.16);
  min-height: 2.375rem;
  font-weight: 600;
  font-size: 0.8125rem;
}

.uc-cdash-toolbar-primary .uc-cdash-client-select.form-select-sm {
  flex: 1 1 220px;
  min-width: min(100%, 200px);
  max-width: 320px;
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 83, 45, 0.16);
  min-height: 2.375rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--uc-green-deep);
}

.uc-cdash-toolbar-actions .uc-cdash-btn-submit.btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  font-weight: 600;
  padding-left: 1rem;
  padding-right: 1rem;
  border: none;
  background: linear-gradient(135deg, var(--uc-green-deep) 0%, var(--uc-green) 100%);
  box-shadow: 0 6px 14px rgba(20, 83, 45, 0.18);
}

.uc-cdash-toolbar-actions .uc-cdash-btn-submit.btn:hover,
.uc-cdash-toolbar-actions .uc-cdash-btn-submit.btn:focus-visible {
  filter: brightness(1.06);
  color: #ffffff !important;
}

.uc-cdash-toolbar-actions .uc-cdash-btn-export.btn {
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.55rem;
  font-weight: 600;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 1px solid rgba(20, 83, 45, 0.22);
  background: linear-gradient(180deg, #f8fcf8 0%, #eef6ee 100%);
  color: var(--uc-green-deep) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.uc-cdash-toolbar-actions .uc-cdash-btn-export.btn:hover,
.uc-cdash-toolbar-actions .uc-cdash-btn-export.btn:focus-visible {
  border-color: rgba(66, 131, 62, 0.45);
  background: #ffffff;
  color: var(--uc-green-deep) !important;
}

.uc-cdash-info-grid .fs-11.text-600.text-uppercase {
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.65rem !important;
  color: #64748b !important;
}

.uc-cdash-info-grid .fs-10.text-900 {
  font-weight: 600;
  font-size: 0.8125rem !important;
  color: #1e293b !important;
}

/* =============================================================================
   APPEND ONLY — uc-sfu-card-detail-kanban-fix (sales-followup card-detail Card View)
   -----------------------------------------------------------------------------
   Path: /sales-followup-project/card-detail/*
   Goal:
     - Same width for every list column (Customer / pending / custom sections);
       overflow → horizontal scroll on #cardView (.kanban-board-lists).
     - Section status <select>: compact pill, centered label; width follows content
       where possible (field-sizing); beat Blade @stack + PHP inline on margin/font.
   Hooks (already on page): #cardView.uc-sfu-card-detail-board, .kanban-cards-row,
     .kanban-cards.card-list.
   Does NOT edit earlier rules in this file — this block is last for cascade.
   !important: only on props overridden by ProjectService inline style on <select>.
   ----------------------------------------------------------------------------- */

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board.kanban-board-lists {
  overflow-x: auto;
  overflow-y: visible;
  scroll-padding-inline: 10px;
  -webkit-overflow-scrolling: touch;
}

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  > .kanban-list-header.kanban-cards-row.kanban-cards-grid {
  flex: 0 0 auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
  justify-content: flex-start;
  overflow-x: visible;
  box-sizing: border-box;
}

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  .kanban-list-header.kanban-cards-row {
  justify-content: flex-start;
}

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  .kanban-cards-row.kanban-cards-grid
  > .kanban-list {
  --uc-sfu-kanban-col: clamp(268px, 22vw, 300px);
  min-width: var(--uc-sfu-kanban-col);
  max-width: var(--uc-sfu-kanban-col);
  width: var(--uc-sfu-kanban-col);
  flex: 0 0 var(--uc-sfu-kanban-col);
  box-sizing: border-box;
  transform: none;
}

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  .kanban-cards.card-list
  .kanban-card
  select.status-change {
  width: auto;
  min-width: 0;
  max-width: min(100%, 9.5rem);
  height: 1.95rem;
  padding: 0.18rem 1.25rem 0.18rem 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-align-last: center;
  color: #0f172a;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background-color: rgba(255, 255, 255, 0.94);
  background-image: url("data:image/svg+xml;utf8,<svg fill='%2364748b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.38rem center;
  background-size: 0.72rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  field-sizing: content;
  /* Inline style on <select> in ProjectService — override only via !important */
  /* margin-left: 0 !important; */
  font-size: 0.72rem !important;
}

.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  .kanban-cards.card-list
  .kanban-card
  select.status-change:hover,
.kanban-main-content:has(#cardView.uc-sfu-card-detail-board)
  #cardView.uc-sfu-card-detail-board
  .kanban-cards.card-list
  .kanban-card
  select.status-change:focus {
  border-color: rgba(66, 131, 62, 0.4);
  box-shadow: 0 0 0 3px var(--uc-green-ring);
  outline: none;
}

/* =============================================================================
   APPEND ONLY — uc-global-loader (footer partial #uc-global-loader)
   • Toggle blur + overlay: class uc-global-loader-active on <html>
     OR window.ucGlobalLoader.show() / .hide()
   • Logo: use Markup <img.uc-global-loader__logo-img> only — NOT CSS backgrounds.
   • Orbit dots: empty spans + radius/transform in CSS (decorative).
   ============================================================================= */

.uc-global-loader {
  --uc-global-loader-orbit-r: 2.65rem;
  --uc-global-loader-dot: 0.42rem;
  position: fixed;
  inset: 0;
  z-index: 10880;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

html.uc-global-loader-active .uc-global-loader {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

html.uc-global-loader-active {
  overflow: hidden;
}

.uc-global-loader__veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(248, 250, 252, 0.42);
}

.uc-global-loader__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.65rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(66, 131, 62, 0.14);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.uc-global-loader__visual {
  position: relative;
  width: calc(var(--uc-global-loader-orbit-r) * 2 + var(--uc-global-loader-logo, 4.25rem));
  height: calc(var(--uc-global-loader-orbit-r) * 2 + var(--uc-global-loader-logo, 4.25rem));
  display: flex;
  align-items: center;
  justify-content: center;
}

.uc-global-loader__logo-img {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--uc-global-loader-logo, 4.25rem);
  height: var(--uc-global-loader-logo, 4.25rem);
  object-fit: contain;
  border-radius: 0.35rem;
  pointer-events: none;
  user-select: none;
}

.uc-global-loader__orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  width: 100%;
  height: 100%;
  animation: uc-global-loader-orbit-spin 1.25s linear infinite;
}

.uc-global-loader__orbit-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--uc-global-loader-dot);
  height: var(--uc-global-loader-dot);
  margin: calc(var(--uc-global-loader-dot) / -2);
  border-radius: 50%;
  background: rgba(66, 131, 62, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.uc-global-loader__orbit-dot:nth-child(1) {
  transform: rotate(0deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__orbit-dot:nth-child(2) {
  transform: rotate(60deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__orbit-dot:nth-child(3) {
  transform: rotate(120deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__orbit-dot:nth-child(4) {
  transform: rotate(180deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__orbit-dot:nth-child(5) {
  transform: rotate(240deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__orbit-dot:nth-child(6) {
  transform: rotate(300deg) translateY(calc(-1 * var(--uc-global-loader-orbit-r)));
}

.uc-global-loader__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.02em;
}

@keyframes uc-global-loader-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-global-loader__orbit {
    animation-duration: 2s;
  }
}

/* ashish */
/* =============================================================================
   APPEND ONLY — uc-sfu-customer-dash-readable
   File hook: resources/views/salesfollowup/customer_dashboard.blade.php
     outer wrapper <div class="uc-sfu-customer-dash-readable"> … </div>
   Route: /sales-followup-project/customer-dashboard/{id}

   Goal: Darken body / label copy (esp. .text-600, info grid, timeline meta)
   for readability. Does NOT edit earlier .uc-cdash-* blocks — this wrapper-scoped
   block loads later and overrides where needed.
   ============================================================================= */

.uc-sfu-customer-dash-readable .uc-cdash-info-grid .fs-11.text-600.text-uppercase {
  color: #3d4f62 !important;
}

.uc-sfu-customer-dash-readable .uc-cdash-info-grid .fs-10.text-900 {
  color: #0f172a !important;
}

.uc-sfu-customer-dash-readable .text-500 {
  color: #5c6678 !important;
}

.uc-sfu-customer-dash-readable .text-600 {
  color: #475569 !important;
}

.uc-sfu-customer-dash-readable .text-700 {
  color: #334155 !important;
}

.uc-sfu-customer-dash-readable .card-body {
  color: #1e293b;
}

.uc-sfu-customer-dash-readable .followup-step-title {
  color: #0f172a !important;
}

.uc-sfu-customer-dash-readable .followup-step-meta {
  color: #334155 !important;
}

/* =============================================================================
   APPEND ONLY — uc-sfu-card-projects-heading (/sales-followup-project/card)
   Blade: resources/views/salesfollowup/card.blade.php
   • Heading row: title left + icon button right (opens #createBoardModal — same as create tile)
   • Create tile grid moved above #project-list so “Create new project” stays on top
   New classes only; does not edit older .kanban-boards-* rules above.
   ============================================================================= */

.kanban-boards-container-embedded .kanban-boards-header-content.uc-sfu-card-projects-heading-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-bar__left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-bar__left .kanban-boards-title {
  margin-bottom: 0;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-create-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(20, 83, 45, 0.22);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--uc-green-deep, #14532d) 0%, var(--uc-green, #42833e) 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.22);
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-create-btn:hover,
.kanban-boards-container-embedded .uc-sfu-card-projects-heading-create-btn:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(20, 83, 45, 0.26);
  outline: none;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-create-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(66, 131, 62, 0.35), 0 10px 22px rgba(20, 83, 45, 0.22);
}

.kanban-boards-container-embedded .uc-sfu-card-projects-heading-create-btn i {
  font-size: 1.25rem;
  line-height: 1;
}

.kanban-boards-container-embedded .uc-sfu-card-projects-create-grid {
  margin-bottom: 1rem;
}