/*!
 *   AdminLTE v3.0.0-alpha
 *   Author: Abdullah Almsaeed
 *	 Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
 */
/*!
 * Bootstrap v4.1.0 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

.login-page {
    background: url("../images/login_wall_5.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 100%;
    background-position: center center;
    background-size: cover; 
}

/* MFA selectors are spans generated by radiosforbuttons, not native buttons. */
.login-box[aria-busy="true"] .radiosforbuttons-2fa_selector_select {
    pointer-events: none;
    opacity: 0.65;
}

.otv-page {
    background: url("../images/otv-wall-1.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 100%;
    background-position: center center;
    background-size: cover; 
    display: flex;
    justify-content: center;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Secure Send keeps the AdminLTE controls and adapts to long labels and small screens. */
#modal-item-otv .secure-send-panel {
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #f8f9fa;
}
#modal-item-otv .secure-send-result-heading {
    gap: .75rem;
}
#modal-item-otv .secure-send-result-heading .btn,
#modal-item-otv .secure-send-revoke,
#modal-item-otv .icheckbox_flat-blue {
    flex-shrink: 0;
}
#modal-item-otv #secure-send-address-preview,
#modal-item-otv .secure-send-entry-content {
    min-width: 0;
    overflow-wrap: anywhere;
}
#modal-item-otv .secure-send-entry {
    padding: .75rem 0;
    border-top: 1px solid #dee2e6;
}
#modal-item-otv summary {
    cursor: pointer;
}
.dark-mode #modal-item-otv .secure-send-panel {
    background-color: #343a40;
}
.dark-mode #modal-item-otv .secure-send-panel,
.dark-mode #modal-item-otv .secure-send-entry {
    border-color: #6c757d;
}

.pointer {
    cursor: pointer;
}

.pointer_none {
    cursor: none;
}

.dragndrop {
    cursor: move;
}


.invisible {
    visibility: hidden !important;
}

.table {
	table-layout:fixed;
}

.table-truncated td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ldap-users-search-wrapper {
    width: 260px;
    max-width: 100%;
}

.list-item-description {
    position: relative;
    height: 50px;
    width: 100%;
    line-height: 50px;
}

.icon-container {
    display: inline-flex;
    align-items: center;
    height: 100%;
  }

.list-item-clicktoshow .user-fa-icon,
.list-item-description .dragndrop {
    line-height: 50px;
}

.list-item-clicktoshow.d-inline-flex {
    max-width: 100%;
    flex: 1;
}

/*
 * The favorite-star placeholder stays as an empty Font Awesome <i> until the
 * item is flagged as favorite (the "fa-star" class is toggled at runtime).
 * Font Awesome still reserves ~1.25em for that empty element, which pushed the
 * item label far away from the drag/health icons. Collapse it while empty and
 * keep a small, consistent ml-2 gap before the label.
 */
.item-favorite-star:not(.fa-star) {
    display: none;
}

.list-item-row-description {
    margin-left: 0.1rem;
}

.list-item-row-description-extend {
    flex: 1;
}

/* Keep security and renewal markers readable on highlighted favorite rows. */
.list-item-row.bg-yellow .tp-item-health-marker.text-warning,
.list-item-row.bg-yellow .tp-item-health-marker.text-secondary,
.list-item-row.bg-yellow .tp-item-renewal-marker.text-warning {
    color: #343a40 !important;
}

/* Selected rows use a black cell background, so restore light semantic colours there. */
.list-item-row.bg-yellow .list-item-description.bg-black .tp-item-health-marker.text-warning,
.list-item-row.bg-yellow .list-item-description.bg-black .tp-item-renewal-marker.text-warning {
    color: #ffc107 !important;
}

.list-item-row.bg-yellow .list-item-description.bg-black .tp-item-health-marker.text-secondary {
    color: #adb5bd !important;
}

.list-item-actions {
    position: absolute;
    top: 8px;
    right: 0px;
    color:#c4c4c4;
}

.simplePassMeter {
    border: 1px solid #aaa;
    background-color: #f3f3f3;
    color: #666;
    font-size: 1.5em;
    padding: 10px 5px 0 5px;
    margin: 10px;
    width: 25%;
}

.meterFail { border: 1px solid #daa; background-color: #fdd; }
.meterWarn { border: 1px solid #fd6; background-color: #feb; }
.meterGood { border: 1px solid #ada; background-color: #dfd; }
.meterExcel { border: 1px solid #aad; background-color: #ddf; }

.simplePassMeterBar { background-color: #ddd; }
.meterFail .simplePassMeterProgress  { background-color: #f66; }
.meterWarn .simplePassMeterProgress  { background-color: #fd6; }
.meterGood .simplePassMeterProgress  { background-color: #ada; }
.meterExcel .simplePassMeterProgress { background-color: #88f; }

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

.ui-menu-item {
    display: block;
    margin-left: 3px;
    padding: 3px 15px 0px 5px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
    cursor: pointer;
}
  
.ui-state-focus, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}

.icon-badge{
    position:relative;
    float:left;
}

.icon-badge-text{
    margin: 0;
    position:absolute;
    top: -10px;
    left: 9px;
    font-size: .7rem;
    font-weight: 300;
    padding: 2px 4px;
}

.icon-badge-far {
    right: -16px;
}

.icon-badge-text-bottom-right{
    margin: 0;
    position:absolute;
    top: -10px;
    left: 9px;
    font-size: .7rem;
    font-weight: 300;
    padding: 2px 4px;
}

.sticky-footer {
    position: fixed;
    bottom: 40px;
    background-color: rgb(255, 198, 198);
    border: 1px solid rgb(243, 105, 105);
    padding: 10px;
}

.row-selected {
    background-color: #026fcc;
}

.btn-group {  
    white-space: nowrap;              
}
.btn-group .btn {  
    float: none;
    display: inline-block;
}
 .btn + .dropdown-toggle { 
    margin-left: -4px;
}

.dataTables_wrapper { 
    overflow-x: visible; 
    overflow-y: visible; 
}

.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
  border-color:red !important;
}


.card-header > .card-tools-left {
    position: absolute;
    left: 1rem;
    top: .5rem;
}

.datatable.path {
    font-size: 11pt;
}

.tp-borders {
    border: 1px dashed #aaa !important;
}

.td-100 {
    width:100px;
}

/* Folder tree shared by the Roles and Folders administration pages.
   The toggles set their own box: an icon-only button collapses to the glyph height on these pages. */
.tp-tree-toggle,
.tp-tree-spacer {
    display: inline-flex;
    width: 1.5rem;
    height: 1.25rem;
    vertical-align: middle;
}

.tp-tree-toggle {
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #6c757d;
    font-size: .75rem;
    line-height: 1;
}

.tp-tree-toggle:hover,
.tp-tree-toggle:focus {
    color: #343a40;
}

.dark-mode .tp-tree-toggle {
    color: #adb5bd;
}

.dark-mode .tp-tree-toggle:hover,
.dark-mode .tp-tree-toggle:focus {
    color: #fff;
}

/* Tree-wide toggle of the header: same box as the row toggles, outlined */
.tp-tree-toggle-all {
    height: 1.5rem;
    margin-right: .25rem;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    background: #fff;
}

.dark-mode .tp-tree-toggle-all {
    border-color: #6c757d;
    background: transparent;
}

/* Trailing columns keep a fixed width so the tree columns share the remaining space */
.tp-tree-rights {
    width: 132px;
    white-space: nowrap;
}

.footer {
    position: fixed;
    bottom: 10px;
    color:white;
}

.menu-footer {
    position: fixed;
    padding-bottom: 10px;
    bottom: 0px;
}

.tp-brand-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 57px;
    overflow: hidden;
}

.tp-brand-home-link {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: inherit;
    text-decoration: none !important;
}

.tp-brand-home-link:hover,
.tp-brand-home-link:focus {
    color: inherit;
    text-decoration: none !important;
}

.tp-brand-home-link .brand-image {
    float: none;
    position: static;
    margin: 0 0.5rem 0 0.2rem;
    flex: 0 0 auto;
}

.tp-brand-home-link .brand-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-sidebar-version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 22px;
    max-width: 92px;
    padding: 2px 7px;
    margin-right: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #212529 !important;
    background: #ffc107;
    box-shadow: inset 0 0 0 1px rgba(33, 37, 41, 0.08);
    text-decoration: none !important;
}

.tp-sidebar-version-badge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-sidebar-version-badge:hover,
.tp-sidebar-version-badge:focus {
    color: #212529 !important;
    background: #e0a800;
    text-decoration: none !important;
}

.sidebar-collapse .tp-sidebar-version-badge,
.sidebar-closed .tp-sidebar-version-badge {
    display: none !important;
}

.tp-admin-version-alert {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    vertical-align: middle;
    max-width: 100%;
    margin: 0 0 0 0.7rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.2rem;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.86rem;
    line-height: 1.25;
}

.tp-admin-version-alert i {
    margin-right: 0 !important;
    opacity: 0.85;
    font-size: 0.8rem;
}

.tp-admin-version-alert-link {
    margin-left: 0.2rem !important;
    color: #fff !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.tp-admin-version-alert-link:hover,
.tp-admin-version-alert-link:focus {
    color: #fff !important;
    text-decoration: underline;
}

/* Admin dashboard: "Support TeamPass" card */
.tp-community-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef4fb;
    color: #0062cc;
}

#tp-community-platforms .list-group-item {
    row-gap: 0.5rem;
}

#tp-community-platforms .tp-community-is-done {
    background: #f6fbf7;
}

.tp-community-fund {
    background: #f8f9fa;
}

.dark-mode .tp-community-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #8ab4f8;
}

.dark-mode #tp-community-platforms .tp-community-is-done {
    background: rgba(40, 167, 69, 0.12);
}

.dark-mode .tp-community-fund {
    background: rgba(255, 255, 255, 0.05);
}

#sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    overflow: visible;
}

.tp-sidebar-footer-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none !important;
    line-height: 1;
    vertical-align: middle;
}

.tp-sidebar-footer-action:hover,
.tp-sidebar-footer-action:focus {
    color: #7fd8ff !important;
    text-decoration: none !important;
}

.tp-sidebar-footer-action:focus {
    outline: none;
}

.tp-online-users-drawer {
    position: fixed;
    left: 1rem;
    bottom: 4rem;
    width: min(340px, calc(100vw - 1rem));
    z-index: 1065;
    overflow: visible;
}

.tp-online-users-drawer .card {
    border-radius: 0.85rem;
    overflow: hidden;
}

.tp-online-users-drawer-content {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.tp-online-users-item {
    padding: 0.5rem 0.75rem;
    border-left: 0;
    border-right: 0;
    transition: background-color 0.15s ease;
}

.tp-online-users-item:hover {
    background-color: rgba(23, 162, 184, 0.06);
}

.tp-online-users-item .font-weight-bold {
    font-size: 0.95rem;
    line-height: 1.15;
}

.tp-online-users-item .small {
    line-height: 1.1;
    color: #6c757d;
}

.tp-online-users-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 0.6rem;
    border-radius: 999px;
    background: rgba(23, 162, 184, 0.12);
    color: #17a2b8;
    flex: 0 0 28px;
    font-size: 0.9rem;
    overflow: hidden;
}

.tp-online-users-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #28a745;
}

.tp-online-users-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.dark-mode .tp-online-users-avatar {
    background: rgba(255, 255, 255, 0.08);
    color: #8bd3dd;
}

.dark-mode .tp-online-users-avatar::after {
    border-color: #343a40;
    background: #51cf66;
}

.dark-mode .tp-online-users-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .tp-online-users-item .small {
    color: #adb5bd;
}

.tp-online-users-meta {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .tp-sidebar-version-badge {
        display: none !important;
    }

    .tp-online-users-drawer {
        width: min(340px, calc(100vw - 1rem));
    }
}

.login-logo {
    letter-spacing: 4px;
    font-size: 40pt;
    color: #082d51;
}

.img-modal {
    width:100%;
}

.toast-center-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.no-link, .no-link:hover {
    text-decoration: inherit;
    color: inherit;
}

.tooltip {
    top:0px;
    background-color:black;
    color:white;
    border-radius:5px;
    opacity:0;
    position:absolute;
    pointer-events:none;
    -webkit-transition: opacity 0.5s;
    -moz-transition:  opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition:  opacity 0.5s;
    transition:  opacity 0.5s;
}

.input-group > .select2-container--bootstrap4 .select2-selection--single {
	height: 100%;
	line-height: inherit;
	padding-top: 10px;
}

/* select2.min.css loads after AdminLTE and resets the selected values of a
 * multiple select to a light gray background, while AdminLTE's white text
 * remains (1.3:1 contrast). Dark "info" keeps white text readable (5:1). */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #117a8b;
    border-color: #10707f;
    color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}

/* Some issues with background-image on buttons in 
 * dark mode and it's not particularly pretty. */
.btn {
    background-image: none !important;
}

/* Light blue on blue is not very readable */
.dark-mode .jstree-anchor:hover {
    color: #fff !important;
}

/* Not adminlte items */
.dark-mode .select2-selection {
    background-color: #343a40 !important;
    border: 1px solid #6c757d !important;
}
.dark-mode .select2-selection span {
    color: #fff !important;
}

/* Scrollbar */
.dark-mode {
    scrollbar-color: #3b3b3b #555;
}

/**
 * blink_me
 *
 * CSS rule to make an element blink by changing its opacity repeatedly.
 */
.blink_me {
    /* Define the animation: 1 second, linear timing, infinite loop */
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    /* At 50% of the animation cycle, reduce the opacity to 30% */
    50% {
        opacity: 0.5;
    }
}

.edition-lock-badge {
    margin-top: 15px;
    margin-bottom: 15px;
}

#table-failed th:last-child,
#table-failed td:last-child {
    white-space: nowrap;
    width: 1%;
    min-width: 96px;
    text-align: center;
}

#table-failed .failed-auth-add-blacklist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
}

#table_teampass_items_list.tp-show-corrupted-items .tp-item-corrupted-marker {
    display: inline-block;
}

#table_teampass_items_list .tp-item-corrupted-marker {
    display: none;
}

#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-warning .list-item-row-description,
#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-warning .list-item-row-description-extend {
    color: #b26a00;
}

#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-warning .list-item-description {
    background-color: rgba(255, 193, 7, 0.08);
}

#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-danger .list-item-row-description,
#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-danger .list-item-row-description-extend {
    color: #b91c1c;
}

#table_teampass_items_list.tp-show-corrupted-items tr.tp-item-corrupted-danger .list-item-description {
    background-color: rgba(220, 53, 69, 0.08);
}

/* ============================================================
   Items folder loading progress bar (NProgress-style)
   ============================================================ */
#tp-folder-progress-wrap {
    position: relative;
    height: 0;
    overflow: hidden;
}
#tp-folder-progress-wrap.tp-progress-active {
    height: 3px;
}
#tp-folder-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: #007bff;
    transition: width 0.25s ease-out, opacity 0.4s ease;
    will-change: width;
}
#tp-folder-progress-bar.tp-progress-done {
    opacity: 0;
}

/* Section headers distinguishing sub-folders from items */
#table_teampass_subfolders_list thead th,
#table_teampass_items_list thead th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    background-color: #f8f9fa;
}
#table_teampass_subfolders_list thead th {
    color: #856404;
    border-bottom: 2px solid #ffc107 !important;
}
#table_teampass_items_list thead th {
    color: #0056b3;
    border-bottom: 2px solid #007bff !important;
}

/* ****
* ITEMS skeleton
* *****/
.skeleton-line {
    display: inline-block;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: tp-shimmer 1.4s ease-in-out infinite;
    border-radius: 3px;
    height: 0.85em;
    vertical-align: middle;
}
@keyframes tp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-sm    { width: 70px; }
.skeleton-md    { width: 130px; }
.skeleton-lg    { width: 200px; }
.skeleton-xl    { width: 280px; }
.skeleton-title { width: 240px; height: 1.3em; }
.skeleton-input {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
    background-size: 200% 100% !important;
    animation: tp-shimmer 1.4s ease-in-out infinite !important;
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    pointer-events: none;
}
.skeleton-block {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: tp-shimmer 1.4s ease-in-out infinite;
    border-radius: 3px;
}

/* Persistent highlight on the currently selected item row */
#teampass_items_list tr.item-selected td {
    background-color: rgba(0, 123, 255, 0.07) !important;
    box-shadow: inset 3px 0 0 #007bff;
}

/* Fade-in animation when the detail panel first appears */
@keyframes tp-panel-fadein {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
#items-details-container.tp-panel-appearing {
    animation: tp-panel-fadein 180ms ease-out forwards;
}

/* ============================================================
   Accessibility (D4)
   ============================================================ */

/* Skip-to-content link: invisible until focused via keyboard */
.tp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 11000;
    background-color: #007bff;
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 4px 0;
    text-decoration: none;
}
.tp-skip-link:focus {
    left: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Visible keyboard focus everywhere (mouse clicks stay outline-free) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: 1px;
}
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode [role="button"]:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode .form-control:focus-visible {
    outline-color: #58a6ff;
}

/* ============================================================
   Small screens (D5) — most-used flows: login, search, item view
   ============================================================ */
@media (max-width: 767.98px) {
    /* Compact page headers */
    .content-header h1 {
        font-size: 1.35rem;
    }

    /* Item detail / forms: let action buttons wrap without overflowing */
    .card-footer .btn,
    #form-item-buttons .btn {
        margin-bottom: 0.35rem;
    }

    /* Modals fill the viewport comfortably */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Injected overlays stay within the viewport */
    #tp-palette-box {
        max-width: 94vw !important;
        margin-top: 6vh !important;
    }
    .navbar-nav .dropdown-menu-lg {
        max-width: 92vw;
    }
    #toast-container > div {
        max-width: 92vw;
    }

    /* Folder tree stacks above the items list: keep a breathing gap */
    #folders-tree-card {
        margin-bottom: 0.75rem;
    }
}

/* =========================================================================
   Top-bar cluster (right side) — grouped by intent: Find · Awareness · View · Account
   One consistent icon-button style, group separators, a single account chip.
   Works on both the light (navbar-white/navbar-light) and dark (navbar-dark) bars.
   ========================================================================= */
.tp-topbar {
    align-items: center;
}

/* Uniform icon buttons: search, theme, recent, notifications, score.
   Compounded with .nav-link to outrank AdminLTE's `.navbar-expand .navbar-nav .nav-link` padding. */
.tp-topbar .nav-link.tp-topbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background-color .15s ease;
}
.tp-topbar-btn > i {
    font-size: 1.05rem;
}
.navbar-light .tp-topbar-btn:hover,
.navbar-light .tp-topbar-btn:focus {
    background-color: rgba(0, 0, 0, .05);
}
.navbar-dark .tp-topbar-btn:hover,
.navbar-dark .tp-topbar-btn:focus {
    background-color: rgba(255, 255, 255, .10);
}
.tp-topbar-btn:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Keyboard-shortcut hint on the search button */
.tp-topbar-kbd {
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 2px 6px;
    border-radius: 5px;
    line-height: 1;
    opacity: .8;
}
.navbar-light .tp-topbar-kbd {
    border: 1px solid rgba(0, 0, 0, .18);
    color: inherit;
}
.navbar-dark .tp-topbar-kbd {
    border: 1px solid rgba(255, 255, 255, .22);
    color: inherit;
}

/* Thin vertical group separators (rendered as empty <li>) */
.tp-topbar-sep {
    align-self: center;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    flex: 0 0 auto;
}
.navbar-light .tp-topbar-sep {
    background-color: rgba(0, 0, 0, .12);
}
.navbar-dark .tp-topbar-sep {
    background-color: rgba(255, 255, 255, .16);
}

/* Account identity chip (compounded with .nav-link to outrank AdminLTE padding) */
.tp-topbar .nav-link.tp-account-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 10px 0 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background-color .15s ease;
}
.navbar-light .tp-account-chip {
    background-color: rgba(0, 0, 0, .03);
    border-color: rgba(0, 0, 0, .08);
}
.navbar-light .tp-account-chip:hover,
.navbar-light .tp-account-chip:focus {
    background-color: rgba(0, 0, 0, .06);
}
.navbar-dark .tp-account-chip {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .09);
}
.navbar-dark .tp-account-chip:hover,
.navbar-dark .tp-account-chip:focus {
    background-color: rgba(255, 255, 255, .11);
}
.tp-account-chip:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.tp-account-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow: hidden;
}
/* Overlays the initials kept in the markup as fallback. The badge background
   shows through a transparent avatar, so no background is needed here. */
.tp-account-avatar-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 40px matches the avatar thumbnail width produced on upload (makeThumbnail),
   so the large badge renders the image without upscaling it. */
.tp-account-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: .98rem;
}

.tp-account-identity {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    max-width: 160px;
}
.tp-account-name {
    font-weight: 600;
    font-size: .86rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-account-exp {
    font-size: .7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Full-strength name + muted expiry — override AdminLTE's 50%-opacity nav-link colour */
.navbar-light .tp-account-chip .tp-account-name {
    color: rgba(0, 0, 0, .82);
}
.navbar-dark .tp-account-chip .tp-account-name {
    color: rgba(255, 255, 255, .92);
}
.navbar-light .tp-account-chip .tp-account-exp {
    color: #6c757d;
}
.navbar-dark .tp-account-chip .tp-account-exp {
    color: rgba(255, 255, 255, .65);
}
.tp-account-caret {
    font-size: .7rem;
    opacity: .6;
}

/* Account dropdown */
.tp-account-menu {
    min-width: 260px;
    padding-top: 0;
}
.tp-account-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.dark-mode .tp-account-menu-head {
    border-bottom-color: rgba(255, 255, 255, .1);
}
.tp-account-menu-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tp-account-menu-name {
    font-weight: 600;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-account-menu-role {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
}
.dark-mode .tp-account-menu-role {
    color: rgba(255, 255, 255, .55);
}

/* Compact on small screens: keep the avatar, drop name + expiry */
@media (max-width: 767.98px) {
    .tp-account-identity {
        display: none;
    }
    .tp-topbar-sep {
        margin: 0 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-topbar-btn,
    .tp-account-chip {
        transition: none;
    }
}


/* ------------------------------------------------------------------
   Quick access panel (right control sidebar)
   Recent / Most used / Starred. The aside is a fixed-height flex column:
   head, tabs and footer stay put while only the list scrolls.
   Styled for both grounds - AdminLTE swaps control-sidebar-dark and
   control-sidebar-light when the theme is toggled.
   ------------------------------------------------------------------ */
.tp-qa {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.tp-qa.control-sidebar-light {
    border-left: 1px solid rgba(0, 0, 0, .1);
}

/* Head ---------------------------------------------------------- */
.tp-qa-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.control-sidebar-light .tp-qa-head {
    border-bottom-color: rgba(0, 0, 0, .09);
}
.tp-qa-title {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.tp-qa-refresh {
    background: none;
    border: 0;
    padding: 3px 5px;
    border-radius: 3px;
    line-height: 1;
    font-size: .78rem;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.tp-qa-refresh:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .09);
}
.control-sidebar-light .tp-qa-refresh:hover {
    background: rgba(0, 0, 0, .06);
}
.tp-qa-refresh.is-loading {
    opacity: 1;
}

/* Tabs ---------------------------------------------------------- */
.tp-qa-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 8px 8px 0;
}
.tp-qa-tab {
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 5px 2px 6px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity .12s ease, border-color .12s ease;
}
.tp-qa-tab:hover {
    opacity: .9;
}
.tp-qa-tab.active {
    opacity: 1;
    border-bottom-color: #3f8cff;
}
.control-sidebar-light .tp-qa-tab.active {
    border-bottom-color: #007bff;
}
.tp-qa-tab:focus-visible {
    outline: 2px solid #3f8cff;
    outline-offset: -2px;
}

/* Filter -------------------------------------------------------- */
.tp-qa-filter {
    flex: 0 0 auto;
    padding: 9px 10px 3px;
}
.tp-qa-filter.hidden-filter {
    display: none;
}
.tp-qa-filter input {
    width: 100%;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 3px;
    color: inherit;
    font-size: .78rem;
    padding: 4px 8px;
}
.control-sidebar-light .tp-qa-filter input {
    background: #fff;
    border-color: rgba(0, 0, 0, .15);
}
.tp-qa-filter input::placeholder {
    opacity: .55;
}
.tp-qa-filter input:focus {
    outline: none;
    border-color: #3f8cff;
}

/* List ---------------------------------------------------------- */
.tp-qa-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 4px 5px 8px;
}
.tp-qa-row {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.tp-qa-row:hover,
.tp-qa-row:focus-within {
    background: rgba(255, 255, 255, .07);
}
.control-sidebar-light .tp-qa-row:hover,
.control-sidebar-light .tp-qa-row:focus-within {
    background: rgba(0, 0, 0, .045);
}
.tp-qa-row:focus-visible {
    outline: 2px solid #3f8cff;
    outline-offset: -2px;
}
.tp-qa-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    background: rgba(63, 140, 255, .16);
    color: #74a9ff;
}
.control-sidebar-light .tp-qa-icon {
    background: rgba(0, 123, 255, .1);
    color: #007bff;
}
.tp-qa-icon.perso {
    background: rgba(240, 173, 78, .18);
    color: #f0ad4e;
}
.tp-qa-main {
    min-width: 0;
}
.tp-qa-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tp-qa-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-qa-metric {
    flex: 0 0 auto;
    font-size: .66rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tp-qa-metric .fa-star {
    color: #f0ad4e;
    opacity: .9;
}
.tp-qa-meta {
    font-size: .68rem;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row actions: shown on hover, over a fade so a long label never
   collides with the buttons. */
.tp-qa-actions {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    padding-left: 22px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(52, 58, 64, 0) 0%, #3a4149 24%);
    transition: opacity .1s ease;
}
.control-sidebar-light .tp-qa-actions {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f4f5f7 24%);
}
.tp-qa-row:hover .tp-qa-actions,
.tp-qa-row:focus-within .tp-qa-actions {
    opacity: 1;
    pointer-events: auto;
}
.tp-qa-actions button {
    width: 21px;
    height: 21px;
    border: 0;
    border-radius: 3px;
    padding: 0;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(255, 255, 255, .12);
    color: inherit;
}
.control-sidebar-light .tp-qa-actions button {
    background: rgba(0, 0, 0, .07);
}
.tp-qa-actions button:hover {
    background: #007bff;
    color: #fff;
}
.tp-qa-actions button:focus-visible {
    outline: 2px solid #3f8cff;
    outline-offset: 1px;
}

/* Empty state --------------------------------------------------- */
.tp-qa-empty {
    padding: 26px 14px;
    text-align: center;
    font-size: .76rem;
    opacity: .6;
    cursor: default;
}
.tp-qa-empty i {
    display: block;
    font-size: 1.4rem;
    opacity: .45;
    margin-bottom: 7px;
}

/* Footer -------------------------------------------------------- */
.tp-qa-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-size: .68rem;
    opacity: .75;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.control-sidebar-light .tp-qa-foot {
    border-top-color: rgba(0, 0, 0, .09);
}
.tp-qa-foot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-qa-foot a {
    flex: 0 0 auto;
    color: #74a9ff;
}
.control-sidebar-light .tp-qa-foot a {
    color: #007bff;
}

@media (prefers-reduced-motion: reduce) {
    .tp-qa-tab,
    .tp-qa-actions {
        transition: none;
    }
}

/* ============================================================
   Page transition indicator (navigation between TeamPass pages)
   Driven by app/core/page-transition.js.php
   ============================================================ */
#tp-page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    /* Above the fixed navbar, the modals backdrop staying below it */
    z-index: 2100;
    pointer-events: none;
}
#tp-page-progress.tp-page-progress-active {
    height: 3px;
}
#tp-page-progress-bar {
    height: 3px;
    width: 0;
    background-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.55);
    transition: width 0.25s ease-out, opacity 0.35s ease;
    will-change: width;
}
#tp-page-progress-bar.tp-page-progress-done {
    opacity: 0;
}
.dark-mode #tp-page-progress-bar {
    background-color: #4dabf7;
    box-shadow: 0 0 8px rgba(77, 171, 247, 0.55);
}

/* The whole page acknowledges the click, not only the bar */
body.tp-navigating,
body.tp-navigating a,
body.tp-navigating button,
body.tp-navigating .nav-link,
body.tp-navigating .dropdown-item {
    cursor: progress;
}
.tp-nav-busy {
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    #tp-page-progress-bar {
        transition: none;
    }
}

/* ============================================================
   Item edit form (app/pages/items.php, .form-item)
   Action bar kept below the fixed navbar while the form scrolls,
   the label edited in place as the form title.
   ============================================================ */
.tp-item-form-bar {
    position: sticky;
    top: calc(3.5rem + 1px);
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    background-color: #fff;
}
.tp-item-form-bar::after {
    content: none;
}
.dark-mode .tp-item-form-bar {
    background-color: #343a40;
}
.tp-item-form-title {
    position: relative;
    flex: 1 1 16rem;
    min-width: 0;
}
.tp-item-form-title-icon {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}
.tp-item-form-title .form-control {
    padding-left: 2.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 1px dashed #adb5bd;
    box-shadow: none;
}
.tp-item-form-title .form-control:hover {
    border-color: #ced4da;
}
.tp-item-form-title .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
/* Outweighs AdminLTE's .dark-mode .form-control:not(...):not(...) border and background */
.dark-mode .tp-item-form-title .form-control.form-item-control:not(:hover):not(:focus) {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: #6c757d;
}
.tp-item-form-buttons {
    display: flex;
    gap: .5rem;
}
.tp-item-form-unsaved {
    display: inline-flex;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    color: #8a4b00;
}
.tp-item-form-unsaved-dot {
    width: .5rem;
    height: .5rem;
    margin-right: .375rem;
    border-radius: 50%;
    background-color: #c2410c;
}
.dark-mode .tp-item-form-unsaved {
    color: #ffc107;
}
.tp-item-form-subheader {
    gap: .5rem 1rem;
}
.tp-item-form-rules {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-left: auto;
}
.tp-item-form-coach {
    min-height: 1.3rem;
}
.tp-item-form-panel {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #f8f9fa;
}
.dark-mode .tp-item-form-panel {
    border-color: #6c757d;
    background-color: #3f474e;
}
.tp-item-form-renewal-period {
    width: 8.5rem;
}
.tp-item-form-label {
    margin-bottom: .5rem;
    font-weight: 700;
}
/* Item icon: a square button in the title, its field in a dropdown.
   No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-item-form-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: transparent;
    color: #495057;
    font-size: 1.25rem;
}
.tp-item-form-icon-button:hover,
.tp-item-form-icon-button:focus {
    border-color: #80bdff;
    color: #0062cc;
}
.dark-mode .tp-item-form-icon-button {
    border-color: #6c757d;
    color: #e9ecef;
}
#form-item-icon-show i {
    margin-right: 0 !important;
}
#form-item-icon-show:not(:empty) + .tp-item-form-icon-default {
    display: none;
}
.tp-item-form-icon-default {
    color: #6c757d;
}
.tp-item-form-icon-menu {
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: .75rem;
}
/* Icon picker: a scrolling grid of Font Awesome Free icons under its search field */
.tp-icon-picker {
    position: relative;
    height: 16rem;
    margin: .5rem 0;
    overflow-y: auto;
}
.tp-icon-picker-title {
    margin: .5rem 0 .25rem;
    color: #6c757d;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tp-icon-picker-title:first-child {
    margin-top: 0;
}
.tp-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
    gap: .25rem;
}
/* No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-icon-picker-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: transparent;
    color: #495057;
    font-size: 1.125rem;
}
.tp-icon-picker-tile:hover,
.tp-icon-picker-tile:focus {
    border-color: #80bdff;
    color: #0062cc;
    outline: 0;
}
.tp-icon-picker-tile.is-selected {
    border-color: #007bff;
    background-color: #e7f1ff;
    color: #0062cc;
}
.tp-icon-picker-empty {
    padding: 1rem .5rem;
    color: #6c757d;
    text-align: center;
}
.tp-icon-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.tp-icon-picker-value {
    overflow: hidden;
    color: #6c757d;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* No .btn class: the legacy bootstrap-buttons.css repaints it white in dark mode */
.tp-icon-picker-reset {
    flex: 0 0 auto;
    padding: .25rem .5rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: transparent;
    color: #495057;
    font-size: .875rem;
}
.tp-icon-picker-reset:hover:not(:disabled),
.tp-icon-picker-reset:focus {
    border-color: #80bdff;
    color: #0062cc;
}
.tp-icon-picker-reset:disabled {
    opacity: .5;
}
.dark-mode .tp-icon-picker-reset {
    border-color: #6c757d;
    color: #e9ecef;
}
/* Icon fields of the folder forms: a button showing the icon before the text field, the picker
   unfolding below it (a dropdown would be cut by the scrolling folder sidebar) */
.tp-icon-picker-toggle {
    justify-content: center;
    min-width: 2.75rem;
    color: #495057;
    font-size: 1.125rem;
    cursor: pointer;
}
.tp-icon-picker-toggle:hover,
.tp-icon-picker-toggle:focus {
    color: #0062cc;
}
.tp-icon-picker-preview:not(:empty) + .tp-icon-picker-placeholder {
    display: none;
}
.tp-icon-picker-placeholder {
    color: #6c757d;
}
.tp-icon-picker-inline {
    margin-top: .5rem;
    padding: .75rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #fff;
}
.dark-mode .tp-icon-picker-toggle {
    color: #e9ecef;
}
.dark-mode .tp-icon-picker-inline {
    border-color: #6c757d;
    background-color: #343a40;
}
.dark-mode .tp-icon-picker-title,
.dark-mode .tp-icon-picker-empty,
.dark-mode .tp-icon-picker-value {
    color: #adb5bd;
}
.dark-mode .tp-icon-picker-tile {
    color: #e9ecef;
}
.dark-mode .tp-icon-picker-tile:hover,
.dark-mode .tp-icon-picker-tile:focus,
.dark-mode .tp-icon-picker-tile.is-selected {
    border-color: #3f9cff;
    background-color: rgba(0, 123, 255, .2);
    color: #8fc1ff;
}
/* Item renewal: one status line under the setting, the explanations behind its info icon */
.tp-renewal-help {
    cursor: help;
}
/* Item tags: chips followed by the entry, inside a field that grows with them */
.tp-tags-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    height: auto;
    min-height: calc(2.25rem + 2px);
    padding: .25rem .5rem;
    cursor: text;
}
.tp-tags-field:focus-within {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.tp-tags-list {
    display: contents;
}
.tp-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .125rem .25rem .125rem .5rem;
    border-radius: 1rem;
    background-color: #d4edda;
    color: #155724;
    font-size: .875rem;
    line-height: 1.25rem;
}
.tp-tag-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: inherit;
    font-size: .75rem;
    cursor: pointer;
}
.tp-tag-remove:hover,
.tp-tag-remove:focus {
    background-color: rgba(21, 87, 36, .15);
    outline: 0;
}
.tp-tags-entry {
    flex: 1 1 8rem;
    min-width: 8rem;
    padding: .125rem 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    outline: 0;
}
.dark-mode .tp-tag {
    background-color: rgba(40, 167, 69, .25);
    color: #b8e6c4;
}
.dark-mode .tp-tag-remove:hover,
.dark-mode .tp-tag-remove:focus {
    background-color: rgba(255, 255, 255, .15);
}
/* Item form sections: the former tabs, one after the other on the same page */
.tp-item-form-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.tp-item-form-jump {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 1rem;
    color: #495057;
    font-size: .875rem;
}
.tp-item-form-jump:hover,
.tp-item-form-jump:focus {
    background-color: #e9ecef;
    color: #212529;
    text-decoration: none;
}
.dark-mode .tp-item-form-jump {
    color: #ced4da;
}
.dark-mode .tp-item-form-jump:hover,
.dark-mode .tp-item-form-jump:focus {
    background-color: #3f474e;
    color: #fff;
}
.tp-item-form-section {
    /* Clears the fixed navbar and the sticky action bar when a shortcut scrolls to it */
    scroll-margin-top: 8rem;
}
.tp-item-form-section + .tp-item-form-section {
    margin-top: 1.25rem;
}
/* Section head: a band whose whole width folds the section, tools on its right */
.tp-item-form-section-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .75rem;
    border-radius: .375rem;
    background-color: #e2e6ea;
}
.dark-mode .tp-item-form-section-head {
    background-color: #23272b;
}
.tp-item-form-section.is-collapsed .tp-item-form-section-head {
    margin-bottom: 0;
}
.tp-item-form-section.is-collapsed .tp-item-form-section-body {
    display: none;
}
.tp-item-form-section-heading {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.tp-item-form-section-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-radius: .375rem;
    background-color: transparent;
    color: #1f2d3d;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.tp-item-form-section-toggle:focus {
    outline: none;
}
.tp-item-form-section-toggle:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .35);
}
.dark-mode .tp-item-form-section-toggle {
    color: #fff;
}
.tp-item-form-section-chevron {
    margin-right: .375rem;
    color: #495057;
    font-size: .8rem;
    transition: transform .15s ease-in-out;
}
.tp-item-form-section.is-collapsed .tp-item-form-section-chevron {
    transform: rotate(-90deg);
}
.dark-mode .tp-item-form-section-chevron {
    color: #ced4da;
}
.tp-item-form-section-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .25rem;
    padding-right: .375rem;
}
.tp-item-form-section-switch {
    display: inline-flex;
    padding: .125rem;
    border-radius: .375rem;
    background-color: rgba(0, 0, 0, .07);
}
.dark-mode .tp-item-form-section-switch {
    background-color: rgba(255, 255, 255, .08);
}
/* The layout switch has no effect below the two-column breakpoint */
@media (max-width: 991.98px) {
    .tp-item-form-section-switch {
        display: none;
    }
}
/* No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-item-form-section-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background-color: transparent;
    color: #495057;
}
.tp-item-form-section-tool:hover,
.tp-item-form-section-tool:focus {
    background-color: rgba(0, 0, 0, .08);
    color: #212529;
    outline: none;
}
.tp-item-form-section-tool[aria-pressed="true"] {
    background-color: #fff;
    color: #0062cc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.dark-mode .tp-item-form-section-tool {
    color: #ced4da;
}
.dark-mode .tp-item-form-section-tool:hover,
.dark-mode .tp-item-form-section-tool:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}
.dark-mode .tp-item-form-section-tool[aria-pressed="true"] {
    background-color: #454d55;
    color: #8fc1ff;
}
/* Custom fields: one column, or two from the lg breakpoint when chosen */
.tp-item-form-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
}
@media (min-width: 992px) {
    .tp-item-form-section.is-two-columns .tp-item-form-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tp-item-form-section.is-two-columns .tp-item-form-field-cell.is-wide,
    .tp-item-form-section.is-two-columns .tp-item-form-field-cell:only-child {
        grid-column: 1 / -1;
    }
}
/* Attachments: files as cards, uploads with their own progress bar */
.tp-item-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}
.tp-item-files:empty {
    display: none;
}
.tp-item-files-uploads {
    margin-top: .75rem;
    margin-bottom: 0;
}
.tp-item-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background-color: #fff;
}
.dark-mode .tp-item-file {
    border-color: #6c757d;
    background-color: #3f474e;
}
.tp-item-file.is-failed,
.dark-mode .tp-item-file.is-failed {
    border-color: #dc3545;
}
/* Uploaded, attached to the item at the next save */
.tp-item-file.is-pending {
    border-style: dashed;
}
.tp-item-file-icon {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .375rem;
    background-color: #e7f1ff;
    color: #0062cc;
    font-size: 1.125rem;
}
.dark-mode .tp-item-file-icon {
    background-color: rgba(0, 123, 255, .2);
    color: #8fc1ff;
}
.tp-item-file-body {
    flex: 1 1 auto;
    min-width: 0;
}
.tp-item-file-name {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tp-item-file-meta {
    color: #6c757d;
    font-size: .8125rem;
}
.dark-mode .tp-item-file-meta {
    color: #adb5bd;
}
.tp-item-file-progress {
    height: .25rem;
    margin: .25rem 0;
}
.tp-item-file-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .125rem;
}
/* No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-item-file-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: transparent;
    color: #6c757d;
}
.tp-item-file-action:hover,
.tp-item-file-action:focus {
    border-color: #ced4da;
    color: #0062cc;
    text-decoration: none;
}
.tp-item-file-action-danger:hover,
.tp-item-file-action-danger:focus {
    border-color: #f1aeb5;
    color: #dc3545;
}
.dark-mode .tp-item-file-action {
    color: #ced4da;
}
.tp-item-file-status {
    flex: 0 0 auto;
    padding-right: .25rem;
}
.tp-item-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: 1.25rem 1rem;
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    color: #495057;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.tp-item-dropzone:hover,
.tp-item-dropzone:focus,
.tp-item-dropzone.is-dragover {
    border-color: #007bff;
    background-color: #f1f7ff;
    outline: none;
}
.tp-item-dropzone:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
/* Children would fire dragleave on the zone while the files hover over them */
.tp-item-dropzone.is-dragover * {
    pointer-events: none;
}
.tp-item-dropzone-icon {
    color: #007bff;
    font-size: 1.75rem;
}
.dark-mode .tp-item-dropzone {
    border-color: #6c757d;
    color: #e9ecef;
}
.dark-mode .tp-item-dropzone:hover,
.dark-mode .tp-item-dropzone:focus,
.dark-mode .tp-item-dropzone.is-dragover {
    border-color: #3f9cff;
    background-color: rgba(0, 123, 255, .12);
}
.dark-mode .tp-item-dropzone-icon {
    color: #3f9cff;
}

/* ============================================================
   Item view (app/pages/items.php, #items-details-container)
   Same language as the item form: an action bar kept at the top,
   bands that fold their section. The panel is its own scroll box
   (fixed height) and its width depends on the split view, so the
   layout follows the panel width (container queries), not the
   screen width.
   ============================================================ */
#items-details-container {
    container-type: inline-size;
}
/* One sheet; it disappears with its blocks (the server form path shows the bar alone) */
.tp-item-view {
    margin-bottom: 1rem;
    border-radius: .375rem;
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}
.tp-item-view:not(:has(> .item-details-card:not(.hidden))) {
    display: none;
}
.dark-mode .tp-item-view {
    background-color: #343a40;
}
.tp-item-view-block {
    padding-right: 1rem;
    padding-left: 1rem;
}
.tp-item-view-block-last {
    padding-bottom: 1rem;
}
/* Action bar */
.tp-item-view-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: .375rem .375rem 0 0;
    background-color: #fff;
}
.dark-mode .tp-item-view-bar {
    border-bottom-color: #4b545c;
    background-color: #343a40;
}
.tp-item-view-icon {
    display: inline-flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    background-color: #e7f1ff;
    color: #0062cc;
    font-size: 1.125rem;
}
.dark-mode .tp-item-view-icon {
    background-color: rgba(0, 123, 255, .2);
    color: #8fc1ff;
}
/* The label on its own line, the chips below it */
.tp-item-view-title {
    display: flex;
    flex: 1 1 14rem;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .375rem;
    min-width: 0;
}
.tp-item-view-title > h3 {
    flex: 1 0 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Badges inserted after the label by other scripts (edition lock, viewers, classification,
   warnings) carry Bootstrap spacing utilities, which are !important */
.tp-item-view-title > :not(h3) {
    margin: 0 !important;
}
.tp-item-view-title > .alert {
    padding: .0625rem .5rem !important;
    border-radius: 1rem;
    font-size: .75rem;
}
.tp-item-view-title .badge {
    margin: 0 !important;
    padding: .25em .6em;
    border-radius: 1rem;
    font-size: .75rem;
}
.tp-item-view-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    padding: .0625rem .5rem;
    border-radius: 1rem;
    background-color: #f1f3f5;
    color: #343a40;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
a.tp-item-view-chip:hover,
a.tp-item-view-chip:focus {
    text-decoration: none;
    filter: brightness(.95);
}
.tp-item-view-chip.is-info {
    background-color: #e7f1ff;
    color: #0b4a8f;
}
.tp-item-view-chip.is-success {
    background-color: #e6f4ea;
    color: #1e6b34;
}
.tp-item-view-chip.is-warning {
    background-color: #fff3cd;
    color: #6b4500;
}
.dark-mode .tp-item-view-chip {
    background-color: #454d55;
    color: #e9ecef;
}
.dark-mode .tp-item-view-chip.is-info {
    background-color: rgba(0, 123, 255, .25);
    color: #cfe2ff;
}
.dark-mode .tp-item-view-chip.is-success {
    background-color: rgba(40, 167, 69, .25);
    color: #c3e6cb;
}
.dark-mode .tp-item-view-chip.is-warning {
    background-color: rgba(255, 193, 7, .2);
    color: #ffe08a;
}
.tp-item-view-nav,
.tp-item-view-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}
/* No .btn class: the legacy bootstrap-buttons.css would shrink an icon-only .btn */
.tp-item-view-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 2.375rem;
    height: 2.375rem;
    padding: 0 .625rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background-color: #fff;
    color: #343a40;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.tp-item-view-btn:hover,
.tp-item-view-btn:focus {
    background-color: #e9ecef;
    color: #212529;
    text-decoration: none;
    outline: none;
}
.tp-item-view-btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .35);
}
.tp-item-view-btn.is-active {
    border-color: #9ec5fe;
    background-color: #e7f1ff;
    color: #0b4a8f;
}
.tp-item-view-btn.is-copied {
    border-color: #1e7e34;
    background-color: #e6f4ea;
    color: #1e6b34;
}
.dark-mode .tp-item-view-btn {
    border-color: #6c757d;
    background-color: #3f474e;
    color: #e9ecef;
}
.dark-mode .tp-item-view-btn:hover,
.dark-mode .tp-item-view-btn:focus {
    background-color: #4b545c;
    color: #fff;
}
.dark-mode .tp-item-view-btn.is-active {
    border-color: #3f9cff;
    background-color: rgba(0, 123, 255, .25);
    color: #cfe2ff;
}
.dark-mode .tp-item-view-btn.is-copied {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, .25);
    color: #c3e6cb;
}
/* Outweighs the legacy .btn rules, loaded after this file */
.tp-item-view-actions .tp-item-view-edit {
    display: inline-flex;
    align-items: center;
    height: 2.375rem;
    padding: 0 .875rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
}
/* Section shortcuts and latest activity */
.tp-item-view-subheader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #dee2e6;
}
.dark-mode .tp-item-view-subheader {
    border-bottom-color: #4b545c;
}
.tp-item-view-last-change {
    margin-left: auto;
    color: #5f6870;
}
.dark-mode .tp-item-view-last-change {
    color: #ced4da;
}
/* Sections: the item form bands, folded with .is-collapsed */
.tp-item-view-section {
    padding-top: 1rem;
}
.tp-item-view-section.is-collapsed .tp-item-form-section-head {
    margin-bottom: 0;
}
.tp-item-view-section.is-collapsed .tp-item-form-section-body {
    display: none;
}
.tp-item-view-section.is-collapsed .tp-item-form-section-chevron {
    transform: rotate(-90deg);
}
/* Main: credentials, then what the item is about (side by side when the panel is wide) */
.tp-item-view-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@container (min-width: 50rem) {
    .tp-item-view-main {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}
.tp-item-view-rows {
    overflow: hidden;
    border: 1px solid #e3e7eb;
    border-radius: .5rem;
}
.dark-mode .tp-item-view-rows {
    border-color: #4b545c;
}
/* Rows draw their top border over the box border: no double line whichever row is hidden */
.tp-item-view-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .75rem;
    min-height: 3.25rem;
    margin-top: -1px;
    padding: .375rem .75rem;
    border-top: 1px solid #edf0f2;
}
.tp-item-view-row:hover {
    background-color: #f8f9fa;
}
.dark-mode .tp-item-view-row {
    border-top-color: #4b545c;
}
.dark-mode .tp-item-view-row:hover {
    background-color: #3f474e;
}
.tp-item-view-key {
    color: #5f6870;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dark-mode .tp-item-view-key {
    color: #adb5bd;
}
.tp-item-view-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The full URL stays in the DOM: the copy button and the open link use it */
#card-item-url-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-item-view-secret {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .03em;
    word-break: break-all;
}
/* Countdown ring: how long a shown password stays visible, how long an OTP code stays valid.
   items.js.php sets the period and the time already gone; the ring turns red on its last fifth. */
.tp-item-view-timer {
    --tp-item-view-timer-color: #007bff;
    --tp-item-view-timer-ending: #dc3545;
    --tp-item-view-timer-track: #e3e7eb;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    transform: rotate(-90deg);
}
.dark-mode .tp-item-view-timer {
    --tp-item-view-timer-color: #3f9cff;
    --tp-item-view-timer-ending: #ff6b78;
    --tp-item-view-timer-track: #4b545c;
}
.tp-item-view-timer-track,
.tp-item-view-timer-arc {
    fill: none;
    stroke-width: 2.5;
}
.tp-item-view-timer-track {
    stroke: var(--tp-item-view-timer-track);
}
.tp-item-view-timer-arc {
    stroke: var(--tp-item-view-timer-color);
    stroke-dasharray: 100;
    stroke-linecap: round;
}
.tp-item-view-timer.is-running .tp-item-view-timer-arc {
    animation: tp-item-view-timer var(--tp-item-view-timer-period, 1s) linear var(--tp-item-view-timer-elapsed, 0s) forwards;
}
@keyframes tp-item-view-timer {
    0% {
        stroke: var(--tp-item-view-timer-color);
        stroke-dashoffset: 0;
    }
    78% {
        stroke: var(--tp-item-view-timer-color);
    }
    82% {
        stroke: var(--tp-item-view-timer-ending);
    }
    100% {
        stroke: var(--tp-item-view-timer-ending);
        stroke-dashoffset: 100;
    }
}
#card-item-opt_code {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.tp-item-view-otp {
    font-size: 1.0625rem;
}
.tp-item-view-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.tp-item-view-tools .tp-item-view-btn,
.tp-item-view-field > .tp-item-view-btn {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0;
}
/* About this item */
.tp-item-view-about {
    padding: .25rem 1rem .75rem;
    border: 1px solid #e3e7eb;
    border-radius: .5rem;
    background-color: #f8f9fa;
}
.dark-mode .tp-item-view-about {
    border-color: #4b545c;
    background-color: #3f474e;
}
.tp-item-view-about-list {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: .75rem;
    margin: 0;
}
.tp-item-view-about-list > dt {
    padding: .5rem 0;
    color: #5f6870;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dark-mode .tp-item-view-about-list > dt {
    color: #adb5bd;
}
.tp-item-view-about-list > dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    margin: 0;
    padding: .375rem 0;
    overflow-wrap: anywhere;
}
.tp-item-view-status {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: .375rem 0 0;
    padding: .625rem 0 0;
    border-top: 1px solid #e3e7eb;
    font-size: .875rem;
    list-style: none;
}
.tp-item-view-status:empty {
    display: none;
}
.tp-item-view-status > li {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tp-item-view-status > li > i:first-child {
    color: #5f6870;
}
.dark-mode .tp-item-view-status {
    border-top-color: #4b545c;
}
.dark-mode .tp-item-view-status > li > i:first-child {
    color: #adb5bd;
}
/* Description: a long one is cut, "Show more" reads the rest */
.tp-item-view-description {
    padding: 0 .25rem;
    overflow-wrap: anywhere;
}
.tp-item-view-description > :last-child {
    margin-bottom: 0;
}
.tp-item-view-description.is-clamped {
    max-height: 9rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}
.tp-item-view-more-toggle {
    margin: .375rem .25rem 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #0062cc;
    font-size: .875rem;
    font-weight: 600;
}
.tp-item-view-more-toggle:hover,
.tp-item-view-more-toggle:focus {
    text-decoration: underline;
    outline: none;
}
.dark-mode .tp-item-view-more-toggle {
    color: #8fc1ff;
}
/* Custom fields: flat rows (the loaders read the children directly), ordered by CSS */
.tp-item-view-category + .tp-item-view-category {
    margin-top: .75rem;
}
.tp-item-view-category-title {
    margin: 0 .25rem .25rem;
    color: #5f6870;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dark-mode .tp-item-view-category-title {
    color: #adb5bd;
}
.list-group.tp-item-view-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.25rem;
}
@container (min-width: 50rem) {
    .list-group.tp-item-view-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tp-item-view-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .375rem .75rem;
    border-bottom: 1px solid #edf0f2;
}
.dark-mode .tp-item-view-field {
    border-bottom-color: #4b545c;
}
.tp-item-view-field > .tp-item-view-key {
    flex: 0 0 9rem;
    min-width: 0;
    color: #343a40;
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}
.dark-mode .tp-item-view-field > .tp-item-view-key {
    color: #e9ecef;
}
.tp-item-view-field > .card-item-field-value {
    flex: 1 1 auto;
    order: 2;
}
.tp-item-view-field > .btn-reveal-field {
    order: 3;
}
.tp-item-view-field > .btn-copy-clipboard-clear {
    order: 4;
}
/* History: newest first, the older events on demand */
.tp-item-view-history {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tp-item-view-history-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .625rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #edf0f2;
}
.tp-item-view-history-row.is-older {
    display: none;
}
.tp-item-view-history.is-expanded .tp-item-view-history-row.is-older {
    display: grid;
}
.dark-mode .tp-item-view-history-row {
    border-bottom-color: #4b545c;
}
.tp-item-view-history-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
}
.tp-item-view-history-what {
    min-width: 0;
    overflow-wrap: anywhere;
}
.tp-item-view-history-who {
    font-weight: 600;
}
.tp-item-view-history-when {
    color: #5f6870;
    font-size: .8125rem;
    white-space: nowrap;
}
.dark-mode .tp-item-view-history-when {
    color: #adb5bd;
}
/* Narrow panel (split view, phone): two-line bar, icon-only actions, stacked rows */
@container (max-width: 40rem) {
    .tp-item-view-title {
        flex-basis: calc(100% - 10rem);
    }
    .tp-item-view-bar > .but-back-to-list:last-child {
        order: 1;
    }
    .tp-item-view-nav {
        order: 2;
    }
    .tp-item-view-actions {
        order: 3;
        margin-left: auto;
    }
    .tp-item-view-btn-text {
        display: none;
    }
    .tp-item-view-last-change {
        margin-left: 0;
    }
}
@container (max-width: 30rem) {
    .tp-item-view-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .tp-item-view-row > .tp-item-view-key {
        grid-column: 1 / -1;
        padding-top: .25rem;
    }
    .tp-item-view-about-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .tp-item-view-about-list > dt {
        padding-bottom: 0;
    }
    .tp-item-view-field {
        flex-wrap: wrap;
    }
    .tp-item-view-field > .tp-item-view-key {
        flex-basis: 100%;
    }
    .tp-item-view-history-row {
        grid-template-columns: 1.75rem minmax(0, 1fr);
    }
    .tp-item-view-history-when {
        grid-column: 2;
    }
}