/* http://smacss.com/ */

/* Throbber: the animated Liink mark. Skeleton: content-shaped placeholders. */

:root {
    /* Between --liink-rob and --liink-light-grey, so blocks read against both
       --liink-snow and --liink-rosalina backgrounds. */
    --liink-skeleton-base: #E3E8EB;
    --liink-skeleton-sheen: rgba(255, 255, 255, 0.9);
    --liink-skeleton-radius: 4px;
    --liink-throbber-bracket: #01172B;
    --liink-throbber-bar: var(--liink-primary-purple);
}


/* Throbber */

.liink-throbber {
    display: inline-block;
    line-height: 0;
}

    .liink-throbber svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.liink-throbber-sm {
    width: 32px;
    height: 41px;
}

.liink-throbber-md {
    width: 56px;
    height: 72px;
}

.liink-throbber-lg {
    width: 84px;
    height: 108px;
}

.liink-throbber-bracket {
    fill: var(--liink-throbber-bracket);
    opacity: 0.55;
}

.liink-throbber-bar {
    fill: var(--liink-throbber-bar);
    transform-origin: 51.5px 66.45px;
}

.liink-throbber-top {
    animation: liink-throb-top 1.5s ease-in-out infinite;
}

.liink-throbber-bottom {
    animation: liink-throb-bottom 1.5s ease-in-out infinite;
}

.liink-throbber-bar {
    animation: liink-throb-bar 1.5s ease-in-out infinite;
}

.liink-throbber-inverse .liink-throbber-bracket {
    fill: #FFFFFF;
}

@keyframes liink-throb-top {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}

@keyframes liink-throb-bottom {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    50% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

@keyframes liink-throb-bar {
    0%, 100% {
        transform: scaleY(0.4);
        opacity: 0.45;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* Throbber panel: mark plus optional caption, centred in a region */

.liink-throbber-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25em;
    min-height: 193px;
    padding: 2em 1em;
    text-align: center;
}

.liink-throbber-caption {
    color: var(--liink-grey);
    font-size: 0.95rem;
    margin: 0;
}


/* Boot splash. Markup is in _Layout.cshtml so it paints before Blazor starts. */

#liink-boot {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    background-color: var(--liink-rosalina, #FDFDFF);
    opacity: 1;
    transition: opacity 0.35s ease;
}

    #liink-boot.liink-boot-hidden {
        opacity: 0;
        pointer-events: none;
    }

.liink-boot-caption {
    color: var(--liink-grey, #99A3A8);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    /* Delayed, so the caption only shows if the wait is real */
    opacity: 0;
    animation: liink-fade-in 0.4s ease 1.2s forwards;
}


/* Blocking overlay: saves and other long actions */

.liink-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25em;
    background-color: rgba(1, 23, 43, 0.55);
    animation: liink-fade-in 0.2s ease both;
}

    .liink-loading-overlay .liink-throbber-caption {
        color: var(--liink-snow);
    }


/* Skeleton primitive */

.liink-skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: var(--liink-skeleton-base);
    border-radius: var(--liink-skeleton-radius);
    color: transparent;
    user-select: none;
}

    .liink-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, transparent, var(--liink-skeleton-sheen), transparent);
        animation: liink-skeleton-sheen 1.6s ease-in-out infinite;
    }

.liink-skeleton-circle {
    border-radius: 50%;
}

.liink-skeleton-pill {
    border-radius: 999px;
}

@keyframes liink-skeleton-sheen {
    100% {
        transform: translateX(100%);
    }
}

@keyframes liink-fade-in {
    to {
        opacity: 1;
    }
}


/* Skeleton layouts */

/* The fade-in delay stops a fast load flashing a skeleton at the user */
.liink-skeleton-group {
    opacity: 0;
    animation: liink-fade-in 0.25s ease 0.15s forwards;
}

/* Cards: mirrors .card-content and .card-content-content - a title over a
   description on the left half, label / value pairs filling the right. */
.liink-skeleton-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25em;
    min-height: 7em;
    padding: 1em 2em 1em 0;
    border-bottom: var(--liink-blue) solid 1px;
}

.liink-skeleton-card-status {
    flex: 0 0 auto;
    margin-left: 0.5em;
}

.liink-skeleton-card-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
    min-width: 0;
}

.liink-skeleton-card-primary {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    min-width: 0;
}

.liink-skeleton-card-fields {
    flex: 1 1 50%;
    display: flex;
    flex-direction: row;
    gap: 1.25em;
    min-width: 0;
}

.liink-skeleton-card-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    min-width: 0;
}

.liink-skeleton-card-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.6em;
}

@media screen and (max-width: 767px) {
    .liink-skeleton-card {
        flex-direction: column;
        align-items: stretch;
        padding-right: 1em;
        padding-left: 1em;
    }

    .liink-skeleton-card-main {
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
    }

    .liink-skeleton-card-fields {
        flex-wrap: wrap;
    }

    .liink-skeleton-card-field {
        flex-basis: 40%;
    }

    .liink-skeleton-card-actions {
        justify-content: flex-start;
    }
}

/* Calendar: 7 column month grid, stacked list below 576px */
.liink-skeleton-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.liink-skeleton-calendar-head {
    padding: 0.4em 0;
    display: flex;
    justify-content: center;
}

.liink-skeleton-calendar-day {
    height: 10em;
    border: 1px solid var(--liink-light-grey);
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    overflow: hidden;
}

.liink-skeleton-calendar-event {
    min-height: 3em;
    border-radius: 0.25rem;
}

.liink-skeleton-calendar-list {
    display: none;
    flex-direction: column;
    gap: 0.5em;
}

.liink-skeleton-calendar-list-day {
    border: 1px solid var(--liink-light-grey);
    border-radius: 0.25rem;
    padding: 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

@media screen and (max-width: 576px) {
    .liink-skeleton-calendar-grid {
        display: none;
    }

    .liink-skeleton-calendar-list {
        display: flex;
    }
}

/* Bubbles: matches BubbleList row-cols-1 / md-2 / lg-3 / xl-4 */
.liink-skeleton-bubbles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
}

@media screen and (min-width: 768px) {
    .liink-skeleton-bubbles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 992px) {
    .liink-skeleton-bubbles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .liink-skeleton-bubbles {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Heights measured off the real bubbles */
.liink-skeleton-bubble {
    display: flex;
    flex-direction: row;
    gap: 0.9em;
    padding: 1rem;
    border-radius: 0.25rem;
    background-color: var(--liink-rosalina);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    min-height: 98px;
}

.liink-skeleton-bubble-progress {
    min-height: 139px;
}

.liink-skeleton-bubble-icon {
    flex: 0 0 auto;
    align-self: center;
}

.liink-skeleton-bubble-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    min-width: 0;
}

.liink-skeleton-bubble-heading {
    padding-bottom: 0.45em;
    border-bottom: 1px solid var(--liink-light-blue);
}

/* Accordion */
.liink-skeleton-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.liink-skeleton-accordion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    padding: 1.15em 1.25em;
    border: 1px solid var(--liink-light-grey);
    border-radius: 0.25rem;
    background-color: var(--liink-rosalina);
}

/* Table */
.liink-skeleton-table {
    width: 100%;
}

.liink-skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding: 0.9em 0.75em;
    border-bottom: 1px solid var(--liink-light-grey);
}

.liink-skeleton-table-head {
    border-bottom-width: 2px;
}

    .liink-skeleton-table-head .liink-skeleton {
        --liink-skeleton-base: var(--liink-light-grey);
    }

.liink-skeleton-cell {
    flex: 1 1 0;
    min-width: 0;
}

.liink-skeleton-cell-narrow {
    flex: 0 0 12%;
}

/* Form */
.liink-skeleton-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75em 2.5em;
}

.liink-skeleton-field {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    min-width: 0;
}

.liink-skeleton-field-full {
    flex-basis: 100%;
}

/* Detail */
.liink-skeleton-detail {
    display: flex;
    flex-direction: column;
    gap: 1.75em;
}

.liink-skeleton-paragraph {
    display: flex;
    flex-direction: column;
    gap: 0.65em;
}

/* Inline: modals and small regions */
.liink-skeleton-inline {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 0.5em 0;
}

/* Title bar */
/* Mirrors Title.razor: an h2 row with optional button, then an hr */
.liink-skeleton-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    margin: 0;
    /* Matches the rendered h2 row, so the real title lands where the bar was */
    min-height: 2.875rem;
}

/* Mirrors FilterBar's .search-bar so the search box does not pop in late */
.liink-skeleton-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1rem;
}

.liink-skeleton-filter-bar {
    border-radius: 0.5em;
}

/* Matches a real title button, whose 40px box and 6px margin set the row height */
.liink-skeleton-title-button {
    margin: 6px;
}

.liink-skeleton-title-rule {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 991px) {
    .liink-skeleton-title {
        flex-direction: column;
        align-items: center;
        gap: 0.75em;
    }
}


/* Reduced motion: keep the affordance, drop the movement */

@media (prefers-reduced-motion: reduce) {
    .liink-skeleton::after {
        animation: none;
    }

    .liink-skeleton {
        opacity: 0.7;
    }

    .liink-skeleton-group,
    .liink-boot-caption {
        opacity: 1;
        animation: none;
    }

    .liink-throbber-top,
    .liink-throbber-bottom,
    .liink-throbber-bar {
        animation-duration: 3s;
    }
}