.densep-brand-mark {
    align-items: center;
    background: #00a6a6;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.densep-horizontal-title {
    color: #5e5873;
    font-size: 1rem;
    font-weight: 600;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horizontal-layout .navbar-horizontal .navbar-nav .nav-item > .nav-link {
    gap: .45rem;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation {
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link {
    padding-left: .85rem;
    padding-right: .85rem;
    white-space: nowrap;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link span,
.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation > li.densep-menu-fleet_chat {
    margin-left: auto;
}

.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item {
    gap: .35rem;
    min-width: 0;
    white-space: normal;
}

.horizontal-layout .navbar-horizontal .dropdown-menu {
    max-height: calc(100vh - 8rem);
    max-width: min(22rem, calc(100vw - 2rem));
    overflow-x: hidden;
    overflow-y: auto;
}

.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item svg,
.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item .feather,
.horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link svg,
.horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link .feather {
    flex: 0 0 auto;
}

.horizontal-layout .navbar-horizontal .densep-menu-group-finance_reports > .dropdown-menu,
.horizontal-layout .navbar-horizontal .densep-menu-group-settings > .dropdown-menu {
    left: auto;
    right: 0;
}

.horizontal-layout .navbar-horizontal .densep-menu-group-finance_reports .dropdown-submenu > .dropdown-menu,
.horizontal-layout .navbar-horizontal .densep-menu-group-settings .dropdown-submenu > .dropdown-menu {
    left: auto;
    right: 100%;
}

.horizontal-layout .navbar-horizontal .dropdown-menu .active > .dropdown-item,
.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item.active,
.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item:active {
    background: rgba(0, 166, 166, .1);
    color: #00a6a6;
}

.horizontal-layout .navbar-horizontal .dropdown-menu .dropdown-item i {
    color: inherit;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation > li.dropdown:hover > .dropdown-menu,
.horizontal-layout .navbar-horizontal #main-menu-navigation > li.dropdown:focus-within > .dropdown-menu,
.horizontal-layout .navbar-horizontal #main-menu-navigation > li.dropdown.show > .dropdown-menu {
    display: block;
}

.horizontal-layout .navbar-horizontal #main-menu-navigation .dropdown-submenu:hover > .dropdown-menu,
.horizontal-layout .navbar-horizontal #main-menu-navigation .dropdown-submenu:focus-within > .dropdown-menu,
.horizontal-layout .navbar-horizontal #main-menu-navigation .dropdown-submenu.show > .dropdown-menu {
    display: block;
}

.horizontal-layout .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-text {
    color: #00a6a6;
}

.densep-stat {
    min-height: 132px;
}

.densep-fleet-action-stack {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 148px;
}

.densep-fleet-action-form {
    display: inline-flex;
    margin: 0;
}

.densep-fleet-action-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2rem;
    min-width: 2rem;
    padding: .35rem .5rem;
}

.densep-fleet-action-btn svg,
.densep-fleet-action-btn .feather {
    flex: 0 0 auto;
    height: 14px;
    stroke-width: 2.25;
    width: 14px;
}

.densep-fleet-action-btn span {
    line-height: 1;
}

.densep-rating-stars {
    align-items: center;
    display: inline-flex;
    gap: .15rem;
}

.densep-rating-stars svg,
.densep-rating-stars .feather {
    height: 14px;
    width: 14px;
}

.densep-rating-stars .is-filled {
    fill: #ff9f43;
    stroke: #ff9f43;
}

.densep-rating-stars .is-muted {
    fill: none;
    stroke: #b9b9c3;
}

.densep-schedule-row {
    border-left: 4px solid #00a6a6;
}

.densep-route {
    color: #1f2937;
    font-weight: 600;
}

.densep-table-wrap {
    overflow-x: auto;
}

.densep-code {
    background: #eef7f7;
    border-radius: 6px;
    color: #007f7f;
    display: inline-block;
    font-weight: 600;
    padding: .25rem .45rem;
}

.densep-otp-input {
    font-size: 1.4rem;
    letter-spacing: .45rem;
    text-align: center;
}

.densep-muted-box {
    background: #f6f8fb;
    border: 1px solid #e6edf3;
    border-radius: 8px;
    padding: 1rem;
}

.densep-robots-preview {
    background: #101828;
    border-radius: 8px;
    color: #e6edf3;
    font-size: .9rem;
    line-height: 1.55;
    min-height: 128px;
    overflow: auto;
    padding: 1rem;
    white-space: pre-wrap;
}

.densep-profile-avatar {
    font-size: 2rem;
    height: 84px;
    width: 84px;
}

.horizontal-layout .app-content .content-wrapper {
    max-width: none;
    width: 100%;
}

.horizontal-layout .app-content,
.horizontal-layout .content-wrapper,
.horizontal-layout .content-body,
.horizontal-layout .content-body > .row,
.horizontal-layout .content-body > .card,
.horizontal-layout .content-body .card,
.horizontal-layout .content-body .card-body,
.horizontal-layout .content-body .tab-content,
.horizontal-layout .content-body .modal-body,
.horizontal-layout .content-body .accordion,
.horizontal-layout .content-body [class*="col-"] {
    min-width: 0;
}

.horizontal-layout .navbar-horizontal.floating-nav {
    max-width: calc(100vw - 4.4rem);
    width: calc(100vw - 4.4rem);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.densep-route-tabs,
.densep-add-tabs,
.contract-route-tabs {
    flex-wrap: wrap;
    gap: .5rem;
}

.btn,
.dropdown-item,
.form-control,
.form-select,
.input-group,
.nav-link,
.badge,
.alert,
.card-title,
.content-header-title {
    min-width: 0;
}

.btn,
.badge {
    overflow-wrap: anywhere;
}

.card-title,
.content-header-title,
.breadcrumb,
.dropdown-item,
.form-label,
.table td,
.table th {
    overflow-wrap: anywhere;
}

.table-responsive,
.card-datatable,
.densep-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.card-datatable > .dataTables_wrapper,
.table-responsive > .dataTables_wrapper {
    min-width: 0;
}

.dataTables_wrapper .row {
    row-gap: .75rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    min-width: 0;
}

.dataTables_wrapper .dataTables_filter label {
    max-width: 100%;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    max-width: 100%;
}

.input-group {
    flex-wrap: wrap;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    min-width: 0;
}

.densep-fleet-nav .nav-link {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.densep-transport-datatable .card-datatable {
    padding: 0;
}

.densep-transport-datatable .dt-responsive {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.densep-transport-datatable .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

.densep-transport-datatable .dataTables_length,
.densep-transport-datatable .dataTables_filter,
.densep-transport-datatable .dataTables_info,
.densep-transport-datatable .dataTables_paginate {
    padding: 1rem;
}

.densep-add-tabs {
    border-bottom: 1px solid #ebe9f1;
    gap: .5rem;
    padding-bottom: 1rem;
}

.densep-add-tab-content .tab-pane {
    display: none;
}

.densep-add-tab-content .tab-pane.active {
    display: block;
}

.densep-transport-rule {
    border-left: 4px solid #7367f0;
}

.densep-seat-rule {
    background: #f8f8fb;
    border: 1px solid #ebe9f1;
    border-left: 4px solid #7367f0;
    border-radius: .428rem;
    padding: 1rem;
}

.densep-seat-rule strong {
    color: #5e5873;
    font-size: 1rem;
}

.densep-train-fields,
.densep-train-summary,
.densep-train-service-editor,
.densep-train-seat-editor {
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: .428rem;
    padding: 1rem;
}

.densep-train-current-limit {
    border-top: 1px solid #ebe9f1;
    padding-top: 1rem;
}

.densep-train-seat-map {
    display: block;
    max-height: 360px;
    overflow: auto;
}

.densep-coach-shell {
    min-width: 760px;
}

.densep-coach-title {
    align-items: center;
    color: #5e5873;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.densep-coach-title span {
    color: #6e6b7b;
    font-size: .82rem;
}

.densep-coach-body {
    background: #d9dede;
    border: 4px solid #aeb8b9;
    border-radius: 28px 8px 8px 28px;
    display: grid;
    gap: .35rem;
    grid-template-columns: 92px minmax(0, 1fr) 58px;
    padding: .45rem;
}

.densep-coach-end {
    display: grid;
    gap: .35rem;
}

.densep-coach-facility,
.densep-coach-stairs,
.densep-coach-door {
    align-items: center;
    background: #eef1f2;
    border: 1px solid #9da8a9;
    border-radius: 4px;
    color: #5e5873;
    display: flex;
    font-size: .72rem;
    font-weight: 600;
    justify-content: center;
    min-height: 34px;
    padding: .25rem;
    text-align: center;
}

.densep-coach-main {
    background: #cbd0d1;
    border: 1px solid #a8b1b2;
    border-radius: 4px;
    overflow: auto;
    padding: .35rem;
}

.densep-coach-corridor,
.densep-seat-grid-corridor {
    align-items: center;
    color: #667085;
    display: flex;
    font-size: .75rem;
    font-weight: 600;
    justify-content: center;
    min-height: 24px;
}

.densep-compartment-grid,
.densep-berth-row {
    display: grid;
    gap: .25rem;
}

.densep-compartment-room {
    background: rgba(255, 255, 255, .35);
    border: 1px solid rgba(94, 88, 115, .35);
    display: grid;
    gap: .2rem;
    padding: .2rem;
}

.densep-coach-seat {
    align-items: center;
    background: #6e4a49;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    justify-content: center;
    min-height: 31px;
    min-width: 36px;
    padding: .15rem .35rem;
}

.densep-coach-seat:hover,
.densep-coach-seat:focus {
    background: #7367f0;
    outline: none;
}

.densep-coach-seat.is-priced {
    background: #7367f0;
    box-shadow: 0 0 0 2px rgba(115, 103, 240, .22);
}

.densep-sleeper-layout {
    display: grid;
    gap: .25rem;
    min-width: 940px;
}

.densep-berth-label,
.densep-row-section-label {
    color: #5e5873;
    font-size: .75rem;
    font-weight: 700;
}

.densep-row-section {
    min-width: 900px;
}

.densep-row-section + .densep-row-section {
    margin-top: .75rem;
}

.densep-row-seat-grid {
    display: grid;
    gap: .25rem;
}

.densep-row-seat-grid .densep-coach-seat {
    min-width: 40px;
}

.densep-accessible-zone {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.densep-coach-map-accessible_30 .densep-coach-seat:nth-of-type(-n+4) {
    background: #00a6a6;
}

.densep-coach-map-mixed_60 .class-two-zone .densep-coach-seat {
    background: #7367f0;
}

.densep-coach-map-mixed_60 .class-three-zone .densep-coach-seat,
.densep-coach-map-third_76 .densep-coach-seat,
.densep-coach-map-diesel_76 .densep-coach-seat {
    background: #825f3d;
}

.densep-coach-map-railcar_ac .densep-coach-front .densep-coach-facility:last-child,
.densep-coach-map-railcar_74 .densep-coach-front .densep-coach-facility:last-child,
.densep-coach-map-diesel_76 .densep-coach-front .densep-coach-facility:last-child {
    background: #e8f6f6;
    color: #007f7f;
}

.densep-diesel-railcar-map {
    max-height: 430px;
    overflow-x: hidden;
}

.densep-diesel-railcar-shell {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 24px;
    width: 100%;
}

.densep-diesel-railcar-body {
    background: #c9cecd;
    border: 5px solid #a6afb1;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    box-sizing: border-box;
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(32, minmax(0, 1fr));
    grid-template-rows: 36px 36px 28px 36px 36px;
    padding: .45rem;
    position: relative;
    width: 100%;
}

.densep-diesel-railcar-body::before,
.densep-diesel-railcar-body::after {
    background: #c2c7c7;
    content: "";
    height: 34px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

.densep-diesel-railcar-body::before {
    left: -24px;
}

.densep-diesel-railcar-body::after {
    right: -24px;
}

.densep-diesel-railcar-body .densep-coach-seat {
    background: #6f5050;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 1px;
    font-size: .74rem;
    min-height: 36px;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.densep-diesel-railcar-body .densep-coach-seat:hover,
.densep-diesel-railcar-body .densep-coach-seat:focus {
    background: #7367f0;
}

.densep-diesel-corridor {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    color: #5e5873;
    display: flex;
    font-size: .82rem;
    font-weight: 700;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: center;
    letter-spacing: 0;
}

.densep-diesel-facility,
.densep-diesel-access {
    align-items: center;
    border: 1px solid #7b8889;
    color: #ffffff;
    display: flex;
    font-size: .64rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.15;
    padding: .15rem;
    text-align: center;
}

.densep-diesel-facility {
    background: #4d6f72;
}

.densep-diesel-access {
    background: #718588;
    color: #ffffff;
}

.densep-diesel-divider {
    background: #385255;
    border-radius: 1px;
}

.densep-coach-seat.is-priced.is-available {
    background: #7367f0;
    box-shadow: 0 0 0 2px rgba(115, 103, 240, .22);
}

.densep-coach-seat.is-priced.is-blocked {
    background: #ea5455;
    box-shadow: 0 0 0 2px rgba(234, 84, 85, .24);
}

.densep-coach-seat.is-priced.is-sold {
    background: #28c76f;
    box-shadow: 0 0 0 2px rgba(40, 199, 111, .24);
}

.densep-coach-seat.is-priced.is-available:hover,
.densep-coach-seat.is-priced.is-available:focus {
    background: #5e50ee;
}

.densep-coach-seat.is-priced.is-blocked:hover,
.densep-coach-seat.is-priced.is-blocked:focus {
    background: #e42728;
}

.densep-coach-seat.is-priced.is-sold:hover,
.densep-coach-seat.is-priced.is-sold:focus {
    background: #24b263;
}

.densep-train-seat-status-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.densep-train-seat-status-legend span {
    align-items: center;
    color: #5e5873;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 600;
    gap: .35rem;
}

.densep-train-seat-status-dot {
    border-radius: 50%;
    display: inline-block;
    height: .7rem;
    width: .7rem;
}

.densep-train-seat-status-dot.is-available {
    background: #7367f0;
}

.densep-train-seat-status-dot.is-blocked {
    background: #ea5455;
}

.densep-train-seat-status-dot.is-sold {
    background: #28c76f;
}

.densep-train-seat-status-select.is-available {
    background-color: rgba(115, 103, 240, .08);
    border-color: #7367f0;
    color: #5e50ee;
}

.densep-train-seat-status-select.is-blocked {
    background-color: rgba(234, 84, 85, .08);
    border-color: #ea5455;
    color: #d63637;
}

.densep-train-seat-status-select.is-sold {
    background-color: rgba(40, 199, 111, .08);
    border-color: #28c76f;
    color: #1f9d57;
}

.densep-train-seat-add-btn.is-available {
    background: #7367f0;
    border-color: #7367f0;
}

.densep-train-seat-add-btn.is-blocked {
    background: #ea5455;
    border-color: #ea5455;
}

.densep-train-seat-add-btn.is-sold {
    background: #28c76f;
    border-color: #28c76f;
}

.densep-train-service-table th,
.densep-train-service-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.densep-unified-fleet-data {
    border-left: 4px solid #7367f0;
}

.densep-unified-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.densep-unified-metric,
.densep-unified-panel {
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: .428rem;
    padding: 1rem;
}

.densep-unified-metric {
    min-height: 178px;
}

.densep-unified-metric-primary {
    border-top: 3px solid #7367f0;
}

.densep-unified-metric-success {
    border-top: 3px solid #28c76f;
}

.densep-unified-metric-info {
    border-top: 3px solid #00cfe8;
}

.densep-unified-metric-warning {
    border-top: 3px solid #ff9f43;
}

.densep-unified-icon {
    flex: 0 0 auto;
}

.densep-unified-table th {
    vertical-align: middle;
    white-space: nowrap;
}

.densep-unified-table td {
    vertical-align: middle;
    white-space: normal;
}

.densep-unified-table code {
    overflow-wrap: anywhere;
    white-space: normal;
}

.densep-unified-score {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.densep-unified-checklist {
    display: grid;
    gap: .85rem;
}

.densep-unified-check-item {
    align-items: flex-start;
    display: flex;
    gap: .85rem;
}

@media (max-width: 1199.98px) {
    .densep-unified-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .densep-unified-grid {
        grid-template-columns: 1fr;
    }

    .densep-unified-table th,
    .densep-unified-table td {
        white-space: normal;
    }
}

.densep-driver-score {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.densep-chat-window {
    background: #f8f8f8;
    border-radius: 8px;
    min-height: 320px;
    padding: 1rem;
}

.densep-internal-chat .content-area-wrapper {
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: .428rem;
    min-height: 640px;
}

html body.navbar-hidden .app-content.densep-internal-chat {
    padding: 1rem 1.5rem 0 !important;
}

.densep-internal-chat .sidebar-content,
.densep-internal-chat .chat-profile-sidebar {
    border-radius: .428rem 0 0 .428rem;
}

.densep-internal-chat .content-right,
.densep-internal-chat .content-right .content-wrapper,
.densep-internal-chat .content-right .content-body,
.densep-internal-chat .chat-app-window,
.densep-internal-chat .active-chat {
    height: 100%;
}

.densep-internal-chat .chat-app-window .chat-header h6 {
    color: #5e5873;
    font-weight: 600;
}

.densep-internal-chat .densep-chat-actions {
    gap: .25rem;
}

.densep-internal-chat .densep-chat-actions .btn-icon {
    color: #6e6b7b;
}

.densep-internal-chat .user-chats {
    min-height: 510px;
}

.densep-internal-chat .chat-app-window .chats .chat-body .chat-content small {
    color: inherit !important;
    opacity: .65;
}

.densep-internal-chat .chat-app-window .chat-app-form .form-send-message {
    min-width: 0;
}

.densep-internal-chat .chat-users-list li {
    cursor: pointer;
}

.densep-internal-chat .chat-users-list li > a {
    color: inherit;
    min-width: 0;
    text-decoration: none;
}

.densep-internal-chat .chat-users-list li > a .chat-info {
    min-width: 0;
}

.densep-internal-chat .chat-users-list li.active > a,
.densep-internal-chat .chat-users-list li.active > a small,
.densep-internal-chat .chat-users-list li.active > a .card-text {
    color: #fff !important;
}

.densep-internal-chat .chat-meta {
    min-width: 72px;
}

.densep-internal-chat .densep-ai-polished {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    color: #0f5132;
    background: #d1e7dd;
    font-size: 0.72rem;
    font-weight: 600;
}

.densep-internal-chat .densep-ai-polished svg {
    width: 0.78rem;
    height: 0.78rem;
}

.densep-internal-chat .densep-chat-sidebar-form {
    margin-bottom: 0.75rem;
}

.densep-internal-chat .densep-chat-create-group {
    border-top: 1px solid rgba(34, 41, 47, 0.08);
    background: rgba(248, 248, 248, 0.72);
}

.densep-internal-chat .densep-chat-create-group select[multiple] {
    min-height: 4.75rem;
}

.densep-chat-management {
    min-width: 0;
}

.densep-chat-management .densep-chat-stat .card-body {
    min-height: 94px;
}

.densep-chat-management .densep-chat-tabs {
    overflow-x: auto;
    padding-bottom: .1rem;
}

.densep-chat-management .densep-chat-tabs .nav {
    flex-wrap: nowrap !important;
    min-width: max-content;
}

.densep-chat-management .densep-chat-tabs .nav-link {
    white-space: nowrap;
}

.densep-chat-management .densep-chat-table {
    min-width: 1180px;
    table-layout: fixed;
}

.densep-chat-management .densep-chat-table-compact {
    min-width: 720px;
}

.densep-chat-management .densep-chat-table-files,
.densep-chat-management .densep-chat-table-permissions {
    min-width: 960px;
}

.densep-chat-management .densep-chat-table-records {
    min-width: 860px;
}

.densep-chat-management .densep-chat-table th,
.densep-chat-management .densep-chat-table td {
    vertical-align: middle;
}

.densep-chat-management .densep-chat-message {
    display: block;
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.densep-chat-management .densep-chat-actions-cell {
    min-width: 320px;
}

.densep-chat-management .densep-chat-card-actions,
.densep-chat-management .densep-chat-file-actions,
.densep-chat-management .densep-chat-action-stack {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.densep-chat-management .densep-chat-card-actions form,
.densep-chat-management .densep-chat-file-actions form,
.densep-chat-management .densep-chat-action-stack form {
    margin: 0;
}

.densep-chat-management .densep-chat-edit-form .input-group {
    min-width: 260px;
}

.densep-chat-management .densep-chat-edit-form .form-control {
    min-width: 0;
}

.densep-call-modal .modal-content {
    border: 0;
    border-radius: .5rem;
    overflow: hidden;
}

.densep-call-modal .densep-call-preview {
    align-items: center;
    background: #f2f0f7;
    border: 1px solid #ebe9f1;
    border-radius: .428rem;
    display: flex;
    justify-content: center;
    min-height: 280px;
    padding: 1.5rem;
}

.densep-call-modal .densep-call-video {
    background: #111827;
    border-radius: .428rem;
    height: 280px;
    object-fit: cover;
    width: 100%;
}

.densep-route-studio .card-header {
    min-height: 78px;
}

.densep-geofence-shell {
    display: grid;
    grid-template-columns: 352px minmax(0, 1fr);
    min-height: 620px;
}

.densep-geofence-panel {
    background: #f8f9fb;
    border-right: 1px solid #ebe9f1;
    min-width: 0;
}

.densep-geofence-header {
    align-items: center;
    background: #1684f8;
    color: #fff;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: 84px;
    padding: 1rem;
}

.densep-geofence-header strong {
    font-size: 1.15rem;
    line-height: 1.2;
}

.densep-geofence-header .btn {
    color: #1684f8;
    font-weight: 600;
}

.densep-geofence-list {
    max-height: 502px;
    overflow-y: auto;
    padding: .75rem;
}

.densep-geofence-card {
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(34, 41, 47, .06);
    color: #5e5873;
    display: block;
    margin-bottom: .75rem;
    padding: .9rem;
    text-align: left;
    width: 100%;
}

.densep-geofence-card:hover,
.densep-geofence-card:focus {
    border-color: #1684f8;
    outline: none;
}

.densep-route-map-wrap {
    min-height: 620px;
    position: relative;
}

.densep-route-map {
    background:
        linear-gradient(90deg, rgba(115, 103, 240, .08) 1px, transparent 1px),
        linear-gradient(rgba(115, 103, 240, .08) 1px, transparent 1px),
        #eef3f7;
    background-size: 36px 36px;
    height: 620px;
    width: 100%;
    z-index: 1;
}

.densep-map-toolbar {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    left: .75rem;
    position: absolute;
    top: .75rem;
    z-index: 500;
}

.densep-map-toolbar .btn {
    border: 1px solid #d8d6de;
    box-shadow: 0 2px 8px rgba(34, 41, 47, .12);
}

.densep-map-toolbar .btn.active {
    background: #7367f0;
    border-color: #7367f0;
    color: #fff;
}

.densep-map-status {
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #ebe9f1;
    border-radius: 8px;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    left: 1rem;
    padding: .65rem .85rem;
    position: absolute;
    right: 1rem;
    z-index: 500;
}

.densep-route-map-fallback {
    align-items: center;
    color: #6e6b7b;
    display: flex;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.densep-route-pin-popup .btn {
    width: 100%;
}

.densep-route-datatable-tabs .card-datatable {
    padding: 0;
}

.densep-route-tabs {
    border-bottom: 1px solid #ebe9f1;
    gap: .5rem;
    padding-bottom: 1rem;
}

.densep-route-tab-content .tab-pane {
    padding: 0;
}

.densep-route-datatable-tabs .dt-responsive {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.densep-route-datatable-tabs .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

.densep-route-datatable-tabs .dataTables_length,
.densep-route-datatable-tabs .dataTables_filter,
.densep-route-datatable-tabs .dataTables_info,
.densep-route-datatable-tabs .dataTables_paginate {
    padding: 1rem;
}

.densep-route-form-highlight {
    box-shadow: 0 0 0 .25rem rgba(115, 103, 240, .16), 0 4px 24px rgba(34, 41, 47, .12);
    transition: box-shadow .2s ease;
}

.densep-fuel-panel {
    width: 100%;
}

.densep-fuel-summary {
    align-items: center;
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.densep-fuel-metric {
    border-right: 1px solid #ebe9f1;
    min-width: 150px;
    padding-right: 1rem;
}

.densep-fuel-metric strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.25;
}

.densep-fuel-metric span {
    color: #6e6b7b;
    display: block;
    font-size: .82rem;
    margin-top: .25rem;
}

.densep-fuel-search {
    min-width: min(100%, 280px);
}

.densep-fuel-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.densep-fuel-grid.densep-fuel-list {
    grid-template-columns: 1fr;
}

.densep-fuel-card {
    background: #fff;
    border: 1px solid #ebe9f1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(34, 41, 47, .06);
    min-height: 220px;
    padding: 1rem;
}

.densep-fuel-card h5 {
    color: #323947;
    font-size: 1rem;
    font-weight: 700;
}

.densep-fuel-card-stats {
    background: #f8f8f8;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
    padding: .75rem .5rem;
    text-align: center;
}

.densep-fuel-card-stats > div + div {
    border-left: 1px solid #ebe9f1;
}

.densep-fuel-card-stats small {
    color: #6e6b7b;
    display: block;
    font-size: .78rem;
}

.densep-fuel-card-stats strong {
    color: #323947;
    display: block;
    font-size: 1rem;
}

.densep-fuel-form-body {
    background: #f8f9fb;
}

.densep-fuel-form-card {
    border-top: 3px solid #7367f0;
    box-shadow: 0 3px 12px rgba(34, 41, 47, .06);
}

.densep-fuel-source-box {
    background: #f8f8f8;
    border: 1px solid #ebe9f1;
    border-radius: 8px;
    padding: 1rem;
}

.densep-currency-select {
    max-width: 86px;
}

.densep-empty-state {
    background: #f8f9fb;
    border: 1px dashed #cfd6df;
    border-radius: 8px;
}

@media (max-width: 1199.98px) {
    .densep-horizontal-title {
        max-width: 52vw;
    }

    .horizontal-layout .app-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .densep-geofence-shell {
        grid-template-columns: 1fr;
    }

    .densep-geofence-panel {
        border-bottom: 1px solid #ebe9f1;
        border-right: 0;
    }

    .densep-geofence-list {
        max-height: 280px;
    }

    .densep-chat-management .densep-chat-table {
        min-width: 980px;
    }

    .densep-chat-management .densep-chat-table-compact {
        min-width: 680px;
    }

    .densep-chat-management .densep-chat-table-files,
    .densep-chat-management .densep-chat-table-permissions,
    .densep-chat-management .densep-chat-table-records {
        min-width: 820px;
    }

    .densep-chat-management .card-header {
        align-items: flex-start !important;
        gap: .75rem;
    }

    .densep-fuel-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .horizontal-layout .navbar-horizontal.floating-nav {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
    }

    .horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link {
        font-size: .84rem;
        gap: .28rem;
        padding-left: .42rem;
        padding-right: .42rem;
    }

    .horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link svg,
    .horizontal-layout .navbar-horizontal #main-menu-navigation > li > .nav-link .feather {
        height: 15px;
        width: 15px;
    }

    .horizontal-layout .navbar-horizontal #main-menu-navigation > li.densep-menu-fleet_chat > .nav-link span {
        display: none;
    }

    .horizontal-layout .navbar-horizontal #main-menu-navigation > li.densep-menu-fleet_chat > .nav-link {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .horizontal-layout .navbar-horizontal .dropdown-toggle::after {
        margin-left: .22rem;
    }
}

@media (min-width: 1400px) {
    .horizontal-layout .navbar-horizontal #main-menu-navigation > li.densep-menu-fleet_chat > .nav-link {
        padding-left: .85rem;
        padding-right: .85rem;
    }
}

@media (max-width: 575.98px) {
    .densep-horizontal-title {
        display: none;
    }

    .densep-fuel-grid {
        grid-template-columns: 1fr;
    }

    .densep-fuel-metric {
        border-right: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Account menu (top-right) — the operator's only door to their own account.

   Sizing rules that are load-bearing, not taste:
   · every row is min-height 44px with 8px between groups (WCAG 2.5.5 target
     size); the previous menu's rows were 30px and 2px apart, which on a phone
     is a coin toss between "profile" and "sign out".
   · focus is a visible ring, never `outline:none` — the menu is exactly what a
     keyboard-only operator reaches for when the mouse is not an option.
   · the email line truncates instead of wrapping: an address long enough to
     wrap pushes Sign out off the bottom of a short viewport.
   ========================================================================== */

.densep-account-toggle {
    align-items: center;
    border-radius: .5rem;
    display: flex;
    gap: .6rem;
    min-height: 44px;
    padding: .25rem .4rem;
    transition: background-color .18s ease;
}

.densep-account-toggle:hover,
.densep-account-toggle[aria-expanded="true"] {
    background-color: rgba(0, 166, 166, .1);
}

.densep-account-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 166, 166, .45);
    outline: none;
}

.densep-account-toggle .avatar img.round {
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.densep-account-toggle .user-nav {
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
}

.densep-account-toggle .user-status {
    color: #6e6b7b;
    font-size: .75rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 🔴 Styled here in full rather than borrowing `.dropdown-menu`.
   Bootstrap 5.1.0 is loaded twice in this layout and its delegated keydown
   handler matches `.dropdown-menu` in the CAPTURE phase, calling
   stopPropagation() before the menu's own arrow-key handling can run (and
   throwing on the way out, twice). Wearing Bootstrap's class was enough to
   break the keyboard; the look has to come from somewhere else. */
.densep-account-dropdown {
    background-color: #fff;
    border: 1px solid rgba(34, 41, 47, .08);
    border-radius: .75rem;
    box-shadow: 0 12px 30px rgba(34, 41, 47, .16);
    color: #6e6b7b;
    display: none;
    font-size: .9rem;
    inset-inline-end: 0;
    max-width: calc(100vw - 1.5rem);
    min-width: 19rem;
    padding: .5rem;
    position: absolute;
    text-align: start;
    top: 100%;
    z-index: 1021;
}

.densep-account-dropdown.show {
    display: block;
}

.densep-account-dropdown .dropdown-divider {
    border-top: 1px solid rgba(34, 41, 47, .08);
    margin: .5rem .25rem;
}

.densep-account-dropdown .dropdown-item {
    background: none;
    border: 0;
    clear: both;
    color: #6e6b7b;
    display: block;
    font-weight: 400;
    text-decoration: none;
    width: 100%;
}

/* -- identity card ------------------------------------------------------- */

.densep-account-card {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    padding: .55rem .6rem .25rem;
}

.densep-account-card-avatar {
    border-radius: 50%;
    flex: 0 0 44px;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.densep-account-card-initial {
    align-items: center;
    background: rgba(0, 166, 166, .12);
    color: #00a6a6;
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 700;
    justify-content: center;
}

.densep-account-card-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.densep-account-card-label {
    color: #b9b9c3;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.densep-account-card-name {
    color: #5e5873;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.densep-account-card-email {
    color: #6e6b7b;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.densep-account-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
}

/* -- menu rows ----------------------------------------------------------- */

.densep-account-dropdown .densep-account-item {
    align-items: flex-start;
    border-radius: .5rem;
    display: flex;
    gap: .7rem;
    min-height: 44px;
    padding: .5rem .6rem;
    transition: background-color .18s ease, color .18s ease;
    white-space: normal;
}

.densep-account-dropdown .densep-account-item:hover,
.densep-account-dropdown .densep-account-item:focus {
    background-color: rgba(0, 166, 166, .1);
    color: #00a6a6;
}

.densep-account-dropdown .densep-account-item:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 166, 166, .55);
    outline: none;
}

.densep-account-item-icon {
    flex: 0 0 1rem;
    margin-top: .2rem;
}

.densep-account-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.densep-account-item-label {
    font-weight: 500;
    line-height: 1.35;
}

.densep-account-item-hint {
    color: #b9b9c3;
    font-size: .73rem;
    line-height: 1.3;
}

.densep-account-dropdown .densep-account-item:hover .densep-account-item-hint,
.densep-account-dropdown .densep-account-item:focus .densep-account-item-hint {
    color: #6e6b7b;
}

/* -- sign out ------------------------------------------------------------ */

.densep-account-signout {
    margin: 0;
}

/* Specificity has to beat `.densep-account-dropdown .dropdown-item`, which sets
   the muted body colour. A single-class rule loses to it and Sign out renders
   the same grey as everything above it — the one entry that should not. */
.densep-account-dropdown .densep-account-signout-button {
    align-items: center;
    background: none;
    border: 0;
    color: #ea5455;
    text-align: start;
    width: 100%;
}

.densep-account-dropdown .densep-account-signout-button:hover,
.densep-account-dropdown .densep-account-signout-button:focus {
    background-color: rgba(234, 84, 85, .12);
    color: #ea5455;
}

.densep-account-dropdown .densep-account-signout-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(234, 84, 85, .55);
}

@media (max-width: 575.98px) {
    .densep-account-dropdown {
        min-width: 17rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .densep-account-toggle,
    .densep-account-dropdown .densep-account-item {
        transition: none;
    }
}

/* ==========================================================================
   Language switcher — the flag menu to the left of the account menu.

   Same construction as the account menu and for the same reason: NOT a
   Bootstrap dropdown (no `.dropdown-menu`, no `data-bs-toggle`), driven by
   `initLanguageMenu()` in admin.js. The two panels share their radius, shadow
   and hover tint so they read as one control family.

   · the toggle is 44px tall like every other navbar target;
   · the flag is inline SVG at 3:2, clipped to a soft rectangle with a hairline
     so the white stripes of the Thai flag do not dissolve into the navbar;
   · the current entry is marked three ways — bold, a check icon, and
     `aria-checked` — never by colour alone.
   ========================================================================== */

.densep-lang-menu {
    position: relative;
}

.densep-lang-toggle {
    align-items: center;
    border-radius: .5rem;
    color: #5e5873;
    display: flex;
    gap: .45rem;
    min-height: 44px;
    min-width: 44px;
    padding: .25rem .5rem;
    transition: background-color .18s ease;
}

.densep-lang-toggle:hover,
.densep-lang-toggle[aria-expanded="true"] {
    background-color: rgba(0, 166, 166, .1);
    color: #5e5873;
}

.densep-lang-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 166, 166, .45);
    outline: none;
}

.densep-flag {
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(34, 41, 47, .12);
    display: block;
    flex: 0 0 auto;
    height: 16px;
    width: 24px;
}

.densep-lang-code {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
}

.densep-lang-chevron {
    height: 14px;
    opacity: .7;
    transition: transform .18s ease;
    width: 14px;
}

.densep-lang-toggle[aria-expanded="true"] .densep-lang-chevron {
    transform: rotate(180deg);
}

.densep-lang-dropdown {
    background-color: #fff;
    border: 1px solid rgba(34, 41, 47, .08);
    border-radius: .75rem;
    box-shadow: 0 12px 30px rgba(34, 41, 47, .16);
    color: #6e6b7b;
    display: none;
    font-size: .9rem;
    inset-inline-end: 0;
    max-width: calc(100vw - 1.5rem);
    min-width: 13.5rem;
    padding: .5rem;
    position: absolute;
    text-align: start;
    top: 100%;
    z-index: 1021;
}

.densep-lang-dropdown.show {
    display: block;
}

.densep-lang-heading {
    color: #b9b9c3;
    display: block;
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .3rem .6rem .45rem;
    text-transform: uppercase;
}

.densep-lang-form {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0;
}

.densep-lang-item {
    align-items: center;
    background: none;
    border: 0;
    border-radius: .5rem;
    color: #6e6b7b;
    display: flex;
    font: inherit;
    gap: .7rem;
    min-height: 44px;
    padding: .45rem .6rem;
    text-align: start;
    transition: background-color .18s ease, color .18s ease;
    width: 100%;
}

.densep-lang-item:hover,
.densep-lang-item:focus {
    background-color: rgba(0, 166, 166, .1);
    color: #00a6a6;
}

.densep-lang-item:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 166, 166, .55);
    outline: none;
}

.densep-lang-item .densep-flag {
    height: 18px;
    width: 27px;
}

.densep-lang-item-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.densep-lang-item-label {
    font-weight: 500;
    line-height: 1.35;
}

.densep-lang-item.is-current .densep-lang-item-label {
    color: #5e5873;
    font-weight: 600;
}

.densep-lang-item-hint {
    color: #b9b9c3;
    font-size: .73rem;
    line-height: 1.3;
}

.densep-lang-item:hover .densep-lang-item-hint,
.densep-lang-item:focus .densep-lang-item-hint {
    color: #6e6b7b;
}

.densep-lang-item-check {
    color: #00a6a6;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .densep-lang-toggle,
    .densep-lang-chevron,
    .densep-lang-item {
        transition: none;
    }
}

/* 🔴 Under 768px the template's bootstrap-extended.css sets
   `.header-navbar .navbar-nav .show { position: static }` (and the same for
   every `.dropdown`), meant to let its own dropdown-menus span the navbar.
   Both of our panels carry `.show` while open, so on a phone they stopped
   being absolutely positioned, flowed INLINE inside the <li>, and stretched
   the toggle to the panel's width (measured: a 58px flag button became 189px
   wide with the panel sitting inside it). Specificity 0,4,0 beats the
   template's 0,3,0; the panel stays anchored to its own toggle. */
@media (max-width: 767.98px) {
    .header-navbar .navbar-nav .densep-lang-menu,
    .header-navbar .navbar-nav .densep-lang-menu.show,
    .header-navbar .navbar-nav .densep-account-menu,
    .header-navbar .navbar-nav .densep-account-menu.show {
        position: relative;
    }

    .header-navbar .navbar-nav .densep-lang-dropdown.show,
    .header-navbar .navbar-nav .densep-account-dropdown.show {
        position: absolute;
    }
}

/* ==========================================================================
   Profile screen — real ARIA tabs over what used to be scroll anchors.
   ========================================================================== */

.densep-profile-tabs .nav-link {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
    min-height: 44px;
}

.densep-profile-tabs .nav-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 166, 166, .45);
    outline: none;
}

.densep-profile-tznote {
    align-items: center;
    display: flex;
    font-size: .82rem;
    gap: .15rem;
    margin-bottom: 1rem;
}

/* Definition lists beat the old <h5>+<p> stack: label and value stay on one
   row, so scanning six facts does not mean reading twelve lines. */
.densep-profile-facts {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: .45rem .9rem;
    margin: 0;
}

.densep-profile-facts dt {
    color: #b9b9c3;
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.densep-profile-facts dd {
    color: #5e5873;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.densep-pref-preview {
    align-items: baseline;
    background: rgba(0, 166, 166, .08);
    border-radius: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    padding: .7rem .9rem;
}

.densep-pref-preview-label {
    color: #6e6b7b;
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    .densep-profile-facts {
        grid-template-columns: 1fr;
        gap: .1rem .5rem;
    }

    .densep-profile-facts dd {
        margin-bottom: .55rem;
    }
}

/* ==========================================================================
   Chat layout chrome.

   🔴 The chat layout hides the navbar, so this bar is the ONLY way off the
   screen: back to the dashboard, and the account menu (profile / sign out).
   Before it existed the chat page was a dead end reachable only by the browser
   Back button.
   ========================================================================== */

.densep-chat-chrome {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid rgba(34, 41, 47, .08);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .5rem 1.25rem;
    position: relative;
    z-index: 5;
}

.densep-chat-chrome-back {
    align-items: center;
    border-radius: .5rem;
    color: #00a6a6;
    display: inline-flex;
    font-weight: 500;
    gap: .4rem;
    min-height: 44px;
    padding: .25rem .6rem;
    text-decoration: none;
    transition: background-color .18s ease;
}

.densep-chat-chrome-back:hover,
.densep-chat-chrome-back:focus {
    background-color: rgba(0, 166, 166, .1);
    color: #00a6a6;
}

.densep-chat-chrome-back:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 166, 166, .45);
    outline: none;
}

.densep-chat-chrome-title {
    color: #5e5873;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pushes the account menu to the far end — the same corner it occupies on every
   other screen, so it is not somewhere new to look for. */
.densep-chat-chrome-account {
    margin-inline-start: auto;
}

.densep-chat-flash:empty {
    display: none;
}

.densep-chat-flash {
    padding: .75rem 1.25rem 0;
}

@media (max-width: 767.98px) {
    .densep-chat-chrome-title {
        display: none;
    }
}

/* =========================================================================
   Densep minimal UI (dsp-*) — shared by the redesigned back-office pages.

   One page = topbar (scope filter + primary actions) → stat strip → tabs.
   Every tab holds a `.dsp-section`: a full-width form `.dsp-panel` (hidden
   until "Add"/"Edit") above a `.dsp-list` card whose header carries the
   title, a count, a `?` hint and the Add button top-right. While a panel is
   open the list is hidden, so the form owns the whole page.

   Text discipline: explanations live in tooltips (`.dsp-hint`), row actions
   are icon buttons whose visible-to-screen-reader label is lifted into the
   tooltip by admin.js (`.dsp-ibtn`). The label stays a real text node right
   before </button> so UiTranslator still translates it.
   ========================================================================= */
.dsp-page {
    --dsp-ink: #22222f;
    --dsp-muted: #706e84;        /* 4.94:1 on #fff · was #7c7a90 at 4.03:1 */
    --dsp-line: #e7e6ee;         /* hairlines only — form controls use --dsp-field-line */
    /* A field's own boundary is a UI component (WCAG 1.4.11), not a hairline.
       dsp had overridden it to something LIGHTER than Vuexy's own default, so a
       25-field form read as floating labels with no visible boxes. */
    --dsp-field-line: #d8d6de;
    --dsp-soft: #f7f7fb;
    --dsp-accent: #7367f0;
    --dsp-accent-soft: #efedfd;
    --dsp-danger: #ea5455;
    --dsp-success: #28c76f;
    --dsp-warn: #ff9f43;
    --dsp-info: #00cfe8;
    --dsp-radius: .6rem;
    --dsp-t: 150ms;
}
.dsp-page .card { border: 1px solid var(--dsp-line); box-shadow: none; border-radius: var(--dsp-radius); margin-bottom: 1.25rem; }
.dsp-page .card-body { padding: 1.25rem; }
.dsp-page .btn { display: inline-flex; align-items: center; gap: .4rem; }
.dsp-page .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dsp-page .btn-sm { padding: .45rem .8rem; }
.dsp-page .btn:focus-visible { outline: 2px solid var(--dsp-accent); outline-offset: 2px; }

/* Topbar --------------------------------------------------------------- */
.dsp-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.dsp-topbar form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
/* Bootstrap gives selects/inputs width:100%; inside a shrink-to-fit flex form
   that makes every control take the form's full width and stack. Size them to
   their content instead so the scope filters sit on one line. */
.dsp-topbar .form-select, .dsp-topbar .form-control { width: auto; flex: 0 1 auto; min-width: 11rem; }
.dsp-topbar .input-group { width: auto; flex: 0 1 auto; }
.dsp-topbar .input-group .form-control { min-width: 9rem; }
/* Two date inputs plus a search box and three selects will not fit at 11rem
   each; a date field never needs that much room anyway. */
.dsp-topbar .dsp-date { min-width: 9.25rem; }
.dsp-spacer { flex: 1 1 auto; }
.dsp-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Stat strip ----------------------------------------------------------- */
.dsp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dsp-stat { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; background: #fff; border: 1px solid var(--dsp-line); border-radius: var(--dsp-radius); min-height: 64px; }
.dsp-stat-icon { width: 36px; height: 36px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; background: var(--dsp-accent-soft); color: var(--dsp-accent); flex: 0 0 auto; }
.dsp-stat-icon svg { width: 16px; height: 16px; }
.dsp-stat-icon.is-success { background: rgba(40, 199, 111, .12); color: #20a15a; }  /* 3.01:1 non-text · was 2.01:1 */
.dsp-stat-icon.is-warn { background: rgba(255, 159, 67, .14); color: #df6d00; }     /* 3.02:1 non-text · was 1.85:1 */
.dsp-stat-icon.is-danger { background: rgba(234, 84, 85, .12); color: var(--dsp-danger); }
.dsp-stat-icon.is-info { background: rgba(0, 207, 232, .12); color: #009caf; }      /* 3.00:1 non-text · was 2.58:1 */
.dsp-stat-icon.is-muted { background: var(--dsp-soft); color: var(--dsp-muted); }
.dsp-stat-body { min-width: 0; flex: 1 1 auto; }
.dsp-stat-value { font-size: 1.3rem; font-weight: 600; line-height: 1.15; color: var(--dsp-ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-stat-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dsp-muted); margin: .1rem 0 0; font-weight: 600; }

/* Tabs ----------------------------------------------------------------- */
.dsp-tabs { display: flex; flex-wrap: nowrap; gap: .25rem; border-bottom: 1px solid var(--dsp-line); margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.dsp-tabs .nav-item { margin: 0; flex: 0 0 auto; }
.dsp-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .9rem; min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--dsp-muted); font-weight: 500; white-space: nowrap; margin-bottom: -1px; cursor: pointer; transition: color var(--dsp-t) ease, border-color var(--dsp-t) ease; }
.dsp-tabs .nav-link:hover { color: var(--dsp-ink); }
.dsp-tabs .nav-link.active { color: var(--dsp-accent); border-bottom-color: var(--dsp-accent); }
.dsp-tabs .nav-link:focus-visible { outline: 2px solid var(--dsp-accent); outline-offset: -2px; }
.dsp-tabs .nav-link svg { width: 15px; height: 15px; }
.dsp-tabs .nav-link.disabled, .dsp-tabs .nav-link:disabled { opacity: .45; pointer-events: none; }
.dsp-tabs .nav-link[data-count]::after { content: attr(data-count); display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.25rem; padding: 0 .4rem; border-radius: 999px; background: var(--dsp-soft); color: var(--dsp-muted); font-size: .68rem; font-weight: 600; }
.dsp-tabs .nav-link.active[data-count]::after { background: var(--dsp-accent-soft); color: var(--dsp-accent); }
.dsp-tabs .nav-link[data-count=""]::after { display: none; }
.dsp-tabs .dsp-tab-spacer { flex: 1 1 auto; }

/* Card header with title / count / hint / actions ----------------------- */
.dsp-card-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--dsp-line); flex-wrap: wrap; }
.dsp-card-head h4, .dsp-card-head h5, .dsp-card-head .card-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--dsp-ink); }
.dsp-card-head .dsp-actions { margin-left: auto; }
.dsp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.35rem; padding: 0 .45rem; border-radius: 999px; background: var(--dsp-soft); color: var(--dsp-muted); font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Hint (tooltip icon) ---------------------------------------------------- */
.dsp-hint { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: var(--dsp-muted); cursor: help; vertical-align: middle; flex: 0 0 auto; transition: color var(--dsp-t) ease, background var(--dsp-t) ease; }
.dsp-hint:hover, .dsp-hint:focus-visible { color: var(--dsp-accent); background: var(--dsp-accent-soft); outline: none; }
.dsp-hint svg { width: 14px; height: 14px; }
.dsp-hint.is-warn { color: var(--dsp-warn); }
.dsp-hint.is-danger { color: var(--dsp-danger); }

/* Field label row (label + required mark + hint, hint OUTSIDE the label) */
.dsp-label { display: flex; align-items: center; gap: .2rem; margin-bottom: .25rem; min-height: 1.4rem; }
.dsp-label .form-label { margin: 0; font-size: .8rem; font-weight: 500; color: var(--dsp-ink); }
.dsp-req { color: var(--dsp-danger); font-weight: 600; line-height: 1; }

/* Icon-only action button (label is hidden text, lifted into a tooltip) */
.dsp-ibtn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--dsp-line); border-radius: .45rem; background: #fff; color: var(--dsp-muted); font-size: 0; line-height: 0; cursor: pointer; text-decoration: none; flex: 0 0 auto; transition: color var(--dsp-t) ease, border-color var(--dsp-t) ease, background var(--dsp-t) ease; }
.dsp-ibtn svg { width: 15px; height: 15px; }
.dsp-ibtn:hover, .dsp-ibtn:focus-visible { color: var(--dsp-accent); border-color: var(--dsp-accent); background: var(--dsp-accent-soft); outline: none; text-decoration: none; }
.dsp-ibtn:focus-visible { box-shadow: 0 0 0 3px rgba(115, 103, 240, .25); }
.dsp-ibtn.is-danger:hover, .dsp-ibtn.is-danger:focus-visible { color: var(--dsp-danger); border-color: var(--dsp-danger); background: rgba(234, 84, 85, .1); }
.dsp-ibtn.is-success:hover, .dsp-ibtn.is-success:focus-visible { color: var(--dsp-success); border-color: var(--dsp-success); background: rgba(40, 199, 111, .1); }
.dsp-ibtn.is-warn:hover, .dsp-ibtn.is-warn:focus-visible { color: var(--dsp-warn); border-color: var(--dsp-warn); background: rgba(255, 159, 67, .12); }
.dsp-ibtn.is-primary { color: var(--dsp-accent); border-color: var(--dsp-accent); }
.dsp-ibtn:disabled, .dsp-ibtn.disabled { opacity: .45; pointer-events: none; }
.dsp-row-actions { display: flex; gap: .3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.dsp-row-actions form { margin: 0; display: inline-flex; }

/* Tables --------------------------------------------------------------- */
.dsp-table-wrap { overflow-x: auto; }
.dsp-page .table { margin-bottom: 0; }
.dsp-page .table thead th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dsp-muted); background: var(--dsp-soft); border-bottom: 1px solid var(--dsp-line); white-space: nowrap; padding: .6rem 1rem; font-weight: 600; }
.dsp-page .table td { padding: .65rem 1rem; vertical-align: middle; border-color: var(--dsp-line); }
.dsp-page .table tbody tr { transition: background var(--dsp-t) ease; }
.dsp-page .table tbody tr:hover { background: #fbfbfd; }
.dsp-page .table tbody tr.is-selected { background: var(--dsp-accent-soft); }
.dsp-page .table tbody tr.is-off { background: var(--dsp-soft); }
.dsp-page .table tbody tr.is-off .dsp-primary { opacity: .6; }
.dsp-primary { font-weight: 600; color: var(--dsp-ink); }
.dsp-sub { display: block; font-size: .76rem; color: var(--dsp-muted); line-height: 1.35; margin-top: .1rem; }
/* The same muted style on a whole cell must stay a cell, not become a block. */
td.dsp-sub, th.dsp-sub { display: table-cell; margin: 0; font-size: .8rem; }
.dsp-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dsp-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px; background: var(--dsp-soft); color: var(--dsp-muted); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.dsp-chip svg { width: 12px; height: 12px; }
.dsp-chip.is-accent { background: var(--dsp-accent-soft); color: var(--dsp-accent); }
.dsp-chip.is-success { background: rgba(40, 199, 111, .12); color: #1a8047; }  /* 4.50:1 · was #1f9d58 at 3.16:1 */
.dsp-chip.is-warn { background: rgba(255, 159, 67, .16); color: #b05600; }   /* 4.61:1 · was #c96d10 at 3.30:1 */
.dsp-chip.is-danger { background: rgba(234, 84, 85, .12); color: #d61a1c; }  /* 4.50:1 · was --dsp-danger at 3.08:1 */
.dsp-bar { height: 6px; border-radius: 999px; background: var(--dsp-soft); overflow: hidden; min-width: 80px; }
.dsp-bar > span { display: block; height: 100%; background: var(--dsp-accent); border-radius: 999px; }

/* Empty state ---------------------------------------------------------- */
.dsp-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--dsp-muted); font-size: .85rem; text-align: center; }
.dsp-empty svg { width: 22px; height: 22px; opacity: .55; }

/* Full-width form panel ------------------------------------------------ */
.dsp-panel[hidden] { display: none !important; }
.dsp-panel { border: 1px solid var(--dsp-line); border-radius: var(--dsp-radius); background: #fff; margin-bottom: 1.25rem; }
.dsp-panel-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--dsp-line); flex-wrap: wrap; }
.dsp-panel-head h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--dsp-ink); }
.dsp-mode { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .5rem; border-radius: 999px; background: var(--dsp-accent-soft); color: var(--dsp-accent); font-weight: 600; }
.dsp-panel-head .dsp-actions { margin-left: auto; }
.dsp-panel-body { padding: 1.25rem; }
.dsp-panel-foot { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .85rem 1.25rem; border-top: 1px solid var(--dsp-line); background: var(--dsp-soft); border-radius: 0 0 var(--dsp-radius) var(--dsp-radius); position: sticky; bottom: 0; z-index: 2; }
.dsp-panel-foot .dsp-spacer { flex: 1 1 auto; }
.dsp-section.is-editing > .dsp-list { display: none; }
.dsp-fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.dsp-fieldset:last-child { margin-bottom: 0; }
.dsp-fieldset > legend { float: none; width: auto; padding: 0; margin: 0 0 .6rem; display: flex; align-items: center; gap: .3rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dsp-muted); font-weight: 600; }
.dsp-fieldset > legend svg { width: 13px; height: 13px; }
.dsp-form .form-control, .dsp-form .form-select { border-color: var(--dsp-field-line); transition: border-color var(--dsp-t) ease, box-shadow var(--dsp-t) ease; }
.dsp-form .form-control:focus, .dsp-form .form-select:focus { border-color: var(--dsp-accent); box-shadow: 0 0 0 3px rgba(115, 103, 240, .15); }
.dsp-form textarea.form-control { min-height: 4.5rem; }
.dsp-form .form-check-label { font-size: .85rem; }
.dsp-form .input-group-text { border-color: var(--dsp-field-line); background: var(--dsp-soft); color: var(--dsp-muted); font-size: .8rem; }

/* Key/value facts (show pages) — labels are <th> so they stay translatable */
.dsp-facts { width: 100%; }
.dsp-facts th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dsp-muted); font-weight: 600; padding: .45rem .75rem .45rem 0; white-space: nowrap; width: 1%; vertical-align: top; background: transparent; border: 0; }
.dsp-facts td { padding: .45rem 0; border: 0; color: var(--dsp-ink); vertical-align: top; }
.dsp-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2rem; }

/* Inline alerts inside a page ------------------------------------------ */
.dsp-page .alert { border-radius: var(--dsp-radius); }
.dsp-note { display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .9rem; border: 1px dashed var(--dsp-line); border-radius: var(--dsp-radius); color: var(--dsp-muted); font-size: .8rem; background: var(--dsp-soft); }
.dsp-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .1rem; }

/* Selectable list (users, properties…) ---------------------------------- */
.dsp-picklist { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.dsp-picklist a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--dsp-line); color: var(--dsp-ink); text-decoration: none; transition: background var(--dsp-t) ease; }
.dsp-picklist a:last-child { border-bottom: 0; }
.dsp-picklist a:hover { background: #fbfbfd; }
.dsp-picklist a.active { background: var(--dsp-accent-soft); color: var(--dsp-accent); }
.dsp-picklist a:focus-visible { outline: 2px solid var(--dsp-accent); outline-offset: -2px; }
.dsp-picklist .dsp-primary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-picklist a.active .dsp-primary, .dsp-picklist a.active .dsp-sub { color: inherit; }

/* Permission grid -------------------------------------------------------- */
.dsp-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem .9rem; }
.dsp-perm { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--dsp-line); border-radius: .45rem; transition: border-color var(--dsp-t) ease, background var(--dsp-t) ease; }
.dsp-perm:hover { border-color: #d6d3ea; background: #fbfbfd; }
.dsp-perm .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.dsp-perm label { cursor: pointer; font-size: .82rem; line-height: 1.3; }

/* A full-page form with a sidebar (a permission grid, a preview, a summary).
   Collapses to one column before the sidebar gets too narrow to read. */
.dsp-split-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1199.98px) {
    .dsp-split-form { grid-template-columns: 1fr; }
}

/* Drag-to-reorder list (menu builder). The grip is a hint that the row moves;
   dropping only rearranges the DOM — nothing is saved until Save Order. */
.dsp-sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.dsp-sortable .dsp-sortable { margin: .35rem 0 0 1.5rem; }
.dsp-sortable-item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .75rem; border: 1px solid var(--dsp-line); border-radius: .45rem; background: #fff; cursor: grab; }
.dsp-sortable-item.is-dragging { opacity: .5; }
.dsp-sortable-item:hover { border-color: #d6d3ea; }
.dsp-sortable-grip { color: var(--dsp-muted); display: inline-flex; }
.dsp-sortable-grip svg { width: 14px; height: 14px; }
.dsp-sortable-body { flex: 1 1 auto; min-width: 0; }

/* Layout helpers ---------------------------------------------------------- */
.dsp-split { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dsp-cert { border: 1px solid var(--dsp-line); border-radius: var(--dsp-radius); padding: 1.5rem; text-align: center; background: linear-gradient(180deg, #fffdf7, #fff); }
.dsp-cert-seal { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--dsp-line); display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dsp-muted); padding: .5rem; }

/* Field-level validation (§51) — the message sits under the control it is
   about, never only as one sentence at the top of the page. */
.dsp-field-error { display: flex; align-items: flex-start; gap: .3rem; font-size: .75rem; margin-top: .25rem; line-height: 1.35; }
.dsp-field-error svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: .15rem; }

/* Save in progress (§52) — the button stops looking clickable while it works */
.dsp-page .btn.is-busy { pointer-events: none; opacity: .7; }

/* Row overflow menu (§48) — Edit and Documents stay in the row, everything
   rarer lives behind the ⋮ so the two daily actions are not crowded out. */
.dsp-row-menu { display: inline-block; }
.dsp-row-menu .dropdown-menu { min-width: 13rem; padding: .3rem; border: 1px solid var(--dsp-line); border-radius: .55rem; box-shadow: 0 10px 28px rgba(34, 34, 47, .12); }
.dsp-row-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; border-radius: .4rem; padding: .45rem .6rem; font-size: .82rem; color: var(--dsp-ink); background: transparent; text-align: left; }
.dsp-row-menu .dropdown-item svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--dsp-muted); }
.dsp-row-menu .dropdown-item:hover, .dsp-row-menu .dropdown-item:focus-visible { background: var(--dsp-accent-soft); color: var(--dsp-accent); outline: none; }
.dsp-row-menu .dropdown-item:hover svg, .dsp-row-menu .dropdown-item:focus-visible svg { color: inherit; }
.dsp-row-menu .dropdown-item.is-danger { color: var(--dsp-danger); }
.dsp-row-menu .dropdown-item.is-danger:hover, .dsp-row-menu .dropdown-item.is-danger:focus-visible { background: rgba(234, 84, 85, .1); color: #d61a1c; }
.dsp-row-menu form { margin: 0; }
.dsp-row-menu .dropdown-divider { margin: .25rem 0; border-color: var(--dsp-line); }

/* Load failure (§59) — a query that gave up must not be drawn as "no records
   yet"; the operator is told it broke and offered the same request again. */
.dsp-load-error { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(234, 84, 85, .35); background: rgba(234, 84, 85, .07); color: #b8393a; border-radius: var(--dsp-radius); font-size: .85rem; }
.dsp-load-error svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dsp-load-error .dsp-spacer { flex: 1 1 auto; }

/* History timeline ------------------------------------------------------- */
.dsp-timeline { list-style: none; margin: 0; padding: .25rem 0 0; }
.dsp-timeline > li { position: relative; padding: 0 0 1rem 1.25rem; border-left: 1px solid var(--dsp-line); }
.dsp-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dsp-timeline > li::before { content: ''; position: absolute; left: -5px; top: .3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--dsp-accent); }
.dsp-timeline .dsp-primary { display: block; }
.dsp-timeline .dsp-sub { display: block; }

/* Sortable header (§47) — a <button> so the label stays translatable, sized so
   it is a real click target rather than a chevron to aim at. */
.dsp-th-sort { padding: 0 !important; }
.dsp-sort { display: inline-flex; align-items: center; gap: .3rem; width: 100%; min-height: 40px; padding: .5rem .75rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dsp-sort svg { width: 12px; height: 12px; flex: 0 0 auto; }
.dsp-sort:hover { color: var(--dsp-accent); }
.dsp-sort:focus-visible { outline: 2px solid var(--dsp-accent); outline-offset: -2px; }
.dsp-th-sort.is-active .dsp-sort { color: var(--dsp-accent); }

/* Numbered pagination (§47)
   🔴 `.dsp-pager-link`, NEVER `.dsp-page`. `.dsp-page` is the page ROOT of every
   redesigned screen; giving the pagination links that name turned the whole page
   into `display: inline-flex` — topbar, stats, tabs and list laid out side by
   side in a 28px-tall row, with the list rendered above the top of the document
   where nothing could click it. No PHP test saw it (the markup was correct) and
   no CSS validator saw it (the file parses fine). Only the browser did. */
.dsp-pager { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.dsp-pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border: 1px solid var(--dsp-line); border-radius: .4rem; background: #fff; color: var(--dsp-muted); font-size: .8rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.dsp-pager-link svg { width: 14px; height: 14px; }
.dsp-pager-link:hover { color: var(--dsp-accent); border-color: var(--dsp-accent); text-decoration: none; }
.dsp-pager-link.is-current { background: #6254ee; border-color: #6254ee; color: #fff; font-weight: 600; }  /* white-on-accent 5.22:1 · was 4.26:1 */
.dsp-pager-link.disabled { opacity: .45; pointer-events: none; }
.dsp-pager-gap { padding: 0 .2rem; color: var(--dsp-muted); }
.dsp-perpage { margin: 0 .2rem 0 .75rem; }
.dsp-panel-foot .form-select-sm { width: auto; min-width: 4.5rem; }

/* Pinned identifying column (§54) — seven columns do not fit a phone, and a row
   scrolled halfway is a row you can no longer tell apart from its neighbours. */
.dsp-table-pin { position: sticky; left: 0; z-index: 1; background: #fff; }
thead .dsp-table-pin { z-index: 2; background: var(--dsp-soft); }
.dsp-list tbody tr:hover .dsp-table-pin { background: #fbfbfd; }
@media (min-width: 992px) {
    /* On a screen wide enough for the whole table, nothing scrolls and a sticky
       cell only risks painting over its neighbour. */
    .dsp-table-pin { position: static; }
}

/* Collapsed detail (§56) — configuration that most runs leave alone stays out
   of the way until it is asked for. <summary> is one of the tags UiTranslator
   rewrites, so the label stays translatable. */
.dsp-details { border: 1px solid var(--dsp-line); border-radius: var(--dsp-radius); background: #fff; }
.dsp-details > summary { cursor: pointer; padding: .6rem .9rem; font-size: .82rem; font-weight: 600; color: var(--dsp-ink); list-style: none; display: flex; align-items: center; gap: .4rem; }
.dsp-details > summary::-webkit-details-marker { display: none; }
.dsp-details > summary::before { content: ''; width: 0; height: 0; border-left: 5px solid var(--dsp-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dsp-t) ease; }
.dsp-details[open] > summary::before { transform: rotate(90deg); }
.dsp-details > summary:focus-visible { outline: 2px solid var(--dsp-accent); outline-offset: -2px; }
.dsp-details > *:not(summary) { padding: 0 .9rem .9rem; }

/* Empty state that offers the way out (§58) */
.dsp-empty .dsp-empty-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: .25rem; }

@media (max-width: 991.98px) {
    .dsp-split { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .dsp-topbar { flex-direction: column; align-items: stretch; }
    .dsp-topbar .dsp-actions, .dsp-topbar form { width: 100%; }
    .dsp-topbar .form-select, .dsp-topbar .form-control { min-width: 0; flex: 1 1 auto; }
    .dsp-card-head .dsp-actions { margin-left: 0; width: 100%; }
    .dsp-panel-foot { position: static; }
}
/* ── Status pills (§50) ────────────────────────────────────────────────────────
   Vuexy's own badge-light-* tints put their text at 1.72-2.01:1 against their own
   background — measurably invisible on a laptop at moderate brightness, on the
   single most-scanned cell of the busiest table in the back office. An operator
   could not tell a pending booking from a confirmed one at a glance, which is the
   judgement the table exists to support.

   `!important` is required because colors.min.css sets these with it. Scoped to
   `.dsp-page` so screens that have not been through the dsp layer stay
   byte-identical. Text is always present as well as colour, per §50. */
.dsp-page .badge-light-success   { color: #1a8047 !important; }  /* 4.50:1 · was 2.01:1 */
.dsp-page .badge-light-warning   { color: #b05600 !important; }  /* 4.61:1 · was 1.88:1 */
.dsp-page .badge-light-info      { color: #00727f !important; }  /* 5.15:1 · was 1.73:1 */
.dsp-page .badge-light-danger    { color: #d61a1c !important; }  /* 4.50:1 · was 3.08:1 */
.dsp-page .badge-light-secondary { color: #5c6066 !important; }  /* 5.55:1 · was 3.23:1 */

/* A load that FAILED must not wear the same face as a module with no data (§59). */
.dsp-empty.is-error { color: #b8393a; }
/* A sub-line that is a warning, not an aside — e.g. "this list is incomplete"
   under the select whose options are missing. #b05600 measures 4.61:1 on white. */
.dsp-sub.is-warn { color: #b05600; }
.dsp-empty.is-error svg { opacity: 1; }

/* A one-button GET form standing in for a link, so its label can be translated
   (UiTranslator rewrites the text node before </button>, never before </a>). */
.dsp-inline-form { display: inline-flex; margin: 0; }

/* Pinned ACTIONS column (§54) — the mirror of .dsp-table-pin.
   Every row action lived ~240px past the right edge of the scroll box on a phone,
   so reaching Edit or the ⋮ menu meant scrolling the whole table sideways for
   every single row. */
.dsp-table-pinend { position: sticky; right: 0; z-index: 1; background: #fff; }
thead .dsp-table-pinend { z-index: 2; background: var(--dsp-soft); }
.dsp-list tbody tr:hover .dsp-table-pinend { background: #fbfbfd; }
/* 🔴 An open row menu is painted by Popper's `fixed` strategy, which takes it out
   of the table's stacking context — but a LOWER row's pinned cell then paints OVER
   it and its items stop being clickable. Reproduced with elementsFromPoint at
   390px. Two separate rules on purpose: an unsupported `:has` invalidates its own
   rule only, and the `:focus-within` one must survive on browsers without it
   (`:focus-within` alone is not enough — iOS Safari does not reliably focus a
   <button> on tap). */
.dsp-table-pinend:focus-within { z-index: 3; }
.dsp-table-pinend:has(.dropdown-menu.show) { z-index: 3; }
@media (min-width: 992px) {
    /* Wide enough for the whole table: nothing scrolls, so a sticky cell could
       only paint over its neighbour. */
    .dsp-table-pinend { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .dsp-page *, .dsp-page *::before, .dsp-page *::after { transition: none !important; animation: none !important; }
}