html {
  font-size: 14px;
  overflow-y: scroll;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* === Theme tokens === */

:root {
  color-scheme: light;

  --accent: #007acc;
  --accent-hover: #0791e6;

  --bg: #f8f9fa;
  --text: #212529;
  --link: #0d6efd;
  --link-hover: #0a58ca;

  --navbar-bg: #ffffff;
  --navbar-border: #dee2e6;
  --title: #111827;
  --nav-link: #212529;
  --nav-link-hover: #111827;
  --nav-link-active: #111827;

  --main-bg: #f8f9fa;

  --panel-bg: #ffffff;
  --panel-border: #dee2e6;
  --panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);

  --footer-bg: #ffffff;
  --footer-border: #dee2e6;
  --footer-text: #6c757d;

  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --card-text: var(--text);
  --card-title: var(--text);
  --card-subtitle: #6c757d;

  --badge-bg: #e9ecef;
  --badge-text: #212529;

  --outline-border: #212529;
  --outline-text: #212529;
  --outline-hover-bg: #212529;
  --outline-hover-text: #ffffff;

  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-text: #212529;
  --input-focus-border: var(--accent);
  --input-focus-shadow: 0 0 0 0.2rem rgba(0, 122, 204, 0.25);

  --alert-success-bg: #d1e7dd;
  --alert-success-border: #badbcc;
  --alert-success-text: #0f5132;

  --alert-danger-bg: #f8d7da;
  --alert-danger-border: #f5c2c7;
  --alert-danger-text: #842029;

  --page-surface-bg: rgba(255, 255, 255, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #1e1e1e;
    --text: #d4d4d4;
    --link: #9cdcfe;
    --link-hover: #4fc1ff;

    --navbar-bg: #252526;
    --navbar-border: #3f3f46;
    --title: #ffffff;
    --nav-link: #d4d4d4;
    --nav-link-hover: #ffffff;
    --nav-link-active: #ffffff;

    --main-bg: #1e1e1e;

    --panel-bg: #252526;
    --panel-border: #3f3f46;
    --panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    --footer-bg: #252526;
    --footer-border: #3f3f46;
    --footer-text: #d4d4d4;

    --card-bg: #252526;
    --card-border: #3f3f46;
    --card-text: #d4d4d4;
    --card-title: #ffffff;
    --card-subtitle: #9cdcfe;

    --badge-bg: #3f3f46;
    --badge-text: #d4d4d4;

    --outline-border: #3f3f46;
    --outline-text: #d4d4d4;
    --outline-hover-bg: #3f3f46;
    --outline-hover-text: #ffffff;

    --input-bg: #1e1e1e;
    --input-border: #3f3f46;
    --input-text: #d4d4d4;

    --alert-success-bg: #1b5e20;
    --alert-success-border: #2e7d32;
    --alert-success-text: #c8e6c9;

    --alert-danger-bg: #5d1f1f;
    --alert-danger-border: #b71c1c;
    --alert-danger-text: #ffcdd2;

    --page-surface-bg: rgba(37, 37, 38, 0.96);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1e1e1e;
  --text: #d4d4d4;
  --link: #9cdcfe;
  --link-hover: #4fc1ff;

  --navbar-bg: #252526;
  --navbar-border: #3f3f46;
  --title: #ffffff;
  --nav-link: #d4d4d4;
  --nav-link-hover: #ffffff;
  --nav-link-active: #ffffff;

  --main-bg: #1e1e1e;

  --panel-bg: #252526;
  --panel-border: #3f3f46;
  --panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

  --footer-bg: #252526;
  --footer-border: #3f3f46;
  --footer-text: #d4d4d4;

  --card-bg: #252526;
  --card-border: #3f3f46;
  --card-text: #d4d4d4;
  --card-title: #ffffff;
  --card-subtitle: #9cdcfe;

  --badge-bg: #3f3f46;
  --badge-text: #d4d4d4;

  --outline-border: #3f3f46;
  --outline-text: #d4d4d4;
  --outline-hover-bg: #3f3f46;
  --outline-hover-text: #ffffff;

  --input-bg: #1e1e1e;
  --input-border: #3f3f46;
  --input-text: #d4d4d4;

  --alert-success-bg: #1b5e20;
  --alert-success-border: #2e7d32;
  --alert-success-text: #c8e6c9;

  --alert-danger-bg: #5d1f1f;
  --alert-danger-border: #b71c1c;
  --alert-danger-text: #ffcdd2;

  --page-surface-bg: rgba(37, 37, 38, 0.96);
}

html, body {
  height: 100%;
}

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

/* Linki ogólnie */
body a {
  color: var(--link);
  text-decoration: none;
}

body a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* === Navbar w stylu VS === */

.navbar-vs {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border) !important;

  /* Make hamburger visible in both themes (Bootstrap uses CSS vars for it). */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17, 24, 39, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --vs-navbar-toggler-border: rgba(17, 24, 39, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .navbar-vs {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --vs-navbar-toggler-border: rgba(255, 255, 255, 0.25);
  }
}

:root[data-theme="dark"] .navbar-vs {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --vs-navbar-toggler-border: rgba(255, 255, 255, 0.25);
}

.navbar-vs .navbar-toggler {
  border-color: var(--vs-navbar-toggler-border);
}

.navbar-vs .navbar-toggler:hover {
  background-color: rgba(0, 122, 204, 0.08);
}

.navbar-vs .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 122, 204, 0.25);
}

.vs-title {
  color: var(--title) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.vs-nav-link {
  color: var(--nav-link) !important;
  margin-right: 0.75rem;
}

.vs-nav-link:hover,
.vs-nav-link:focus {
  color: var(--nav-link-hover) !important;
}

/* Aktywny link w menu – możesz dodać w przyszłości przez TagHelper/klasę active */
.vs-nav-link.active {
  color: var(--nav-link-active) !important;
  border-bottom: 2px solid var(--accent);
}

/* === Kontener główny === */

main[role="main"] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--main-bg);
}

/* Karty/sekcje, np. About, Projects, Contact */

.vs-panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: var(--panel-shadow);
}

/* Możesz używać w widokach: <div class="vs-panel">...</div> */

/* === Przycisk VS (primary/secondary) === */

.btn-dark,
.btn-secondary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn-dark:hover,
.btn-secondary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}

.btn-outline-dark {
  border-color: var(--outline-border);
  color: var(--outline-text);
}

.btn-outline-dark:hover {
  background-color: var(--outline-hover-bg);
  color: var(--outline-hover-text);
}

/* === Footer === */

.footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
  flex-shrink: 0;
}

.footer a {
  color: var(--link);
}

.footer a:hover {
  color: var(--link-hover);
}

/* === „Karty” projektów w stylu VS === */

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--card-text);
}

.card .card-title {
  color: var(--card-title);
}

.card .card-subtitle {
  color: var(--card-subtitle);
}

/* Badge z technologiami */

.badge.bg-secondary {
  background-color: var(--badge-bg) !important;
  color: var(--badge-text);
}

/* Formularz – ciemne pola */

.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
}

.form-control:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  color: var(--input-text);
}

/* Alerty na dark theme */

.alert-success {
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-danger {
  background-color: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-text);
}
.footer .text-muted { color: var(--footer-text) !important; }
.footer-content {
  padding: 1rem 1rem 1rem 10px;
}

.page-bg {
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(0, 122, 204, 0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(156, 220, 254, 0.10), transparent 55%),
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("/img/hero-dotnet-code.svg") center/cover no-repeat;
  background-color: var(--main-bg);
  flex: 1 0 auto;
}

.page-bg .vs-panel,
.page-bg .card {
  background-color: var(--page-surface-bg); 
}

.page-bg-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dino-canvas-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.dino-canvas {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 900 / 240;
  background-color: var(--main-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
}

.dino-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.dino-overlay .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.container-max-700 { max-width: 700px; }
.container-max-900 { max-width: 900px; }
.container-max-1000 { max-width: 1000px; }