/* QR Code theme swatch — based on ggprompts.com/styles/qr-code.html */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root[data-theme="qrcode"] {
  --bg: #0d0d0d;
  --surface: #1a1a1a;
  --surface-raised: #2a2a2a;
  --border: #4a4a4a;
  --text: #f5f5f5;
  --text-muted: #7a7a7a;
  --accent: #00e5ff;
  --accent-dim: #00e5ff26;
  --success: #00e676;
  --success-dim: #00e67626;
  --danger: #ff2d2d;
  --danger-dim: #ff2d2d26;
  --blocked: #ff00ff;
  --radius: 0px;
  --mono: 'IBM Plex Mono', var(--mono);
  --display: 'Space Mono', monospace;
  --body: 'IBM Plex Mono', monospace;
}

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

[data-theme="qrcode"] .sidebar { border-right: 1px solid var(--border); }
[data-theme="qrcode"] .brand {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme="qrcode"] .nav-link {
  font-family: var(--body);
  font-size: 12px;
}
[data-theme="qrcode"] .nav-link:hover,
[data-theme="qrcode"] .nav-link.active { color: var(--accent); }

[data-theme="qrcode"] .page-title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Finder-pattern corner marker, QR-position-marker style */
[data-theme="qrcode"] .card,
[data-theme="qrcode"] .stat,
[data-theme="qrcode"] .week-day-col {
  border: 1px solid var(--border);
  position: relative;
}
[data-theme="qrcode"] .card::before,
[data-theme="qrcode"] .stat::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 12px; height: 12px;
  border: 2px solid var(--text-muted);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px var(--text-muted);
}
[data-theme="qrcode"] .stat-value { font-family: var(--display); }

[data-theme="qrcode"] .btn {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12px;
  border-color: var(--border);
}
[data-theme="qrcode"] .btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="qrcode"] .btn-primary {
  background: var(--text);
  color: #0d0d0d;
  border-color: var(--text);
}
[data-theme="qrcode"] .btn-danger { color: var(--danger); }

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

[data-theme="qrcode"] th {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  border-bottom: 2px solid var(--border);
}
[data-theme="qrcode"] .num { font-family: var(--mono); }

[data-theme="qrcode"] .calendar-day { border: 1px solid var(--border); }
[data-theme="qrcode"] .calendar-day.is-today { border-color: var(--accent); }
[data-theme="qrcode"] .calendar-day.is-selected {
  background: var(--text);
  color: #0d0d0d;
}

[data-theme="qrcode"] .ticket-key {
  font-family: var(--display);
  color: var(--accent);
}