/* 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; }

/* Checkboxes in DocKit's own look: rounded, the accent colour when ticked, a white tick; keyboard focus only */
.dockit input[type="checkbox"].dockit__pick, .dockit input[type="checkbox"].dockit__checkall {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem; margin: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: .3rem;
  background: var(--dockit-check-bg, #fff) center / 75% no-repeat; transition: background-color .12s, border-color .12s;
}
.dockit input[type="checkbox"].dockit__pick:hover, .dockit input[type="checkbox"].dockit__checkall:hover { border-color: var(--dockit-accent); }
.dockit input[type="checkbox"].dockit__pick:checked, .dockit input[type="checkbox"].dockit__checkall:checked,
.dockit input[type="checkbox"].dockit__checkall:indeterminate {
  border-color: var(--dockit-accent); background-color: var(--dockit-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dockit input[type="checkbox"].dockit__checkall:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dockit input[type="checkbox"].dockit__pick:focus-visible, .dockit input[type="checkbox"].dockit__checkall:focus-visible { outline: 2px solid var(--dockit-accent); outline-offset: 2px; }
.dockit__check span { user-select: none; }

.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__table .dockit__col-actions { text-align: right; width: 1%; white-space: nowrap; }
.dockit__table .dockit__col-actions .dockit__actions { justify-content: flex-end; }
.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 {
  display: inline-block; padding: .1rem .35rem; border-radius: .3rem; font-size: .68em; font-weight: 600; line-height: 1.2;
  letter-spacing: .02em; background: rgb(255 255 255 / .2); color: inherit;
}
.is-locked .dockit__ext { background: transparent; border: 1px solid var(--dockit-border); }
.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); }

/* Templates often colour every link (a:not(.btn), .t4-content a …): DocKit's own buttons keep their colours. */
.dockit a.dockit__download, .dockit a.dockit__download:hover, .dockit a.dockit__download:focus { color: #fff; text-decoration: none; }
.dockit a.dockit__download:hover { background: color-mix(in srgb, var(--dockit-accent) 85%, #000); border-color: color-mix(in srgb, var(--dockit-accent) 85%, #000); }
.dockit .is-locked a.dockit__download, .dockit .is-locked a.dockit__download:hover { color: inherit; background: transparent; border-color: var(--dockit-border); }
.dockit a.dockit__lang, .dockit a.dockit__switch-btn { color: inherit; text-decoration: none; }
.dockit a.dockit__switch-btn.is-active { color: #fff; }
.dockit .btn.dockit__zipbutton, .dockit .dockit__search .btn {
  --dockit-accent-dark: color-mix(in srgb, var(--dockit-accent) 85%, #000);
  --bs-btn-color: #fff; --bs-btn-bg: var(--dockit-accent); --bs-btn-border-color: var(--dockit-accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dockit-accent-dark); --bs-btn-hover-border-color: var(--dockit-accent-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--dockit-accent-dark); --bs-btn-active-border-color: var(--dockit-accent-dark);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--dockit-accent); --bs-btn-disabled-border-color: var(--dockit-accent);
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: #fff;
}
.dockit .btn.dockit__zipbutton:hover, .dockit .btn.dockit__zipbutton:focus, .dockit .btn.dockit__zipbutton:active,
.dockit .dockit__search .btn:hover, .dockit .dockit__search .btn:focus, .dockit .dockit__search .btn:active { background-color: var(--dockit-accent-dark); border-color: var(--dockit-accent-dark); color: #fff; box-shadow: none; }
.dockit .btn.dockit__zipbutton:disabled { background-color: var(--dockit-accent); border-color: var(--dockit-accent); color: #fff; opacity: .5; }

.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; }

/* Coloured file types (option "Coloured file types"): one colour per file family, white text with min. 4.5:1 contrast.
   Change a colour in the template, e.g. .dockit { --dockit-type-pdf: #b00020; } */
.dockit__filetype { line-height: 1.3; letter-spacing: .03em; border-radius: .3rem; font-weight: 500; }
.dockit__filetype--pdf        { background: var(--dockit-type-pdf, #c62828); color: #fff; }
.dockit__filetype--word       { background: var(--dockit-type-word, #1d5bbf); color: #fff; }
.dockit__filetype--excel      { background: var(--dockit-type-excel, #1e7145); color: #fff; }
.dockit__filetype--powerpoint { background: var(--dockit-type-powerpoint, #c2410c); color: #fff; }
.dockit__filetype--image      { background: var(--dockit-type-image, #6d3fc0); color: #fff; }
.dockit__filetype--archive    { background: var(--dockit-type-archive, #f2c94c); color: #3d2e00; }
.dockit__filetype--video      { background: var(--dockit-type-video, #b0246b); color: #fff; }
.dockit__filetype--audio      { background: var(--dockit-type-audio, #0f766e); color: #fff; }
.dockit__filetype--text       { background: var(--dockit-type-text, #4b5563); color: #fff; }
.dockit__filetype--other      { background: var(--dockit-type-other, #e5e7eb); color: #374151; }
.is-locked .dockit__filetype  { opacity: .6; }
.dockit__meta .dockit__filetype { padding: .1rem .4rem; font-size: .7rem; vertical-align: .1em; margin-right: .3rem; }

.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; }
/* The preview's buttons: DocKit's own look, whatever the template does to links and .btn-secondary */
.dockit .dockit__preview .dockit__preview-download, .dockit .dockit__preview .dockit__preview-close {
  display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: var(--dockit-radius);
  font-size: .875rem; line-height: 1.3; text-decoration: none; box-shadow: none; cursor: pointer;
}
.dockit .dockit__preview a.dockit__preview-download, .dockit .dockit__preview a.dockit__preview-download:hover {
  background: var(--dockit-accent); border: 1px solid var(--dockit-accent); color: #fff;
}
.dockit .dockit__preview a.dockit__preview-download:hover { background: color-mix(in srgb, var(--dockit-accent) 85%, #000); }
.dockit .dockit__preview .dockit__preview-close, .dockit .dockit__preview .dockit__preview-close:hover {
  background: transparent; border: 1px solid var(--dockit-border); color: inherit;
}
.dockit .dockit__preview .dockit__preview-close:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.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__subheading { font-size: 1.15rem; margin: -.25rem 0 1rem; color: var(--dockit-muted); }
.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 .dockit__col-actions { width: auto; }
  .dockit__table .dockit__col-actions .dockit__actions { justify-content: flex-start; }
  .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; }