/* =====================================================================
   Nanoq Intranet – Forum: view switch and category overview (1.35.3)
   Built on the arctic tokens (--nq-*) with fallbacks, so the classic design works too.
   ===================================================================== */

.fc-head, .fc-grid, .fc-empty {
  --fc-surface: var(--nq-surface, var(--bs-paper-bg, #fff));
  --fc-ice: var(--nq-ice, rgba(133, 146, 163, 0.09));
  --fc-border: var(--nq-frost, var(--bs-border-color, #e4e6e8));
  --fc-ink: var(--nq-ink, var(--nanoq-heading, #384551));
  --fc-text: var(--nq-text, var(--bs-body-color, #646e78));
  --fc-muted: var(--nq-muted, #8592a3);
  --fc-accent: var(--nq-accent, var(--nanoq-primary, #6658ea));
  --fc-shadow: var(--nq-shadow, 0 1px 3px rgba(15, 46, 69, 0.08));
  --fc-r: var(--nq-r-card, 14px);
  --fc-rc: var(--nq-r-ctrl, 10px);
  --fc-display: var(--nq-display, inherit);
}
[data-bs-theme=dark] .fc-head, [data-bs-theme=dark] .fc-grid, [data-bs-theme=dark] .fc-empty {
  --fc-ice: var(--nq-ice, rgba(255, 255, 255, 0.04));
}

/* ---------- View switch ---------- */
.fc-actions { flex-wrap: wrap; }
.fc-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--fc-ice); border: 1px solid var(--fc-border);
}
.fc-switch-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-size: 0.88rem; line-height: 1.3; text-decoration: none;
  color: var(--fc-text) !important;
}
.fc-switch-btn i { font-size: 1.05rem; color: var(--fc-muted); }
.fc-switch-btn:hover { color: var(--fc-ink) !important; }
.fc-switch-btn.is-active { background: var(--fc-surface); color: var(--fc-ink) !important; box-shadow: var(--fc-shadow); }
.fc-switch-btn.is-active i { color: var(--fc-accent); }
.fc-switch-btn:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }

/* ---------- Category cards ---------- */
.fc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.fc-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-r);
  box-shadow: var(--fc-shadow); overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.fc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fc-color, var(--fc-muted));
}
.fc-card:hover { border-color: color-mix(in srgb, var(--fc-color, var(--fc-accent)) 55%, var(--fc-border)); }
.fc-main {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 18px 12px; text-decoration: none;
  color: inherit !important;
}
.fc-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--fc-rc);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
  color: var(--fc-color, var(--fc-accent));
  background: color-mix(in srgb, var(--fc-color, var(--fc-accent)) 14%, var(--fc-surface));
}
.fc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-name {
  font-family: var(--fc-display); font-weight: 700; font-size: 1.08rem; color: var(--fc-ink);
  overflow-wrap: anywhere;
}
.fc-main:hover .fc-name { color: var(--fc-accent); }
.fc-lock { font-size: 0.95rem; color: var(--fc-muted); vertical-align: -1px; }
.fc-desc { color: var(--fc-text); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }

.fc-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px 74px; }
.fc-sub {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: var(--fc-text) !important; text-decoration: none;
  background: var(--fc-ice); border: 1px solid var(--fc-border);
}
.fc-sub::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--fc-sub, var(--fc-muted)); }
.fc-sub:hover { border-color: var(--fc-sub, var(--fc-accent)); color: var(--fc-ink) !important; }
.fc-sub-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center; font-size: 0.72rem;
  background: var(--fc-surface); color: var(--fc-muted);
}

.fc-foot {
  margin-top: auto; padding: 12px 18px 14px; border-top: 1px solid var(--fc-border);
  background: var(--fc-ice); display: flex; flex-direction: column; gap: 8px;
}
.fc-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--fc-text); font-weight: 600; }
.fc-stats span { display: inline-flex; align-items: center; gap: 5px; }
.fc-stats i { color: var(--fc-muted); font-size: 1rem; }
.fc-latest { display: flex; flex-direction: column; min-width: 0; font-size: 0.84rem; }
.fc-latest-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fc-muted); font-weight: 700; }
.fc-latest-title {
  font-weight: 600; color: var(--fc-ink) !important; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-latest-title:hover { color: var(--fc-accent) !important; }
.fc-latest-meta { color: var(--fc-muted); font-size: 0.8rem; }
.fc-latest.is-empty { color: var(--fc-muted); font-style: italic; }

.fc-empty {
  text-align: center; padding: 40px 16px; background: var(--fc-surface);
  border: 1px dashed var(--fc-border); border-radius: var(--fc-r);
}
.fc-empty > i { font-size: 2.4rem; color: var(--fc-accent); }
.fc-empty p { color: var(--fc-text); margin: 8px 0 12px; }

@media (max-width: 575.98px) {
  .fc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fc-main { padding: 18px 14px 10px; gap: 12px; }
  .fc-icon { width: 38px; height: 38px; font-size: 1.2rem; }
  .fc-subs { padding: 0 14px 10px; }
  .fc-foot { padding: 10px 14px 12px; }
  .fc-switch-btn { padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) { .fc-card { transition: none; } }