/**
 * QEY Bauhaus Override
 * Swiss/International style — forest green, IBM Plex, sharp geometry.
 * Loaded after design-system.css in base.html. Overrides only; never resets.
 */

/* ── 1. Token overrides ─────────────────────────────────────── */
:root {
  --color-primary:           #1B6B3A;
  --color-primary-hover:     #145230;
  --color-primary-dark:      #0f3d27;
  --color-primary-light:     #d4ede0;
  --color-primary-subtle:    #eef5f1;
  --color-text-link:         #1B6B3A;
  --color-border-focus:      #1B6B3A;
  --color-border-purple:     #d4ede0;
  --color-bg-purple-light:   #eef5f1;
  --color-bg-purple-lighter: #f5faf7;

  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --radius-xl:  0px;
  --radius-full:0px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

/* ── 2. Body / base ─────────────────────────────────────────── */
body {
  font-family: 'IBM Plex Sans', sans-serif;
  background-color: #F5F5F3;
}

/* ── 3. Navigation ──────────────────────────────────────────── */
nav {
  background: #111111;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
nav a, nav .nav-dropdown-toggle {
  color: #cccccc;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
nav a:hover, nav .nav-dropdown-toggle:hover { color: #ffffff; }
.nav-dropdown-menu {
  background: #111111;
  border: 1px solid #333333;
  border-radius: 0;
  box-shadow: none;
}
.nav-dropdown-menu a {
  color: #aaaaaa;
  border-radius: 0;
}
.nav-dropdown-menu a:hover { background: #222222; color: #ffffff; }
.profile-circle {
  background: #1B6B3A;
  color: #ffffff;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}

/* ── 4. Cards ───────────────────────────────────────────────── */
.card {
  border-radius: 0;
  border: none;
  border-left: 4px solid #1B6B3A;
  border-bottom: 1px solid #E0E0E0;
  box-shadow: none;
  background: #ffffff;
}
.card:hover { box-shadow: none; transform: none; }
.card-elevated { border-radius: 0; box-shadow: none; }
.card-purple { background: #eef5f1; border-left: 4px solid #1B6B3A; }
.card-header { border-radius: 0; }

/* ── 5. Buttons ─────────────────────────────────────────────── */
.btn {
  border-radius: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn-primary { background: #1B6B3A; border-color: #1B6B3A; color: #ffffff; }
.btn-primary:hover { background: #145230; border-color: #145230; }
.btn-secondary { background: #d4ede0; border-color: #d4ede0; color: #0f3d27; border-radius: 0; }
.btn-secondary:hover { background: #c0e2d0; border-color: #c0e2d0; }
.btn-ghost { background: #ffffff; border: 1px solid #cccccc; color: #333333; border-radius: 0; }
.btn-ghost:hover { border-color: #1B6B3A; color: #1B6B3A; background: #ffffff; }
.btn-danger { border-radius: 0; background: #ffffff; border-color: #C0392B; color: #C0392B; }
.btn-danger:hover { background: #C0392B; color: #ffffff; }
.btn-purple { background: #1B6B3A; border-color: #1B6B3A; color: #ffffff; border-radius: 0; }
/* Legacy button classes */
.button-primary { border-radius: 0; background: #1B6B3A; border-color: #1B6B3A; color: #ffffff; font-family: 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.button-primary:hover { background: #145230; }
.button-outline-primary { border-radius: 0; border-color: #1B6B3A; color: #1B6B3A; font-family: 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.button-outline-primary:hover { background: #1B6B3A; color: #ffffff; }
.google-login-btn { border-radius: 0; }

/* ── 6. Tags ────────────────────────────────────────────────── */
.tag {
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
}
.tag-user { background: #1B6B3A; color: #ffffff; border: none; }
.tag-user:hover { background: #145230; color: #ffffff; opacity: 1; }
.tag-system { background: #111111; color: #ffffff; border: none; }
.tag-system:hover { background: #333333; color: #ffffff; opacity: 1; }
.tag-active { background: #1B6B3A; color: #ffffff; }
.tag-chip { border-radius: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tag-chip--system { background: #111111; color: #ffffff; }
.tag-cloud__link { border-radius: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }

/* ── 7. Badges / Status ─────────────────────────────────────── */
.badge { border-radius: 0; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.07em; }
.badge-primary { background: #d4ede0; color: #0f3d27; }
.badge-public, .badge-shared { border-radius: 0; }
.status-badge { border-radius: 0; font-family: 'IBM Plex Mono', monospace; }

/* ── 8. Panels ──────────────────────────────────────────────── */
.panel { border-radius: 0; }
.panel-purple { background: #eef5f1; border-color: #1B6B3A; }
.panel-blue { background: #eef5f1; border-color: #1B6B3A; border-left: 3px solid #1B6B3A; border-top: none; border-right: none; border-bottom: 1px solid #E0E0E0; }
.panel-yellow { background: #fafaf4; border: none; border-left: 3px solid #1B6B3A; border-bottom: 1px solid #E0E0E0; }

/* ── 9. Link items ──────────────────────────────────────────── */
.link-item {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  overflow: visible;
}
.link-item:hover { box-shadow: none; transform: none; }
.link-item:hover .link-item-card { border-left-color: #145230; }
.link-item.read .link-item-card { border-left-color: #cccccc; }
.link-item-archive { border-radius: 0; border-left: 4px solid #888888; border-bottom: 1px solid #E0E0E0; box-shadow: none; }
.link-card { border-radius: 0; box-shadow: none; border-left: 4px solid #1B6B3A; border-bottom: 1px solid #E0E0E0; }

/* Title — match view page title weight and size */
.link-title { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
.link-title h4 { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.link-title h4 a { color: #111111; text-decoration: none; font-weight: 600; }
.link-title h4 a:hover { color: #1B6B3A; }

/* Summary — plain text block matching view page summary treatment */
.link-summary {
  border-radius: 0;
  border: none;
  border-left: 3px solid #d4ede0;
  background: #f5faf7;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #333333;
}

/* Meta row — monospace, compact, no visual noise from pipes */
.link-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888888;
}
.link-meta > span { color: #aaaaaa; } /* pipe separators fade back */

/* ── List card surface + controls ───────────────────────────── */
.link-item.link-card {
  margin-bottom: var(--space-lg);
  border-left: none;
  border-bottom: none;
}
.link-item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-lg);
  align-items: start;
}
.link-item-card {
  background: #ffffff;
  border-left: 4px solid #1B6B3A;
  border-bottom: 1px solid #E0E0E0;
  padding: 24px;
  position: relative;
  min-width: 0;
}
.link-item-card .link-title {
  margin-bottom: 0;
  padding-bottom: 0;
}
.link-item-card .link-summary {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #333333;
  min-height: 8.2rem;
}
.link-item-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.link-item-failure-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #888888;
}
.link-list-batch-bar {
  margin: 0 0 1rem 0;
}
.link-item-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-left: 1.5rem;
  border-left: 1px solid #E0E0E0;
  position: sticky;
  top: var(--space-md);
}
.link-item-controls .link-actions {
  display: flex;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.link-item-controls .link-actions form { display: block; margin: 0; }
.link-item-controls .link-actions .btn { text-align: left; justify-content: flex-start; }
.link-item-controls .link-actions-secondary {
  padding-top: 0.5rem;
  border-top: 1px solid #E0E0E0;
}

/* Copy button on list cards */
.link-item-copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: #bbbbbb;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.25rem;
  line-height: 1;
  border-radius: 0;
}
.link-item-copy-btn:hover { color: #1B6B3A; }
.link-item-copy-btn .lv-copied {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #1B6B3A;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .link-item-layout {
    grid-template-columns: 1fr;
  }
  .link-item-card {
    padding: 24px;
  }
  .link-item-controls {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #E0E0E0;
    padding-top: 0.75rem;
    position: static;
  }
}

/* Tags in aside — wrap tightly */
.link-item-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Tags under title in view page */
.link-view-title-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Share icons — mute them */
.share-icon { color: #cccccc; font-size: 0.85rem; }
.share-icon:hover { color: #1B6B3A; }

/* ── 10. Section headings ───────────────────────────────────── */
.section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1B6B3A;
  font-weight: 400;
}

/* ── 11. Forms & Inputs ─────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select {
  border-radius: 0;
  border-color: #E0E0E0;
  font-family: 'IBM Plex Sans', sans-serif;
}
input:focus, textarea:focus, select:focus {
  border-color: #1B6B3A;
  box-shadow: 0 0 0 2px rgba(27,107,58,0.15);
}
label { font-family: 'IBM Plex Sans', sans-serif; }
.search-input { border-radius: 0; }

/* ── 12. Alerts ─────────────────────────────────────────────── */
.alert { border-radius: 0; border-left-width: 4px; border-top: none; border-right: none; border-bottom: none; }
.alert-success { border-left-color: #1B6B3A; }
.alert-error { border-left-color: #C0392B; }
.alert-info { border-left-color: #1A56DB; }
.alert-warning { border-left-color: #D97706; }

/* ── 13. Filter buttons ─────────────────────────────────────── */
.filter-btn { border-radius: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.filter-btn.is-active { background: #1B6B3A; border-color: #1B6B3A; color: #ffffff; }

/* ── 14. Empty states ───────────────────────────────────────── */
.empty-state { font-family: 'IBM Plex Sans', sans-serif; }
.empty-state__title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }

/* ── 15. Modal ──────────────────────────────────────────────── */
.modal { border-radius: 0; box-shadow: none; border: 1px solid #E0E0E0; }
.modal-header { border-bottom: 2px solid #111111; }
.modal-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; font-size: 1.1rem; }

/* ── 16. Footer ─────────────────────────────────────────────── */
.site-footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 2px solid #111111;
  background: #111111;
  color: #666666;
}
.site-footer a { color: #888888; }
.site-footer a:hover { color: #ffffff; }
.site-footer span { color: #444444; }

/* ── 17. Stat cards (metrics page) ─────────────────────────── */
.stat-card { border-radius: 0; box-shadow: none; border-left: 4px solid #1B6B3A; border-bottom: 1px solid #E0E0E0; }
.stat-card__value { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em; }
.stat-card__label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── 18. Toast notifications ────────────────────────────────── */
.toast { border-radius: 0; box-shadow: none; border-left: 4px solid #1B6B3A; }
.toast-error { border-left-color: #C0392B; }
.toast-success { border-left-color: #1B6B3A; }
.toast-info { border-left-color: #1A56DB; }

/* ── 19. Hero / landing ─────────────────────────────────────── */
.share-card { border-radius: 0; }
.hero-panel { border-radius: 0; border-left: 4px solid #1B6B3A; }

/* ── 20. Text / link utilities ──────────────────────────────── */
.text-primary { color: #1B6B3A; }
a { color: #1B6B3A; }
a:hover { color: #145230; }

/* ── 21. QA components ──────────────────────────────────────── */
.qa-card { border-radius: 0; border: none; border-left: 3px solid #1B6B3A; box-shadow: none; background: #fafaf8; }
.qa-reply-card { border-left: 2px solid #E0E0E0; background: #ffffff; }
.qa-question-text, .qa-reply-question-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── 22. Reminder / collection panels ──────────────────────── */
.reminder-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; color: #888888; }
.collection-panel-title { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.14em; color: #1B6B3A; }
.collection-manage-link { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: #1B6B3A; }

/* ── 23. Link view sidebar ──────────────────────────────────── */
.link-view-page-sidebar { border-left: 1px solid #E0E0E0; padding-left: 1.5rem; }
.link-view-meta-row {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888888;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-start;
}

/* Share URL input + copy button */
.link-view-share-input-wrap { position: relative; display: flex; align-items: center; }
.link-view-share-input { padding-right: 3rem !important; }
.link-view-share-copy-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #E0E0E0;
  background: #f5f5f3;
  color: #555555;
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.link-view-share-copy-btn:hover { background: #1B6B3A; color: #ffffff; border-left-color: #1B6B3A; }

/* ── 24. Shared helpers (.lv-*) ─────────────────────────────── */
.lv-rule {
  display: block;
  width: 1.75rem;
  height: 2px;
  background: #1B6B3A;
  margin-top: 4px;
  margin-bottom: 0.75rem;
}
.lv-back {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1B6B3A;
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.lv-back:hover { color: #145230; }

/* ── 25. Summary placeholder ────────────────────────────────── */
.summary-placeholder-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888888;
}