/* Reporty tooltip (S1: brand design + motion). Driven by data-tip; see docs/tooltip-combined-plan-scratch.md */
:root {
    --tip-main: #1565d8;
    --tip-grad: #0b73e8;
    --tip-fg: #ffffff;
    --tip-shadow-color: #111827;
    --tip-radius: 8px;
    --tip-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tip-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --tip-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --tip-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); /* small overshoot; raise 1.45 for more bounce */
    --tip-ease-out: cubic-bezier(0.4, 0, 1, 1);
    --tip-dur-in: 220ms;
    --tip-dur-out: 120ms;
    --tip-dur-fade: 140ms;
    --tip-warn: #b45309;
    --tip-warn-grad: #c2410c;
    --tip-ok: #047857;
    --tip-ok-grad: #0f766e;
}

.reporty-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000; /* above Bootstrap modals (1050) and report-page overlays */
    max-width: min(260px, calc(100vw - 16px));
    padding: 7px 11px;
    border-radius: var(--tip-radius);
    background: linear-gradient(135deg, var(--tip-main), var(--tip-grad));
    color: var(--tip-fg);
    font-family: var(--tip-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.18), 0 4px 10px rgba(17, 24, 39, 0.16), 0 10px 24px rgba(17, 24, 39, 0.12);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    scale: 0.9;
    transition: opacity var(--tip-dur-out) var(--tip-ease-out), translate var(--tip-dur-out) var(--tip-ease-out),
        scale var(--tip-dur-out) var(--tip-ease-out), visibility 0s linear var(--tip-dur-out);
}

/* Enter: directional slide + fade + scale from the target side (compositor-only properties) */
.reporty-tip[data-pos="top"] { translate: 0 6px; transform-origin: var(--tip-arrow-x, 50%) 100%; }
.reporty-tip[data-pos="bottom"] { translate: 0 -6px; transform-origin: var(--tip-arrow-x, 50%) 0; }
.reporty-tip[data-pos="left"] { translate: 6px 0; transform-origin: 100% var(--tip-arrow-y, 50%); }
.reporty-tip[data-pos="right"] { translate: -6px 0; transform-origin: 0 var(--tip-arrow-y, 50%); }

.reporty-tip.is-visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition: opacity var(--tip-dur-fade) ease, translate var(--tip-dur-in) var(--tip-ease-spring),
        scale var(--tip-dur-in) var(--tip-ease-spring), visibility 0s;
}

/* Live reposition to another target while visible: no re-entry animation */
.reporty-tip.is-moving,
.reporty-tip.is-moving.is-visible {
    transition: none;
}

/* Text cross-fade when the same target changes its text (state toggles) */
.reporty-tip.is-swap {
    animation: reporty-tip-swap var(--tip-dur-fade) ease;
}

@keyframes reporty-tip-swap {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

/* Arabic / RTL: roomier line-height and the Arabic font stack */
.reporty-tip[dir="rtl"] {
    font-family: var(--tip-font-ar);
    line-height: 1.7;
}

/* Variants */
.reporty-tip--warn {
    background: linear-gradient(135deg, var(--tip-warn), var(--tip-warn-grad));
}

.reporty-tip--ok {
    background: linear-gradient(135deg, var(--tip-ok), var(--tip-ok-grad));
}

.reporty-tip--rich {
    max-width: min(280px, calc(100vw - 16px));
    text-align: start;
}

.reporty-tip__title {
    font-weight: 600;
}

.reporty-tip__body {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.92;
}

/* Decorative title icons (rich tips with data-tip-icon). Drawn with a mask so the colour follows the text. */
.reporty-tip[data-icon] .reporty-tip__title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reporty-tip[data-icon] .reporty-tip__title::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--tip-icon) center / contain no-repeat;
    mask: var(--tip-icon) center / contain no-repeat;
}

/* Icons: Feather-style 24px strokes */
.reporty-tip[data-icon="home"] { --tip-icon: 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='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="user"] { --tip-icon: 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="wallet"] { --tip-icon: 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%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="clinic"] { --tip-icon: 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='M4 21V4h10v17'/%3E%3Cpath d='M14 10h6v11'/%3E%3Cpath d='M9 8v4M7 10h4'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="calendar"] { --tip-icon: 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%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="users"] { --tip-icon: 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%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-4 3-6 7-6s7 2 7 6'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 010 7M22 20c0-3-2-5-4-5.5'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="pill"] { --tip-icon: 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%3Crect x='2.5' y='8.5' width='19' height='7' rx='3.5' transform='rotate(-45 12 12)'/%3E%3Cpath d='M8.5 8.5l7 7'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="file"] { --tip-icon: 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='M6 2h8l5 5v15H6z'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h7'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="chat"] { --tip-icon: 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='M21 12a8 8 0 01-11.6 7.1L3 21l1.9-5.4A8 8 0 1121 12z'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="chart"] { --tip-icon: 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='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="inbox"] { --tip-icon: 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='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="gift"] { --tip-icon: 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%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M12 9v12M3 13h18'/%3E%3Cpath d='M12 9c-3 0-5-4-2-5s2 5 2 5zM12 9c3 0 5-4 2-5s-2 5-2 5z'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="sparkle"] { --tip-icon: 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='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M19 3v4M17 5h4'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="megaphone"] { --tip-icon: 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='M3 10v4h4l8 5V5L7 10z'/%3E%3Cpath d='M19 9a4 4 0 010 6'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="building"] { --tip-icon: 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%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M10 21v-4h4v4'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="plus"] { --tip-icon: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }

.reporty-tip[data-icon="link"] { --tip-icon: 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='M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/%3E%3Cpath d='M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="upload"] { --tip-icon: 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='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v4h16v-4'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="send"] { --tip-icon: 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='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="check"] { --tip-icon: 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%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="clock"] { --tip-icon: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.reporty-tip[data-icon="switch"] { --tip-icon: 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='M4 8h14M14 4l4 4-4 4'/%3E%3Cpath d='M20 16H6M10 12l-4 4 4 4'/%3E%3C/svg%3E"); }

/* Arrow; --tip-arrow-x is set by tooltip.js so it keeps pointing at the target after edge clamping */
.reporty-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow-x, 50%);
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.reporty-tip[data-pos="top"]::after { bottom: -4px; }
.reporty-tip[data-pos="bottom"]::after { top: -4px; }

.reporty-tip[data-pos="left"]::after,
.reporty-tip[data-pos="right"]::after {
    left: auto;
    top: var(--tip-arrow-y, 50%);
    transform: translateY(-50%) rotate(45deg);
}

.reporty-tip[data-pos="left"]::after { right: -4px; }
.reporty-tip[data-pos="right"]::after { left: -4px; }

/*
 * Disabled controls swallow mouse events in most browsers, so tooltip.js hit-tests them from the
 * parent. pointer-events:none makes the event reach the parent consistently.
 */
[data-tip]:disabled,
[data-tip][aria-disabled="true"] {
    pointer-events: none;
}

/* Touch: no iOS callout while holding to show a tip */
@media (hover: none) {
    [data-tip] { -webkit-touch-callout: none; }
}

/* Reduced motion: opacity only */
@media (prefers-reduced-motion: reduce) {
    .reporty-tip,
    .reporty-tip.is-visible {
        translate: none;
        scale: 1;
        transition: opacity var(--tip-dur-out) linear, visibility 0s;
    }
    .reporty-tip.is-swap { animation: none; }
}