/* ===== BASE VARIABLES (fallbacks) ===== */
:root{
  --bg: #000000;
  --fg: #ffffff;
  --accent: #00aaaa;
  --accent-bright: #55ffff;
  --border: #5555ff;
  --header-bg: #0000aa;
  --header-fg: #ffffff;
  --footer-bg: #0000aa;
  --footer-fg: #ffffff;
  --selected-bg: var(--accent-bright);
  --selected-fg: #000000;

  --link: var(--accent);
  --link-highlight: var(--accent-bright);

  --shadow-color: rgba(0,0,0,0.70);
  --shadow-color-2: rgba(0,0,0,0.40);
  --shadow-offset: 8px;
}

/* ===== Layout ===== */
* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Courier New', monospace;
  margin: 0;
  display:flex;
  flex-direction:column;
  font-size: 15px;
}

/* header / footer */
.header{
  display:flex;
  justify-content:space-between;
  background: var(--header-bg);
  color: var(--header-fg);
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  font-weight: bold;
}
.header-left { font-weight: bold; }
.header-right { opacity: 0.9; }

/* command line wrapper */
.cmdline-wrap {
  display:flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-top: 1px dashed rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.cmd-prompt {
  color: var(--accent);
  padding: 4px 6px;
}
.cmdline {
  flex:1;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--border);
  padding: 6px 8px;
  font-family: inherit;
}
.cmd-exec {
  border:2px solid var(--border);
  background: var(--header-bg);
  color: var(--header-fg);
  padding:6px 10px;
  cursor:pointer;
}

/* footer */
.footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 6px 10px;
  display:flex;
  justify-content:space-between;
  border-top: 2px solid var(--border);
  gap: 8px;
  font-size: 13px;
}
.footer span { margin-right: 8px; }

/* main area */
.main{
  flex:1;
  display:flex;
  gap:8px;
  padding: 8px;
}

/* panes */
.pane{
  border: 2px solid var(--border);
  border-style: double;
  padding: 0;
  overflow:auto;
  min-height: 0; /* for flexbox */
  background: linear-gradient(0deg, rgba(255,255,255,0.02), transparent);
  position: relative;

  /* blocky/pixelated drop shadow (layered offsets) */
  box-shadow:
    var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color),
    calc(var(--shadow-offset) * 2) calc(var(--shadow-offset) * 2) 0 0 var(--shadow-color-2);
}

/* focused pane gives brighter border */
.pane.focus {
  border-color: var(--accent-bright);
  box-shadow:
    calc(var(--shadow-offset)/2) calc(var(--shadow-offset)/2) 0 0 rgba(0,0,0,0.5),
    var(--shadow-offset) var(--shadow-offset) 0 0 rgba(0,0,0,0.7);
}

/* left / right sizes */
.left { width: 28%; max-width: 480px; min-width: 200px; display:flex; flex-direction:column; }
.right { flex:1; display:flex; flex-direction:column; }

/* pane header (path + stats) */
.pane-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.02);
  font-size: 13px;
}
.path {
  flex: 1;
  color: var(--fg);
  font-family: monospace;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pane-stats {
  opacity: 0.85;
  font-size: 12px;
  min-width: 140px;
  text-align:right;
}

/* decorative arrows in header */
.dir-arrow { font-weight: bold; width:22px; text-align:center; opacity:0.9; }
.left-arrow { color: var(--accent); }
.right-arrow { color: var(--accent); }

/* center arrows decorative */
.pane-center-arrows { display:flex; align-items:center; justify-content:center; width: 20px; color: rgba(255,255,255,0.06); font-size:18px; user-select:none; }

/* pane body area (list) */
.pane-body {
  padding: 8px;
  overflow:auto;
}

/* entries */
.section-entry, .entry{
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}

/* hover / selection uses the theme variables */
.section-entry:hover,
.entry:hover { background: var(--selected-bg); color: var(--selected-fg); }
.pane-body.section-about .entry:hover { background: none; color: inherit; }

.section-entry.selected,
.entry.selected { background: var(--selected-bg); color: var(--selected-fg); }

/* special style for text entries (pre) */
.entry-text pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--fg);
}

/* links */
#entries a {
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
  display:inline-block;
}
#entries a:hover, #entries .entry:hover a { color: var(--selected-fg); }
.entry.selected a { color: var(--link-highlight); }

/* spacing column (preserve layout without arrow) */
.section-entry::before,
.entry::before {
  content: '';
  display:inline-block;
  width: 12px;
}

/* small decorative line */
.arrow-line {
  color: var(--fg);
}

/* ===== Popup (terminal-styled modal) ===== */
#popup-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  font-family: inherit;
}

/* overlay */
.popup-overlay {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  background: rgba(var(--overlay-rgb), var(--overlay-alpha, 0.55));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
}

/* box */
.popup {
  width: min(1000px, 96%);
  max-height: 90%;
  overflow: auto;
  background: var(--popup-bg);
  border: 3px solid var(--popup-border);
  box-shadow:
    calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) 0 0 var(--shadow-color),
    var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color),
    calc(var(--shadow-offset) * 1.8) calc(var(--shadow-offset) * 1.8) 0 0 var(--shadow-color-2);
  color: var(--popup-fg);
  padding: 14px;
  pointer-events: auto;
  user-select: text;
}

/* popup header / meta */
.popup-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom:8px;
  background: var(--header-bg-transparent);
  padding: 6px 8px;
  border-bottom: 1px dashed var(--border);
}
.popup-title { font-weight: bold; font-size: 18px; }
.popup-year { opacity: 0.8; font-size: 13px; }

.popup-meta {
  color: var(--popup-fg);
  opacity: 0.9;
  font-size: 13px;
  margin-bottom: 8px;
}

.popup-desc {
  background: var(--header-bg-transparent);
  padding: 8px;
  margin: 0 0 10px 0;
  white-space: pre-wrap;
  border: 1px solid var(--header-bg-transparent);
  color: var(--popup-fg);
  font-family: monospace;
  font-size: 13px;
}

.popup-screenshots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 160px;
}
.screenshot {
  max-width: 100%;
  max-height: 320px;
  image-rendering: pixelated;
  border: 2px solid var(--border);
  background: var(--bg);
  display:block;
}
.screenshot.fallback {
  display:flex;
  align-items:center;
  justify-content:center;
  width: 420px;
  height: 240px;
  color: var(--popup-fg);
  border: 2px dashed var(--border);
  font-size: 13px;
  text-align: center;
  background: var(--bg);
}
.screenshot-caption { text-align:center; font-size:12px; opacity:0.9; margin-top:4px; }

.popup-controls {
  display:flex;
  gap:8px;
  margin-bottom: 8px;
}
.popup-btn {
  border:2px solid var(--border);
  background:var(--header-bg);
  color:var(--header-fg);
  padding:6px 10px;
  cursor:pointer;
  font-family:inherit;
}
.popup-btn:hover { background: var(--selected-bg); color: var(--selected-fg); }
.popup-btn.close { margin-left: auto; }

.popup-links {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.popup-links a {
  color: var(--popup-link);
  text-decoration: underline;
  padding: 4px 8px;
  border: 1px solid var(--border-faint);
}
.popup-links a:hover { color: var(--popup-link-hover); }

/* ===== Responsive tweaks ===== */
/* hide decorative arrows on narrow tablets / small screens */
@media (max-width:900px) {
  .pane-center-arrows { display:none; width:0; }
}

/* MOBILE: Stack panes vertically.
   - Left pane shows on top and sizes to its content (only as much height as needed)
   - Right pane sits below and uses remaining viewport space (scrolls internally if needed) */
@media (max-width:700px) {
  .main {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }

  /* Left pane becomes full width on top and sizes to content */
  .left {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: none; /* size to content height, don't stretch */
    flex-direction: column;
    order: 0;
    height: auto;
    overflow: visible;
  }

  /* Right pane below, fills remaining space */
  .right {
    display: flex;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    order: 1;
    flex-direction: column;
  }

  .pane {
    /* allow natural height on left, but remove forced large heights */
    height: auto;
    max-height: none;
  }

  /* left pane body: let content determine height (no forced scrolling) */
  .left .pane-body {
    max-height: none;
    overflow: visible;
  }

  /* right pane body should use available viewport height and scroll if needed.
     Reserve space for header, footer and command line (adjust 160px if you have larger header/footer). */
  .right .pane-body {
    max-height: calc(100vh - 160px);
    overflow: auto;
  }

  .cmdline { font-size:13px; }

  /* hide decorative center arrows on mobile */
  .pane-center-arrows { display:none; width:0; }
}

/* small screens / very tight widths: reduce left min width constraints */
@media (max-width:420px) {
  .left { min-width: 0; padding: 0; }
  .pane-header { padding: 6px; font-size: 12px; }
  .cmdline-wrap { padding: 6px; }
}

#change-skin {
	cursor: pointer;
}

/* end of file */