/* Gemeinsames Layout fuer Login und Filter; Seiten behalten ihre eigenen IDs. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: end;
    gap: 1rem;
    margin-bottom: var(--space-6);
}

.form-grid--login {
    max-width: 28rem;
    grid-template-columns: minmax(0, 1fr);
}

.form-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.form-field input,
.form-field select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.form-grid > button {
    width: 100%;
}

.form-field { font-weight: 500; }
.form-field input, .form-field select, .period-picker select, .chart-time-picker select {
    background: var(--color-surface); color: var(--color-dark);
    transition: border-color var(--transition-fast);
}
.form-field input:hover, .form-field select:hover { border-color: var(--color-border-hover); }
.form-field input:focus, .form-field select:focus { border-color: var(--color-focus); }
.form-grid--login { padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-medium); }
.filter-details { grid-column: 1 / -1; border-top: 1px solid var(--color-border-soft); padding-top: var(--space-4); }
.filter-details summary { cursor: pointer; padding-block: var(--space-2); color: var(--color-text-muted); }
.filter-details .form-grid { margin-top: var(--space-4); margin-bottom: 0; }

/* Native selects remain the fallback; no replacement controls or scripts. */
select:not([multiple]):not([size]), select[size="1"] {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background-color: var(--color-surface);
    color: var(--color-dark);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#language-select:hover:not(:disabled), select:hover:not(:disabled) {
    border-color: var(--color-border-hover);
}
#language-select:focus-visible, select:focus-visible {
    border-color: var(--color-focus);
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}
select:disabled { cursor: not-allowed; opacity: 0.55; }
/* Opt into the customizable picker only when both required features exist. */
@supports (appearance: base-select) and selector(select::picker(select)) {
    select:not([multiple]):not([size]), select[size="1"] {
        appearance: base-select;
        justify-content: space-between;
        text-align: left;
    }
    select:not([multiple]):not([size])::picker(select), select[size="1"]::picker(select) {
        appearance: base-select;
        box-sizing: border-box;
        padding: var(--space-1);
        margin-block: var(--space-2);
        max-height: min(22rem, 60dvh);
        width: max-content;
        min-width: min(anchor-size(width), calc(100vw - 2rem));
        max-width: min(calc(anchor-size(width) * 3), calc(100vw - 2rem));
        overflow-y: auto;
        border: 1px solid var(--color-border-hover);
        border-radius: var(--radius-medium);
        background: var(--color-surface);
        color: var(--color-dark);
        box-shadow: var(--shadow-surface);
        font: inherit;
    }
    select::picker-icon {
        color: var(--color-text-muted);
        margin-inline-start: auto;
        flex-shrink: 0;
        transition: rotate var(--transition-fast);
    }
    select:open::picker-icon { rotate: 180deg; }
    select:not([multiple]):not([size]) option, select[size="1"] option {
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-small);
        background: var(--color-surface);
        color: var(--color-dark);
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    select option:checked { background: var(--color-background); font-weight: 600; }
    select option:hover:not(:disabled), select option:focus-visible {
        background: var(--color-background);
        outline: 1px solid var(--color-border-hover);
        outline-offset: -1px;
    }
    select option::checkmark { color: var(--color-focus); }
    select option:disabled { color: var(--color-text-muted); }
}
/* Let system high-contrast settings retain native rendering. */
@media (forced-colors: active) {
    select:not([multiple]):not([size]), select[size="1"] { appearance: auto; }
}

/* Buttons align left; option labels center independently of the checkmark. */
select { text-align: left; text-align-last: left; }
select option {
    text-align: center;
    text-align-last: center;
}
@supports (appearance: base-select) and selector(select::picker(select)) {
    /* Equal side columns center option labels independently of checkmarks. */
    select option {
        display: grid;
        grid-template-columns: 1em minmax(0, 1fr) 1em;
        align-items: center;
        column-gap: var(--space-2);
    }
    select option::checkmark {
        display: block;
        width: 1em;
        margin: 0;
    }
    select option:not(:checked)::checkmark { visibility: hidden; }
    select option::after { content: ""; }
}

/* Explicit display rules above must never reveal hidden placeholder options. */
select option[hidden] { display: none !important; }
select:has(option:not(:disabled):not([hidden])) option:disabled { display: none !important; }
/* Keep the empty account state visible only until real choices arrive. */
#account-select:has(option:not(:disabled)[value]:not([value=""])) option:is([data-placeholder], [value=""], :first-child:not([value])) {
    display: none !important;
}