/* DocKit – the document page. Colours come from the site's template (currentColor, inherit, CSS variables);
   override any --dockit-* variable in the template to change the look. */
.dockit {
  --dockit-border: color-mix(in srgb, currentColor 15%, transparent);
  --dockit-muted: color-mix(in srgb, currentColor 65%, transparent);
  --dockit-accent: var(--t4-primary, var(--cassiopeia-color-primary, var(--bs-primary, #2a69b8)));
  --dockit-radius: .5rem;
  --dockit-gap: 1rem;
}
.dockit.is-loading .dockit__results { opacity: .55; transition: opacity .15s; }

/* Focus only for keyboard users – never on click, and nothing moves */
.dockit a:focus, .dockit button:focus, .dockit input:focus, .dockit select:focus { outline: none; }
.dockit a:focus-visible, .dockit button:focus-visible, .dockit input:focus-visible, .dockit select:focus-visible,
.dockit__chip:has(input:focus-visible) {
  outline: 2px solid var(--dockit-accent);
  outline-offset: 2px;
}

.dockit__filters { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.dockit__search { display: flex; gap: .5rem; }
.dockit__search input { flex: 1; max-width: none; }
.dockit__selects { display: flex; flex-wrap: wrap; gap: .75rem; }
.dockit__select { display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; }
.dockit__select label, .dockit__types legend { font-size: .875rem; color: var(--dockit-muted); margin: 0; }
.dockit__types { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.dockit__types legend { width: 100%; float: none; padding: 0; margin-bottom: .25rem; }
.dockit__chip { position: relative; cursor: pointer; }
.dockit__chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dockit__chip span {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--dockit-chip);
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1.3;
}
.dockit__chip input:checked + span { background: var(--dockit-chip); color: var(--dockit-chip-text); }
.dockit__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.dockit__reset { font-size: .875rem; }
.dockit__switch { display: inline-flex; border: 1px solid var(--dockit-border); border-radius: var(--dockit-radius); overflow: hidden; margin-left: auto; }
.dockit__switch-btn { padding: .3rem .8rem; font-size: .875rem; text-decoration: none; color: inherit; }
.dockit__switch-btn + .dockit__switch-btn { border-left: 1px solid var(--dockit-border); }
.dockit__switch-btn.is-active { background: var(--dockit-accent); color: #fff; }

.dockit__count { font-size: .875rem; color: var(--dockit-muted); }
.dockit__zipbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.dockit__check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.dockit__cell-check { width: 2rem; }

.dockit__table th, .dockit__table td { vertical-align: middle; }
.dockit__table thead a { color: inherit; text-decoration: none; white-space: nowrap; }
.dockit__table thead [aria-sort="ascending"] a::after { content: " ▲"; font-size: .7em; }
.dockit__table thead [aria-sort="descending"] a::after { content: " ▼"; font-size: .7em; }
.dockit__table .dockit__col-title { font-weight: 600; }
.dockit__table .dockit__col-size, .dockit__table .dockit__col-downloads { white-space: nowrap; text-align: right; }
.dockit__table .dockit__col-date { white-space: nowrap; }
.dockit__table .dockit__actions { flex-wrap: nowrap; }
.dockit__desc { font-weight: 400; font-size: .875rem; color: var(--dockit-muted); }

.dockit__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dockit__download, .dockit__previewbtn, .dockit__lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border: 1px solid var(--dockit-border);
  border-radius: var(--dockit-radius);
  background: transparent;
  color: inherit;
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.dockit__download { border-color: var(--dockit-accent); background: var(--dockit-accent); color: #fff; }
.dockit__ext { font-size: .75em; opacity: .85; }
.dockit__lang { padding: .3rem .5rem; font-weight: 600; }
.dockit__langbadge { display: inline-block; padding: 0 .35rem; border: 1px solid var(--dockit-border); border-radius: .25rem; font-size: .75rem; font-weight: 600; }
.is-locked .dockit__download { background: transparent; color: inherit; border-color: var(--dockit-border); }

.dockit__list { list-style: none; padding: 0; margin: 0; }
.dockit__row { display: flex; align-items: center; gap: var(--dockit-gap); padding: .75rem 0; border-bottom: 1px solid var(--dockit-border); }
.dockit__main { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dockit__title { font-weight: 600; }
.dockit__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .875rem; color: var(--dockit-muted); }
.dockit__meta-label { font-weight: 600; }

.dockit__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--dockit-gap); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.dockit__card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--dockit-border); border-radius: var(--dockit-radius); }
.dockit__card .dockit__title { font-size: 1rem; margin: 0; }
.dockit__card .dockit__actions { margin-top: auto; }
.dockit__card-top { display: flex; justify-content: space-between; align-items: center; }
.dockit__filetype { display: inline-block; padding: .2rem .45rem; border-radius: .25rem; background: color-mix(in srgb, var(--dockit-accent) 12%, transparent); color: var(--dockit-accent); font-size: .75rem; font-weight: 700; }

.dockit__pagination { margin-top: 1rem; }

.dockit__preview { width: min(60rem, 95vw); height: min(90vh, 60rem); padding: 0; border: 0; border-radius: var(--dockit-radius); }
.dockit__preview::backdrop { background: rgb(0 0 0 / .6); }
.dockit__preview-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--dockit-border); }
.dockit__preview-title { flex: 1; font-size: 1rem; margin: 0; }
.dockit__preview-body { height: calc(100% - 3.75rem); }
.dockit__preview-body iframe { width: 100%; height: 100%; border: 0; }
.dockit__preview-body img { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }

/* The top (heading, intro, search) and the folder menu beside the results (Folder filter: Menu) */
.dockit__head { margin-bottom: 1.25rem; }
.dockit__head > :last-child { margin-bottom: 0; }
.dockit--side .dockit__layout { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.dockit__foldernav { border: 0; padding: 0; margin: 0; min-width: 0; }
.dockit__foldernav-title { float: none; width: auto; font-size: 1rem; font-weight: 700; padding: 0; margin: 0 0 .5rem; }
.dockit__foldernav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.dockit__foldernav-list li { padding-left: calc(var(--dockit-depth, 0) * .9rem); }
.dockit__folder { position: relative; display: block; cursor: pointer; margin: 0; }
.dockit__folder input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dockit__folder span { display: block; padding: .55rem .75rem; border-radius: var(--dockit-radius); line-height: 1.3; }
.dockit__folder:hover span { background: color-mix(in srgb, currentColor 6%, transparent); }
.dockit__folder input:checked + span { background: var(--dockit-accent); color: #fff; font-weight: 600; }
.dockit__folder:has(input:focus-visible) span { outline: 2px solid var(--dockit-accent); outline-offset: 2px; }

/* The table becomes cards on small screens */
@media (max-width: 767.98px) {
  .dockit__table thead { display: none; }
  .dockit__table, .dockit__table tbody, .dockit__table tr, .dockit__table th, .dockit__table td { display: block; width: 100%; }
  .dockit__table tr { padding: .75rem 0; border-bottom: 1px solid var(--dockit-border); }
  .dockit__table th, .dockit__table td { border: 0; padding: .15rem 0; text-align: left !important; }
  .dockit__table td[data-label]:not(:empty)::before { content: attr(data-label) ": "; color: var(--dockit-muted); font-size: .875rem; }
  .dockit__table .dockit__cell-check { float: right; width: auto; }
  .dockit__search { flex-wrap: wrap; }
  .dockit__select { flex: 1 1 100%; }
  .dockit--side .dockit__layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .dockit__foldernav-list { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .25rem; scrollbar-width: thin; }
  .dockit__foldernav-list li { padding-left: 0; flex: 0 0 auto; }
  .dockit__folder span { white-space: nowrap; border: 1px solid var(--dockit-border); padding: .45rem .8rem; }
  .dockit__zipbar { flex-wrap: wrap; }
}

/* Documents in articles and modules (content plugin, mod_dockit) */
.dockit-inline { display: inline; }
.dockit-inline .dockit__meta { display: inline-flex; vertical-align: baseline; margin-left: .25rem; }
.dockit-inline__link { font-weight: 600; }
.dockit-embed { margin: 1rem 0; }
.dockit-embed__heading { font-size: 1.1rem; margin: 0 0 .5rem; }
.dockit-embed__list { list-style: none; padding: 0; margin: 0; }
.dockit-embed__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--dockit-border); }
.dockit-embed__item:last-child { border-bottom: 0; }
.dockit-embed__link { font-weight: 600; }
.dockit-embed__more { margin: .5rem 0 0; font-size: .875rem; }
.dockit__meta .dockit__lang { padding: .1rem .4rem; font-size: .75rem; }
.dockit-search { display: flex; gap: .5rem; }
.dockit-search input { flex: 1; min-width: 0; }