/* 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);
    --dur: 340ms;
    --accent: #eb966d;
}

.account-genuine { --accent: #46af91; }
.text-accent { color: var(--accent); }
.account-genuine .text-dim { color: #9c9c97; }
.account-genuine .text-brick { color: #d66f58; }
.genuine-wordmark { width: 154px; height: auto; }
.genuine-login-wordmark { width: min(280px, 82vw); height: auto; }
.genuine-nav-mark { display: none; width: 28px; height: 28px; }
.nav-scroll { scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }

/* ---- 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: var(--accent);
    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-out),
                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-out) 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 ----
   color-scheme is what makes the browser paint its own widgets dark: the
   select popup list, scrollbars, date pickers, autofill. Without it a dark
   page still gets a white native dropdown. */
:root { color-scheme: dark; }

/* Native selects ship the OS arrow, which reads as an unstyled control on this
   palette. Replace it with a chevron that matches the type. */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%236e6e69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.9rem;
    cursor: pointer;
    transition: border-color 180ms var(--ease-out);
}
select:hover { border-color: #3a3a37; }
/* Firefox and Chrome on Linux/Windows honour this; macOS draws its own popup,
   which color-scheme has already darkened. */
select option { background: #1a1a19; color: #eaeaea; }

/* Checkboxes: one line beats a hand-built control, and it stays accessible. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}
/* Typing in a field still confirms focus without a keyboard-style ring. */
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }

.genuine-booking > summary {
    display: grid;
    position: relative;
    padding-right: 3rem;
}
.genuine-booking > summary::after {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}
.genuine-booking[open] > summary::after { transform: translateY(-50%) rotate(45deg); }

@media (max-width: 639px) {
    .genuine-table-wrap { overflow: visible; }
    .genuine-responsive-table, .genuine-responsive-table tbody,
    .genuine-responsive-table tr, .genuine-responsive-table td { display: block; width: 100%; }
    .genuine-responsive-table thead { display: none; }
    .genuine-responsive-table tr { padding: 0.75rem 0; }
    .genuine-responsive-table tbody tr + tr { border-top: 1px solid rgba(42, 42, 40, 0.6); }
    .genuine-responsive-table td {
        display: grid;
        grid-template-columns: 5.75rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.3rem 0;
        max-width: none;
    }
    .genuine-responsive-table td::before {
        content: attr(data-label);
        color: #9c9c97;
        font-family: 'Archivo', sans-serif;
        font-size: 0.7rem;
    }
    .genuine-responsive-table td[title] { white-space: normal; }
}

@media (max-width: 479px) {
    .genuine-nav-wordmark { display: none; }
    .genuine-nav-mark { display: block; }
    .dialog-mobile-inset { width: calc(100% - 2rem); }
    .genuine-booking > summary::after { top: 1.35rem; transform: none; }
    .genuine-booking[open] > summary::after { transform: rotate(45deg); }
}

.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;
    }
}