/**
 * TFICO Hints System — Hover Tooltips + Global Custom Cursor
 * Created: 2026-04-17
 * Updated: 2026-05-04 — cursor now global (all pages, all states, no toggle required)
 *
 * Provides informative hover tooltips for every UI element
 * across all platform pages.
 *
 * Requires: hints.js
 */

/* ─── Tooltip bubble ─────────────────────────────────────── */

.hint-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 280px;
  padding: 10px 14px;
  background: rgba(15, 17, 22, 0.93);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  user-select: none;

  /* Hidden by default */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hint-tooltip.hint-visible {
  opacity: 1;
  transform: translateY(0);
}

.hint-tooltip__title {
  display: block;
  color: #fdcb6e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.3;
}

.hint-tooltip__body {
  display: block;
  color: #f0f0f0;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ─── Global custom cursor — ALWAYS ON, all pages ───────────── */
/* White-filled arrow, black shadow. Two-layer SVG (drop-shadow
   filters don't render inside cursor data URIs).
   ViewBox: -3 -3 28 28 (expanded to prevent stroke clipping).
   Hotspot: 6 6 (tip of arrow). */

html,
html * {
  cursor: url("data:image/svg+xml,%3Csvg width='28px' height='28px' viewBox='-3 -3 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 10.2069L3 3L10.2069 22L13.4828 13.4828L22 10.2069Z' stroke='%231a1a1a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='%231a1a1a'/%3E%3Cpath d='M22 10.2069L3 3L10.2069 22L13.4828 13.4828L22 10.2069Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='%23ffffff'/%3E%3C/svg%3E") 6 6, auto !important;
}

/* Pointer cursor on all clickable / interactive elements */
html a,
html button,
html [role="button"],
html select,
html label,
html input[type="submit"],
html input[type="button"],
html input[type="reset"],
html input[type="checkbox"],
html input[type="radio"],
html input[type="range"],
html input[type="file"],
html [onclick],
html [tabindex]:not([tabindex="-1"]),
html .menu-link,
html .ccard-expand-btn,
html .fcard-open-btn,
html .preset-btn,
html .cake-card-open,
html .cake-filter-btn,
html .rpt-tab,
html .hints-toggle-panel,
html summary {
  cursor: url("data:image/svg+xml,%3Csvg width='28px' height='28px' viewBox='-3 -3 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 10.2069L3 3L10.2069 22L13.4828 13.4828L22 10.2069Z' stroke='%231a1a1a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='%231a1a1a'/%3E%3Cpath d='M22 10.2069L3 3L10.2069 22L13.4828 13.4828L22 10.2069Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='%23ffffff'/%3E%3C/svg%3E") 6 6, pointer !important;
}

/* Text inputs — preserve I-beam (critical for usability) */
html input[type="text"],
html input[type="email"],
html input[type="password"],
html input[type="search"],
html input[type="number"],
html input[type="date"],
html input[type="time"],
html input[type="url"],
html input[type="tel"],
html textarea,
html [contenteditable="true"] {
  cursor: text !important;
}

/* ─── Toggle panel (bottom-right, fixed) ─────────────────── */

.hints-toggle-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000000;

  /* Fade in after 1.5s */
  opacity: 0;
  animation: hints-panel-fadein 0.4s ease 1.5s forwards;

  /* [TARGETED: 2026-04-22] Ubuntu Yaru-style cursor — compact arrow, no long tail,
     white fill + near-black stroke. Hotspot at tip (4,2). Fallback: pointer. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M 4 2 L 4 19 L 8 15 L 11 21 L 13.5 20 L 10.5 14 L 16 14 Z' fill='white' stroke='%231a1a1a' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 2, pointer;
  user-select: none;
}

@keyframes hints-panel-fadein {
  to { opacity: 1; }
}

.hints-toggle-panel:hover {
  box-shadow: 4px 4px 0 #000000;
  transform: translate(-1px, -1px);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.hints-toggle-panel:active {
  box-shadow: 1px 1px 0 #000000;
  transform: translate(1px, 1px);
}

.hints-toggle-icon {
  font-size: 16px;
  line-height: 1;
}

.hints-toggle-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #222;
  line-height: 1;
}

/* Pill switch */
.hints-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 10px;
  transition: background 0.35s ease;
  flex-shrink: 0;
}

.hints-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.35s ease;
}

/* ON state */
.hints-toggle-panel.hints-on .hints-toggle-switch {
  background: #f59e0b;
}

.hints-toggle-panel.hints-on .hints-toggle-switch::after {
  left: 19px;
}

.hints-toggle-panel.hints-on .hints-toggle-label {
  color: #b45309;
  font-weight: 900;
}

/* ─── Mobile: hide everything ────────────────────────────── */

@media (max-width: 768px) {
  .hints-toggle-panel {
    display: none !important;
  }

  .hint-tooltip {
    display: none !important;
  }
}