/* Dashboard filter bar, favourite dashboards and "My dashboards" (js/admin/dash-filters.js). Tokens from admin.css only; logical properties for RTL.
   The bar is the shared list toolbar (.toolbar > .tb-main / .tb-tools, admin.css + lists.css): on a phone it folds into "Filters (n)" + Favourites. */
.df-bar { align-items: center; gap: 8px 12px; }
.df-bar > .tb-main { align-items: center; }
.df-filters { align-items: center; gap: 8px; }

/* period: one strip of buttons */
.df-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel-3); max-width: 100%; }
.df-seg-btn { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 650; white-space: nowrap; cursor: pointer; }
.df-seg-btn:hover { color: var(--ink); }
.df-seg-btn.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 25, .15); }
:root[data-theme="dark"] .df-seg-btn.on { background: var(--panel-2); }
.df-dates[hidden] { display: none; }

/* a styled choice: a button that opens the shared menu (a bottom sheet on a phone, like Favourites) */
.df-choice { gap: 6px; max-width: 340px; }
.df-choice-l { color: var(--muted); font-weight: 600; white-space: nowrap; }
.df-choice-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-choice-wrap.is-set .df-choice { border-color: var(--accent); color: var(--accent-d); }
.df-choice-wrap.is-set .df-choice-l { color: inherit; opacity: .8; }
.df-choice:disabled { opacity: .5; cursor: not-allowed; }
.df-menu { min-width: 220px; }
.df-menu button { justify-content: flex-start; }
.df-menu button[aria-selected="true"] { background: var(--accent-soft); }
.df-menu .df-off { visibility: hidden; }

/* kiosks: several can be picked */
.df-kiosks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.df-chip { min-height: 34px; cursor: pointer; font-family: inherit; }
.df-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-d); }
.df-chip:disabled { opacity: .5; cursor: not-allowed; }

/* the star of a page header */
.df-star.on, .df-dash-star.on { color: var(--warn); }
.df-star.on svg, .df-dash-star.on svg { fill: currentColor; }

/* a figure the filters do not touch */
.df-whole { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.card-head .df-whole { margin-inline-start: auto; }

/* My dashboards */
.df-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.df-dash-card { position: relative; display: flex; align-items: center; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.df-dash-card:hover { border-color: var(--accent); }
.df-dash-card.starred { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.df-dash-link { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 10px; padding-inline: 14px 6px; color: inherit; text-decoration: none; }
.df-dash-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.df-dash-txt { display: grid; min-width: 0; }
.df-dash-txt b, .df-dash-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-dash-star { flex: 0 0 auto; margin-inline-end: 4px; padding-inline: 10px; }

/* pinned report cards under the bar */
.rep-pin.is-loading .rep-pin-val, .rep-pin.is-loading .rep-pin-spark { opacity: .5; }
.rep-pin .rep-pin-val, .rep-pin .rep-pin-spark { transition: opacity .15s; }
.rep-pin-note { font-size: 11.5px; }
.rep-pin-note:empty { display: none; }
.df-pin-empty .empty { padding: 28px 20px; }
@media (prefers-reduced-motion: reduce) { .rep-pin .rep-pin-val, .rep-pin .rep-pin-spark { transition: none; } }

@media (max-width: 720px) {
  /* phone: row 1 = Filters (n) + Favourites; the filters open as rows below, two choices to a row */
  .df-sticky { position: sticky; top: var(--stick, 62px); z-index: 20; margin-inline: -14px; padding: 8px 14px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); }
  .df-filters { min-width: 0; max-width: 100%; }
  .df-filters .df-seg { flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .df-filters .df-seg::-webkit-scrollbar { display: none; }
  .df-seg-btn { flex: 0 0 auto; min-height: 40px; scroll-snap-align: center; }
  .df-filters .df-choice-wrap { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .df-filters .df-choice { width: 100%; max-width: none; min-height: 44px; justify-content: space-between; }
  .df-filters .df-dates { flex: 1 1 100%; }
  .df-dates .date-box, .df-dates .date-in { flex: 1 1 0; min-width: 0; width: auto; }
  .df-filters .df-kiosks { flex: 1 1 100%; }
  .df-chip { min-height: 40px; }
  .df-dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (max-height: 520px) { .df-sticky { top: var(--lic-h, 0px); } }
@media print { .df-bar, .df-star { display: none !important; } }

/* a filter change on the Manager dashboard: the old figures stay (dimmed) until the new ones arrive */
.mg-body.is-loading { opacity: .55; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .mg-body.is-loading { transition: none; } }
.df-dash-more { margin-top: 10px; }