/* Documents app: browse (side folder tree + file grid / list, trash), workspaces, tags, share links; the versions and share dialogs. Tokens from admin.css only, logical properties, light + dark through the tokens, phone first at 375 px. */

/* ------------------------------------------------------------ layout */
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; margin-block-start: 12px; align-items: start; }
.doc-side { position: sticky; top: 8px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.doc-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px 4px; padding-inline: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.doc-manage { font-size: 12px; font-weight: 650; text-transform: none; color: var(--accent-d); background: none; border: 0; cursor: pointer; padding: 4px; }
.doc-manage:hover { text-decoration: underline; }
.doc-nav { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding-inline: 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: start; cursor: pointer; }
.doc-nav:hover { background: var(--panel-2); }
.doc-nav.on { background: var(--accent-soft); color: var(--accent-d); font-weight: 700; }
.doc-nav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); margin-inline: 2px; }
.doc-side-empty { padding-inline: 8px; }
.doc-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 4px; }
.doc-phone-nav { display: none; }
/* folder tree: each level steps in by 14px; the caret folds a folder */
.doc-nav-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.doc-nav-row.is-sub { padding-inline-start: calc(var(--depth, 0) * 14px); }
.doc-nav-row > .doc-nav { flex: 1; min-width: 0; }
.doc-caret, .doc-caret-gap { flex: none; width: 22px; height: 30px; }
.doc-caret { display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.doc-caret:hover { background: var(--panel-2); color: var(--ink); }
.doc-caret svg { transition: transform .16s ease; }
.doc-caret.open svg { transform: rotate(90deg); }
[dir="rtl"] .doc-caret:not(.open) svg { transform: scaleX(-1); }
.doc-side-sep { height: 1px; margin-block: 8px 2px; background: var(--line); }

.doc-main { min-width: 0; border-radius: var(--r-sm); }
.doc-main.is-drop { outline: 2px dashed var(--accent); outline-offset: 6px; background: var(--accent-soft); }
.doc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 10px; }
.doc-title { margin: 0; font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.doc-top-acts, .doc-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-head-acts > [hidden] { display: none; }
.doc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.doc-crumb { padding: 4px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--accent-d); font: inherit; font-weight: 600; cursor: pointer; }
.doc-crumb:hover { background: var(--accent-soft); }
.doc-crumb-sep { color: var(--muted); }
[dir="rtl"] .doc-crumb-sep { transform: scaleX(-1); }
.btn.doc-camera-btn { display: none; }
.doc-file-input { display: none; }
.doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 12px; }
.doc-search { flex: 1 1 220px; max-width: 360px; min-height: 40px; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.doc-sel { min-height: 40px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); max-width: 100%; }
.doc-check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.doc-bar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.doc-bar-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.doc-bar [hidden] { display: none; }
.doc-modes { display: inline-flex; }
.doc-trash-note { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; }

/* ------------------------------------------------------------ upload status */
.doc-status { display: grid; gap: 4px; margin-block-end: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.doc-st-row { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.doc-st-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-st-r { font-weight: 700; }
.doc-st-row.good .doc-st-r { color: var(--ok-ink); }
.doc-st-row.bad .doc-st-r { color: var(--danger-ink); }

/* ------------------------------------------------------------ files */
.doc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.doc-items > .empty, .doc-items > .doc-no-files { grid-column: 1 / -1; }
.doc-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-block-end: 12px; }
.doc-folders[hidden] { display: none; }
.doc-card.is-folder { grid-template-rows: auto 1fr; }
.doc-tile.is-folder { aspect-ratio: 5 / 2; color: var(--tg, var(--accent)); background: color-mix(in srgb, var(--tg, var(--accent)) 10%, var(--panel)); }
.doc-name.as-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 650; text-align: start; cursor: pointer; }
.doc-name.as-link:hover { text-decoration: underline; }
.doc-items.is-list ~ .doc-more, .doc-folders + .doc-items.is-list { margin-block-start: 0; }
.doc-card { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow); }
.doc-card.is-archived { opacity: .7; }
.doc-card.is-trashed .doc-tile { filter: grayscale(.7); opacity: .8; }
.doc-card.is-trashed .doc-acts .btn { min-height: 34px; }
.doc-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-start-start-radius: var(--r-sm); border-start-end-radius: var(--r-sm); overflow: hidden; }
.doc-open:disabled { cursor: default; }
.doc-tile { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; background: var(--panel-3); color: var(--muted); }
.doc-tile b { font-size: 12px; letter-spacing: .06em; }
.doc-tile.has-img { background: var(--panel-2); }
.doc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-info { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px 6px; }
.doc-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { overflow-wrap: anywhere; }
.doc-note { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.doc-chip, .doc-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap; background: color-mix(in srgb, var(--tg, var(--muted)) 16%, var(--panel)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--tg, var(--muted)) 40%, var(--line)); }
.doc-chip > span, .doc-tag { overflow: hidden; text-overflow: ellipsis; }
.doc-chip.tone-warn { --tg: var(--warn); }
.doc-chip.tone-bad { --tg: var(--danger); }
.doc-chip.tone-lock { --tg: var(--danger); }
.doc-chip.tone-share { --tg: var(--info); }
button.doc-chip.as-btn { cursor: pointer; font-family: inherit; }
button.doc-chip.as-btn:hover { filter: brightness(.96); }
.doc-chip.doc-rec { --tg: var(--info); text-decoration: none; color: var(--info-ink); }
a.doc-rec:hover { text-decoration: underline; }
.doc-tag.as-btn { cursor: pointer; font-family: inherit; min-height: 30px; }
.doc-tag.as-btn small { color: var(--muted); }
.doc-tag.as-btn.on { background: var(--tg); color: #fff; }
.doc-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--line-2, var(--line)); }
a.icon-btn { display: inline-grid; place-items: center; }

.doc-menu { position: relative; }
.doc-menu > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; }
.doc-menu > summary::-webkit-details-marker { display: none; }
.doc-menu-list { position: absolute; inset-inline-end: 0; top: 100%; z-index: 30; min-width: 220px; max-height: min(70vh, 520px); overflow-y: auto; display: grid; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow-lg); }
.doc-menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-inline: 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: start; cursor: pointer; }
.doc-menu-item:hover { background: var(--panel-2); }
.doc-menu-item.danger { color: var(--danger-ink); }
.doc-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.doc-more { display: flex; justify-content: center; margin-block-start: 14px; }

/* list mode: one row per file */
.doc-items.is-list { grid-template-columns: 1fr; gap: 6px; }
.doc-items.is-list .doc-card { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; box-shadow: none; }
.doc-items.is-list .doc-open { border-radius: var(--r-sm); }
.doc-items.is-list .doc-tile { aspect-ratio: 1; }
.doc-items.is-list .doc-info { padding-block: 8px; }
.doc-items.is-list .doc-acts { border-top: 0; }

/* ------------------------------------------------------------ preview */
.doc-pv { display: grid; place-items: center; min-height: 160px; }
.doc-pv-img { max-width: 100%; max-height: 70vh; display: block; margin-inline: auto; object-fit: contain; }
.doc-pv-frame { width: 100%; height: 70vh; border: 0; background: var(--panel-2); }
.doc-pv-none { display: grid; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.doc-pv-meta { margin-block-start: 8px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ workspaces + tags screens */
.doc-list[hidden] { display: none; }
.doc-c-main { min-width: 160px; }
.doc-ws-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-ws-name.is-sub { padding-inline-start: calc((var(--depth, 1) - 1) * 18px); }
.doc-ws-branch { color: var(--muted); }
[dir="rtl"] .doc-ws-branch { display: inline-block; transform: scaleX(-1); }

/* ------------------------------------------------------------ versions dialog */
.doc-vers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.doc-ver { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.doc-ver.is-current { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.doc-ver-n { font-weight: 700; white-space: nowrap; }
.doc-ver-main { min-width: 0; }
.doc-ver-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ver-acts { display: flex; align-items: center; gap: 4px; }
.doc-ver-empty { margin-block-start: 8px; }

/* ------------------------------------------------------------ share dialog + log */
.doc-share { display: grid; gap: 12px; }
.doc-share > p { margin: 0; }
.doc-share-new { padding: 12px; }
.doc-share-go { display: flex; justify-content: flex-end; margin-block-start: 8px; }
.doc-share-h { margin: 4px 0 0; font-size: 14px; }
.doc-links, .doc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.doc-link.is-off { opacity: .75; }
.doc-link-main { display: grid; gap: 6px; min-width: 0; }
.doc-link-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc-link-url { width: 100%; min-height: 36px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font-family: ui-monospace, monospace; font-size: 12.5px; }
.doc-link-acts { display: flex; align-items: center; gap: 4px; }
.doc-log-row { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.doc-log-row.is-password_wrong b { color: var(--danger-ink); }
.doc-log-row.is-download b { color: var(--ok-ink); }
.doc-row-actions { display: inline-flex; gap: 2px; }
.doc-c-act { white-space: nowrap; text-align: end; }
.doc-members { display: grid; gap: 8px; }
.doc-member { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto; gap: 8px; align-items: center; }
.doc-member select { min-height: 40px; min-width: 0; }

/* ------------------------------------------------------------ tablet / phone */
/* touch screens (tablets too): 44px targets */
@media (pointer: coarse) { .doc-nav, .doc-menu-item, .doc-tag.as-btn { min-height: 44px; } .doc-caret { height: 44px; width: 32px; } }
@media (prefers-reduced-motion: reduce) { .doc-caret svg { transition: none; } }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .btn.doc-camera-btn { display: inline-flex; }
}
@media (max-width: 720px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-side { display: none; }
  .doc-phone-nav { display: grid; gap: 8px; margin-block-end: 10px; }
  .doc-phone-nav .doc-sel { width: 100%; min-height: 44px; }
  .doc-top { justify-content: stretch; }
  .doc-top-acts, .doc-head-acts { width: 100%; }
  :root:root .doc-top-acts .btn, :root:root .doc-head-acts .btn { flex: 1 1 0; min-height: 48px; justify-content: center; }
  .doc-title { font-size: 16px; }
  .doc-bar-filters { flex-basis: 100%; }
  .doc-bar-tools { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .doc-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .doc-link { grid-template-columns: minmax(0, 1fr); }
  .doc-link-acts { justify-content: flex-end; }
  .doc-ver { grid-template-columns: minmax(0, 1fr) auto; }
  .doc-ver-n { grid-column: 1 / -1; }
  .doc-search { max-width: none; flex-basis: 100%; min-height: 44px; }
  .doc-bar .doc-sel { flex: 1 1 140px; min-height: 44px; }
  .doc-check { min-height: 44px; }
  .doc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root:root .doc-acts .icon-btn { width: 44px; height: 44px; }
  .doc-menu-list { min-width: 240px; }
  /* the file menu is a sheet above the bottom bar on a phone (it has up to 11 choices) */
  .doc-menu[open] > .doc-menu-list { position: fixed; inset-inline: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; overflow-y: auto; z-index: 80; }
  .doc-menu-item { min-height: 48px; }
  .doc-tag.as-btn { min-height: 44px; }
  .doc-items.is-list { grid-template-columns: 1fr; }
  .doc-items.is-list .doc-card { grid-template-columns: 56px minmax(0, 1fr); }
  .doc-items.is-list .doc-acts { grid-column: 1 / -1; border-top: 1px solid var(--line-2, var(--line)); }
  .doc-pv-frame { height: 60vh; }
  .doc-member { grid-template-columns: minmax(0, 1fr) auto; }
  .doc-member select:first-child { grid-column: 1 / -1; }
  :root:root .doc-row-actions .icon-btn { width: 44px; height: 44px; }
  .doc-modes { margin-inline-start: 0; }
}
@media (max-width: 380px) { .doc-items { grid-template-columns: minmax(0, 1fr); } }