/* Ultralight Documents - public widget. Colours and sizes arrive as --uldoc-* custom properties on the wrapper. */
.uldoc {
  --uldoc-accent: #2271b1;
  --uldoc-btn-bg: #2271b1;
  --uldoc-btn-fg: #fff;
  --uldoc-btn-hover: #1f6aa5;
  --uldoc-btn-radius: 20px;
  --uldoc-header-bg: #f5f6f8;
  --uldoc-border: #e0e3e8;
  --uldoc-row-hover: #fafbff;
  --uldoc-card-radius: 8px;
  --uldoc-card-min: 175px;
  --uldoc-font-size: 15px;
  --uldoc-text: inherit;
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--uldoc-font-size);
  color: var(--uldoc-text);
  line-height: 1.4;
}
.uldoc *, .uldoc *::before, .uldoc *::after { box-sizing: border-box; }
.uldoc [hidden] { display: none !important; }
.uldoc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Toolbar (the script reveals it) */
.uldoc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.uldoc-js .uldoc-bar { display: flex !important; }
.uldoc-per { display: inline-flex; align-items: center; gap: 8px; }
.uldoc-select { font: inherit; color: inherit; padding: 4px 8px; border: 1px solid var(--uldoc-border); border-radius: 4px; background: #fff; }
.uldoc-toggle { display: inline-flex; gap: 4px; }
.uldoc-vbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; cursor: pointer; color: inherit; background: #fff; border: 1px solid var(--uldoc-border); border-radius: 4px; }
.uldoc-vbtn[aria-pressed="true"] { color: #fff; background: var(--uldoc-accent); border-color: var(--uldoc-accent); }
.uldoc-vbtn:focus-visible, .uldoc-select:focus-visible, .uldoc-btn:focus-visible, .uldoc-pages button:focus-visible { outline: 2px solid var(--uldoc-accent); outline-offset: 2px; }

/* List view: a real table */
.uldoc-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; table-layout: auto; }
.uldoc-table th, .uldoc-table td { padding: 10px 12px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--uldoc-border); background: transparent; }
.uldoc-table thead th { background: var(--uldoc-header-bg); border-bottom: 2px solid var(--uldoc-border); font-weight: 600; }
.uldoc-table tbody tr:hover td { background: var(--uldoc-row-hover); }
.uldoc-c-file { width: 100%; }
.uldoc-c-file .uldoc-icon { display: inline-flex; vertical-align: middle; margin-right: 8px; color: var(--uldoc-accent); }
.uldoc-c-file .uldoc-title { vertical-align: middle; overflow-wrap: anywhere; }
.uldoc-c-size, .uldoc-c-type, .uldoc-c-date, .uldoc-c-dl { white-space: nowrap; }
.uldoc-c-dl { text-align: right !important; }

.uldoc-btn { display: inline-block; padding: 6px 16px; font-size: .9em; line-height: 1.4; text-decoration: none; color: var(--uldoc-btn-fg); background: var(--uldoc-btn-bg); border-radius: var(--uldoc-btn-radius); border: 0; box-shadow: none; transition: background .15s; }
.uldoc-btn:hover, .uldoc-btn:focus { color: var(--uldoc-btn-fg); background: var(--uldoc-btn-hover); text-decoration: none; }

/* Grid view: the same table restyled; the script adds the matching roles back */
.uldoc-grid .uldoc-table, .uldoc-grid .uldoc-table tbody { display: block; }
.uldoc-grid .uldoc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.uldoc-grid .uldoc-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--uldoc-card-min), 1fr)); gap: 14px; }
.uldoc-grid .uldoc-row { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; text-align: center; border: 1px solid var(--uldoc-border); border-radius: var(--uldoc-card-radius); }
.uldoc-grid .uldoc-row:hover { background: var(--uldoc-row-hover); }
.uldoc-grid .uldoc-table td { display: block; padding: 0; border: 0; width: auto; background: transparent !important; text-align: center; }
.uldoc-grid .uldoc-c-file .uldoc-icon { display: flex; justify-content: center; margin: 0 0 8px; }
.uldoc-grid .uldoc-c-file .uldoc-icon svg { width: 40px; height: 40px; }
.uldoc-grid .uldoc-c-file .uldoc-title { display: block; font-weight: 600; }
.uldoc-grid .uldoc-c-size, .uldoc-grid .uldoc-c-type, .uldoc-grid .uldoc-c-date { font-size: .85em; opacity: .75; white-space: normal; }
.uldoc-grid .uldoc-c-dl { margin-top: auto; padding-top: 6px; text-align: center !important; }

/* Count and pager */
.uldoc-count { margin: 12px 0 0; font-size: .9em; opacity: .8; }
.uldoc-pages { margin: 10px 0 0; }
.uldoc-pages ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.uldoc-pages li { margin: 0; padding: 0; list-style: none; }
.uldoc-pages button { min-width: 34px; height: 34px; padding: 0 10px; font: inherit; cursor: pointer; color: inherit; background: #fff; border: 1px solid var(--uldoc-border); border-radius: 4px; }
.uldoc-pages button:hover:not([disabled]) { background: var(--uldoc-row-hover); }
.uldoc-pages button[aria-current="page"] { color: var(--uldoc-btn-fg); background: var(--uldoc-btn-bg); border-color: var(--uldoc-btn-bg); }
.uldoc-pages button[disabled] { opacity: .45; cursor: default; }
.uldoc-pages .uldoc-gap { display: inline-block; min-width: 20px; text-align: center; line-height: 34px; }

.uldoc-empty, .uldoc-note { margin: 0; padding: 16px 0; }
.uldoc-manage { margin: 0; }

@media (prefers-reduced-motion: reduce) { .uldoc-btn { transition: none; } }