/* /var/www/html/ipfs-web/theme.css */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

:root{
  --bg: #0b0f14;
  --bg-elev: #0f1520;
  --panel: #0d141c;
  --panel-2: #121a24;
  --border: #1e2935;
  --muted: #98a2b3;
  --text: #d7dee9;
  --text-weak: #c2c9d3;
  --accent: #3b82f6;
  --accent-2: #2563eb;

  --gutter: 5vw;
  --thumb-min: 220px;
  --thumb-gap: 16px;
}

body{
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

#app{ width:100%; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
body, #app { margin-left: 0 !important; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.panel + .panel { margin-top: 16px; }

.section-title{ margin:0 0 8px 0; font-weight:600; }

.top-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 1200px){ .top-grid{ grid-template-columns:1fr; } }

input[type="file"]{ display:block; width:100%; }

input[type="text"], input[type="search"], input[type="number"], select, textarea{
  width:100%; background:#0c121a; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; outline:none;
}
input::placeholder, textarea::placeholder{ color:#6b7280; }

.btn{
  appearance:none; background:var(--accent); color:#fff; border:1px solid transparent;
  border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer;
  transition: transform .02s ease-in-out, background .15s ease-in-out;
}
.btn:hover{ background:var(--accent-2); }
.btn:active{ transform:translateY(1px); }
.btn.secondary{ background:#0e1620; color:#c9d3df; border-color:var(--border); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--border); }

.tag{ display:inline-block; padding:1px 6px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:11px; }
.small{ font-size:12px; color:var(--muted); }

.mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  overflow-wrap:anywhere; word-break:break-word;
}

/* ---- Viewport ---- */
#viewportBox{
  background:#0b1119; border:1px dashed var(--border); border-radius:12px;
  min-height:200px; display:grid; place-items:center; overflow:hidden;
}
#viewportBox img{ width:100%; height:100%; object-fit:contain; }

/* ---- Gallery ---- */
#gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--thumb-min),1fr));
  gap:var(--thumb-gap); align-items:stretch;
}
.card-thumb{
  background:var(--panel-2); border:1px solid var(--border); border-radius:14px;
  padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0;
}
.card-thumb .header{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.card-thumb .header .mono{ max-width:100%; }

.thumb-box{
  position:relative; background:#0b1119; border:1px dashed var(--border);
  border-radius:10px; min-height:180px; display:grid; place-items:center; overflow:hidden;
}
.thumb-box img{ width:100%; height:100%; object-fit:contain; display:block; }

.cid-strip{
  background:#0b0f14; border:1px solid var(--border); border-radius:8px; padding:6px 8px;
  display:block; min-height:34px; line-height:1.2;
  overflow-wrap:anywhere; word-break:break-word; white-space:normal;
}

.card-footer{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }

/* Left meta (two lines: size/date and Expires:) */
.card-meta{ display:flex; flex-direction:column; gap:4px; }

/* Column of buttons on the right side of each card footer */
.btn-col{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

/* small button */
.btn.micro{ padding:2px 8px; font-size:11px; border-radius:8px; }

/* ---- Files table ---- */
.table-wrap{ background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; font-weight:600; color:#c2c9d3; background:#0e1620; border-bottom:1px solid var(--border); padding:10px; }
tbody td{ border-top:1px solid var(--border); padding:8px 10px; vertical-align:top; }
tbody tr:hover{ background:#0c121a; }

/* ---- Utility ---- */
.row{ display:flex; gap:8px; align-items:center; }
.row > * { flex:0 0 auto; }
.hidden{ display:none !important; }
hr.sep{ border:0; border-top:1px solid var(--border); margin:12px 0; }
.section{ margin:18px 0; }

/* Gallery filter sizes */
#galleryFilterRow{ flex-wrap:wrap; }
#galleryFilterRow label{ flex:0 0 auto; }
#gpath{ flex:1 1 60%; max-width:60%; min-width:260px; }
#galleryFilterRow .btn{ flex:0 0 auto; }
@media (max-width:900px){ #gpath{ flex-basis:100%; max-width:100%; } }

/* ---- Collapsible (<details>) ---- */
details.collapsible > summary{
  list-style:none; cursor:pointer; user-select:none; font-weight:600; margin:-4px -4px 8px -4px;
}
details.collapsible > summary::marker{ display:none; }
details.collapsible > summary::before{
  content:"▸"; display:inline-block; margin-right:8px; transform:rotate(0deg); transition:transform .15s ease-in-out;
}
details.collapsible[open] > summary::before{ transform:rotate(90deg); }
details.collapsible > summary:hover{ color:#e2e8f0; }