/* ── Layout & Utility Overrides ───────────────────────────────────── */
/* Bootstrap overrides (--bs-*, .btn-primary, .btn-outline-primary)  */
/* live in styles_variables.css — the single source for theming.     */

.fixed-top, .nav-fixed #layoutSidenav #layoutSidenav_nav, .nav-fixed .topnav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--zw-z-sidenav);
}

.nav-fixed .topnav {
  z-index: var(--zw-z-topnav) !important;
}

.nav-fixed #layoutSidenav #layoutSidenav_nav {
  z-index: var(--zw-z-sidenav);
}

.inherit-color {
  color: inherit;        /* makes text inherit parent color */
  border-color: currentColor !important; /* makes border follow text color */
  background-color: transparent !important; /* remove fixed bg */
}

.ms-6 {
  margin-left: 2.5rem !important;
}

.ms-7 {
  margin-left: 3rem !important;
}

.ms-8 {
  margin-left: 4rem !important;
}

.ms-9 {
  margin-left: 5rem !important;
}

.ms-10 {
  margin-left: 6rem !important;
}

.mvh-60 {
  max-height: 60vh !important;
}

.mvh-65 {
  max-height: 65vh !important;
}

.mvh-70 {
  max-height: 70vh !important;
}

.mvh-80 {
  max-height: 80vh !important;
}


.mw-100px {
  max-width: 100px !important;
}

.mw-250px {
  max-width: 250px !important;
}


.mw-300px {
  max-width: 300px !important;
}

.mw-350px {
  max-width: 350px !important;
}

.mw-400px {
  max-width: 400px !important;
}

.mw-500px {
  max-width: 500px !important;
}

.checkbox-lg {
  transform: scale(1.3);
}

.errorlist {
    list-style: none;
    color: var(--zw-color-error);
    padding: 0;
    margin: 0;
}

.errorlist.nonfield {
    background-color: var(--zw-color-error-bg);
    border-color: var(--zw-color-error-border);

    padding: 1.25rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--zw-border-radius);
}

.table-smaller-font {
    font-size: .85rem
}

/* Quill size classes outside the editor.
   quill.snow.css scopes these to .ql-editor, so saved rich-text rendered
   elsewhere (previews, tables, emails) loses the size formatting. */
.ql-size-small { font-size: .75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }

/* Tighten line spacing inside Quill table cells. Browser/Bootstrap defaults
   (p margin: 1rem, line-height: 1.5) leave a big gap between rows of text in
   a cell; quill.snow.css resets these only inside .ql-editor. */
p.ql-table-block {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Saved rich-text rendered outside the editor (note previews, document footers).
   Bootstrap's default p margin (1rem) stacks with Quill's blank-line paragraphs
   into oversized gaps; tighten it and hide any leftover editor scratch nodes. */
.rich-text p {
    margin-bottom: .35rem;
}
.rich-text p:last-child {
    margin-bottom: 0;
}
.rich-text temporary,
.rich-text .ql-table-temporary {
    display: none;
}

/* Remove border from last table row */
.table tbody tr:last-child td {
    border-bottom: none;
}

/* The empty-state placeholder is not a row; don't hover-highlight it */
.table-hover > tbody > tr.table-empty-row:hover > * {
    --bs-table-bg-state: transparent;
    --bs-table-color-state: inherit;
}

.outter-account-profile {
  overflow: hidden;
  height: 10rem;
  width: 10rem;
  margin: auto;
  margin-bottom: 1rem;
  position: relative;
}

.outter-account-profile:hover {
  border-color: var(--zw-color-link-hover-core);
}

.outter-account-profile input[type="file"] {
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0 !important;
  position: absolute;
  top: 0;
  width: 100%;
}


.phone-input-prefix {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


@media print {
  @page { size: A4; margin: 12mm; }

  body * { visibility: hidden !important; }
  .printable-area, .printable-area * { visibility: visible !important; }

  .printable-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    font-size: 11.5pt !important;
  }

  #layoutSidenav, #layoutSidenav_content, main,
  .container, .container-fluid, .container-xl {
    all: unset !important;
    display: block !important;
    visibility: hidden !important;
  }

  #layoutSidenav_nav { display: none !important; }
  .card { box-shadow: none !important; border: none !important; }

  /* Compact spacing for invoice/estimate printouts so they fit on one page */
  .printable-area .p-4,
  .printable-area .p-md-5,
  .printable-area .p-lg-5 { padding: 1rem !important; }
  .printable-area .px-4,
  .printable-area .px-md-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .printable-area .pt-4 { padding-top: 0.75rem !important; }
  .printable-area .pb-4 { padding-bottom: 0.75rem !important; }
  .printable-area .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .printable-area .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .printable-area .mt-4 { margin-top: 0.75rem !important; }
  .printable-area .mb-3 { margin-bottom: 0.75rem !important; }
  .printable-area .mb-2 { margin-bottom: 0.5rem !important; }

  .printable-area .h2,
  .printable-area h2 { font-size: 1.4rem !important; }
  .printable-area .h4,
  .printable-area h4 { font-size: 1.1rem !important; }
  .printable-area .h5,
  .printable-area h5 { font-size: 1rem !important; }
  .printable-area .h6,
  .printable-area h6 { font-size: 0.9rem !important; }

  .printable-area table { font-size: 10.5pt !important; }
  .printable-area tr { page-break-inside: avoid !important; }
}

/* Stronger emphasis for invoice/estimate line-item bold text.
   System-font 700 reads soft against 400; 800 gives a clear visual hierarchy. */
.card.invoice td .fw-bold,
.card.invoice td.fw-bold { font-weight: 800 !important; }

.select2-dropdown {
  z-index: var(--zw-z-select2) !important;
}

/* Options the workflow picker returns disabled (billing locked, service already
   added, currency mismatch): the name reads normally and the blocker sits in its
   own pill on the right, instead of an emoji prefixed to the label. */
.select2-results__option[aria-disabled="true"]:has(.zw-select2-blocked) {
  cursor: not-allowed;
  background-color: var(--zw-color-gray-100);
}

.zw-select2-blocked {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.zw-select2-blocked__label {
  color: var(--zw-color-gray-600);
}

.zw-select2-blocked__note {
  flex: 0 0 auto;
  margin-top: 0.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--zw-color-gray-500);
  background-color: var(--zw-color-white);
  border: 0.0625rem solid var(--zw-color-gray-200);
  border-radius: 1rem;
}

.zw-select2-blocked__note i {
  font-size: 0.65rem;
}


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

/* Hide raw <select class="django-select2"> until select2 initializes it
   (it then gets .select2-hidden-accessible), so multi-selects don't flash
   as a full-height native list box. Height matches .form-control to avoid
   a layout jump. */
select.django-select2:not(.select2-hidden-accessible) {
  visibility: hidden;
  height: calc(1.5em + 0.75rem + 2px);
}

.non-interactive {
  pointer-events: none;
  opacity: .4;
}

.non-interactive .message {
  text-align: center;
}

.hidden-arrow::after {
  display: none;
}

/* Lines are swapped in/out via hx-swap="outerHTML" (service/workflow pickers,
   add/remove). Browser scroll-anchoring tries to keep the viewport "steady"
   across the mutation, but since the anchored node itself gets destroyed on
   an outerHTML swap, it loses its anchor and can jump the page instead —
   opt this container out so the scroll position is simply left alone. */
#idInvoiceServiceLines {
  overflow-anchor: none;
}

/* Invoice/estimate line item row (see invoice_add_form*.html): fixed-width
   numeric columns so qty/rate/tax/amount/actions never shrink below a
   usable size, with one flexible column for service/workflow/description. */
.invoice-line-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 72px 130px 140px 100px 64px;
  gap: 0.5rem;
  /* Zero basis: width = max(available, track minimums), never content-driven,
     so header and rows always share the same column positions. */
  flex: 1 0 0;
}

@media (max-width: 991px) {
  .invoice-line-grid {
    grid-template-columns: minmax(160px, 1fr) 64px 110px 120px 84px 56px;
  }
}

/* Below ~700px the fixed columns can no longer shrink without becoming
   unusable — scroll the table horizontally (keeping columns aligned)
   instead of squeezing every field illegibly. */
.invoice-lines-card {
  overflow: hidden;
}

.invoice-lines-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Header and rows span the scrolled width, not just the visible card, so the
   header background and row borders continue past the card edge when narrow. */
.invoice-lines-scroll > div {
  min-width: min-content;
}

.invoice-line-main {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.invoice-line-main > select.form-select {
  flex: 0 1 16rem;
  min-width: 0;
}

.invoice-line-main > .invoice-line-desc {
  flex: 1 1 auto;
  min-width: 0;
}


.invoice-line-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.invoice-line-pick > .invoice-line-pick-service {
  flex: 0 0 160px;
}

.invoice-line-pick > .invoice-line-pick-workflow {
  flex: 1 1 220px;
  min-width: 0;
}

/* Hours-billed / mark-final / skip-workflow: one shared strip below the
   main row instead of scattered across different columns. */
.invoice-line-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.35rem;
}

.invoice-line-discount-group {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  overflow: hidden;
}

.invoice-line-discount-group .form-control,
.invoice-line-discount-group .btn {
  border: none;
  border-radius: 0;
}

.invoice-line-discount-group .btn {
  border-left: 1px solid #ced4da;
}

.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
}

.row-action-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.invoice-line-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background-color: #f4f5f7;
  color: #667085;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

a.invoice-line-meta-pill:hover {
  color: #495057;
}

.invoice-line-meta-pill.is-on {
  background-color: #e8f5ee;
  color: #1a7f4e;
}

.invoice-line-meta-pill.is-off {
  background-color: #fbeaec;
  color: #c0293d;
}

.invoice-line-meta-pill.is-accent {
  background-color: #eef1fc;
  color: #3358d4;
}

a.invoice-line-meta-pill.is-accent:hover {
  background-color: #3358d4;
  color: #fff;
}

.list-group-services {
  margin-bottom: 3rem;
}
.list-group-services .list-group-item {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
}

.text-grey {
  color: var(--zw-color-gray-800);
}

.bg-grey {
  background: var(--zw-color-gray-800);
}

.bg-grey-soft {
  background: var(--zw-color-gray-100);
}

.bg-primary-soft {
  background-color: rgba(var(--zw-color-primary-core-rgb), 0.1);
}

.bg-secondary-soft {
  background-color: rgba(var(--zw-color-secondary-core-rgb), 0.1);
}

.bg-success-soft {
  background-color: rgba(var(--zw-color-success-rgb), 0.1);
}

.bg-danger-soft {
  background-color: rgba(var(--zw-color-danger-rgb), 0.1);
}

.bg-warning-soft {
  background-color: rgba(var(--zw-color-warning-rgb), 0.1);
}

.bg-orange {
  background-color: #fd7e14 !important;
}

.bg-orange-soft {
  background-color: rgba(253, 126, 20, 0.1);
}

.text-orange {
  color: #fd7e14 !important;
}

.bg-info-soft {
  background-color: rgba(var(--zw-color-info-rgb), 0.1);
}

.tree-branch {
  position: relative;
  padding-left: 20px; /* Adjust this to create space for the "L" shape */
}

.tree-branch::before {
  content: "";
  position: absolute;
  left: 0; /* Position of the vertical line */
  top: 0;
  width: 1px; /* Thickness of the vertical line */
  height: 75%; /* Length of the vertical line */
  background-color: var(--zw-color-gray-800); /* Color of the line */
  opacity: 0.3;
}

.tree-branch::after {
  content: "";
  position: absolute;
  left: 0; /* Starting point of the horizontal line */
  top: 75%; /* Matches the height of the vertical line */
  width: 15px; /* Length of the horizontal line */
  height: 1px; /* Thickness of the line */
  background-color: var(--zw-color-gray-800); /* Color of the line */
  opacity: 0.3;
}

.status-stripe {
  text-align: center;
  width: 100%; /* Increase width to span across edges */
  height: 1.5rem; /* Adjust size as needed */
  transform: rotate(-45deg) translate(-50%, -50%);
  transform-origin: 0 0;
  line-height: 1.5rem; /* Adjust for vertical alignment */
}


.divider-right {
  border-right: 0.0625rem solid var(--zw-color-gray-500);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

/* Custom */
.exceededTierLimit {
  filter: blur(3px);
  pointer-events: none; /* Disables mouse interactions */
  user-select: none; /* Prevents text selection */

}


.slider-container {
  position: relative;
  padding: 20px 0;
}

.slider-input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  height: 2px;
  top: 15px;
  z-index: 2;
}

.slider-visuals {
  position: relative;
  height: 2px;
  background-color: var(--zw-color-input-bg);
}

.slider-selected {
  position: absolute;
  background-color: var(--zw-color-primary-core);
  height: 2px;
}

.slider-thumb {
  position: absolute;
  margin-top: -5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background-color: var(--zw-color-primary-core);
  border-radius: 50%;
  cursor: pointer;
}

.left-thumb {
  transform: translateX(-50%);
}

.right-thumb {
  transform: translateX(-50%);
}


/* Range Slider */


.slider{
  height: 5px;
  position: relative;
  background: var(--zw-color-input-bg);
  border-radius: 5px;
}
.slider .progress{
  height: 100%;
  left: 25%;
  right: 25%;
  position: absolute;
  border-radius: 5px;
  background: var(--zw-color-info);
}
.range-input{
  position: relative;
}
.range-input input{
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: var(--zw-color-info);
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: var(--zw-color-info);
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
.cursor-pointer {
  cursor: pointer;
}
.rotate-90 {
  transform: rotate(90deg);
}


.notification-item:hover {
  background-color: initial;
}


.phone-input{
  display: flex;
  flex-direction: column;
}


.right-line {
  border-right: 5px var(--zw-color-muted-border) solid;
  height:2em
}

.top-line {
  border-top: 5px var(--zw-color-muted-border) solid;
}

.halved {
  width: 50%;
  float:left;
}

/* Dropdown menus inside responsive tables */
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
    position: static;
}

.table-responsive .dropdown-menu {
    position: absolute !important;
    z-index: var(--zw-z-dropdown) !important;
}

.bg-disabled {
  background-color: var(--zw-color-disabled-bg);
}


/* multiselect */
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.appearance-none {
  appearance: none;
}

.max-h-80 {
  max-height: 20rem;
}

.flatpickr-wrapper {
  z-index: 9999; /* Set a high z-index value */
}

/* An open static calendar must paint over the next picker's wrapper, which shares the z-index above */
.flatpickr-wrapper:focus-within {
  z-index: 10000;
}

.rangeDateFlatpickr[readonly] {
  background-color: var(--zw-color-white);
}

.rangeDateSimpleFlatpickr[readonly] {
  background-color: var(--zw-color-white);
}

.dateFlatpickr[readonly] {
  background-color: var(--zw-color-white);
}

.dateFlatpickr {
  display: block;
}

.leave-event-stripe {
  border-radius: 9999px;
  margin-right: -2px;

}


.rangeDateFlatpickr + input[type="text"][readonly] {
  background-color: white !important;
}

.sortable-ghost {
  border: none !important;
}

.dateFlatpickr+ input[type="text"][readonly]  {
  background-color: white;
}


.pe-none:has(.dateFlatpickr + input[type="text"][readonly]) .dateFlatpickr + input[type="text"][readonly] {
  background-color: var(--zw-color-disabled-bg);
}

[x-cloak] { display: none !important; }


.rounded-bottom-start {
    border-bottom-left-radius: var(--zw-border-radius) !important;
}


/* Capital Wizzards */
.progress-wizard-connector {
      flex: 1;
      height: 2px;
      background-color: var(--bs-gray-300);
      align-self: center;
      margin: 0 1rem;
      position: relative;
      top: -25px;
  }
  .progress-wizard-connector.completed {
      background-color: var(--bs-success);
  }
  
  .allocation-status-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 0.375rem 0.375rem 0 0;
      background: linear-gradient(90deg, var(--bs-primary), var(--bs-purple));
  }

/* Custom BG Dark Subtle */
.bg-dark-subtle {
  background-color: var(--zw-color-gray-600) !important;
}

.text-dark-subtle {
  color: var(--zw-color-gray-600) !important;
}

.border-dark-subtle {
  color: var(--zw-color-gray-700) !important;
}

.btn-outline-dark-subtle {
  color: var(--zw-color-gray-600);
  border-color: var(--zw-color-gray-600);
  background-color: transparent;
}

.btn-outline-dark-subtle:hover {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
  text-decoration: none !important;
}

.btn-outline-dark-subtle:focus,
.btn-outline-dark-subtle.focus {
  color: var(--zw-color-white);
  background-color: var(--zw-color-gray-600);
  border-color: var(--zw-color-gray-600);
  box-shadow: 0 0 0 0.2rem rgba(var(--zw-color-gray-600-rgb), 0.5);
}

.btn-outline-dark-subtle:disabled,
.btn-outline-dark-subtle.disabled {
  color: var(--zw-color-gray-600);
  background-color: transparent;
  opacity: 0.65;
}

.btn-group .btn-outline-dark-subtle:hover {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
  text-decoration: none !important;
}

.btn-group .btn-outline-dark-subtle:focus,
.btn-group .btn-outline-dark-subtle.focus {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--zw-color-gray-600-rgb), 0.5) !important;
}

.btn-group .btn-outline-dark-subtle.active,
.btn-group .btn-outline-dark-subtle:active {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
}

.btn-dark-subtle {
  color: var(--zw-color-white);
  background-color: var(--zw-color-gray-600);
  border-color: var(--zw-color-gray-600);
}

.btn-dark-subtle:hover {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
  text-decoration: none !important;
}

.btn-dark-subtle:focus,
.btn-dark-subtle.focus {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--zw-color-gray-600-rgb), 0.5) !important;
}

.btn-dark-subtle:active,
.btn-dark-subtle.active {
  color: var(--zw-color-white) !important;
  background-color: var(--zw-color-gray-700) !important;
  border-color: var(--zw-color-gray-700) !important;
}

.btn-dark-subtle:disabled,
.btn-dark-subtle.disabled {
  color: var(--zw-color-white);
  background-color: var(--zw-color-gray-600);
  border-color: var(--zw-color-gray-600);
  opacity: 0.65;
}

/* Custom Fields Drag & Drop */
.sortable-ghost {
  opacity: 0.5;
}

.sortable-drag {
  opacity: 0.9;
  cursor: grabbing;
}

.sortable-drag .btn,
.sortable-ghost .btn {
  opacity: 0;
  pointer-events: none;
}

/* ── Disabled-looking-normal ──────────────────────────────────────── */
/* Keeps elements disabled but visually identical to their enabled state. */
.disabled-subtle,
.disabled-subtle:disabled,
.disabled-subtle.disabled {
  opacity: 1 !important;
  color: inherit !important;
  pointer-events: none;
  cursor: default !important;
}

/* ── Field-type icon grid ─────────────────────────────────────────── */
.field-type-card {
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Invoice card layout — footer sticks to bottom ──────────────── */
.card.invoice {
  min-height: 100vh;
}

/* ── Topnav right-side dropdowns: force absolute at all widths ───── */
/* Bootstrap sets .navbar-nav .dropdown-menu { position: static } below
   the expand breakpoint, which pushes the toggle button up when the
   menu opens inside a d-flex flex-column <li>. The right-side ul is
   always visible (not collapsed into the offcanvas), so its dropdowns
   must float over the page regardless of viewport width. */
.topnav .navbar-nav.order-lg-2 .dropdown-menu {
  position: absolute;
}

/* ── Invoice notes ───────────────────────────────────────────────── */
.card.invoice .notes-content p {
  margin-bottom: 0.25rem;
}

/* ── List table loading fade ─────────────────────────────────────── */
/* Fade any list table (shared core/components/table.html) while a request is in
   flight, so it reads as "updating". It fades when either:
     (a) the list container itself is loading — auto-refresh, applied filters, or a
         search box whose hx-indicator points at the container; htmx puts the
         .htmx-request class on that ancestor, or
     (b) a control inside the table is loading — a sort header or pagination link,
         which carries .htmx-request itself. */
.table-loading-wrap {
  transition: opacity 0.15s ease;
}
.htmx-request .table-loading-wrap,
.table-loading-wrap:has(.htmx-request) {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Search-box clear (X) button ─────────────────────────────────── */
/* Hidden via CSS when the input is empty (relies on :placeholder-shown).
   Sibling selector requires .search-clear to come AFTER the search input. */
.search-clear {
  cursor: pointer;
}
input[name="search"]:placeholder-shown ~ .search-clear {
  display: none;
}

/* ── Invoice print layout ────────────────────────────────────────── */
/* Print-only density fixes for the invoice/estimate card.
   The on-screen card uses generous (p-5 = 3rem) padding and loose
   spacing; carried into print it tips even small invoices onto a second
   page and leaves the notes/bank-details footer stranded or split.
   These rules only apply when printing (and to "Export to PDF" via the
   browser print path) and never touch the on-screen layout. */
@media print {
  /* 1. Trim the oversized section padding. */
  .invoice .card-header,
  .invoice .card-body,
  .invoice .p-5,
  .invoice .p-4 {
    padding: 1rem !important;
  }
  .invoice .card-footer {
    padding: 0.75rem 1rem !important;
  }

  /* 2. Densify the line-item rows and the totals block. */
  .invoice table td,
  .invoice table th {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  .invoice .table-sm td {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
  }
  .invoice .row.justify-content-end.mt-4 {
    margin-top: 0.5rem !important;
  }

  /* 3. Compact the notes footer (collapse the loose paragraph
     spacing rich-text notes carry) and keep it from splitting
     across a page boundary. Note: NOT applied to the totals block,
     which can be tall (many payment rows) and should flow. */
  .invoice .notes-content {
    line-height: 1.3 !important;
  }
  .invoice .notes-content p {
    margin-bottom: 0.15rem !important;
  }
  .invoice .notes-content p:empty {
    display: none !important;
  }
  .invoice .card-footer,
  .invoice .notes-content {
    break-inside: avoid;
  }
}
/* ── Deep-linked table rows (#charge-… anchors) ───────────────────── */
/* The theme's global :target::before offset hack renders as a phantom
   first cell inside a table row, so rows opt out and offset the sticky
   topnav with scroll-margin instead. --bs-table-bg tints the row's own
   cells (Bootstrap paints cell backgrounds, not the tr). */
tr:target::before {
  content: none;
}
tr:target {
  scroll-margin-top: 6rem;
  --bs-table-bg: rgba(var(--zw-color-primary-core-rgb), 0.08);
}

/* Lines built from one set of unlinked timesheet entries. The accent is the
   only thing saying they belong together once the group is split into several
   rows, so it sits on every line of the group, not just the first — the list is
   drag-sortable and there is no dependable "first". */
.invoice-line-time-group {
  border-left: 3px solid #3358d4;
  background-color: #fbfcff;
}