/* Meine Dateien: picker for all studios (files.js) */
.tf-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: start center; padding: 8vh 16px 16px;
  background: rgba(4, 10, 16, .55); backdrop-filter: blur(6px); }
.tf-dialog { width: min(680px, 100%); max-height: 84vh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: 10px;
  padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: #121b25; color: #eef3f7;
  box-shadow: 0 30px 90px rgba(0,0,0,.55); font-size: 15px; }
.tf-head { display: flex; align-items: center; gap: 10px; }
.tf-head h3 { margin: 0 auto 0 0; font-size: 19px; }
.tf-close { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; font-size: 22px; cursor: pointer; }
.tf-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tf-tab { flex: none; padding: 6px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: none; color: #c4cdd5; font: inherit; font-size: 13px; cursor: pointer; }
.tf-tab[aria-selected=true] { background: #5ac8fa; border-color: #5ac8fa; color: #04121c; font-weight: 600; }
.tf-search { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; font: inherit; }
.tf-list { overflow: auto; display: grid; gap: 2px; align-content: start; min-height: 180px; }
.tf-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.tf-row:hover, .tf-row:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.tf-row[aria-selected=true] { background: rgba(90,200,250,.18); box-shadow: inset 0 0 0 1px #5ac8fa; }
.tf-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: #1f2c39 center/cover no-repeat;
  color: #9fb3c4; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.tf-icon[data-kind=docx] { background-color: #1e3a66; color: #cfe0ff; } .tf-icon[data-kind=xlsx] { background-color: #164b33; color: #c9f2dc; }
.tf-icon[data-kind=pptx] { background-color: #5b2a1c; color: #ffd9cc; } .tf-icon[data-kind=video] { background-color: #3a2457; color: #e4d4ff; }
.tf-text { display: grid; min-width: 0; } .tf-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tf-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8fa1b1; font-size: 12.5px; }
.tf-status { margin: 0; min-height: 1.2em; color: #8fa1b1; font-size: 13px; }
.tf-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .tf-spacer { flex: 1; }
.tf-page-field { display: flex; align-items: center; gap: 6px; font-size: 13px; } .tf-page { width: 70px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; }
@media (max-width: 640px) { .tf-backdrop { padding: 0; place-items: end stretch; } .tf-dialog { max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) .tf-dialog { background: #fff; color: #10202c; border-color: rgba(0,0,0,.1); }
  :root:not([data-theme=dark]) .tf-row:hover { background: rgba(0,0,0,.05); } :root:not([data-theme=dark]) .tf-search { background: #f4f7f9; border-color: rgba(0,0,0,.12); } }
:root[data-theme=light] .tf-dialog { background: #fff; color: #10202c; }

/* Shared Explorer. Scope above the global workspace controls. */
#workspace #documents-panel .tf-switch,
#workspace #documents-panel .tf-explorer-toolbar,
#workspace #documents-panel .tf-crumbs,
#workspace #documents-panel .tf-preview-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#workspace #documents-panel .tf-switch{margin:12px 0}
#workspace #documents-panel .tf-switch [aria-pressed="true"],
#workspace #documents-panel .tf-explorer-nav [aria-current="true"]{background:var(--k-surface-3,#20364a);color:var(--k-text,#eef3f7);border-color:var(--k-accent,#5ac8fa)}
#workspace #documents-panel .tf-explorer{min-width:0}
#workspace #documents-panel .tf-explorer-toolbar{padding-bottom:14px;border-bottom:1px solid var(--k-line,#304050)}
#workspace #documents-panel .tf-explorer-toolbar input{flex:1 1 200px;width:auto;min-width:0}
#workspace #documents-panel .tf-explorer-toolbar select{flex:0 1 190px;width:auto;min-width:0}
#workspace #documents-panel .tf-explorer-body{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(220px,30%);min-height:400px}
#workspace #documents-panel .tf-explorer-nav{display:flex;flex-direction:column;gap:4px;padding:14px 12px 14px 0;border-right:1px solid var(--k-line,#304050)}
#workspace #documents-panel .tf-explorer-nav button{justify-content:flex-start;text-align:left;min-height:38px}
#workspace #documents-panel .tf-explorer-main{min-width:0;padding:12px}
#workspace #documents-panel .tf-crumbs{margin-bottom:12px}
#workspace #documents-panel .tf-explorer-list{display:grid;align-content:start;gap:4px;max-height:65vh;overflow:auto}
#workspace #documents-panel .tf-explorer-list .tf-entry{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;text-align:left;padding:12px;min-width:0;border-color:transparent;justify-content:stretch;font-size:14px;min-height:66px}
#workspace #documents-panel .tf-entry strong,#workspace #documents-panel .tf-entry small{overflow-wrap:anywhere;min-width:0}
#workspace #documents-panel .tf-entry small{grid-column:2;font-weight:400;color:var(--k-muted,#9dafbe)}
#workspace #documents-panel .tf-filetype{grid-row:span 2;align-self:center;font-size:11px;color:var(--k-accent,#5ac8fa)}
#workspace #documents-panel .tf-entry[aria-selected="true"]{background:var(--k-surface-3,#20364a);outline:2px solid var(--k-accent,#5ac8fa);outline-offset:-2px}
#workspace #documents-panel .tf-folder{text-align:left;justify-content:flex-start;min-height:40px}
#workspace #documents-panel .tf-preview{min-width:0;border-left:1px solid var(--k-line,#304050);padding:14px;overflow-wrap:anywhere}
#workspace #documents-panel .tf-preview h3{margin-top:0}
#workspace #documents-panel .tf-preview img,#workspace #documents-panel .tf-preview video,#workspace #documents-panel .tf-preview audio{max-width:100%;margin-top:14px}
#workspace #documents-panel .tf-preview iframe{width:100%;height:460px;border:0;margin-top:14px}
#workspace #documents-panel .tf-tiles .tf-explorer-list{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
#workspace #documents-panel .tf-tiles .tf-entry{display:flex;flex-direction:column;align-items:flex-start}
#workspace #documents-panel .tf-tiles .tf-filetype{font-size:22px;padding:14px 0}
#workspace #documents-panel .tf-explorer button:focus-visible{outline:2px solid var(--k-accent,#5ac8fa);outline-offset:-2px}
#workspace #documents-panel .tf-explorer button:active{transform:none}
.documents-layout[hidden],.tf-explorer[hidden],.tf-explorer [hidden]{display:none!important}
@media(max-width:1000px){
  #workspace #documents-panel .tf-explorer-body{grid-template-columns:150px minmax(0,1fr)}
  #workspace #documents-panel .tf-preview{grid-column:1/-1;border-left:0;border-top:1px solid var(--k-line,#304050)}
}
@media(max-width:600px){
  #workspace #documents-panel .tf-explorer-body{display:block}
  #workspace #documents-panel .tf-explorer-nav{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--k-line,#304050);padding:10px 0}
  #workspace #documents-panel .tf-explorer-nav button{flex-shrink:0}
  #workspace #documents-panel .tf-explorer-main{padding:10px 0}
  #workspace #documents-panel .tf-explorer-toolbar input{width:100%;flex-basis:100%}
  #workspace #documents-panel .tf-explorer-list{max-height:55vh}
  #workspace #documents-panel .tf-preview{padding:12px 0}
}