/*
 * Font Display Override: Material Symbols Outlined
 * The unfold package's material-symbols/styles.css does not include font-display.
 * This override adds font-display: swap to prevent invisible icon text during font load.
 * The Inter font already ships with font-display: swap from the unfold package.
 */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../unfold/fonts/material-symbols/Material-Symbols-Outlined.woff2")
    format("woff2");
}

#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 landscape;
    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. Layout grid adjustment for print metric cards */
  div[class*="grid"]:not([class*="print:grid-cols-"]):not([class*="print:flex"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  div[class*="print:grid-cols-2"],
  div[class*="print:grid-cols-4"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }

  div[class*="print:grid-cols-2"] > *,
  div[class*="print:grid-cols-4"] > * {
    flex: 1 1 22% !important;
    min-width: 140px !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;
    margin-bottom: 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    page-break-inside: auto !important;
  }

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

  tfoot {
    display: table-row-group !important;
  }

  thead tr {
    display: table-row !important;
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #0f172a !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: 8pt !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    padding: 5px 6px !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  th a {
    color: #0f172a !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 #cbd5e1 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background-color: transparent !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  tr:nth-child(even) td {
    background-color: #f8fafc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !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: 1px solid #cbd5e1 !important;
    color: #1f2937 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    width: auto !important;
    max-width: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !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: 1in !important;
    max-width: 1in !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;
  }
}

/* =========================================================================
   Sidebar Shortcut Capsules & Alt Overlay
   ========================================================================= */

.ctb-shortcut-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--border-radius, 0.25rem);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateX(4px) scale(0.92);
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 140ms ease,
              border-color 140ms ease,
              color 140ms ease,
              box-shadow 140ms ease;
  pointer-events: none;
  user-select: none;
  background-color: var(--color-base-200, #e2e8f0);
  color: var(--color-font-default-light, #1e293b);
  border: 1px solid var(--color-base-300, #cbd5e1);
}

.dark .ctb-shortcut-capsule,
html.dark .ctb-shortcut-capsule {
  background-color: var(--color-base-800, #1e293b);
  color: var(--color-font-default-dark, #f1f5f9);
  border: 1px solid var(--color-base-700, #334155);
}

/* Reveal capsules when Alt overlay is active on body or sidebar */
body.ctb-shortcuts-active .ctb-shortcut-capsule,
#nav-sidebar.ctb-shortcuts-active .ctb-shortcut-capsule {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Live Candidate Highlighting: Prefix match */
body.ctb-shortcuts-active .ctb-shortcut-capsule.is-candidate,
#nav-sidebar.ctb-shortcuts-active .ctb-shortcut-capsule.is-candidate {
  background-color: var(--color-primary-600, #2563eb) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-500, #3b82f6) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
  transform: scale(1.08);
}

/* Eliminated non-candidates */
body.ctb-shortcuts-active .ctb-shortcut-capsule.is-dimmed,
#nav-sidebar.ctb-shortcuts-active .ctb-shortcut-capsule.is-dimmed {
  opacity: 0.18 !important;
  transform: scale(0.92);
}

/* Final target confirmation pulse prior to redirection */
body.ctb-shortcuts-active .ctb-shortcut-capsule.is-targeted,
#nav-sidebar.ctb-shortcuts-active .ctb-shortcut-capsule.is-targeted {
  background-color: var(--color-primary-700, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-400, #60a5fa) !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.6) !important;
  transform: scale(1.15);
}