/* MX File final layout polish — 2026-10-04 */

/* Base layout: stop the content grid from stretching rows vertically. */
.content-area{
  display:block!important;
  padding:24px 22px 42px!important;
  min-width:0!important;
}
.content-head,.drive-files-heading,.bulk-bar,.drive-table-head,.file-list,.activity-view{width:100%!important;max-width:100%!important}
.main-folder-grid{display:none!important}
.drive-files-heading{margin:18px 0 10px!important}

/* Sidebar like Google Drive: navigation first, folders beneath it. */
.sidebar{
  width:100%!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
.sidebar .upload-zone{
  width:calc(100% - 4px)!important;
  margin:0 2px 16px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.sidebar .upload-zone .primary.huge{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border-radius:13px!important;
  overflow:hidden!important;
}
.side-section-head{display:none!important}
.drive-category-head,.drive-real-folders-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:16px 2px 7px!important;padding:0 8px!important;height:28px!important;
  color:#748292!important;font-size:10px!important;letter-spacing:.13em!important;font-weight:800!important;
}
.drive-category-head button,.drive-real-folders-head button{
  width:26px!important;height:26px!important;border-radius:8px!important;border:1px solid #263442!important;
  background:#0d1620!important;color:#ff9b16!important;display:grid!important;place-items:center!important;padding:0!important;
}
.folder-list{display:grid!important;gap:4px!important;margin:0 0 8px!important;max-height:25vh!important;overflow:auto!important;padding-right:2px!important}
.folder-list:empty,.folder-list:empty + *{display:none!important}
.folder-row{grid-template-columns:minmax(0,1fr) 30px!important;gap:4px!important}
.folder-list .side-item,.folder-row .folder-open{
  min-height:39px!important;height:39px!important;border-radius:9px!important;padding:0 9px!important;font-size:12px!important;
  display:grid!important;grid-template-columns:22px minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;
  color:#bec8d2!important;background:transparent!important;border:1px solid transparent!important;
}
.folder-list .side-item:hover,.folder-row .folder-open:hover{background:#0e1822!important;border-color:#1b2a37!important;color:#fff!important}
.folder-delete{width:30px!important;height:30px!important;border-radius:8px!important}

/* Category folders in sidebar */
.drive-side-folders{display:grid!important;gap:4px!important;margin:2px 0 0!important}
.drive-side-folder{
  width:100%!important;min-height:39px!important;height:39px!important;padding:0 10px!important;border:1px solid transparent!important;border-radius:9px!important;
  background:transparent!important;color:#bec8d2!important;display:flex!important;align-items:center!important;gap:9px!important;text-align:left!important;font-size:12px!important;font-weight:650!important;
}
.drive-side-folder:hover{background:#0e1822!important;border-color:#1b2a37!important;color:#fff!important}
.drive-side-folder .folder-ico{position:relative;width:19px;height:14px;border-radius:3px;background:#ff920c;flex:0 0 auto}
.drive-side-folder .folder-ico:before{content:'';position:absolute;left:2px;top:-3px;width:8px;height:4px;border-radius:2px 2px 0 0;background:#ffa22a}
.drive-side-folder small{margin-left:auto;color:#667587;font-size:10px}

/* Compact files table: no giant empty vertical space. */
.drive-table-head{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) 90px 170px 178px!important;
  gap:12px!important;
  align-items:center!important;
  min-height:36px!important;
  height:36px!important;
  padding:0 14px!important;
  margin:0!important;
  border:1px solid #1b2935!important;
  border-bottom:0!important;
  border-radius:11px 11px 0 0!important;
  background:#09111a!important;
  color:#7d8b9b!important;
  font-size:10px!important;
  font-weight:700!important;
}
.drive-table-head span:last-child{text-align:right!important;padding-right:6px!important}
.file-list{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  border-radius:0 0 11px 11px!important;
  border:1px solid #1b2935!important;
  background:#09111a!important;
}
.file-list:not(.grid-layout) .file-row{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) 90px 170px 178px!important;
  grid-template-areas:"name size modified actions"!important;
  gap:12px!important;
  align-items:center!important;
  min-height:60px!important;
  height:60px!important;
  padding:8px 12px!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  border-radius:0!important;
}
.file-list:not(.grid-layout) .file-row:last-child{border-bottom:0!important}
.file-row>.file-main{grid-area:name!important;min-width:0!important;width:100%!important;overflow:hidden!important}
.file-row>.file-size{grid-area:size!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.file-row>.file-date{grid-area:modified!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.file-row>.file-actions{grid-area:actions!important;width:100%!important;min-width:0!important;justify-content:flex-end!important;gap:5px!important;overflow:visible!important}
.file-row>.file-downloads{display:none!important}
.file-row>.select-box[hidden]{display:none!important}
.file-main{display:flex!important;align-items:center!important;gap:11px!important}
.file-icon{width:38px!important;height:38px!important;min-width:38px!important;flex:0 0 38px!important;border-radius:9px!important}
.file-copy,.mx-name-line{min-width:0!important;max-width:100%!important;overflow:hidden!important}
.mx-name-line{display:flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important}
.mx-pin{flex:0 0 18px!important;width:18px!important;min-width:18px!important;padding:0!important}
.file-name{
  display:block!important;min-width:0!important;max-width:100%!important;flex:1 1 auto!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  word-break:normal!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important;
  font-size:13px!important;line-height:1.25!important;
}
.file-actions .icon-btn{
  width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;flex:0 0 31px!important;
  border-radius:8px!important;font-size:14px!important;padding:0!important;
}
.empty-state{min-height:110px!important;padding:28px 16px!important;display:grid!important;place-items:center!important}

/* Grid view stays compact too. */
.file-list.grid-layout{
  display:grid!important;grid-template-columns:repeat(3,minmax(180px,1fr))!important;gap:10px!important;padding:10px!important;
  border-radius:11px!important;background:transparent!important;border:0!important;
}
.file-list.grid-layout .file-row{min-height:140px!important;height:auto!important;padding:12px!important}

/* Detail panel becomes a drawer instead of shrinking the table. */
.detail-section:not([hidden]){
  position:fixed!important;right:16px!important;top:92px!important;bottom:16px!important;width:min(340px,calc(100vw - 32px))!important;
  z-index:70!important;display:block!important;margin:0!important;overflow:auto!important;
  border:1px solid #243544!important;border-radius:16px!important;background:linear-gradient(180deg,#0d1721,#091119)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48)!important;
}

/* Keep the overall desktop proportions calm. */
.workspace{grid-template-columns:220px minmax(0,1fr)!important}
.content-head{margin:0 0 12px!important}
.content-head h1{font-size:27px!important;margin-bottom:12px!important}
.filters{gap:7px!important}
.filter{min-height:35px!important;height:35px!important;padding:0 14px!important;font-size:12px!important}

/* Tablet */
@media(max-width:1050px){
  .workspace{grid-template-columns:190px minmax(0,1fr)!important}
  .drive-table-head,.file-list:not(.grid-layout) .file-row{grid-template-columns:minmax(220px,1fr) 72px 132px 110px!important}
  .file-actions .icon-btn[data-action="copy"],.file-actions .icon-btn[data-action="edit"]{display:none!important}
  .content-area{padding:20px 16px 36px!important}
}

/* Mobile: top navigation strip, never a broken bottom bar. */
@media(max-width:760px){
  .topbar{
    height:66px!important;min-height:66px!important;padding:8px 12px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;
  }
  .brand{min-width:0!important}.brand-mark{width:42px!important;height:42px!important;border-radius:13px!important}.brand-copy{display:block!important}.brand strong{font-size:15px!important}.brand small{font-size:9px!important}
  .top-actions{display:none!important}.drive-top-tools{display:flex!important}.drive-top-tools .content-tools,.drive-top-tools .storage-card{display:none!important}.profile-btn{width:40px!important;height:40px!important}

  .workspace{display:block!important;margin:0!important;min-height:auto!important}
  .sidebar{
    position:sticky!important;top:66px!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:45!important;
    width:100%!important;height:58px!important;min-height:58px!important;max-height:58px!important;
    display:flex!important;align-items:center!important;gap:6px!important;padding:6px 8px!important;margin:0!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;
    background:rgba(8,14,20,.96)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
  }
  .sidebar::-webkit-scrollbar{display:none!important}
  .sidebar .upload-zone{
    flex:0 0 50px!important;width:50px!important;height:46px!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
  .sidebar .upload-zone .primary.huge{
    width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important;margin:0 2px!important;border-radius:12px!important;font-size:0!important;
  }
  .sidebar .upload-zone .primary.huge:before{content:'＋'!important;font-size:23px!important;line-height:1!important}
  .drive-nav{display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important;margin:0!important}
  .drive-nav-btn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important;justify-content:center!important;border-radius:11px!important}
  .drive-nav-btn .txt{display:none!important}.drive-nav-btn .ico{font-size:18px!important;width:auto!important}
  .drive-sidebar-storage,.drive-side-folders,.drive-category-head,.drive-real-folders-head,.folder-list{display:none!important}

  .content-area{padding:18px 12px 28px!important}
  .content-head{margin:0 0 14px!important}.content-head h1{font-size:25px!important}
  .filters{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;width:100%!important;padding-bottom:4px!important;scrollbar-width:none!important}
  .filters::-webkit-scrollbar{display:none!important}.filter{flex:0 0 auto!important}
  .drive-files-heading{margin:16px 0 8px!important}.drive-files-heading h2{font-size:18px!important}

  .drive-table-head{display:none!important}
  .file-list{border-radius:11px!important;overflow:hidden!important}
  .file-list:not(.grid-layout) .file-row{
    grid-template-columns:minmax(0,1fr) 42px!important;grid-template-areas:"name actions"!important;
    min-height:64px!important;height:64px!important;padding:8px 10px!important;gap:8px!important;
  }
  .file-row>.file-size,.file-row>.file-date{display:none!important}
  .file-row>.file-actions{justify-content:flex-end!important}
  .file-actions .icon-btn{display:none!important}
  .file-actions .icon-btn[data-action="trash"]{display:grid!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex:0 0 36px!important}
  .file-icon{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important}
  .file-name{font-size:12.5px!important}

  .file-list.grid-layout{grid-template-columns:1fr!important;padding:0!important}
  .file-list.grid-layout .file-row{min-height:72px!important;height:auto!important}
  .detail-section:not([hidden]){top:76px!important;right:10px!important;bottom:10px!important;width:calc(100vw - 20px)!important}
  footer{display:none!important}
}

/* Very small phones */
@media(max-width:430px){
  .brand-copy small{display:none!important}
  .content-area{padding-left:10px!important;padding-right:10px!important}
  .file-name{font-size:12px!important}
  .drive-nav-btn{width:44px!important;min-width:44px!important}
  .sidebar .upload-zone{flex-basis:48px!important;width:48px!important}
  .sidebar .upload-zone .primary.huge{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
}

/* TV / very large screens */
@media(min-width:1600px){
  .workspace{grid-template-columns:245px minmax(0,1fr)!important}
  .content-area{padding:30px 34px 50px!important}
  .drive-table-head,.file-list:not(.grid-layout) .file-row{grid-template-columns:minmax(360px,1fr) 110px 190px 200px!important}
  .file-list:not(.grid-layout) .file-row{height:66px!important;min-height:66px!important}
  .file-name{font-size:14px!important}
}