/*
 * Backpack 7 markup on the CoreUI v2 theme, styled like the Backpack 5 admin (plinius-bundle.css).
 * Values taken from the computed styles of the Backpack 5 admin before the Laravel 13 upgrade.
 */

/* Page subheading ("Bewerken property.", "Toon 1 tot 3 van 3 items. Reset") */
[bp-section=page-subheading],
.header-operation > p.animated {
    font-size: 16px;
    letter-spacing: 3.2px;
    color: #2b2b2b;
    margin-left: 0 !important;
    padding-left: 4px;
}
.header-operation .dt-info {
    opacity: .3;
}

/* Search box: the size of the Backpack 5 search box, without the icon */
.datatable_search_stack {
    display: flex;
    justify-content: flex-end;
}
.datatable_search_stack .input-icon-addon {
    display: none;
}
.datatable_search_stack .datatable-search-input {
    width: 174px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Table: transparent with light striping, cells aligned to the top */
.dt-container table.crud-table.dataTable {
    background-color: transparent !important; /* coreuiv2.css sets #fff !important */
}
table.crud-table thead th,
table.crud-table tfoot th {
    font-weight: 400;
    background-color: rgba(0, 0, 0, .02);
    padding: 12px 12px;
    vertical-align: bottom;
}
table.crud-table.table-vcenter > tbody > tr > td {
    vertical-align: top;
}
table.crud-table.table-striped > tbody > tr > * {
    box-shadow: none !important; /* dataTables.bootstrap5 striping */
}
table.crud-table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .1);
}
table.crud-table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .02);
}

/* Items per page */
.dt-length select.form-select {
    -webkit-appearance: none;
    appearance: none;
    height: 38px;
    width: 56px;
    padding: 6px 12px;
    margin-right: 0;
    font-size: 15px;
    line-height: 24px;
    vertical-align: middle;
    color: #010101;
    background: rgba(255, 255, 255, .345) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23404040' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) 50% / 8px 10px;
    border: 1px solid rgba(0, 40, 100, .12);
}

/* Pagination: joined boxes (selectors as in coreuiv2.css, loaded after it) */
div.dt-container .dt-paging .dt-paging-button .page-link {
    -webkit-appearance: none;
    appearance: none;
    font-family: Lora, serif;
    font-size: 12.8px;
    line-height: 16px;
    color: #999;
    border: 1px solid #d9e2ef;
    border-radius: 0;
    margin: 0 0 0 -1px;
    min-width: 33px;
    height: 34px;
}
div.dt-container .dt-paging .dt-paging-button:first-child .page-link {
    border-radius: 4px 0 0 4px;
}
div.dt-container .dt-paging .dt-paging-button:last-child .page-link {
    border-radius: 0 4px 4px 0;
}
div.dt-container .dt-paging .dt-paging-button.disabled .page-link {
    color: #999;
    border-color: #d9e2ef;
}
div.dt-container .dt-paging .dt-paging-button.active .page-link {
    color: #fff;
    border-color: #67714f;
}

/* Language dropdown on edit forms: small, on the right */
[bp-section=update-operation-language-dropdown] {
    text-align: right !important;
}
[bp-section=update-operation-language-dropdown] > .btn-group {
    max-width: none;
    padding: 0;
}
[bp-section=update-operation-language-dropdown] .dropdown-toggle {
    padding: .25rem .5rem;
    font-size: .765625rem;
    line-height: 1.5;
}

/* 2-factor authentication code field: readable contrast (placeholder 5.3:1 on white) */
.form-control.two-factor-code {
    height: 48px;
    background-color: #fff;
    border: 1px solid #6b6b6b;
    color: #1a1a1a;
    font-size: 20px;
    letter-spacing: 4px;
    text-align: center;
}
.form-control.two-factor-code::placeholder {
    color: #6b6b6b;
    opacity: 1;
    font-size: 15px;
    letter-spacing: normal;
}
.form-control.two-factor-code:focus {
    border-color: #67714f;
    box-shadow: 0 0 0 .2rem rgba(103, 113, 79, .25);
}