/* Floating labels for the modal forms -- MODIFICATION 4.10, 2026-09-01. Shared by the main app and /administrator/, like css/choices_theme.css and for the same reason: both applications enhance every floats its label on focus/content via :placeholder-shown, and a control that never shows a placeholder at all -- type=date, datetime-local, time, file, color -- never matches :placeholder-shown, so Bootstrap's own :not(:placeholder-shown) rules float those labels permanently with no extra selector needed. */ /* ==================================================================================================== */ /* alignment with the app's own control metrics */ /* ==================================================================================================== */ /* Bootstrap's floating rules hardcode .75rem horizontal padding while every other control on the page reads --dfb-input-padding-x (0.85rem in both apps' style.css) -- realign so a floating input's text starts where a plain input's does. Vertical geometry (3.5rem box, 1rem/1.625rem paddings, the label transform) is left exactly as Bootstrap tuned it. */ .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { padding-left: var(--dfb-input-padding-x, .75rem); padding-right: var(--dfb-input-padding-x, .75rem); } .form-floating > label { padding-left: var(--dfb-input-padding-x, .75rem); padding-right: var(--dfb-input-padding-x, .75rem); /* Bootstrap gives the label overflow:hidden + text-overflow:ellipsis but NO width limit -- and an absolutely positioned box with no limit simply grows to fit its text, so on a narrow column (any viewport under ~1200px) a long label ran out of its input and over whatever sat beside it. The one missing constraint makes Bootstrap's own ellipsis actually fire. This is the RESTING label's cap, the one lying full size on an empty input; a floated label has its own, below. */ max-width: 100%; } /* A FLOATED LABEL GETS THE ROOM IT VISIBLY HAS -- 2026-10-03, version 2.67.2. The cap above used to be the only one, measured against the un-scaled box, and the note here called the early ellipsis "the safe direction". It is not safe for the reader: "Postal code" lost its last letters with input to spare beside it, which is what gui_visibility_audit.py reports as a label cut short. Bootstrap floats a label with scale(.85) translateY(-.5rem) translateX(.15rem) from its top-left corner, so its painted right edge sits at .85 x ( width + .15rem ); this cap puts that edge on the control's own right edge and no further. The selectors are every state Bootstrap and the Choices block below float a label in -- the autofill one in a rule of its own, as Bootstrap writes it, because a browser that does not know a prefixed selector drops the whole list. */ .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label, .form-floating > .choices ~ label { max-width: calc(100% / .85 - .15rem); } .form-floating > .form-control:-webkit-autofill ~ label { max-width: calc(100% / .85 - .15rem); } /* THE LABEL SITS ON THE INPUT, NOT ON THE PAGE. Bootstrap paints the floated label with rgba(--bs-body-color-rgb, .65), which is the page's text over the page's background -- but this app's inputs have their own surface (--dfb-input-bg per theme in the main app; a hardcoded dark box in the administrator's style.css, in BOTH of its themes). The placeholder colour is the one token already chosen to be legible on that surface in every combination, so the label borrows it; the literal fallback is the main app's light-theme value, which also reads correctly on the administrator's dark inputs. */ .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label, .form-floating > .choices ~ label { color: var(--dfb-input-placeholder, #8b9a86); } /* Bootstrap's floated label carries an ::after pill painted --bs-body-bg, so that textarea content scrolling under the label stays readable. The pill has to match the INPUT's surface here, not the page's -- see the label colour note above for why those differ in this app. */ .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after { background-color: var(--dfb-input-bg, #101010); } .form-floating > .form-control:disabled ~ label::after, .form-floating > :disabled ~ label::after { background-color: var(--dfb-input-disabled-bg, #181a1b); } /* Bootstrap pins every floating control to the 3.5rem box, which on a textarea silently overrides the rows attribute the markup asked for -- give the height back to the content and keep the box as a floor. */ .form-floating > textarea.form-control { height: auto; min-height: calc(3.5rem + 2px); } /* A RESTING LABEL ON A TEXTAREA MAY WRAP -- 2026-10-03, version 2.67.2. An input's label at rest has one line of box to lie in; a textarea's has all its rows, so there the ellipsis cut a label short with the room for it standing empty underneath -- the position assessment's "Testul dumneavoastră de proporționalitate" on a phone. Only at rest: floated, the label sits over the first line of text, and the floated cap above keeps it to one. */ .form-floating > textarea.form-control:placeholder-shown:not(:focus) ~ label { white-space: normal; } /* the colour swatch input is 3rem wide by default, which would clip the floated label sitting on it -- inside a floating group it fills its column like every other control */ .form-floating > .form-control-color { width: 100%; } /* ==================================================================================================== */ /* the Choices.js widget inside a floating group */ /* ==================================================================================================== */ /* js/choices_util.js replaces every