/* hwc-quicksight – embed.css */

.hwc-qs-container {
    --hwc-qs-bg: #ffffff;
    --hwc-qs-border: #dddddd;
    --hwc-qs-muted: #5b6472;
    --hwc-qs-accent: #0b5cab;
    --hwc-qs-navy: #002554;
    --hwc-qs-yellow: #f5ff29;
    --hwc-qs-shimmer-a: #eef1f6;
    --hwc-qs-shimmer-b: #f8f9fc;

    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--hwc-qs-bg);
    border: 1px solid var(--hwc-qs-border);
    overflow: hidden;                 /* stops any stray horizontal scroll */
    contain: layout paint;
}

.hwc-qs-frame,
.hwc-qs-frame > div,
.hwc-qs-frame iframe {
    display: block;
    width: 100% !important;           /* beats any inline pixel width */
    max-width: 100%;
    border: 0;
}

/* Hide the iframe until QuickSight has painted, so users never see a white box */
.hwc-qs-container[data-state="loading"] .hwc-qs-frame { opacity: 0; }
.hwc-qs-container[data-state="ready"] .hwc-qs-frame   { opacity: 1; transition: opacity .25s ease; }

/* ---------- Loading / error overlay ---------- */
.hwc-qs-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    background: var(--hwc-qs-bg);
}

.hwc-qs-msg { margin: 0; color: var(--hwc-qs-muted); font-size: 0.95rem; }

.hwc-qs-skeleton {
    display: grid;
    gap: 12px;
    width: min(560px, 100%);
}
.hwc-qs-skeleton span {
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--hwc-qs-shimmer-a) 25%, var(--hwc-qs-shimmer-b) 50%, var(--hwc-qs-shimmer-a) 75%);
    background-size: 200% 100%;
    animation: hwc-qs-shimmer 1.4s linear infinite;
}
.hwc-qs-skeleton span:nth-child(1) { height: 120px; }
.hwc-qs-skeleton span:nth-child(3) { width: 70%; }

@keyframes hwc-qs-shimmer { to { background-position: -200% 0; } }

.hwc-qs-retry {
    min-height: 44px;                 /* comfortable touch target */
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--hwc-qs-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.hwc-qs-retry:focus-visible { outline: 3px solid color-mix(in srgb, var(--hwc-qs-accent) 40%, transparent); outline-offset: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .hwc-qs-container {
        border-left: 0;
        border-right: 0;
        /* bleed to the screen edge inside a padded theme container */
        margin-inline: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
}

/* ---------- Scroll hint ---------- */
.hwc-qs-hint {
    position: absolute;
    top: 50%;
    right: 44px;                      /* sits just left of the frame's own scrollbar */
    z-index: 2;
    max-width: 230px;
    padding: 18px 26px;
    border: 2px solid var(--hwc-qs-navy);
    border-radius: 8px;
    background: var(--hwc-qs-yellow);
    color: var(--hwc-qs-navy);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translate(12px, -50%);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;             /* never blocks the dashboard */
}
.hwc-qs-hint::after {                 /* tail pointing at the scrollbar */
    content: "";
    position: absolute;
    top: 50%;
    right: -9px;
    width: 16px;
    height: 16px;
    background: var(--hwc-qs-yellow);
    border-top: 2px solid var(--hwc-qs-navy);
    border-right: 2px solid var(--hwc-qs-navy);
    transform: translateY(-50%) rotate(45deg);
}
.hwc-qs-hint.is-visible {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (max-width: 640px) {
    .hwc-qs-hint { display: none; }   /* mobile scrolls with the page */
}

@media (prefers-reduced-motion: reduce) {
    .hwc-qs-skeleton span { animation: none; }
    .hwc-qs-hint { transition: opacity .2s ease; }
    .hwc-qs-container[data-state="ready"] .hwc-qs-frame { transition: none; }
}

@media (prefers-color-scheme: dark) {
    .hwc-qs-container.hwc-qs-auto-dark {
        --hwc-qs-bg: #14181f;
        --hwc-qs-border: #262c36;
        --hwc-qs-muted: #a3acba;
        --hwc-qs-shimmer-a: #1c222c;
        --hwc-qs-shimmer-b: #252c38;
    }
}