/* ==========================================================================
   Gyártás dokumentumböngésző és dokumentumnézők
   ========================================================================== */

.docs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.docs-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 0.75rem 1.4rem 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; position: relative; z-index: 5; box-shadow: 0 2px 0 rgba(16, 19, 22, .03); }
.docs-bar .bar-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; min-width: 0; }
.docs-bar .bar-row.top { flex-wrap: nowrap; }
.docs-title { display: flex; align-items: center; gap: 0.6rem; }
.docs-title h1 { font-size: 1.7rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.crumb { min-height: 2.7rem; padding: 0 0.85rem; border-radius: 0.6rem; border: 0; background: var(--g-100); font-weight: 600; font-size: 1.02rem; color: var(--g-800); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.crumb:active { background: var(--g-200); }
.crumb.cur { background: var(--g-900); color: #fff; cursor: default; }
.crumb-sep { color: var(--g-400); width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.searchbox { flex: 1 1 22rem; min-width: 16rem; max-width: 44rem; display: flex; gap: 0.5rem; align-items: stretch; }
.searchbox .field-wrap { flex: 1; }
.searchbox .field { min-height: var(--tap); }
.sortbar { display: flex; align-items: center; gap: 0.5rem; }
.sortbar .lbl { font-size: 0.8rem; color: var(--g-500); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.count-line { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; color: var(--g-600); font-size: 0.95rem; min-height: 1.6rem; }
.count-line b { color: var(--text); }

.docs-body { flex: 1; min-height: 0; overflow: auto; padding: 1.1rem 1.4rem 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; overscroll-behavior: contain; }

.doc-grid.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(21.5rem, 1fr)); gap: 0.85rem; align-items: stretch; }
.doc-grid.list { display: flex; flex-direction: column; gap: 0.5rem; }
.doc-item {
  text-align: left; background: #fff; border: 2px solid var(--g-200); border-radius: 1rem; cursor: pointer; display: flex; gap: 0.95rem; align-items: flex-start;
  padding: 0.85rem 1rem; min-height: 6.4rem; width: 100%; color: inherit; box-shadow: var(--shadow-1); position: relative;
}
.doc-item:active { border-color: var(--g-900); background: var(--g-50); }
.doc-item.dir { border-color: var(--g-300); background: linear-gradient(180deg, #fff, #f8f9fa); }
.doc-item .di-ic { flex: 0 0 auto; width: 3.7rem; display: grid; place-items: center; padding-top: 0.15rem; }
.doc-item .di-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }
.doc-item .di-name { font-size: 1.14rem; font-weight: 650; line-height: 1.28; }
.doc-item .di-path { font-size: 0.88rem; color: var(--g-600); overflow-wrap: anywhere; }
.doc-item .di-meta { color: var(--g-500); font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.doc-item .di-go { align-self: center; color: var(--g-400); width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.doc-item.dir .di-go { color: var(--g-700); }
.doc-item.unsafe { border-style: dashed; border-color: var(--red-line); background: #fffafa; }
.doc-item.unsafe .di-name { color: var(--g-600); }
mark { background: #ffe29a; color: inherit; border-radius: 0.2rem; padding: 0 0.04em; }

.doc-head, .doc-grid.list .doc-item { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr) 13.5rem 7rem 11.5rem 1.5rem; gap: 0.9rem; align-items: center; }
.doc-grid.list .doc-item { min-height: 4.9rem; padding: 0.55rem 1rem; }
.doc-grid.list .doc-item .di-ic { padding-top: 0; }
.doc-grid.list .doc-item .cell { font-size: 0.95rem; color: var(--g-700); overflow-wrap: anywhere; }
.doc-grid.list .doc-item .di-meta.under { display: none; }
.doc-head { padding: 0 1rem; color: var(--g-500); font-weight: 650; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.doc-head button { background: transparent; border: 0; text-align: left; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; min-height: 2.4rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; padding: 0; }
.doc-head button[aria-pressed='true'] { color: var(--text); }
.doc-head button svg { width: 1em; height: 1em; }
.doc-grid.tiles .doc-item .cell { display: none; }
.doc-grid.list .di-meta.in-tile { display: none; }

.more-btn { align-self: center; margin-top: 0.4rem; }

.ro-note { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--g-500); font-size: 0.82rem; }
.ro-note svg { width: 1em; height: 1em; }

/* ---------------------------------------------------------------- nézőkeret */
.viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--g-100); }
.viewer.focus { position: fixed; inset: 0; z-index: 800; background: #2a2f35; }
.viewer-head { background: #fff; border-bottom: 1px solid var(--line); padding: 0.55rem 1.1rem; display: flex; gap: 0.9rem; align-items: center; }
.viewer.focus .viewer-head { background: var(--g-900); color: #fff; border-bottom: 3px solid var(--red); padding: 0.4rem 1rem; }
.viewer-head .vh-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.viewer-head .vh-name { font-size: 1.28rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.viewer.focus .vh-name { font-size: 1.05rem; }
.viewer-head .vh-sub { color: var(--g-600); font-size: 0.84rem; display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; align-items: center; }
.viewer-head .chip { font-size: 0.78rem; padding: 0.12rem 0.6rem; }
.viewer.focus .vh-sub { color: var(--g-300); }
.viewer.focus .vh-path { display: none; }
.vh-path { overflow-wrap: anywhere; }
.viewer-stack { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1.1rem 0; }
.viewer.focus .viewer-stack { padding: 0.4rem 1rem 0; background: #2a2f35; }
.viewer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0.5rem 1.1rem 0.8rem; border-radius: 1rem; overflow: hidden; background: #3a3f45; position: relative; }
.app.viewing .demo-strip, .app.viewing .footer { display: none; }
.viewer.focus .viewer-body { margin: 0.5rem 0 0; border-radius: 0; flex: 1; }
.viewer-note { color: var(--g-300); font-size: 0.85rem; padding: 0.4rem 1rem; background: #2f343a; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.viewer-note svg { width: 1.1em; height: 1.1em; }

.vbar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 0.8rem; background: var(--g-900); flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); }
.vbar .vsep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .18); margin: 0.2rem 0.4rem; }
.vbar .vlabel { color: #fff; font-weight: 700; font-size: 1.1rem; min-width: 5.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.vbar .btn { min-height: 3.1rem; }
.vbar .btn.light[aria-pressed='true'] { background: #fff; color: var(--g-900); }

/* PDF */
.pdf-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: #4a5057; touch-action: pan-x pan-y; overscroll-behavior: contain; position: relative; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1rem; min-width: min-content; width: max-content; margin: 0 auto; transform-origin: 0 0; }
.pdf-page { background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .45); position: relative; flex: 0 0 auto; }
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.pdf-page .pg-no { position: absolute; left: 0.5rem; top: 0.4rem; background: rgba(23, 27, 31, .75); color: #fff; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 0.4rem; pointer-events: none; }
.pdf-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }

/* kép */
.img-stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; touch-action: none; cursor: grab; background: #2c3136; background-image: linear-gradient(45deg, #343a40 25%, transparent 25%, transparent 75%, #343a40 75%), linear-gradient(45deg, #343a40 25%, transparent 25%, transparent 75%, #343a40 75%); background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.img-stage.drag { cursor: grabbing; }
.img-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; will-change: transform; }

/* szöveg, táblázat, Office */
.text-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; padding: 1.4rem 1.8rem; user-select: text; -webkit-user-select: text; }
.text-scroll pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace; line-height: 1.55; }
.csv-table, .sheet-table { border-collapse: collapse; font-size: 0.95rem; min-width: 100%; }
.csv-table td, .csv-table th, .sheet-table td, .sheet-table th { border: 1px solid var(--g-200); padding: 0.4rem 0.7rem; vertical-align: top; overflow-wrap: anywhere; max-width: 28rem; text-align: left; }
.csv-table thead th, .sheet-table thead th { background: var(--g-100); position: sticky; top: 0; z-index: 1; }
.sheet-table .rn { background: var(--g-100); color: var(--g-500); text-align: right; font-variant-numeric: tabular-nums; position: sticky; left: 0; }
.office-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; }
.sheet-tabs { display: flex; gap: 0.4rem; padding: 0.5rem 0.8rem; background: var(--g-900); overflow-x: auto; }

/* videó */
.video-stage { flex: 1 1 auto; min-height: 0; background: #000; display: grid; place-items: center; position: relative; }
.video-stage video { max-width: 100%; max-height: 100%; background: #000; }
.video-seek { flex: 1 1 14rem; min-width: 10rem; height: 2.2rem; accent-color: #fff; }
.video-big-play { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; }
.video-big-play span { width: 6rem; height: 6rem; border-radius: 50%; background: rgba(23, 27, 31, .75); color: #fff; display: grid; place-items: center; }
.video-big-play svg { width: 3rem; height: 3rem; }

/* nem megjeleníthető fájl */
.info-card { background: #fff; border-radius: 1rem; padding: 1.6rem 1.8rem; margin: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; max-width: 60rem; align-self: center; width: calc(100% - 3rem); overflow: auto; }
.info-card .ic-top { display: flex; align-items: center; gap: 1.2rem; }