/* Ticket header toggles as icon + switch, name on hover (2026-09-30). Companion to ticket-toggles.js; look only.
   The four switches in each ticket's header (Pause order cancellation, Refresh Orders, Allow API connection, Tail Control) lose their
   written label and get one icon each, so the row is short. The switch itself is unchanged and is the only thing that is clicked.
   The icon is grey when the switch is off and takes the accent colour when it is on, so the state still reads at a glance. The name
   shows in a small tip on hover or keyboard focus (drawn by the script).
   - Only on windows with real hover and wider than 700 px; touch screens keep the written labels.
   - Only on switches the script has tagged (data-tk); the label stays in the page for screen readers (font-size 0, not removed). */
@media (hover: hover) and (min-width: 701px) {
  html:not(.tt-a):not(.tt-b) .info-text:has(> mat-slide-toggle[data-tk]) { margin-left: 0 !important; }

  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk] {
    display: inline-flex; align-items: center; gap: 7px;
    vertical-align: middle;
    padding: 3px 6px 3px 4px;
    border-radius: 999px;
    transition: background .18s var(--ap-ease, ease);
  }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk]:hover { background: var(--ap-fill, rgba(120, 120, 128, .12)); }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk] .mdc-label { font-size: 0 !important; padding: 0 !important; margin: 0 !important; width: 0; overflow: hidden; }

  /* the icon, before the switch */
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk]::before {
    content: 'tune';
    font-family: 'Material Icons';
    font-weight: normal; font-style: normal;
    font-size: 18px; line-height: 1; width: 18px; height: 18px; flex: none;
    text-transform: none; letter-spacing: normal; white-space: nowrap; direction: ltr;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: var(--ap-text-2, #6b7280);
    transition: color .18s var(--ap-ease, ease);
  }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk="pause"]::before   { content: 'block'; }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk="refresh"]::before { content: 'sync'; }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk="api"]::before     { content: 'data_object'; }
  /* Tail Control: a bell curve (normal distribution) with a marker at the tail, drawn as a mask so it takes the icon colour. Not a font icon: none fits. */
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk="tail"]::before {
    content: ''; font-size: 0;
    background-color: currentColor;
    -webkit-mask: var(--tt-bell) center / contain no-repeat; mask: var(--tt-bell) center / contain no-repeat;
    --tt-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19C7 19 8 5 12 5s5 14 10 14'/%3E%3Cpath d='M16.4 19v-7c.9 4.4 2.9 7 5.6 7z' fill='black'/%3E%3C/svg%3E");
  }
  html:not(.tt-a):not(.tt-b) mat-slide-toggle[data-tk].mat-mdc-slide-toggle-checked::before { color: var(--ap-blue, #4f46e5); }
}

/* the shared tip (one element, on the page body) */
.tt-tip {
  position: fixed; left: 0; top: 0; z-index: 2100;
  padding: 6px 10px; border-radius: 8px;
  background: #0f172a; color: #f8fafc;
  font: 500 12px/1.35 var(--ap-font, system-ui, sans-serif); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .14s var(--ap-ease, ease);
}
.tt-tip.tt-on { opacity: 1; }
body.dark .tt-tip { background: #e2e8f0; color: #0f172a; }
@media (prefers-reduced-motion: reduce) { .tt-tip { transition: none; } }