/* ============================================================================
   The panel head — one head for every dashboard panel in the app.

   This started life inside application_overview/css/app_overview.css, scoped to
   the Överblick page. Politik now uses the same head, and the section icons on
   politik / ekonomi / säkerhet take their colour from the same ramp, so the
   system lives here and is loaded globally from styling_dependencies.html.

   Colour comes from design-tokens.css (--brand-*), never from hand-picked hex.
   ========================================================================= */

/* ─── Head ─────────────────────────────────────────────────────────────── */
.panel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(180deg, #fbfdff 0%, var(--brand-color-surface-muted, #f5f8fc) 100%);
  border-bottom: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
}

.panel-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.95rem;
  color: #fff;
  background: var(--brand-gradient-accent, linear-gradient(135deg, #0f88f2 0%, #1157bf 100%));
  box-shadow: 0 2px 6px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

/* A second tile on the same page leans on the deeper end of the same brand
   ramp, so two panels read as siblings rather than as two different systems. */
.panel-head-icon-alt {
  background: linear-gradient(135deg, var(--brand-color-accent-strong, #1157bf) 0%, #0b3f8f 100%);
}

.panel-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.panel-head-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: var(--brand-font-weight-semibold, 600);
  line-height: 1.25;
  color: var(--brand-color-heading, #0b1627);
  letter-spacing: normal;
}

.panel-head-sub {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--brand-color-text-muted, #5d6c80);
}

.panel-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 999px;
  background: var(--brand-color-surface, #fff);
  font-size: 0.72rem;
  font-weight: var(--brand-font-weight-medium, 500);
  color: var(--brand-color-text-muted, #5d6c80);
  white-space: nowrap;
}

.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.panel-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 9px;
  background: var(--brand-color-surface, #fff);
  color: var(--brand-color-text-muted, #5d6c80);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.panel-icon-btn:hover {
  color: var(--brand-color-accent-strong, #1157bf);
  border-color: rgba(15, 136, 242, 0.45);
  background: var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
  transform: translateY(-1px);
}

.panel-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

@media (max-width: 575.98px) {
  .panel-head-meta { display: none; }
}

/* ─── Toolbar under the head ───────────────────────────────────────────── */
.feed-toolbar {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  background: var(--brand-color-surface, #fff);
}

/* A segmented control, not a navbar. The markup this replaced on Överblick was
   a full Bootstrap navbar with a hamburger that collapsed two links on small
   screens; the two items fit on any width, so the toggler only ever hid them. */
.feed-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 999px;
  background: var(--brand-color-surface-muted, #f5f8fc);
  max-width: 100%;
}

.feed-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: var(--brand-font-weight-semibold, 600);
  color: var(--brand-color-text-muted, #5d6c80);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

/* A tab that only switches a feed in place is a button, not a link — säkerhet's
   police feed uses those. Strips the UA button chrome so the two forms render
   identically; .feed-tab.active (0,2,0) still beats this (0,1,1) on background. */
button.feed-tab {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.feed-tab:hover {
  color: var(--brand-color-accent-strong, #1157bf);
}

.feed-tab.active {
  background: var(--brand-color-surface, #fff);
  color: var(--brand-color-accent-strong, #1157bf);
  box-shadow: 0 1px 3px rgba(17, 28, 45, 0.12);
}

.feed-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

.feed-tab.dropdown-toggle::after {
  margin-left: 0.1rem;
  opacity: 0.7;
}

.feed-dropdown {
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(17, 28, 45, 0.12);
  padding: 0.3rem;
  font-size: 0.8rem;
}

.feed-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 7px;
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
  color: var(--brand-color-text, #122033);
}

.feed-dropdown .dropdown-item:hover,
.feed-dropdown .dropdown-item:focus {
  background: var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
  color: var(--brand-color-accent-strong, #1157bf);
}

.feed-dropdown .dropdown-item.active {
  background: var(--brand-color-accent, #0f88f2);
  color: #fff;
}

/* A preference list runs to every region the user follows — twenty-odd entries
   made the menu taller than the viewport, so the last ones were unreachable.
   The list scrolls at seven items. Whatever is pinned above the scroll box
   (the "Ändra preferenser" link and its divider) stays visible, because it
   leaves the page rather than filtering the feed and should not scroll away.

   The height is derived, not measured off a screenshot: it is the item's
   font-size × Bootstrap's 1.5 line-height plus the vertical padding from
   `.feed-dropdown .dropdown-item` above. Change that padding and this follows.
   Exactly seven items clear the cut, so the eighth is what the scrollbar is
   telling you about. */
.feed-dropdown {
  --fd-item-height: calc(0.8rem * 1.5 + 0.7rem);
  --fd-visible-items: 7;
}

.feed-dropdown-scroll {
  max-height: calc(var(--fd-item-height) * var(--fd-visible-items));
  overflow-y: auto;
  /* Keeps the wheel inside the menu once the list bottoms out instead of
     handing the scroll on to the page behind it. */
  overscroll-behavior-y: contain;
  padding-right: 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: #a9c4e3 transparent;
}

.feed-dropdown-scroll::-webkit-scrollbar {
  width: 8px;
}

.feed-dropdown-scroll::-webkit-scrollbar-thumb {
  background: #cfdcef;
  border-radius: 4px;
}

.feed-dropdown-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ─── Section icons ────────────────────────────────────────────────────── */
/* The icon that *labels a section* wears the same ramp as the panel-head tile,
   so a page's section marks read as one family instead of the per-page
   text-danger / text-warning / text-success / text-primary mix they used to be.
   Painted onto the glyph with background-clip so a bare <i> can carry the
   gradient without a tile wrapper in every template.

   Deliberately NOT applied to icons inside buttons, tabs, pills, badges or
   dropdowns: those mark an action or a filter, and their colour is what tells
   them apart from the section marks.

   !important for the same reason Bootstrap's own .text-* utilities carry it —
   this has to beat those utilities and page-scoped descendant rules such as
   `.pol-panel-title i`, all of which load after this file. */
.section-icon {
  color: var(--brand-color-accent-strong, #1157bf) !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-icon {
    background-image: var(--brand-gradient-accent, linear-gradient(135deg, #0f88f2 0%, #1157bf 100%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-icon-btn,
  .panel-icon-btn:hover,
  .feed-tab {
    animation: none;
    transform: none;
    transition: none;
  }
}