/* Global polish on top of the Tailwind CDN utilities (warm "Almanak" theme). */

/* Visible keyboard focus for links/buttons that rely only on Tailwind hover states. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #E29A33;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Labels that contain an icon must always stay on one line: any flex row that
   directly holds an icon keeps the icon + its text together, and the icon never
   gets squeezed. Scoped to the icon's own flex row (direct-child svg) so sibling
   sections — e.g. a card's stats/chart below the header — keep normal wrapping. */
.flex:has(> svg),
.inline-flex:has(> svg),
a:has(> svg),
button:has(> svg),
summary:has(> svg),
label:has(> svg) {
    white-space: nowrap;
}
.flex > svg,
.inline-flex > svg,
a > svg,
button > svg,
summary > svg,
label > svg {
    flex-shrink: 0;
}

/* Lightweight, themed tooltips — replace native title= hovers (CSS-only, Turbo-safe).
   Add data-tooltip="…" to any element; data-tooltip-pos="left" flips it to the side
   (used inside overflow-hidden lists where a top bubble would be clipped). */
[data-tooltip] { position: relative; }
[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: opacity .12s ease, transform .12s ease;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    white-space: nowrap;
    background: #211D1A;
    color: #F6F5F1;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    padding: 6px 8px;
    border-radius: 7px;
    box-shadow: 0 6px 20px -8px rgba(33, 29, 26, .55);
}
[data-tooltip]::before {
    content: '';
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translate(-50%, 4px);
    border: 5px solid transparent;
    border-top-color: #211D1A;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Side variant: bubble to the left, vertically centered. */
[data-tooltip-pos="left"]::after {
    left: auto;
    right: calc(100% + 8px);
    bottom: auto;
    top: 50%;
    transform: translate(4px, -50%);
}
[data-tooltip-pos="left"]::before {
    left: auto;
    right: calc(100% + 3px);
    bottom: auto;
    top: 50%;
    transform: translate(4px, -50%);
    border-top-color: transparent;
    border-left-color: #211D1A;
}
[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="left"]:hover::before,
[data-tooltip-pos="left"]:focus-visible::after,
[data-tooltip-pos="left"]:focus-visible::before {
    transform: translate(0, -50%);
}

/* ── PHPStorm "Darcula" code blocks ───────────────────────────────────────
   Server-side highlighted SQL queries and PHP stack-frame snippets. Colours
   are emitted inline as <span style="color:…"> by the Twig filters; this block
   only owns the surface, line gutter and error-line accent. */
.darcula {
    background: #2B2B2B;
    color: #A9B7C6;
    margin: 0;
}
.darcula code {
    display: block;
    white-space: pre;
    padding: 0.75rem 1rem;
}
/* Per-line variant (PHP frames): line numbers + highlighted crash line. */
.darcula.darcula--lines code {
    padding: 0.625rem 0;
}
.darcula .cl {
    display: block;
    padding: 0 1rem;
}
.darcula .cl-err {
    background: #4E3A30;
    box-shadow: inset 3px 0 0 #CC7832;
}
.darcula .ln {
    display: inline-block;
    min-width: 2.5ch;
    margin-right: 1rem;
    text-align: right;
    color: #606366;
    user-select: none;
}

/* SQL Formatted/Raw toggle. */
.sql-toggle button {
    color: #5C5870;
    background: #FFFFFF;
}
.sql-toggle button:hover {
    background: #F6F6FB;
}
.sql-toggle button.is-active {
    background: #EAE5FF;
    color: #583BBB;
}

/* Respect users who prefer less motion: kill the live-pulse and big transitions. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}