/*
 * Seylac Visual Unity + Mobile Foundation v3
 * Additive visual layer only. Routes, controllers, forms, payments, database and authentication are untouched.
 */
:root {
  --seylac-v3-navy: #071f4a;
  --seylac-v3-navy-deep: #051633;
  --seylac-v3-blue: #1463e8;
  --seylac-v3-blue-strong: #0d4fbe;
  --seylac-v3-blue-soft: #eaf2ff;
  --seylac-v3-ink: #102342;
  --seylac-v3-muted: #64738d;
  --seylac-v3-line: #dce5f2;
  --seylac-v3-surface: #ffffff;
  --seylac-v3-canvas: #f5f8fd;
  --seylac-v3-radius: 14px;
  --seylac-v3-shadow: 0 12px 30px rgba(5, 31, 74, 0.08);

  /* Existing application tokens receive the same primary brand color. */
  --blue: var(--seylac-v3-blue);
  --blue-strong: var(--seylac-v3-blue-strong);
  --blue-soft: var(--seylac-v3-blue-soft);
  --blue-softer: #f5f8ff;
  --navy: var(--seylac-v3-navy);
  --ink: var(--seylac-v3-ink);
  --ink-2: #30425f;
  --muted: var(--seylac-v3-muted);
  --line: var(--seylac-v3-line);
  --line-strong: #cbd8e9;
  --surface: var(--seylac-v3-surface);
  --surface-2: #f8faff;
  --canvas: var(--seylac-v3-canvas);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--seylac-v3-ink);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(20, 99, 232, 0.42) !important;
  outline-offset: 3px !important;
}

/* Shared buttons and interactive controls */
:where(.btn, .legal-btn, .syf-btn, .sy-ai26-button) {
  border-radius: var(--seylac-v3-radius) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

:where(.btn-primary, .nav-actions .btn, .mobile-panel .btn, .legal-btn, .syf-btn, .sy-ai26-button) {
  background: var(--seylac-v3-blue) !important;
  border-color: var(--seylac-v3-blue) !important;
  color: #ffffff !important;
}

:where(.btn-primary, .nav-actions .btn, .mobile-panel .btn, .legal-btn, .syf-btn, .sy-ai26-button):hover {
  background: var(--seylac-v3-blue-strong) !important;
  border-color: var(--seylac-v3-blue-strong) !important;
  filter: none !important;
}

/* Logo dimensions are kept consistent without altering the image source. */
:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav, .sidebar) :is(.seylac-logo, .brand-logo, .desktop-brand-logo) {
  display: block;
  width: auto !important;
  max-width: 150px;
  height: auto !important;
  max-height: 32px;
  object-fit: contain;
}

:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav, .sidebar) .brand,
:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav, .sidebar) .brand-image {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Public navigation, logo, hamburger and icon buttons use one language. */
:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(7, 31, 74, 0.97) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav) :is(.nav-links a, .legal-nav-links a, .seylac-info-nav-links a, .nav-login, .legal-login) {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 750;
}

:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav) :is(.nav-links a, .legal-nav-links a, .seylac-info-nav-links a, .nav-login, .legal-login):hover {
  color: #ffffff !important;
}

:where(.menu-btn, .nav-language-btn, .sidebar-close, .mobile-menu, .top-action, .logout-btn) {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(20, 99, 232, 0.18) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: var(--seylac-v3-navy) !important;
  box-shadow: 0 3px 10px rgba(5, 31, 74, 0.05);
}

:where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav) :is(.menu-btn, .nav-language-btn) {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  box-shadow: none;
}

:where(.menu-btn, .nav-language-btn, .sidebar-close, .mobile-menu, .top-action, .logout-btn) svg,
.side-icon svg,
.ui-icon {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  background: currentColor !important;
}

.mobile-panel {
  background: var(--seylac-v3-navy) !important;
}

.mobile-panel a {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Unified card, icon and app-frame treatment. */
body.seylac-app {
  background: var(--seylac-v3-canvas) !important;
}

.sidebar {
  border-right-color: var(--seylac-v3-line) !important;
  background: #ffffff !important;
}

.topbar {
  border-bottom-color: var(--seylac-v3-line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.side-icon,
.metric-top i,
:where(.bento-icon, .seylac-foundation-icon) {
  background: var(--seylac-v3-blue-soft) !important;
  color: var(--seylac-v3-blue) !important;
}

.side-link.active {
  background: linear-gradient(90deg, #e9f1ff, #f5f8ff) !important;
  color: var(--seylac-v3-blue) !important;
}

.side-link.active .side-icon {
  background: #dce9ff !important;
  color: var(--seylac-v3-blue) !important;
}

:where(.panel, .card, .card-pad, .metric-card, .metric-strip > div, .summary-tile) {
  border-color: var(--seylac-v3-line) !important;
  box-shadow: var(--seylac-v3-shadow) !important;
}

/* Public section surfaces and footer use the same blue family. */
:where(.seylac-public-foundation, .features-section, .foundation-section) {
  border-color: var(--seylac-v3-line);
}

:where(footer.seylac-footer-2026, .legal-footer) {
  background: var(--seylac-v3-navy-deep) !important;
}

/* Responsive improvements: preserve existing behavior but reduce crowding and horizontal overflow. */
img,
svg {
  max-width: 100%;
}

@media (max-width: 760px) {
  body.seylac-app .topbar {
    height: 64px;
    padding-inline: 16px;
  }

  body.seylac-app .app-content {
    padding: 21px 16px 44px;
  }

  body.seylac-app :is(.panel, .card-pad, .metric-card) {
    padding: 17px;
    border-radius: 12px;
  }

  body.seylac-app .page-head {
    align-items: flex-start;
    gap: 14px;
  }

  body.seylac-app .page-head h1 {
    font-size: clamp(27px, 8vw, 34px);
  }

  body.seylac-app .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.seylac-app .page-actions .btn {
    min-height: 42px;
  }

  body.seylac-app :is(.metric-grid, .metric-strip, .dashboard-grid, .dashboard-grid.lower, .two-col, .split-grid) {
    grid-template-columns: 1fr !important;
  }

  body.seylac-app :is(.table-wrap, .table-scroll, .overflow-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.seylac-app table {
    min-width: 620px;
  }

  .nav-wrap .nav {
    min-height: 64px !important;
    padding-inline: 16px !important;
  }

  .nav-wrap .nav-links,
  .nav-wrap .nav-login,
  .nav-wrap .nav-actions > .btn {
    display: none !important;
  }

  .nav-wrap .menu-btn {
    display: inline-grid !important;
    width: 40px !important;
    height: 40px !important;
  }

  .nav-wrap .nav-language-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .mobile-panel {
    inset: 64px 0 0 !important;
    padding: 18px 16px 28px !important;
  }

  .mobile-panel a {
    padding: 15px 8px !important;
    font-size: 16px !important;
  }

  .mobile-panel .btn {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
  }

  .legal-nav,
  .seylac-info-page .seylac-info-nav-inner {
    min-height: 64px !important;
    padding-inline: 16px;
  }

  .legal-nav-links,
  .seylac-info-page .seylac-info-nav-links {
    max-width: 54vw;
    gap: 14px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .legal-nav-links::-webkit-scrollbar,
  .seylac-info-page .seylac-info-nav-links::-webkit-scrollbar {
    display: none;
  }

  .legal-nav-actions .legal-login,
  .seylac-info-page .seylac-info-nav-inner > .seylac-info-brand:last-child {
    display: none;
  }

  .seylac-footer-shell,
  .legal-footer {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  body.seylac-app .app-content {
    padding-inline: 13px;
  }

  .nav-wrap .nav {
    padding-inline: 12px !important;
  }

  :where(.nav-wrap, .legal-nav-wrap, .seylac-info-nav) :is(.seylac-logo, .brand-logo, .desktop-brand-logo) {
    max-width: 112px;
    max-height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}