/* Skills Cabinet — Retro Y2K / Windows 98 Theme */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600;700&display=swap');

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

:root {
  --bg: #E8C890;
  --window-bg: #FFF5EB;
  --title-bar: linear-gradient(180deg, #F28A3C 0%, #E05A2B 100%);
  --title-text: #fff;
  --border-dark: #5C3A1E;
  --border-mid: #A0714A;
  --border-light: #FFDDB8;
  --btn-face: #F5E6D0;
  --btn-highlight: #FFF5EB;
  --btn-shadow: #8B6340;
  --accent-purple: #C8A2C8;
  --accent-orange: #F28A3C;
  --text: #3D2B1F;
  --text-light: #7A5C42;
  --link: #C73E1D;
  --link-hover: #E05A2B;
  --input-bg: #FFF9F2;
  --tag-bg: #EED5B7;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* === Decorative sparkles === */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, var(--border-mid) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 8%, var(--border-mid) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 92%, var(--border-mid) 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 78%, var(--border-mid) 50%, transparent 50%),
    radial-gradient(1px 1px at 5% 65%, var(--border-mid) 50%, transparent 50%);
  z-index: 0;
}

/* === Window Container === */
.desktop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
}

.window {
  background: var(--window-bg);
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow:
    1px 1px 0 var(--border-dark),
    3px 3px 0 rgba(92, 58, 30, 0.2);
  overflow: hidden;
}

/* === Title Bar === */
.title-bar {
  background: var(--title-bar);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  user-select: none;
}

.title-text {
  color: var(--title-text);
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.title-buttons {
  display: flex;
  gap: 3px;
}

.tb-btn {
  width: 18px;
  height: 18px;
  background: var(--btn-face);
  border: 1.5px solid var(--border-dark);
  border-radius: 2px;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--border-dark);
  padding: 0;
}
.tb-btn:hover {
  background: #FFE0C0;
}
.tb-btn.close {
  background: #E05A2B;
  color: white;
  border-color: #A03010;
}
.tb-btn.close:hover {
  background: #C73E1D;
}

/* === Window Body === */
.window-body {
  padding: 16px;
}

/* === Buttons === */
button, .btn, input[type="submit"] {
  font-family: 'VT323', monospace;
  font-size: 19px;
  background: var(--btn-face);
  color: var(--text);
  border: 2px outset var(--border-light);
  border-color: var(--border-light) var(--btn-shadow) var(--btn-shadow) var(--border-light);
  padding: 4px 20px;
  cursor: pointer;
  border-radius: 1px;
  letter-spacing: 0.3px;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: #FFE8D0;
}
button:active, .btn:active, input[type="submit"]:active {
  border-style: inset;
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
}

/* === Inputs === */
input[type="text"],
input[type="password"],
input[type="search"],
textarea {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text);
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  padding: 6px 10px;
  border-radius: 1px;
  outline: none;
  width: 100%;
}
input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 1px var(--accent-orange);
}

/* === Search bar === */
.search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search-bar input {
  flex: 1;
}

/* === Nav header inside window === */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px groove var(--border-light);
}

.nav-bar .nav-links {
  display: flex;
  gap: 12px;
  font-family: 'VT323', monospace;
  font-size: 20px;
}

/* === Table (File Explorer style) === */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

thead {
  background: var(--tag-bg);
}

th {
  font-family: 'VT323', monospace;
  font-size: 18px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border-mid);
  border-bottom: 2px solid var(--border-dark);
  color: var(--text);
  letter-spacing: 0.3px;
}

td {
  padding: 10px 12px;
  border: 1px solid var(--border-mid);
  vertical-align: top;
}

tr:hover td {
  background: #FFF0E0;
}

/* === Tags === */
.tag {
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 16px;
  background: var(--accent-purple);
  color: #4A2B4A;
  padding: 1px 8px;
  border: 1px solid #A07BA0;
  border-radius: 2px;
  margin: 1px 2px;
}

/* === Skill Detail === */
.skill-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.skill-meta dt {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--text-light);
}
.skill-meta dd {
  margin: 0;
}

.skill-body-wrap {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-family: 'VT323', monospace;
  font-size: 13px;
  padding: 2px 10px;
  background: var(--tag-bg);
  color: var(--text);
  border: 1.5px outset var(--border-light);
  border-color: var(--border-light) var(--btn-shadow) var(--btn-shadow) var(--border-light);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.copy-btn:hover {
  opacity: 1;
  background: #FFE8D0;
}

.skill-body {
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  padding: 16px;
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(100vh - 340px);
  min-height: 120px;
  overflow: auto;
  line-height: 1.6;
}

/* === Skill Actions (bottom bar) === */
.action-bar {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px groove var(--border-light);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* === Divider === */
.divider {
  border: none;
  border-top: 2px groove var(--border-light);
  margin: 16px 0;
}

/* === Status Bar === */
.status-bar {
  background: var(--btn-face);
  border-top: 2px groove var(--border-light);
  padding: 4px 12px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
}

/* === Login === */
.login-form {
  max-width: 320px;
  margin: 0 auto;
}
.login-form label {
  font-family: 'VT323', monospace;
  font-size: 19px;
  display: block;
  margin-bottom: 4px;
  color: var(--text-light);
}
.login-form input {
  margin-bottom: 16px;
}
.login-form button {
  display: block;
  margin: 0 auto;
  min-width: 120px;
}

/* === Empty state === */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-family: 'VT323', monospace;
  font-size: 24px;
}

/* === Smiley decoration === */
.smiley {
  font-size: 28px;
  display: inline-block;
}

/* === History SHA === */
.sha {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: var(--tag-bg);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border-mid);
}

/* === Clickable history rows === */
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover td {
  background: #FFE0C0;
}

/* === Version badge === */
.version-badge {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: var(--tag-bg);
  color: var(--text);
  padding: 3px 10px;
  border: 1.5px solid var(--border-mid);
  border-radius: 2px;
  letter-spacing: 0.5px;
}

/* === Diff panel === */
.diff-panel {
  margin-top: 16px;
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  border-radius: 2px;
}

.diff-view {
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow: auto;
  line-height: 1;
}

.diff-view > div {
  padding: 2px 12px;
  min-height: 1.5em;
  line-height: 1.5;
}

.diff-remove {
  background: rgba(200, 40, 30, 0.12);
  color: #8B2020;
}

.diff-add {
  background: rgba(40, 140, 50, 0.12);
  color: #1B5E20;
}

.diff-header {
  color: var(--text-light);
  font-weight: 600;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-mid);
}

.diff-context {
  color: var(--text-light);
}

/* === Restore / Add buttons (orange accent) === */
.btn-restore,
.btn-add {
  background: linear-gradient(180deg, #F5A050 0%, #E07830 100%);
  color: #fff;
  border-color: #FFC080 #A04010 #A04010 #FFC080;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  font-weight: 600;
}
.btn-restore:hover,
.btn-add:hover {
  background: linear-gradient(180deg, #FFA858 0%, #E88838 100%);
  color: #fff;
}
.btn-restore:active,
.btn-add:active {
  border-color: #A04010 #FFC080 #FFC080 #A04010;
}
a.btn-add {
  color: #fff;
  text-decoration: none;
}
a.btn-add:hover {
  color: #fff;
  text-decoration: none;
}

/* === Delete button (danger red) === */
.btn-delete {
  background: linear-gradient(180deg, #D05050 0%, #B03030 100%);
  color: #fff;
  border-color: #E08080 #801818 #801818 #E08080;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  font-weight: 600;
}
.btn-delete:hover {
  background: linear-gradient(180deg, #E05858 0%, #C03838 100%);
  color: #fff;
}
.btn-delete:active {
  border-color: #801818 #E08080 #E08080 #801818;
}

/* === List header (title + new skill button) === */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* === Version toggle tabs === */
.version-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border-dark);
}

/* === Form tabs (Windows 98 style) === */
.form-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border-dark);
}

.tab-btn {
  font-family: 'VT323', monospace;
  font-size: 19px;
  padding: 6px 24px;
  background: var(--btn-face);
  color: var(--text);
  border: 2px solid var(--border-dark);
  border-bottom: 2px solid var(--border-dark);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
  margin-right: 2px;
  z-index: 1;
}

.tab-btn.active {
  background: var(--window-bg);
  border-bottom-color: var(--window-bg);
  font-weight: 700;
}

.tab-btn:hover:not(.active) {
  background: #FFE8D0;
}

/* === Form fields === */
.form-field {
  margin: 16px 0;
}

.form-field label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 19px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.form-field textarea {
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.form-field input[type="file"] {
  font-family: 'VT323', monospace;
  font-size: 19px;
  padding: 8px;
  background: var(--input-bg);
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  width: 100%;
  cursor: pointer;
}

/* === Form actions === */
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 2px groove var(--border-light);
  margin-top: 16px;
}

/* === Rendered Markdown === */
.rendered-body {
  background: var(--input-bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  padding: 20px 24px;
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  border-radius: 2px;
  max-height: calc(100vh - 340px);
  min-height: 120px;
  overflow: auto;
}

.rendered-body h1,
.rendered-body h2,
.rendered-body h3,
.rendered-body h4 {
  font-family: 'VT323', monospace;
  color: var(--link);
  margin: 20px 0 8px;
  line-height: 1.3;
}
.rendered-body h1 { font-size: 32px; border-bottom: 2px groove var(--border-light); padding-bottom: 8px; }
.rendered-body h2 { font-size: 26px; border-bottom: 2px groove var(--border-light); padding-bottom: 6px; }
.rendered-body h3 { font-size: 21px; }
.rendered-body h4 { font-size: 18px; }
.rendered-body h1:first-child,
.rendered-body h2:first-child { margin-top: 0; }

.rendered-body p {
  margin: 10px 0;
}

.rendered-body strong {
  color: var(--border-dark);
  font-weight: 700;
}

.rendered-body em {
  color: #6B4A6B;
}

.rendered-body code {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  background: var(--tag-bg);
  color: var(--border-dark);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border-mid);
}

.rendered-body pre {
  background: var(--btn-face);
  padding: 14px 18px;
  border-radius: 2px;
  border: 2px inset var(--border-light);
  border-color: var(--btn-shadow) var(--border-light) var(--border-light) var(--btn-shadow);
  overflow-x: auto;
  margin: 14px 0;
  line-height: 1.5;
}

.rendered-body pre code {
  background: none;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  border: none;
}

.rendered-body ul,
.rendered-body ol {
  padding-left: 24px;
  margin: 10px 0;
}

.rendered-body li {
  margin: 4px 0;
}

.rendered-body li::marker {
  color: var(--accent-orange);
}

.rendered-body blockquote {
  border-left: 3px solid var(--accent-orange);
  margin: 14px 0;
  padding: 6px 16px;
  color: var(--text-light);
  background: rgba(242, 138, 60, 0.08);
}

.rendered-body a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(199, 62, 29, 0.3);
}
.rendered-body a:hover {
  color: var(--link-hover);
}

.rendered-body hr {
  border: none;
  border-top: 2px groove var(--border-light);
  margin: 16px 0;
}

.rendered-body table {
  border-collapse: collapse;
  margin: 14px 0;
  width: 100%;
}

.rendered-body th,
.rendered-body td {
  border: 1px solid var(--border-mid);
  padding: 6px 12px;
  text-align: left;
}

.rendered-body th {
  background: var(--tag-bg);
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 18px;
  border-bottom: 2px solid var(--border-dark);
}

.rendered-body tr:hover td {
  background: #FFF0E0;
}

/* === Responsive === */
@media (max-width: 600px) {
  body {
    padding: 12px;
  }
  .window-body {
    padding: 10px;
  }
  table {
    font-size: 12px;
  }
  th, td {
    padding: 4px 6px;
  }
  .nav-bar {
    flex-direction: column;
    gap: 8px;
  }
}