/* Customer list, details and creation share the same spacing and controls. */
:is(.cw-customers-page, #customerDetailsModal, #addCustomerModal) {
  --cw-customer-border: rgba(186, 204, 231, .15);
  --cw-customer-muted: #bac4d3;
  --cw-customer-surface: rgba(255, 255, 255, .025);
}
.cw-customers-page .panel-header { background: transparent; }
.cw-customers-page .cw-customer-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 32px; padding-bottom: 24px; }
.cw-customers-page .cw-customer-page-header h2 { margin: 0 0 6px; color: #edf2fa; font-size: 26px; font-weight: 700; }
.cw-customers-page .cw-customer-page-header p { margin: 0; color: var(--cw-customer-muted); font-size: 14px; }
.cw-customers-page .cw-customer-page-body { padding-top: 0; }
.cw-customers-page .cw-customer-table-card { border: 1px solid var(--cw-customer-border); border-radius: 10px; box-shadow: none; }
.cw-customers-page .cw-customer-table-card .card-body { padding: 8px 20px; }
:is(.cw-customers-page, #customerDetailsModal, #addCustomerModal) .btn { border-radius: 6px; font-size: 13px; font-weight: 600; min-height: 40px; padding: 9px 14px; }
:is(.cw-customers-page, #customerDetailsModal) .btn-outline-primary { color: #aecfff !important; border-color: #6289bd !important; background: transparent !important; }
:is(.cw-customers-page, #customerDetailsModal) .btn-outline-primary:hover { color: #fff !important; background: rgba(98, 137, 189, .16) !important; }
:is(.cw-customers-page, #customerDetailsModal, #addCustomerModal) :is(button, a, summary):focus-visible { outline: 2px solid #aecfff; outline-offset: 3px; }

/* One toolbar and consistent alignment for every customer table. */
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls { gap: 12px; padding: 8px 0 16px; margin: 0; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls .dataTables_filter { order: 0; margin: 0 auto 0 0; text-align: left; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls .table-export-toolbar { order: 1; margin: 0 !important; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls .dataTables_length { order: 2; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls label { display: flex; align-items: center; gap: 8px; color: var(--cw-customer-muted) !important; font-size: 12px; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls :is(input, select) { min-height: 40px; border: 1px solid var(--cw-customer-border); border-radius: 6px; background: #1b2437; color: #edf2fa; padding: 8px 12px; margin: 0 !important; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-controls input { width: 220px; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-footer { margin: 0; padding: 16px 0 8px; font-size: 12px; color: var(--cw-customer-muted); }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-footer .dataTables_info { padding-top: 0; }
:is(.cw-customers-page, #customerDetailsModal) .cw-table-footer .page-link { border-radius: 6px !important; padding: 8px 12px; min-height: 36px; }
:is(#customer-list-datatable, #customer-cages-datatable, #customer-users-datatable) { margin: 0 !important; border-collapse: collapse !important; font-size: 14px; }
:is(#customer-list-datatable, #customer-cages-datatable, #customer-users-datatable) :is(th, td) { padding: 14px 16px !important; vertical-align: middle; border: 0 !important; border-bottom: 1px solid var(--cw-customer-border) !important; }
:is(#customer-list-datatable, #customer-cages-datatable, #customer-users-datatable) thead th { background: rgba(8, 16, 30, .18); color: var(--cw-customer-muted) !important; font-size: 12px; font-weight: 600; padding-right: 28px !important; }
table.cw-customer-table tbody tr { background: transparent; }
table.cw-customer-table.table-hover tbody tr:hover { background: rgba(174, 207, 255, .035) !important; }
table.cw-customer-table .cw-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cw-customer-table .cw-table-identity { min-width: 180px; max-width: 360px; }
.cw-identity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.cw-identity-name { font-weight: 600; overflow-wrap: anywhere; }
.cw-customers-page .cw-customer-link { border: 0; padding: 0; background: transparent; color: #edf2fa; text-align: left; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.cw-customers-page .cw-customer-link:hover { color: #aecfff; text-decoration: underline; }
.cw-identity-subtitle { display: block; margin-top: 4px; color: var(--cw-customer-muted); font-size: 12px; }
:is(.cw-customers-page, #customerDetailsModal) table.cw-customer-table.collapsed .cw-row-details { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; min-height: 32px; margin: 0; padding: 0; border-color: transparent !important; background: transparent !important; color: #aecfff !important; }
.cw-availability { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 64px; }
.cw-availability-track { display: block; width: 64px; height: 4px; border-radius: 4px; background: rgba(174, 207, 255, .12); overflow: hidden; }
.cw-availability-fill { display: block; height: 100%; border-radius: inherit; background: #7baeff; }
.cw-user-status { display: inline-block; padding: 4px 9px; border: 1px solid rgba(174, 207, 255, .2); border-radius: 5px; background: rgba(174, 207, 255, .08); color: #c0d8ff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cw-user-status.is-pending { color: #ffda9d; background: rgba(255, 218, 157, .06); border-color: rgba(255, 218, 157, .2); }
.cw-user-status.is-disabled { color: #bac4d3; border-color: var(--cw-customer-border); background: var(--cw-customer-surface); }
table.cw-customer-table td.child { padding: 18px 24px !important; background: rgba(8, 16, 30, .15); }

/* A compact summary above the connected-system table. */
#customerDetailsModal .modal-header, #addCustomerModal .modal-header { padding: 20px 24px; border-bottom-color: var(--cw-customer-border); }
#customerDetailsModal .modal-title, #addCustomerModal .modal-title { font-size: 21px; font-weight: 600; }
#customer-detail-address { margin-top: 5px; line-height: 1.5; }
#customerDetailsModal .modal-body, #addCustomerModal .modal-body { padding: 0 24px 24px; }
#addCustomerModal .modal-body { padding-top: 24px; }
#customerDetailsModal .modal-content, #addCustomerModal .modal-content { border: 1px solid var(--cw-customer-border); border-radius: 10px; max-height: calc(100dvh - 56px); }
#customerDetailsModal .modal-footer, #addCustomerModal .modal-footer { padding: 14px 24px; border-top-color: var(--cw-customer-border); }
#customerDetailsModal .cw-customer-tabs { margin-bottom: 24px; gap: 20px; border-bottom: 1px solid var(--cw-customer-border); }
#customerDetailsModal .cw-customer-tabs .nav-link { padding: 16px 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #bac4d3; font-size: 14px; font-weight: 600; }
#customerDetailsModal .cw-customer-tabs .nav-link.active { border-bottom-color: #7baeff; background: transparent; color: #aecfff; }
#customerDetailsModal .cw-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#customerDetailsModal .cw-metric { min-width: 0; padding: 16px 18px; border: 1px solid var(--cw-customer-border); border-radius: 8px; background: var(--cw-customer-surface); }
#customerDetailsModal .cw-metric-label { color: var(--cw-customer-muted); font-size: 12px; }
#customerDetailsModal .cw-metric-value { margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#customerDetailsModal .cw-inventory-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 18px 0; border-bottom: 1px solid var(--cw-customer-border); }
#customerDetailsModal .cw-inventory-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
#customerDetailsModal .cw-inventory-facts dt { color: var(--cw-customer-muted); font-size: 12px; font-weight: 400; }
#customerDetailsModal .cw-inventory-facts dd { margin: 0; font-size: 14px; font-weight: 600; }
.cw-customer-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cw-customer-section-heading h5 { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
.cw-customer-section-heading p { margin: 0; color: var(--cw-customer-muted); font-size: 13px; }

/* The same form sections are used for creation and editing. */
.cw-customer-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cw-customer-form-section { min-width: 0; padding: 20px; border: 1px solid var(--cw-customer-border); border-radius: 8px; background: var(--cw-customer-surface); }
.cw-customer-form-section legend { float: left; width: 100%; margin-bottom: 18px; font-size: 15px; font-weight: 600; }
.cw-customer-form-section > .form-group:first-of-type { clear: both; }
:is(#customerDetailsModal, #addCustomerModal) .form-group { padding: 0; margin-bottom: 16px; }
:is(#customerDetailsModal, #addCustomerModal) .form-row { margin-left: -6px; margin-right: -6px; }
:is(#customerDetailsModal, #addCustomerModal) .form-row > .form-group { padding-left: 6px; padding-right: 6px; }
:is(#customerDetailsModal, #addCustomerModal) label { margin-bottom: 7px; font-size: 13px; font-weight: 500; color: #dce3ec !important; }
:is(#customerDetailsModal, #addCustomerModal) .form-control { min-height: 40px; border-radius: 6px; border-color: #48566e; padding: 9px 12px; font-size: 14px; line-height: 20px; }
:is(#customerDetailsModal, #addCustomerModal) .form-text { font-size: 12px; line-height: 1.5; }
.cw-customer-form-section > .form-group:last-child, .cw-customer-form-section > .form-row:last-child .form-group:nth-last-child(-n+2) { margin-bottom: 0; }
.cw-customer-disclosure { min-width: 0; margin-bottom: 20px; border: 1px solid var(--cw-customer-border); border-radius: 8px; background: var(--cw-customer-surface); }
.cw-customer-profile-grid > .cw-customer-disclosure { grid-column: 1 / -1; margin-bottom: 0; }
.cw-customer-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; padding: 16px 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cw-customer-disclosure > summary::-webkit-details-marker { display: none; }
.cw-customer-disclosure[open] > summary > .fa-chevron-down { transform: rotate(180deg); }
.cw-customer-disclosure[open] > summary { border-bottom: 1px solid var(--cw-customer-border); }
.cw-customer-extra-fields, #customer-invite-user > form { padding: 20px; }
.cw-customer-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
#customerDetailsModal .customer-user-reset { white-space: nowrap; }
@media (max-width: 767.98px) {
  .cw-customers-page .cw-customer-page-header { align-items: flex-start; flex-wrap: wrap; padding-top: 24px; }
  .cw-customer-profile-grid { grid-template-columns: minmax(0, 1fr); }
  #customerDetailsModal .cw-metric-grid, #customerDetailsModal .cw-inventory-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#customerDetailsModal, #addCustomerModal) .form-control { font-size: 16px; }
}
@media (max-width: 575.98px) {
  .cw-customers-page .cw-customer-table-card .card-body { padding: 8px 12px; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls { gap: 10px; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls > .dataTables_filter { flex-basis: 100%; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls > .table-export-toolbar,
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls > .dataTables_length { flex-basis: auto; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls .dataTables_length { margin-left: auto; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls .dataTables_filter label { width: 100%; }
  :is(.cw-customers-page, #customerDetailsModal) .cw-table-controls input { flex: 1; min-width: 0; width: auto; font-size: 16px; }
  :is(#customer-list-datatable, #customer-cages-datatable, #customer-users-datatable) :is(th, td) { padding: 12px 10px !important; }
  table.cw-customer-table .cw-table-identity { min-width: 110px; max-width: 190px; }
  #customer-list-datatable th:first-child, #customer-list-datatable td:first-child { width: 70%; min-width: 150px; max-width: none; }
  .cw-identity-row { gap: 8px; }
  #customerDetailsModal .cw-metric-grid { margin-left: 0; margin-right: 0; }
  #customerDetailsModal .modal-content, #addCustomerModal .modal-content { max-height: calc(100dvh - 16px); }
  #customerDetailsModal .modal-header, #addCustomerModal .modal-header { padding: 16px; }
  #customerDetailsModal .modal-title, #addCustomerModal .modal-title { font-size: 19px; }
  #customerDetailsModal .modal-body { padding: 0 16px 20px; }
  #addCustomerModal .modal-body { padding: 20px 16px; }
  #customerDetailsModal .modal-footer, #addCustomerModal .modal-footer { padding: 12px 16px; }
  #customerDetailsModal .cw-customer-tabs { display: grid; grid-template-columns: 1.5fr 1.25fr .6fr; gap: 10px; }
  #customerDetailsModal .cw-customer-tabs .nav-link { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 56px; text-align: center; font-size: 13px; }
  #customerDetailsModal .cw-metric-grid { gap: 10px; }
  #customerDetailsModal .cw-metric { padding: 14px; }
  #customerDetailsModal .cw-metric-value { font-size: 25px; }
  #customerDetailsModal .cw-inventory-facts { gap: 12px 20px; }
  .cw-customer-form-section, .cw-customer-extra-fields, #customer-invite-user > form { padding: 16px; }
  .cw-customer-disclosure > summary { padding: 16px; }
}