/* Light refresh of the Bootstrap components on every page, through Bootstrap's own CSS variables.
   Loaded after style.default.css and before style.test.css. Removing the file restores the old look (only the header user dropdown is markup). */

:root {
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-border-color: #d9dde3;
    --ui-focus-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

body {
    background-color: #f4f5f7;
    color: #4b5563;
}

/* Fields and buttons were 16px next to 13px body text; 14px with 7px padding gives 37px, the select2 height. */
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 14px;
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-xs) {
    --bs-btn-font-size: 14px;
    --bs-btn-padding-y: 7px;
}

/* Cards */
.card {
    --bs-card-border-color: #e5e7eb;
    --bs-card-cap-color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card > .card-header {
    border-bottom-color: #eceef1;
}

.card > .card-footer {
    border-top-color: #eceef1;
}

.card-title {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

/* Tabs: underline instead of boxes */
.nav-tabs {
    --bs-nav-tabs-border-color: #e5e7eb;
    gap: 4px;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #6b7280;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: #d1d5db;
    color: #111827;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--bs-primary);
    background: none;
    color: var(--bs-primary);
}

/* Modals */
.modal {
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: 0.75rem;
    --bs-modal-inner-border-radius: calc(0.75rem - 1px);
    --bs-modal-box-shadow: 0 20px 48px rgba(17, 24, 39, 0.2);
    --bs-modal-header-border-color: #eceef1;
    --bs-modal-footer-border-color: #eceef1;
}

.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

.modal-title {
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

/* Pagination and tooltips */
.pagination {
    --bs-pagination-color: #374151;
    --bs-pagination-border-color: #e5e7eb;
    --bs-pagination-hover-color: #111827;
    --bs-pagination-hover-bg: #f3f4f6;
    --bs-pagination-hover-border-color: #e5e7eb;
    --bs-pagination-disabled-color: #c4cad3;
    --bs-pagination-disabled-border-color: #e5e7eb;
}

.tooltip {
    --bs-tooltip-bg: #111827;
    --bs-tooltip-border-radius: 6px;
    --bs-tooltip-font-size: 12px;
}

/* Flash messages: toasts at the bottom right (SessionMessage::show()) */
.flash-toast {
    --bs-toast-bg: #fff;
    --bs-toast-color: #111827;
    --bs-toast-border-color: #e5e7eb;
    --bs-toast-max-width: 420px;
    --bs-toast-font-size: 13px;
    --bs-toast-box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-left: 4px solid var(--flash-color);
}

/* Bootstrap hides a toast without .show; here it also has to win from display: flex above. */
.flash-toast:not(.show) {
    display: none;
}

.flash-toast .toast-body {
    flex: 1;
    padding: 0;
}

.flash-toast-icon {
    margin-top: 2px;
    color: var(--flash-color);
    font-size: 15px;
}

.flash-toast .btn-close {
    flex-shrink: 0;
    font-size: 11px;
}

.flash-toast-success { --flash-color: var(--bs-success); }
.flash-toast-danger { --flash-color: var(--bs-danger); }
.flash-toast-warning { --flash-color: var(--bs-warning); }
.flash-toast-info { --flash-color: var(--bs-info); }

/* Form fields: the look of the menu search */
.form-control,
.form-select {
    border-color: var(--bs-border-color);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: #b8bfc9;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--ui-focus-ring);
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-check-input:focus {
    box-shadow: var(--ui-focus-ring);
}

/* Buttons */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), 0.3);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* Secondary was the near-black brand colour; as a plain white button it no longer competes with the primary action. */
.btn-secondary {
    --bs-btn-color: #374151;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d9dde3;
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: #f3f4f6;
    --bs-btn-hover-border-color: #c4cad3;
    --bs-btn-active-color: #111827;
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: #c4cad3;
    --bs-btn-disabled-color: #9ca3af;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #e5e7eb;
    --bs-btn-focus-shadow-rgb: 156, 163, 175;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Outline buttons: a faint tint of their own colour and a softer border; hover deepens the tint
   instead of filling solid, so the solid fill stays reserved for .active (filter/toggle groups). */
[class*="btn-outline-"]:not(.btn-outline-light) {
    --bs-btn-bg: color-mix(in srgb, var(--bs-btn-color) 6%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--bs-btn-color) 35%, transparent);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-color) 13%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-btn-color) 55%, transparent);
}

/* resources/sass/app.scss compiles a fixed radius into .btn-xs; 11px text was hard to read.
   Smaller vertical padding keeps the height, so table rows do not grow. */
.btn-xs {
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

/* Tables: light header, hairline rows and a hover instead of stripes.
   .table-dark tables and coloured filter rows (tr.table-info) keep their old look. */
.table:not(.table-dark) {
    --bs-table-border-color: #eceef1;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.045);
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.table:not(.table-dark) > thead > tr:not(.table-info) > th {
    --bs-table-bg: #f9fafb;
    --bs-table-color: #6b7280;
    background-color: #f9fafb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

.table:not(.table-dark) > tbody > tr:not([class*="table-"]):hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

/* A website is its colour dot plus name everywhere: websiteLabel() in PHP, the same markup in
   includes/search-bar-v2.php. Flex keeps the dot beside a name that wraps. */
.website-label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.website-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9ca3af;
}

/* A payment method without a logo, from orderPaymentMethod(): a question mark in the box of a
   logo, the name in its title. The pages set the size of .payment-method themselves. */
.payment-method-unknown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 1.5em;
    border-radius: .25rem;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
    color: #9ca3af;
    cursor: help;
}

/* Select2, in the look of .form-select. The html prefix wins from select2.min.css, which loads later. */
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
    min-height: 37px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

html .select2-container--default .select2-selection--single {
    height: 37px;
}

html .select2-container--default .select2-selection--single:hover,
html .select2-container--default .select2-selection--multiple:hover {
    border-color: #b8bfc9;
}

html .select2-container--default.select2-container--focus .select2-selection,
html .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--ui-focus-ring);
}

html .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 32px;
    color: var(--bs-body-color);
    font-size: 14px;
    line-height: 35px;
}

html .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

html .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 6px;
    width: 24px;
    height: 35px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / 12px no-repeat;
}

html .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: #e5e7eb;
    border-radius: 6px;
    background-color: #f3f4f6;
}

html .select2-dropdown {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
}

html .select2-container--open .select2-dropdown--below {
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
    border-radius: var(--bs-border-radius);
}

html .select2-container--open .select2-dropdown--above {
    margin-top: -4px;
    border-bottom: 1px solid #e5e7eb;
    border-radius: var(--bs-border-radius);
}

html .select2-results__option {
    padding: 6px 12px;
}

html .select2-container--default .select2-results__option--selected,
html .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f3f4f6;
    color: var(--bs-body-color);
}

html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-body-color);
}

html .select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 6px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    outline: 0;
}

html .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--ui-focus-ring);
}

/* amsify tag inputs (suppliers, stock relations), in the look of the fields and the stock chips.
   The html prefix wins from amsify.suggestags.css. */
html .amsify-suggestags-area .amsify-suggestags-input-area-default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 37px;
    padding: 5px 6px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

html .amsify-suggestags-area .amsify-suggestags-input-area.amsify-focus,
html .amsify-suggestags-area .amsify-suggestags-input-area.amsify-focus-light {
    border-color: var(--bs-primary);
    box-shadow: var(--ui-focus-ring);
}

html .amsify-suggestags-area .amsify-suggestags-input-area .amsify-suggestags-input {
    flex: 1 0 120px;
    min-width: 0;
    padding: 0 4px;
    font-size: 14px;
    line-height: 25px;
}

html .amsify-suggestags-input-area .amsify-select-tag.col-bg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0 2px 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    font-size: 12px;
    font-weight: 500;
    line-height: 23px;
    white-space: nowrap;
}

html .amsify-suggestags-input-area .amsify-select-tag.col-bg:hover {
    border-color: #c4cad3;
}

/* The heavy ✖ of the plugin becomes a light ×; the plugin still finds it by its class. */
html .amsify-suggestags-input-area .amsify-remove-tag {
    display: inline-block;
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 4px;
    color: #9ca3af;
    font-size: 0;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

html .amsify-suggestags-input-area .amsify-remove-tag::before {
    content: "\00d7";
    font-size: 16px;
}

html .amsify-suggestags-input-area .amsify-remove-tag:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

html .amsify-suggestags-area .amsify-suggestags-list {
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: var(--bs-border-radius);
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
    z-index: 1060;
}

html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list {
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
}

html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list li.amsify-list-item {
    padding: 6px 12px;
    font-size: 13px;
}

html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list li.active,
html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list li.amsify-list-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list li.amsify-list-item:active {
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: inherit;
    box-shadow: none;
}

html .amsify-suggestags-area .amsify-suggestags-list ul.amsify-list li.amsify-item-noresult {
    padding: 6px 12px;
    color: #9ca3af;
    font-weight: 400;
    text-align: left;
}

/* Alerts: the same soft tint as the badges, with a thin coloured edge on the left. */
.alert-primary { --ui-alert: var(--bs-primary); }
.alert-secondary { --ui-alert: #6b7280; }
.alert-success { --ui-alert: var(--bs-success); }
.alert-danger { --ui-alert: var(--bs-danger); }
.alert-warning { --ui-alert: #d97706; }
.alert-info { --ui-alert: var(--bs-info); }

.alert:is(.alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info) {
    --bs-alert-bg: color-mix(in srgb, var(--ui-alert) 7%, #fff);
    --bs-alert-color: color-mix(in srgb, var(--ui-alert) 70%, #111827);
    --bs-alert-border-color: color-mix(in srgb, var(--ui-alert) 22%, #fff);
    --bs-alert-link-color: color-mix(in srgb, var(--ui-alert) 85%, #000);
    --bs-alert-padding-y: 12px;
    --bs-alert-padding-x: 14px;
    border-left: 3px solid var(--ui-alert);
}

/* Links in the same colour as the text need the underline to be seen as links. */
.alert a:not(.btn) {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Status badges in page content and page headers: a soft tint of their colour instead of a solid block */
:is(.contentpanel, .pageheader) .badge.bg-primary { --ui-badge: var(--bs-primary); }
:is(.contentpanel, .pageheader) .badge.bg-secondary { --ui-badge: var(--bs-secondary); }
:is(.contentpanel, .pageheader) .badge.bg-success { --ui-badge: var(--bs-success); }
:is(.contentpanel, .pageheader) .badge.bg-danger { --ui-badge: var(--bs-danger); }
:is(.contentpanel, .pageheader) .badge.bg-warning { --ui-badge: var(--bs-warning); }
:is(.contentpanel, .pageheader) .badge.bg-info { --ui-badge: var(--bs-info); }
:is(.contentpanel, .pageheader) .badge.bg-dark { --ui-badge: var(--bs-dark); }

/* .badge-soft: the same look for a custom colour, set inline as style="--ui-badge:#hex" */
:is(.contentpanel, .pageheader) .badge:is(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-dark),
.badge.badge-soft {
    background-color: color-mix(in srgb, var(--ui-badge) 12%, #fff) !important;
    color: color-mix(in srgb, var(--ui-badge) 80%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-badge) 25%, transparent);
    font-weight: 500;
}

/* Header: flat and exactly 60px (.mainwrapper and the sticky sidenav assume that height).
   The colour stays: it tells test (purple, style.test.css) from live apart. */
.headerwrapper {
    height: 60px;
    min-height: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 1px 3px rgba(16, 24, 40, 0.12);
}

.headerwrapper .header-left,
.headerwrapper .header-right {
    min-height: 0;
    height: 60px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.headerwrapper .header-left {
    border-right: 0;
    background: none;
}

.headerwrapper .header-left .logo {
    margin-top: 6px;
}

.headerwrapper .header-left .menu-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 13px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: rgba(255, 255, 255, 0.85);
}

.headerwrapper .header-left .menu-collapse:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Search: a translucent field with the icon inside, white once focused (it autofocuses on most pages) */
.headerwrapper .search-v2-form .input-group {
    position: relative;
    flex-wrap: nowrap;
}

.headerwrapper .search-v2-input {
    height: 38px;
    padding-left: 38px;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    opacity: 1 !important;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.headerwrapper .search-v2-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.headerwrapper .search-v2-input:hover:not(:focus) {
    background: rgba(255, 255, 255, 0.22);
}

/* The bar is autofocused on every page, so it only turns white once there is text in it */
.headerwrapper .search-v2-input:focus {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.headerwrapper .search-v2-input:focus:not(:placeholder-shown) {
    background: #fff;
    color: var(--bs-body-color);
}

.headerwrapper .search-v2-form .btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.headerwrapper .search-v2-form .input-group:has(.search-v2-input:focus:not(:placeholder-shown)) .btn {
    color: #9ca3af;
}

.headerwrapper .search-v2-key {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 5;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* !important: .input-group squares the left corners of its last child */
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}

.headerwrapper .search-v2-form .input-group:focus-within .search-v2-key,
.headerwrapper .search-v2-input:not(:placeholder-shown) ~ .search-v2-key {
    display: none;
}

.headerwrapper .header-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.headerwrapper .header-user-toggle:hover,
.headerwrapper .header-user-toggle.show {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.headerwrapper .header-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Unread "What's new" announcements: a dot on the avatar and a count in the user menu. */
.headerwrapper .header-user-avatar.has-news {
    position: relative;
}

.headerwrapper .header-user-avatar.has-news::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.features-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* The collapse list of resources/views/features/partials/list.php */
.feature-item {
    border: 1px solid #e5e7eb;
    border-radius: var(--bs-border-radius);
    background: #fff;
}

.feature-item + .feature-item {
    margin-top: 8px;
}

.feature-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: inherit;
    background: none;
    color: #111827;
    text-align: left;
}

.feature-toggle:hover {
    background: #f9fafb;
}

.feature-area {
    flex-shrink: 0;
    min-width: 84px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* Open: a blue circle. Read: green with a check. */
.feature-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: #fff;
    font-size: 10px;
}

.feature-status .fa {
    display: none;
}

.feature-item.is-seen .feature-status {
    border-color: var(--bs-success);
    background: var(--bs-success);
}

.feature-item.is-seen .feature-status .fa {
    display: inline;
}

.feature-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}

.feature-date {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 12px;
}

.feature-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.15s;
}

.feature-toggle:not(.collapsed) .feature-chevron {
    transform: rotate(180deg);
}

.feature-body {
    padding: 2px 14px 14px;
    color: #374151;
}

.feature-body p {
    margin-bottom: 8px;
}

.feature-body h6 {
    margin: 14px 0 4px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.feature-body ul {
    margin-bottom: 8px;
    padding-left: 18px;
}

.feature-body li + li {
    margin-top: 2px;
}

/* The one thing to remember from an announcement. */
.feature-tip {
    margin: 12px 0 4px;
    padding: 8px 12px;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    background: #fffbeb;
    color: #713f12;
}

.feature-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.feature-item.is-seen .feature-title {
    color: #6b7280;
    font-weight: 500;
}

.headerwrapper .header-user .dropdown-menu {
    min-width: 220px;
    margin-top: 6px !important;
}

.header-user-info {
    padding: 8px 16px 6px;
    text-align: left;
}

.header-user-info-name {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

.header-user-info-title {
    color: #6b7280;
    font-size: 12px;
}

.dropdown-menu {
    --bs-dropdown-border-color: #e5e7eb;
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    padding: 6px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
}

.dropdown-menu .dropdown-item {
    border-radius: 6px;
}

/* Page header: title and breadcrumbs only; the dark icon block per page is hidden */
.pageheader {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 70px;
    padding: 12px 20px;
    border-bottom: 1px solid #eceef1;
    box-shadow: none;
}

.pageheader > .media {
    flex: 1;
}

.pageheader .pageicon {
    display: none;
}

.pageheader .breadcrumb {
    margin-bottom: 2px;
    font-size: 12px;
    color: #9ca3af;
}

.pageheader .breadcrumb li a {
    color: #6b7280;
}

.pageheader .breadcrumb-item,
.pageheader .breadcrumb-item a {
    display: inline-flex;
    align-items: center;
}

/* Font Awesome angle-right instead of Bootstrap's slash */
.pageheader .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    float: none;
    font-family: FontAwesome;
    line-height: 1;
    color: #d1d5db;
}

.pageheader .breadcrumb li a:hover {
    color: var(--bs-primary);
}

.pageheader h4 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Buttons at the right of a page header: a sibling of .media */
.pageheader-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    margin-left: 20px;
}

/* Tab bar of resources/views/partials/tabs.php, attached to the page header above it */
.pageheader:has(+ .page-tabs) {
    border-bottom: 0;
}

.page-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    overflow-x: auto;
    border-bottom: 1px solid #eceef1;
    background: #fff;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.page-tab:hover {
    border-bottom-color: #d1d5db;
    color: #111827;
}

.page-tab.is-active {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-primary);
}

.page-tab.is-disabled,
.page-tab.is-disabled:hover {
    border-bottom-color: transparent;
    color: #c4cad3;
    cursor: not-allowed;
}

.page-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    text-align: center;
}

.page-tab.is-active .page-tab-count {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.page-tabs-aside {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 16px;
}

@media (min-width: 1100px) {
    .pageheader .media-body > .row:has(> .col-4 #website_language_select) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 4px 20px;
        margin: 0;
    }

    .pageheader .media-body > .row:has(> .col-4 #website_language_select) > .col-8,
    .pageheader .media-body > .row:has(> .col-4 #website_language_select) > .col-4 {
        display: contents;
    }

    .pageheader .media-body > .row:has(> .col-4 #website_language_select) > .col-8 > h4 {
        order: 1;
        grid-column: 1;
        flex: none;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pageheader .media-body > .row:has(> .col-4 #website_language_select) #website_language_select {
        order: 2;
        grid-column: 2;
        width: auto;
        justify-self: center;
    }

    .pageheader .media-body > .row:has(> .col-4 #website_language_select) .breadcrumb {
        order: 3;
        grid-column: 3;
        justify-self: end;
        min-width: 0;
        margin-bottom: 0;
        justify-content: flex-end;
        overflow-wrap: anywhere;
    }

    .pageheader div:has(> .breadcrumb + h4) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 20px;
    }

    .pageheader div:has(> .breadcrumb + h4) > h4 {
        order: -1;
        flex: 1 1 16rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pageheader div:has(> .breadcrumb + h4) > .breadcrumb {
        order: 1;
        min-width: 0;
        margin-bottom: 0;
        justify-content: flex-end;
        overflow-wrap: anywhere;
    }

    .pageheader div:has(> .breadcrumb + h4) > small {
        order: 2;
        flex: 0 0 100%;
    }

    /* Header with page buttons: title left, buttons in the middle, breadcrumbs right, like the language selector above */
    .pageheader:has(> .pageheader-actions) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 4px 20px;
    }

    .pageheader:has(> .pageheader-actions) > .media,
    .pageheader:has(> .pageheader-actions) > .media > .media-body {
        display: contents;
    }

    .pageheader:has(> .pageheader-actions) h4 {
        grid-row: 1;
        grid-column: 1;
    }

    .pageheader:has(> .pageheader-actions) > .pageheader-actions {
        grid-row: 1;
        grid-column: 2;
        margin-left: 0;
    }

    .pageheader:has(> .pageheader-actions) .breadcrumb {
        grid-row: 1;
        grid-column: 3;
        justify-self: end;
        margin-bottom: 0;
    }
}

.search-v2-results {
    margin-top: 4px;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12) !important;
}