/* --- 0. Unset max-width (SUCCESSFUL) --- */

.input-with-unit {
    max-width: none !important;
}

/* -------------------------------------------------------- */

/* --- 1. Universal Arrow Removal (SUCCESSFUL) --- */
.input-with-unit .MuiIconButton-root {
    display: none !important;
}

/* -------------------------------------------------------- */

/* --- 2. Input Container Styling (The Wrapper) --- */
.input-with-unit .MuiInputBase-root {
    position: relative;
    width: 100%;
    pointer-events: auto; /* Enable hover events for tooltips */
}

/* -------------------------------------------------------- */

/* --- 3. Input Element Styling (The Number Field) --- */
.input-with-unit input[type="number"] {
    /* Allows Taipy/MUI to choose the text color based on the theme */

    text-align: right !important; /* Aligns the number value to the right */
    -moz-appearance: textfield !important;

    /* Padding to ensure unit does not overlap the number */
    padding-right: 25px !important;

    /* Enable hover events for tooltips */
    pointer-events: auto !important;
}

/* -------------------------------------------------------- */

/* --- 4. SELECTOR VALUE CONTAINER (MuiSelect-select) CLEANUP --- */
.input-with-unit .MuiSelect-select {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important; /* Revert to default */
}

/* --- 4b. SELECTED VALUE ELEMENT (MuiBox-root) STYLING (THE ABSOLUTE FIX) --- */
.input-with-unit .MuiBox-root {
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    text-align: right !important;
    width: auto !important;

    margin: 0 !important;
    padding: 10px !important;
}

/* -------------------------------------------------------- */

/* --- 5. Pseudo-Element Unit Injection & Styling --- */

/* Targets inputs with the seconds unit (tk-unit) and injects "s" */
.tk-unit .MuiInputBase-root:after { content: "s"; }
.m-unit .MuiInputBase-root:after { content: "m"; }
.N-unit .MuiInputBase-root:after { content: "kN"; }
.kg-unit .MuiInputBase-root:after { content: "kg"; }
.--unit .MuiInputBase-root:after { content: ""; }

/* Unit Injection for Selector Inputs */
.A-unit .MuiSelect-select:after { content: "kA"; }
.Hz-unit .MuiSelect-select:after { content: "Hz"; }
.inv-N_m-unit .MuiSelect-select:after { content: "N/m"; }
.Grad-Celsius-unit .MuiSelect-select:after { content: "°C"; }

/* Style and position ALL injected units */
.input-with-unit .MuiSelect-select:after {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: normal;
    pointer-events: none;
    user-select: none;
}

.input-with-unit .MuiInputBase-root:after {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: normal;
    pointer-events: none;
    user-select: none;
}

/* -------------------------------------------------------- */


/* --- 6. Label immer im „fokussierten" Zustand (OBEN positioniert) --- */
.input-with-unit .MuiInputLabel-root {
    transform: translate(14px, -9px) scale(0.75) !important;  /* STÄRKER nach oben! */
    transform-origin: top left !important;
    position: absolute !important;          /* Absolut positionieren */
    left: 0;
    top: 0 !important;                      /* Oben andocken */
    z-index: 10 !important;                 /* ÜBER Border/Linie */
    background: var(--color-paper) !important;
    padding: 0 0px !important;
    overflow: hidden !important;
    box-shadow: -5px 0 0 var(--color-paper),
                5px 0 0 var(--color-paper) !important;

    font-family: Lato, Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4375em;
    display: block;
    text-overflow: ellipsis;
    user-select: none;
    pointer-events: auto;
    max-width: calc(133% - 32px);
    white-space: nowrap;
    transition: 200ms cubic-bezier(0, 0, 0.2, 1);
}

/* Transition komplett deaktivieren */
.input-with-unit .MuiInputLabel-root.MuiInputLabel-shrink {
    transition: none !important;
}

/* -------------------------------------------------------- */

/* --- 7. Tooltip/Hover Support --- */
/* Ensure tooltips are visible and have proper z-index */
.MuiTooltip-popper {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.MuiTooltip-tooltip {
    pointer-events: auto !important;
}

/* Ensure all form controls can trigger hover events */
.input-with-unit .MuiFormControl-root {
    pointer-events: auto !important;
}

/* Ensure the wrapper div around inputs allows hover */
.input-with-unit > div {
    pointer-events: auto !important;
}

/* -------------------------------------------------------- */

/* --- 8. Margin Bottom Classes --- */
/* Target the parent div of text elements with mb-* class */
.taipy-text.mb-4 {
    display: block !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
}

/* -------------------------------------------------------- */

/* --- 9. Reduced width of Markdown html --- */
/* Keep documentation content compact and scale images consistently. */
.doc-card {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px !important;
}

.doc-card img {
    max-width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .doc-card {
        width: 100%;
    }

    .doc-card img {
        max-width: 100%;
    }
}

/* -------------------------------------------------------- */

/* -------------------------------------------------------- */