/* SVARSRADEN PÅ DATORN — datorrundan AT-74, 2026-10-14.
   Mallväljarna (.atlas-tmpl-trigger, style-tickets.css:2443) följer temat i stället för den gamla mörka filterbasen
   (style-tickets.css:384-399: svart 28 % + vit kant, även i ljusa teman).
   10-15 (designtråd 4, Patrik): mallväljaren är en ikonknapp ÖVERALLT på datorn — svarsfälten, läsarna, Nytt meddelande
   (extern + intern), Kunders mejl. Texten "Kopiera mailmall" bärs av title (ui-constants.js). :is(body,#q#q) slår temafilernas
   id-regler (t.ex. apple-light-green.css:1930 #atlas-mail-composer/#…-reader-modal .atlas-tmpl-trigger). */
@media (min-width: 769px) {
  :root :is(body, #q#q) .atlas-tmpl-trigger.atlas-tmpl-trigger {
    width: 32px !important; min-width: 0 !important; max-width: 32px !important; flex: 0 0 32px !important; height: 32px !important;
    padding: 0 !important; gap: 0 !important; justify-content: center !important;
    border: 0 !important; border-radius: 8px !important; box-shadow: none !important; backdrop-filter: none !important;
    background: transparent !important; color: var(--detail-accent, var(--accent-primary)) !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-trigger.atlas-tmpl-trigger:is(:hover, .open) {
    background: color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 12%, transparent) !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-trigger.atlas-tmpl-trigger > span,
  :root :is(body, #q#q) .atlas-tmpl-trigger.atlas-tmpl-trigger .atlas-tmpl-chevron { display: none !important; }
  :root :is(body, #q#q) .atlas-tmpl-trigger.atlas-tmpl-trigger > svg:first-child { width: 18px !important; height: 18px !important; }
  /* Kunders mejlruta: skicka stod efter den breda mallknappen — längst till höger nu när mallknappen är en ikon. */
  html body .cust-mail-compose-actions > #cust-mail-send { margin-left: auto !important; }
}

/* AT-177 (Patrik 11-01): mallmenyn i samma mjuka stil som temarutan. Raderna i temats textfärg med en prick i
   gruppens färg (--tmpl-group sätts i ui-constants.js _makeItem); grupperna skiljs med luft i stället för linjer. */
@media (min-width: 769px) {
  :root :is(body, #q#q) .atlas-tmpl-panel.atlas-tmpl-panel {
    background: var(--bg-dark-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px color-mix(in srgb, #000 22%, transparent) !important;
    padding: 6px !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-panel .atlas-tmpl-group-header {
    border-top: none !important; margin-top: 8px !important; padding: 6px 10px 4px !important; opacity: 1 !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-panel .atlas-tmpl-group-header:first-child { margin-top: 0 !important; }
  :root :is(body, #q#q) .atlas-tmpl-panel .atlas-tmpl-item {
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 7px 12px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-panel .atlas-tmpl-item::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: var(--tmpl-group, var(--accent-primary));
  }
  :root :is(body, #q#q) .atlas-tmpl-panel .atlas-tmpl-item:is(:hover, .hover) {
    background: color-mix(in srgb, var(--tmpl-group, var(--accent-primary)) 14%, transparent) !important;
    color: var(--text-primary) !important;
  }
  :root :is(body, #q#q) .atlas-tmpl-preview.atlas-tmpl-preview {
    background: var(--bg-dark-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 35%, transparent) !important;
    backdrop-filter: none !important;
  }
}