/*
    Tooltip.css - styling for the single shared tooltip element created by
    Scripts/Utils/Util.Tooltip.js.

    There is only ever one .totm-tooltip in the document, appended to <body> and
    positioned in viewport coordinates (position: fixed), which is what keeps it
    from being clipped by the scheduler's many overflow containers.

    Everything here is built from Modern.css's --totm-* tokens, so the neutral
    chrome variant re-skins it by overriding one token at the bottom of this file
    rather than by restating any rules.

    Load order: after Modern.css (it consumes those tokens).
*/

:root {
    /* Deep brand blue by default, so the tooltip reads as part of the app's blue
       chrome rather than as an OS artefact. Overridden under neutral chrome below. */
    --totm-tooltip-bg: #0C447C;
    --totm-tooltip-text: #FFFFFF;
    --totm-tooltip-max-width: 280px;
}

.totm-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000; /* Above the highest dialog/panel in Scheduler.css (5000). */

    max-width: var(--totm-tooltip-max-width);
    padding: 6px 10px;
    box-sizing: border-box;

    background-color: var(--totm-tooltip-bg);
    color: var(--totm-tooltip-text);
    border-radius: 4px;
    box-shadow: var(--totm-shadow-hover);

    font-family: var(--totm-font);
    font-size: var(--totm-fs-xs);
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;

    /* Hidden by default. Kept in the DOM (rather than display:none) so the show
       transition has something to animate from, and pointer-events:none means the
       tooltip can never sit between the pointer and the element it describes -
       which would otherwise cause a hide/show flicker loop. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity var(--totm-motion), transform var(--totm-motion), visibility 0s linear 0.15s;
}

/*
    Util.Tooltip renders the text, then measures the element before deciding where
    to put it. During that measuring pass it must have real dimensions but must not
    be seen, so it is laid out off-screen rather than hidden.
*/
.totm-tooltip.is-measuring {
    visibility: hidden;
    opacity: 0;
    left: -9999px;
    top: -9999px;
    transition: none;
}

.totm-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity var(--totm-motion), transform var(--totm-motion), visibility 0s;
}

.totm-tooltip-body {
    position: relative;
    z-index: 1; /* Above the arrow, so the arrow never shows through the text. */
}

/*
    The arrow is a rotated square rather than a border triangle, so it inherits the
    body's background colour (one token to change, not three border colours) and
    picks up a slice of the same shadow.

    Its position along the edge is set inline by Util.Tooltip - left for the
    top/bottom placements, top for left/right - so it keeps pointing at the middle
    of the target even when the tooltip has been clamped against a viewport edge.
*/
.totm-tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--totm-tooltip-bg);
    transform: rotate(45deg);
}

.totm-tooltip-top .totm-tooltip-arrow {
    bottom: -4px;
    margin-left: -4px;
}

.totm-tooltip-bottom .totm-tooltip-arrow {
    top: -4px;
    margin-left: -4px;
}

.totm-tooltip-left .totm-tooltip-arrow {
    right: -4px;
    margin-top: -4px;
}

.totm-tooltip-right .totm-tooltip-arrow {
    left: -4px;
    margin-top: -4px;
}

/*
    Neutral chrome variant (Chrome-Neutral.css / Util.ChromeTheme.js). Under it the
    app's chrome is graphite and blue is reserved for actions and selection - a blue
    tooltip would read as an action there, so it follows the chrome instead.
*/
.totm-chrome-neutral {
    --totm-tooltip-bg: #232D3B;
}

/* Respect an OS-level reduced-motion preference - the fade/scale is decoration. */
@media (prefers-reduced-motion: reduce) {
    .totm-tooltip {
        transition: none;
        transform: none;
    }

    .totm-tooltip.is-visible {
        transition: none;
        transform: none;
    }
}