/*
 * Nordhort add-ons for the unfold admin — loaded via UNFOLD["STYLES"] (settings/base.py).
 *
 * Only what unfold's theme variables cannot express: the brand fonts (Space Grotesk for
 * headings, JetBrains Mono for technical values; body stays Inter = unfold default) and
 * the Nordlicht/Nordverlauf accents used on the dashboard. Fonts are self-hosted from
 * static/fonts/ (SIL OFL) — deliberately no external font CDN (digital sovereignty).
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.effdd4f91ca2.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-VariableFont_wght.4d05bb0e4a69.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Headings and the site header in Space Grotesk. */
h1, h2, h3,
#site-name,
.nordhort-heading {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}

/* IDs, codes, technical values in JetBrains Mono. */
code, kbd, pre, samp {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* Dashboard KPI cards. */
.nordhort-kpi-value {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.nordhort-kpi-alert {
  color: #D7263D; /* status red (see CLAUDE.md brand tokens) */
}

/* Nordverlauf (Hortblau -> Nordlicht) — accent bar on the dashboard cards. */
.nordhort-gradient {
  background: linear-gradient(135deg, #2A4494 0%, #44CFCB 100%);
}

/*
 * File-upload control (core.widgets.FileButtonInput). The button itself is styled with
 * unfold's own utility classes in the widget template; only the accessibility bits that
 * utilities can't express live here: the visually hidden (but focusable) native input and
 * a focus ring on the button when that input has keyboard focus. --color-primary-500 is
 * unfold's own token (Tailwind v4), so no brand color is hardcoded.
 */
.nordhort-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nordhort-file:focus-within .nordhort-file__button {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/*
 * Content-import page (config/content_import.py + templates/admin/content_import.html).
 * The diff/preview must read across the full content width (unfold's default column is too
 * narrow for JSON), monospace, with horizontal scroll instead of wrapping long values.
 * Brand tokens per CLAUDE.md; kept legible in unfold's light and dark palette.
 */
.nh-import { max-width: none; width: 100%; }
.nh-import__intro,
.nh-import__note { color: var(--color-font-subtle-light); }
.dark .nh-import__intro,
.dark .nh-import__note { color: var(--color-font-subtle-dark); }
.nh-import__note { font-size: .8rem; margin-top: .4rem; }
.nh-import__intro { max-width: 62rem; margin-bottom: 1rem; }

.nh-import__error {
  border: 1px solid rgba(215, 38, 61, .5);
  background: rgba(215, 38, 61, .10);
  color: #B5232F;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin: .75rem 0;
}
.nh-import__conflicts ul { margin: .5rem 0 .25rem 1.1rem; list-style: disc; }
.nh-import__conflicts li { margin: .2rem 0; }

.nh-import__counts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.nh-import__total { opacity: .75; font-size: .85rem; }
.nh-import__summary { font-size: .9rem; margin: .25rem 0 1rem; }

.nh-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.nh-badge--new { background: rgba(68, 207, 203, .22); color: #12716e; }
.nh-badge--changed { background: rgba(224, 153, 31, .22); color: #B5750A; }
.nh-badge--same { background: rgba(58, 74, 82, .16); color: #3A4A52; }
.nh-badge--error { background: rgba(215, 38, 61, .18); color: #B5232F; }
.nh-badge--lock { background: rgba(42, 68, 148, .16); color: #2A4494; }
.dark .nh-badge--same { color: #b7c2c8; }

.nh-import__switch { display: inline-flex; gap: .25rem; border: 1px solid rgba(58,74,82,.25); border-radius: 8px; padding: .25rem; margin: .5rem 0; }
.nh-import__mode { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 6px; cursor: pointer; }
.nh-import__mode:has(input:checked) { background: #2A4494; color: #fff; font-weight: 600; }
.nh-import__mode input { accent-color: #2A4494; }

.nh-import__field { display: block; margin: .75rem 0; }
.nh-import__field > span { display: block; font-weight: 600; margin-bottom: .35rem; }
.nh-import__textarea {
  width: 100%;
  min-height: 22rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .85rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  padding: .6rem .75rem;
  border: 1px solid rgba(58,74,82,.3);
  border-radius: 8px;
}

.nh-import__bulk { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-size: .85rem; }
.nh-import__bulk button { border: 1px solid rgba(58,74,82,.3); background: transparent; border-radius: 6px; padding: .2rem .6rem; cursor: pointer; }
.nh-import__bulk button:hover { background: rgba(78,165,217,.12); }

.nh-import__tablewrap { width: 100%; overflow-x: auto; }
.nh-import__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.nh-import__table th, .nh-import__table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid rgba(58,74,82,.15); vertical-align: top; }
.nh-import__table code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; }
.nh-import__row--identisch { opacity: .6; }
.nh-import__src { display: block; font-size: .72rem; opacity: .7; }
.nh-import__muted { opacity: .7; }
.nh-import__err { color: #B5232F; }
.nh-import__choice { display: inline-flex; align-items: center; gap: .35rem; }

.nh-import__diff { margin-top: .4rem; }
.nh-import__diff summary { cursor: pointer; font-size: .8rem; opacity: .8; }
.nh-import__diff dl { margin: .4rem 0 0; }
.nh-import__diff dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; margin-top: .45rem; opacity: .85; }
.nh-import__diff dd { margin: .15rem 0 .15rem 0; }
.nh-import__old, .nh-import__new {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.nh-import__old { color: #a11; }
.nh-import__new { color: #0f7a3a; }

.nh-import__actions { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .25rem; }
.nh-import__btn { display: inline-block; background: #2A4494; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.nh-import__btn[disabled] { opacity: .5; cursor: not-allowed; }
.nh-import__btn:hover:not([disabled]) { background: #224870; }
.nh-import__cancel { text-decoration: underline; opacity: .8; }
.nh-import__h2 { font-family: "Space Grotesk", sans-serif; margin: .5rem 0 1rem; }