/* 7N Styles for NetMaker UI v1.5.1
 * Visual-only layer: authentication, routing, API calls and data handling remain upstream.
 */
@font-face {
  font-family: "7N Nunito";
  src: url("/assets/7n-fonts/nunito-vietnamese-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "7N Nunito";
  src: url("/assets/7n-fonts/nunito-vietnamese-700.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "7N Quicksand";
  src: url("/assets/7n-fonts/quicksand-vietnamese-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "7N Quicksand";
  src: url("/assets/7n-fonts/quicksand-vietnamese-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --7n-teal-50: #f0fdfa;
  --7n-teal-100: #ccfbf1;
  --7n-teal-200: #99f6e4;
  --7n-teal-300: #5eead4;
  --7n-teal-400: #2dd4bf;
  --7n-teal-500: #14b8a6;
  --7n-teal-600: #0d9488;
  --7n-teal-700: #0f766e;
  --7n-cream: #fff7ed;
  --7n-paper: #fffdf9;
  --7n-ink: #0f172a;
  --7n-navy: #0b1121;
  --7n-slate: #334155;
  --7n-coral: #ff7f50;
  --7n-line: rgba(20, 184, 166, 0.2);
  --7n-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);

  --color-custom-light-50: var(--7n-teal-50);
  --color-custom-light-100: var(--7n-teal-100);
  --color-custom-light-200: var(--7n-teal-200);
  --color-custom-light-300: var(--7n-teal-300);
  --color-custom-light-400: var(--7n-teal-400);
  --color-custom-light-500: var(--7n-teal-500);
  --color-custom-light-600: var(--7n-teal-600);
  --color-custom-light-700: var(--7n-teal-700);
  --color-custom-light-800: #115e59;
  --color-custom-light-900: #134e4a;
  --color-custom-dark-50: var(--7n-teal-50);
  --color-custom-dark-100: var(--7n-teal-100);
  --color-custom-dark-200: var(--7n-teal-200);
  --color-custom-dark-300: var(--7n-teal-300);
  --color-custom-dark-400: var(--7n-teal-400);
  --color-custom-dark-500: var(--7n-teal-500);
  --color-custom-dark-600: var(--7n-teal-600);
  --color-custom-dark-700: var(--7n-teal-700);
  --color-custom-dark-800: #115e59;
  --color-custom-dark-900: #134e4a;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--7n-cream);
  color: var(--7n-ink);
  font-family: "7N Quicksand", ui-rounded, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

.App {
  min-height: 100vh;
  background-color: var(--7n-cream);
  color: var(--7n-ink);
  position: relative;
  isolation: isolate;
}

.App::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image: radial-gradient(rgba(20, 184, 166, 0.52) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.App.dark {
  --7n-surface: #151e2e;
  --7n-surface-strong: #101827;
  --7n-body: #f1f5f9;
  --7n-muted: #a8b3c2;
  --7n-border: rgba(148, 163, 184, 0.2);
  --color-bg-ultimate: #0b1121;
  --color-bg-default: #101827;
  --color-bg-hover: #182235;
  --color-bg-contrast-default: #151e2e;
  --color-bg-contrast-hover: #202d42;
  --color-stroke-default: rgba(148, 163, 184, 0.23);
  --color-stroke-subtle: rgba(148, 163, 184, 0.13);
  --color-text-primary: #f8fafc;
  --color-text-secondary: #a8b3c2;
  --color-menu-row-selected: rgba(20, 184, 166, 0.16);
  background-color: var(--7n-navy);
  color: var(--7n-body);
}

.App.light {
  --7n-surface: var(--7n-paper);
  --7n-surface-strong: #ffffff;
  --7n-body: var(--7n-ink);
  --7n-muted: #64748b;
  --7n-border: rgba(15, 118, 110, 0.17);
  --color-bg-ultimate: var(--7n-cream);
  --color-bg-default: var(--7n-paper);
  --color-bg-hover: #f0fdfa;
  --color-bg-contrast-default: #ffffff;
  --color-bg-contrast-hover: #f0fdfa;
  --color-stroke-default: rgba(15, 118, 110, 0.2);
  --color-stroke-subtle: rgba(15, 118, 110, 0.12);
  --color-text-primary: var(--7n-ink);
  --color-text-secondary: #64748b;
  --color-menu-row-selected: rgba(20, 184, 166, 0.12);
}

.App h1,
.App h2,
.App h3,
.App h4,
.App h5,
.App h6 {
  font-family: "7N Nunito", ui-rounded, sans-serif;
  letter-spacing: -0.025em;
}

/* Shell: retain the upstream responsive geometry, but give it a 7N editorial frame. */
.App header,
.App aside,
.App nav {
  border-color: var(--7n-border) !important;
}

.App aside {
  background: var(--7n-surface-strong) !important;
  box-shadow: 12px 0 35px rgba(15, 23, 42, 0.08);
}

.App header {
  background: color-mix(in srgb, var(--7n-surface-strong) 92%, transparent) !important;
  backdrop-filter: blur(16px);
}

.App [class*="bg-bg-default"],
.App [class*="bg-bg-ultimate"] {
  background-color: var(--color-bg-default) !important;
}

.App [class*="bg-bg-contrastDefault"] {
  background-color: var(--color-bg-contrast-default) !important;
}

.App [class*="bg-bg-hover"]:hover,
.App [class*="hover\\:bg-bg-hover"]:hover {
  background-color: var(--color-bg-hover) !important;
}

.App [class*="bg-bg-menuRowSelected"] {
  background-color: var(--color-menu-row-selected) !important;
}

.App [class*="border-stroke"],
.App [class*="border-default"] {
  border-color: var(--color-stroke-default) !important;
}

.App [class*="text-text-primary"] {
  color: var(--color-text-primary) !important;
}

.App [class*="text-text-secondary"] {
  color: var(--color-text-secondary) !important;
}

.App [class*="text-primary-"] {
  color: var(--7n-teal-600) !important;
}

.App.dark [class*="text-primary-"] {
  color: var(--7n-teal-300) !important;
}

/* Controls */
.App button {
  border-radius: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.App button:not(:disabled):hover {
  transform: translateY(-1px);
}

.App button:focus-visible,
.App a:focus-visible,
.App input:focus-visible,
.App select:focus-visible,
.App textarea:focus-visible {
  outline: 3px solid rgba(255, 127, 80, 0.52) !important;
  outline-offset: 3px;
}

.App input,
.App select,
.App textarea {
  border-radius: 11px !important;
  border-color: var(--color-stroke-default) !important;
  background: var(--color-bg-contrast-default) !important;
  color: var(--color-text-primary) !important;
}

.App input:focus,
.App select:focus,
.App textarea:focus {
  border-color: var(--7n-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

.App button[class*="button-default-gradient"],
.App button[class*="bg-gradient-to-b"]:not([class*="outline"]) {
  background: linear-gradient(180deg, var(--7n-teal-500), var(--7n-teal-700)) !important;
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.22);
}

.App button[class*="button-default-gradient"]:hover,
.App button[class*="bg-gradient-to-b"]:not([class*="outline"]):hover {
  background: linear-gradient(180deg, var(--7n-teal-400), var(--7n-teal-600)) !important;
}

/* Tables and grouped surfaces */
.App table {
  border-collapse: separate;
  border-spacing: 0;
}

.App thead th {
  color: var(--7n-muted) !important;
  font-family: "7N Nunito", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-stroke-default) !important;
}

.App tbody tr {
  transition: background 160ms ease;
}

.App tbody tr:hover {
  background: rgba(20, 184, 166, 0.07) !important;
}

.App tbody td {
  border-bottom-color: var(--color-stroke-subtle) !important;
}

.App [class*="rounded-lg"],
.App [class*="rounded-xl"] {
  border-color: var(--7n-border);
}

.App [role="dialog"] {
  border: 1px solid var(--7n-border);
  border-radius: 20px;
  box-shadow: var(--7n-shadow);
}

/* 7N identity and the future passkey entry point. */
[data-7n-logo] {
  width: auto !important;
  max-width: min(13rem, 100%) !important;
  height: 2.25rem !important;
  object-fit: contain !important;
}

.7n-wordmark {
  display: none;
}

.7n-passkey-button {
  border-color: rgba(20, 184, 166, 0.42) !important;
  color: var(--7n-teal-300) !important;
  background: rgba(20, 184, 166, 0.08) !important;
}

.7n-passkey-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.4rem;
  color: var(--7n-navy);
  background: var(--7n-teal-400);
  font-size: 1rem;
  font-weight: 800;
}

.7n-passkey-note {
  margin: -1.5rem 0 0.25rem;
  color: var(--7n-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Login: 7N identity without touching the upstream auth handlers. */
.App [class*="min-h-screen"] {
  background-color: transparent !important;
}

.App [class*="min-h-screen"] [class*="max-w-md"] {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
  border: 1px solid var(--7n-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--7n-surface-strong) 95%, transparent);
  box-shadow: var(--7n-shadow);
}

.App [class*="min-h-screen"] [class*="max-w-md"]::before {
  content: "7N / SECURE MESH";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 1rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: 999px;
  color: var(--7n-teal-600);
  background: rgba(20, 184, 166, 0.08);
  font: 700 0.68rem/1 "7N Quicksand", sans-serif;
  letter-spacing: 0.12em;
}

.App.dark [class*="min-h-screen"] [class*="max-w-md"]::before {
  color: var(--7n-teal-300);
}

.App [class*="min-h-screen"] [class*="max-w-md"] h2 {
  font-size: clamp(1.8rem, 4vw, 2.35rem) !important;
  color: var(--color-text-primary) !important;
}

.App [class*="min-h-screen"] [class*="h-screen"] {
  padding: 1rem !important;
}

.App [class*="min-h-screen"] [class*="h-screen"] > div {
  border-radius: 24px !important;
  border: 1px solid rgba(20, 184, 166, 0.18);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}

.App [class*="min-h-screen"] [class*="h-screen"] img {
  filter: saturate(0.78) contrast(1.04);
}

/* Small status cue for the network operations surface. */
.App [class*="status-online"]::before,
.App [class*="text-text-success"]::before {
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

@media (max-width: 1023px) {
  .App::before {
    opacity: 0.2;
  }

  .App [class*="min-h-screen"] [class*="max-w-md"] {
    border: 0;
    box-shadow: none;
  }
}

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