/* THE FINANCE DEMO'S OWN COMPOSITION: HOW THE SHARED STAT CARDS, TABS, TABLES AND FORM SIT TOGETHER.
   NOTHING HERE RESTYLES A SHARED COMPONENT; IT ONLY LAYS OUT THE CONTENT PLACED INSIDE THEM. */

.demo-page .demo-app .demo-app__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: var(--space-medium);
}

.demo-page .demo-app .demo-app__layout .demo-app__error,
.demo-page .demo-dialog .df-form .df-form__error {
    padding: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--space-medium);
    text-align: left;
    text-box-trim: none;
}

.demo-page .demo-app .demo-app__layout .demo-app__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small) var(--space-medium);
}

.demo-page .demo-app .demo-app__layout .demo-app__foot [data-df-reset]:has([data-df-reset-idle][hidden]) {
    color: var(--color-danger);
}


/* THE FOUR TOTALS STAY ON ONE LINE OF THE LAPTOP'S SCREEN */

.demo-page .demo-app .eesier-card-grid.df-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-small);
}


/* A LIST — ITS ONE ACTION BELOW THE TABLE, AFTER A FAINT RULE */

.demo-page .demo-app .df-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-app .df-list .df-toolbar {
    display: flex;
    padding-top: var(--space-medium);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* A TOTAL STAYS ON ONE LINE */

.demo-page .demo-app .df-summary .eesier-stat-value.text-currency {
    white-space: nowrap;
}

/* THE TABLE HAS NO SHEET OF ITS OWN: IT BLEEDS TO THE EDGES OF THE TAB PANEL THAT FRAMES IT */

.demo-page .demo-app .df-list .eesier-table {
    margin-inline: calc(var(--space-medium) * -1);
}

.demo-page .demo-app .df-list .eesier-table > table > tbody > tr > td:first-child {
    width: 100%;
}

.demo-page .demo-app .df-entry .df-entry__text {
    min-width: 96px;
}


/* ONE ENTRY — STATE ICON, WHAT IT IS, WHO IT IS WITH */

.demo-page .demo-app .df-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-small);
    min-width: 0;
}

.demo-page .demo-app .df-entry .df-entry__state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--space-medium);
    height: var(--space-medium);
    color: var(--color-disabled-deep);
}

.demo-page .demo-app .df-entry .df-entry__state .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .demo-app .df-entry.is-done .df-entry__state {
    color: var(--color-success);
}

.demo-page .demo-app .df-entry.is-overdue .df-entry__state {
    color: var(--color-danger);
}

.demo-page .demo-app .df-entry .df-entry__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-tight);
    min-width: 0;
}

.demo-page .demo-app .df-entry .df-entry__text .df-entry__name {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-dark);
    font-size: var(--type-size-small);
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    overflow-wrap: break-word;
}

.demo-page .demo-app .df-entry .df-entry__text button.df-entry__name:hover {
    color: var(--color-palette-primary);
}

.demo-page .demo-app .df-entry .df-entry__text button.df-entry__name:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

.demo-page .demo-app .df-entry.is-done .df-entry__text .df-entry__name {
    color: var(--color-muted);
    font-weight: 500;
}

.demo-page .demo-app .df-entry .df-entry__text .df-entry__party,
.demo-page .demo-app .df-entry .df-entry__text .df-entry__due {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    line-height: 1.4;
    overflow-wrap: break-word;
}

.demo-page .demo-app .df-entry .df-entry__text .df-entry__party {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space-small);
}

.demo-page .demo-app .df-entry .df-entry__text .df-entry__due {
    display: none;
    flex-wrap: wrap;
    gap: 0 var(--space-tight);
}

.demo-page .demo-app .df-entry .df-entry__text .df-entry__due .df-entry__amount {
    color: var(--color-text-dark);
    font-weight: 700;
}

.demo-page .demo-app .df-due {
    color: var(--color-muted);
    white-space: nowrap;
}

.demo-page .demo-app .df-due.is-overdue,
.demo-page .demo-app .df-entry.is-overdue .df-entry__text .df-entry__due {
    color: var(--color-danger);
    font-weight: 600;
}

.demo-page .demo-app .df-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.demo-page .demo-app .df-amount.is-done {
    color: var(--color-muted);
    font-weight: 500;
}

.demo-page .demo-app .df-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-small);
}

.demo-page .demo-app .df-actions .eesier-chip {
    white-space: nowrap;
}

.demo-page .demo-app .df-actions .eesier-chip.df-actions__invoice > .eicon,
.demo-page .demo-app .df-actions .eesier-chip.eesier-chip-icon > .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
}


/* GOVERNANCE — THE SECURITY RULES BESIDE THE LOG THEY PRODUCE */

.demo-page .demo-audit .df-audit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-medium);
}

.demo-page .demo-audit .df-audit .eesier-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: var(--space-medium);
    min-width: 0;
}

.demo-page .demo-audit .df-audit .df-rules {
    flex: 0 0 360px;
}

.demo-page .demo-audit .df-audit .df-log {
    flex: 1;
}

.demo-page .demo-audit .df-audit .df-audit__title {
    margin: 0;
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: 1.5;
}

.demo-page .demo-audit .df-audit .df-audit__text {
    margin: 0;
    color: var(--color-muted);
    text-align: left;
    hyphens: manual;
}

/* THE RULES APPLY THE MOMENT A SWITCH MOVES, SO THE SHARED FORM'S SUBMIT HAS NOTHING TO SEND */

.demo-page .demo-audit .df-audit .df-rules .eesier-form-submit {
    display: none;
}

.demo-page .demo-audit .df-audit .df-log .df-log__list {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    margin: 0;
    padding: 0 var(--space-small) 0 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ON THE MONITOR THE SCREEN ITSELF SCROLLS, SO THE LOG RUNS ITS WHOLE LENGTH */

@media (min-width: 901px) {

    .demo-page .demo-stage.demo-audit .df-audit .df-log .df-log__list {
        max-height: none;
        padding-right: 0;
        overflow-y: visible;
    }

}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space-small);
    padding-block: var(--space-small);
    border-top: 1px solid var(--color-veil);
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row:first-child {
    padding-top: 0;
    border-top: 0;
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row .df-log__time {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row .df-log__operation {
    color: var(--color-muted);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    flex: 1 1 0;
    font-size: var(--type-size-xs);
    text-align: right;
    white-space: nowrap;
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row .df-log__summary {
    flex: 1 1 100%;
    order: 1;
    min-width: 0;
    color: var(--color-text-dark);
    overflow-wrap: break-word;
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row.is-blocked .df-log__summary {
    color: var(--color-danger);
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row .df-log__blocked {
    gap: var(--space-tight);
}

.demo-page .demo-audit .df-audit .df-log .df-log__list .df-log__row .df-log__blocked .eicon {
    width: var(--space-small);
    height: var(--space-small);
}


/* LIVE — WHAT ANYONE CHANGES ARRIVES IN PLACE: A NEW ROW GLOWS IN, A CHANGED ROW FLASHES, A REMOVED ROW FADES OUT.
   ONLY OPACITY AND THE ROW'S TINT MOVE; NOTHING TRANSLATES. */

.demo-page :is(.demo-app, .demo-audit) .df-live-enter {
    animation: df-live-enter 2.4s var(--ease-state) both;
}

.demo-page :is(.demo-app, .demo-audit) .df-live-change {
    animation: df-live-change 1.6s var(--ease-state) both;
}

.demo-page :is(.demo-app, .demo-audit) .df-live-leave {
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-state);
}

@keyframes df-live-enter {
    0% { opacity: 0; background-color: color-mix(in srgb, var(--color-palette-primary) 24%, transparent); }
    15% { opacity: 1; background-color: color-mix(in srgb, var(--color-palette-primary) 24%, transparent); }
    100% { opacity: 1; background-color: transparent; }
}

@keyframes df-live-change {
    0% { background-color: color-mix(in srgb, var(--color-success) 24%, transparent); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {

    .demo-page :is(.demo-app, .demo-audit) :is(.df-live-enter, .df-live-change) { animation: none; }

}


/* THE FORM STEP INSIDE THE DIALOG */

.demo-page .demo-dialog .df-form,
.demo-page .demo-dialog .df-issued {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-dialog :is(.df-form, .df-issued) .df-form__title {
    margin: 0;
    padding-right: var(--space-large);
    font-size: var(--type-size-heading);
    font-weight: 700;
    line-height: 1.3;
}

.demo-page .demo-dialog :is(.df-form, .df-issued) .df-form__note {
    margin: 0;
    color: var(--color-muted);
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-dialog .df-form .df-form__error {
    margin: 0;
}

.demo-page .demo-dialog .df-form .df-form__more {
    display: flex;
    justify-content: center;
}

.demo-page .demo-dialog .df-form .df-form__more .df-form__delete {
    color: var(--color-danger);
}

.demo-page .demo-dialog .df-issued .df-issued__preview {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    overflow: hidden;
}

.demo-page .demo-dialog .df-issued .df-issued__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.demo-page .demo-dialog .df-issued .btn {
    align-self: flex-start;
}


@media (max-width: 900px) {

    .demo-page .demo-audit .df-audit {
        flex-direction: column;
        align-items: stretch;
    }

    .demo-page .demo-audit .df-audit .df-rules {
        flex: 0 0 auto;
    }

    .demo-page .demo-app .demo-app__layout {
        padding: var(--space-small);
    }

    .demo-page .demo-app .eesier-card-grid.df-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-page .demo-app .df-list .eesier-table > table > :is(thead, tbody) > tr > :is(th, td):is(:nth-child(2), :nth-child(3)) {
        display: none;
    }

    .demo-page .demo-app .df-entry .df-entry__text .df-entry__due {
        display: flex;
    }

    /* A PHONE ROW HOLDS TWO CELLS: THE TEXT TAKES THE WIDTH LEFT BY THE ACTIONS, WHICH STAY SIDE BY SIDE */

    .demo-page .demo-app .df-list .eesier-table > table > :is(thead, tbody) > tr > :is(th, td):first-child {
        padding-right: 0;
    }

    .demo-page .demo-app .df-list .eesier-table > table > :is(thead, tbody) > tr > :is(th, td):last-child {
        padding-left: var(--space-small);
    }

    .demo-page .demo-app .df-actions .eesier-chip.df-actions__invoice {
        justify-content: center;
        width: var(--control-height);
        padding: 0;
    }

    .demo-page .demo-app .df-actions .eesier-chip.df-actions__invoice > span {
        display: none;
    }

    .demo-page .demo-app .df-list .df-toolbar .btn {
        flex: 1;
    }

    .demo-page .demo-app .df-list .btn {
        padding-inline: var(--space-small);
        white-space: nowrap;
    }

}