/* Modern styles for 蓝云天 文件分享 */
:root{
  --bg: linear-gradient(180deg,#071029 0%, #071a2e 60%);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --card-border: rgba(255,255,255,0.04);
  --card-shadow: 0 6px 18px rgba(2,6,23,0.6);
  --text: #e6eef8;
  --muted:#9aa4b2;
  --accent:#1e1c51;
  --accent-2:#1e4a4a;
  --accent-high:#ffd54a; /* high-contrast accent */
  --glass: rgba(255,255,255,0.04);
}

/* allow absolute controls inside card */
.card{position:relative}

/* View toggle buttons (top-right of files card) */
.view-toggle{position:absolute;right:18px;top:18px;display:flex;gap:8px;z-index:6}
.icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn.active{background:rgba(255,255,255,0.03);color:var(--accent-high);border-color:rgba(255,255,255,0.06)}

/* Thumbnail grid */
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;width:100%}
.thumb-item{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:8px;align-items:stretch;box-sizing:border-box}
.thumb-media{height:110px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);border-radius:6px;overflow:hidden}
.thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-video{width:100%;height:100%;object-fit:cover;background:#000}
.thumb-audio{width:100%}
.thumb-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted)}
.thumb-meta{display:flex;flex-direction:column;gap:6px}
.thumb-name{color:var(--accent-high);font-weight:600;text-decoration:none}
.thumb-info{display:flex;gap:8px;justify-content:space-between;color:var(--muted);font-size:0.85rem}
.thumb-actions{display:flex;justify-content:flex-end}

/* small circular delete icon for thumbnails (uploader-owned files) */
.thumb-del-icon{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background:#ff4d6d;
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.thumb-del-icon:hover{transform:scale(1.06)}

/* smaller grid on very small screens */
@media (max-width:420px){
  .thumb-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .thumb-media{height:90px}
}

/* When in thumbnail (full) mode, expand the main container to use available viewport width
   and increase columns so thumbnails make better use of horizontal space. */
.thumb-mode .container{
  max-width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}
.thumb-mode .card{
  padding-left: 12px;
  padding-right: 12px;
}
.thumb-mode #thumbContainer{
  width: 100%;
}
.thumb-mode .thumb-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.thumb-mode .thumb-item{padding:10px}


/* Ensure thumb grid fills table cell and ignores table column constraints when active */
#filesTable.thumb-view{table-layout:fixed}
#filesTable.thumb-view td{padding:12px}
#filesTable.thumb-view td > .thumb-grid{width:100%}
html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
  /* slow and smooth theme transitions */
  transition: background 1200ms cubic-bezier(0.215, 0.61, 0.355, 1), color 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* page container */
.container{
  max-width:1100px;
  margin:1px auto 0;
  padding:20px 28px 28px;
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:8px}
.logo{height:56px; width:auto; max-height:56px; border-radius:8px; box-shadow: 0 6px 18px rgba(5,8,15,0.6); object-fit:contain}
/* ensure light-theme logo matches dark size */
.theme-light .logo{height:44px; max-height:44px; width:auto}
.header h1{font-size:20px;margin:0;font-weight:600;letter-spacing:0.2px}
.app-version{font-size:0.9rem;color:var(--muted);font-weight:400;margin-left:8px}
.copyrightinfo{font-size:0.9rem;color:var(--muted);font-weight:400;margin-left:8px}

.theme-controls{display:flex;gap:8px;align-items:center}
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px;border-radius:8px;cursor:pointer;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition: background 900ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 700ms cubic-bezier(0.215, 0.61, 0.355, 1), color 700ms cubic-bezier(0.215, 0.61, 0.355, 1)}
.theme-btn svg{display:block}
.theme-btn.active{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}

/* light theme overrides */
.theme-light{
  --bg: linear-gradient(180deg,#f6f8fb 0%, #ffffff 60%);
  --card-bg: #ffffff;
  --card-border: transparent;
  --card-shadow: 0 8px 20px rgba(15,20,36,0.12);
  --text: #071029;
  --muted: #5b6b78;
  --accent: #2563eb;
  --accent-2: #06b6d4;
  --accent-high: #d97706;
}

/* remove logo shadow in light theme only */
.theme-light .logo{box-shadow: none !important; border-radius: 6px;}

.card{background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:18px; border-radius:12px; margin-bottom:16px; box-shadow: var(--card-shadow);
  transition: background 1200ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 900ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.section-title{font-size:14px;color:var(--muted);margin:0 0 10px 0}
.upload-area{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
input[type=file]{display:block}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:8px;border:none;cursor:pointer;font-weight:400}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:rgb(244, 238, 238)}
.btn-secondary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:rgb(244, 238, 238);border:1px solid rgba(255,255,255,0.1)}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.04)}
.btn-danger{background:#ff4d6d;color:white}
.small{font-size:0.88rem;color:var(--muted)}
/* Files table */
#filesTable, .files-table{width:100%;border-collapse:collapse;font-size:0.95rem}
#filesTable thead th, .files-table thead th{ text-align:left; font-size:0.85rem; color:var(--muted); padding:10px 8px }
#filesTable tbody tr, .files-table tbody tr{ border-bottom:1px solid rgba(255,255,255,0.03)}
#filesTable td, .files-table td{ padding:12px 8px }
#filesTable tbody td:first-child, .files-table tbody td:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
#filesTable tbody td:first-child .file-icon, .files-table tbody td:first-child .file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
#filesTable tbody td:first-child .file-icon i, .files-table tbody td:first-child .file-icon i {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#filesTable td:first-child a, .files-table td:first-child a {
  display: inline-flex;
  align-items: center;
}
/* high-contrast link styles for files and actions (dark theme default) */
#filesTable a, #filesTable td a, .files-table a { color:var(--accent-high) !important; text-decoration:none; font-weight:600 }
#filesTable a:hover, #filesTable a:focus, .files-table a:hover{ color:#fff !important; text-decoration:underline }
#filesTable a:visited{ color:var(--accent-high) !important }
#filesTable a.btn-ghost, .files-table .btn-ghost{ color:var(--accent-high) !important; border-color: rgba(255,213,74,0.12) }
#filesTable a.btn-ghost:hover{ background: rgba(255,213,74,0.06); color:#fff !important }

/* Ensure buttons (not only anchors) inside the files table use the same high-contrast accent
   so elements like the "返回上级文件夹" button match file name color in dark theme. */
#filesTable button.btn-ghost, #filesTable .btn.btn-ghost, .files-table button.btn-ghost {
  color: var(--accent-high) !important;
  border-color: rgba(255,213,74,0.12);
  background: transparent;
}
#filesTable button.btn-ghost:hover, .files-table button.btn-ghost:hover {
  background: rgba(255,213,74,0.06);
  color: #fff !important;
}

/* thumbnail container back button and actions should match file name accent color */
#thumbContainer .btn-ghost, .thumb-container .btn-ghost {
  color: var(--accent-high) !important;
  border-color: rgba(255,213,74,0.12);
  background: transparent;
}
#thumbContainer .btn-ghost:hover, .thumb-container .btn-ghost:hover {
  background: rgba(255,213,74,0.06);
  color: #fff !important;
}

/* light theme: use default blue link color for better contrast on light background */
.theme-light #filesTable a, .theme-light #filesTable td a, .theme-light .files-table a { color: #2563eb !important; text-decoration:none; font-weight:600 }
.theme-light #filesTable a:hover, .theme-light #filesTable a:focus, .theme-light .files-table a:hover{ color: #1746b6 !important; text-decoration:underline }
.theme-light #filesTable a:visited{ color: #2563eb !important }
.theme-light #filesTable a.btn-ghost, .theme-light .files-table .btn-ghost{ color:#2563eb !important; border-color: rgba(37,99,235,0.12) }
.theme-light #filesTable a.btn-ghost:hover{ background: rgba(37,99,235,0.06); color:#fff !important }

.action-group{display:flex;gap:8px;align-items:center}

.file-icon{display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:12px;color:var(--accent-high)}
.file-icon svg{width:32px;height:32px;display:inline-block;vertical-align:middle}
.sortable{user-select:none}
@media (max-width:720px){
  .container{padding:16px;margin:18px}
  .header h1{font-size:18px}
  .logo{height:44px}
  #filesTable td, .files-table td{ padding:10px 6px }
}

/* Mobile-specific improvements: allow long file names to wrap, reduce padding, and enable touch-friendly horizontal scrolling */
@media (max-width:480px){
  .container{padding:12px;margin:12px}
  .card{padding:14px}
  /* Make the files table scrollable on very small screens while allowing content to wrap */
  #filesTable, .files-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  /* Keep header readable but allow body rows to flow */
  #filesTable thead, .files-table thead{display:table-header-group}
  #filesTable thead th{white-space:nowrap}
  #filesTable tbody, .files-table tbody{display:block}
  #filesTable tbody tr, .files-table tbody tr{display:table-row; width:100%}
  /* Allow cells and links to wrap so long filenames don't overflow */
  #filesTable td, .files-table td{white-space:normal; word-break:break-word; padding:10px 8px}
  #filesTable a, .files-table a{word-break:break-word; white-space:normal}
  /* Optionally hide less-important columns (size and modification time) to conserve horizontal space */
  #filesTable thead th:nth-child(2), #filesTable thead th:nth-child(3), #filesTable td:nth-child(2), #filesTable td:nth-child(3){min-width:80px}
  /* Use CSS Grid to render each row as two logical lines on very small screens:
     - first row: file icon + name (spans full width)
     - second row: size | modified time | actions (side-by-side)
  */
  #filesTable tbody tr, .files-table tbody tr{
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "name name name" "size mtime actions";
    gap:6px 12px;
    align-items: center;
    padding:8px 6px;
  }
  #filesTable tbody td, .files-table tbody td{
    display: block; /* become grid items */
    padding:6px 6px;
  }
  #filesTable tbody td:nth-child(1){ grid-area: name }
  #filesTable tbody td:nth-child(2){ grid-area: size; color:var(--muted); font-size:0.88rem }
  #filesTable tbody td:nth-child(3){ grid-area: mtime; color:var(--muted); font-size:0.88rem }
  #filesTable tbody td:nth-child(4){ grid-area: actions; justify-self:end }
}