/* PluriKey Theme System - 7 Themes by SANDY
 * Shared across all extension pages (popup, vault, settings).
 * Theme is stored in chrome.storage.local under 'pkTheme'. */

:root {
  --ts-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Theme 1: Dark Copper (Default) === */
:root, [data-theme="dark-copper"] {
  --pk-bg: #08080f; --pk-surface: #101018; --pk-surface-2: #161622; --pk-surface-3: #1e1e2e;
  --pk-border: rgba(255,255,255,0.07); --pk-border-hover: rgba(255,255,255,0.14); --pk-border-active: rgba(255,255,255,0.18);
  --pk-text: #ececf4; --pk-text-dim: rgba(255,255,255,0.62); --pk-text-muted: rgba(255,255,255,0.38);
  --pk-accent: #d4915e; --pk-accent-bright: #e8a86e;
  --pk-accent-dim: rgba(212,145,94,0.14); --pk-accent-glow: rgba(212,145,94,0.25); --pk-accent-text: #08080f;
  --pk-secondary: #818cf8; --pk-secondary-dim: rgba(129,140,248,0.12);
  --pk-indigo: #6366f1; --pk-indigo-dim: rgba(99,102,241,0.12);
  --pk-teal: #2dd4bf; --pk-teal-dim: rgba(45,212,191,0.12);
  --pk-green: #22c55e; --pk-green-dim: rgba(34,197,94,0.12);
  --pk-yellow: #eab308; --pk-yellow-dim: rgba(234,179,8,0.12);
  --pk-red: #ef4444; --pk-red-dim: rgba(239,68,68,0.12);
}

/* === Theme 2: Dark Indigo === */
[data-theme="dark-indigo"] {
  --pk-bg: #07070e; --pk-surface: #0e0e1a; --pk-surface-2: #151525; --pk-surface-3: #1b1b30;
  --pk-border: rgba(130,140,255,0.09); --pk-border-hover: rgba(130,140,255,0.17); --pk-border-active: rgba(130,140,255,0.22);
  --pk-text: #e8e8f8; --pk-text-dim: rgba(228,228,244,0.65); --pk-text-muted: rgba(228,228,244,0.4);
  --pk-accent: #818cf8; --pk-accent-bright: #a5b4fc;
  --pk-accent-dim: rgba(129,140,248,0.14); --pk-accent-glow: rgba(129,140,248,0.2); --pk-accent-text: #07070e;
  --pk-secondary: #c084fc; --pk-secondary-dim: rgba(192,132,252,0.12);
  --pk-indigo: #6366f1; --pk-indigo-dim: rgba(99,102,241,0.12);
  --pk-teal: #2dd4bf; --pk-teal-dim: rgba(45,212,191,0.1);
  --pk-green: #34d399; --pk-green-dim: rgba(52,211,153,0.1);
  --pk-yellow: #fbbf24; --pk-yellow-dim: rgba(251,191,36,0.1);
  --pk-red: #f87171; --pk-red-dim: rgba(248,113,113,0.1);
}

/* === Theme 3: Dark Emerald === */
[data-theme="dark-emerald"] {
  --pk-bg: #060e0a; --pk-surface: #0c1610; --pk-surface-2: #121e17; --pk-surface-3: #19271e;
  --pk-border: rgba(100,220,160,0.09); --pk-border-hover: rgba(100,220,160,0.16); --pk-border-active: rgba(100,220,160,0.22);
  --pk-text: #e6f4ec; --pk-text-dim: rgba(226,240,232,0.65); --pk-text-muted: rgba(226,240,232,0.4);
  --pk-accent: #34d399; --pk-accent-bright: #6ee7b7;
  --pk-accent-dim: rgba(52,211,153,0.14); --pk-accent-glow: rgba(52,211,153,0.2); --pk-accent-text: #060e0a;
  --pk-secondary: #2dd4bf; --pk-secondary-dim: rgba(45,212,191,0.12);
  --pk-indigo: #22d3ee; --pk-indigo-dim: rgba(34,211,238,0.1);
  --pk-teal: #22d3ee; --pk-teal-dim: rgba(34,211,238,0.1);
  --pk-green: #4ade80; --pk-green-dim: rgba(74,222,128,0.1);
  --pk-yellow: #fbbf24; --pk-yellow-dim: rgba(251,191,36,0.1);
  --pk-red: #fb7185; --pk-red-dim: rgba(251,113,133,0.1);
}

/* === Theme 4: Midnight Rose === */
[data-theme="midnight-rose"] {
  --pk-bg: #0c0810; --pk-surface: #140e1a; --pk-surface-2: #1c1424; --pk-surface-3: #241c2e;
  --pk-border: rgba(220,140,180,0.09); --pk-border-hover: rgba(220,140,180,0.17); --pk-border-active: rgba(220,140,180,0.22);
  --pk-text: #f4ecf2; --pk-text-dim: rgba(240,232,238,0.65); --pk-text-muted: rgba(240,232,238,0.4);
  --pk-accent: #f472b6; --pk-accent-bright: #f9a8d4;
  --pk-accent-dim: rgba(244,114,182,0.14); --pk-accent-glow: rgba(244,114,182,0.2); --pk-accent-text: #0c0810;
  --pk-secondary: #c084fc; --pk-secondary-dim: rgba(192,132,252,0.12);
  --pk-indigo: #a78bfa; --pk-indigo-dim: rgba(167,139,250,0.1);
  --pk-teal: #2dd4bf; --pk-teal-dim: rgba(45,212,191,0.1);
  --pk-green: #4ade80; --pk-green-dim: rgba(74,222,128,0.1);
  --pk-yellow: #fbbf24; --pk-yellow-dim: rgba(251,191,36,0.1);
  --pk-red: #fb7185; --pk-red-dim: rgba(251,113,133,0.1);
}

/* === Theme 5: Light Clean === */
[data-theme="light-clean"] {
  --pk-bg: #f4f4f8; --pk-surface: #ffffff; --pk-surface-2: #ededf3; --pk-surface-3: #e2e2ec;
  --pk-border: rgba(0,0,0,0.10); --pk-border-hover: rgba(0,0,0,0.20); --pk-border-active: rgba(0,0,0,0.28);
  --pk-text: #1c1c2e; --pk-text-dim: rgba(28,28,46,0.58); --pk-text-muted: rgba(28,28,46,0.32);
  --pk-accent: #b87333; --pk-accent-bright: #d4915e;
  --pk-accent-dim: rgba(184,115,51,0.1); --pk-accent-glow: rgba(184,115,51,0.15); --pk-accent-text: #ffffff;
  --pk-secondary: #4f46e5; --pk-secondary-dim: rgba(79,70,229,0.08);
  --pk-indigo: #4f46e5; --pk-indigo-dim: rgba(79,70,229,0.08);
  --pk-teal: #0d9488; --pk-teal-dim: rgba(13,148,136,0.07);
  --pk-green: #16a34a; --pk-green-dim: rgba(22,163,74,0.07);
  --pk-yellow: #ca8a04; --pk-yellow-dim: rgba(202,138,4,0.07);
  --pk-red: #dc2626; --pk-red-dim: rgba(220,38,38,0.07);
}

/* === Theme 6: Light Arctic === */
[data-theme="light-arctic"] {
  --pk-bg: #f0f4f8; --pk-surface: #f8fafc; --pk-surface-2: #e8eef4; --pk-surface-3: #dce4ee;
  --pk-border: rgba(30,60,110,0.12); --pk-border-hover: rgba(30,60,110,0.22); --pk-border-active: rgba(30,60,110,0.30);
  --pk-text: #0f172a; --pk-text-dim: rgba(15,23,42,0.55); --pk-text-muted: rgba(15,23,42,0.32);
  --pk-accent: #3b82f6; --pk-accent-bright: #60a5fa;
  --pk-accent-dim: rgba(59,130,246,0.1); --pk-accent-glow: rgba(59,130,246,0.15); --pk-accent-text: #ffffff;
  --pk-secondary: #6366f1; --pk-secondary-dim: rgba(99,102,241,0.08);
  --pk-indigo: #6366f1; --pk-indigo-dim: rgba(99,102,241,0.08);
  --pk-teal: #0891b2; --pk-teal-dim: rgba(8,145,178,0.07);
  --pk-green: #059669; --pk-green-dim: rgba(5,150,105,0.07);
  --pk-yellow: #d97706; --pk-yellow-dim: rgba(217,119,6,0.07);
  --pk-red: #dc2626; --pk-red-dim: rgba(220,38,38,0.07);
}

/* === Theme 7: Light Sand === */
[data-theme="light-sand"] {
  --pk-bg: #f7f3ee; --pk-surface: #fdfbf7; --pk-surface-2: #f0ebe3; --pk-surface-3: #e6dfd5;
  --pk-border: rgba(120,90,50,0.14); --pk-border-hover: rgba(120,90,50,0.25); --pk-border-active: rgba(120,90,50,0.32);
  --pk-text: #2c2418; --pk-text-dim: rgba(44,36,24,0.58); --pk-text-muted: rgba(44,36,24,0.32);
  --pk-accent: #a16207; --pk-accent-bright: #ca8a04;
  --pk-accent-dim: rgba(161,98,7,0.1); --pk-accent-glow: rgba(161,98,7,0.15); --pk-accent-text: #ffffff;
  --pk-secondary: #92400e; --pk-secondary-dim: rgba(146,64,14,0.08);
  --pk-indigo: #92400e; --pk-indigo-dim: rgba(146,64,14,0.08);
  --pk-teal: #0d9488; --pk-teal-dim: rgba(13,148,136,0.07);
  --pk-green: #15803d; --pk-green-dim: rgba(21,128,61,0.07);
  --pk-yellow: #b45309; --pk-yellow-dim: rgba(180,83,9,0.07);
  --pk-red: #b91c1c; --pk-red-dim: rgba(185,28,28,0.07);
}

/* ============================================================
   THEME SHUTTLE UI COMPONENT
   ============================================================ */

.theme-shuttle {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.shuttle-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--ts-transition);
  user-select: none;
}
.shuttle-trigger:hover {
  border-color: var(--pk-border-hover);
  background: var(--pk-surface-2);
}
.theme-shuttle.open .shuttle-trigger {
  border-color: var(--pk-accent-dim);
  border-radius: 10px 10px 0 0;
}

.shuttle-swatches {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.shuttle-swatches .sw {
  width: 14px;
  height: 22px;
  border-radius: 3px;
  transition: background 200ms ease;
}

.shuttle-label { flex: 1; }
.shuttle-label .name {
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 200ms ease;
}
.shuttle-label .desc {
  font-size: 0.62rem;
  color: var(--pk-text-muted);
  margin-top: 0.1rem;
}

.shuttle-chevron {
  font-size: 0.55rem;
  color: var(--pk-text-muted);
  transition: transform var(--ts-transition);
}
.theme-shuttle.open .shuttle-chevron {
  transform: rotate(180deg);
}

.shuttle-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border-hover);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 250ms ease, opacity 200ms ease;
  z-index: 100;
}
.theme-shuttle.open .shuttle-panel {
  max-height: 420px;
  opacity: 1;
  overflow-y: auto;
}

.shuttle-group-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pk-text-muted);
  padding: 0.5rem 0.85rem 0.25rem;
}
.shuttle-group-label + .shuttle-group-label {
  border-top: 1px solid var(--pk-border);
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}

.shuttle-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background var(--ts-transition);
}
.shuttle-option:hover {
  background: var(--pk-surface-2);
}
.shuttle-option.active {
  background: var(--pk-accent-dim);
}

.shuttle-mini {
  width: 42px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--pk-border);
  display: flex;
  flex-direction: column;
}
.shuttle-mini .top {
  height: 8px;
  border-bottom: 1px solid rgba(128,128,128,0.1);
}
.shuttle-mini .mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 2px 3px;
}
.shuttle-mini .mid .line {
  height: 2px;
  border-radius: 1px;
}
.shuttle-mini .btn-mini {
  height: 4px;
  width: 16px;
  border-radius: 1px;
  margin-top: 1px;
}

.shuttle-option-info { flex: 1; min-width: 0; }
.shuttle-option-name {
  font-size: 0.75rem;
  font-weight: 500;
}
.shuttle-option-desc {
  font-size: 0.58rem;
  color: var(--pk-text-muted);
}
.shuttle-option .check {
  color: var(--pk-accent);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity var(--ts-transition);
}
.shuttle-option.active .check { opacity: 1; }