/* Glitch Art theme swatch — based on ggprompts.com/styles/glitch-art.html */

@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Space+Mono:wght@400;700&family=Share+Tech+Mono&display=swap');

:root[data-theme="glitch"] {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-raised: #1a1a1a;
  --border: #2a2a2a;
  --text: #e8e8e8;
  --text-muted: #888888;
  --accent: #00e5ff;
  --accent-dim: #00e5ff26;
  --success: #00ff41;
  --success-dim: #00ff4126;
  --danger: #ff0040;
  --danger-dim: #ff004026;
  --blocked: #ff00ff;
  --radius: 0px;
  --mono: 'Share Tech Mono', var(--mono);
  --display: 'Bungee Shade', cursive;
  --body: 'Space Mono', monospace;
}

[data-theme="glitch"] .card,
[data-theme="glitch"] .stat,
[data-theme="glitch"] .day-entry-card,
[data-theme="glitch"] .week-day-col,
[data-theme="glitch"] dialog,
[data-theme="glitch"] .btn,
[data-theme="glitch"] input,
[data-theme="glitch"] select,
[data-theme="glitch"] textarea {
  border-radius: 0 !important;
}

[data-theme="glitch"] .sidebar { border-right: 1px solid var(--border); }
[data-theme="glitch"] .brand {
  font-family: var(--display);
  font-size: 18px;
  color: var(--text);
  text-shadow: -2px 0 var(--danger), 2px 0 var(--accent);
}
[data-theme="glitch"] .nav-link {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}
[data-theme="glitch"] .nav-link:hover,
[data-theme="glitch"] .nav-link.active {
  color: var(--text);
  text-shadow: -1px 0 var(--danger), 1px 0 var(--accent);
}

[data-theme="glitch"] .page-title {
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: -2px 0 var(--danger), 2px 0 var(--accent);
}
[data-theme="glitch"] .page-subtitle {
  font-family: var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* RGB data-strip across the top of every panel */
[data-theme="glitch"] .card,
[data-theme="glitch"] .stat,
[data-theme="glitch"] .day-entry-card,
[data-theme="glitch"] .week-day-col {
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
[data-theme="glitch"] .card::before,
[data-theme="glitch"] .stat::before,
[data-theme="glitch"] .week-day-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--danger) 0 8px, var(--success) 8px 16px, var(--accent) 16px 24px, var(--blocked) 24px 32px);
}
[data-theme="glitch"] .stat-value {
  font-family: var(--body);
  font-weight: 700;
  color: var(--accent);
}

[data-theme="glitch"] .btn {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  background: var(--surface-raised);
  border-color: var(--border);
  transition: box-shadow 0.1s;
}
[data-theme="glitch"] .btn:hover {
  border-color: var(--text);
  box-shadow: -2px 0 0 0 var(--danger), 2px 0 0 0 var(--accent);
}
[data-theme="glitch"] .btn-primary {
  background: var(--text);
  color: #000;
  border-color: var(--text);
}
[data-theme="glitch"] .btn-danger { color: var(--danger); }

[data-theme="glitch"] input,
[data-theme="glitch"] select,
[data-theme="glitch"] textarea {
  background: #000;
  border-color: var(--border);
  font-family: var(--mono);
}
[data-theme="glitch"] .btn:focus-visible,
[data-theme="glitch"] a:focus-visible,
[data-theme="glitch"] input:focus-visible,
[data-theme="glitch"] select:focus-visible,
[data-theme="glitch"] textarea:focus-visible {
  outline: none;
  border-color: var(--text);
  box-shadow: -2px 0 0 0 var(--danger), 2px 0 0 0 var(--accent);
}

[data-theme="glitch"] th {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

[data-theme="glitch"] .calendar-day { border: 1px solid var(--border); }
[data-theme="glitch"] .calendar-day.is-today { border-color: var(--accent); }
[data-theme="glitch"] .calendar-day.is-selected {
  background: var(--text);
  color: #000;
  box-shadow: -2px 0 0 0 var(--danger), 2px 0 0 0 var(--accent);
}

[data-theme="glitch"] .ticket-key {
  font-family: var(--mono);
  color: var(--accent);
  text-shadow: -1px 0 var(--danger);
}