/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




/* ============================================================
   Link Radar – Design Tokens
   ============================================================ */
:root {
  --lr-bg: #f5f6f9;
  --lr-surface: #ffffff;
  --lr-ink: #1b2030;
  --lr-ink-muted: #626b7a;
  --lr-border: #e3e6ec;
  --lr-primary: #3d4a6b;
  --lr-primary-dark: #2b3450;
  --lr-primary-soft: #eef0f6;

  --lr-seo: #2f8f6f;
  --lr-ki: #7c5cff;
  --lr-best: #d98a3d;
  --lr-tools: #3d8bd9;

  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-primary: var(--lr-primary);
  --bs-primary-rgb: 61, 74, 107;
}

body {
  background-color: var(--lr-bg);
  color: var(--lr-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, .brand-mark-text, .app-navbar .navbar-brand {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------------- Navbar ---------------- */
.app-navbar {
  background: var(--lr-primary-dark);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.app-navbar .navbar-brand {
  color: #fff;
  font-weight: 600;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lr-seo), var(--lr-ki) 35%, var(--lr-best) 70%, var(--lr-tools));
  display: inline-block;
}
.app-navbar .nav-link {
  color: rgba(255,255,255,.75);
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: .5rem;
}
.app-navbar .nav-link:hover {
  color: #fff;
}
.app-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.user-chip {
  color: rgba(255,255,255,.85);
  font-size: .875rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.role-badge {
  background: var(--lr-best);
  color: #201200;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .4rem;
  border-radius: .3rem;
}
.btn-outline-logout {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.3);
  font-size: .85rem;
}
.btn-outline-logout:hover {
  color: var(--lr-primary-dark);
  background: #fff;
  border-color: #fff;
}

/* ---------------- Cards / Surfaces ---------------- */
.lr-card {
  background: var(--lr-surface);
  border: 1px solid var(--lr-border);
  border-radius: .9rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(20, 24, 38, .04);
}

.lr-page-title {
  font-weight: 600;
  margin-bottom: .25rem;
}
.lr-page-subtitle {
  color: var(--lr-ink-muted);
  margin-bottom: 1.5rem;
}

/* ---------------- Category Buttons (Eingabe) ---------------- */
.category-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.category-btn {
  border: 1.5px solid var(--lr-border);
  background: #fff;
  border-radius: .7rem;
  padding: .6rem 1.1rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--lr-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .15s ease;
}
.category-btn .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot-color, var(--lr-ink-muted));
}
.category-btn:hover {
  border-color: var(--dot-color, var(--lr-primary));
  color: var(--lr-ink);
}
.category-btn.active {
  border-color: var(--dot-color, var(--lr-primary));
  background: var(--dot-color, var(--lr-primary));
  color: #fff;
}
.category-btn.active .dot {
  background: #fff;
}

/* ---------------- Tag Badges ---------------- */
.tag-badge {
  border: 1.5px solid var(--lr-border);
  background: #fff;
  color: var(--lr-ink-muted);
  border-radius: 2rem;
  padding: .35rem .85rem;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.tag-badge:hover {
  border-color: var(--lr-primary);
  color: var(--lr-ink);
}
.tag-badge.active {
  background: var(--lr-primary);
  border-color: var(--lr-primary);
  color: #fff;
}
.tag-filter-badge.active {
  background: var(--lr-ink);
  border-color: var(--lr-ink);
  color: #fff;
}

.tag-chip-static {
  display: inline-block;
  border-radius: 2rem;
  padding: .2rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  background: var(--lr-primary-soft);
  color: var(--lr-primary-dark);
  margin: 0 .25rem .25rem 0;
}

/* ---------------- Year filter buttons ---------------- */
.year-btn {
  border: 1.5px solid var(--lr-border);
  background: #fff;
  color: var(--lr-ink-muted);
  border-radius: .5rem;
  padding: .35rem .8rem;
  font-size: .85rem;
  font-weight: 600;
}
.year-btn.active {
  background: var(--lr-ink);
  border-color: var(--lr-ink);
  color: #fff;
}

/* ---------------- URL feedback ---------------- */
.url-feedback {
  font-size: .85rem;
  margin-top: .4rem;
  min-height: 1.2em;
}
.url-feedback.ok { color: var(--lr-seo); }
.url-feedback.error { color: #c23b3b; }
.url-feedback.warn { color: var(--lr-best); }

/* ---------------- Category tabs (Übersicht) ---------------- */
.category-tabs .nav-link {
  font-weight: 600;
  color: var(--lr-ink-muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .7rem 1.1rem;
}
.category-tabs .nav-link.active {
  color: var(--lr-ink);
  background: transparent;
  border-bottom-color: var(--tab-color, var(--lr-primary));
}
.category-tabs .nav-link .count {
  color: var(--lr-ink-muted);
  font-weight: 500;
  font-size: .8rem;
}

table.dataTable {
  font-size: .9rem;
}
table.dataTable td {
  vertical-align: top;
}
.link-cell a {
  color: var(--lr-primary-dark);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.link-cell a:hover {
  text-decoration: underline;
}
.link-cell .host {
  color: var(--lr-ink-muted);
  font-size: .78rem;
  display: block;
}
.comment-cell {
  color: var(--lr-ink-muted);
  white-space: pre-line;
}

/* ---------------- Copy-Button ---------------- */
.btn-copy-link {
  flex-shrink: 0;
  border: 1.5px solid var(--lr-border);
  background: #fff;
  color: var(--lr-ink-muted);
  border-radius: .45rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.btn-copy-link:hover {
  border-color: var(--lr-primary);
  color: var(--lr-primary);
}
.btn-copy-link.copied {
  border-color: var(--lr-seo);
  color: var(--lr-seo);
  background: #eafbf4;
}

.empty-state {
  text-align: center;
  color: var(--lr-ink-muted);
  padding: 3rem 1rem;
}

/* Utility */
.section-label {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lr-ink-muted);
  margin-bottom: .5rem;
}