/* frontend/src/styles.css */
@import '@picocss/pico/css/pico.classless.min.css';

/* ── Container & sections ─────────────────────────────────────────────── */
main   { max-width: 980px; margin: 0 auto; padding: 0 12px 24px; }
section{ margin-block: 1rem; }

/* ── App bar ──────────────────────────────────────────────────────────── */
.app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 24px; }
.brand      { display:flex; align-items:center; gap:8px; font-size:1.25rem; }
.brand .wing{ font-size:1.3em; line-height:1; }

/* ── Layout helpers ───────────────────────────────────────────────────── */
.grid-3 { display:grid; gap:12px; }
@media (min-width:768px){
  .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
}

.file-picker { display:grid; gap:12px; }

.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row-right   { display:flex; align-items:center; justify-content:flex-end;   gap:8px;  }
.row-center  { display:flex; align-items:center; justify-content:center;     gap:8px;  }

/* Form controls fill their line */
label>input, label>select, label>textarea { width:100%; }

/* ── Cards & list rows ────────────────────────────────────────────────── */
.card{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border-radius:8px;
  max-width:100%;
}
.list-row:not(:last-child){ margin-bottom:4px; }

/* Keep the left side flexible & clamped */
.list-row > :first-child{ flex:1 1 auto; min-width:0; }
.list-row .ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── File review cards ────────────────────────────────────────────────── */
.video-card{
  border:1px solid var(--muted-border-color);
  border-radius:12px;
  padding:12px;
  background:var(--surface-2,rgba(255,255,255,.02));
  display:grid;
  gap:10px;
  max-width:100%;
}
.video-card > *{ min-width:0; }            /* prevent horizontal overflow */
.thumb-row{ display:grid; place-items:center; }
.preview-thumb{ box-shadow:0 1px 0 rgba(0,0,0,.12); }
.filename{ margin:0 0 4px; overflow-wrap:anywhere; word-break:break-word; } /* wrap long names */

/* ── Overflow guards & utilities ──────────────────────────────────────── */
html, body { max-width:100%; overflow-x:hidden; }

.wrap-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
.mono-wrap{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow-wrap:anywhere; word-break:break-word;
}
small.meta{ color:var(--muted-color); }
.bad      { color:var(--del-color); }
.stretch  { width:100%; }

/* ── Current Sub‑Folder actions (3 equal columns) ─────────────────────── */
.sub-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
  justify-items:stretch;
  margin-top:8px;
}
.sub-actions > button{ width:100%; }

/* ── Icon buttons (Home / Delete) ─────────────────────────────────────── */
.icon-btn{
  display:inline-grid;
  place-items:center;
  padding:.35rem .45rem;
  min-width:2.25rem;
  height:2.25rem;
  line-height:1;
  font-size:1.15rem;
  margin-inline:0;
}

/* Danger (red X). Keep .bad as an alias for compatibility. */
.icon-btn.danger,
.icon-btn.bad{
  background:var(--del-color,#c0392b);
  border-color:var(--del-color,#c0392b);
  color:#fff;
}
.icon-btn.danger:hover,
.icon-btn.danger:focus,
.icon-btn.bad:hover,
.icon-btn.bad:focus{
  filter:brightness(1.05);
}

/* Equal height for Current Sub‑Folder action buttons */
.sub-actions { --sub-action-h: 2.75rem; } /* pick a single row height */
.sub-actions > button{
  height: var(--sub-action-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make icon buttons match that height only inside this group */
.sub-actions > .icon-btn{
  height: var(--sub-action-h);
  min-height: var(--sub-action-h);
  padding: 0 .6rem;            /* vertical centering; modest horizontal padding */
  font-size: 1.15rem;          /* same as your base icon size */
}
