/* Immosentis-specific overrides on top of Tabler's default theme.
   Kept minimal and framework-adjacent (spacing/sizing tweaks only) — see
   docs/ui-conventions.md for when to add to this file vs. use Tabler classes
   directly in templates. */

/* Reserve the vertical scrollbar's width on every page so switching between a
   short page (no scrollbar) and a tall one (scrollbar) doesn't shift the
   content horizontally. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* Tabler's .page-header has no bottom margin by default, so the content right
   below it (a card, a datagrid, action buttons) sits flush against the title.
   Also bump .page-title up a step now that removing the top user-info bar
   (see base.html) freed up vertical space for it to stand out more.
   Selector matches Tabler's own `.page-wrapper .page-header` (not just
   `.page-header`) — its rule is that specific, so a plain `.page-header`
   override here loses the specificity fight and silently does nothing.
   Top spacing is deliberately modest (not Tabler's stacked page-body +
   page-header defaults, see .page-body below) — enough that the title
   doesn't sit flush against the browser edge, without reading as wasted
   space now that there's no top bar above it. */
.page-wrapper .page-header {
    margin: 1rem 0 1.5rem;
}

.page-body {
    margin-top: 0;
}

.page-title {
    font-size: 1.5rem;
}

/* Sidebar user block (see base.html, .sidebar-user): give it the same kind
   of breathing room as the nav-links above it, instead of sitting flush
   against the sidebar's edges. */
.sidebar-user {
    padding: 0.75rem 1rem 1rem;
}

.sidebar-user .ti-logout {
    font-size: 1.25rem;
}

/* Aankoopsimulatie (acquisitions): het werkblad met invoer en resultaten. */
.sim-inputs .accordion-button {
    padding: 0.6rem 1rem;
    font-weight: 600;
}

.sim-inputs .accordion-button:hover {
    background-color: var(--tblr-bg-surface-secondary);
}

/* Tabler 1.4 tekent bij een accordion geen pijltje: zonder deze aanduiding was niet te
   zien dat een blok open- en dichtklapt. "Toon" bij een dicht blok, "Verberg" bij een
   open blok (Bootstrap zet de klasse .collapsed op de knop van een dicht blok). */
.sim-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

.sim-toggle .ti {
    font-size: 1rem;
    transition: transform 0.15s;
    transform: rotate(180deg);
}

.accordion-button.collapsed .sim-toggle .ti {
    transform: none;
}

.accordion-button .sim-toggle-show,
.accordion-button.collapsed .sim-toggle-hide {
    display: none;
}

.accordion-button.collapsed .sim-toggle-show {
    display: inline;
}

/* Vanaf xl staan invoer en resultaten naast elkaar: de invoer blijft dan in beeld
   en scrollt op zichzelf, de resultaten scrollen met de pagina. Daaronder staat
   alles onder elkaar en scrollt de pagina gewoon. */
@media (min-width: 1200px) {
    .sim-input-panel {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.25rem;
        padding-bottom: 0.5rem;
    }
}

.sim-hints {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    border-top: 1px dashed var(--tblr-border-color);
}

.sim-hints span:last-child {
    font-weight: 600;
}

/* Brede jaarrasters: de jaarkolom blijft staan bij horizontaal scrollen. */
.sim-grid .sim-year {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--tblr-bg-surface);
}

.sim-grid-head {
    white-space: normal;
    min-width: 6.5rem;
    vertical-align: bottom;
}

/* Doorzoekbare keuzelijst (static/js/combobox.js): onder het veld, zo breed als het veld. */
.sim-combobox-menu {
    position: absolute;
    max-height: 16rem;
    overflow-y: auto;
}

/* Exportmenu van het werkblad: breed genoeg voor de uitleg per sectie. */
.sim-export-menu {
    width: 20rem;
}

/* Grafieken (static/js/sim-charts.js): vaste hoogte, zodat de pagina niet verspringt
   tijdens het tekenen. */
.sim-chart-canvas {
    min-height: 240px;
}

.sim-chart-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    vertical-align: -1px;
}

/* Tijdens het herrekenen: de vorige uitkomst blijft leesbaar, maar gedimd. */
.sim-results.is-loading #simulation-results {
    opacity: 0.55;
    transition: opacity 0.15s;
}

/* Foto's van een aankoopsimulatie: miniaturen van gelijke hoogte, bijgesneden. */
.sim-photo {
    height: 9rem;
    object-fit: cover;
}
.sim-photo-thumb {
    width: 3rem;
    height: 2.25rem;
    object-fit: cover;
}

/* Wijzigscherm en stappen van een aankoopsimulatie: lucht tussen veld en uitleg, en
   groepen (bv. per piste) als kader met een titel op de rand. */
.sim-section .sim-field-hint {
    margin-top: .5rem;
    line-height: 1.4;
}
.sim-group-title {
    float: none;
    width: auto;
    margin-bottom: .25rem;
    padding: 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Een smal invoerveld op een publiek formulier (_public_field.html met `short`): een datum of
   een bedrag heeft geen volle breedte nodig, ook niet op gsm. */
.is-input-short {
    max-width: 12rem;
}

/* Nog smaller (`tiny`): een aantal van één of twee cijfers. */
.is-input-tiny {
    max-width: 6rem;
}

/* Invoerschermen (generic_form.html): een leesbare breedte, en de knoppen blijven
   onderaan in beeld bij een lang formulier. */
.is-form {
    max-width: 64rem;
}

.is-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
}