/* BestoursPT dashboard - HomoDeus design language.
   #141414 / #EAEAEA, ember accent held to ~5%, one motion system. */

/* ---- motion tokens ---- */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur: 340ms;
}

/* ---- page cross-fade (htmx view transitions) ---- */
::view-transition-old(root) { animation: vt-out 180ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 260ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- htmx swap feel ---- */
.htmx-swapping { opacity: 0.4; transition: opacity 140ms; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-added { animation: rise var(--dur) var(--ease-out); }

/* ---- entrance choreography ----
   .rise elements animate in; --i staggers siblings (set inline per item). */
.rise {
    animation: rise var(--dur) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- nav tabs: sliding ember underline ---- */
.tab-link { position: relative; transition: color 180ms var(--ease-out); }
.tab-link::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: #eb966d;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease-out);
}
.tab-link.is-active::after,
.tab-link:hover::after { transform: scaleX(1); }

/* ---- tactile press ---- */
.press { transition: transform 140ms var(--ease-out), background-color 180ms, color 180ms, opacity 180ms; }
.press:active { transform: scale(0.97); }

/* ---- dialog entry/exit (@starting-style needs no JS) ---- */
.dlg {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-spring),
                overlay 300ms allow-discrete, display 300ms allow-discrete;
}
.dlg[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style {
    .dlg[open] { opacity: 0; transform: translateY(14px) scale(0.96); }
}
.dlg::backdrop { opacity: 0; transition: opacity 240ms var(--ease-out); }
.dlg[open]::backdrop { opacity: 1; }

/* ---- the one permitted ember fade (highest-value card only) ---- */
.ember-corner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ember-corner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(26rem 14rem at 100% 100%, rgba(173, 96, 59, 0.26), transparent 62%);
    pointer-events: none;
}

/* ---- week grid cells ---- */
.cell-hover { transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.cell-hover:hover { box-shadow: inset 0 0 0 1px rgba(235, 150, 109, 0.35); }

/* ---- grid rows cascade in (opacity only: transforms distort table layout) ---- */
.grid-row { animation: rowIn 420ms var(--ease-out) both; animation-delay: calc(var(--r, 0) * 45ms); }
@keyframes rowIn { from { opacity: 0; } }

/* ---- cards lift toward the cursor ---- */
.lift { transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.lift:hover { transform: translateY(-2px); border-color: #3a3a37; }

/* ---- stat numbers land with a soft settle ---- */
.stat-num { display: inline-block; animation: statIn 520ms var(--ease-spring) both; }
@keyframes statIn {
    from { opacity: 0; transform: translateY(12px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- expandable history rows ---- */
.row-detail td > div {
    overflow: hidden;
    animation: unfold 260ms var(--ease-out);
}
@keyframes unfold {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- settings accordions ---- */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
details summary::after {
    content: '+';
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #6e6e69;
    transition: transform 220ms var(--ease-out);
}
details[open] summary::after { transform: rotate(45deg); }
details > *:not(summary) { animation: unfold 240ms var(--ease-out); }

/* ---- brand totem: draws itself on load ---- */
.totem circle[stroke], .totem rect[stroke] {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: draw 700ms var(--ease-out) forwards;
}
.totem rect[stroke] { animation-delay: 120ms; }
.totem circle[stroke]:last-of-type { animation-delay: 240ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- forms ---- */
input:focus, select:focus, textarea:focus {
    border-color: #eb966d !important;
    outline: none;
    box-shadow: 0 0 0 1px rgba(235, 150, 109, 0.25);
}
::selection { background: rgba(235, 150, 109, 0.35); color: #fff; }

.saved-flash { animation: rise 200ms var(--ease-out); color: #8faf8a; }

/* ---- reduced motion: everything lands instantly ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}