/* PhotoSwift: donker thema in de kleuren van de app (photoswift-app/src/theme.rs). */
:root {
  --ps-canvas: #0e0f11;
  --ps-panel: #191b1f;
  --ps-panel-alt: #202328;
  --ps-border: #2c2f35;
  --ps-text: #dcdfe4;
  --ps-text-weak: #8c929c;
  --ps-blue: #3a8cff;
  --ps-green: #2ec48c;
  --ps-red: #e85454;
  --ps-star: #f4c440;
  --ps-gradient: linear-gradient(135deg, var(--ps-blue), var(--ps-green));
  --ps-radius: 14px;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--ps-canvas);
  --bs-body-color: var(--ps-text);
  --bs-secondary-color: var(--ps-text-weak);
  --bs-border-color: var(--ps-border);
  --bs-link-color-rgb: 102, 166, 255;
  --bs-link-hover-color-rgb: 140, 190, 255;
  --bs-primary-rgb: 58, 140, 255;
  --bs-tertiary-bg: var(--ps-panel);
}

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--ps-canvas);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, .display-4, .display-5 { letter-spacing: -0.02em; font-weight: 700; }

.text-weak { color: var(--ps-text-weak) !important; }

.text-gradient {
  background: var(--ps-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Navigatie */
.ps-nav {
  background: rgba(14, 15, 17, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ps-border);
}
.ps-nav .navbar-brand { font-weight: 700; display: flex; align-items: center; gap: .55rem; }
.ps-nav .navbar-brand img { width: 30px; height: 30px; }
.ps-nav .nav-link { color: var(--ps-text-weak); }
.ps-nav .nav-link:hover, .ps-nav .nav-link.active { color: var(--ps-text); }

/* Knoppen */
.btn-ps {
  background: var(--ps-gradient);
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(58, 140, 255, .25);
}
.btn-ps:hover, .btn-ps:focus { color: #fff; filter: brightness(1.08); }
.btn-ps-outline {
  border: 1px solid var(--ps-border);
  color: var(--ps-text);
  padding: .7rem 1.4rem;
  border-radius: 10px;
  background: var(--ps-panel);
}
.btn-ps-outline:hover { border-color: var(--ps-text-weak); color: #fff; background: var(--ps-panel-alt); }

/* Hero */
.hero {
  position: relative;
  padding: 5rem 0 3rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 600px;
  background: radial-gradient(closest-side, rgba(58, 140, 255, .18), transparent),
              radial-gradient(closest-side at 70% 60%, rgba(46, 196, 140, .12), transparent);
  pointer-events: none;
}
.hero .lead { color: var(--ps-text-weak); font-size: 1.25rem; max-width: 40rem; }
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ps-green);
  margin-bottom: .75rem;
}

/* Secties en kaarten */
.section { padding: 4.5rem 0; }
.section-alt { background: #121316; border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); }

.ps-card {
  background: var(--ps-panel);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 1.6rem;
  height: 100%;
}
.ps-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.ps-card p { color: var(--ps-text-weak); margin-bottom: 0; }

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: rgba(58, 140, 255, .12);
  color: var(--ps-blue);
}
.feature-icon.green { background: rgba(46, 196, 140, .12); color: var(--ps-green); }
.feature-icon svg { width: 22px; height: 22px; }

.step-number {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ps-gradient); color: #fff; font-weight: 700;
  margin-bottom: 1rem;
}

.chip {
  display: inline-block;
  padding: .3rem .7rem;
  margin: 0 .35rem .5rem 0;
  border-radius: 999px;
  border: 1px solid var(--ps-border);
  background: var(--ps-panel);
  font-size: .85rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ps-text);
}

/* App-mockup op de homepage */
.app-window {
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  background: var(--ps-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);
  overflow: hidden;
}
.app-titlebar {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--ps-border);
  font-size: .78rem; color: var(--ps-text-weak);
}
.app-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3d44; }
.app-titlebar .title { margin-left: .6rem; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 170px; min-height: 300px; }
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 10px;
  background: var(--ps-canvas);
}
.app-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  background: var(--ps-panel-alt);
  outline: 2px solid transparent;
}
.app-thumb.selected { outline-color: var(--ps-blue); }
.app-thumb.rejected { opacity: .35; }
.app-thumb .stars {
  position: absolute; left: 4px; bottom: 3px;
  font-size: 9px; color: var(--ps-star); letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.app-thumb .label {
  position: absolute; right: 4px; top: 4px;
  width: 8px; height: 8px; border-radius: 2px;
}
.app-thumb .pick {
  position: absolute; left: 4px; top: 3px;
  font-size: 9px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.app-side {
  border-left: 1px solid var(--ps-border);
  padding: .8rem;
  font-size: .72rem;
  color: var(--ps-text-weak);
}
.app-side dt { font-weight: 400; color: var(--ps-text-weak); }
.app-side dd { color: var(--ps-text); margin-bottom: .45rem; }
.app-preview { aspect-ratio: 3 / 2; border-radius: 4px; margin-bottom: .7rem; }
.app-filmstrip {
  display: flex; gap: 4px; padding: 6px 10px;
  border-top: 1px solid var(--ps-border);
  background: var(--ps-panel);
}
.app-filmstrip span { flex: 1; height: 22px; border-radius: 2px; }

/* "Foto's" in de mockup: verlopen die op landschappen lijken */
.p1 { background: linear-gradient(180deg, #f6b06b 0%, #e2725b 45%, #3b2b3f 46%, #1c1a24 100%); }
.p2 { background: linear-gradient(180deg, #8ec5fc 0%, #c9e2f5 50%, #4d7a4f 51%, #2f4f33 100%); }
.p3 { background: radial-gradient(circle at 70% 30%, #ffe9a8 0 8%, transparent 9%), linear-gradient(180deg, #2b5876 0%, #4e4376 100%); }
.p4 { background: linear-gradient(160deg, #3c4a3e 0%, #6b8f71 40%, #a9c5a0 70%, #e0e8d8 100%); }
.p5 { background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }
.p6 { background: radial-gradient(ellipse at 50% 120%, #f9d29d 0 30%, transparent 31%), linear-gradient(180deg, #ffb88c 0%, #de6262 100%); }
.p7 { background: linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 55%, #d9c7a6 56%, #b69b72 100%); }
.p8 { background: linear-gradient(135deg, #434343 0%, #8a8a8a 50%, #2b2b2b 100%); }

/* Download */
.platform-card {
  background: var(--ps-panel);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 1.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
}
.platform-card.recommended { border-color: var(--ps-blue); box-shadow: 0 0 0 1px var(--ps-blue), 0 12px 40px rgba(58, 140, 255, .15); }
.platform-card .badge-recommended { display: none; }
.platform-card.recommended .badge-recommended { display: inline-block; }
.platform-card h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.platform-card .meta { font-size: .85rem; color: var(--ps-text-weak); }
.platform-card .btn { margin-top: auto; }
.checksum { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; word-break: break-all; color: var(--ps-text-weak); }

/* Release notes */
.release { border-bottom: 1px solid var(--ps-border); padding: 2rem 0; }
.release:last-child { border-bottom: 0; }
.release-notes { color: var(--ps-text); }
.release-notes h1, .release-notes h2, .release-notes h3 { font-size: 1.05rem; margin-top: 1.2rem; }
.release-notes ul { padding-left: 1.2rem; }
.badge-beta { background: rgba(244, 196, 64, .15); color: var(--ps-star); border: 1px solid rgba(244, 196, 64, .35); }

/* Sneltoetsen */
kbd {
  background: var(--ps-panel-alt);
  border: 1px solid var(--ps-border);
  border-bottom-width: 2px;
  color: var(--ps-text);
  border-radius: 6px;
  padding: .15rem .45rem;
  font-size: .85rem;
}
.shortcut-table td { padding: .7rem .5rem; border-color: var(--ps-border); background: transparent; }

/* FAQ */
.accordion {
  --bs-accordion-bg: var(--ps-panel);
  --bs-accordion-border-color: var(--ps-border);
  --bs-accordion-active-bg: var(--ps-panel-alt);
  --bs-accordion-active-color: var(--ps-text);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(58, 140, 255, .25);
}
.accordion-body { color: var(--ps-text-weak); }

/* Footer */
.ps-footer {
  border-top: 1px solid var(--ps-border);
  padding: 2.5rem 0;
  color: var(--ps-text-weak);
  font-size: .9rem;
}
.ps-footer a { color: var(--ps-text-weak); text-decoration: none; }
.ps-footer a:hover { color: var(--ps-text); }

/* Formulieren en tabellen (beheer) */
.form-control, .form-select {
  background-color: var(--ps-canvas);
  border-color: var(--ps-border);
  color: var(--ps-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--ps-canvas);
  color: var(--ps-text);
  border-color: var(--ps-blue);
  box-shadow: 0 0 0 .2rem rgba(58, 140, 255, .2);
}
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--ps-border); }

.admin-nav .nav-link { color: var(--ps-text-weak); }
.admin-nav .nav-link.active { color: var(--ps-text); background: var(--ps-panel-alt); }

@media (max-width: 767.98px) {
  .hero { padding-top: 3rem; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}