/* Styles moved from KboStringManager.aspx */

/* Radio button list: surround each option with a bordered pill and show the value to the right */
.kbo-rbl label,
.kbo-rbl span {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 6px 10px;
    margin-right: 6px;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.kbo-rbl input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}

/* Slight hover highlight */
.kbo-rbl label:hover,
.kbo-rbl span:hover {
    background: #f6f6f6;
    border-color: #999;
}

/* Narrower dropdowns for prefix and locale */
.kbo-prefix { width: 140px; }
.kbo-locale { width: 120px; }

/* Container around the radio buttons */
.kbo-rbl-container {
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
    background: #fff;
}

.kbo-rbl-title {
    font-weight: bold;
    margin-bottom: 6px;
}

/* Small spacing for the action buttons */
.kbo-actions > input[type="submit"], .kbo-actions > input[type="button"], .kbo-actions .aspNetButton, .kbo-actions button {
    margin-left: 6px;
}

/* Basic layout helpers for the grids */
#kboDbGrid, #kboHtmlGrid, #kboSessionGrid {
    min-height: 36px;
    margin-top: 6px;
}
/* Doubled from 360px: resource names like header.CheckoutPayment.PurchaseOrder
   were being truncated in the visible field. */
.kbo-entity-name {
    width: 720px;
}

.kbo-name {
    width: 280px;
}

/* Status text next to the action buttons */
.kbo-status {
    margin-left: 10px;
    font-style: italic;
    color: #555;
}

.kbo-status.kbo-error {
    color: #b00020;
    font-style: normal;
    font-weight: bold;
}

/* Color legend, mirroring the WinForms version's row states */
.kbo-legend {
    margin: 8px 0;
    font-size: 12px;
}

.kbo-legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
}

/* The swatch is an empty <i>, so it needs explicit box sizing to render at all.
   flex-shrink guards against the inline-flex parent collapsing it. */
.kbo-legend .kbo-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    flex: 0 0 14px;
    margin-right: 5px;
    border: 1px solid #999;
    background-color: #ffffff;
}

/* Row state colors. Applied to igGrid <tr> elements, and marked !important because
   the Infragistics theme sets its own alternating-row background. */
.kbo-row-normal { background-color: #ffffff !important; }
.kbo-row-inboth { background-color: #90ee90 !important; }
.kbo-row-missing { background-color: #f08080 !important; }
.kbo-row-notused { background-color: #ffb6c1 !important; }
.kbo-row-selected { background-color: #add8e6 !important; }

/* Keep every grid cell on a single line. Values are multi-line HTML/text, so without
   this a tall record stretches its row and the grid becomes hard to scan.

   Selectors are deliberately broad: igGrid renders the data table into a generated
   wrapper ("<id>_container", "<id>_scroll", etc.) and often puts cell content inside an
   inner element, so styling "#id td" alone left the inner node free to wrap. The
   [id^=] prefix match plus the "td > *" descendant rule cover both shapes.

   max-width:0 is required for text-overflow to take effect inside a table cell that
   would otherwise size to its content; the column widths set in StringManager.ts still
   govern the actual rendered width. The full value remains available in the editor
   when the row is selected. */
[id^="kboDbGrid"] td,
[id^="kboHtmlGrid"] td,
[id^="kboSessionGrid"] td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 0;
}

[id^="kboDbGrid"] td > *,
[id^="kboHtmlGrid"] td > *,
[id^="kboSessionGrid"] td > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

/* Allow the resource names in the DB Strings and HTML Strings grids to be highlighted
   for copy/paste. The igGrid selection feature sets user-select:none on the data table
   so that click-drag selects rows rather than text, which also blocks copying a name.
   Re-enabling it on the cells keeps row selection working (that is driven by click,
   not by text selection) while letting the name be selected with the mouse. */
[id^="kboDbGrid"] td,
[id^="kboHtmlGrid"] td,
[id^="kboSessionGrid"] td,
[id^="kboDbGrid"] td > *,
[id^="kboHtmlGrid"] td > *,
[id^="kboSessionGrid"] td > * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* The Name column is rendered as <span class="kbo-selectable"> (see StringManager.ts)
   so the name itself is a distinct hit target for text selection. The text cursor is
   the affordance telling the user this cell can be highlighted, unlike the rest of the
   row which acts as a record picker. */
.kbo-selectable {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    cursor: text;
}