/* Provenance Archive — Shared Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0c0c12;
  color: #e1d9eb;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ═══ STICKY HEADER ═══ */
.site-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 30px;
  background: #111119;
  border-bottom: 2px solid #3a3a50;
}
.site-bar a { text-decoration: none; }
.bar-brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; font-weight: 700;
  color: #ff5545; letter-spacing: 5px;
}
.bar-sep { color: #3a3a50; font-size: 18px; }
.bar-section {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: #b0b0b0; letter-spacing: 2px; text-transform: uppercase;
}
.bar-nav {
  margin-left: auto; display: flex; gap: 12px;
}
.bar-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: #a0a0a0; letter-spacing: 1px;
  text-decoration: none; padding: 6px 14px;
  border: 1px solid #3a3a50; border-radius: 4px;
  transition: all 0.2s;
}
.bar-link:hover { color: #fff; border-color: #ff5545; background: #ff554515; }

/* ═══ PAGE LAYOUT ═══ */
.page { max-width: 1400px; margin: 0 auto; padding: 30px; }
.page-title {
  font-size: 26px; font-weight: 600; color: #fff; margin-bottom: 10px;
}
.page-desc {
  font-size: 15px; color: #b0b0b0; line-height: 1.6; margin-bottom: 30px; max-width: 900px;
}
.page-desc strong { color: #ffb732; }

/* ═══ SECTION CARDS (index page) ═══ */
.section-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;
}
.section-card {
  background: #161622; border: 1px solid #3a3a50;
  border-left: 4px solid #ff5545; border-radius: 6px;
  padding: 24px; text-decoration: none; color: inherit;
  transition: all 0.2s;
}
.section-card:hover { border-color: #ff5545; background: #1c1c2e; }
.card-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: #8a8494; letter-spacing: 3px; margin-bottom: 8px;
}
.card-title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.card-desc { font-size: 14px; color: #b0b0b0; line-height: 1.5; }
.card-stats {
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: #ff5545; letter-spacing: 1px;
}

/* ═══ DIRECTORY TREE ═══ */
.dir-section {
  margin-bottom: 24px; background: #111119;
  border: 1px solid #3a3a50; border-radius: 6px; overflow: hidden;
}
.dir-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; cursor: pointer;
  background: #1a1a28; border-bottom: 1px solid #3a3a50;
  user-select: none;
}
.dir-header:hover { background: #1e1e30; }
.dir-arrow {
  font-size: 11px; color: #8a8494; transition: transform 0.2s;
  width: 14px; text-align: center;
}
.dir-section.open > .dir-header .dir-arrow { transform: rotate(90deg); }
.dir-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px; color: #ffb732; font-weight: 600;
}
.dir-meta {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: #a0a0a0;
}
.dir-body { display: none; padding: 0; }
.dir-section.open > .dir-body { display: block; }
.dir-section.nested { margin: 0; border: none; border-top: 1px solid #1e1e2e; border-radius: 0; }
.dir-section.nested .dir-header { background: #14141e; }
.dir-section.nested .dir-header:hover { background: #1a1a2a; }

/* ═══ FILE LIST ═══ */
.file-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px 10px 40px;
  border-bottom: 1px solid #252535;
  font-size: 14px;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: #1a1a28; }
.file-icon {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  min-width: 44px; text-align: center; text-transform: uppercase;
  border: 1px solid transparent;
}
.file-icon.pdf { background: #ff554525; color: #ff6b5a; border-color: #ff554540; }
.file-icon.csv { background: #2de0b625; color: #4eecc8; border-color: #2de0b640; }
.file-icon.json { background: #ffb73225; color: #ffc44d; border-color: #ffb73240; }
.file-icon.zip { background: #a77bdb25; color: #b990e6; border-color: #a77bdb40; }
.file-icon.png, .file-icon.jpg, .file-icon.jpeg, .file-icon.webp { background: #3a86ba25; color: #6dbcf5; border-color: #3a86ba40; }
.file-icon.xlsx, .file-icon.ods { background: #2de0b625; color: #4eecc8; border-color: #2de0b640; }
.file-icon.txt, .file-icon.md, .file-icon.sql, .file-icon.py { background: #a0a0a020; color: #b0b0b0; border-color: #a0a0a035; }
.file-icon.html { background: #ff554525; color: #ff6b5a; border-color: #ff554540; }
.file-icon.other { background: #70707020; color: #8a8494; border-color: #70707035; }

.file-name {
  flex: 1; color: #e1d9eb; word-break: break-all;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
}
.file-size {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: #8a8494; min-width: 70px; text-align: right;
}
.file-actions { display: flex; gap: 6px; }
.file-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; padding: 5px 12px;
  border: 1px solid #3a3a50; border-radius: 4px;
  background: #1a1a28; color: #b0b0b0;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.file-btn:hover { border-color: #ff5545; color: #ff5545; background: #ff554510; }
.file-btn.view { color: #4eecc8; border-color: #2de0b650; }
.file-btn.view:hover { border-color: #2de0b6; color: #2de0b6; background: #2de0b610; }

/* ═══ MODAL VIEWER ═══ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.88);
  justify-content: center; align-items: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #111119; border: 2px solid #3a3a50; border-radius: 8px;
  width: 90vw; height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; padding: 12px 18px;
  background: #1a1a28; border-bottom: 1px solid #3a3a50;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #b0b0b0;
}
.modal-title { flex: 1; color: #e1d9eb; word-break: break-all; }
.modal-close {
  background: none; border: 1px solid #3a3a50; border-radius: 4px;
  color: #ff5545; font-size: 16px; cursor: pointer; padding: 4px 12px;
  margin-left: 12px;
}
.modal-close:hover { background: #ff554520; }
.modal-body {
  flex: 1; overflow: auto; padding: 0;
  background: #0c0c12; color: #e1d9eb;
}
.modal-body iframe { width: 100%; height: 100%; border: none; }
.modal-body pre {
  padding: 20px; font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: #e1d9eb; white-space: pre-wrap;
  word-break: break-all;
}
/* ═══ LIGHTBOX ═══ */
.lb-container {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.lb-image {
  max-width: calc(100% - 120px); max-height: 100%; object-fit: contain;
  display: block; margin: auto;
}
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 80px;
  background: rgba(17,17,25,0.7); border: 1px solid #3a3a50;
  color: #e1d9eb; font-size: 28px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: all 0.15s; z-index: 10;
}
.lb-arrow:hover { background: rgba(255,85,69,0.2); border-color: #ff5545; color: #fff; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-counter {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: #a0a0a0;
  background: rgba(17,17,25,0.8); padding: 4px 14px;
  border-radius: 4px; border: 1px solid #3a3a50;
}
/* Error pages inside iframe inherit dark bg */
.modal-body .error-msg {
  padding: 40px; text-align: center; color: #ff5545; font-size: 16px;
}
.json-tree { padding: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.json-key { color: #ff6b5a; }
.json-string { color: #4eecc8; }
.json-number { color: #ffc44d; }
.json-bool { color: #b990e6; }
.json-null { color: #8a8494; }
.json-toggle {
  cursor: pointer; color: #6dbcf5; user-select: none;
}
.json-toggle:hover { color: #fff; }
.json-collapsed { display: none; }

/* ═══ TABULATOR OVERRIDES ═══ */
.tabulator .tabulator-row { background: #202020; color: #e1d9eb; }
.tabulator .tabulator-row.tabulator-row-even { background: #272727; }
.tabulator .tabulator-row:hover { background: #363636 !important; }
.tabulator .tabulator-row.tabulator-selected { background: #1a1a2e !important; }
.tabulator .tabulator-header { background: #111119; border-bottom: 2px solid #3a3a50; }
.tabulator .tabulator-col { background: #111119; border-right: 1px solid #252535; }
.tabulator .tabulator-col:hover { background: #1a1a28; }
.tabulator .tabulator-cell { border-right: 1px solid #1a1a25; }
.tabulator .tabulator-row .tabulator-cell { border-right: 1px solid #1a1a25; }
.tabulator .tabulator-footer { background: #111119; }

/* ═══ FOOTER ═══ */
.page-footer {
  margin-top: 40px; padding: 20px 0;
  border-top: 1px solid #252535; text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: #8a8494;
}

@media (max-width: 800px) {
  .section-grid { grid-template-columns: 1fr; }
  .file-row { padding-left: 20px; }
}