.dl-section-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.min-w-0 { min-width: 0; }

.dl-flat { border: 1px solid #e3ebf6 !important; box-shadow: none !important; }
.dl-flat .form-control, .dl-flat .form-select, .dl-flat .btn { box-shadow: none !important; }

.dl-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: #fff; border: 1px solid #d8e2ef; border-radius: .375rem;
}
.dl-seg button {
  border: 0; background: transparent; color: #5e6e82;
  font-size: .8rem; font-weight: 600; line-height: 1.2;
  padding: .3rem .75rem; border-radius: .25rem; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dl-seg button:hover { color: #232e3c; }
.dl-seg button.is-active { background: #e6effc; color: #2c7be5; }
.dl-seg button:focus-visible { outline: 2px solid #2c7be5; outline-offset: 1px; }
#scopeToggle { padding: 3px; }
#scopeToggle button { font-size: .85rem; padding: .45rem 1.1rem; }

.dl-filters { padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid #edf2f9; container-type: inline-size; }
.dl-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dl-search { position: relative; flex: 2 1 320px; min-width: 0; }
.dl-toolbar .form-control, .dl-toolbar .form-select { height: 2.5rem; font-size: .875rem; }
.dl-search .form-control { padding-left: 2.4rem; padding-right: 2.4rem; }
.dl-search .form-control::-webkit-search-cancel-button { display: none; }
.dl-search-icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  color: #748194; font-size: .85rem; pointer-events: none;
}
.dl-search-clear {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: .25rem;
  background: transparent; color: #748194; font-size: .75rem; cursor: pointer;
}
.dl-search-clear:hover { background: #edf2f9; color: #232e3c; }
.dl-search-clear:focus-visible { outline: 2px solid #2c7be5; }
.dl-toolbar .form-select.is-set { border-color: #a8c6f3; color: #2c7be5; }
.dl-toolbar #filterDropdown { flex: 1 1 180px; min-width: 0; }
.dl-toolbar .dl-seg { height: 2.5rem; padding: 3px; }
.dl-toolbar .dl-seg button { height: 100%; font-size: .85rem; padding: 0 1rem; }
@container (max-width: 1129.98px) { .dl-toolbar:has(.dl-seg) .dl-search { flex-basis: 100%; } }

.dl-daterange {
  display: inline-flex; flex: 1 1 280px; align-items: center; gap: .5rem; height: 2.5rem;
  padding: 0 .4rem 0 .95rem; border: 1px solid #d8e2ef; border-radius: .25rem; background: #fff;
  font-size: .875rem; transition: border-color .15s ease;
}
.dl-daterange:hover { border-color: #b6c1d2; }
.dl-daterange:focus-within { border-color: #2c7be5; }
.dl-daterange.is-set { border-color: #a8c6f3; }
.dl-daterange-icon { color: #748194; font-size: .85rem; }
.dl-daterange.is-set .dl-daterange-icon { color: #2c7be5; }
.dl-daterange input {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: 0; height: 100%;
  color: #344050; font-size: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.dl-daterange input:focus { outline: 0; }
.dl-daterange input::-webkit-calendar-picker-indicator { display: none; }
.dl-daterange-sep { color: #748194; font-size: .75rem; }
.dl-daterange-clear {
  width: 28px; height: 28px; border: 0; border-radius: .25rem; flex-shrink: 0;
  background: transparent; color: #748194; font-size: .65rem; cursor: pointer;
}
.dl-daterange-clear:hover { background: #edf2f9; color: #232e3c; }
.dl-daterange-clear:focus-visible { outline: 2px solid #2c7be5; }

.dl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .85rem; }
.dl-chip { border: 0; cursor: pointer; font-size: .75rem; padding: .4rem .65rem; max-width: 100%; }
.dl-chip .fas { opacity: .7; }
.dl-chip:hover .fas { opacity: 1; }
.dl-chip:focus-visible { outline: 2px solid #2c7be5; outline-offset: 2px; }

.dl-progress { position: relative; height: 2px; overflow: hidden; }
.dl-loading .dl-progress::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: #2c7be5;
  animation: dl-progress 1.1s ease-in-out infinite;
}
@keyframes dl-progress { to { left: 100%; } }
#table-purchase-body { transition: opacity .2s ease; }
.dl-loading #table-purchase-body { opacity: .5; pointer-events: none; }
.dl-has-state thead { display: none; }

.dl-table thead th {
  background: #f9fafd; color: #5e6e82;
  text-transform: uppercase; letter-spacing: .03em; font-size: .7rem; font-weight: 600;
  border-bottom: 1px solid #edf2f9; padding-top: .6rem; padding-bottom: .6rem;
}
.dl-table th:first-child, .dl-table td:first-child { padding-left: 1.25rem; }
.dl-table th:last-child, .dl-table td:last-child { padding-right: 1.25rem; }
.dl-table tbody td { padding-top: .6rem; padding-bottom: .6rem; }
.dl-th-sort {
  border: 0; background: transparent; padding: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
}
.dl-th-sort:hover { color: #2c7be5; }
.dl-th-sort.is-active { color: #2c7be5; }
.dl-th-sort .fas { font-size: .6rem; opacity: .5; }
.dl-th-sort.is-active .fas { opacity: 1; }
.dl-th-sort:focus-visible { outline: 2px solid #2c7be5; outline-offset: 2px; border-radius: 2px; }

.dl-name-cell { max-width: 0; width: 30%; min-width: 220px; }
.dl-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dl-meta {
  display: flex; align-items: center; gap: .4rem; margin-top: .1rem;
  color: #5e6e82; font-size: .75rem; font-weight: 400; overflow: hidden; white-space: nowrap;
}
.dl-meta > span { overflow: hidden; text-overflow: ellipsis; }
.dl-meta > span + span::before { content: '·'; margin-right: .4rem; color: #b6c1d2; }
.dl-meta-label { font-size: .65rem; font-weight: 700; letter-spacing: .04em; margin-right: .25rem; }
.dl-mono { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .72rem; }

.dl-dt { display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-dt-day { min-width: 5.4rem; color: #344050; font-weight: 500; }
.dl-dt-time { color: #748194; font-size: .75rem; }
.dl-none { color: #b6c1d2; }

.dl-copy { opacity: .5; transition: opacity .15s ease; }
.dl-copy:hover, .dl-copy:focus-visible, tr:hover .dl-copy { opacity: 1; }
@media (hover: none) { .dl-copy { opacity: 1; } }

.dl-key-cell { width: 1%; }
.dl-key-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 6.75rem;
  padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.4;
  color: var(--falcon-badge-soft-primary-color); background: var(--falcon-badge-soft-primary-background-color); border: 1px solid #c3d8f6; }
.dl-key-btn:hover, .dl-key-btn:focus-visible { color: var(--falcon-badge-soft-primary-color); background: #c6dbf8; border-color: #9fc0f0; }
.dl-key-btn .fa-copy, .dl-key-btn .fa-check { font-size: .7rem; }
.dl-key-btn.is-copied, .dl-key-btn.is-copied:hover { color: #00864e; background: #e6f6ee; border-color: #a6e1c5; }

.dl-bone {
  display: block; height: 9px; border-radius: 5px;
  background: #edf2f9; animation: dl-fade 1.4s ease-in-out infinite;
}
.dl-bone + .dl-bone { margin-top: .45rem; }
@keyframes dl-fade { 50% { opacity: .45; } }

.dl-state { padding: 3rem 1.25rem !important; text-align: center; white-space: normal; }
.dl-state-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .85rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.dl-state-text { max-width: 42ch; margin: 0 auto; }

.dl-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem 1rem; }
.dl-foot-start { display: flex; align-items: center; gap: .5rem; }
.dl-foot-end { justify-self: end; font-variant-numeric: tabular-nums; }
.dl-pager { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.dl-pager-btn {
  min-width: 32px; height: 32px; padding: 0 .6rem; border: 0; border-radius: .5rem;
  background: transparent; color: #5e6e82; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dl-pager-btn:hover:not(:disabled):not(.is-active) { background: #edf2f9; color: #232e3c; }
.dl-pager-btn.is-active { background: #2c7be5; color: #fff; cursor: default; }
.dl-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.dl-pager-btn:focus-visible { outline: 2px solid #2c7be5; outline-offset: 2px; }
.dl-pager-nav { padding: 0 .8rem; color: #344050; }
.dl-pager-nav .fas { font-size: .62rem; }
.dl-pager-gap { color: #9da9bb; padding: 0 .2rem; font-size: .8rem; }

@media (max-width: 767.98px) {
  .dl-scope, .dl-scope .dl-seg, .dl-toolbar .dl-seg { width: 100%; }
  .dl-seg button { flex: 1 1 0; }
  .dl-scope .form-select { width: 100% !important; }
  .dl-filters { padding: .85rem 1rem; }
  .dl-toolbar { gap: .6rem; }
  .dl-toolbar .dl-search, .dl-toolbar #filterDropdown { flex-basis: 100%; }
  .dl-foot { grid-template-columns: 1fr auto; }
  .dl-foot-center { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .dl-pager-text { display: none; }

  .dl-table thead { display: none; }
  .dl-table, .dl-table tbody { display: block; }
  .dl-table tbody tr.dl-row, .dl-table tbody tr.dl-skeleton {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1rem; padding: .9rem 1rem; border-bottom: 1px solid #edf2f9;
  }
  .dl-table tbody td, .dl-table tbody td:first-child, .dl-table tbody td:last-child {
    display: block; width: auto !important; padding: 0; border: 0; text-align: left !important; white-space: normal;
  }
  .dl-table tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .15rem;
    font-size: .65rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #5e6e82;
  }
  .dl-table tbody td.dl-index { display: none; }
  .dl-name-cell { grid-column: 1 / -1; width: auto; min-width: 0; max-width: none; }
  .dl-table tbody td.dl-key-cell { grid-column: 1 / -1; }
  .dl-table tbody tr.dl-state-row, .dl-table tbody tr.dl-state-row td { display: block; text-align: center !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-bone, .dl-loading .dl-progress::after { animation: none; }
  .dl-seg button, .dl-copy, #table-purchase-body, .dl-pager-btn, .dl-daterange { transition: none; }
}
