/* MAILMALLAR PÅ DATORN — datorrundan AT-74, 2026-10-15 (designtråd 4).
   Mallkorten som adminkorten (admin-cards-desktop.css): svag ram, 14px hörn, mjuk skugga; agentens
   identitetskant (inline 3px, templates-view.js #450) behålls. Vald mall (.active, templates-view.js)
   följer SEL-standarden. Temafilerna sätter .template-item-bakgrund/-ram med !important ⇒ id-förankrat. */
@media (min-width: 769px) {
  html body #view-templates #template-list .template-item.template-item {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 38%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 38%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 38%, transparent) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-dark-secondary, var(--bg-dark-primary))) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px -6px rgba(0, 0, 0, 0.18) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  html body #view-templates #template-list .template-item.template-item:not(.active):hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-secondary, var(--bg-dark-primary))) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 8px 18px -8px rgba(0, 0, 0, 0.24) !important;
    transform: translateY(-1px);
  }
  html body #view-templates #template-list .template-item.template-item.active {
    background: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)), color-mix(in srgb, var(--sel-edge) 14%, var(--bg-dark-secondary, var(--bg-dark-primary))) !important;
    border-top-color: var(--sel-edge) !important;
    border-right-color: var(--sel-edge) !important;
    border-bottom-color: var(--sel-edge) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sel-edge) 35%, transparent), 0 4px 12px -6px rgba(0, 0, 0, 0.2) !important;
  }
  /* Redigeraren: temats linjer runt verktygsraden (apple-light-green.css:1448 m.fl.) mjukare, som övriga ramar. */
  /* Fotlisten (radera/spara): templates-view.css:118 hårdkodade rgba(0,0,0,.42) !important = grumligt band i ljusa teman
     (Patrik 10-15: "känns fel i färgerna på många teman, nästan hårdkodad") ⇒ svag ton i temats accent. */
  html body #view-templates .detail-footer-toolbar.detail-footer-toolbar {
    background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent) !important;
  }
  html body #view-templates .ql-toolbar.ql-snow {
    border-top: 0 !important; /* titelbandet har underkanten — annars dubbel linje i ljusa teman */
    border-bottom-color: color-mix(in srgb, var(--border-color) 40%, transparent) !important;
  }
  /* Titelbandet (Patrik 10-15: "göra headern smalare ... se mer av textrutan", "snyggare"): 121px med etikett ovanför och
     fältets margin-bottom 24px ⇒ en rad (etikett + fält, ev. kategorin bredvid), samma ton som fotlisten. */
  html body #view-templates #template-editor-form > .detail-header-top.detail-header-top {
    display: flex !important; align-items: center; gap: 16px;
    padding: 10px 18px !important; min-height: 0 !important;
    background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent) !important;
  }
  html body #view-templates #template-editor-form > .detail-header-top > div { flex-direction: row !important; align-items: center; gap: 10px !important; min-width: 0; }
  html body #view-templates #template-editor-form > .detail-header-top > div:first-child { flex: 1 1 auto; }
  html body #view-templates #template-editor-form > .detail-header-top > div > label { margin: 0 !important; white-space: nowrap; }
  html body #view-templates #template-editor-form > .detail-header-top > div > input.filter-input { margin: 0 !important; flex: 1 1 auto; min-width: 0; max-width: 520px; }
  /* Spara/radera (Patrik 10-15 frågade om placeringen; beslut: spara kvar nere till höger, radera nere till vänster) —
     spara var en 14px diskettikon utan hovertext ⇒ tydlig Spara-knapp i accent (grå när inget ändrats), radera röd vid hover. */
  html body #view-templates .detail-footer-toolbar.detail-footer-toolbar { justify-content: flex-end !important; align-items: center; }
  html body #view-templates #delete-template-btn.footer-icon-btn { order: -1; margin-right: auto !important; color: var(--text-secondary) !important; background: transparent !important; border-radius: 8px !important; }
  html body #view-templates #delete-template-btn.footer-icon-btn svg, html body #view-templates #delete-template-btn.footer-icon-btn svg * { fill: none !important; stroke: currentColor !important; }
  html body #view-templates #delete-template-btn.footer-icon-btn:hover { color: #e5484d !important; background: rgba(229, 72, 77, 0.10) !important; }
  html body #view-templates #save-template-btn.footer-icon-btn {
    width: 34px !important; height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 999px !important; font-size: 13px; font-weight: 600;
    background: var(--accent-primary) !important; color: #fff !important; opacity: 1 !important; cursor: pointer;
  }
  html body #view-templates #save-template-btn.footer-icon-btn:not(:disabled):hover { filter: brightness(1.08); }
  html body #view-templates #save-template-btn.footer-icon-btn:disabled {
    background: color-mix(in srgb, var(--border-color) 22%, transparent) !important; color: var(--text-secondary) !important; cursor: default;
  }
}