/* ============================================
   assets/css/list-tools.css
   Delad sorteringsikon + meny (Admin, Inkorgen, Mina ärenden, Garaget, Kunder) och snabbknappar
   (Inkorgen, Mina ärenden), filterikonen med textraden och Garagets hopfällda filterblock (AT-151). Lyft ur style-admin.css (#view-admin .admin-office-sort-*) 2026-10-23
   så att admin och listorna ser likadana ut. JS: modules/list-tools.js (listorna), admin-core.js (admin).
   Selektorerna bär vy-id i :is() för samma specificitet som admins tidigare regler (1,1,0).
   Bara temats tokens — fungerar i ljusa och mörka teman.
   ============================================ */

/* Sökrutan med ikonen inne till höger (listorna; admin har .admin-list-search-field). */
.list-search-field { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
:root body .list-panel-search .list-search-field.has-list-sort > .filter-input { padding-right: 40px !important; }

/* Sorteringsknappen: ingen ram (husregel), dämpad färg, accent vid hover/öppen meny. */
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 8px; }
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn:hover,
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn[aria-expanded="true"] { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
/* Admin styr själv när knappen syns (style-admin.css); listorna visar den alltid. */
:is(#view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn { display: flex; }
/* Annat val än standard: ikonen i accentfärg så att agenten ser att listan är omsorterad. */
:is(#view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn.is-active { color: var(--accent-primary); }

/* Menyn */
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 150px; padding: 4px; display: flex; flex-direction: column; background: var(--bg-dark-secondary, var(--bg-dark-primary)); border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3); }
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu[hidden] { display: none; }
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu button { text-align: left; padding: 8px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; cursor: pointer; }
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu button:hover { background: var(--sel-fill-hover, color-mix(in srgb, var(--accent-primary) 8%, transparent)); }
:is(#view-admin, #view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu button[aria-checked="true"] { color: var(--accent-primary); font-weight: 600; }
/* Listornas meny har längre etiketter än admins. */
:is(#view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-menu { min-width: 220px; }

/* Snabbknapparna: egen rad under sökrutan i samma .list-panel-search (följer med när den är sticky på mobil). */
.list-panel-search.has-quick-filters { flex-wrap: wrap; }
.list-quick-filters { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; min-width: 0; }
.list-quick-filters[hidden] { display: none; }
.list-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.list-chip:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.list-chip.is-active { color: var(--accent-primary); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); font-weight: 600; }
.list-chip-count { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* Tomläget när snabbknapparna tömt listan: "Rensa" som länk. */
.list-filter-clear { border: none; background: none; padding: 0; margin-left: 4px; color: var(--accent-primary); font: inherit; text-decoration: underline; cursor: pointer; }

/* ── Filterikonen (AT-151): Lucide list-filter direkt vänster om sorteringsikonen, samma mått och färg.
   Fäller ihop/ut snabbknapparna (Inkorgen, Mina ärenden) och Garagets filterblock. ── */
:root body .list-panel-search .list-search-field.has-list-sort.has-list-filter > .filter-input { padding-right: 72px !important; }
:is(#view-inbox, #view-my-tickets, #view-archive) .list-filter-btn { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 8px; }
:is(#view-inbox, #view-my-tickets, #view-archive) .list-filter-btn:hover { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
/* Hopfällt med aktiva filter: accentfärg och antal, så att en filtrerad lista aldrig ser ofiltrerad ut (A3). */
:is(#view-inbox, #view-my-tickets, #view-archive) .list-filter-btn.is-active { color: var(--accent-primary); }
.list-filter-count { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: var(--accent-primary); color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.list-filter-count[hidden] { display: none; }

/* Snabbknapparna fälls ihop mjukt; hopfällda är de inte klickbara (inert sätts i list-tools.js). */
.list-quick-filters { max-height: 200px; transition: max-height 0.2s ease, opacity 0.15s ease, padding-top 0.2s ease, visibility 0s linear 0s; }
.list-quick-filters.is-collapsed { max-height: 0; padding-top: 0; opacity: 0; overflow: hidden; visibility: hidden; pointer-events: none; transition: max-height 0.2s ease, opacity 0.15s ease, padding-top 0.2s ease, visibility 0s linear 0.2s; }

/* Textraden "Visar N av M: …" + Rensa (A4/A7). Syns även när filtren är hopfällda. */
.list-panel-search.has-filter-summary { flex-wrap: wrap; }
.list-filter-summary { flex: 0 0 100%; min-width: 0; padding-top: 6px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.list-filter-summary[hidden] { display: none; }
.list-filter-summary .list-filter-clear { margin-left: 6px; }
/* Mobilens knappregler (min-height för träffytan) får inte göra Rensa-raden högre än texten. */
:root body .list-panel-search .list-filter-summary .list-filter-clear { min-height: 0 !important; height: auto !important; padding: 0 !important; line-height: inherit !important; vertical-align: baseline; }

/* Garaget: hopfällt filterblock tar ingen plats; titelraden står kvar utan tomt band (A6).
   Utfällt rörs ingenting: samma DOM, samma regler för > div:nth-child(2). */
#view-archive #archive-wide-header .archive-filter-section { max-height: 480px; transition: max-height 0.2s ease, opacity 0.15s ease, visibility 0s linear 0s; }
#view-archive #archive-wide-header.is-list-filters-collapsed .archive-filter-section { max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; overflow: hidden; visibility: hidden; pointer-events: none; transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease, visibility 0s linear 0.2s; }
html body #view-archive #archive-wide-header.is-list-filters-collapsed { min-height: 0 !important; }
html body #view-archive #archive-wide-header.is-list-filters-collapsed .archive-rect-section { padding-top: 14px !important; padding-bottom: 14px !important; }

@media (prefers-reduced-motion: reduce) {
  .list-quick-filters, .list-quick-filters.is-collapsed,
  #view-archive #archive-wide-header .archive-filter-section,
  #view-archive #archive-wide-header.is-list-filters-collapsed .archive-filter-section { transition: none !important; }
}

/* Mobil: knappraden scrollar i sidled i stället för att bryta rad; större träffyta. */
@media (max-width: 768px) {
  .list-quick-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .list-quick-filters::-webkit-scrollbar { display: none; }
  .list-chip { padding: 6px 12px; font-size: 13px; }
  :is(#view-inbox, #view-my-tickets, #view-archive, #view-customers) .list-sort-btn { width: 36px; height: 36px; right: 4px; }
  /* Mobilens tömkryss (mobile-soft-ui.js, right 10px) flyttas vänster om sorteringsikonen. */
  :root body .list-search-field.has-list-sort button.ledare-sokkryss.ledare-sokkryss { right: 44px !important; }
  :root body .list-panel-search .list-search-field.has-list-sort > .filter-input[data-ledare-sokkryss] { padding-right: 80px !important; }
  /* Med filterikonen: samma träffyta som sorteringsikonen, tömkrysset vänster om båda. */
  :is(#view-inbox, #view-my-tickets, #view-archive) .list-filter-btn { width: 36px; height: 36px; right: 42px; }
  .list-filter-count { top: 3px; right: 2px; }
  :root body .list-search-field.has-list-sort.has-list-filter button.ledare-sokkryss.ledare-sokkryss { right: 82px !important; }
  :root body .list-panel-search .list-search-field.has-list-sort.has-list-filter > .filter-input { padding-right: 82px !important; }
  :root body .list-panel-search .list-search-field.has-list-sort.has-list-filter > .filter-input[data-ledare-sokkryss] { padding-right: 118px !important; }
}