/* ============================================================
   FCSpinEdit.css — plain <input> numeric spin edit control.
   Replaces ASPxSpinEdit (DevExpress) for money and integer fields.
   Matches the visual style and structure of FCTextBox.css.
   ============================================================ */

/* -------------------------------------------------------
   Container — display:flex + align-items:center matches
   FCTextBox container exactly (Req 10).
   Width is controlled by the parent / inline style on input.
   ------------------------------------------------------- */
.fc-spinedit-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* -------------------------------------------------------
   Input — base styles shared by editable and read-only.
   box-sizing: border-box so width includes padding/border.
   text-align: right — money and integer are always right-
   aligned (Req 45), matching result.Align = "right" in
   UIControlFactoryNewGrid for both ControlType_Money and
   ControlType_Int.
   ------------------------------------------------------- */
.fc-spinedit-input {
    box-sizing: border-box;
    border-radius: 2px;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------
   Editable state — border + background like FCTextBox.
   ------------------------------------------------------- */
.fc-spinedit-input--editable {
    border: 1px solid #ccc;
    background: #fff;
    color: inherit;
    padding: 0 6px;
    flex-shrink: 0; /* respect explicit widthPx when set */
    text-align: left; /* 2026.05.27 */
}

.fc-spinedit-input--editable:hover {
    border-color: rgba(90, 190, 91, 0.25);
}

.fc-spinedit-input--editable:focus {
    border-color: rgb(90, 190, 91);
    /* Show raw number on focus — text-align stays right for consistency */
}

/* -------------------------------------------------------
   Error state — red border, overrides editable border.
   ------------------------------------------------------- */
.fc-spinedit-input--error {
    border-color: #cc0000 !important;
}

/* -------------------------------------------------------
   Read-only state — no border, no background, gray bold.
   Matches FCTextBox read-only and ASPxSpinEdit ReadOnly
   style (BorderStyle.None, BackColor Transparent, ForeColor
   Gray, Font.Bold true).
   ------------------------------------------------------- */
.fc-spinedit-input--readonly {
    border: none;
    background: transparent;
    box-shadow: none;
    color: gray;
    font-weight: bold;
    cursor: default;
    padding: 0 4px;
    flex-shrink: 0;
    text-align: left; /* read-only: left-aligned (editable stays right-aligned per Req 45) */
}

/* -------------------------------------------------------
   Error span — inline, to the right of the input.
   Hidden by default; made visible with --visible modifier.
   Matches FCTextBox error span exactly (Req 21/34).
   ------------------------------------------------------- */
.fc-spinedit-error {
    display: none;
    white-space: nowrap;
    margin-left: 6px;
    color: #cc0000;
    font-weight: 600;
    font-size: inherit;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
}

.fc-spinedit-error--visible {
    display: inline-flex;
}

/* -------------------------------------------------------
   Error icon — red circle with white !
   Matches FCTextBox .fc-textbox-error-icon exactly (Req 22).
   Colors sourced from variables.css via shared palette.
   ------------------------------------------------------- */
.fc-spinedit-error-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #cc0000;
    border-radius: 50%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Ctext x=%276%27 y=%2713%27 font-size=%2713%27 font-weight=%27bold%27 fill=%27white%27%3E!%3C/text%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
}