/* Omnex Dosya Yöneticisi — filemanager.css (FM-6 kaynak layout portu)
 * filemanager-sync app.css fm-* düzeni; Omnex --ox-* token'larına uyarlandı.
 * Masaüstü-app gövdesi: daraltılabilir sidebar ağacı + pathbar + toolbar +
 * detaylı tablo + detay paneli + statusbar. Saas içerik alanına gömülür. */

.fm { display: flex; height: 100%; min-height: 460px; overflow: hidden; background: var(--ox-surface); }
/* Bu sayfa için içerik alanı tam-kenar (padding 0). Sayfa değişince otomatik geri gelir. */
.ox-content:has(.fm) { padding: 0 !important; overflow: hidden; }

/* ---- Sidebar ---- */
.fm-side { position: relative; flex: 0 0 auto; width: 248px; min-width: 200px; max-width: 380px; display: flex; flex-direction: column; border-right: 1px solid var(--ox-border); background: var(--ox-surface); }
/* Fold butonu köşede (yer kaplamaz) -> içerik en üste. */
.fm-side__top { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 0; }
.fm-side__fold { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; color: var(--ox-fg-muted); cursor: pointer; }
.fm-side__fold:hover { background: var(--ox-surface-2); color: var(--ox-primary); }
.fm-side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 8px 8px; }
.fm-side__foot { flex: none; border-top: 1px solid var(--ox-border); height: 44px; padding: 0 6px; display: flex; align-items: center; }
.fm-side__foot .fm-foot__btn { width: 100%; }

.fm-sec { margin-bottom: 14px; }
.fm-sec__title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ox-fg-muted); font-weight: 600; padding: 2px 10px 6px; }

.fm-node { display: flex; align-items: center; gap: 5px; padding: 6px 8px 6px calc(8px + var(--lvl, 0) * 14px); border-radius: 7px; cursor: pointer; color: var(--ox-fg); font-size: 13.5px; user-select: none; }
.fm-node:hover { background: var(--ox-surface-2); }
.fm-node.is-active { background: var(--ox-primary-subtle); color: var(--ox-primary); font-weight: 600; }
.fm-node__tw { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: var(--ox-fg-muted); cursor: pointer; border-radius: 4px; }
.fm-node__tw:hover { background: var(--ox-surface-2); color: var(--ox-primary); }
.fm-node__tw--empty { visibility: hidden; }
.fm-node__ic { flex: none; display: inline-flex; color: var(--ox-fg-muted); }
.fm-node.is-active .fm-node__ic { color: var(--ox-primary); }
.fm-node__lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-node__badge { font-size: 10px; padding: 1px 6px; border-radius: 20px; background: var(--ox-surface-2); color: var(--ox-fg-muted); }
.fm-kids__empty { padding: 3px 10px 3px 34px; font-size: 12px; color: var(--ox-fg-faint); }

.fm-foot__btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: none; border: none; border-radius: 7px; color: var(--ox-fg); font-size: 13px; cursor: pointer; text-align: left; }
.fm-foot__btn:hover { background: var(--ox-surface-2); }
.fm-foot__btn .ox-icon { color: var(--ox-fg-muted); }

/* ---- Ana + pathbar + toolbar ---- */
.fm-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fm-files { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.fm-pathbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ox-border); background: var(--ox-surface); }
.fm-navbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: none; border-radius: 7px; color: var(--ox-fg-muted); cursor: pointer; }
.fm-navbtn:hover:not(:disabled) { background: var(--ox-surface-2); color: var(--ox-fg); }
.fm-navbtn:disabled { opacity: .4; cursor: default; }
.fm-crumbs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 5px 10px; border: 1px solid var(--ox-border); border-radius: 8px; background: var(--ox-bg); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.fm-crumbs::-webkit-scrollbar { display: none; }
.fm-cr { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; color: var(--ox-fg); padding: 3px 7px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.fm-cr:hover { background: var(--ox-surface-2); }
.fm-cr__sep { color: var(--ox-fg-faint); display: inline-flex; }
.fm-pbsearch { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--ox-border); border-radius: 8px; background: var(--ox-surface); color: var(--ox-fg-muted); }
.fm-pbsearch input { border: 0; background: transparent; outline: none; color: var(--ox-fg); font-size: 13px; padding: 8px 0; width: 200px; }

.fm-toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 12px; border-bottom: 1px solid var(--ox-border); background: var(--ox-surface); flex-wrap: wrap; }
.fm-tb-sep { width: 1px; height: 22px; background: var(--ox-border); margin: 0 5px; flex: none; }
.fm-tb-spacer { flex: 1; }
.fm-ibtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: none; border-radius: 7px; color: var(--ox-fg-muted); cursor: pointer; }
.fm-ibtn:hover:not(:disabled) { background: var(--ox-surface-2); color: var(--ox-fg); }
.fm-ibtn:disabled { opacity: .38; cursor: default; }
.fm-ibtn.is-active { background: var(--ox-primary-subtle); color: var(--ox-primary); }
.fm-tbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ox-border); background: var(--ox-surface); color: var(--ox-fg); padding: 6px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.fm-tbtn:hover { background: var(--ox-surface-2); }
.fm-tbtn--primary { background: var(--ox-primary); color: var(--ox-primary-fg); border-color: transparent; }
.fm-tbtn--primary:hover { background: var(--ox-primary-hover); }
.fm-tbtn--danger { color: var(--ox-danger); border-color: var(--ox-danger-subtle); }
.fm-tbtn--danger:hover { background: var(--ox-danger-subtle); }

/* ---- Workspace + tablo ---- */
.fm-workspace { display: flex; flex: 1 1 auto; min-height: 0; }
.fm-list { flex: 1 1 auto; min-width: 0; overflow: auto; margin: 10px 12px; border: 1px solid var(--ox-border); border-radius: 10px; background: var(--ox-surface); position: relative; }
.fm-list.fm-drop { outline: 2px dashed var(--ox-primary); outline-offset: -4px; background: var(--ox-primary-subtle); }
.fm-row { display: grid; grid-template-columns: 40px minmax(150px, 1fr) 90px 90px 150px 150px 90px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--ox-border); }
.fm-list.no-sel .fm-row { grid-template-columns: minmax(150px, 1fr) 90px 90px 150px 150px 90px; }
.fm-list.no-sel .fm-selcol { display: none; }
.fm-row:last-child { border-bottom: none; }
.fm-row.head { position: sticky; top: 0; z-index: 2; background: var(--ox-bg); color: var(--ox-fg-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; cursor: default; }
.fm-row.head .fm-sortable { cursor: pointer; }
.fm-row.head .fm-sortable:hover { color: var(--ox-fg); }
.fm-row.head .fm-sortable svg { vertical-align: -1px; margin-left: 2px; }
.fm-row .fm-col-mid { text-align: center; }
.fm-row .fm-col-act { text-align: right; }
.fm-row.item:hover { background: var(--ox-surface-2); }
.fm-row.item.sel { background: var(--ox-primary-subtle); }
.fm-selcol { display: flex; align-items: center; justify-content: center; }
.fm-selcol input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.fm-name { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.fm-name .ic { flex: 0 0 24px; display: inline-flex; align-items: center; }
.fm-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-meta { color: var(--ox-fg-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-rowact { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.fm-rowact button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 6px; color: var(--ox-fg-muted); cursor: pointer; }
.fm-rowact button:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.fm-info { color: var(--ox-fg-muted); padding: 40px; text-align: center; }
.fm-info--err { color: var(--ox-danger); }

/* ---- Grid görünümü (Küçük/Orta/Büyük/Çok büyük ikon) ---- */
.fm-grid { display: grid; gap: 6px; padding: 12px; align-content: start; }
.fm-grid--sm { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
.fm-grid--md { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.fm-grid--lg { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
.fm-grid--xl { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.fm-gcell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 10px; cursor: pointer; }
.fm-gcell:hover { background: var(--ox-surface-2); }
.fm-gcell.sel { background: var(--ox-primary-subtle); }
.fm-gic { display: flex; align-items: center; justify-content: center; }
.fm-gthumb { position: relative; border-radius: 8px; overflow: hidden; background: var(--ox-surface-2); display: flex; align-items: center; justify-content: center; }
.fm-gthumb .fm-thumb { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .18s; }
.fm-gthumb .fm-thumb.loaded { opacity: 1; }
/* Grid seçim kutusu (köşe): seçili ya da hover'da görünür; native checkbox dolu/boş */
.fm-gcheck { position: absolute; top: 6px; left: 8px; z-index: 2; opacity: 0; transition: opacity .12s; }
.fm-gcell:hover .fm-gcheck, .fm-gcell.sel .fm-gcheck { opacity: 1; }
.fm-gcheck input { width: 17px; height: 17px; cursor: pointer; margin: 0; }
.fm-gnm { font-size: 12.5px; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ox-fg); }
.fm-grid--lg .fm-gnm, .fm-grid--xl .fm-gnm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- Önizleme modalı ---- */
.fm-prev { width: min(92vw, 1020px); display: flex; flex-direction: column; }
.fm-prev__count { color: var(--ox-fg-muted); font-size: 12.5px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.fm-prev__body { min-height: 48vh; max-height: 74vh; display: flex; align-items: center; justify-content: center; overflow: auto; background: var(--ox-bg); padding: 8px; }
.fm-prev__body img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.fm-prev__body video { max-width: 100%; max-height: 72vh; }
.fm-prev__body iframe { width: 100%; height: 72vh; border: 0; background: #fff; border-radius: 6px; }
.fm-prev__pre { width: 100%; max-height: 72vh; overflow: auto; margin: 0; padding: 14px; font-family: var(--ox-font-mono, ui-monospace, monospace); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--ox-fg); }
.fm-prev__none { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ox-fg-muted); padding: 44px; }
.fm-prev__audio { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fm-prev__foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--ox-border); }

/* ---- Detay paneli ---- */
.fm-detail { flex: 0 0 320px; border-left: 1px solid var(--ox-border); padding: 16px; overflow: auto; background: var(--ox-surface); }
.fm-detail__ic { display: flex; justify-content: center; padding: 12px 0 16px; }
.fm-detail__nm { font-weight: 600; text-align: center; word-break: break-word; margin-bottom: 14px; color: var(--ox-fg); }
.fm-detail__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ox-border); font-size: 13px; }
.fm-detail__row .k { color: var(--ox-fg-muted); }
.fm-detail__row .v { color: var(--ox-fg); text-align: right; word-break: break-word; }
.fm-detail__empty { color: var(--ox-fg-muted); text-align: center; padding: 40px 10px; font-size: 13px; }

/* ---- Statusbar ---- */
.fm-statusbar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; background: var(--ox-surface); border-top: 1px solid var(--ox-border); font-size: 12.5px; color: var(--ox-fg-muted); }
.fm-statusbar .sp { flex: 1; }

/* ---- Yeni menü + context menu ---- */
.fm-menu { position: fixed; z-index: 9000; min-width: 190px; background: var(--ox-surface); border: 1px solid var(--ox-border); border-radius: 10px; box-shadow: var(--ox-shadow-lg); padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.fm-menu__i { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ox-fg); padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; text-align: left; }
.fm-menu__i:hover { background: var(--ox-surface-2); }
.fm-menu__i.is-danger { color: var(--ox-danger); }
.fm-menu__i.is-danger:hover { background: var(--ox-danger-subtle); }
.fm-menu__sep { height: 1px; background: var(--ox-border); margin: 4px 2px; }

/* modal tablo aksiyon linkleri (çöp/versiyon/analiz) */
.fm-lp { color: var(--ox-fg-faint); font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-actc { text-align: right; white-space: nowrap; }
.fm-lnk { border: 0; background: transparent; color: var(--ox-primary); cursor: pointer; font-size: 12.5px; padding: 3px 7px; border-radius: 6px; }
.fm-lnk:hover { background: var(--ox-primary-subtle); }
.fm-lnk--danger { color: var(--ox-danger); }
.fm-lnk--danger:hover { background: var(--ox-danger-subtle); }
.fm-mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fm-mtable th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ox-border); color: var(--ox-fg-muted); font-weight: 600; font-size: 12px; }
.fm-mtable td { padding: 7px 10px; border-bottom: 1px solid var(--ox-border); color: var(--ox-fg); }
.fm-an__sum { color: var(--ox-fg-muted); font-size: 13px; margin-bottom: 12px; }
.fm-an__h { font-size: 13px; color: var(--ox-fg-muted); margin: 18px 0 6px; font-weight: 600; }
.fm-stale { color: var(--ox-warning); font-weight: 600; }

/* ---- Daraltılmış (mini) + mobil ---- */
.fm-side.is-mini { width: 60px !important; min-width: 60px; }
.fm-side.is-mini .fm-node__lbl, .fm-side.is-mini .fm-sec__title, .fm-side.is-mini .fm-node__tw,
.fm-side.is-mini .fm-node__badge, .fm-side.is-mini .fm-kids, .fm-side.is-mini .fm-foot__btn span,
.fm-side.is-mini .fm-kids__empty { display: none; }
.fm-side.is-mini .fm-node { justify-content: center; padding: 9px 0; }
.fm-side.is-mini .fm-foot__btn { justify-content: center; padding: 9px 0; }

/* ---- Yükleme ilerleme paneli (sağ-alt, engellemez) ---- */
.fm-uphost { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.fm-up { pointer-events: auto; width: 340px; max-width: calc(100vw - 36px); background: var(--ox-surface, #fff); border: 1px solid var(--ox-border); border-radius: var(--ox-radius-lg, 12px); box-shadow: var(--ox-shadow-lg); overflow: hidden; font-size: 13px; animation: fmUpIn .18s ease; }
@keyframes fmUpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fm-up__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ox-surface-2, var(--ox-bg-subtle, transparent)); border-bottom: 1px solid var(--ox-border); }
.fm-up__title { flex: 1; font-weight: 600; color: var(--ox-text); }
.fm-up__x { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--ox-text-muted); border-radius: var(--ox-radius); cursor: pointer; }
.fm-up__x:hover { background: var(--ox-hover); color: var(--ox-text); }
.fm-up__ov { height: 3px; background: var(--ox-border); }
.fm-up__ovi { display: block; height: 100%; width: 0; background: var(--ox-primary, var(--ox-accent, #2563eb)); transition: width .15s ease; }
.fm-up.is-done .fm-up__ovi { background: var(--ox-success, #16a34a); }
.fm-up__body { max-height: 260px; overflow-y: auto; }
.fm-uprow { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--ox-border); }
.fm-uprow:last-child { border-bottom: 0; }
.fm-uprow__ic { grid-column: 1; grid-row: 1 / 3; display: inline-flex; align-items: center; }
.fm-uprow__mid { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.fm-uprow__nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ox-text); }
.fm-uprow__bar { height: 4px; margin-top: 5px; background: var(--ox-border); border-radius: 3px; overflow: hidden; }
.fm-uprow__bi { display: block; height: 100%; width: 0; background: var(--ox-primary, var(--ox-accent, #2563eb)); transition: width .12s linear; }
.fm-uprow.is-ok .fm-uprow__bi { width: 100%; background: var(--ox-success, #16a34a); }
.fm-uprow.is-err .fm-uprow__bi, .fm-uprow.is-cancel .fm-uprow__bi { background: var(--ox-danger, #dc2626); }
.fm-uprow__st { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ox-text-muted); text-align: right; min-width: 40px; padding-left: 8px; }
.fm-uprow.is-ok .fm-uprow__st { color: var(--ox-success, #16a34a); }
.fm-uprow.is-err .fm-uprow__st, .fm-uprow.is-cancel .fm-uprow__st { color: var(--ox-danger, #dc2626); }
.fm-uprow__sz { grid-column: 3; grid-row: 2; font-size: 11px; color: var(--ox-text-muted); opacity: .75; text-align: right; padding-left: 8px; }
.fm-up__foot { padding: 8px 12px; text-align: right; border-top: 1px solid var(--ox-border); }
.fm-up.is-done .fm-up__foot { display: none; }

@media (max-width: 860px) {
  .fm-uphost { left: 12px; right: 12px; bottom: 12px; }
  .fm-up { width: 100%; }
  .fm-detail { display: none; }
  .fm-side { position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--ox-shadow-lg); }
  .fm-side.is-open { transform: none; }
  .fm-pbsearch input { width: 120px; }
  .fm-row, .fm-list.no-sel .fm-row { grid-template-columns: 30px minmax(120px,1fr) 84px 84px; }
  .fm-list.no-sel .fm-row { grid-template-columns: minmax(120px,1fr) 84px 84px; }
  .fm-col-date { display: none; }
}