/* Admin section */

#AgreementsGrid .tabulator-group {
    background: #eee !important;
    color: black !important;
}

#AgreementsGrid a.contractbutton,
#UsersAdminGrid a.contractbutton {
    margin-left: 7px;
    padding: 5px 5px;
    color: #da721a;
    text-decoration: none;
}

    #AgreementsGrid a.contractbutton:hover,
    #UsersAdminGrid a.contractbutton:hover {
        background: #eee;
        color: black;
    }

.admin-submenu ul {
    list-style-type: none;
}

.admin-submenu li {
    float: left;
    margin-right: 15px;
}

.admin-submenu a {
    color: #666;
    padding: 15px;
    padding-bottom: 20px;
    text-decoration: none;
}

    .admin-submenu a:hover {
        color: black;
    }

    .admin-submenu a:first-of-type {
        margin-left: -20px;
    }

.admin-submenu li.active a {
    font-weight: bold;
}

.admin h2 {
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd
}

.test1 {
    background: #eee;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.16);
}

/* Contain frozen column z-index within the grid stacking context */
#UsersAdminGrid {
    isolation: isolate;
}

/* Search input: underline style matching reference UI */
.opus-tabulator-global-search,
.opus-tabulator-global-search .input-group {
    height: 31px;
    align-self: center;
}

/* Keep the magnifier addon and input on one line, and reserve enough width for the full
   placeholder ("Search by Station Id"). Bootstrap's .input-group defaults to flex-wrap:wrap and
   .form-control uses flex:1 1 auto; width:1%, so when the search box is relocated into the toolbar
   as a flex:0 0 auto child the container collapses to min-content: the input first wraps to a
   second line, then (once nowrap) shrinks and clips the placeholder. Pin the container width and
   let the input fill it. */
.opus-tabulator-global-search {
    flex: 0 0 auto;
    /* !important: the opus-tabulator library sets an inline width (~158px) on this element,
       which is too narrow for the placeholder and would otherwise override the stylesheet. */
    width: 280px !important;
}

.opus-tabulator-global-search .input-group {
    flex-wrap: nowrap;
    width: 100%;
}

.opus-tabulator-global-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.opus-tabulator-global-search .form-control,
.opus-tabulator-global-search .input-group-text {
    height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background: transparent;
}

.opus-tabulator-global-search .form-control:focus {
    box-shadow: none;
    border-bottom-color: #009688;
}

input[type='file'] {
    color: transparent;
}

.admin-poster {
    background: url('/img/admin-background.jpg');
    background-size: cover;
    height: 115px;
    background-position: bottom;
    position: relative;
}

.admin-poster__banner {
    text-shadow: 7px 3px 12px rgba(74, 69, 13, 0.87);
    position: absolute;
    bottom: 20px;
    left: 25px;
    font-size: 36px;
    color: white
}

.UserGroupAssignmentSaveButton, .teal-button {
    border-color: #009688;
    color: darkgreen
}

#DocumentsAdminGrid.tabulator {
    border: none;
    margin-top: 15px;
}

#ContentAdminGrid.tabulator {
    border: none;
}

/* Hide the auto-generated custom-action column ("__opusCustomActions") from every
   grid's column picker. The picker items are <label class="...picker-item"> with no
   data-field attribute, but the inner checkbox's aria-label holds the field name, so
   match that with :has() to hide the whole row. The item uses Bootstrap's .d-flex
   (display:flex !important), so !important is required to win. */
.opus-tabulator-column-picker-menu label:has(input[aria-label="__opusCustomActions" i]),
.opus-tabulator-column-picker-menu label:has(input[aria-label="_opuscustomaction" i]) {
    display: none !important;
}

#ContentAdminGrid.tabulator .tabulator-row {
    border-bottom: 1px solid #ddd;
}