/* ============================================
   assets/css/list-tools.css
   Delad sorteringsikon + meny (Admin, Inkorgen, Mina ärenden, Garaget, Kunder) och snabbknappar
   (Inkorgen, Mina ärenden). 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; }

/* 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; }
}