#loading-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 500;
}
#loader {
  z-index: 510;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Change loader below, from: https://cssloaders.github.io/ */
/* LOADER STYLE START */

.loader {
  width: 54px;
  height: 54px;
  position: relative;
  border-radius: 4px;
  background-color: #fff;
  background-image:
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
    radial-gradient(circle 5px , #FF3D00 100%, transparent 0);
    background-repeat: no-repeat;
  animation: move 4s linear infinite , rotate 2s linear infinite;
}

@keyframes rotate {
  0% , 20%{ transform: rotate(0deg)}
  30% , 40% { transform: rotate(90deg)}
  50% , 60% { transform: rotate(180deg)}
  70% , 80% { transform: rotate(270deg)}
  90%,  100% { transform: rotate(360deg)}
}
@keyframes move {
  0% ,  9%{
      background-position:
      -12px -15px,  -12px 0px, -12px 15px,
      12px -15px,  12px 0px,  12px 15px;
  }
  10% , 25%{
      background-position:
      0px -15px,  -12px 0px, -12px 15px,
      34px -15px,  12px 0px,  12px 15px;
  }
  30% , 45%{
      background-position:
      0px -34px, -12px -10px, -12px 12px,
      34px -15px, 12px -10px, 12px 12px;
  }
  50% , 65% {
      background-position:
      0px -34px, -12px -34px, -12px 12px,
      34px -12px, 0px -10px, 12px 12px;
  }
  70% , 85% {
      background-position:
      0px -34px, -12px -34px, 0px 12px,
      34px -12px, 0px -10px, 34px 12px;
  }
 90% , 100% {
      background-position:
      0px -34px, -12px -34px, 0px 0px,
      34px -12px, 0px 0px, 34px 12px;
  }
}


/*  LOADER STYLE END */

/* Back to Top Button */
#back-to-top {
  position: fixed !important;
  bottom: 4rem !important;
  right: 1rem !important;
  z-index: 9999 !important;
  transition: all 0.3s ease-in-out;
}

#back-to-top.flex {
  display: flex !important;
}

#back-to-top:hover {
  transform: translateY(-4px);
}

/* Sticky Header Enhancements */
.sticky.top-0 {
  transition: shadow 0.3s ease-in-out;
}



/* 1. Set the parent element to relative positioning */
.instant-tooltip {
  position: relative;
  cursor: pointer;
}

/* 2. Create and hide the tooltip by default */
.instant-tooltip::after {
  content: attr(title); /* Grabs the text from HTML */
  position: absolute;
  bottom: 125%;              /* Positions it above the element */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;

  /* The magic for instant behavior: hide it completely without transitions */
  display: none;
  z-index: 10;
}

/* 3. Reveal it instantly on hover */
.instant-tooltip:hover::after {
  display: block;
}

/* Print Styles & Paged Media Formatting */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 8mm 10mm 8mm;
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 8pt;
      font-family: inherit;
      color: #4b5563;
    }
  }

  /* 1. Brand Header Banner on Page 1 */
  .print-header-first {
    display: block !important;
    margin-bottom: 1rem !important;
  }

  /* 2. Hide all unnecessary Unfold admin screen UI chrome, sidebars, save/delete action bars, and 3-dot dropdowns */
  nav,
  header,
  aside,
  #sidebar,
  #nav-sidebar,
  .nav-sidebar,
  #toggle-nav-sidebar,
  #back-to-top,
  #header-inner,
  .sticky,
  .no-print,
  #changelist-search,
  #changelist-filter,
  .actions,
  .pagination,
  .submit-row,
  #submit-row,
  form .submit-line,
  form #submit-row,
  form .submit-row,
  div[id*="submit-row"],
  div[class*="submit-row"],
  button[name="_save"],
  button[name="_continue"],
  button[name="_addanother"],
  button[name="_saveasnew"],
  button[type="submit"],
  a[href*="/delete/"],
  div[x-data*="actionDropdown"],
  div[x-data*="showActions"],
  div[x-data*="openActionsId"],
  td.field-actions_holder,
  div.border-b.border-base-200,
  ul.flex.font-medium,
  .sortoptions,
  .sortpriority,
  /* Hide selection checkboxes & overlays */
  th:has(input[type="checkbox"]),
  td:has(input[type="checkbox"]),
  th:first-child:has(label),
  td:first-child:has(label),
  th.action-toggle,
  .action-checkbox,
  .action-select,
  #changelist-actions-wrapper,
  /* Hide Unfold Command palette, search modals, dialogs & overlays */
  div[x-data*="searchCommand"],
  div[x-data*="searchCommand()"],
  #search-input-command,
  #command-results,
  #command-submit,
  #modal-overlay,
  #modal-content,
  dialog,
  .backdrop-blur-xs,
  [x-trap\.noscroll],
  div.fixed[class*="z-"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Reset page & container layout wrappers to 100% full paper width */
  html,
  body,
  #page,
  #main,
  #app,
  #content,
  #content-main,
  .container,
  main,
  section,
  article,
  form,
  .flex-1,
  div[x-data],
  aside ~ div,
  aside + div,
  nav ~ div,
  #nav-sidebar ~ div,
  .nav-sidebar ~ div,
  div[data-simplebar],
  .overflow-x-auto,
  div[class*="ml-"],
  div[class*="pl-"],
  div[class*="lg:ml-"],
  div[class*="lg:pl-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    position: static !important;
    float: none !important;
    flex: none !important;
    grid-template-columns: 1fr !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }

  /* 4. Collapse multi-column CSS grids & flex containers to single-column full-width */
  div[class*="grid"],
  div[class*="col-span-"],
  div[class*="lg:grid"],
  div[class*="lg:col-span-"],
  div[class*="md:grid"],
  div[class*="md:col-span-"],
  .grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5. Concise, compact multi-column desktop table layout */
  table,
  table#result_list,
  table.block {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin-top: 0.5rem !important;
  }

  thead,
  thead.text-font-important-light {
    display: table-header-group !important;
  }

  thead tr {
    display: table-row !important;
    background-color: #f3f4f6 !important;
    border-bottom: 2px solid #111827 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  th,
  th.hidden,
  th.lg\:table-cell {
    display: table-cell !important;
    font-weight: 700 !important;
    font-size: 8.5pt !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    padding: 4px 6px !important;
    /* border-bottom: 2px solid #374151 !important; */
    border-bottom: 0px !important;
    color: #111827 !important;
    background-color: #f3f4f6 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  th a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  tbody,
  tbody.block,
  tbody.lg\:table-row-group {
    display: table-row-group !important;
  }

  tr,
  tr.block,
  tr.lg\:table-row {
    display: table-row !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    margin: 0 !important;
    background-color: transparent !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  td,
  td.flex,
  td.lg\:table-cell {
    display: table-cell !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    vertical-align: middle !important;
    background: transparent !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Completely disable text truncation, line clamping, and overflow clipping inside print tables */
  th *,
  td *,
  .truncate,
  [class*="truncate"],
  .line-clamp-1,
  .line-clamp-2,
  .line-clamp-3,
  [class*="line-clamp-"],
  .whitespace-nowrap {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: none !important;
  }

  /* Compact images inside table cells */
  td img,
  th img {
    max-height: 24px !important;
    max-width: 24px !important;
    object-fit: contain !important;
    display: inline-block !important;
  }

  /* Suppress mobile responsive data labels (before:flex / data-label) */
  td::before,
  td.before\:flex::before {
    display: none !important;
    content: none !important;
  }

  /* Exact color rendering for badges */
  .rounded,
  .rounded-full,
  [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}