/* ================================================================
   style.css — Terminal Portfolio
   Supports themes: default (dark/vim), light, mario, interstellar
   ================================================================ */

/* ── Reset & Box Model ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ── CSS Custom Properties (Default Dark/Vim Theme) ─────────── */
:root {
  --bg:             #0d1117;
  --term-bg:        #161b22;
  --titlebar-bg:    #21262d;
  --text:           #c9d1d9;
  --dim:            #6e7681;
  --prompt-user:    #3fb950;
  --prompt-sep:     #8b949e;
  --prompt-path:    #f0883e;
  --prompt-sym:     #c9d1d9;
  --accent:         #3fb950;   /* green */
  --accent2:        #58a6ff;   /* blue  */
  --accent3:        #d2a8ff;   /* purple*/
  --project-color:  #79c0ff;   /* clickable project names */
  --tag-bg:         #21262d;
  --tag-border:     #30363d;
  --error:          #f85149;
  --warn:           #d29922;
  --border:         #30363d;
  --scrollbar:      #30363d;
  --scrollbar-h:    #58a6ff;
  --input-cursor:   #3fb950;
  --selection:      rgba(56,139,253,0.25);
  --shadow:         0 16px 48px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5);
  --glow:           0 0 24px rgba(63,185,80,.12);
  --font:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-size:      14px;
  --line-height:    1.65;
  --radius:         3px;
  --tr:             0.3s ease;
  --term-min-h:     420px;
  --term-max-h:     92vh;
  
  /* Vim Statusline Variables */
  --status-mode-bg: #3fb950;
  --status-mode-fg: #0d1117;
  --status-sec-bg:  #21262d;
  --status-sec-fg:  #c9d1d9;
  --status-file-bg: #161b22;
  --status-file-fg: #8b949e;
  --status-pct-bg:  #d2a8ff;
  --status-pct-fg:  #0d1117;
}

/* ── Light Theme ─────────────────────────────────────────────── */
body.theme-light {
  --bg:             #f0f2f5;
  --term-bg:        #ffffff;
  --titlebar-bg:    #dde1e7;
  --text:           #1c1e21;
  --dim:            #6b7280;
  --prompt-user:    #15803d;
  --prompt-sep:     #374151;
  --prompt-path:    #b45309;
  --prompt-sym:     #1c1e21;
  --accent:         #15803d;
  --accent2:        #1d4ed8;
  --accent3:        #7c3aed;
  --project-color:  #1d4ed8;
  --tag-bg:         #f3f4f6;
  --tag-border:     #d1d5db;
  --error:          #dc2626;
  --warn:           #d97706;
  --border:         #d1d5db;
  --scrollbar:      #cbd5e1;
  --scrollbar-h:    #1d4ed8;
  --input-cursor:   #15803d;
  --shadow:         0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --glow:           none;
  
  /* Vim Statusline Variables */
  --status-mode-bg: #15803d;
  --status-mode-fg: #ffffff;
  --status-sec-bg:  #dde1e7;
  --status-sec-fg:  #1c1e21;
  --status-file-bg: #ffffff;
  --status-file-fg: #6b7280;
  --status-pct-bg:  #7c3aed;
  --status-pct-fg:  #ffffff;
}

/* ── Mario Theme ─────────────────────────────────────────────── */
body.theme-mario {
  --bg:             #5c94fc;
  --term-bg:        #000000;
  --titlebar-bg:    #9a0000;
  --text:           #ffffff;
  --dim:            #aaaaaa;
  --prompt-user:    #ffd700;
  --prompt-sep:     #ff6600;
  --prompt-path:    #00dd00;
  --prompt-sym:     #ffffff;
  --accent:         #ffd700;
  --accent2:        #ff6600;
  --accent3:        #00dd00;
  --project-color:  #ffd700;
  --tag-bg:         #1a0000;
  --tag-border:     #9a0000;
  --error:          #ff4444;
  --warn:           #ffaa00;
  --border:         #9a0000;
  --scrollbar:      #9a0000;
  --scrollbar-h:    #ffd700;
  --input-cursor:   #ffd700;
  --shadow:         0 0 40px rgba(255,215,0,.3), 0 8px 32px rgba(0,0,0,.8);
  --glow:           0 0 40px rgba(255,215,0,.25);
  
  /* Vim Statusline Variables */
  --status-mode-bg: #ffd700;
  --status-mode-fg: #000000;
  --status-sec-bg:  #9a0000;
  --status-sec-fg:  #ffffff;
  --status-file-bg: #000000;
  --status-file-fg: #aaaaaa;
  --status-pct-bg:  #00dd00;
  --status-pct-fg:  #000000;
}

/* ── Interstellar Theme ──────────────────────────────────────── */
body.theme-interstellar {
  --bg:             #00000a;
  --term-bg:        #04040f;
  --titlebar-bg:    #080820;
  --text:           #dce8ff;
  --dim:            #6a7faa;
  --prompt-user:    #7ab4f5;
  --prompt-sep:     #a080e0;
  --prompt-path:    #f0c040;
  --prompt-sym:     #dce8ff;
  --accent:         #7ab4f5;
  --accent2:        #c090ff;
  --accent3:        #f0c040;
  --project-color:  #a0ccff;
  --tag-bg:         #0a0a25;
  --tag-border:     #1a1a50;
  --error:          #ff7070;
  --warn:           #f0c040;
  --border:         #141440;
  --scrollbar:      #141440;
  --scrollbar-h:    #7ab4f5;
  --input-cursor:   #7ab4f5;
  --shadow:         0 0 60px rgba(122,180,245,.12), 0 8px 40px rgba(0,0,10,.9);
  --glow:           0 0 50px rgba(122,180,245,.1);
  
  /* Vim Statusline Variables */
  --status-mode-bg: #7ab4f5;
  --status-mode-fg: #04040f;
  --status-sec-bg:  #080820;
  --status-sec-fg:  #dce8ff;
  --status-file-bg: #04040f;
  --status-file-fg: #6a7faa;
  --status-pct-bg:  #f0c040;
  --status-pct-fg:  #04040f;
}

/* ── Body ────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: var(--font-size);
  background-color: var(--bg);
  color: var(--text);
  transition: background-color var(--tr), color var(--tr);
  user-select: none;
}

/* ── Background Canvas (stars / effects) ────────────────────── */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Loading Screen ──────────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #090d13;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .8s ease;
}
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
#loading-container {
  width: 480px;
  max-width: 90%;
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 30px;
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(8px);
  text-align: center;
}
.vim-loader-logo {
  font-family: var(--font);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 15px rgba(63,185,80,0.4);
  letter-spacing: 8px;
  margin-bottom: 15px;
}
#loading-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
#loading-progress-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
#loading-bar-wrap {
  flex: 1;
  height: 6px;
  background: #0d1117;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#loading-bar {
  width: 0%;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--accent);
  transition: width 0.1s ease;
}
#loading-percentage {
  font-family: var(--font);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}
#loading-status {
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 15px;
  text-align: left;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#loading-console {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 110px;
  overflow-y: auto;
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font);
  font-size: 11px;
  color: #8b949e;
  line-height: 1.5;
}
#loading-console::-webkit-scrollbar {
  width: 4px;
}
#loading-console::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.console-line {
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.console-line.success {
  color: var(--accent);
}
.console-line.info {
  color: var(--accent2);
}
.console-line.error {
  color: var(--error);
}

/* ── Terminal Wrapper ────────────────────────────────────────── */
#terminal-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 24px;
}

/* ── Terminal Window ─────────────────────────────────────────── */
#terminal-window {
  width: 100%;
  max-width: 960px;
  min-height: var(--term-min-h);
  max-height: var(--term-max-h);
  background: var(--term-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--glow);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    background var(--tr),
    border-color var(--tr),
    box-shadow var(--tr);
}

/* ── Title Bar (Vim Tabline) ─────────────────────────────────── */
#titlebar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border);
  height: 34px;
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr);
}
#vim-tabs {
  display: flex;
  height: 100%;
}
.vim-tab {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  color: var(--dim);
  background: color-mix(in srgb, var(--titlebar-bg) 85%, #000 15%);
  border-right: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.vim-tab:hover {
  background: color-mix(in srgb, var(--titlebar-bg) 95%, #fff 5%);
  color: var(--text);
}
.vim-tab.active {
  background: var(--term-bg);
  color: var(--accent);
  border-bottom: 1px solid transparent;
  font-weight: 500;
  box-shadow: inset 0 2px 0 var(--accent);
}
#titlebar-text {
  display: flex;
  align-items: center;
  padding-right: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(63,185,80,0.3);
  letter-spacing: 1px;
}

/* ── Vim Statusline ──────────────────────────────────────────── */
#vim-statusline {
  display: flex;
  justify-content: space-between;
  background: var(--status-sec-bg);
  color: var(--status-sec-fg);
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  user-select: none;
  font-family: var(--font);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.sl-left, .sl-right {
  display: flex;
  align-items: center;
  height: 100%;
}
.sl-section {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
}
.sl-mode {
  display: inline-flex;
  align-items: center;
  background: var(--status-mode-bg);
  color: var(--status-mode-fg);
  font-weight: 800;
  padding: 0 14px;
  height: 100%;
  transition: background 0.2s, color 0.2s;
  text-transform: uppercase;
}
.sl-mode.insert-mode {
  background: var(--accent2);
  color: #ffffff;
}
.sl-user {
  background: var(--status-sec-bg);
  color: var(--status-sec-fg);
  font-weight: 500;
}
.sl-file {
  background: var(--status-file-bg);
  color: var(--status-file-fg);
  font-style: italic;
}
.sl-encoding, .sl-format {
  color: var(--dim);
  border-left: 1px solid color-mix(in srgb, var(--status-sec-bg) 80%, #fff 20%);
}
.sl-percentage {
  background: var(--status-pct-bg);
  color: var(--status-pct-fg);
  font-weight: 500;
}
.sl-linecol {
  background: var(--status-mode-bg);
  color: var(--status-mode-fg);
  font-weight: bold;
  transition: background 0.2s, color 0.2s;
}
.sl-linecol.insert-mode {
  background: var(--accent2);
  color: #ffffff;
}

/* ── Terminal Body (scrollable output) ───────────────────────── */
#terminal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  user-select: text;
}

/* Custom scrollbar */
#terminal-body::-webkit-scrollbar { width: 6px; }
#terminal-body::-webkit-scrollbar-track { background: transparent; }
#terminal-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 3px;
}
#terminal-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-h); }

/* ── Output History ──────────────────────────────────────────── */
#output {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--line-height);
}
#output .line { display: block; line-height: var(--line-height); }
#output .empty-line { display: block; height: calc(var(--font-size) * var(--line-height)); }

/* Command echo line */
#output .cmd-echo {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
#output .cmd-echo .prompt { flex-shrink: 0; }
#output .cmd-echo .cmd-text { color: var(--text); }

/* Output classes */
.out-success { color: var(--accent);  }
.out-info    { color: var(--accent2); }
.out-warn    { color: var(--warn);    }
.out-error   { color: var(--error);   }
.out-dim     { color: var(--dim);     }
.out-accent3 { color: var(--accent3); }

/* Typing animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Active Input Row ────────────────────────────────────────── */
#input-row {
  display: flex;
  align-items: center;
  padding-top: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.prompt {
  white-space: pre;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: var(--font-size);
}
/* Coloured prompt parts — set via JS */
.p-user { color: var(--prompt-user); font-weight: 700; }
.p-sep  { color: var(--prompt-sep);  }
.p-path { color: var(--prompt-path); }
.p-sym  { color: var(--prompt-sym);  }

#input-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
#cmd-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  caret-color: var(--input-cursor);
}
#cmd-input::selection { background: var(--selection); }

/* ── Inline HTML output (projects, skills, tables) ───────────── */

/* Section headers */
.sec-title {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 6px 0 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

/* Project cards */
.project-card { margin: 8px 0; }
.project-name {
  color: var(--project-color);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, text-shadow .15s;
}
.project-name:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--project-color);
  text-decoration: underline;
}
.project-desc { color: var(--text); margin: 2px 0 4px 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 12px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--accent3);
}

/* Tech stack grid */
.tech-category { margin: 6px 0; }
.tech-cat-name {
  color: var(--accent2);
  font-weight: 700;
  margin-bottom: 4px;
}
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tech-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text);
  padding: 3px 8px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  background: var(--tag-bg);
  transition: border-color .15s, background .15s;
}
.tech-item:hover {
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--tag-bg) 80%, var(--accent2) 20%);
}
.tech-item i {
  font-size: 16px;
  line-height: 1;
}
.tech-bullet { color: var(--accent3); font-size: 10px; }
.tech-item-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  color: var(--accent3);
}
.tech-item-inline i {
  font-size: 14px;
  line-height: 1;
}

/* Education card */
.edu-card { margin: 4px 0 8px; }
.edu-inst { color: var(--accent2); font-weight: 700; }
.edu-degree { color: var(--accent3); }
.edu-detail { color: var(--dim); }

/* Contact/social links */
.contact-link {
  color: var(--accent2);
  text-decoration: none;
  transition: color .15s;
}
.contact-link:hover { color: #fff; text-decoration: underline; }
.contact-row { display: flex; gap: 8px; align-items: center; }
.contact-icon { color: var(--accent); width: 14px; }

/* Spotify embed */
.spotify-wrap { margin: 8px 0; }
.spotify-wrap iframe { border-radius: 8px; border: 1px solid var(--border); }

/* Help table */
.help-row { display: flex; gap: 0; margin: 1px 0; }
.help-cmd  { color: var(--accent); min-width: 180px; flex-shrink: 0; }
.help-desc { color: var(--dim); }

/* Separator */
.separator { color: var(--border); user-select: none; }

/* Divider line */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .25s ease forwards; }

/* Interstellar: star shimmer on text */
body.theme-interstellar .out-success { text-shadow: 0 0 6px var(--accent); }
body.theme-interstellar .project-name:hover { text-shadow: 0 0 12px var(--project-color); }

/* Mario: pixel border */
body.theme-mario #terminal-window {
  border: 3px solid var(--border);
  border-radius: 4px;
  image-rendering: pixelated;
}
body.theme-mario #titlebar { border-bottom: 3px solid var(--border); }
body.theme-mario #vim-statusline { border-top: 3px solid var(--border); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --font-size: 12px; }
  #terminal-wrapper { padding: 8px; }
  .help-cmd { min-width: 130px; }
  .tech-grid { gap: 6px; }
}