/* =========================================================
   Document Repository — Best‑structured CSS (desktop + mobile)
   Platform: macOS/iOS ready (Safari resets included)
   - Removes fragile global "td > * {display:flex}" pattern.
   - Desktop: sticky thead, column widths, hover effects.
   - Mobile: filename left‑aligned; timestamp aligns with filename text
     (not the icon) using shared --icon-size/--icon-gap.
   - Buttons reset for Safari to avoid white UA backgrounds.
   ========================================================= */

:root {
  /* Colors */
  --bg-color: #090a0f;
  --panel-bg-color: rgba(26, 26, 26, 0.6);
  --border-color: rgba(255, 255, 255, 0.1);
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --accent-color: #00aaff;
  --danger-color: #ff453a;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sizing / effects */
  --border-radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --body-padding: 1rem;

  /* Icon metrics (kept in sync across desktop/mobile) */
  --icon-size: 24px;
  --icon-gap: 1rem;
}

/* ===================== Reset & Base ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; overflow: hidden; }
body {
  color: var(--text-primary);
  font-family: var(--font-family);
  padding: var(--body-padding);
  background-color: var(--bg-color);
  background-image: radial-gradient(circle at 50% 0%, rgba(120,120,180,.08) 0%, transparent 50%);
  display: flex; flex-direction: column;
}

/* ===================== Layout ===================== */
.portal-wrapper { width:100%; height:100%; display:flex; flex-direction:column; gap:1.5rem; z-index:1; }
.portal-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.portal-header h1 { font-size:1.6rem; font-weight:700; letter-spacing:-1px; }
.portal-header h1 a { color:inherit; text-decoration:none; }
.dashboard-layout { display:flex; gap:1rem; flex-grow:1; min-height:0; }

/* ===================== Sidebar ===================== */
.sidebar-panel { flex:0 0 300px; background-color:var(--panel-bg-color); border:1px solid var(--border-color); border-radius:var(--border-radius); box-shadow:var(--shadow); overflow-y:auto; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:1rem; }
.sidebar-panel ul { list-style:none; position:relative; }
.sidebar-panel li { margin-left:0; }
.sidebar-panel ul ul { padding-left:28px; max-height:0; overflow:hidden; transition:max-height .3s ease-out; position:relative; }
.sidebar-panel ul ul::before { content:""; position:absolute; left:18px; top:.5rem; bottom:.5rem; width:1px; background-color:var(--border-color); opacity:.6; }
.sidebar-panel li.open > ul { max-height:1000px; }
.sidebar-panel a { display:flex; align-items:center; padding:.6rem .5rem; color:var(--text-secondary); text-decoration:none; border-radius:8px; transition:all .2s ease; font-weight:500; word-break:break-all; position:relative; }
.sidebar-panel a:hover { background-color:rgba(0,170,255,.1); color:var(--text-primary); }
.sidebar-panel a.active { background-color:rgba(0,170,255,.15); color:var(--text-primary); font-weight:600; }
.sidebar-panel a.active::before { content:""; position:absolute; left:-1rem; top:50%; transform:translateY(-50%); height:65%; width:4px; background-color:var(--accent-color); border-radius:4px; }

/* --- MODIFICATION START --- */
/* Target only the first SVG (the icon) to give it a margin */
.sidebar-panel a svg:first-child { flex-shrink:0; width:20px; height:20px; margin-right: 0.5rem; }
/* Make the folder name span grow to fill available space */
.sidebar-panel a > span {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* --- MODIFICATION END --- */

.sidebar-panel .chevron { transition:transform .3s ease; margin-left: auto; flex-shrink: 0; width:20px; height:20px; }
.sidebar-panel li.open > a > .chevron { transform:rotate(90deg); }
.sidebar-panel::-webkit-scrollbar { width:6px; }
.sidebar-panel::-webkit-scrollbar-track { background:transparent; }
.sidebar-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:3px; }

/* ===================== Content / File Manager ===================== */
.content-panel { flex-grow:1; display:flex; flex-direction:column; min-width:0; }
.file-manager-wrapper { background-color:var(--panel-bg-color); border:1px solid var(--border-color); border-radius:var(--border-radius); box-shadow:var(--shadow); overflow:hidden; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:flex; flex-direction:column; height:100%; }

.fm-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; }
.breadcrumbs a { color:var(--text-secondary); text-decoration:none; }
.breadcrumbs a:hover { color:var(--accent-color); }
.breadcrumbs span { margin:0 .5rem; color:var(--text-secondary); }

.fm-actions { display:flex; gap:1rem; }
.action-btn { display:inline-flex; align-items:center; gap:.75rem; padding:.6rem 1.2rem; color:#fff; border:none; border-radius:12px; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .3s ease; }
.upload-button { background-image:linear-gradient(45deg, var(--accent-color) 0%, #007aff 100%); box-shadow:0 4px 15px rgba(0,170,255,.3); }
.upload-button:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,170,255,.4); }
.create-folder-button { background-color:rgba(255,255,255,.1); }
.create-folder-button:hover { background-color:rgba(255,255,255,.2); }
.action-btn svg { width:18px; height:18px; }

.table-container { overflow-y:auto; flex-grow:1; }

/* ===================== Table ===================== */
table { width:100%; border-collapse:collapse; table-layout:fixed; }
colgroup col:nth-child(1) { width:60%; }
colgroup col:nth-child(2) { width:15%; }
colgroup col:nth-child(3) { width:15%; }
colgroup col:nth-child(4) { width:10%; }

th, td { padding:0 1.5rem; vertical-align:middle; min-height:56px; }
th { text-align:left; font-size:.875rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; height:56px; }

/* Sticky thead like original */
thead { background-color:rgba(0,0,0,.2); position:sticky; top:0; z-index:10; backdrop-filter:blur(5px); }
thead th { border-bottom:1px solid var(--border-color); }

/* Only the elements we control become flex; no global td > * */
.cell-content { display:flex; align-items:center; min-height:56px; padding:.5rem 0; width:100%; }

/* Body rows */
tbody tr { border-bottom:1px solid var(--border-color); transition:background-color .2s ease; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background-color:rgba(0,170,255,.05); }

/* ===================== File entry (name cell) ===================== */
.file-icon { width:var(--icon-size); height:var(--icon-size); margin-right:var(--icon-gap); flex-shrink:0; }
.folder-icon { color:#00bcd4; }
.pdf-icon { color:#ff6b6b; }
.docx-icon { color:#368dff; }
.xlsx-icon { color:#107c41; }
.image-icon { color:#4caf50; }
.video-icon { color:#e91e63; }
.other-icon { color:#9e9e9e; }

.item-info { display:block; padding:.5rem 0; }
.file-link { color:var(--text-primary); text-decoration:none; font-weight:500; transition:color .2s ease; display:inline-flex; align-items:center; }
.file-link:hover { color:var(--accent-color); }
.file-link span { white-space:normal; word-break:break-all; line-height:1.4; }
.mobile-metadata { display:none; }

/* ===================== Row action button (delete, etc.) ===================== */
.action-button {
  appearance: none;               /* Safari/macOS & iOS reset */
  -webkit-appearance: none;
  background: none;
  background-color: transparent;  /* explicitly avoid white UA background */
  border: none;
  color: var(--text-secondary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.action-button:hover { color: var(--danger-color); background-color: rgba(255, 69, 58, 0.1); }
.action-button:focus { outline: none; }
.action-button:focus-visible { outline: 2px solid rgba(0, 170, 255, 0.5); outline-offset: 2px; }
.action-button:active { transform: scale(0.96); }
.action-button svg { display:block; }

/* ===================== Utilities ===================== */
.align-right { display:flex; justify-content:flex-end; text-align:right; }
.justify-center { display:flex; justify-content:center; }

/* Empty state */
.empty-message { text-align:center; padding:4rem; color:var(--text-secondary); }

/* Context menu */
.context-menu { display:none; position:fixed; z-index:100; background-color:rgba(42,42,46,.8); border:1px solid rgba(255,255,255,.15); border-radius:10px; overflow:hidden; box-shadow:0 5px 25px rgba(0,0,0,.4); padding:.4rem; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); }
.context-menu-item { display:block; width:100%; padding:.5rem 1rem; background:none; border:none; color:var(--text-primary); text-align:left; cursor:pointer; white-space:nowrap; font-size:.9rem; border-radius:6px; }
.context-menu-item:hover { background-color:var(--accent-color); }

/* Drop zone + modals */
#drop-zone { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.7); z-index:9999; display:none; justify-content:center; align-items:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity .3s ease; }
#drop-zone.visible { display:flex; opacity:1; }
.drop-indicator { border:3px dashed var(--accent-color); border-radius:20px; padding:4rem 6rem; text-align:center; color:#fff; background-color:rgba(0,170,255,.1); transform:scale(.9); transition:transform .3s ease; }
#drop-zone.visible .drop-indicator { transform:scale(1); }
.drop-indicator svg { width:80px; height:80px; margin-bottom:1rem; color:var(--accent-color); }
.drop-indicator h2 { font-size:1.5rem; margin-bottom:.5rem; }

.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); backdrop-filter:blur(10px); z-index:10000; display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:all .3s ease; }
.modal-overlay.visible { opacity:1; visibility:visible; }
.modal-dialog { background:var(--panel-bg-color); border:1px solid var(--border-color); border-radius:var(--border-radius); padding:2rem; width:90%; max-width:400px; text-align:center; box-shadow:var(--shadow); transform:scale(.9); transition:transform .3s ease; }
.modal-overlay.visible .modal-dialog { transform:scale(1); }
.modal-dialog h3 { margin-bottom:1.5rem; font-size:1.25rem; }
.modal-form { display:flex; flex-direction:column; gap:1rem; }
.modal-input { background-color:rgba(255,255,255,.1); border:1px solid var(--border-color); color:var(--text-primary); padding:.75rem; border-radius:12px; font-size:1rem; text-align:center; }
.modal-input:focus { outline:none; border-color:var(--accent-color); }
.modal-button { padding:.75rem; border-radius:12px; border:none; font-size:1rem; font-weight:600; cursor:pointer; transition:all .2s ease; background-color:var(--accent-color); color:#fff; }
.modal-button:hover { filter:brightness(1.2); }
.modal-dialog .error-message { color:var(--danger-color); font-size:.9rem; min-height:1.2em; visibility:hidden; }
.modal-dialog .error-message.visible { visibility:visible; }

/* ===================== Mobile (≤768px) ===================== */
@media (max-width: 768px) {
  /* Layout */
  body { padding:0; height:auto; overflow:auto; }
  .portal-wrapper { padding:1rem; gap:1rem; max-width:100%; height:auto; }
  .portal-header { flex-direction:column; align-items:flex-start; gap:1rem; padding:1rem; border-bottom:none; }
  .dashboard-layout { flex-direction:column; }
  .sidebar-panel { display:none; }

  .fm-header { flex-direction:column; align-items:flex-start; gap:1rem; padding:1rem 0; }
  .fm-actions { width:100%; display:flex; gap:1rem; }
  .action-btn { flex:1; justify-content:center; font-size:.9rem; padding:.75rem 1rem; }
  .action-btn span { display:inline; }
  .action-btn svg { display:none; }

  .file-manager-wrapper { border-radius:var(--border-radius); border:1px solid var(--border-color); }
  .table-container { padding:0 1rem; }

  /* Table → list style */
  table { table-layout:auto; }
  colgroup col { width:auto !important; }
  thead { display:none; }
  tbody, tr, td { display:block; }

  tr.item-row { display:flex; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid var(--border-color); margin:0; }
  tbody tr:last-child { border-bottom:none; }
  td { padding:0; border:none; min-height:auto; }

  /* Show only name + actions */
  td[data-label="修改日期"],
  td[data-label="大小"] { display:none; }

  /* Name column: full width, left aligned */
  td[data-label="名称"] { flex:1 1 auto; min-width:0; text-align:left; }
  .item-info { display:block; }
  .file-link { display:flex; align-items:flex-start; text-align:left; }
  .file-link span { overflow-wrap:anywhere; font-size:1rem; font-weight:500; line-height:1.4; }

  /* Align metadata with filename text (not icon) */
  .item-info { --text-indent: calc(var(--icon-size) + var(--icon-gap)); }
  .mobile-metadata { display:block; font-size:.8rem; color:var(--text-secondary); margin-top:.25rem; margin-left:var(--text-indent); text-align:left; }
  .metadata-item:not(:last-child)::after { content:" · "; margin:0 .25rem; }

  /* Actions column pinned to the right */
  td[data-label="操作"] { flex:0 0 auto; padding-left:.5rem; align-self:flex-start; padding-top:.1rem; }

  /* Safety: neutralize desktop utility classes inside name cell if present */
  td[data-label="名称"] .justify-center,
  td[data-label="名称"] .align-right { justify-content:flex-start !important; text-align:left !important; }

  .context-menu { display:none !important; }
}