/* ------------------------------------------------------------
   Formular
------------------------------------------------------------ */

.snlm_form {
    display: flex;
    flex-direction: column;

    gap: var(--snlm_spacing_md);
}


/* ------------------------------------------------------------
   Formulargruppen
------------------------------------------------------------ */

.snlm_form_group {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.snlm_form_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--snlm_spacing_md);
}

.snlm_form_row_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ------------------------------------------------------------
   Labels
------------------------------------------------------------ */

.snlm_label {
    color: var(--snlm_color_text_soft);

    font-size: var(--snlm_font_size_sm);
    font-weight: 600;
}


/* ------------------------------------------------------------
   Eingabefelder
------------------------------------------------------------ */

.snlm_input,
.snlm_select,
.snlm_textarea {
    width: 100%;

    min-height: 44px;

    padding: 10px 12px;

    background: var(--snlm_color_surface_dark);
    color: var(--snlm_color_text);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    outline: none;

    transition:
        border-color var(--snlm_transition),
        background var(--snlm_transition);
}

.snlm_textarea {
    min-height: 120px;

    resize: vertical;
}

.snlm_input:hover,
.snlm_select:hover,
.snlm_textarea:hover {
    border-color: var(--snlm_color_border_light);
}

.snlm_input:focus,
.snlm_select:focus,
.snlm_textarea:focus {
    background: var(--snlm_color_bg_soft);
    border-color: var(--snlm_color_primary);
}

.snlm_input::placeholder,
.snlm_textarea::placeholder {
    color: var(--snlm_color_text_muted);
}

.snlm_input[type="date"]::-webkit-calendar-picker-indicator,
.snlm_input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);

    cursor: pointer;
}

.snlm_input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.snlm_input[type="number"]::-webkit-inner-spin-button,
.snlm_input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* ------------------------------------------------------------
   Eingabefelder mit linkem Icon
------------------------------------------------------------ */

.snlm_input_wrap {
    position: relative;
}

.snlm_input_wrap .snlm_input {
    padding-left: 42px;
}

.snlm_input_icon {
    position: absolute;

    top: 50%;
    left: 14px;

    color: var(--snlm_color_text_muted);

    transform: translateY(-50%);

    pointer-events: none;
}


/* ------------------------------------------------------------
   Eingabefelder mit rechtem Button
------------------------------------------------------------ */

.snlm_input_wrap_has_action .snlm_input {
    padding-right: 46px;
}

.snlm_input_action {
    position: absolute;

    top: 50%;
    right: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    background: transparent;
    color: var(--snlm_color_text_muted);

    border: 0;
    border-radius: var(--snlm_radius);

    transform: translateY(-50%);

    transition:
        background var(--snlm_transition),
        color var(--snlm_transition);
}

.snlm_input_action:hover,
.snlm_input_action:focus-visible {
    background: var(--snlm_color_surface_light);
    color: var(--snlm_color_text);
}


/* ------------------------------------------------------------
   Formularaktionen
------------------------------------------------------------ */

.snlm_form_actions {
    display: flex;
    align-items: center;

    gap: var(--snlm_spacing_sm);

    margin-top: var(--snlm_spacing_sm);
}

/* ------------------------------------------------------------
   Checkbox
------------------------------------------------------------ */

.snlm_checkbox {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 10px;

    color: var(--snlm_color_text_soft);

    cursor: pointer;
    user-select: none;
}

.snlm_checkbox input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.snlm_checkbox_control {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: var(--snlm_color_surface_dark);

    border: 1px solid var(--snlm_color_border_light);
    border-radius: var(--snlm_radius);

    color: transparent;

    transition:
        background var(--snlm_transition),
        border-color var(--snlm_transition),
        color var(--snlm_transition);
}

.snlm_checkbox input:checked + .snlm_checkbox_control {
    background: var(--snlm_color_primary);
    border-color: var(--snlm_color_primary);

    color: #ffffff;
}

.snlm_checkbox input:focus-visible + .snlm_checkbox_control {
    outline: 2px solid var(--snlm_color_primary);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   Formular-Hinweise
------------------------------------------------------------ */

.snlm_form_hint {
    color: var(--snlm_color_text_muted);

    font-size: var(--snlm_font_size_xs);
}


/* ------------------------------------------------------------
   Formular-Trenner
------------------------------------------------------------ */

.snlm_form_separator {
    display: flex;
    align-items: center;

    gap: var(--snlm_spacing_md);

    color: var(--snlm_color_text_muted);

    font-size: var(--snlm_font_size_xs);
}

.snlm_form_separator::before,
.snlm_form_separator::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--snlm_color_border);
}


/* ------------------------------------------------------------
   Datei-Upload
------------------------------------------------------------ */

.snlm_file_input {
    width: 100%;

    padding: 10px;

    background: var(--snlm_color_surface_dark);
    color: var(--snlm_color_text_soft);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);
}

.snlm_file_input::file-selector-button {
    margin-right: 12px;

    padding: 8px 12px;

    background: var(--snlm_color_surface_light);
    color: var(--snlm_color_text);

    border: 1px solid var(--snlm_color_border_light);
    border-radius: var(--snlm_radius);

    cursor: pointer;
}


/* ------------------------------------------------------------
   Geschäft / Lieferdienst Auswahl
------------------------------------------------------------ */

.snlm_source_select {
    position: relative;
}

.snlm_source_select_trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 52px;

    gap: 12px;

    padding: 6px 12px 6px 8px;

    background: var(--snlm_color_surface_dark);
    color: var(--snlm_color_text);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    cursor: pointer;

    transition:
        background var(--snlm_transition),
        border-color var(--snlm_transition);
}

.snlm_source_select_trigger:hover {
    border-color: var(--snlm_color_border_light);
}

.snlm_source_select_trigger:focus-visible,
.snlm_source_select.snlm_is_open
.snlm_source_select_trigger {
    background: var(--snlm_color_bg_soft);
    border-color: var(--snlm_color_primary);
}

.snlm_source_select_selected,
.snlm_source_select_option_content {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 11px;
}

.snlm_source_select_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 36px;

    overflow: hidden;

    color: var(--snlm_color_text_soft);

    font-size: 1rem;
}

.snlm_source_select_icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.snlm_source_select_icon:has(i) {
    background: var(--snlm_color_surface);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);
}

.snlm_source_select_name {
    overflow: hidden;

    color: var(--snlm_color_text);

    font-weight: 500;

    text-align: left;
    text-overflow: ellipsis;

    white-space: nowrap;
}

.snlm_source_select_arrow {
    flex: 0 0 auto;

    color: var(--snlm_color_text_muted);

    font-size: 0.75rem;

    transition: transform var(--snlm_transition);
}

.snlm_source_select.snlm_is_open
.snlm_source_select_arrow {
    transform: rotate(180deg);
}

.snlm_source_select_menu {
    position: absolute;
    z-index: 50;

    top: calc(100% + 5px);
    left: 0;

    display: none;

    width: 100%;
    max-height: 310px;

    overflow-y: auto;

    padding: 5px;

    background: var(--snlm_color_surface);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    box-shadow: var(--snlm_shadow);

    scrollbar-width: thin;
    scrollbar-color:
        var(--snlm_color_border_light)
        var(--snlm_color_surface_dark);
}

.snlm_source_select_menu::-webkit-scrollbar {
    width: 8px;
}

.snlm_source_select_menu::-webkit-scrollbar-track {
    background: var(--snlm_color_surface_dark);
}

.snlm_source_select_menu::-webkit-scrollbar-thumb {
    background: var(--snlm_color_border_light);

    border: 2px solid var(--snlm_color_surface_dark);
    border-radius: var(--snlm_radius);
}

.snlm_source_select_menu::-webkit-scrollbar-thumb:hover {
    background: var(--snlm_color_primary);
}

.snlm_source_select.snlm_is_open
.snlm_source_select_menu {
    display: block;
}

.snlm_source_select_option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 50px;

    gap: 12px;

    padding: 6px 8px;

    background: transparent;
    color: var(--snlm_color_text);

    border: 0;
    border-radius: var(--snlm_radius);

    cursor: pointer;

    transition:
        background var(--snlm_transition),
        color var(--snlm_transition);
}

.snlm_source_select_option:hover,
.snlm_source_select_option:focus-visible {
    background: var(--snlm_color_surface_light);
}

.snlm_source_select_option.snlm_is_selected {
    background: var(--snlm_color_bg_soft);
}

.snlm_source_select_option.snlm_is_selected
.snlm_source_select_name {
    color: var(--snlm_color_primary);
}

.snlm_source_select_check {
    visibility: hidden;

    flex: 0 0 auto;

    color: var(--snlm_color_primary);
}

.snlm_source_select_option.snlm_is_selected
.snlm_source_select_check {
    visibility: visible;
}


/* ------------------------------------------------------------
   Vorhandenes Kategorie-Bild
------------------------------------------------------------ */

.snlm_category_image_existing {
    display: flex;
    align-items: center;

    gap: var(--snlm_spacing_md);

    margin-bottom: var(--snlm_spacing_sm);
}

.snlm_category_image_existing img {
    width: 64px;
    height: 64px;

    padding: 4px;

    background: var(--snlm_color_surface_dark);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    object-fit: contain;
}


/* ------------------------------------------------------------
   Lebensmittel-Formular
------------------------------------------------------------ */

.snlm_food_form {
    display: flex;
    flex-direction: column;

    width: min(100%, 1000px);

    margin-right: auto;
    margin-left: auto;

    gap: var(--snlm_spacing_lg);
}

.snlm_food_form_section {
    overflow: visible;
}

.snlm_food_form_heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: var(--snlm_spacing_md);
    padding-bottom: var(--snlm_spacing_md);

    border-bottom: 1px solid var(--snlm_color_border);
}

.snlm_food_form_heading_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    overflow: hidden;

    background: var(--snlm_color_surface_dark);
    color: #ffffff;

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    font-size: 1.65rem;
}

.snlm_food_form_heading_image img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 4px;

    object-fit: contain;
}

.snlm_food_form_heading h2 {
    margin: 0;

    color: var(--snlm_color_text);

    font-size: 1rem;
}

.snlm_food_form_heading p {
    margin: 3px 0 0;

    color: var(--snlm_color_text_muted);

    font-size: var(--snlm_font_size_xs);
}

.snlm_food_form_actions {
    display: flex;
    align-items: center;

    gap: var(--snlm_spacing_sm);

    padding-bottom: var(--snlm_spacing_lg);
}


/* ------------------------------------------------------------
   Einkauf
------------------------------------------------------------ */

.snlm_purchase_form_card {
    width: min(100%, 760px);

    margin-right: auto;
    margin-left: auto;
}

/* ------------------------------------------------------------
   Lebensmittelzugang - Zugangsart
------------------------------------------------------------ */

.snlm_acquisition_types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--snlm_spacing_sm);
}

.snlm_acquisition_type {
    position: relative;

    cursor: pointer;
}

.snlm_acquisition_type input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.snlm_acquisition_type_content {
    display: flex;
    align-items: center;

    min-height: 78px;

    gap: 12px;

    padding: 12px;

    background: var(--snlm_color_surface_dark);
    color: var(--snlm_color_text_soft);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);

    transition:
        background var(--snlm_transition),
        border-color var(--snlm_transition),
        color var(--snlm_transition);
}

.snlm_acquisition_type_content > i {
    flex: 0 0 auto;

    width: 28px;

    color: var(--snlm_color_text_muted);

    font-size: 1.25rem;

    text-align: center;
}

.snlm_acquisition_type_content > span {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 2px;
}

.snlm_acquisition_type_content strong {
    color: var(--snlm_color_text);

    font-size: var(--snlm_font_size_sm);
}

.snlm_acquisition_type_content small {
    color: var(--snlm_color_text_muted);

    font-size: var(--snlm_font_size_xs);
    line-height: 1.35;
}

.snlm_acquisition_type:hover
.snlm_acquisition_type_content {
    background: var(--snlm_color_surface_light);

    border-color: var(--snlm_color_border_light);
}

.snlm_acquisition_type input:checked
+ .snlm_acquisition_type_content {
    background: var(--snlm_color_bg_soft);

    border-color: var(--snlm_color_primary);
}

.snlm_acquisition_type input:checked
+ .snlm_acquisition_type_content > i {
    color: var(--snlm_color_primary);
}

.snlm_acquisition_type input:focus-visible
+ .snlm_acquisition_type_content {
    border-color: var(--snlm_color_primary);
}

/* ------------------------------------------------------------
   Lebensmittelzugang - Bearbeiten
------------------------------------------------------------ */

.snlm_purchase_edit_card {
    margin-top: var(--snlm_spacing_md);
}

.snlm_purchase_edit_receipt {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    background: var(--snlm_color_surface_dark);

    border: 1px solid var(--snlm_color_border);
    border-radius: var(--snlm_radius);
}

.snlm_purchase_edit_receipt > i {
    flex: 0 0 auto;

    width: 32px;

    color: var(--snlm_color_primary);

    font-size: 1.2rem;

    text-align: center;
}

.snlm_purchase_edit_receipt > div {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 2px;
}

.snlm_purchase_edit_receipt strong {
    color: var(--snlm_color_text);

    font-size: var(--snlm_font_size_sm);
}

.snlm_purchase_edit_receipt a {
    overflow: hidden;

    color: var(--snlm_color_text_muted);

    font-size: var(--snlm_font_size_xs);

    text-overflow: ellipsis;

    white-space: nowrap;
}