/* search-min.css : Admin Search page (V3), same v3 shell as records and statistics.
   Search bar over a flat list of result rows with a simple two pages pager. */

.search { --srch-accent: #be00a7; }

.block_content.search{
    background: #262626;
    padding: 1.6em 1.6em 1.8em;
    border-radius: 12px;
    box-sizing: border-box;
}
.search .content-header{
    text-align: center;
    padding: .6em 0 1.4em;
    color: #8f8f8f;
}
#main__content .main-wrapper .search .content-header h1.title{
    color: #fff;
    font-size: 3.6em;
    margin: 0 0 .15em;
    padding: 0;
}
.search .content-header p{
    margin: 0;
    color: var(--srch-accent);
    font-size: 1.6em;
    letter-spacing: .02em;
}
/* Hash mode subtitle: the source id link back to its validation page */
.search .content-header p.search-sub a{
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--srch-accent);
}
.search .content-header p.search-sub a:hover{ color: var(--srch-accent); }

.search-form{
    max-width: 640px;
    margin: 0 auto;
}
.search-bar{
    display: flex;
    gap: .6em;
}
.search-bar input[type="text"]{
    flex: 1 1 auto;
    min-width: 0;
    padding: .8em 1em;
    font-size: 1.5em;
    color: #fff;
    background: #1d1d1d;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    box-sizing: border-box;
    outline: none;
}
.search-bar input[type="text"]:focus{
    border-color: var(--srch-accent);
}
.search-bar input::placeholder{ color: #6a6a6a; }

.search-bar button{
    flex: 0 0 auto;
    padding: 0 1.6em;
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    background: var(--srch-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.search-bar button:disabled{ opacity: .55; cursor: default; }

.search-all{
    display: flex;
    align-items: center;
    gap: .5em;
    margin: .9em .2em 0;
    color: #8f8f8f;
    font-size: 1.25em;
    cursor: pointer;
}
.search-all input{ accent-color: var(--srch-accent); }

.search-status{
    min-height: 1.4em;
    margin: 1.2em auto 0;
    max-width: 640px;
    text-align: center;
    color: #b9b9b9;
    font-size: 1.3em;
}

.search-tablewrap{
    margin-top: 1.2em;
    overflow-x: auto;            /* horizontal scroll on narrow viewports */
    -webkit-overflow-scrolling: touch;
}
.search-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 1.25em;
    color: #cfcfcf;
}

.search-table thead th{
    text-align: left;
    padding: .7em 1em;
    color: #8f8f8f;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85em;
    white-space: nowrap;
    border-bottom: 1px solid #3a3a3a;
}

.search-table tbody tr{
    background: #1d1d1d;
    cursor: pointer;
    border-bottom: 2px solid #262626;   /* gap effect against the panel */
}
.search-table tbody tr:hover{ background: #242424; }
.search-table tbody tr:focus{ outline: 1px solid var(--srch-accent); outline-offset: -1px; }
.search-table tbody tr.is-private{ box-shadow: inset 3px 0 0 #ff8c2e; }
/* Hash mode: the row of the validation we came from */
.search-table tbody tr.is-source{ box-shadow: inset 3px 0 0 var(--srch-accent); }

.search-table td{
    padding: 1.15em 1em;
    vertical-align: top;
}
.search-table .c-main{
    color: #eee;
    overflow-wrap: anywhere;   /* wrap long names instead of truncating */
}
.search-table .c-sub{
    margin-top: .15em;
    color: #777;
    font-size: .88em;
}
.search-table .c-cpu{ font-weight: 600; color: #fff; }
.search-table .c-freq{ color: var(--srch-accent); font-weight: 600; font-size: 1.2em; }

/* Dynamic widths : every column sizes on its content so the text is not truncated.
   Only the CPU column is fixed, to keep the left edge stable. */
.search-table .col-cpu{ width: 18em; }
.search-table .col-cpuid .c-main,
.search-table .col-ram   .c-main,
.search-table .col-sub   .c-main{ white-space: nowrap; }

.search-badge{
    display: inline-block;
    margin-left: .5em;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #ff8c2e;
    border: 1px solid #ff8c2e;
    border-radius: 4px;
    padding: .05em .45em;
    vertical-align: middle;
}
.search-badge.es{ color: var(--srch-accent); border-color: var(--srch-accent); }

.search-pager{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2em;
    margin-top: 1.4em;
}
.search-pagebtn{
    padding: .55em 1.2em;
    font-size: 1.3em;
    color: #fff;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    cursor: pointer;
}
.search-pagebtn:disabled{ opacity: .4; cursor: default; }
.search-pageinfo{ color: #8f8f8f; font-size: 1.3em; }

/* RESPONSIVE, narrow screens : under 768px the table become a list of cards, one tr = one grid */
@media (max-width: 768px) {
    .search-tablewrap{ overflow-x: visible; }
    .search-table,
    .search-table tbody{ display: block; width: 100%; }
    /* display:block above would beat the UA hidden rule */
    .search-table[hidden]{ display: none; }
    .search-table thead{ display: none; }

    .search-table tbody tr{
        display: grid;
        grid-template-columns: 1fr;
        gap: .15em 0;
        padding: .75em 1em .85em;
        border-bottom: 6px solid #262626;
    }
    .search-table td{
        display: block;
        padding: 0;
        min-width: 0;
    }
    .search-table .col-cpu{ width: auto; }
    .search-table .col-cpuid{ display: none; }
    /* grid auto-placement follow the DOM order */
    .search-table .col-cpu{ order: 1; }
    .search-table .col-mb { order: 2; }
    .search-table .col-gpu{ order: 3; }
    .search-table .col-ram{ order: 4; }
    .search-table .col-sub{ order: 5; }
    .search-table .col-mb,
    .search-table .col-gpu,
    .search-table .col-ram{ padding-left: 1em; }

    /* the nowrap of the wide table would push the card out of the screen */
    .search-table .col-ram .c-main,
    .search-table .col-sub .c-main{ white-space: normal; }

    .search-table .col-cpu,
    .search-table .col-ram,
    .search-table .col-sub{
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 .7em;
    }
    .search-table .col-cpu .c-sub,
    .search-table .col-ram .c-sub,
    .search-table .col-sub .c-sub{ margin-top: 0; }
    .search-table .col-cpu{ justify-content: space-between; margin-bottom: .6em; }
    .search-table .col-cpu .c-cpu{ font-style: italic; }
    .search-table .col-ram .c-sub{ color: #eee; font-size: 1em; }

    .search-table .col-sub{
        justify-content: space-between;
        margin-top: .45em;
        padding-top: .4em;
        border-top: 1px solid #2e2e2e;
        font-size: .9em;
    }
    .search-table .col-sub .c-main{ color: #c4c4c4; }
    .search-table .col-sub .c-sub{ color: #a0a0a0; font-size: 1em; }

    /* muted labels, the column header is gone */
    .search-table .col-mb  .c-main:before,
    .search-table .col-ram .c-main:before,
    .search-table .col-gpu .c-main:before{
        display: inline-block;
        color: #a0a0a0;
        font-size: .85em;
        margin-right: .45em;
        padding-right: 1em;
        /* triangle separator after the label, inline SVG */
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0L8 5 0 10z' fill='%23ffffff'/%3E%3C/svg%3E") right center / .5em .6em no-repeat;
    }
    .search-table .col-mb    .c-main:before{ content: 'MB'; }
    .search-table .col-ram   .c-main:before{ content: 'RAM'; }
    .search-table .col-gpu   .c-main:before{ content: 'GPU'; }
}

@media (max-width: 640px) {
    .block_content.search{ padding: 1em; }
    .search .content-header{ padding: .4em 0 1.1em; }
    #main__content .main-wrapper .search .content-header h1.title{ font-size: 2.6em; }
    .search .content-header p{ font-size: 1.3em; }
    .search-bar input[type="text"],
    .search-bar button{ font-size: 1.35em; }
    .search-bar button{ padding: 0 1.1em; }
    .search-table{ font-size: 1.2em; }
}