/* ============================================================================
   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;
  flex-wrap: wrap;   /* the last resort — see "Phones" below */
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  /* Half a single row's height: the same pill on one line, a rounded box —
     not an overflowing pill — if the tabs ever have to wrap. */
  border-radius: 17px;
  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;
}

/* A dropdown whose label is rewritten to whatever the user picked — the source
   filter on Elmarknad, the region filters on Säkerhet and Politik — can be
   handed a name several times longer than its idle label ("Energimyndigheten"
   against "Källor").

   Two defaults conspire to make that burst the pill instead of truncating:
   .feed-tab sets white-space: nowrap, and a flex item's min-width is `auto`,
   which means "never shrink below your content". .feed-tabs' max-width: 100%
   then caps the container while its child keeps its full width, and the button
   overflows the rounded border — worst in a narrow column like the elmarknad
   feed, which is where it was first seen.

   So: let the items shrink, and let the *label* be the part that gives. */
.feed-tabs > .dropdown {
  min-width: 0;
  /* Line-breaking uses the flex basis, so a basis of just icon + caret keeps
     the menu on the tabs' line until not even that fits; it then grows back
     to its full label wherever there is room, and no further. */
  flex: 1 1 calc(1.1rem + 1em + 0.35rem + 0.8em);
  max-width: max-content;
}

.feed-tab.dropdown-toggle {
  min-width: 0;
  max-width: 100%;
}

.feed-tab.dropdown-toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* The funnel and the caret are the affordance — they say "this filters, and it
   opens". Only the text may be clipped. */
.feed-tab.dropdown-toggle > i,
.feed-tab.dropdown-toggle::after {
  flex: 0 0 auto;
}

/* ─── Phones ──────────────────────────────────────────────────────────────
   Four or five tabs plus a region menu are wider than a phone's toolbar.
   With min-width: 0 above, the menu was what gave way — squeezed until its
   pin and caret spilled out over the pill's rounded edge (Mediasvepet at
   ≤390px). Three steps, cheapest first:

   1. Tighter tabs: less side padding and gap. Enough for five tabs and a
      menu down to ~340px.
   2. The menu toggle keeps room for its icon and caret: only the label may
      collapse, never the affordance.
   3. If it still does not fit, the row wraps inside its rounded box rather
      than overflowing it (flex-wrap on .feed-tabs, at every width). */
@media (max-width: 575.98px) {
  .feed-tabs {
    gap: 0.1rem;
  }

  .feed-tab {
    padding: 0.32rem 0.55rem;
  }

  .feed-tab.dropdown-toggle {
    /* side padding + icon + gap + caret */
    min-width: calc(1.1rem + 1em + 0.35rem + 0.8em);
  }
}

.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;
  }
}