/* Admin shell components — the CSS backing the HEEx function components
   in StupendousAdmin.Components. BEM class names; color-aware surfaces
   read --ui-text / --ui-border / --ui-background, set per the
   [data-color="<color>"] rules in variables.css. */

/* ---- Page-level containers ---- */
.admin-container {
    max-width: 80rem;
    margin: var(--spacing-lg) auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.admin-container__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: var(--spacing-sm);
}

.admin-container__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.admin-container__actions {
    display: flex;
    gap: var(--spacing-sm);
}

.admin-container__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ---- Multi-column layout ---- */
.columns {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    align-items: stretch;
}

.columns__item {
    flex: 1;
    min-width: 0;
}

/* ---- Data card ---- summary tile with headline + bar/line charts.
   Color comes from the [data-color] surface contract; the chart
   inherits via currentColor. When a value is paired with a chart,
   the chart fades behind so the number leads. */
.data-card {
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-md);
    background-color: var(--background-color-0);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    color: var(--ui-text, var(--accent-color));
}

.data-card__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.data-card__title {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-color-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-card__subtitle {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-color-3);
}

.data-card__body {
    display: grid;
    grid-template-areas: "stack";
    align-items: end;
    min-height: 4rem;
}

.data-card__body > * {
    grid-area: stack;
}

.data-card__plot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    align-self: end;
    transition: opacity 200ms ease;
}

.data-card__chart {
    width: 100%;
    height: 4rem;
    display: block;
}

/* Bars and line consume --ui-solid (the saturated palette tier, not
   the muted text used by badges/wells). Per-series data-color on the
   surrounding <g> wins; falls back to the card's --ui-solid when set,
   then to the accent color. */
.data-card__bar {
    fill: var(--ui-solid, var(--accent-color));
}

.data-card__line {
    stroke: var(--ui-solid, var(--accent-color));
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.data-card__labels {
    display: grid;
}

.data-card__label {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-color-3);
    line-height: 1;
}

.data-card__body--dimmed .data-card__plot {
    opacity: 0.18;
}

.data-card__value {
    margin: 0;
    align-self: center;
    justify-self: start;
    font-size: calc(var(--font-size-xl) * 1.1);
    font-weight: 600;
    color: var(--text-color-1);
    line-height: 1.1;
    z-index: 1;
}

/* ---- Card ---- */
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-md);
    background-color: var(--background-color-0);
    overflow: hidden;
    color: var(--text-color-1);
}

.card__media {
    aspect-ratio: 16 / 9;
    background-color: var(--background-color-1);
    overflow: hidden;
}

.card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.card__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color-1);
}

.card__description {
    color: var(--text-color-2);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.card__footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color-1);
    background-color: var(--background-color-1);
}

/* ---- Result list ---- */
.result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-md);
    background-color: var(--background-color-1);
    overflow: hidden;
}

.result-list__row {
    margin: 0;
}

.result-list__card {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    align-items: flex-start;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--background-color-0);
    border: none;
    border-bottom: 1px solid var(--border-color-1);
    color: var(--text-color-1);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font: inherit;

    &:hover {
        background-color: var(--background-color-1);
    }

    &:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: -2px;
    }

    &.is-selected {
        background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
        outline: 2px solid var(--accent-color);
        outline-offset: -2px;
    }
}

.result-list__row:last-child .result-list__card {
    border-bottom: none;
}

.result-list__thumb {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--background-color-1);
}

.result-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.result-list__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-list__title {
    font-weight: 600;
    color: var(--text-color-1);
}

.result-list__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color-3);
}

.result-list__description {
    font-size: var(--font-size-sm);
    color: var(--text-color-2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Modal (centered <dialog>) ---- */
.modal {
    padding: 0;
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-md);
    background-color: var(--background-color-0);
    color: var(--text-color-1);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    max-width: calc(100vw - var(--spacing-xl));
    max-height: calc(100vh - var(--spacing-xl));
}

.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.modal[open] {
    display: flex;
    flex-direction: column;
}

.modal--width-compact { width: 24rem; }
.modal--width-regular { width: 36rem; }
.modal--width-wide    { width: 56rem; }
.modal--width-full    { width: calc(100vw - var(--spacing-xl)); }

.modal--height-full   { height: calc(100vh - var(--spacing-xl)); }

.modal__header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-1);
    background-color: var(--background-color-1);
    flex-shrink: 0;
}

.modal__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.modal__body {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color-1);
    background-color: var(--background-color-1);
    flex-shrink: 0;
}

.modal__footer-inline,
.modal__footer-trailing {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal__footer-inline:empty,
.modal__footer-trailing:empty {
    display: none;
}

/* ---- Offcanvas (edge-anchored <dialog>) ---- */
.offcanvas {
    padding: 0;
    border: 1px solid var(--border-color-2);
    background-color: var(--background-color-0);
    color: var(--text-color-1);
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border-radius: 0;
    max-width: 100vw;
    max-height: 100vh;
}

.offcanvas::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.offcanvas[open] {
    display: flex;
    flex-direction: column;
}

.offcanvas--side-left {
    margin: 0 auto 0 0;
    height: 100vh;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.offcanvas--side-right {
    margin: 0 0 0 auto;
    height: 100vh;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.offcanvas--side-top {
    margin: 0 auto auto auto;
    width: 100vw;
    border-top: none;
    border-left: none;
    border-right: none;
}

.offcanvas--side-bottom {
    margin: auto auto 0 auto;
    width: 100vw;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

/* Sizes apply to width on left/right, height on top/bottom. */
.offcanvas--side-left.offcanvas--size-compact,
.offcanvas--side-right.offcanvas--size-compact { width: 18rem; }
.offcanvas--side-left.offcanvas--size-regular,
.offcanvas--side-right.offcanvas--size-regular { width: 24rem; }
.offcanvas--side-left.offcanvas--size-wide,
.offcanvas--side-right.offcanvas--size-wide { width: 36rem; }
.offcanvas--side-left.offcanvas--size-full,
.offcanvas--side-right.offcanvas--size-full { width: calc(100vw - var(--spacing-xl)); }

.offcanvas--side-top.offcanvas--size-compact,
.offcanvas--side-bottom.offcanvas--size-compact { height: 12rem; }
.offcanvas--side-top.offcanvas--size-regular,
.offcanvas--side-bottom.offcanvas--size-regular { height: 18rem; }
.offcanvas--side-top.offcanvas--size-wide,
.offcanvas--side-bottom.offcanvas--size-wide { height: 28rem; }
.offcanvas--side-top.offcanvas--size-full,
.offcanvas--side-bottom.offcanvas--size-full { height: calc(100vh - var(--spacing-xl)); }

.offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-1);
    flex-shrink: 0;
}

.offcanvas__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.offcanvas__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-color-2);
    cursor: pointer;

    &:hover {
        background-color: var(--background-color-1);
        color: var(--text-color-1);
    }
}

.offcanvas__body {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.offcanvas__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color-1);
    background-color: var(--background-color-1);
    flex-shrink: 0;
}

.offcanvas__footer-inline,
.offcanvas__footer-trailing {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.offcanvas__footer-inline:empty,
.offcanvas__footer-trailing:empty {
    display: none;
}

/* ---- Well — color-aware callout ----
   var(--ui-*, fallback) lets [data-color="<color>"] override the
   regular tones; absent the data attr, the fallbacks paint a neutral
   well. The --ui-* tokens themselves are NOT declared on the surface
   class, otherwise that declaration would beat the [data-color] rule
   on cascade order. */
.well {
    border: 1px solid var(--ui-border, var(--border-color-2));
    background-color: var(--ui-background, var(--background-color-1));
    color: var(--ui-text, var(--text-color-1));
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.well__title {
    margin: 0 0 var(--spacing-xs);
    font-weight: 600;
}

.well__body {
    line-height: 1.5;
}

.well__body :last-child {
    margin-bottom: 0;
}

.well__body ul,
.well__body ol {
    margin: var(--spacing-xs) 0 0;
    padding-left: var(--spacing-md);
}

/* ---- Badge / pill — color-aware inline labels ---- */
.badge,
.pill {
    display: inline-block;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--ui-border, var(--border-color-2));
    color: var(--ui-text, var(--text-color-2));
    background-color: var(--ui-background, var(--background-color-1));
    line-height: 1.6;
    white-space: nowrap;
}

.badge { border-radius: var(--radius-sm); }
.pill {
    border-radius: 999px;
    padding: 0 var(--spacing-md);
}

/* ---- Progress — color-aware bar ---- */
.progress {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--ui-background, var(--background-color-1));
}

/* Progress fill is meant to be vibrant — uses --ui-solid (a saturated
   palette tone) instead of --ui-text (which sits on background pairs
   like badges). Falls back to the accent color when no data-color is set. */
.progress__fill {
    height: 100%;
    background-color: var(--ui-solid, var(--accent-color));
    transition: width 200ms ease;
}

/* ---- Empty state ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-color-2);
    border: 1px dashed var(--border-color-2);
    border-radius: var(--radius-md);
    background-color: var(--background-color-1);
}

.empty-state__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--text-color-3);
    margin-bottom: var(--spacing-xs);
}

.empty-state__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color-1);
}

.empty-state__description {
    color: var(--text-color-2);
    font-size: var(--font-size-md);
    max-width: 32rem;
    line-height: 1.5;
}

.empty-state__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* ---- Date / time picker popup (vanilla-JS dropdown) ---- */
.stupendous-picker {
    background-color: var(--background-color-0);
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-xs);
    z-index: 20;
    color: var(--text-color-1);
}

.stupendous-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs);
    font-weight: 600;
}

.stupendous-picker__nav {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-color-2);
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--font-size-md);
}

.stupendous-picker__nav:hover {
    background-color: var(--background-color-1);
    color: var(--text-color-1);
}

.stupendous-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.stupendous-picker__dayname {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-color-3);
    padding: var(--spacing-xs) 0;
}

.stupendous-picker__day {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-color-1);
    padding: var(--spacing-xs);
    font: inherit;
    text-align: center;
}

.stupendous-picker__day:hover {
    background-color: var(--background-color-1);
}

.stupendous-picker__day--selected,
.stupendous-picker__cell--selected {
    background-color: var(--accent-color);
    color: white;
}

.stupendous-picker--time {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
}

.stupendous-picker__col {
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--border-color-1);
    border-radius: var(--radius-sm);
}

.stupendous-picker__cell {
    background: transparent;
    border: none;
    color: var(--text-color-1);
    padding: var(--spacing-xs) var(--spacing-md);
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.stupendous-picker__cell:hover {
    background-color: var(--background-color-1);
}