#wallpaper {
  z-index: 1;
  background-image: url("../img/wallpaper.d2d0c8cc6e8a.webp");
  background-position: center;
  height: 70vh;
  width: 100%;
}

.litepicker svg {
  fill: #206bc4 !important;
}

/* Maybe will be obsolete after Tabler is updated to newer version */
.nav-link.active {
  background-color: var(--tblr-navbar-active-bg)
}

.navbar {
  --tblr-navbar-color: var(--tblr-heading-color)
}

li.nav-item:hover:not(:has(.dropdown-item)) {
  background-color: rgba(var(--tblr-muted-rgb), .04);
}

li.nav-item .dropdown-item:hover {
  background-color: rgba(var(--tblr-muted-rgb), .04);
}

a.nav-link:hover>span.nav-link-icon {
  color: var(--tblr-dropdown-link-hover-bg);
}

li.nav-item .dropdown-item:hover:not(:hover) {
  background-color: transparent;
}


.table-hover>tbody>tr:hover>* {
  --tblr-table-accent-bg: transparent;
  background-color: rgba(var(--tblr-muted-rgb), .04);
}

.download-icon {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 4px;
  padding-right: 5px;
  z-index: 1;
}

.img-container:hover .download-icon {
  display: block;
}

.img-container:hover .img-thumbnail-custom {
  transform: scale(1.07);
  cursor: pointer;
}

.img-container {
  position: relative;
  margin: 1px;
}

.img-container a {
  text-decoration: none;
}

/* The tile width truncates the name, not an arbitrary character count: as much
   as fits is visible, and the full name stays in the tooltip (title). */
.attachment-name {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

.audio-attachment {
  width: min(100%, 360px);
  min-width: 0;
}

.comment-content .audio-attachment {
  width: 100%;
}

.comment-content .audio-attachment-controls {
  max-width: 360px;
}

.audio-attachment-controls {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--tblr-bg-surface-secondary, #f1f3f4);
}

.audio-attachment-controls:has(audio:not([hidden])) {
  background: transparent;
  border-radius: 0;
}

.audio-attachment-controls:has(audio:not([hidden])) .audio-attachment-download {
  display: none;
}

.audio-attachment audio {
  display: block;
  width: 100%;
  min-width: 0;
}

.audio-attachment audio[hidden],
.audio-attachment .audio-attachment-start[hidden] {
  display: none;
}

.audio-attachment-start {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  height: 3rem;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: var(--tblr-body-color);
  cursor: pointer;
}

.audio-attachment-track {
  flex: 1;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: currentColor;
  opacity: 0.3;
}

.audio-attachment .attachment-name {
  width: 100%;
}

.voice-transcription > summary {
  min-height: 2.75rem;
  padding-block: 0.6rem;
  cursor: pointer;
}

.audio-attachment .audio-attachment-download {
  display: inline-flex;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 3rem;
  padding-right: 0.25rem;
  color: var(--tblr-body-color);
}

.img-thumbnail-custom {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#pull-copy-attachments-modal .copy-attachment-picker-row {
  cursor: pointer;
}

#pull-copy-attachments-modal .copy-attachment-picker-select-all {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.25rem;
}

#pull-copy-attachments-modal .copy-attachment-picker-thumbnail,
#pull-copy-attachments-modal .copy-attachment-picker-row .file-extension {
  flex: 0 0 80px;
}

#pull-copy-attachments-modal .copy-attachment-picker-details {
  min-width: 0;
}

#pull-copy-attachments-modal .copy-attachment-picker-name {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.img-count-badge {
  position: absolute;
  font-size: 20px;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;

  color: #888;
  top: 0;
  margin: 1px;
  margin-left: 1px;
  padding-left: 1px;
  z-index: 1;
  line-height: 15px;
}


.attachment-title {
  position: absolute;
  bottom: 0;
  margin: 0;
  font-size: 16px;
  left: 0;
  right: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #6c757d;
}

button.no-gallery.download-icon.file-download {
  background: none;
  border: none;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 10;
  width: 87%;
  height: 15%;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  padding: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container {
  position: relative;
  display: inline-block;
}

.icon-img-cont {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height .35s linear;
}

.svg-container {
  transform: scale(1.5);
  display: inline-block;
  color: #b9b9b9;
}

figure.attachment {
  margin-left: 10px;
  display: inline-block;
  width: 110px;
  overflow: hidden;
}

.highlighted {
  background-color: rgba(0, 128, 0, 0.5);
  transition: background-color 0s linear;
}

.highlighted-out {
  background-color: white;
  transition: background-color 1.6s linear;
}

div.bg.private-comments {
  background-color: #a8a8a8;
  color: white;
}

.servicepick {
  cursor: pointer;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

.service-remove {
  cursor: pointer;
}

/* Orphan-service indicator (deleted from price list). Inline prefix
   inside the name cell. Row hover comes from .table-hover; hovering
   the warning itself swaps to its own tint and suppresses the row
   tint so the click target reads as separate. */
.orphan-warning {
  cursor: pointer;
  line-height: 0;
  padding: 0.5rem 0.25rem;
  margin-right: 0.25rem;
}

.orphan-warning:hover {
  background-color: var(--tblr-gray-100);
}

.orphan-warning:focus-visible {
  outline: none;
}

#visual-tooth-services tr:has(.orphan-warning:hover) > td {
  --tblr-table-bg-state: transparent;
  background-color: transparent;
}

thead input {
  width: 100%;
}

table.datatable {
  border-collapse: collapse;
}

/* Prevent FOUC: hide the raw <select> until TomSelect takes it over.
   TomSelect adds the `tomselected` class on init, after which it keeps the
   original element hidden via `ts-hidden-accessible`. Without this rule a
   native <select multiple> with many options (e.g. the order-tag services
   field) flashes its full option list on load before TomSelect initializes. */
select[data-tom-select]:not(.tomselected) {
  display: none;
}

/* Tom Select inside DataTable search header — match form-control-sm sizing */
table.datatable thead .ts-wrapper {
  width: 98%;
  height: 21.14px;
  min-height: 0 !important;
  overflow: visible;
}

table.datatable thead .ts-control {
  padding: 0 .25rem !important;
  font-size: .75rem !important;
  min-height: 0 !important;
  line-height: 1.4285714286;
  border: none !important;
}

table.datatable thead .ts-wrapper.multi .ts-control > input {
  min-width: 0;
  width: 0;
}

table.datatable thead .ts-wrapper.multi .ts-control > div {
  margin: 0 3px 0 0;
  padding: 0 4px;
  text-transform: none;
}

table.datatable thead .ts-wrapper.multi .ts-control:has(.ts-item-stacked),
table.datatable thead .ts-wrapper.multi .ts-control:has(.ts-item-badge) {
  flex-wrap: nowrap;
}

table.datatable thead .ts-wrapper.multi .ts-control:has(.ts-item-stacked) > input,
table.datatable thead .ts-wrapper.multi .ts-control:has(.ts-item-badge) > input {
  min-width: 1rem !important;
  width: 1rem !important;
  flex-shrink: 0;
}

table.datatable thead .ts-wrapper.multi .ts-control > div.ts-item-stacked,
table.datatable thead .ts-wrapper.multi .ts-control > div.ts-item-badge {
  margin: 0 0 0 -8px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
}

table.datatable thead .ts-wrapper.multi .ts-control > div.ts-item-badge {
  margin: 0;
}

table.datatable thead .ts-wrapper.multi .ts-control > div.ts-item-stacked:first-child {
  margin-left: 0;
}

/* Dropdown appended to body — ensure it's wide enough for badge + text */
body > .ts-dropdown {
  width: auto !important;
  min-width: 120px;
}


table.datatable thead tr {
  background-color: var(--tblr-bg-surface);
}

table.datatable th,
table.datatable td {
  border: 1px solid #dee2e6;
  padding: 4px;
}

@media (max-width: 768px) {
  .delete-icon {
    opacity: 1;
  }

  .edit-comment-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 769px) {
  .delete-icon {
    opacity: 0;
    transition: opacity 0.2s;
  }

  .list-group-item:hover .delete-icon {
    opacity: 1;
  }
}

@media print {
  html[data-bs-theme="dark"],
  html[data-bs-theme="dark"] body {
    background: #fff !important;
    color: #000 !important;
    color-scheme: light;
  }

  html[data-bs-theme="dark"] .card {
    background: transparent !important;
  }

  .print-section {
    display: block;
  }

  #printOptionsModal {
    display: none !important;
  }

  .ticket-section {
    color: #000 !important;
  }

  /* Label print styles */
  body.printing-label .label-section {
    position: relative;
    text-align: center;
    width: 100mm;
    height: 100mm;
    margin: 0;
    padding: 5mm;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-label .label-section>* {
    margin: 0 auto;
  }

  .label-qr {
    width: 50mm;
    height: 50mm;
  }

  .label-title-text {
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
  }

  .label-date-text {
    font-size: 2.5rem;
    font-weight: bold;
    white-space: nowrap;
    color: #000;
  }

  .p-print {
    padding: 0 !important;
  }

  .avoid-page-break {
    display: block;
    page-break-before: avoid;
  }

  div>figure.attachment {
    display: none;
  }

  .font-print {
    font-size: 16px;
    color: black !important;
  }

  .title-print {
    font-size: 18px;
    font-weight: bold;
    color: black;
  }

  .border-print {
    padding: 0 2px !important;
    border: 1px solid #ccc;
  }

  .form-check-input {
    --tblr-form-check-bg: transparent;
  }

  .table tbody tr td {
    color: black;
    --tblr-table-bg-type: transparent !important;
  }

  .text-success,
  .text-azure {
    color: #000 !important;
    font-style: italic;
  }

  text.toothNumber {
    fill: black !important;
  }

  rect.bridgeLine.line {
    stroke: black !important;
  }

  path.toothShape.shape {
    stroke: black !important;
  }

  path.toothShape.bridge {
    fill: url(#dsoBridgeGradient) !important;
    stroke: #96A6DD !important;
  }

  rect.toothBridge.bridge {
    fill: url(#dsoBridgeGradient) !important;
  }

  path.toothShape.single {
    fill: url(#dsoSingleGradient) !important;
    stroke: #80BBC5 !important;
  }

  g.toothImplant.implant path,
  g.toothImplant.implant line {
    fill: #fef0e6 !important;
  }

  .tasks-section .list-group { display: block; }
}


.tooth {
  stroke: black;
  font-size: 24pt;
}

text.toothNumber {
  fill: black;
  font-size: 24pt;
  font-weight: 700;
  font-family: var(--tblr-font-sans-serif);
  font-size: 24pt;
}

text.toothNumber.selected {
  fill: black;
}

path.toothShape {
  stroke: none;
  fill: none;
}

rect.tooth.btn {
  fill: transparent;
  stroke: none;
}

svg[data-edit-mode="false"] rect.tooth.btn {
  cursor: default;
}

.dental-map-action-button {
  flex: 1 1 0;
  min-width: 0;
}

.dental-map-missing.btn-outline-secondary {
  --dental-missing-color: #536174;
  --tblr-btn-color: var(--dental-missing-color);
  --tblr-btn-border-color: var(--dental-missing-color);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--dental-missing-color);
  --tblr-btn-hover-border-color: var(--dental-missing-color);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--dental-missing-color);
  --tblr-btn-active-border-color: var(--dental-missing-color);
}

html[data-bs-theme=dark] .dental-map-missing.btn-outline-secondary {
  --dental-missing-color: #b6c4d5;
  --tblr-btn-hover-color: #182433;
  --tblr-btn-active-color: #182433;
}

.order-services-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.order-services-jaw-buttons {
  display: flex;
  flex: 0 1 9.5rem;
  min-width: 0;
  gap: 0.25rem;
  margin-left: auto;
}

.dental-map-jaw-button {
  flex: 1 1 0;
  min-width: 0;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0.1875rem 0.3125rem;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--tblr-primary);
  border: 1px solid var(--tblr-border-color);
  background-color: transparent;
  box-shadow: none;
}

.dental-map-jaw-button:hover:not([aria-pressed="true"]) {
  color: var(--tblr-primary);
  border: 2px solid var(--tblr-primary);
  background-color: transparent;
  box-shadow: none;
}

.dental-map-jaw-button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--tblr-primary);
  background-color: var(--tblr-primary);
}

.dental-map-jaw-button[aria-pressed="true"]:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--tblr-primary) 85%, black);
  background-color: color-mix(in srgb, var(--tblr-primary) 85%, black);
}

.order-services-jaw-icon {
  width: 0.875rem;
  height: 0.625rem;
  flex: none;
}

@media (max-width: 575.98px) {
  #inline-dental-map-actions > .d-flex {
    flex-wrap: wrap;
  }

  #inline-dental-map-actions .dental-map-action-button {
    flex-basis: calc(50% - 0.25rem);
  }
}

.order-services-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.order-services-list {
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
  min-width: 0;
}

.order-services-dental-preview {
  width: 100%;
  max-width: 520px;
  max-height: 360px;
  justify-self: center;
  overflow: hidden;
  pointer-events: none;
}

.order-services-dental-preview svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
}

table.table-hover > tbody > tr.patient-order-current > * {
  --tblr-table-bg-state: color-mix(in srgb, var(--tblr-primary) 10%, transparent);
}

#patient-order-attach-modal .ts-control > .patient-order-attach-picker-label {
  flex: 1 1 auto;
  min-width: 0;
}

.patient-order-expander-column,
.patient-order-expander-cell {
  width: 1px;
  white-space: nowrap;
}

.patient-order-expander-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--tblr-border-radius);
  color: inherit;
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  padding: 0;
  width: 1.5rem;
}

.patient-order-expander-button:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 1px;
}

@media (max-width: 767.98px) {
  .patient-orders-table {
    width: 100%;
    table-layout: fixed;
  }

  .patient-orders-table-wrapper {
    overflow-x: hidden;
  }

  .patient-orders-table > :not(caption) > * > * {
    overflow: hidden;
  }

  .patient-orders-table .patient-order-expander-column,
  .patient-orders-table .patient-order-expander-cell {
    width: 2rem;
  }

  .patient-orders-table .patient-order-number-column {
    width: 6rem;
  }

  .patient-orders-table .patient-order-created-column {
    width: 5.5rem;
  }

  .patient-orders-table .patient-order-status-column {
    width: 6rem;
  }

  .patient-orders-table .patient-order-actions-column {
    width: 2rem;
  }

  .patient-orders-table > thead > tr > .patient-order-number-column,
  .patient-orders-table > thead > tr > .patient-order-created-column,
  .patient-orders-table > thead > tr > .patient-order-status-column,
  .patient-orders-table > thead > tr > .patient-order-actions-column {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
  }

  .patient-orders-table > tbody > tr > .patient-order-number-column {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
  }

  .patient-orders-table .patient-order-mobile-title,
  .patient-orders-table .patient-order-mobile-status-name,
  .patient-orders-table .patient-order-mobile-status-date {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 991.98px) {
  .order-services-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-services-list {
    order: 2;
  }

  .order-services-dental-preview {
    order: 1;
  }
}

rect.toothBridge {
  fill: none;
  stroke: none;
}

g.toothImplant path,
g.toothImplant line {
  fill: none;
  stroke: none;
}

g.toothImplant.implant path,
g.toothImplant.implant line {
  fill: rgba(var(--tblr-orange-lt-rgb));
  stroke: #FBAB77;
  stroke-width: 2.1602;
}

svg .dental-root-layer g.toothRoot {
  display: none;
}

svg .dental-root-layer g.toothRoot.root {
  display: inline;
}

svg .dental-root-layer .root-tone-2,
svg .dental-root-layer .root-tone-6,
svg .dental-root-layer .root-tone-7 {
  fill: #E1E5E9;
  stroke: #BAC2CB;
  stroke-width: 2px;
}

svg .dental-root-layer .root-tone-4 { fill: #C5CDD5; stroke: none; }

html[data-bs-theme=dark] svg .dental-root-layer .root-tone-2,
html[data-bs-theme=dark] svg .dental-root-layer .root-tone-6,
html[data-bs-theme=dark] svg .dental-root-layer .root-tone-7 {
  fill: #303D4D;
  stroke: #526174;
}

html[data-bs-theme=dark] svg .dental-root-layer .root-tone-4 { fill: #46566A; }

@media print {
  svg .dental-root-layer g.toothRoot.root,
  svg .dental-root-layer g.toothRoot.root path {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


path.toothShape.shape {
  fill: none;
  stroke: black;
  stroke-width: 2.5px;
}

path.toothShape.fill {
  fill: url(#dsoSelectedGradient);
  stroke: #4E6179;
  stroke-width: 3px;
}

path.toothShape.bridge {
  fill: url(#dsoBridgeGradient);
  stroke: #96A6DD;
  stroke-width: 2.5px;
}

rect.toothBridge.bridge {
  fill: url(#dsoBridgeGradient);
  stroke: none;
}

rect.bridgeLine {
  fill: none;
  stroke: none;
}

rect.bridgeLine.line {
  stroke: black;
}

path.toothShape.single {
  fill: url(#dsoSingleGradient);
  stroke: #80BBC5;
  stroke-width: 2.5px;
}

rect.toothBridge.change {
  display: none;
}

path.toothShape.change {
  fill: url(#dsoBridgeSelectedGradient);
  stroke: #5D74CC;
  stroke-width: 3px;
}

path.toothShape.single.change {
  fill: url(#dsoSingleSelectedGradient);
  stroke: #3F93A2;
  stroke-width: 3px;
}

/* Quick fix for Trix editor dark mode while https://github.com/basecamp/trix/issues/947 is not resolved */
.trix-button {
  background: #fff !important;
}

trix-editor.trix-content>div>figure.attachment.attachment--preview {
  width: auto;
}

.modal-content.dental {
  width: 150%;
}

.dental-map-mobile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.dental-map-mobile-actions > .text-center {
  min-width: 0;
}

.dental-map-mobile-actions > .text-center:nth-child(5),
.dental-map-mobile-actions > .dental-map-errors {
  grid-column: 1 / -1;
}

.dental-map-mobile-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  white-space: normal;
}

.trix-content .attachment--preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* dental map dark mode */

html[data-bs-theme=dark] text.toothNumber {
  fill: white;
}

html[data-bs-theme=dark] rect.bridgeLine.line {
  stroke: white;
}

html[data-bs-theme=dark] path.toothShape.shape {
  stroke: white;
}

html[data-bs-theme=dark] path.toothShape.bridge {
  fill: url(#dsoBridgeGradientDark);
  stroke: #6476A3;
}

html[data-bs-theme=dark] rect.toothBridge.bridge {
  fill: url(#dsoBridgeGradientDark);
}

html[data-bs-theme=dark] path.toothShape.single {
  fill: url(#dsoSingleGradientDark);
  stroke: #548994;
}

html[data-bs-theme=dark] rect.toothBridge.change {
  display: none;
}

html[data-bs-theme=dark] path.toothShape.fill {
  fill: url(#dsoSelectedGradientDark);
  stroke: #9AA7B8;
  stroke-width: 3px;
}

html[data-bs-theme=dark] path.toothShape.change {
  fill: url(#dsoBridgeSelectedGradientDark);
  stroke: #8FA2D6;
  stroke-width: 3px;
}

html[data-bs-theme=dark] path.toothShape.single.change {
  fill: url(#dsoSingleSelectedGradientDark);
  stroke: #7DB6C1;
  stroke-width: 3px;
}

html[data-bs-theme=dark] g.toothImplant.implant path,
html[data-bs-theme=dark] g.toothImplant.implant line {
  stroke: #9D4C19;
}

/* Dark mode fixes for image thumbnails */
html[data-bs-theme=dark] .img-thumbnail-custom {
  border-color: var(--tblr-border-color);
}

/* Dark mode fixes for image count badge */
html[data-bs-theme=dark] .img-count-badge {
  color: var(--tblr-body-color);
  text-shadow:
    -1px -1px 0 var(--tblr-bg-surface),
    1px -1px 0 var(--tblr-bg-surface),
    -1px 1px 0 var(--tblr-bg-surface),
    1px 1px 0 var(--tblr-bg-surface);
}

/* Dark mode fixes for highlighted row transition */
html[data-bs-theme=dark] .highlighted-out {
  background-color: var(--tblr-bg-surface);
}

/* Dark mode fixes for private comments */
html[data-bs-theme=dark] div.bg.private-comments {
  background-color: var(--tblr-gray-600);
}

/* Dark mode fixes for DataTable borders */
html[data-bs-theme=dark] table.datatable th,
html[data-bs-theme=dark] table.datatable td {
  border-color: var(--tblr-border-color);
}

/* Dark mode fixes for DataTable selected row */
html[data-bs-theme=dark] table.table.dataTable>tbody>tr.selected>* {
  box-shadow: inset 0 0 0 9999px var(--tblr-gray-700) !important;
  color: var(--tblr-body-color) !important;
}

/* Dark mode fixes for DataTable scroll body border */
html[data-bs-theme=dark] div.dt-scroll-body {
  border-bottom-color: var(--tblr-border-color);
}

/* Dark mode fixes for Trix editor buttons */
html[data-bs-theme=dark] .trix-button {
  background: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color);
}

/* Dark mode fixes for pull-to-refresh */
html[data-bs-theme=dark] .ptr--text,
html[data-bs-theme=dark] .ptr--icon {
  color: rgba(255, 255, 255, 0.5);
}

html[data-bs-theme=dark] .ptr--ptr {
  box-shadow: inset 0 -3px 5px rgba(255, 255, 255, 0.1);
}

/* Dark mode fixes for Litepicker SVG icons */
html[data-bs-theme=dark] .litepicker svg {
  fill: var(--tblr-primary) !important;
}

/* Dark mode fixes for input group button border */
html[data-bs-theme=dark] .input-group .btn {
  border-color: var(--tblr-border-color);
}

/* Dark mode fixes for dropzone remove button */
html[data-bs-theme=dark] div.dropzone div.dz-preview a.dz-remove {
  color: var(--tblr-body-color);
}

/* ============================================
   Tom Select Dark Mode Overrides
   ============================================ */
html[data-bs-theme=dark] .ts-control,
html[data-bs-theme=dark] .ts-wrapper.single.input-active .ts-control {
  background: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

html[data-bs-theme=dark] .ts-control input {
  color: var(--tblr-body-color);
}

html[data-bs-theme=dark] .ts-dropdown,
html[data-bs-theme=dark] .ts-dropdown.form-control,
html[data-bs-theme=dark] .ts-dropdown.form-select {
  background: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] .ts-dropdown .optgroup-header {
  background: var(--tblr-bg-surface);
  color: var(--tblr-muted);
}

html[data-bs-theme=dark] .ts-dropdown .active {
  background-color: var(--tblr-primary);
  color: #fff;
}

html[data-bs-theme=dark] .ts-dropdown .option,
html[data-bs-theme=dark] .ts-dropdown .create {
  color: var(--tblr-body-color);
}

html[data-bs-theme=dark] .ts-wrapper.multi .ts-control>div {
  background: var(--tblr-gray-600);
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] .ts-wrapper.multi .ts-control>div.active {
  background: var(--tblr-primary);
  color: #fff;
}

html[data-bs-theme=dark] .ts-dropdown .dropdown-header {
  background: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] .ts-dropdown .spinner:after {
  border-color: var(--tblr-border-color) transparent;
}

/* ============================================
   Comment Template Bar Dark Mode
   ============================================ */
html[data-bs-theme=dark] #comment-form .comment-title-bar,
html[data-bs-theme=dark] #edit-comment-form .comment-title-bar {
  background: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] .comment-title-tag:hover {
  background: var(--tblr-bg-surface-tertiary);
}

/* ============================================
   Tags and Legends Dark Mode
   ============================================ */
html[data-bs-theme=dark] .tag {
  color: black;
  /* Keep black - background is always light from color-mix formula */
}

html[data-bs-theme=dark] .tag .btn-close {
  filter: none;
  /* Don't invert the X button - it should stay visible on light bg */
}

/* The tag library's name column has no width of its own, so an untruncated
   255-character name pushes every other column off the page (/tags/). Cap the
   label by WIDTH, the way .attachment-name does: as much as fits is visible
   and the full name stays in the title.

   A PLAIN max-width on purpose. `min(50ch, 100%)` was tried first and did
   nothing: the chip is sized by its content, so the percentage resolves
   against an indefinite width and the whole declaration can be dropped —
   leaving no cap at all. One unconditional length always applies. */
.order-tag-name {
  display: inline-block;
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 768px) {
  .order-tag-name {
    max-width: 14ch;
  }
}

.customer-label-name-wrap {
  display: inline-block;
  max-width: 50ch;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.customer-label-notes {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .customer-label-name-wrap {
    max-width: 28ch;
  }
}

@media (pointer: coarse) {
  .customer-label-compact {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
}

.tag .order-tag-remove {
  margin-right: -0.25rem;
  margin-left: -0.125rem;
  padding: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
}

.tag .order-tag-remove::after {
  content: "\00D7";
}

.tag .order-tag-remove:hover {
  color: var(--tblr-danger);
}

/* ============================================
   Trix Editor Dark Mode - Complete Fix
   ============================================ */
html[data-bs-theme=dark] trix-editor {
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] trix-toolbar .trix-button-group {
  border-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0.5em;
}

html[data-bs-theme=dark] trix-toolbar .trix-button:not(:first-child) {
  border-left-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] trix-toolbar .trix-button {
  border-bottom-color: var(--tblr-border-color);
}

html[data-bs-theme=dark] trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

html[data-bs-theme=dark] trix-toolbar .trix-button.trix-active {
  background: var(--tblr-primary);
  color: #fff;
}

html[data-bs-theme=dark] trix-toolbar .trix-button.trix-active::before {
  filter: invert(0);
}

html[data-bs-theme=dark] trix-toolbar .trix-button:disabled {
  color: var(--tblr-muted);
}

html[data-bs-theme=dark] trix-toolbar .trix-button:disabled::before {
  opacity: 0.25;
}

html[data-bs-theme=dark] trix-toolbar .trix-dialog {
  background: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
}

html[data-bs-theme=dark] trix-toolbar .trix-input--dialog {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

/* ============================================
   Checkbox Dark Mode Fix
   ============================================ */
html[data-bs-theme=dark] .form-check-input:not(:checked) {
  background-color: var(--tblr-bg-surface);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Accordion Dark Mode Fix
   ============================================ */
html[data-bs-theme=dark] .accordion-button {
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
}

html[data-bs-theme=dark] .accordion-button:not(.collapsed) {
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
}

html[data-bs-theme=dark] .accordion-button::after {
  filter: invert(1);
}

.input-group .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1;
  border: 1px solid #ced4da;
}

.input-group .btn svg {
  width: 1em;
  height: 1em;
  margin: 0;
}

.text-truncate div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 17vw;
}

table.table.dataTable>tbody>tr.selected>* {
  box-shadow: inset 0 0 0 9999px #e8e9ec !important;
  color: black !important;
}

div.dt-scroll-body {
  border-bottom-color: #dee2e6;
}

div.dt-scroll-body::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.dropzone .dz-preview div.dz-image {
  width: 80px;
  height: 80px;
  position: relative;
}

div.dropzone div.dz-preview a.dz-remove {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 24px;
  color: #000;
  cursor: pointer;
  z-index: 5000;
  display: none;
}

.dz-preview .dz-remove::after {
  content: '×';
}

div.dropzone div.dz-preview:hover a.dz-remove {
  display: block;
  text-decoration: none;
}

.tag-item:hover {
  z-index: 2;
}

.tag {
  --tag-color: white;
  background-color: color-mix(in srgb, white, color-mix(in srgb, white, var(--tag-color)));
  border-color: var(--tag-color);
  gap: 0.1rem;
  padding: 0.2rem;
  color: black;
  /* Never let the label wrap: a wrapped line would spill outside the tag's
     coloured pill (background/border stay on the first line). Keep the tag on
     one line everywhere it's used. */
  white-space: nowrap;
}

.tag-danger {
  --tag-color: var(--tblr-danger);
}

.tag-warning {
  --tag-color: var(--tblr-warning);
}

.tag-success {
  --tag-color: var(--tblr-success);
}

.tag-azure {
  --tag-color: var(--tblr-azure);
}

.tag-purple {
  --tag-color: var(--tblr-purple);
}

.tag-secondary {
  --tag-color: var(--tblr-secondary);
}

.archived-order-tag {
  --tag-color: #9baec2;
  font-size: 0.75rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}

.tag-info {
  --tag-color: var(--tblr-info);
}

.tag-primary {
  --tag-color: var(--tblr-primary);
}

.tag-teal {
  --tag-color: var(--tblr-teal);
}

.tag-red {
  --tag-color: var(--tblr-red);
}

.tag-cyan {
  --tag-color: var(--tblr-cyan);
}

.tag-dt {
  width: 1rem;
  height: 1rem;
  border-radius: 0.18rem;
}

.legend.order-tag-legend {
  --legend-background-color: white;
  background-color: var(--legend-background-color);
  width: 1rem;
  height: 1rem;
}

.file-extension {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(204, 204, 204);
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.list-group-item:hover {
  background-color: transparent;
  cursor: default;
}

th.th-narrow {
  max-width: 40px;
  white-space: nowrap;
}

.btn-hover-red:hover {
  outline: 2px solid red;
}

#pricebook-form .col-form-label {
  max-width: 100px;
}

#pricebook-form .col-sm-10,
#pricebook-form .col {
  flex: 1 1 0%;
}

@media (min-width: 769px) {
  .currency-count-width {
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  .currency-count-sm-width {
    min-width: 80px;
  }
}

.price-column-width {
  width: 40px;
}

/* Inline reorder number cell (sorting_handle partial). Give it enough width for
   a 2-3 digit value and hide the native number spinner (values are typed
   directly, so the spinner just eats horizontal space and clips the digits).
   Cells that set their own inline width (e.g. the compact list pages) are
   unaffected because inline styles win over this class. */
.sorting-cell {
  width: 6.5rem;
}
.sorting-input {
  width: 100%;
}
.sorting-input::-webkit-outer-spin-button,
.sorting-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sorting-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.checkbox-sm {
  transform: scale(0.85);
  transform-origin: center;
}

#comment-form .comment-title-bar,
#edit-comment-form .comment-title-bar {
  background: #f3f5f7;
  border-top: 1px solid #adadafff;
  border-right: 1px solid rgb(176, 176, 177);
  border-bottom: none;
  border-left: 1px solid #adadafff;

  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  padding: 10px 12px;
  flex-wrap: nowrap !important;
  min-width: 0;
}

#comment-form .voice-recorder [hidden] {
  display: none !important;
}

#comment-form .comment-composer-actions,
#comment-form .voice-recorder {
  min-width: 0;
}

#comment-form .voice-recorder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

#comment-form .voice-recorder-controls,
#comment-form [data-voice-upload-actions] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.2rem;
}

#comment-form .voice-recorder .btn {
  min-height: 2.25rem;
}

#comment-form .voice-record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#comment-form .voice-recording-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

#comment-form .voice-recording-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 350px) {
  #comment-form .voice-recording-label {
    display: none;
  }
}

#comment-form [data-voice-upload-actions] {
  min-width: 0;
}

#comment-form [data-voice-error] {
  flex-basis: 100%;
  margin-top: 0.25rem;
}

@media (max-width: 576px) {
  #comment-form .comment-composer-actions #add-comment-button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
  }

  #comment-form .comment-title-bar,
  #edit-comment-form .comment-title-bar {
    flex-wrap: wrap !important;
  }
}

.comment-title-buttons {
  flex: 0 1 auto;
  min-width: 0;
}

.comment-title-badge {
  --tag-color: #066fd1; /* DEFAULT_TITLE_COLOR from comment_titles.py */
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, white, color-mix(in srgb, white, var(--tag-color)));
  border: 1px solid var(--tag-color);
  color: black;
  display: inline-block;
}

.comment-title-clear {
  display: none;
  border: none;
  background: none;
  color: var(--tblr-secondary);
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

.comment-title-clear:hover {
  color: var(--tblr-danger);
}

.comment-title-custom {
  flex: 0 0 auto;
  max-width: 300px;
}

.comment-title-input {
  max-width: 200px;
  min-width: 80px;
  height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.80rem;
  border-radius: var(--tblr-border-radius);
  flex: 1 1 auto;
}

.clr-picker {
  z-index: 1060 !important;
}

.comment-color-field {
  width: 23px;
  height: 23px;
  border-radius: var(--tblr-border-radius);
  flex-shrink: 0;
}

.comment-color-field button {
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  right: auto;
  transform: none;
  border-radius: var(--tblr-border-radius);
}

.comment-color-field input {
  width: 23px;
  height: 23px;
  min-height: 0;
  padding: 0;
  color: transparent;
  cursor: pointer;
  border-radius: var(--tblr-border-radius);
}

.comment-color-field,
.comment-title-apply {
  flex-shrink: 0;
}

.comment-title-apply {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--tblr-primary);
}

.trix-editor-wrapper {
  position: relative;
}

.btn.comment-improve-trigger {
  --tblr-btn-color: var(--tblr-primary-text-emphasis);
  color: var(--tblr-primary-text-emphasis);
}

.comment-improve-trigger:not(:disabled):hover,
.comment-improve-trigger:not(:disabled):focus-visible {
  background-color: var(--tblr-primary-bg-subtle) !important;
  color: var(--tblr-primary-text-emphasis);
}

.trix-editor-wrapper > .comment-title-selected {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  pointer-events: none;
}

.trix-editor-wrapper.has-chips > trix-editor.trix-content {
  padding-top: 2.25rem;
}

/* Workaround: programmatic .focus() on an empty trix-editor doesn't paint a
   native caret (browser's contenteditable caret pipeline only activates on
   trusted user input). When a comment title is applied via chip click, draw
   a fake blinking caret so the user immediately sees where their next
   character will land. The :empty selector ensures this disappears the
   moment the user types, letting the real native caret take over.
   Note: depends on Trix rendering an empty editor with zero children. If
   Trix is upgraded and starts injecting placeholder elements (e.g.
   <div><br></div>), this selector will silently stop matching.
   (card WXmWvD0x) */
trix-editor[data-title]:empty::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.2em;
  background-color: var(--tblr-primary);
  animation: comment-title-caret-blink 1s step-end infinite;
}

@keyframes comment-title-caret-blink {
  50% { opacity: 0; }
}


.comment-title-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  max-width: 200px;
  white-space: nowrap;
  font-size: 0.80rem;
  line-height: 1.5;
  color: var(--tblr-body-color);
}

.comment-title-tag:hover {
  text-decoration: none;
  border-color: #94a3b8;
  background: #f8fafc;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* The pill and its label are nested flex items, and those by default do not
   shrink below their content (min-width: auto). A long label therefore pushed
   the pill past the link's own max-width: measured 210 px inside 200 px, i.e.
   the pill overflowed by 10 px with an 8 px gap — and covered its neighbour.
   min-width: 0 lets it shrink, and only then does the ellipsis kick in. */
.comment-title-tag .tag {
  min-width: 0;
  max-width: 100%;
}

.comment-title-tag .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


.comment-title-tag .icon {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

#collapseComentList #comment-form>.col-12:has(+ .comment-title-bar)>p {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Remove top border-radius on Trix editor when template bar is above it */
#comment-form trix-editor.trix-content,
#edit-comment-form trix-editor.trix-content {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
@media screen and (max-width: 768px) {

  .form-control,
  .form-select,
  .form-control.form-control-sm,
  .ts-control input,
  trix-editor {
    font-size: 16px !important;
  }
}

/* ============================================
   AI Assistant Widget
   ============================================ */
#assistant-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  transition: transform 0.2s;
}

#assistant-fab:hover {
  transform: scale(1.1);
}

#assistant-fab:active {
  transform: scale(0.95);
}

#assistant-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  width: 380px;
  flex-direction: column;
  border-radius: 0.75rem;
  overflow: hidden;
}

#assistant-panel .card-header {
  flex-shrink: 0;
}

#assistant-messages {
  overflow-y: auto;
  max-height: 400px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  overscroll-behavior: contain;
}

#assistant-panel .card-footer {
  flex-shrink: 0;
}

.assistant-message {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  max-width: 85%;
  word-wrap: break-word;
  font-size: 0.875rem;
  line-height: 1.4;
}

.assistant-message p:last-child {
  margin-bottom: 0;
}

.assistant-message--user {
  align-self: flex-end;
  background-color: var(--tblr-primary);
  color: #fff;
  margin-left: 15%;
}

.assistant-message--assistant {
  align-self: flex-start;
  background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
  margin-right: 15%;
}

.assistant-message--error {
  align-self: flex-start;
  background-color: rgba(var(--tblr-danger-rgb), 0.1);
  color: var(--tblr-danger);
  margin-right: 15%;
  font-size: 0.8125rem;
}

.assistant-actions {
  margin-top: 0.375rem;
}

.assistant-actions .btn {
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Typing indicator */
.assistant-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.75rem;
  align-self: flex-start;
}

.assistant-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tblr-secondary);
  animation: assistant-bounce 1.4s infinite ease-in-out both;
}

.assistant-typing span:nth-child(1) { animation-delay: -0.32s; }
.assistant-typing span:nth-child(2) { animation-delay: -0.16s; }
.assistant-typing span:nth-child(3) { animation-delay: 0s; }

@keyframes assistant-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Mobile: full-width bottom sheet */
@media (max-width: 768px) {
  #assistant-panel {
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    max-height: 70vh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: top 0.1s linear;
  }

  #assistant-messages {
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #assistant-panel .btn-icon,
  #assistant-panel .card-footer .btn {
    min-width: 44px;
    min-height: 44px;
  }

  #assistant-panel .assistant-actions .btn {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  #assistant-panel {
    max-height: 90vh;
  }
}

/* Dark mode */
html[data-bs-theme=dark] #assistant-panel {
  background: var(--tblr-bg-surface);
}

html[data-bs-theme=dark] .assistant-message--assistant {
  background-color: var(--tblr-bg-surface-secondary);
}

html[data-bs-theme=dark] .assistant-message--user {
  background-color: var(--tblr-primary);
}

html[data-bs-theme=dark] .assistant-message--error {
  background-color: rgba(var(--tblr-danger-rgb), 0.15);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #assistant-fab,
  .assistant-typing span {
    animation: none;
    transition: none;
  }
}

/* Shared hatching patterns for closed / non-working day indicators */
:root {
  --hatching-light: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
  --hatching-dark: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 4px);
}

/* ============================================
   Work Schedule Page
   ============================================ */
.schedule-day[data-href] {
  cursor: pointer;
}

.schedule-day-closed {
  background-image: var(--hatching-light);
}

[data-bs-theme="dark"] .schedule-day-closed {
  background-image: var(--hatching-dark);
}

.schedule-day-today {
  outline: 3px solid var(--tblr-primary);
  outline-offset: -3px;
  z-index: 1;
  position: relative;
}

.year-view-cell {
  min-height: 28px;
  line-height: 2;
}

.schedule-row-error {
  background-color: var(--tblr-danger-lt, #fbebec);
}

.year-view-cell-muted {
  opacity: 0.2;
}

.schedule-legend-today {
  outline: 2px solid var(--tblr-primary);
  outline-offset: -1px;
}

.btn-nav-arrow {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: narrow Day/Working columns, more room for time inputs */
@media (max-width: 991.98px) {
  .schedule-weekly-table th:nth-child(1),
  .schedule-weekly-table td:nth-child(1) {
    width: 65px;
  }
  .schedule-weekly-table th:nth-child(2),
  .schedule-weekly-table td:nth-child(2) {
    width: 34px;
  }
  .schedule-weekly-table input[type="time"] {
    max-width: 100px;
    font-size: 0.85rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  /* Increase vertical spacing between day rows on mobile */
  .schedule-weekly-table tbody tr:not(.schedule-break-row) td {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }
  .schedule-break-row > td {
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
  }
  /* Cap wide logos so schedule badge + nav icons fit in one row */
  .navbar-brand-image {
    max-width: 150px;
    object-fit: contain;
  }
}

/* Focus ring on interactive calendar cells */
.schedule-day[data-href]:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* Break row in weekly schedule */
.schedule-break-row > td {
  background: var(--tblr-bg-surface-secondary, #f8f9fa);
}

/* Mobile: year view cells need more padding on small screens */
@media (max-width: 575.98px) {
  .year-view-cell {
    min-height: 32px;
    line-height: 2.2;
    font-size: 0.8rem;
  }

  .year-view-month-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .schedule-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tblr-gutter-x, 1.5rem);
  }

  .schedule-row>.col-lg-6 {
    width: 100%;
    max-width: 100%;
  }

  .schedule-row .card-header {
    min-height: 76px;
  }
}

/* Non-working day markers in Flatpickr date pickers */
.flatpickr-day.non-working-day {
    background-color: rgba(var(--tblr-danger-rgb), 0.25);
    background-image: var(--hatching-light);
    border: 1px solid rgba(var(--tblr-danger-rgb), 0.4);
}
.flatpickr-day.non-working-day:hover {
    background-color: rgba(var(--tblr-danger-rgb), 0.35);
    background-image: var(--hatching-light);
}
.flatpickr-day.non-working-day.selected {
    background-color: var(--tblr-primary);
    background-image: var(--hatching-dark);
    border-color: transparent;
}
[data-bs-theme="dark"] .flatpickr-day.non-working-day {
    background-color: rgba(var(--tblr-danger-rgb), 0.2);
    background-image: var(--hatching-dark);
}
[data-bs-theme="dark"] .flatpickr-day.non-working-day:hover {
    background-color: rgba(var(--tblr-danger-rgb), 0.3);
    background-image: var(--hatching-dark);
}
[data-bs-theme="dark"] .flatpickr-day.non-working-day.selected {
    background-color: var(--tblr-primary);
    background-image: var(--hatching-light);
    border-color: transparent;
}

/* Order create: match Files card height to General Information card */
@media (min-width: 1200px) {
  #files-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #files-col>.card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #files-col>.card>.card-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
}

/* DaysHoursWidget number inputs */
.dh-input {
    min-width: 3.5rem;
}
@media (max-width: 576px) {
    .dh-input {
        min-width: 0;
        flex: 1;
    }
}

/* Workload percentage overlay — visible on touch devices only */
.workload-pct-label {
    display: none;
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    line-height: 1;
    opacity: 0.7;
    pointer-events: none;
}
@media (hover: none) and (pointer: coarse) {
    .workload-pct-label {
        display: block;
    }
}

/* Checkpoint filter button — 44px touch target on mobile */
@media (hover: none) and (pointer: coarse) {
    .checkpoint-filter-toggle {
        position: relative;
    }
    .checkpoint-filter-toggle::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* Checkpoint status icon */
.checkpoint-status-icon {
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}
.checkpoint-status-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Current workload report — expandable rows */
.cursor-pointer { cursor: pointer; }
.collapse-chevron { transition: transform 0.2s ease; }

/* Shared Pro lock */
.dso-pro-lock {
    cursor: pointer;
}
.dso-pro-lock .form-check {
    position: relative;
}
.dso-pro-lock input[disabled],
.dso-pro-lock label,
.dso-pro-lock .form-check-label {
    cursor: pointer;
    opacity: 1;
}
.dso-pro-lock input[disabled] {
    opacity: 1;
    pointer-events: none;
}
.dso-pro-lock-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #ffffff;
    background: #206bc4;
    border-radius: 50%;
    pointer-events: none;
}
.dso-pro-lock-badge > .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    min-width: 0;
    margin: 0;
    transform: translate(-50%, -50%);
}
.dso-pro-lock-badge--settings {
    position: absolute;
    top: 9px;
    left: 7px;
    width: 14px;
    height: 14px;
}
.dso-pro-lock-badge--settings > .icon {
    width: 10px;
    height: 10px;
}
.dso-pro-lock-toast {
    width: fit-content;
    max-width: min(420px, calc(100vw - 32px));
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(var(--tblr-body-color-rgb), 0.15);
    font-size: 14px;
}
.dso-pro-lock-toast .d-flex {
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.dso-pro-lock-toast .toast-body {
    padding: 0;
}
/* Підкреслення тут не прикраса: увесь сенс напису в тому, що він веде на
   сторінку тарифів, а на тлі тоста звичайний текст від посилання не
   відрізнити. */
.dso-pro-lock-toast__link {
    color: var(--tblr-primary);
    text-decoration: underline;
}
.dso-pro-lock-toast__link:hover {
    text-decoration: none;
}
.dso-pro-lock-toast__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.1);
    border-radius: 50%;
}
.dso-pro-lock-toast__close {
    flex: 0 0 auto;
    margin-left: 4px;
}

/* The Pro toast FLOATS above the page — it must not push the thing it is
   explaining out of the way. This lived only on the comment editor's host, so
   the same component behaved differently in the sidebar: there it was a block
   in the flow and shoved every menu item below it down. Shared here so every
   call site gets the one behaviour; only the horizontal anchor differs. */
.dso-pro-lock-toast-host,
[data-comment-improve-pro-toast-host] {
    position: absolute;
    top: calc(100% + 0.25rem);
    /* z-index: шар ТОСТІВ (1090 у шкалі Bootstrap), а не «fixed» (1030).
       Тост може спливати над дропдауном (1000), офканвасом (1045) чи
       модалкою (1055) — на 1030 він опинявся під ними, тобто повідомлення
       про Pro просто не було видно. Він і є toast, тож бере свій шар. */
    z-index: 1090;
}
[data-comment-improve-pro-toast-host] {
    right: 0;
}
.dso-pro-lock-toast-host {
    left: 0.75rem;
}
/* z4dEGO01: варіант для якоря завширшки з кнопку (дропдаун «Дії» на
   замовленні). Без власної ширини абсолютний блок стискається до ширини
   контейнера — тост розсипався в колонку по одному слову. `right: 0` тримає
   його в межах екрана: кнопка стоїть біля правого краю. */
.dso-pro-lock-toast-host--end {
    left: auto;
    right: 0;
    width: max-content;
}

/* n0OXxZmk: a payment row is ONE line. TomSelect lets a selected item wrap,
   which pushed "Paid by" onto a second line and made the whole row two-storey.
   Width alone cannot fix that — a longer name would wrap again — so the item
   is clipped with an ellipsis instead. Scoped to the payment row so no other
   TomSelect loses its wrapping. */
.payment-row .ts-control {
  flex-wrap: nowrap;
  /* Tabler's vendored TomSelect css overrides .ts-control's vertical padding
     with `calc(.4375rem - 1px - 0)` and pairs it with a 21px line-height, so
     the control renders 33px where a sibling .form-control renders 36px.
     Every other control in a payment row is 36px, which left paid_by visibly
     short. Restore the .form-control box: line-height + 2 x .4375rem padding
     + 2px borders — MINUS the 2px the .form-select wrapper adds with its own
     border, since TomSelect nests .ts-control inside that wrapper and the
     wrapper is the box the user sees. Sizing the inner one to a full 36px
     pushed the visible control to 38px. Scoped to .payment-row on purpose —
     the same gap exists app-wide, but correcting every TomSelect is a
     separate change. */
  min-height: calc(var(--tblr-body-line-height, 1.4285714) * 1em + 0.875rem);
}

.payment-row .ts-control > .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brief highlight of the comment a direct link #comment-<id> led to: in a
   long feed the eye does not find it otherwise (rmpayDV9). */
.comment-highlight {
  animation: comment-highlight-fade 1.5s ease-out;
}

@keyframes comment-highlight-fade {
  from {
    background-color: var(--tblr-warning-lt, #fff3cd);
  }
  to {
    background-color: transparent;
  }
}

/* Keep the connection history disclosure aligned with other card chevrons. */
#connection-history > summary {
  cursor: pointer;
  list-style: none;
}
#connection-history > summary::-webkit-details-marker {
  display: none;
}
#connection-history > summary .connection-history-chevron {
  flex: none;
  transition: transform .2s ease;
}
#connection-history[open] > summary .connection-history-chevron {
  transform: rotate(-180deg);
}

/* Signup banners and the progress page exit: 44px touch targets. */
.signup-banner .btn,
.signup-exit {
  min-height: 2.75rem;
}