/* Left folder header dark style */
.folder-panel .folder-header{ background: #0f172a; color:#e5e7eb; border-bottom: 0; padding: 8px 12px; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.folder-panel .folder-header .iconify{ color:#9ca3af!important; }
.folder-panel .folder-header .fw-semibold{ display:flex; align-items:center; gap:8px; }
.folder-panel .folder-header .toggle-btn{ color:#cbd5e1; }
.folder-panel .folder-header .toggle-btn:hover{ background: rgba(255,255,255,.08); color:#60a5fa; }
.folder-panel .folder-header .toggle-btn.active{ background: rgba(96,165,250,.18); color:#60a5fa; }
.file-manager-view { /* placeholder to anchor moved CSS block */ }
/* ===== Moved from Views/admin/spaces/file_manager.php <style> ===== */
/* Fix Bootstrap modal fade and backdrop when custom animations/styles present */
.modal.fade .modal-dialog{ transition: transform .3s ease-out, opacity .15s linear; }
.modal.fade.show .modal-dialog{ transform: none; opacity: 1; }
.modal.fade .modal-dialog{ transform: translate(0, -10px); opacity: 0; }
.modal-backdrop{ background-color: rgba(0,0,0,.5) !important; }
.modal-backdrop.show{ opacity: .5 !important; }
.fade{ transition: opacity .15s linear !important; }
:root{
    --fm-radius:.75rem;
    --fm-soft:12px;
    --fm-gap:12px;
    --fm-left-w:320px;         /* JS localStorage ile güncelleyecek */
    --fm-splitter-w:8px;
    --fm-split-h:60vh;         /* JS gerçek yüksekliği ayarlayacak */
}

/* Yalnızca bu sayfada body scroll’u kapatmak için sınıf */
html,body{ height:100%; }
body.fm-no-page-scroll{ overflow:hidden; }

/* Toolbar & butonlar */
.iconic-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; border-radius:10px !important;
    padding:0 .5rem; transition:.15s ease; gap:.35rem;
}
.iconic-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.search-container .form-control{ border-left:0 !important; }
.search-container .input-group-text{ border-right:0 !important; }

/* Sticky toolbar */
#dym-root > .card{ position:sticky; top:0; z-index:30; border-radius:var(--fm-radius); }

/* =============== SPLIT LAYOUT =============== */
.dym-split{ display:flex; gap:0; align-items:stretch;flex-wrap: nowrap; }
@media (min-width: 992px){
    .dym-split > .col-lg-3{
        flex:0 0 var(--fm-left-w) !important;
        width:var(--fm-left-w) !important;
        max-width:var(--fm-left-w) !important;
        height:var(--fm-split-h);
        display:flex;
        flex-direction:column;
        min-height:0;
    }
    .dym-split > .col-lg-9{
        flex:1 1 auto !important;
        width:calc(100% - var(--fm-left-w)) !important;
        height:var(--fm-split-h);
        display:flex;             /* sağ paneli esnek yap */
        flex-direction:column;
        min-height:0;             /* overflow çalışsın */
    }
}

/* Sol kart: tam yükseklik + içi scroll */
.dym-split .col-lg-3 .card{ border-radius:var(--fm-radius); display:flex; flex-direction:column; min-height:77px; }
.dym-split .col-lg-3 .card-header{
    position:sticky; top:0; z-index:2; background:#fff;
    border-bottom:1px solid rgba(0,0,0,.05);
}
.dym-split .col-lg-3 .card-body{
    flex:1 1 auto; min-height:0; overflow:auto; padding-bottom:.75rem;
}

/* Sağ grid: kalan alanı tamamen kapla, kendi içinde kay */
#dym-cards{
    flex:1 1 auto; min-height:0;
    overflow:auto;
    padding:var(--fm-gap);
    display:flex; /* unified layout */
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--grid-gap, var(--fm-gap));
}
#dym-cards.row{ --bs-gutter-x:0; --bs-gutter-y:0; }

/* Grid kartları */
#dym-cards .grid-item,
#dym-cards .folder-card,
#dym-cards .file-card,
#dym-cards .card{
    border:1px solid rgba(0,0,0,.06);
    border-radius:var(--fm-radius);
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.03);
    transition:.18s ease;
}
#dym-cards .grid-item:hover,
#dym-cards .folder-card:hover,
#dym-cards .file-card:hover{

    box-shadow:0 10px 28px rgba(0,0,0,.08);
    border-color:rgba(0,0,0,.08);
}
#dym-cards .selected{ outline:2px solid #0d6efd33; }

/* Explorer kutusu ve scrollbar’lar */
.explorer-container{
    min-height:240px; background:#fff;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
    overflow:auto;
}
.explorer-container::-webkit-scrollbar,
#dym-cards::-webkit-scrollbar,
.dym-split .col-lg-3 .card-body::-webkit-scrollbar{ width:10px; height:10px; }
.explorer-container::-webkit-scrollbar-thumb,
#dym-cards::-webkit-scrollbar-thumb,
.dym-split .col-lg-3 .card-body::-webkit-scrollbar-thumb{
    background:#e5e7eb; border-radius:8px; border:2px solid #fff;
}

/* Right slide panel */
.dym-right-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(1px);
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:1040;
}
.dym-right-overlay.show{ opacity:1; visibility:visible; }
.dym-right-panel{
    position:fixed; top:0; right:0; height:100vh; width:min(520px, 92vw);
    background:#ffffff; color:#2c3e50; box-shadow: -20px 0 60px rgba(0,0,0,.15);
    transform:translateX(100%); will-change:transform; z-index:1050; display:flex; flex-direction:column;
    transition: transform .45s cubic-bezier(.22,.75,.2,1);
}
.dym-right-panel.open{ transform: translateX(0); }

/* Force-enable transitions for SweetAlert2 despite global reduced-motion overrides */
.swal2-container,
.swal2-container *,
.swal2-container *::before,
.swal2-container *::after{
    transition-duration: .3s !important;
    animation-duration: .3s !important;
}
.dym-right-panel-header{ padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06); }
.dym-right-panel-body{ padding:14px; overflow:auto; }

/* Right panel selected list item colors */
.dym-right-panel .list-group-item.active{
    z-index:2;
    color: var(--bs-list-group-active-color);
    background-color:#27261d;
    border-color:#3d3a22;
}
.dym-right-panel .list-group-item.active .small{ color:#ffffff !important; }

/* Tiny spinner for right panel image thumbs */
/* Iconify spinner used; keep container for layout only */

/* Right panel search input with embedded icon */
.rp-search-wrap{ position:relative; }
.rp-search-wrap .rp-search-icon{
    position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9aa4b2; pointer-events:none; font-size:14px;
}
.dym-right-panel .rp-search-wrap .form-control{
    height:42px;
    border-radius:12px;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, border-color .2s ease;
    padding-left:  36px !important; /* for icon */
}
.dym-right-panel .rp-search-wrap .form-control::placeholder{ color:#9aa4b2; }
.dym-right-panel .rp-search-wrap .form-control:focus{
    border-color:#6ea8fe;
    box-shadow:0 0 0 0.2rem rgba(13,110,253,.15);
}

/* Right panel checkbox styling */
.dym-right-panel .form-check-input{
    width:1.3em;
    height:1.3em;
}
.dym-right-panel .form-check-input:checked{
    background-color:#474747;
    border-color:#b3b3b3;
}
/* Search highlight placeholder */
.search-highlight{ outline:2px dashed #6c9cff !important; outline-offset:2px !important; box-shadow:0 0 0 4px rgba(109,159,255,.15) !important; transition: box-shadow .3s ease, outline-color .3s ease; }
/* Splitter */
#dym-splitter{
    width:var(--fm-splitter-w); cursor:col-resize;
    position:relative; z-index:5; user-select:none; background:transparent;
}
#dym-splitter::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, transparent 30%, rgba(0,0,0,.06), transparent 70%);
    opacity:.0; transition:.15s ease;
}
#dym-splitter:hover::after{ opacity:.8; }

/* Mobil: splitter gizlenir, doğal sayfa scroll’u geri gelir */
@media (max-width: 991.98px){
    #dym-splitter{ display:none; }
    .dym-split > .col-lg-3, .dym-split > .col-lg-9{ height:auto; }
}

/* Upload paneli */
#dym-upload-progress-wrap{
    background:#fff; border:1px solid rgba(0,0,0,.06);
    border-radius:var(--fm-radius); padding:.75rem;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
}
/* Floating Jobs Panel */
.fm-jobs-panel{ position:fixed; right:16px; bottom:16px; z-index:1055; }
.fm-jobs-toggle{ background:#0d6efd; color:#fff; border:0; border-radius:999px; padding:.5rem .75rem; box-shadow:0 6px 18px rgba(13,110,253,.35); }
.fm-jobs-body{ display:none; width:320px; max-height:50vh; overflow:auto; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; margin-top:.5rem; padding:.5rem; box-shadow:0 12px 24px rgba(0,0,0,.12); }
.fm-jobs-panel.open .fm-jobs-body{ display:block; }
.fm-job{ border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:.5rem; margin-bottom:.5rem; background:#fff; }
.fm-job-progress{ height:8px; background:#eef2f6; border-radius:999px; overflow:hidden; }
.fm-job-progress-bar{ height:100%; background-image:linear-gradient(90deg,#6ea8fe,#3d8bfd); }
.fm-job .fm-job-close{ color:#6c757d !important; }
/* Overlay variant inside #dym-cards */
#dym-cards{ position: relative; }
#dym-upload-progress-wrap.fm-overlay{ position:absolute; inset:0; z-index: 30; background: rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; padding:16px; }
.fm-overlay-inner{ text-align:center; color:#212529; }
.fm-circle{ --p:0; --fm-accent:#0d6efd; width:140px; height:140px; border-radius:50%; background:
  radial-gradient(#fff 58%, transparent 59%),
  conic-gradient(var(--fm-accent) calc(var(--p)*1%), #e9ecef 0);
  position:relative; display:flex; align-items:center; justify-content:center; margin:0 auto 10px auto; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
}
.fm-circle .fm-circle-text{ position:absolute; font-weight:600; font-size:1.1rem; color:#212529; }
.fm-overlay-sub{ font-size:.875rem; color:#6c757d; }

/* Kota çubuğu */
.space-usage-progress{ height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.space-usage-progress .progress-bar{ background-image:linear-gradient(90deg,#6ea8fe,#3d8bfd); }

.card.shadow-sm.border-0{ border-radius:var(--fm-radius); }

.dym-head .card-body{
    background: #252627;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    box-shadow:   0px 0px 0px 1px #3b3c3d, 0px 6px 20px -4px rgba(0, 0, 0, .45);;
}

.dym-head .vr{
    width: 1px;
    background: rgba(255,255,255,.1);
}

/* ikon buton */
.iconic-btn{
    height: 60px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease, transform .1s ease;
}

.iconic-btn .iconify{ font-size: 20px; }

.iconic-btn:hover{
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.iconic-btn.active{
    background: rgba(100,140,255,.15) !important;
    color: #9dbfff !important;
}
.iconic-btn:active{ transform: scale(.95); }

.iconic-btn.danger:hover{
    background: rgba(255,80,80,.15) !important;
    color: #ff6b6b !important;
}
.iconic-btn.warn:hover{
    background: rgba(255,193,7,.15) !important;
    color: #ffd966 !important;
}

/* search */
.dym-head .search-container .input-group-text,
.dym-head .search-container .form-control{
    background:#0f141a;
    border-color:#1e2630;
    color:#e5e7eb;
}
.dym-head .search-container .form-control::placeholder{
    color:#9aa4b2;
}
.app-main{ background:  #e2e9e9!important; }
.grid-item{ background: #ffffff24!important; }
.grid-item:hover{ background: rgba(255, 255, 255, 0.51) !important; }

/* ===== Folder Panel ===== */
.folder-panel{ background:#fff; border-radius:12px!important; border:1px solid #e5e7eb; }
.folder-panel .card-header{ background:#fff; border-bottom:1px solid #f1f1f1; font-size:.95rem; color:#374151; }
.folder-panel .iconify{ color:#6b7280; }

/* ===== Explorer Container ===== */
.explorer-container{ border:1px solid #e5e7eb; border-radius:8px; background:#fafafa; padding:6px; min-height:120px; font-size:.85rem; }
.explorer-container .folder-item{ display:flex; align-items:center; gap:.5rem; padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .15s; }
.explorer-container .folder-item:hover{ background:#f3f4f6; }
.explorer-container .folder-item .iconify{ font-size:18px; color:#2563eb; /* mavi klasör rengi */ }

/* ===== Usage Progress ===== */
.space-usage-progress{ height:10px; border-radius:20px; overflow:hidden; background:#f3f4f6; }
.space-usage-progress .progress-bar{ border-radius:20px; transition:width .3s; }
.usage-label{ position:absolute; top:0;left:0; width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:.7rem; color:#111827; font-weight:600; }
.usage-info{ font-size:.7rem; margin-top:.2rem; color:#6b7280; }

/* Toggle button */
.toggle-btn{ --size: 38px; width: var(--size); height: var(--size); border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 22px; transition: background .2s, color .2s, transform .1s; margin-left: auto; }
.toggle-btn:hover{ background: rgba(0,0,0,.05); color: #2563eb; }
.toggle-btn:active{ transform: scale(.93); }
.toggle-btn.active{ background: rgba(37,99,235,.15); color: #2563eb; }

#dym-cards { min-height: 300px; display: flex; gap: var(--grid-gap, 12px)!important; flex-wrap: wrap; align-content: flex-start; padding: var(--grid-padding, 20px) var(--grid-padding, 20px)!important; border-radius: 12px!important; background: #ffffff; }
/* ===== End moved from file_manager.php ===== */
/* Mini spinner centered in grid */
#dym-cards { position: relative; }
.dym-cards-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dym-cards-spinner .spinner-border { width: 1.75rem; height: 1.75rem; border-width: .2rem; }
/* Tabs removed: styles deleted */
 
/* =====================================================
   FOLDER ICONS - SVG Based with Color Support
   ===================================================== */

.folder-icon-svg {
  transition: all 0.2s ease;
  will-change: transform;
}




.folder-card.selected .folder-icon-svg path {
  filter: brightness(1.2) saturate(1.2);
}

/* Context menu folder icon */
.ctx-menu .folder-icon-svg {
  vertical-align: middle;
  margin-right: 8px;
}

/* Search suggestions folder icon */
.tt-suggestion .folder-icon-svg {
  flex-shrink: 0;
}

/* Breadcrumb folder icon */
.breadcrumb-item .folder-icon-svg {
  vertical-align: middle;
}

/* Responsive folder icons */
@media (max-width: 768px) {
  .folder-thumbnail-container svg {
    width: 48px !important;
    height: 48px !important;
  }
}

/* =====================================================
   IMAGE LOADING SYSTEM
   ===================================================== */

.image-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.image-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 1.5rem;
  height: 1.5rem;
}

.image-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image-loaded {
  opacity: 1;
}

/* Bootstrap spinner override for smaller size */
.spinner-border-sm-custom {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 0.15em;
}

/* Thumbnail specific styling */
.thumb-image-container {
  position: relative;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.thumb-image-container .image-loading-spinner {
  width: 1.25rem;
  height: 1.25rem;
}

/* Folder thumbnail styling */
.folder-thumbnail-image {
  position: absolute;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease-in-out;
}

.folder-thumbnail-loading {
  opacity: 0;
}

.folder-thumbnail-loaded {
  opacity: 1;
}

/* Folder file icon styling */
.folder-icon-container {
  position: relative;
}

.folder-file-icon {
  transition: all 0.3s ease-in-out;
  will-change: transform, opacity;
}



.icon-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
}

/* Enhanced stacking effect for folder previews */
.folder-thumbnail-container,
.folder-icon-container {
  transition: all 0.2s ease;
}



/* File type specific icon backgrounds */
.folder-file-icon[data-icon-id*="pdf"] {
  background: linear-gradient(135deg, #ff6b6b, #ff5252) !important;
}

.folder-file-icon[data-icon-id*="doc"] {
  background: linear-gradient(135deg, #4285f4, #3367d6) !important;
}

.folder-file-icon[data-icon-id*="xls"] {
  background: linear-gradient(135deg, #34a853, #2e7d32) !important;
}

.folder-file-icon[data-icon-id*="zip"] {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
}

.folder-file-icon[data-icon-id*="mp3"] {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
}

.folder-file-icon[data-icon-id*="mp4"] {
  background: linear-gradient(135deg, #e91e63, #c2185b) !important;
}

/* =====================================================
   FILE MODULE STYLES
   ===================================================== */

/* File Module Spinner Styles */
.file-card {
    position: relative;
}

.extract-spinner {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    display: none;
}

.extract-spinner.show {
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Progress bar for extraction */
.extract-progress {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 60px;
    height: 4px;
    background: rgba(0, 123, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: none;
    z-index: 10;
}

.extract-progress.show {
    display: block;
}

.extract-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.extract-progress-text {
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 10px;
    color: #007bff;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    color: white;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand h4 {
    color: white;
    margin: 0;
    font-weight: 600;
}

.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-nav .nav-link {
    color: rgba(255,255,255,0.8);
    padding: 0.75rem 1.5rem;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link:hover {
    color: white;
    background-color: rgba(255,255,255,0.1);
    transform: translateX(5px);
}

.sidebar-nav .nav-link.active {
    color: white;
    background-color: rgba(255,255,255,0.2);
    border-right: 3px solid #3498db;
}

.sidebar-nav .nav-link i {
    width: 20px;
    margin-right: 10px;
}

.main-content {
    margin-left: 250px;
    min-height: 100vh;
    transition: all 0.3s ease;
}

.topbar {
    background: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-bottom: 1px solid #e3e6f0;
}

.user-dropdown .btn {
    color: #5a5c69;
    text-decoration: none;
}

.user-dropdown .btn:hover {
    color: #3a3b45;
}

 

.border-left-primary { border-left: 0.25rem solid #4e73df !important; }
.border-left-success { border-left: 0.25rem solid #1cc88a !important; }
.border-left-info { border-left: 0.25rem solid #36b9cc !important; }
.border-left-warning { border-left: 0.25rem solid #f6c23e !important; }

.text-gray-800 { color: #5a5c69 !important; }
.text-gray-300 { color: #dddfeb !important; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }


/* Explorer tree container */
/* Explorer container: unified base settings */
.explorer-container { min-height: 200px; overflow: auto; }

/* File module thumbnails */
.thumb-tile img.thumb-img {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Selection highlight */
#dym-cards .selected {
    background-color: rgba(13,110,253,0.08);
    outline: 2px solid rgba(13,110,253,0.3);
}

/* Drag selection */
#dym-cards { position: relative; user-select: none; min-height: 300px; border-radius: .375rem; }
#dym-cards.is-dragover { box-shadow: inset 0 0 0 2px rgba(13,110,253,0.35); background-color: rgba(13,110,253,0.03); }
#dym-select-rect {
    position: absolute;
    border: 1px dashed rgba(13,110,253,0.6);
    background: rgba(13,110,253,0.15);
    pointer-events: none;
    z-index: 10;
}

/* Context menu */
.ctx-menu {
    position: absolute;
    z-index: 2000;
    min-width: 180px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: .375rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    padding: .25rem 0;
}
.ctx-menu { display: block; }

/* Breadcrumb divider after each item (trailing slash) for file module */
#dym-bc-list .breadcrumb-item::before { content: none; }
#dym-bc-list .breadcrumb-item::after {

    display: inline-block;
    margin-left: .25rem;
    color: var(--bs-breadcrumb-divider-color, inherit);
}
.dym-bc-list .breadcrumb-item:nth-child(1)::after { display: none; }
#dym-bc-list .breadcrumb-item:first-child::after { content: none !important; display: none !important; }
.ctx-menu .item { padding: .35rem .75rem; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.ctx-menu .item:hover { background: #f1f3f5; }
.ctx-menu .divider { height: 1px; background: rgba(0,0,0,0.05); margin: .25rem 0; }

.breadcrumb-item+.breadcrumb-item {
    padding-left:5px!important;
}
 

/* unified grid container spacing (primary values kept) */
/* merged into the unified #dym-cards rule above */

/* Grid header/footer basic styles */
#dym-cards-header, #dym-cards-footer{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:10px;
}
.dym-cards-footer{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:10px;
    margin-top:10px;
}
/* Footer stats & usage UI */
.fm-footer{ gap: 12px; }
.fm-stats .fm-stat{ color:#6b7280; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.fm-usage-wrap{ min-width: 260px; max-width: 520px; width: 100%; }
.fm-usage{ width:100%; display:flex; flex-direction:column; gap:6px; }
.fm-usage-bar{ position:relative; height:12px; background:#f1f5f9; border-radius: 999px; overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.fm-usage-fill{ height:100%; background: linear-gradient(90deg, #fae360, #f6603b); box-shadow: 0 2px 8px rgba(59,130,246,.35); }
.fm-usage-legend{ display:flex; align-items:center; gap:12px; color:#6b7280; font-size:.85rem; }
.fm-usage-percent{ font-weight:600; color:#111827; }
@media (max-width: 992px){ .fm-usage-wrap{ width:100%; } .fm-usage-legend{ flex-wrap:wrap; } }
.thumb-img{
    border-radius:4px;
}

#dym-cards .grid-item{
    width: calc(var(--grid-icon-size, 64px) * 2)!important;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

/* typo fixed selector removed; no fixed width here to allow scaling */

/* Ensure folder icon container fills thumbnail box for proper centering */
#dym-cards .grid-item .folder-icon-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--grid-icon-size, 64px) * 1.6);
    height: calc(var(--grid-icon-size, 64px) * 1.6);
}

#dym-cards .grid-item .folder-icon-container svg.folder-icon-svg{
    width: var(--grid-icon-size, 64px)!important;
    height:  var(--grid-icon-size, 64px)!important;
} 

.thumbnail-container {
    display: flex;
    width: calc(var(--grid-icon-size, 64px) * 1.6);
    height: calc(var(--grid-icon-size, 64px) * 1.6);
    justify-content: center;
    align-items: center;
}

.thumbnail-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* oranı koru */
    display: block;
  }

/* Folder stacked preview centered on folder icon */
.folder-card { position: relative; }
.folder-card .folder-preview {
    position: absolute;
    left: 50%;
    margin-left: 0px;
    top: 40px; /* keep near folder icon center */
    width: 40px;  /* smaller so folder stays visible */
    height: 25px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.folder-card .folder-preview img { 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.folder-card .folder-preview img:nth-child(2) { transform: translate(3px, 3px) scale(0.96); z-index: -1; }
.folder-card .folder-preview img:nth-child(3) { transform: translate(6px, 6px) scale(0.92); z-index: -2; }
.folder-card .folder-preview img:nth-child(4) { transform: translate(9px, 9px) scale(0.88); z-index: -3; }

/* Space usage progress (footer) */
.space-usage-progress {
    height: 14px;
    border-radius: 999px;
    background-color: #eef2f6;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.space-usage-progress .progress-bar {
    border-radius: 999px;
}

/* Enhanced Drag Ghost for multi-drag preview with thumbnails */
.drag-ghost { 
    position: fixed; 
    z-index: 5000; 
    pointer-events: none; 
    transform: translate(-50%, -50%); 
    will-change: transform, left, top; 
    background: transparent!important;
    background-color: transparent!important;
    mix-blend-mode: normal;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))!important;
}

.folder-card.is-dragover { 
    position: relative;
    background: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.3);
    transform: scale(1.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.folder-card.is-dragover * { pointer-events: none !important; }

.drag-ghost .ghost-stack {
    position: relative;
    width: 72px;
    height: 72px;
    transform-style: preserve-3d;
}

.drag-ghost .ghost-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 
        0 16px 32px rgba(0,0,0,0.2),
        0 8px 16px rgba(0,0,0,0.15),
        0 4px 8px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(8px) saturate(1.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center center;
}

.drag-ghost .ghost-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 10px;
}

.drag-ghost .ghost-item i { 
    font-size: 36px; 
    color: #495057;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.8));
}

/* Enhanced stacking with realistic depth */
.drag-ghost .ghost-item:nth-child(2) { 
    transform: translate(6px, 6px) scale(0.92) rotateZ(-2deg); 
    z-index: -1; 
    opacity: 0.8;
    box-shadow: 
        0 12px 24px rgba(0,0,0,0.18),
        0 6px 12px rgba(0,0,0,0.12);
}

.drag-ghost .ghost-item:nth-child(3) { 
    transform: translate(12px, 12px) scale(0.84) rotateZ(1deg); 
    z-index: -2; 
    opacity: 0.6;
    box-shadow: 
        0 8px 16px rgba(0,0,0,0.15),
        0 4px 8px rgba(0,0,0,0.1);
}

.drag-ghost .ghost-count {
    position: absolute;
    right: -10px;
    bottom: -10px;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 
        0 6px 16px rgba(0,123,255,0.4),
        0 3px 8px rgba(0,0,0,0.2),
        0 1px 3px rgba(0,0,0,0.1);
    border: 3px solid rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

#dym-tree-explorer .btn-link{
    padding: 0;
    padding-left: 10px;
}

/* Context submenu */
.ctx-submenu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  min-width: 150px;
}

.ctx-submenu .item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.ctx-submenu .item:hover {
  background: #f8f9fa;
}

/* Color picker styles */
.color-preview {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid #ddd;
  transition: all 0.2s;
}

.color-preview:hover {

  border-color: #007bff;
}

/* Note indicator */
.note-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ffc10700;
    color: #0000006b;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 10;
}

/* Password indicator */
.password-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: #ffffffa3;
    color: #d93636b0;
    padding: 10px;
    box-shadow: 0px 2px 4px #00000029, inset 0px 0px 9px #00000024;
    border-radius: 50px;
    z-index: 15;
}


/* Password Input Styling - Chrome Popup Fix */
.password-input {
  -webkit-text-security: disc !important;
  text-security: disc !important;
  
  letter-spacing: 2px !important;
}

.password-input::placeholder {
  -webkit-text-security: none !important;
  text-security: none !important;
  letter-spacing: normal !important;
}

/* Tree folder drag over styles */
.tree-folder-drag-over {
  background-color: #e3f2fd !important;
  border-radius: 4px !important;
  border: 2px dashed #2196f3 !important;
}

/* Sticky tree panel */
#dym-tree {
  position: sticky !important;
  top: 50px !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  z-index: 10 !important;
}

/* Sticky card header */
 
 
.btn-sm {
    gap: .4rem;
    padding: 6px 19px!important;
    font-size: 14px!important;
}

/* Sticky progress bar */
.mb-2:has(.space-usage-progress) {
  position: sticky !important;
  top: 0px !important;
  z-index: 14 !important;
  background-color: white !important;
  padding: 4px 0 !important;
  margin-bottom: 4px !important;
}

.folder-icon{
    color: #ffc107; 
}

/* Tree root item styling */
.tree-folder-item[data-folder-id=""] {
  border-radius: 4px;
  transition: background-color 0.2s;
}

.tree-folder-item[data-folder-id=""]:hover {
  background-color: #f8f9fa;
}

.tree-folder-item[data-folder-id=""] a {
  color: #495057 !important;
  font-weight: 500;
}

/* Active folder styling */
.tree-folder-item.active {
  background-color: #e3f2fd !important;
  border-radius: 4px;
}

.tree-folder-item.active a {
  color: #1976d2 !important;
  font-weight: 600;
}

.tree-folder-item.active i.fa-folder {
  color: #1976d2 !important;
}

.tree-folder-item.active i.fa-home {
  color: #1976d2 !important;
}

/* Additional variant: shadow and tighter cap when needed */
.explorer-container { box-shadow: inset 0 0 7px 1px rgba(0, 0, 0, 0.08); }

/* Typeahead styling */
.twitter-typeahead {
    width: 100%;
    flex: 1;
}

/* Search container styling */
.search-container {
    position: relative;
}

.search-container .twitter-typeahead {
    flex: 1;
    min-width: 0;
    position: relative;
}

.search-container .twitter-typeahead .form-control {
    width: 100% !important;
    border-radius: 0;
}

.search-container .twitter-typeahead .tt-hint {
    border-radius: 0;
}

/* Fix input group borders */
.search-container .input-group-text {
    border-right: 0;
}

.search-container .form-control {
    border-left: 0;
}

.search-container .btn {
    border-left: 0;
}

/* Show right border when clear button is hidden */
.search-container .form-control {
    border-right: 1px solid #ced4da;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Hide right border when clear button is visible */
.search-container .btn:not([style*="display: none"]) + .form-control {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Table sorting styles */
#details-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

#details-table th.sortable:hover {
    background-color: rgba(0,0,0,0.05);
}

#details-table th.sortable i {
    opacity: 0.5;
    transition: opacity 0.2s;
}

#details-table th.sortable:hover i {
    opacity: 1;
}

#details-table th.sortable i.fa-sort-up {
    color: #0d6efd;
    opacity: 1;
}

#details-table th.sortable i.fa-sort-down {
    color: #0d6efd;
    opacity: 1;
}

.tt-hint {
    color: #999;
}

.tt-menu {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
}

.tt-suggestion {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.tt-suggestion:last-child {
    border-bottom: none;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: #f8f9fa;
}

.tt-suggestion .fw-semibold {
    font-weight: 600;
}

.tt-suggestion .text-muted {
    color: #6c757d !important;
}

/* Modern Clean Folder Design */
.folder-card {
    border: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9));
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.folder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.12);
}

.folder-card:hover .folder-icon-svg {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 25px rgba(0,0,0,0.15));
}

/* Mini Thumbnail Stack */
.folder-mini-thumbnails {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



.folder-card:hover .mini-thumb {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mini-thumb {
    transition: all 0.3s ease;
}

.mini-thumb:hover {
    transform: scale(1.2);
    z-index: 20 !important;
}

/* Unified mini thumbnail sizing via CSS variables */
.dym-mini-thumbs {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Grid based 2x2 mini preview cells; items are inline styles from JS */
.dym-mini-thumbs .mini-thumb { transition: all 0.3s ease; }

#dym-cards .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px!important; /* Sabit metin boyutu isteniyor */
    line-height: 1.2;
    color: #515151!important;
    display: block;
    max-width: 100%;
}

/* Thumb modundaki kart isimleri kutu genişliği dışına taşmasın */
#dym-cards .grid-item .text-truncate{
    width: 100%;
    padding: 0 4px;
    text-align: center;
}

/* Thumb modunda başlıklar zoom ile büyüse bile sabit bir satır genişliğini aşmasın */
#dym-cards.grid--thumb .grid-item .text-truncate{
    max-width: 120px; /* sabit, büyütmede taşma engellenir */
    margin-left: auto;
    margin-right: auto;
}

/* Windows benzeri yatay Liste modu: satırlar yatay akar, container yatay scroll */
#dym-cards.grid--list{
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px;
}
#dym-cards.grid--list > *{
    display: inline-block !important;
    vertical-align: top !important;
    margin-right: var(--grid-gap, 12px) !important;
}
.gm-list-col{ display:inline-block; vertical-align:top; }
.gm-list-col > .folder-card,
.gm-list-col > .file-card{ display:block; width:100%; }
/* Clean folder design - thumbnails removed for better UX */

 
 

 

/* ========================================
   ENHANCED DRAG & DROP SYSTEM STYLES (Namespace: enhanced-)
   ======================================== */

/* Enhanced selection highlighting - namespace ile çakışmayı önle */
.file-card.enhanced-selected,
.folder-card.enhanced-selected {
    background: linear-gradient(135deg, rgba(13,110,253,0.1), rgba(13,110,253,0.05));
    border: 2px solid rgba(13,110,253,0.4);
    box-shadow: 0 4px 12px rgba(13,110,253,0.15);
    transform: translateY(-2px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced dragging state */
.file-card.enhanced-dragging,
.folder-card.enhanced-dragging {
    opacity: 0.5;
    transform: scale(0.95) translateY(-2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Drag Ghost Container */
.enhanced-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform, left, top;
}

.enhanced-ghost-stack {
    position: relative;
    width: 64px;
    height: 64px;
}

.enhanced-ghost-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(13,110,253,0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-ghost-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.enhanced-ghost-item i {
    font-size: 28px;
    color: #6c757d;
}

/* Enhanced stacked ghost items */
.enhanced-ghost-item:nth-child(2) {
    transform: translate(6px, 6px) scale(0.95);
    z-index: -1;
    opacity: 0.8;
}

.enhanced-ghost-item:nth-child(3) {
    transform: translate(12px, 12px) scale(0.9);
    z-index: -2;
    opacity: 0.6;
}

/* Enhanced count badge */
.enhanced-ghost-count {
    right: -8px;
    bottom: -8px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Hover effects for cards */
.file-card,
.folder-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
}

.file-card:hover,
.folder-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Fix drag ghost mouse tracking - prevent child elements from interfering */
.file-card *,
.folder-card * {
    pointer-events: none;
}

/* Re-enable pointer events for interactive elements */
.file-card .note-indicator,
.folder-card .note-indicator,
.file-card .password-indicator,
.folder-card .password-indicator {
    pointer-events: auto;
}

/* Ensure folder thumbnails are visible and properly positioned */
.folder-card .folder-thumbnails {
    pointer-events: none; /* Keep drag working */
    z-index: 10;
}

.folder-card .folder-thumbnail-container {
    pointer-events: none;
}

.folder-card .folder-thumbnail-image {
    pointer-events: none;
    position: relative;
    z-index: 11;
}

/* Drop zone indicators */
.drop-zone-active {
    background: rgba(40, 167, 69, 0.1);
    border: 2px dashed #28a745;
    border-radius: 8px;
}

.drop-zone-invalid {
    background: rgba(220, 53, 69, 0.1);
    border: 2px dashed #dc3545;
    border-radius: 8px;
}

/* Smooth animations for all interactive elements */
.file-card *,
.folder-card * {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Basic Drag Selection Rectangle (file-module.js için) */
#dym-select-rect {
    position: absolute;
    border: 2px dashed rgba(13,110,253,0.9);
    background: linear-gradient(135deg, 
        rgba(13,110,253,0.18), 
        rgba(13,110,253,0.12),
        rgba(13,110,253,0.08));
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 100;
    border-radius: 6px;
    box-shadow: 
        0 4px 16px rgba(13,110,253,0.25),
        0 2px 8px rgba(13,110,253,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3);
    /* Smooth transitions - no position transitions to avoid lag */
    transition: opacity 0.1s ease-out;
    /* display: block olarak bırak - file-module.js kullanıyor */
}

/* Enhanced Drag Selection Rectangle (file-manager.js için - gelecekte) */
.selection-rectangle {
    position: absolute;
    border: 2px dashed rgba(13,110,253,0.9);
    background: linear-gradient(135deg, 
        rgba(13,110,253,0.18), 
        rgba(13,110,253,0.12),
        rgba(13,110,253,0.08));
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 100;
    border-radius: 6px;
    box-shadow: 
        0 4px 16px rgba(13,110,253,0.25),
        0 2px 8px rgba(13,110,253,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: none;
    visibility: hidden;
    border-style: dashed;
    border-image: none;
}

/* Animated dashed border - daha subtle bir animasyon */
@keyframes selection-dash {
    0% { 
        border-color: rgba(13,110,253,0.6);
        box-shadow: 
            0 4px 16px rgba(13,110,253,0.15),
            0 2px 8px rgba(13,110,253,0.1),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
    50% { 
        border-color: rgba(13,110,253,1);
        box-shadow: 
            0 4px 20px rgba(13,110,253,0.3),
            0 2px 12px rgba(13,110,253,0.2),
            inset 0 1px 0 rgba(255,255,255,0.4);
    }
    100% { 
        border-color: rgba(13,110,253,0.6);
        box-shadow: 
            0 4px 16px rgba(13,110,253,0.15),
            0 2px 8px rgba(13,110,253,0.1),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
}

#dym-select-rect::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    pointer-events: none;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0.1) 0%, 
        transparent 50%, 
        rgba(255,255,255,0.1) 100%);
}

#dym-select-rect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(13,110,253,0.8);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(13,110,253,0.6);
    animation: selection-pulse 1s ease-in-out infinite alternate;
}

@keyframes selection-pulse {
    0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* Container state during selection */
#dym-cards.selecting {
    cursor: crosshair;
    user-select: none;
    position: relative;
    background: linear-gradient(135deg, 
        rgba(13,110,253,0.02), 
        rgba(13,110,253,0.01));
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#dym-cards.selecting::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(13,110,253,0.1);
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

#dym-cards.selecting .file-card,
#dym-cards.selecting .folder-card {
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#dym-cards.selecting .file-card:not(.selected),
#dym-cards.selecting .folder-card:not(.selected) {
    opacity: 0.7;
    filter: brightness(0.95);
}

/* Selection count toast */
.selection-toast {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.selection-toast::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    border-radius: 22px;
    z-index: -1;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .ghost-stack {
        width: 48px;
        height: 48px;
    }
    
    .ghost-item {
        width: 48px;
        height: 48px;
    }
    
    .ghost-item i {
        font-size: 20px;
    }
    
    .ghost-count {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
        right: -6px;
        bottom: -6px;
    }
}

.thumbnail-container{
    display: flex;
}

.image-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 75%;
    align-items: center;
    justify-content: center;
}