/* Documents app: browse (side folders + file grid / list), workspaces, tags. 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; }

.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 { display: flex; flex-wrap: wrap; gap: 8px; }
.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-modes { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.doc-modes .icon-btn.on { background: var(--accent-soft); color: var(--accent-d); }

/* ------------------------------------------------------------ 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 { grid-column: 1 / -1; }
.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-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.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; 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-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-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; } }
@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-title { display: none; }
  .doc-top { justify-content: stretch; }
  .doc-top-acts { width: 100%; }
  :root:root .doc-top-acts .btn { flex: 1 1 0; min-height: 48px; justify-content: center; }
  .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; }
  .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); } }