/* Front-end buttons and icons (loaded after style.css / mobile.css).
   Same retro desktop look; text-only "icons" become drawn glyphs from /static/icons.svg.
   Rules that would fight the 美樂蒂 theme are scoped to body:not(.theme-melody). */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ico {
  width: 16px; height: 16px; flex: 0 0 auto; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn, .icon-btn, .text-btn { white-space: nowrap; }
.btn .ico + span, .btn span + .ico { margin-left: 0; }

/* Header: theme, files, admin */
.header-actions { gap: 6px; }
.hdr-btn { gap: 6px; }
#theme-toggle .ico-sun { display: none; }
body.dark #theme-toggle .ico-sun { display: inline; }
body.dark #theme-toggle .ico-moon { display: none; }
body:not(.theme-melody) .app-header #theme-toggle { width: 32px; padding: 0; }
body:not(.theme-melody) .app-header .hdr-btn.btn { padding: 4px 10px; }
body:not(.theme-melody) .app-header #go-admin {
  background: linear-gradient(90deg, #000080, #0066cc); color: #fff;
  border-color: #111; border-top-color: #4d4dbd; border-left-color: #4d4dbd;
}
body:not(.theme-melody) .app-header #go-admin:hover { background: linear-gradient(90deg, #1414a0, #1a7ae0); }

/* File type pictograms replace the yellow square */
body:not(.theme-melody) .file-icon { background: transparent !important; border: 0 !important; }
.file-icon .ft { width: 100%; height: 100%; display: block; }
.theme-melody .file-icon .ft { display: none; }

/* Row actions: one compact line of icon buttons; when the row is squeezed, at most two lines of four
   (min-width keeps the grid's auto track from collapsing them into a single column again) */
.file-actions { flex-wrap: wrap; gap: 4px; justify-content: flex-end; min-width: 132px; }
.file-actions .icon-btn { width: 30px; height: 30px; min-width: 30px; padding: 0; }
.file-actions .icon-btn .ico { width: 15px; height: 15px; }
body:not(.theme-melody):not(.dark) .file-row:hover .file-actions .icon-btn { color: #111; }
.file-actions .icon-btn.act-primary { width: auto; padding: 0 8px; gap: 4px; font-size: 12px; }
/* The list pane can be narrow even on a desktop (it sits beside the actions panel). Size the row
   by the pane's own width: drop the time column first, then keep name | size | actions. */
body:not(.theme-melody) .file-view { container-type: inline-size; container-name: filelist; }
@container filelist (max-width: 720px) {
  body:not(.theme-melody) .file-view:not(.grid-mode) .file-row {
    grid-template-columns: minmax(0, 1fr) 78px auto;
    gap: 10px;
  }
  body:not(.theme-melody) .file-view:not(.grid-mode) .file-time { display: none; }
}
/* Phone-narrow: name (with size) on its own line, the action buttons on the line below */
@container filelist (max-width: 460px) {
  body:not(.theme-melody) .file-view:not(.grid-mode) .file-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  body:not(.theme-melody) .file-view:not(.grid-mode) .file-actions { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; }
}

/* Music, upload and misc buttons */
.music-controls .icon-btn { width: 34px; min-width: 34px; padding: 0; }
.music-controls .icon-btn .ico { width: 16px; height: 16px; }
#music-popout { gap: 6px; }
.segmented [data-view] { display: inline-flex; align-items: center; gap: 5px; }
.segmented [data-view] .ico { width: 14px; height: 14px; }
.text-btn { display: inline-flex; align-items: center; gap: 4px; }
.text-btn .ico { width: 14px; height: 14px; }