/**
 * ItemsTable UI Styles
 * CSS for ItemsTable viewer buttons and container
 */

/* Show button styles */
.itemsTableShowBtn {
    background: #f5f5f5;
    border: 1px solid #ccc;
    color: #333;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    line-height: 1.4;
    transition: background 0.2s;
    text-transform: none;
}

.itemsTableShowBtn:hover {
    background: #e8e8e8;
}

/* Container for ItemsTable */
.itemsTableContainer {
    display: none;
    border: 1px solid #ddd;
    padding: 5px 8px;
    margin-top: 5px;
    background: #f9f9f9;
    position: relative;
    width: calc(100% + 140px);
    margin-left: -10px;
    max-width: calc(100vw - 160px);
    box-sizing: border-box;
}

/* Constrain ItemsTable width to match form fields on Edit/View Properties pages */
.imagestore-props .itemsTableContainer,
.propstable .itemsTableContainer,
.fieldset .itemsTableContainer {
    width: 100%;
    margin-left: 0;
    max-width: none;
}

/* Bugs 81757 / 81761: Reference View Table — many-column linked tables were
   compressed to container width with no scrollbar. Put overflow-x on the
   INNER content wrapper, not the container, so the absolutely-positioned
   close button (.itemsTableCloseWrapper) stays anchored to the visible
   right edge of the container instead of the scrollable content's right
   edge. Scoped to Reference containers only (id="refTable_*" is set by
   VDFTableReferenceProperty.html_view_value); does NOT affect the
   existing ItemsTable editor widget (id="itemsTable_*"). */
.itemsTableContainer[id^="refTable_"] > div:not(.itemsTableCloseWrapper) {
    overflow-x: auto;
}

/* Bug 83269: Reference View Table container must never inherit the base
   .itemsTableContainer over-width (calc(100% + 140px) / margin-left:-10px),
   which was designed for full-page Edit/View Properties. In narrow split
   panes (side-by-side viewer = ImageStoreViewProps, TaskView) that over-width
   spills the box ~140px past its cell and overlaps the neighbouring field /
   the viewer pane. Scoped to Reference containers (id^="refTable_"); the inner
   content already scrolls via the overflow-x:auto rule above, so constraining
   the outer container loses no table width. Placed after the ancestor-scoped
   override so it wins on equal specificity for every screen. */
.itemsTableContainer[id^="refTable_"] {
    width: 100%;
    margin-left: 0;
    max-width: none;
}

/* Bug 83269: autocomplete lookup icon hidden in narrow side-by-side viewer
   panes. The autocomplete field is emitted as a white-space:nowrap flex row
   (.ds-autocomplete-container) holding a size='60' <input> (~450px intrinsic)
   followed by the .autocomplete-lookup-icon. In the narrow ImageStoreViewer
   props frame (cols="53%,*") the input can't shrink below its intrinsic
   width (default min-width:auto on flex items), so the row overflows and the
   trailing icon is pushed past the visible pane and clipped. Letting the input
   shrink keeps the icon in view. Harmless on full-width Edit Properties pages,
   where the input keeps its size because there is room. */
.ds-autocomplete-container {
    max-width: 100%;
}
.ds-autocomplete-container input {
    min-width: 0;
}

/* Ensure .fieldset table doesn't overflow its container (TaskView, MultiSelect frames).
   Scoped to #popuppreview_props to avoid breaking other pages that use class="fieldset"
   (e.g., ChangeUserLevel, AddInteract, EditPermissions). */
#popuppreview_props table.fieldset {
    width: 100%;
    table-layout: fixed;
}
#popuppreview_props table.fieldset > tbody > tr > td:first-child {
    width: 130px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
}
#popuppreview_props table.fieldset > tbody > tr > td:last-child {
    overflow: hidden;
}



/* Truncate long cell content to 3 lines max; full text shown on hover */
.itemsTable-cell-truncate {
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
}

/* Close button wrapper - positioned at top right */
.itemsTableCloseWrapper {
    position: absolute;
    top: 3px;
    right: 8px;
    z-index: 10;
}

/* Close button styles */
.itemsTableCloseBtn {
    background: transparent;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
    font-weight: bold;
    line-height: 1;
}

/* Hidden policy element */
.itemsTable-policy {
    display: none;
}

/* Warning/alert icon for autocomplete mismatch, required empty, data type errors (used by both editor and viewer) */
.itemsTable-ac-mismatch {
    color: #d32f2f;
    cursor: help;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}
.itemsTable-ac-mismatch svg {
    width: 14px;
    height: 14px;
    fill: #d32f2f;
}

/* Autocomplete-enabled column fields in ItemsTable editor modal */
/* Matches existing DocuShare autocomplete styling: box-shadow golden glow */
.itemstable-autocomplete-field {
    box-shadow: 0 0 3px #FFCC00 !important;
}

.itemstable-autocomplete-field:focus {
    box-shadow: 0 0 5px #FFCC00 !important;
    outline: none;
}

/* --- Tighter spacing overrides for TaskView properties page (#popuppreview_props) ---
 * Reduces padding/margins from theme docushare.css to maximize space for ItemsTable.
 * Scoped to #popuppreview_props so other pages are not affected.
 */
#popuppreview_props .page-wrapper {
    margin: 2px 4px;
}
#popuppreview_props .content {
    padding: 4px 8px;
}
#popuppreview_props .content .fieldset > tbody > tr > td,
#popuppreview_props .fieldset > tbody > tr > td {
    padding-bottom: 10px;
    padding-right: 10px;
    line-height: 1.4;
}
#popuppreview_props .content .fieldset > tbody > tr > td:first-child,
#popuppreview_props .fieldset > tbody > tr > td:first-child {
    width: 130px;
}
/* Fix label/value vertical misalignment: theme sets label { margin-top: 8px }
   which pushes label text down relative to value text in property rows */
#popuppreview_props .fieldset > tbody > tr > td:first-child label,
#popuppreview_props .content .fieldset > tbody > tr > td:first-child label {
    margin-top: 0;
}

/* jQuery UI autocomplete dropdown styling for ItemsTable */
.ui-autocomplete.itemstable-autocomplete-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ui-autocomplete.itemstable-autocomplete-menu .ui-menu-item {
    padding: 6px 10px;
    cursor: pointer;
}

.ui-autocomplete.itemstable-autocomplete-menu .ui-menu-item:hover,
.ui-autocomplete.itemstable-autocomplete-menu .ui-state-active {
    background-color: #e3f2fd;
}