/*
 * Shared design tokens and global utilities.
 * Load feature stylesheets explicitly from the layouts that use them.
 */

@font-face {
  font-family: "Sanomat Web";
  src:
    url("/assets/Sanomat-LightItalic-Web-d26057c7.woff2") format("woff2"),
    url("/assets/Sanomat-LightItalic-Web-e075415a.woff") format("woff");
  font-display: swap;
  font-style: italic;
  font-weight: 300;
}

:root {
  --derose-blue: #040e85;
  --derose-blue-rgb: 4, 14, 133;
  --derose-blue-deep: #030a61;
  --derose-gold: #c69c6c;
  --derose-gold-rgb: 198, 156, 108;
  --derose-ink: #1d2433;
  --derose-muted: #667085;
  --derose-line: #d9dfeb;
  --derose-surface: #ffffff;
  --derose-surface-soft: #f6f7fb;
  --derose-surface-tint: #f7f1ea;
  --derose-shadow: 0 1rem 2.5rem rgba(4, 14, 133, 0.08);

  --bs-primary: var(--derose-blue);
  --bs-primary-rgb: var(--derose-blue-rgb);
  --bs-body-color: var(--derose-ink);
  --bs-body-bg: var(--derose-surface-soft);
  --bs-border-color: var(--derose-line);
  --bs-secondary-color: var(--derose-muted);
  --bs-heading-color: var(--derose-blue);
  --bs-link-color: var(--derose-blue);
  --bs-link-hover-color: var(--derose-blue-deep);
  --bs-card-border-color: rgba(4, 14, 133, 0.08);
  --bs-card-border-radius: 1rem;
  --bs-focus-ring-color: rgba(198, 156, 108, 0.24);
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell__main {
  flex: 1 0 auto;
}

code {
  overflow-wrap: anywhere;
}

.app-top-navigation {
  background: linear-gradient(135deg, var(--derose-blue-deep) 0%, var(--derose-blue) 68%, #1830b5 100%);
  border-bottom: 4px solid var(--derose-gold);
  box-shadow: 0 0.75rem 1.75rem rgba(4, 14, 133, 0.16);
}

.app-top-navigation .navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.82);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.26);
  --bs-navbar-toggler-focus-width: 0.15rem;
  padding-block: 0.9rem;
}

.app-top-navigation .navbar-toggler {
  border-radius: 999px;
}

.app-top-navigation .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.88%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.app-top-navigation__brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.app-top-navigation__logo {
  display: block;
  width: auto;
  height: 1.75rem;
}

.app-top-navigation .navbar-nav {
  gap: 0.2rem;
}

.app-top-navigation .nav-link {
  border-radius: 999px;
  padding-inline: 0.85rem;
  text-decoration: none;
}

.app-top-navigation .nav-link:hover,
.app-top-navigation .nav-link:focus,
.app-top-navigation .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
}

.app-footer {
  margin-top: 3rem;
  border-top: 1px solid rgba(4, 14, 133, 0.12);
  background: #ffffff;
}

.app-footer__user {
  color: #5d6a82;
  font-size: 0.95rem;
}

.app-footer__sign-out {
  color: var(--derose-blue);
  font-weight: 600;
  text-decoration: none;
}

.app-footer__sign-out:hover {
  text-decoration: underline;
}

.ts-wrapper.form-select {
  border-color: var(--derose-line);
}

.ts-wrapper.form-select.focus .ts-control {
  border-color: rgba(4, 14, 133, 0.35);
  box-shadow: 0 0 0 0.25rem rgba(198, 156, 108, 0.18);
}

.ts-dropdown .active {
  background: rgba(4, 14, 133, 0.06);
  color: var(--derose-ink);
}

.dashboard-organizer-card {
  background: #ffffff;
  border: 1px solid rgba(4, 14, 133, 0.14);
  box-shadow: 0 0.75rem 1.75rem rgba(4, 14, 133, 0.1);
}