/*
 * Small shared utilities for every site (resources/ui/README.md), loaded by the panel layouts as /ui/ui.css.
 */

/* Blinks until the thing is seen: new ticket answers, "Odottaa tarkistusta". Still when the user asks for less motion. */
@keyframes ui-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.ui-blink { animation: ui-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ui-blink { animation: none; } }

/* Text exactly as written. The panel themes capitalize badge text, which turns Finnish phrases into
   "Odottaa Tarkistusta"; use this on badges whose label is a phrase. */
.ui-text-asis { text-transform: none !important; }

/* Tooltips (ui.js, data-bs-toggle="tooltip"): one look on every site - a white speech bubble with a border and a
   pointer, instead of Bootstrap's black box. Complete styles, because the AdminKit CSS builds of the panels have
   none; on the website they override Bootstrap's. Popper positions .tooltip and its arrow. */
.tooltip { position: absolute; z-index: 1080; display: block; margin: 0; font-size: 0.8125rem; font-style: normal;
    font-weight: 400; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: normal;
    white-space: normal; word-wrap: break-word; opacity: 0; transition: opacity 0.15s linear; }
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner { max-width: 22rem; padding: 0.45rem 0.75rem; color: #212529; text-align: left;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.14); }
.tooltip .tooltip-arrow { position: absolute; display: block; width: 0.9rem; height: 0.45rem; }
.tooltip .tooltip-arrow::before,
.tooltip .tooltip-arrow::after { position: absolute; content: ""; border-color: transparent; border-style: solid; }
/* The pointer is two triangles: ::before in the border colour, ::after in white 1px inside it. */
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { bottom: -0.45rem; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::after {
    border-width: 0.45rem 0.45rem 0; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: 0; border-top-color: rgba(0, 0, 0, 0.25); }
.bs-tooltip-top .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::after {
    top: -1px; border-top-color: #fff; }
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { top: -0.45rem; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::after {
    border-width: 0 0.45rem 0.45rem; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: 0; border-bottom-color: rgba(0, 0, 0, 0.25); }
.bs-tooltip-bottom .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::after {
    bottom: -1px; border-bottom-color: #fff; }
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: -0.45rem; width: 0.45rem; height: 0.9rem; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::after {
    border-width: 0.45rem 0.45rem 0.45rem 0; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: 0; border-right-color: rgba(0, 0, 0, 0.25); }
.bs-tooltip-end .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::after {
    right: -1px; border-right-color: #fff; }
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: -0.45rem; width: 0.45rem; height: 0.9rem; }
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::after {
    border-width: 0.45rem 0 0.45rem 0.45rem; }
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: 0; border-left-color: rgba(0, 0, 0, 0.25); }
.bs-tooltip-start .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::after {
    left: -1px; border-left-color: #fff; }

/* Vertical event timeline (admin customer page "Tapahtumat"; later app.hostaan "Tapahtumat"): a dot per event joined by
   a line, small text. <ol class="ui-timeline"><li class="ui-timeline-item"><span class="ui-timeline-dot is-info">icon</span>
   <div class="ui-timeline-body">...</div></li></ol>. Dot colours: is-info (customer), is-admin, is-success, is-danger. */
.ui-timeline { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.4; }
.ui-timeline-item { position: relative; display: flex; gap: 0.65rem; padding-bottom: 0.9rem; }
.ui-timeline-item:last-child { padding-bottom: 0; }
.ui-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 0.8125rem; top: 1.75rem; bottom: 0.15rem;
    width: 2px; transform: translateX(-50%); background: #e2e6ee; }
.ui-timeline-dot { position: relative; z-index: 1; flex: 0 0 1.625rem; width: 1.625rem; height: 1.625rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background: #eef1f6; color: #5a6475; }
.ui-timeline-dot svg { width: 0.8rem; height: 0.8rem; }
.ui-timeline-dot.is-info { background: #e0f2f8; color: #0d7fa3; }
.ui-timeline-dot.is-admin { background: #e9ecf3; color: #3d4a63; }
.ui-timeline-dot.is-success { background: #dcf3e8; color: #138a55; }
.ui-timeline-dot.is-danger { background: #fbe3e5; color: #c0303e; }
.ui-timeline-body { min-width: 0; flex: 1 1 auto; padding-top: 0.15rem; }
.ui-timeline-meta { color: #6c757d; font-size: 0.75rem; }
.ui-timeline-changes { margin-top: 0.15rem; color: #495057; word-break: break-word; }