.modal {
  position: fixed;
  z-index: 1;
  padding: 1em;
  
  /* Centering */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  overflow: auto;
  
  /* Add the drop shadow */
 
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover {
  color: black;
  text-decoration: none;
}
/**
 * tom-select.css (v2.2.2) - Custom styles for masjid CRM
 * Updated to match Tailwind select field styling
 */

:root {
  --ts-pr-clear-button: 0;
  --ts-pr-caret: 0;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max( var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 0.5rem 0.5rem 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #374151;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: #111827;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: 0 0 0 1px #3b82f6;
  border: 1px solid #3b82f6;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d1d5db;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 0.125rem 0.125rem 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d1d5db;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #9ca3af;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d1d5db;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #9ca3af;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

/* Main wrapper - matches Tailwind bg-gray-50 */
.ts-wrapper {
  position: relative;
  background: #f9fafb;
  min-height: 2.625rem;
  max-width: 100%;
  width: 100%;
}

.ts-wrapper.single {
  max-width: 100%;
}

/* Typography matching Tailwind text-sm */
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #111827;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-smoothing: inherit;
}

/* Control styling to match Tailwind select fields */
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #f9fafb;
  cursor: text;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.625rem;
  transition: all 0.15s ease-in-out;
  min-height: 2.625rem; /* Matches Tailwind p-2.5 + border height */
}

.ts-control {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  display: flex;
  flex-wrap: nowrap;
  color: #111827;
}

/* Ensure selected items truncate properly */
.ts-wrapper.single .ts-control .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Focus states to match Tailwind focus:ring-blue-500 focus:border-blue-500 */
.focus .ts-control {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  outline: none;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: calc(0.625rem - 2px - 0px) 0.625rem calc(0.625rem - 2px - 3px - 0px);
}

.full .ts-control {
  background-color: #f9fafb;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
  opacity: 0.5;
  background-color: #f9fafb;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #d1d5db;
  color: #374151;
  border: 1px solid #9ca3af;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #9ca3af;
  background: white;
  border: 1px solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

/* Placeholder styling to match Tailwind placeholder colors */
.ts-control > input::placeholder {
  color: #9ca3af !important; /* matches text-gray-400 */
  opacity: 1;
}

.ts-control > input::-webkit-input-placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

.ts-control > input::-moz-placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

.ts-control > input:-ms-input-placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

/* Styling for prompt text when no selection is made */
.ts-wrapper.single .ts-control .ts-placeholder {
  color: white !important;
  opacity: 1;
}

/* When input is hidden but placeholder should show */
.ts-wrapper.single.input-hidden .ts-control:after {
  content: attr(data-placeholder);
  color: #9ca3af;
  position: absolute;
  top: 50%;
  left: 0.625rem;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Tom-select specific placeholder when no items selected */
.ts-wrapper.single:not(.has-items) .ts-control input {
  color: #9ca3af !important;
}

/* Override tom-select's default placeholder handling */
.ts-wrapper.single .ts-control input[placeholder] {
  color: #9ca3af !important;
}

.ts-wrapper.single .ts-control input:not([value=""]):not(:focus) {
  color: #111827 !important;
}

.has-items .ts-control > input {
  margin: 0px 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

/* Dropdown styling */
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d1d5db;
  background: #ffffff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 0 0 0.5rem 0.5rem;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0.125rem;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 0.5rem 0.75rem;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #374151;
  background: #f9fafb;
  cursor: default;
  font-weight: 500;
}

.ts-dropdown .active {
  background-color: #3b82f6;
  color: #ffffff;
}

.ts-dropdown .active.create {
  color: #ffffff;
}

.ts-dropdown .create {
  color: #6b7280;
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d1d5db;
  border-color: #d1d5db transparent #d1d5db transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Dark mode styles to match dark:bg-gray-700 dark:border-gray-600 etc. */
@media (prefers-color-scheme: dark) {
  .ts-wrapper {
    background: #374151;
  }
  
  .ts-dropdown,
  .ts-control,
  .ts-control input {
    color: #ffffff;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-smoothing: inherit;
  }

  .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    background: #374151;
    border-color: #4b5563;
    cursor: text;
    color: #ffffff;
    min-height: 2.625rem; /* Matches light mode height */
  }

  .ts-control {
    background: #374151;
  }

  .full .ts-control {
    background: #374151;
  }

  /* Dark mode focus states to match dark:focus:ring-blue-500 dark:focus:border-blue-500 */
  .focus .ts-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
  }

  /* Dark mode placeholder styling to match dark:placeholder-gray-400 */
  .ts-control > input::placeholder {
    color: #9ca3af !important;
    opacity: 1;
  }

  .ts-control > input::-webkit-input-placeholder {
    color: #9ca3af !important;
    opacity: 1;
  }

  .ts-control > input::-moz-placeholder {
    color: #9ca3af !important;
    opacity: 1;
  }

  .ts-control > input:-ms-input-placeholder {
    color: #9ca3af !important;
    opacity: 1;
  }

  /* Dark mode prompt text */
  .ts-wrapper.single .ts-control .ts-placeholder {
    color: #9ca3af !important;
    opacity: 1;
  }

  .ts-wrapper.single.input-hidden .ts-control:after {
    color: #9ca3af;
  }

  /* Dark mode tom-select specific placeholder when no items selected */
  .ts-wrapper.single:not(.has-items) .ts-control input {
    color: #9ca3af !important;
  }

  /* Dark mode override tom-select's default placeholder handling */
  .ts-wrapper.single .ts-control input[placeholder] {
    color: #9ca3af !important;
  }

  .ts-wrapper.single .ts-control input:not([value=""]):not(:focus) {
    color: #ffffff !important;
  }

  .disabled .ts-control {
    background-color: #374151;
    opacity: 0.5;
  }

  .ts-wrapper.multi .ts-control > div {
    background: #4b5563;
    color: #ffffff;
    border: 1px solid #6b7280;
  }

  .ts-wrapper.multi .ts-control > div.active {
    background: #6b7280;
    color: #ffffff;
    border: 1px solid #9ca3af;
  }

  .ts-dropdown {
    border: 1px solid #4b5563;
    background: #374151;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  }

  .ts-dropdown [data-selectable] {
    background: #374151;
    color: #ffffff;
  }

  .ts-dropdown [data-selectable] .highlight {
    background: rgba(59, 130, 246, 0.2);
  }

  .ts-dropdown .active {
    background-color: #3b82f6;
    color: #ffffff;
  }

  .ts-dropdown .active.create {
    color: #ffffff;
  }

  .ts-dropdown .optgroup-header {
    color: #ffffff;
    background: #4b5563;
  }

  .ts-dropdown .create {
    color: #9ca3af;
  }

  .ts-wrapper .dropdown-header {
    background: #4b5563;
    border-bottom: 1px solid #6b7280;
  }

  .ts-wrapper .dropdown-header-close {
    color: #d1d5db;
  }

  .ts-wrapper .dropdown-header-close:hover {
    color: #ffffff;
  }

  .plugin-dropdown_input .dropdown-input {
    border-color: #4b5563;
  }

  .ts-dropdown .spinner:after {
    border: 5px solid #4b5563;
    border-color: #4b5563 transparent #4b5563 transparent;
  }

}
/* ui_select + Tom Select composition: Tom Select copies the original select's
   classes onto .ts-wrapper, so DaisyUI's `.select` chrome (border, padding,
   height) double-boxes the control. Neutralize the wrapper; .ts-control
   provides the visible box. */
.ts-wrapper.select {
  border: none;
  padding: 0;
  height: auto;
  min-height: 0;
  background: none;
}

/* Cropper.js styles */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: auto;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}

.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Above the fixed topbar (z-50) so the modal dims and covers it too */
  z-index: 55;
  background-color: rgba(0, 0, 0, 0.5);
}

.turbo-modal {
  position: fixed;
  z-index: 60;
  padding: 1em;

  /* Centering */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  overflow: auto;
}

/* ==========================================================================
   Mobile patterns (styleguide: #mobile-patterns)
   --------------------------------------------------------------------------
   Breakpoint: phone = max-width 639.98px (below Tailwind `sm`). Every rule in
   this block is phone-only or opt-in via a modifier class, so desktop
   rendering is unchanged.
   ========================================================================== */

/* Step-1 Cancel in the wizard footer (shared/wizard/_shell): hidden unless the
   phone rule below shows it inside a modal. */
.wizard-cancel--phone {
  display: none;
}

@media (max-width: 639.98px) {
  /* Inputs >= 16px on phones: iOS Safari zooms the page when a focused field's
     font-size is under 16px. This is a FLOOR, applied app-wide: it raises
     small text fields and never shrinks a larger one or touches buttons.
     1. Unsized fields: element-level specificity (0,0,1) -- beats preflight's
        `font-size: 100%` (inherit), loses to any class such as text-lg. */
  input:where(:not([type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"])),
  select,
  textarea {
    font-size: 16px;
  }
  /* 2. Classes that set a sub-16px size (DaisyUI .select/.textarea are 14px,
        the -xs/-sm sizes, text-xs/text-sm on a field, Tom Select's input)
        are raised -- unless the field also asks for text-base or larger. */
  :is(.select, .textarea, .input-xs, .input-sm, .select-xs, .select-sm, .textarea-xs, .textarea-sm,
      input.text-xs, input.text-sm, select.text-xs, select.text-sm, textarea.text-xs, textarea.text-sm,
      .ts-control, .ts-control input):not(.text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, [type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]) {
    font-size: 16px;
  }

  /* ── Floating AI chat button (shared/_ai_chat_widget) ─────────────────────
     Sits above the home indicator; the page reserves room below its content
     so the last row can always scroll clear of it (56px button + 16px gap);
     and it steps aside while a modal or sheet owns the screen. */
  #ai_chat_widget_root {
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
  }
  body:has(#ai_chat_widget_root) > main {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
  body:has(#turbo-modal .turbo-modal) #ai_chat_widget_root > button {
    display: none;
  }

  /* ── Full-screen modal: ui_modal(mobile: :fullscreen) ─────────────────────
     Default for ui_modal(full_height: true), i.e. every entry-form wizard. */
  .turbo-modal.turbo-modal--mobile-fullscreen {
    inset: 0;
    transform: none;
    padding: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }
  .turbo-modal--mobile-fullscreen .turbo-modal__dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .turbo-modal--mobile-fullscreen .turbo-modal__panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
  }
  .turbo-modal--mobile-fullscreen .turbo-modal__header {
    flex-shrink: 0;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: 0.75rem;
  }
  .turbo-modal--mobile-fullscreen .turbo-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Wizard inside a full-screen modal: header / compact stepper / scrolling
     step content / footer pinned to the bottom edge. Depth-independent: EVERY
     element between the modal body and the wizard shell (the form, and any
     wrapper such as donations' #parent-form or payments' #payment-form)
     passes the height down. The body keeps overflow-y: auto as a safety net,
     so if some wrapper still breaks the chain the content scrolls instead of
     being clipped. */
  .turbo-modal--mobile-fullscreen .turbo-modal__body:has(.wizard-shell--fixed) {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .turbo-modal--mobile-fullscreen .turbo-modal__body :not([hidden]):has(.wizard-shell--fixed) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .turbo-modal--mobile-fullscreen .wizard-shell--fixed {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .turbo-modal--mobile-fullscreen .wizard-shell--fixed > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
  }
  .turbo-modal--mobile-fullscreen .wizard-shell--fixed .wizard-stepper-block {
    flex-shrink: 0;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--fallback-b2, oklch(var(--b2)));
  }
  .turbo-modal--mobile-fullscreen .wizard-shell--fixed > .wizard-card {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    border-width: 0;
    border-radius: 0;
  }
  .turbo-modal--mobile-fullscreen .wizard-shell--fixed .wizard-footer {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  /* Step-1 Cancel (shared/wizard/_shell, modal wizards): shown inside a
     modal, giving way to Back from step 2 on, so the footer's left slot holds
     one button at a time. */
  .turbo-modal .wizard-cancel--phone {
    display: inline-flex;
  }
  .wizard-footer:has([data-wizard-target="backBtn"]:not(.hidden)) .wizard-cancel--phone {
    display: none;
  }

  /* ── Bottom sheet: ui_modal(mobile: :sheet) ─────────────────────────────── */
  .turbo-modal.turbo-modal--mobile-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }
  .turbo-modal--mobile-sheet .turbo-modal__dialog {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .turbo-modal--mobile-sheet .turbo-modal__panel {
    min-height: 0;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    border-radius: 1rem 1rem 0 0;
  }
  .turbo-modal--mobile-sheet .turbo-modal__header {
    flex-shrink: 0;
  }
  .turbo-modal--mobile-sheet .turbo-modal__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* ── Stacked table rows: table.table--stack[data-stack] ───────────────────
     table_stack_controller sets data-stack once every body cell is tagged
     with data-column, and copies each header's text onto its cells as
     data-label. Each row becomes a block: the first visible data column is
     the title (bulk checkbox before it, row actions after it), every other
     visible column a "Label ........ value" line. Cells the column picker
     hides (.hidden) stay hidden; cells that span the row (empty states) keep
     their own layout. The header row becomes a horizontally scrolling "Sort"
     strip of the existing sort buttons (plus select-all in bulk mode), so
     sorting and bulk selection stay reachable. The controller restores the
     table/row/cell roles that the display changes would drop. */
  .table--stack[data-stack] thead {
    display: block;
  }
  .table--stack[data-stack] thead tr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.625rem 1rem;
  }
  .table--stack[data-stack] thead tr::before {
    content: "Sort";
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--fallback-bc, oklch(var(--bc) / 0.6));
  }
  .table--stack[data-stack] thead th {
    flex-shrink: 0;
    padding: 0;
    white-space: nowrap;
  }
  .table--stack[data-stack] thead th:not(:has(button, input:not(.hidden))) {
    display: none;
  }
  .table--stack[data-stack] thead th[data-column] button {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--fallback-b3, oklch(var(--b3) / 1));
    border-radius: 9999px;
    font-size: 0.8125rem;
  }
  .table--stack[data-stack],
  .table--stack[data-stack] tbody,
  .table--stack[data-stack] tfoot {
    display: block;
    width: 100%;
  }
  .table--stack[data-stack] tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 0.375rem;
    padding: 0.875rem 1rem;
  }
  .table--stack[data-stack] td {
    padding: 0;
    min-width: 0;
  }
  .table--stack[data-stack] td:not(.hidden) {
    display: block;
  }
  .table--stack[data-stack] td[colspan] {
    grid-column: 1 / -1;
  }
  .table--stack[data-stack] td[data-column]:not(.hidden) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.875rem;
    text-align: right;
  }
  .table--stack[data-stack] td[data-column]::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    color: var(--fallback-bc, oklch(var(--bc) / 0.6));
  }
  .table--stack[data-stack] td[data-column]:nth-child(1 of [data-column]:not(.hidden)) {
    grid-column: 2;
    grid-row: 1;
    display: block;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
  }
  .table--stack[data-stack] td[data-column]:nth-child(1 of [data-column]:not(.hidden))::before {
    content: none;
  }
  .table--stack[data-stack] td:first-child:not([data-column], [colspan]) {
    grid-column: 1;
    grid-row: 1;
  }
  .table--stack[data-stack] td:first-child:not([data-column], [colspan]):has(input:not(.hidden)) {
    margin-right: 0.75rem;
  }
  .table--stack[data-stack] td:last-child:not([data-column], [colspan]) {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0.5rem;
  }
  .table--stack[data-stack] tfoot td[data-column][data-blank] {
    display: none;
  }
  /* Tappable rows: title + 4 lines, then "+N more" (the record page has the
     rest). The controller sets data-more only on clickable rows. */
  .table--stack[data-stack] tbody tr[data-more] td[data-column]:not(.hidden):nth-child(n + 6 of [data-column]:not(.hidden)) {
    display: none;
  }
  .table--stack[data-stack] tbody tr[data-more]::after {
    content: "+" attr(data-more) " more";
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--fallback-bc, oklch(var(--bc) / 0.55));
  }

  /* ── Collapsible chart card: ui_chart_card(collapsible: true) ─────────────
     Index pages render their charts collapsed to the header row on phones so
     the table leads; chart_collapse_controller flips data-chart-collapsed. */
  .chart-card--collapsible[data-chart-collapsed="true"] [data-chart-collapse-target="body"] {
    display: none;
  }
  .chart-card--collapsible[data-chart-collapsed="true"] .chart-card__header {
    margin-bottom: 0;
  }
  .chart-card--collapsible[data-chart-collapsed="false"] .chart-card__chevron {
    transform: rotate(180deg);
  }

  /* ── Sticky footer for full-page wizards (MOTO): .wizard-footer--sticky ───
     A footer at the end of a long card body sticks to the bottom edge while
     the step scrolls, bleeding to the card edges over the safe area. The AI
     chat button steps aside so it never covers the primary action. */
  .wizard-footer--sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(-1 * var(--padding-card, 2rem));
    padding-inline: var(--padding-card, 2rem);
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background-color: var(--fallback-b1, oklch(var(--b1) / 1));
    box-shadow: 0 -8px 16px -12px rgb(0 0 0 / 0.25);
  }
  body:has(.wizard-footer--sticky) #ai_chat_widget_root > button {
    display: none;
  }

  /* ── Compact wizard stepper (shared/wizard/_stepper) ──────────────────────
     Numbered dots only; the labels stay in the DOM for screen readers and the
     caption below names the current step. Each dot keeps a 44px tap row. */
  .wizard-stepper {
    margin-bottom: 0.25rem;
  }
  .wizard-stepper .step {
    min-height: 2.75rem;
    /* DaisyUI's 4rem column minimum overflows 343px at 6 steps; 44px fits 7. */
    min-width: 2.75rem;
    grid-template-rows: 2.75rem;
  }
  .wizard-stepper .step .step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

.wizard-step-caption {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Receipt uploader (components/forms/_receipt_uploader): the file inputs are
   visually hidden (sr-only), so keyboard focus is shown on their labels. */
[data-receipt-uploader]:has(.receipt-input--files:focus-visible) .receipt-target--files,
[data-receipt-uploader]:has(.receipt-input--camera:focus-visible) .receipt-target--camera {
  outline: 2px solid var(--fallback-p, oklch(var(--p)));
  outline-offset: 2px;
}