/*
 * Terminal Theme
 * Born-digital. CRT phosphor. The hum of the machine.
 * Inspired by green-screen terminals, REZ, and the beauty of text on glass.
 * Content-first -- the digital medium is the accent, not the show.
 */

/* ---- Color System ---- */
/* Light mode: bright terminal on a pale steel background */
:root {
  --bg-color: #f0f2f0;
  --text-color: #1e2d1e;
  --sidebar-bg: #e4e8e4;
  --link-color: #1a7a2e;
  --border-color: #c4cec4;
  --accent-color: #1a7a2e;

  --terminal-accent: #1a7a2e;
  --terminal-glow: rgba(26, 122, 46, 0.08);
  --terminal-dim: rgba(26, 122, 46, 0.03);
  --terminal-amber: #a66800;
  --terminal-red: #c62828;

  color-scheme: light dark;
}

/* Dark mode: phosphor green on black */
.theme-dark {
  --bg-color: #0a0e0a;
  --text-color: #b0bfb0;
  --sidebar-bg: #0d110d;
  --link-color: #4ae54a;
  --border-color: #1e2a1e;
  --accent-color: #4ae54a;

  --terminal-accent: #4ae54a;
  --terminal-glow: rgba(74, 229, 74, 0.08);
  --terminal-dim: rgba(74, 229, 74, 0.03);
  --terminal-amber: #ffab00;
  --terminal-red: #ff5252;
}

/* ---- Typography ---- */

body {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

/* Subtle scanline overlay -- only in dark mode, desktop only.
   The fixed full-viewport pseudo-element with a repeating gradient
   forces GPU compositing on every scroll frame. On mobile this causes
   severe jank and memory pressure, so we limit it to large screens
   and promote it to its own layer with will-change to avoid repainting
   the content beneath it. */
@media (min-width: 1025px) {
  .theme-dark body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(to bottom,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px);
    will-change: transform;
  }
}

/* ---- Sidebar ---- */

.sidebar {
  background: var(--sidebar-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid var(--border-color);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}

.theme-dark .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--border-color);
}

.sidebar-section h3 {
  font-family: inherit;
  color: var(--terminal-accent);
  opacity: 0.6;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}

.theme-dark .sidebar-section h3 {
  color: var(--terminal-accent);
}

.sidebar-section li a {
  font-family: inherit;
  color: var(--text-color);
  border-radius: 2px;
  font-size: 0.8rem;
}

.theme-dark .sidebar-section li a {
  color: var(--text-color);
}

.sidebar-section li a:hover {
  background: var(--terminal-glow);
  color: var(--terminal-accent);
  transform: none;
}

.theme-dark .sidebar-section li a:hover {
  background: var(--terminal-glow);
  color: var(--terminal-accent);
}

.sidebar-section li.active a {
  background: var(--terminal-glow);
  color: var(--terminal-accent);
  box-shadow: inset 2px 0 0 var(--terminal-accent);
  border: none;
  border-radius: 0;
  font-weight: 500;
}

.theme-dark .sidebar-section li.active a {
  background: var(--terminal-glow);
  color: var(--terminal-accent);
}

.sidebar-footer {
  border-top-color: var(--border-color);
}

.sidebar-footer a {
  font-family: inherit;
  color: var(--text-color);
  opacity: 0.5;
  font-size: 0.8rem;
}

.theme-dark .sidebar-footer a {
  color: var(--text-color);
}

.sidebar-footer a:hover {
  color: var(--terminal-accent);
  background: var(--terminal-dim);
  opacity: 1;
}

/* Search */
.sidebar-search input {
  background: var(--terminal-dim);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--text-color);
  font-family: inherit;
}

.theme-dark .sidebar-search input {
  background: var(--terminal-dim);
  color: var(--text-color);
  border-color: var(--border-color);
}

.sidebar-search input:focus {
  border-color: var(--terminal-accent);
  box-shadow: 0 0 8px rgba(74, 229, 74, 0.15);
}

.sidebar-search input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.theme-dark .sidebar-search input::placeholder {
  color: rgba(176, 191, 176, 0.3);
}

/* ---- Toggle ---- */
.sidebar-toggle {
  opacity: 0.6;
}

.theme-dark .sidebar-toggle {
  background: none;
}

.sidebar-toggle:hover {
  opacity: 1;
}

/* ---- Main Content ---- */

.main-content {
  background-color: var(--bg-color);
}

/* ---- Feed Items ---- */

.feed-item {
  border-radius: 0;
  padding: 1.25rem 0.5rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  
}



.feed-item.selected {
  background-color: var(--terminal-dim);
  box-shadow: inset 3px 0 0 var(--terminal-accent);
  border-radius: 0;
}

.theme-dark .feed-item.selected {
  background-color: var(--terminal-dim);
}

.item-title {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--terminal-accent);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.item-title:hover {
  text-decoration: none;
}

.theme-dark .item-title:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(74, 229, 74, 0.3);
}

.dateline {
  color: var(--text-color);
  opacity: 0.35;
  font-family: inherit;
  font-size: 0.75em;
  letter-spacing: 0.04em;
}

.dateline a {
  color: inherit;
}

.dateline a:hover {
  color: var(--terminal-accent);
  opacity: 1;
}

.item-description {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-color);
}

.item-description a {
  color: var(--terminal-accent);
}

.theme-dark .item-description a:hover {
  text-shadow: 0 0 8px rgba(74, 229, 74, 0.2);
}

.item-description pre {
  background: var(--terminal-dim);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-family: inherit;
}

/* Star */
.star-btn.is-starred {
  color: var(--terminal-amber);
}

.star-btn.is-unstarred {
  color: var(--text-color);
  opacity: 0.15;
}

/* Scrape */
.scrape-btn {
  font-family: inherit;
  color: var(--terminal-accent);
  border-color: var(--border-color);
  background: transparent;
  border-radius: 2px;
}

.scrape-btn:hover {
  border-color: var(--terminal-accent);
}

.theme-dark .scrape-btn:hover {
  box-shadow: 0 0 6px rgba(74, 229, 74, 0.15);
}

/* ---- Buttons ---- */

button,
.button {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  border-radius: 2px;
  border-color: var(--border-color);
  background: transparent;
  color: var(--text-color);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

button:hover,
.button:hover {
  border-color: var(--terminal-accent);
  color: var(--terminal-accent);
  background: var(--terminal-dim);
}

.theme-dark button,
.theme-dark .button {
  background: transparent;
  color: var(--text-color);
  border-color: var(--border-color);
}

.theme-dark button:hover,
.theme-dark .button:hover {
  border-color: var(--terminal-accent);
  color: var(--terminal-accent);
  background: var(--terminal-dim);
}

button.active,
.theme-dark button.active {
  background: var(--terminal-accent);
  color: var(--bg-color);
  border-color: var(--terminal-accent);
}

/* ---- Settings ---- */

.settings-view {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}

.settings-view h2 {
  color: var(--terminal-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}

.settings-section h3 {
  color: var(--text-color);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.settings-group label,
.data-group label {
  color: var(--text-color);
  font-family: inherit;
  letter-spacing: 0.12em;
}

.theme-dark .settings-view,
.theme-dark .settings-view h2,
.theme-dark .settings-view h3,
.theme-dark .settings-group label,
.theme-dark .data-group label {
  color: var(--text-color) !important;
}

.theme-dark .settings-view h2 {
  color: var(--terminal-accent) !important;
}

/* Inputs */
input[type="text"],
input[type="url"],
input[type="search"],
select {
  font-family: inherit;
  background: var(--terminal-dim);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--text-color);
}

input:focus,
select:focus {
  border-color: var(--terminal-accent);
  box-shadow: 0 0 8px rgba(74, 229, 74, 0.15);
}

/* Feed list in settings */
.manage-feed-list {
  border-top-color: var(--border-color);
}

.manage-feed-item {
  border-bottom-color: var(--border-color);
}

.feed-title {
  font-family: inherit;
  color: var(--text-color);
}

.feed-url {
  font-family: inherit;
  color: var(--text-color);
  opacity: 0.4;
}

/* Delete button */
.delete-feed-btn {
  color: var(--terminal-red) !important;
  border-color: rgba(198, 40, 40, 0.3) !important;
}

.delete-feed-btn:hover {
  border-color: var(--terminal-red) !important;
  background: rgba(198, 40, 40, 0.06) !important;
}

.theme-dark .delete-feed-btn:hover {
  box-shadow: 0 0 6px rgba(255, 82, 82, 0.2) !important;
  background: rgba(255, 82, 82, 0.08) !important;
}

/* ---- Scrollbars ---- */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 229, 74, 0.15);
  border-radius: 0;
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(74, 229, 74, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 229, 74, 0.3);
}

/* ---- Backdrop ---- */
.sidebar-backdrop {
  background: rgba(240, 242, 240, 0.6);
  backdrop-filter: blur(2px);
}

.theme-dark .sidebar-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ---- Loading/Empty States ---- */
.loading,
.empty {
  color: var(--text-color);
  opacity: 0.4;
  font-family: inherit;
}