/* ══════════════════════════════════════════════════════════════
   DASHBOARD GROUND — the brand's paper texture
   ══════════════════════════════════════════════════════════════
   bg.png is the mustard field from the logo lockups with the art
   removed: 1630x949, a 19-colour palette spanning #CFA930-#E1BA43,
   mean #D8B23B. Painting it here makes the dashboard the brand's
   paper and turns the cards into islands on it.

   It attaches to #PageBackground, which _Layout.cshtml:18 already
   ships and both themes make `position: fixed; inset: 0;
   z-index: -10000`. That element is empty and sits below every
   layer, so this cannot overlap, displace or intercept anything
   above it — the requirement is met structurally, not by tuning.

   body#s-DashboardPage comes from _Layout.cshtml:17 via the view's
   ViewData["PageId"], so no other page is affected and no markup
   was added. Specificity (2,0,1) beats the theme rule's (1,1,0).

   `cover` on a fixed layer means no tiling, so the texture's seams
   never come into it.                                             */
body#s-DashboardPage #PageBackground {
  background-color: var(--bs-body-bg);
  background-image:
    linear-gradient(var(--s-dash-veil), var(--s-dash-veil)),
    url(/Content/site/images/logo/bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
}
@media print {
  body#s-DashboardPage #PageBackground { display: none !important; }
}

/* ── Cards float on the textured ground ───────────────────────
   A translucent FILL, never `opacity` on the card. Opacity applies
   to the element as a whole, so it would fade the 38px figures,
   the icons and the chart canvases along with the background —
   the content has to stay at full strength.

   Bootstrap's --bs-card-bg would otherwise resolve to --bs-body-bg
   and paint the card opaque, so this has to override it.          */
body#s-DashboardPage .s-dashboard-card,
body#s-DashboardPage .s-dashboard-card-sm {
  background-color: var(--s-dash-card-bg);
}

/* The KPI footer was pinned to --bs-body-bg, which inside a
   translucent card renders as an opaque strip across its bottom.
   Let the card's own fill show through instead. */
body#s-DashboardPage .s-dashboard-card-sm .card-footer {
  background-color: transparent;
}

/* ── Small semantic text on the warm card ─────────────────────
   The KPI label and trend line are the only small text on this
   surface, and Bootstrap's defaults are tuned for paper. Against a
   card that composites to ~#F2E7C5 they measure 3.93 / 3.87 / 4.42,
   all under AA. The tokens hold one darkened step per hue, so the
   meaning (grey = label, green = up, red = down) is unchanged.

   !important is required: Bootstrap's .text-* utilities carry it. */
body#s-DashboardPage .s-dashboard-card-sm .text-muted {
  color: var(--s-dash-muted) !important;
}
body#s-DashboardPage .s-dashboard-card-sm .text-success {
  color: var(--s-dash-success) !important;
}
body#s-DashboardPage .s-dashboard-card-sm .text-danger {
  color: var(--s-dash-danger) !important;
}

/* ── KPI figure — ink, not semantic colour ────────────────────
   The markup asks for `text-@kpi.Color` on a 38px number, and the
   four KPI colours are primary, success, info, warning. Three of
   those cannot be read: --bs-primary and --bs-warning are both
   --wgl-yellow (1.4:1 on any light surface) and --bs-info is never
   mapped in the theme, so it falls through to Bootstrap's default
   cyan — a hue the brand does not own.

   A figure is data, so it takes ink. The semantic colour stays on
   the icon and the border, where being decorative is fine and
   contrast is not a reading problem. Four giant numbers in four
   different colours was noise regardless of legibility.

   !important is required: Bootstrap's .text-* utilities carry it. */
body#s-DashboardPage .s-dashboard-card-sm h3 {
  color: var(--bs-heading-color) !important;
}

/* ── KPI accent — mapped to values that survive a light card ──
   The four KPI colours (primary / success / info / warning) are
   decorative: they mark which card is which, they do not encode
   good or bad. The real semantic signal is the trend arrow below
   the figure, which keeps text-success / text-danger untouched.

   Two of the four resolve to --wgl-yellow, which is 1.4:1 on a
   light card — a yellow glyph and a yellow hairline both simply
   vanish. --wgl-yellow-deep is the documented escape hatch for
   yellow-family marks on light (tokens.css:16-17). --bs-info is
   unmapped in the theme and would fall through to Bootstrap's
   default cyan, so it takes a brand neutral instead.            */
body#s-DashboardPage .s-dashboard-card-sm.border-primary,
body#s-DashboardPage .s-dashboard-card-sm.border-warning {
  border-color: var(--wgl-yellow-deep) !important;
}
body#s-DashboardPage .s-dashboard-card-sm .icon.text-primary,
body#s-DashboardPage .s-dashboard-card-sm .icon.text-warning {
  color: var(--wgl-yellow-deep) !important;
}
body#s-DashboardPage .s-dashboard-card-sm.border-info {
  border-color: var(--wgl-gray) !important;
}
body#s-DashboardPage .s-dashboard-card-sm .icon.text-info {
  color: var(--wgl-gray) !important;
}

.s-dashboard-card,
.s-dashboard-card-sm {
  margin-bottom: var(--bs-gutter-x);
}
.s-dashboard-card .card-header {
  padding: 1rem;
  border-bottom: none;
  background-color: transparent;
}
.s-dashboard-card .card-body {
  border-radius: 0 0 4px 4px;
  padding: 1rem;
  max-height: 500px;
  overflow-y: auto;
}
.s-dashboard-card .card-body2 {
  border-radius: 0 0 4px 4px;
  padding: 3rem;
  max-height: 500px;
}
.s-dashboard-card .card-footer {
  border-top-color: transparent;
  background-color: transparent;
  padding: 1rem;
}
.s-dashboard-card .card-title {
  margin: 0;
  font-size: 1.4rem;
  /* was var(--s-table-title), which is defined neither in this project
     nor in Serenity's assets — the colour has been falling through to
     whatever .card inherited. Made explicit now that these titles sit
     on a solid card over the textured ground. */
  color: var(--bs-heading-color);
}
.s-dashboard-card-sm .card-body {
  padding: 1rem;
  border-radius: 4px 4px 0 0;
  margin: 1px;
}
.s-dashboard-card-sm .card-footer {
  color: rgba(var(--s-bright-rgb), 0.8);
  background-color: var(--bs-body-bg);
  border-radius: 0 0 4px 4px;
  border-top: none;
  margin: 0 1px 1px 1px;
  padding: 3px 0;
  text-align: center;
  text-decoration: none;
}
.s-dashboard-card-sm h3 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.s-dashboard-card-sm p {
  font-size: 15px;
}
.s-dashboard-card-sm p > small {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.s-dashboard-card-sm .icon {
  transition: all 0.3s linear;
  position: absolute;
  top: 13px;
  opacity: 0.9;
  right: 10px;
  font-size: 64px;
  color: var(--bs-heading-color);
}
.bg-world-map {
  background: var(--wgl-ink2);
}
.s-dashboard-card-sm:hover .icon {
  font-size: 70px;
}
.chips_container {
  height: 488px;
  overflow-y: auto;
  margin: 1rem;
}
/* Chart Styling */
.chart-container {
  padding: 10px;
}
.chart-legend-inline {
  display: flex;
  gap: 20px;
  font-size: 0.875rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Line-chart legend swatches ───────────────────────────────
   The trends chart separates its three series by dash pattern
   (the brand is single-hue, so color cannot do that job). These
   swatches reproduce the pattern so the key actually keys. ── */
.legend-line {
  display: inline-block;
  width: 22px;
  height: 0;
  vertical-align: middle;
  border-top-width: 2px;
}
.legend-line-solid  { border-top: 2px solid  var(--wgl-yellow-deep); }
.legend-line-dashed { border-top: 2px dashed var(--bs-body-color); }
.legend-line-dotted { border-top: 2px dotted var(--wgl-gray); }

/* ── Country share bars — single measure, so one brand fill on a
      tint track. No gradient: a gradient across a bar implies a
      second variable that isn't there. ── */
.country-item .progress {
  background-color: var(--wgl-tint);
}
.country-item .progress-bar {
  background-color: var(--wgl-yellow);
}
.legend-color {
  border-radius: 50%;
  display: inline-block;
}
.insight-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wgl-paper) !important;
}
.traffic-sources-legend .legend-color {
  width: 16px;
  height: 16px;
}
.country-item {
  transition: all 0.2s ease;
}
.country-item:hover {
  transform: translateX(4px);
}
.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}


.content-header {
  padding-bottom: 0px !important;
}
/* ===== RTL support — mirror LTR directional rules to match the English layout ===== */
[dir="rtl"] .s-dashboard-card-sm .icon { right: auto; left: 10px; }
[dir="rtl"] .country-item:hover { transform: translateX(-4px); }