/* Extracted verbatim from
   application/views/admin/preverification/verification_upload.php.
   The legacy view carried these rules inline; they are lifted into a file so
   the React page renders identically. Do not restyle - this IS the theme. */

/* AdminLTE absolutely positions .box-tools in the header corner, which makes
   a control as wide as this one overflow the panel. Lay the header out as a
   flex row instead so the title and the upload form share the space. */
.vu-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.vu-header .box-title {
    /* Explicit margins: AdminLTE's own rules were centring this inside the
       flex row. margin-right:auto pins the title left and pushes the tools
       to the far right without relying on justify-content. */
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 0 0 auto;
    text-align: left;
}

.vu-header .box-tools {
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    flex: 0 1 auto;
}

.vu-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Buttons are flex items, and the default flex-shrink:1 was squeezing them
   below their label width, clipping "Upload CSV". Stop them shrinking and
   let the file input give up space instead. */
/* The design system gives header buttons a tight 4px/11px padding, which is
   fine for an icon-only control but cramped for "Upload CSV". A little more
   breathing room plus a shared min-width keeps the pair even. */
.vu-upload .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px !important;
    min-width: 124px;
    line-height: 18px;
}

.vu-upload .btn i,
.vu-upload .btn .fa {
    margin-right: 6px !important;
}

.vu-upload input[type="file"] {
    flex: 0 1 auto;
    min-width: 0;
}

.vu-upload input[type="file"] {
    font-size: 12px;
    color: #fff;
    width: 205px;
    max-width: 40vw;
}

.vu-upload input[type="file"]::file-selector-button {
    font-size: 12px;
    padding: 3px 10px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
}


.vu-empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--ril-text-muted);
    font-size: 13px;
}

/* The list shows every column from the template, so it is wide by design:
   scroll it horizontally rather than letting cells squeeze. */
.vu-scroll {
    overflow-x: auto;
    width: 100%;
}

/* A global script in main_header.php wraps every table in
   <div class="table-wrap"> (overflow:auto) 100ms after load. Nested inside
   our own scroller that produced two horizontal scrollbars, so the inner
   wrapper is flattened and .vu-scroll stays the only one. */
.vu-scroll .table-wrap {
    overflow: visible !important;
    width: auto !important;
}

.vu-scroll table.table {
    width: auto !important;
    min-width: 100%;
}

.vu-scroll table.table > thead > tr > th {
    white-space: nowrap;
}

.vu-scroll table.table > tbody > tr > td {
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep the row number and Request ID in view while scrolling sideways. */
.vu-scroll table.table > thead > tr > th:nth-child(-n+2),
.vu-scroll table.table > tbody > tr > td:nth-child(-n+2) {
    position: sticky;
    background: var(--ril-surface);
    z-index: 2;
}

.vu-scroll table.table > thead > tr > th:nth-child(-n+2) {
    background: var(--ril-accent) !important;
    z-index: 3;
}

.vu-scroll table.table > thead > tr > th:nth-child(1),
.vu-scroll table.table > tbody > tr > td:nth-child(1) { left: 0; }

.vu-scroll table.table > thead > tr > th:nth-child(2),
.vu-scroll table.table > tbody > tr > td:nth-child(2) { left: 62px; }