body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .login-page {
    font-family: "Brother 1816" !important;
}
body {
    font-size: 0.9rem;
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    min-height:100vh;
    min-width: 375px;
}
.login-page {
    min-width: 375px;
    min-height: 445.2px;
}
.bg-color-white {
    background-color: #FFFFFF !important;
}

.content-wrapper {
    background-color: unset;
}
.wrapper {
    min-height:100vh;
}
.text-background-box-green {
    color: #3CC265;
    background-color: #DCF6E9;
    padding: 0.3rem;
}

.text-background-box-red {
    color: #E72150;
    background-color: #FCE7E7;
    padding: 0.3rem;
}

.text-background-box-yellow {
    color: #EEC654;
    background-color: #FCF5F5;
    padding: 0.3rem;
}

.text-background-box-green.d-block, .text-background-box-red.d-block, .text-background-box-yellow.d-block {
    width: 70px;
    text-align: center;
}

.progress-bar {
    background-color: #25B9C0;
}

.dataTables_wrapper tr.even td.dtfc-fixed-left, .dataTables_wrapper tr.odd td.dtfc-fixed-left {
    background-color: #ffffff;
}

.dataTables_wrapper thead th.dtfc-fixed-left {
    background-color: #ffffff;
    z-index: 1;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_length {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_info {
    float: left;
}

div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
    /*margin: 10px 0;*/
}

.dataTables_wrapper .top, .dataTables_wrapper .bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.dataTables_wrapper .bottom {
    padding-top: 1rem;
}
.pagination .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: unset;
    margin-right: 1.5rem;
    overflow: inherit;
}
.dataTables_wrapper .dataTables_length {
    margin-left: auto;
}
.dataTables_wrapper .dataTables_paginate {
    min-width: 250px;
    max-width: 400px;
}
.dataTables_wrapper .dataTables_paginate .select2.select2-container--default {
    width: 100% !important;
}
.dataTables_wrapper .select2-container--default .select2-selection--single {
    height: unset;
}
.dataTables_wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 16px;
}
.dataTables_wrapper .dataTables_paginate .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 23px;
}
.pagination .page-item .previous.page-link, .pagination .page-item .next.page-link {
    font-size: 16px;
    font-weight: bold;
}

.form-control {
    font-size: 0.85rem;
}
.card-title {
    font-size: 0.95rem;
}
.navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus {
    background-color: unset;
}
.navbar-nav .dropdown-item {
    font-size: 1rem;
}
.content-wrapper .content-header h1 {
    font-size: 1.65rem;
}
.main-sidebar .brand-link, .sidebar .user-panel .d-flex, [class*="sidebar-light-"] .user-panel a:hover, [class*="sidebar-light-"] .sidebar a,
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link, [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active,
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active:hover, [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:focus,
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:hover, [class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link {
    color: #0A286A;
}
[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link.active {
    color: #FFFFFF;
}
table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    border-right-width: 0;
}
.row #export .btn-secondary {
    background-color: unset;
    border: unset;
}
#editProfileNoHover.btn-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.user-panel .image {
    padding-left: 0.93rem;
}
.dataTables_scrollHead {
    overflow-x: auto !important;
}
.no-search .select2-search {
    display:none;
}
.select2-selection__clear {
    margin-top: -2px;
}
.organizational-hierarchy .fa-bars {
    color: rgba(0,0,0,.5);
}
.dropdown-menu li {
    position: relative;
}
.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: -70%;
    top: 20px;
}

.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
    display: block;
}

.dropdown-menu-lg {
    z-index: 2000;
}

.nofitication {
    position: fixed;
    right: 30px;
    bottom: 0px;
    width: 300px;
    font-size: 14px;
    line-height: 22px;
    font-family: inherit;
    font-weight: 500;
    opacity: 0;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    z-index: 4;
}
.nofitication_header {
    color: #ffffff;
    height: 40px;
    background: #A50000;
    border-radius: 10px 10px 0 0;
    padding-top: 8px;
    text-align: center;
}
.nofitication .close {
    position: absolute;
    font-size: 25px;
    color: #ffffff;
    top: 0px;
    right: 10px;
    cursor: pointer;
    float: right;
}
.nofitication.is-visible {
    opacity: 1;
    -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}
.nofitication.is-hide {
    opacity: 0;
}
.nofitication_option {
    float: left;
    font-size: 16px;
    list-style: none;
    position: relative;
    height: 100%;
    width: 100%;
    text-align: relative;
    margin-right: 10px;
    letter-spacing: 0.5px;
    font-weight: 400;
}
.nofitication_body {
    background: #fff;
    width: 100%;
    display: inline-block;
    text-align: center;
    overflow-y: auto;
    min-height: 125px;
}
.nofitication_body p {
    padding: 20px;
    color: rgba(0,0,0,.87);
}
.checkbox {
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.was-validated .form-control:invalid, .form-control.is-invalid, .select2-selection.is-invalid {
    background-image: none;
    background-repeat: unset;
    background-position: unset;
    background-size: unset;
    border-color: #dc3545 !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #fff;
}
#filterForm .select2-container--default.select2-container--disabled .select2-selection--single,
.dashboardFilterSection .select2-container--default.select2-container--disabled .select2-selection--single,
#editProfileModal #email:disabled {
    background-color: #e9ecef !important;
}

table.dataTable > thead .no-sort::before, table.dataTable > thead .no-sort::after { 
    display: none !important;
}

#filters #filterForm {
    border-bottom: 1px solid rgb(52, 58, 64);
}

.rounded-edges {
    border-radius: .25rem;
}
.cancelButton {
    float: right;
    font-weight: bold;
    height: 38px;
    background-color: transparent;
    border: none;
    font-size: 1em;
    color: #404040;
    padding: unset;
    left: -30px;
    position: relative;
}

.daterangepicker {
    color: #404040;
}

/* Chart CSS*/
.chart-legend {
    margin: 0 0 8.4px;
}

.chart-legend ul {
    list-style: none;
    display: flex;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 200;
    margin-bottom: 0;
}

.chart-legend li {
    padding-right: 10px;
}

.chart-legend ul li span {
    width: 35px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
}

.chart-legend ul .title1 span {
    width: 25px;
    height: 2px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    background-color: #0A286A;
}
.chart-legend ul .title2 span {
    width: 25px;
    height: 2px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    background-color: #701851;
}

.nav-link {
    padding: .5rem;
}

.header-width {
    width: 72%;
}
@media screen and (max-width: 1502px) {
    .header-width {
        width: 68%;
    }
}
@media screen and (max-width: 1362px) {
    .header-width {
        width: 60%;
    }
}

.extra-padding {
    padding: .75rem 0.25rem .75rem 1.25rem;
}
@media screen and (min-width: 1433px) {
    .extra-padding {
        padding: .567rem 0.25rem .567rem 1.25rem;
    }
}

.select2.select2-container--default {
    margin-right: 1rem;
}
.pagination .select2.select2-container--default {
    margin-right: 0.5rem;
}

#update_organization_department .select2.select2-container--default {
    margin-right: 0.5rem;
}
#update_wifi_settings .select2.select2-container--default {
    margin-right: 0.5rem;
}
#uploadModal .select2.select2-container--default, #organizationUser + .select2.select2-container--default {
    margin-right: unset;
}

.sidebar-mini .main-sidebar .nav-link, .sidebar-mini-md .main-sidebar .nav-link, .sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(250px - 0.5rem);
}

.filterRowDivWidth .select2.select2-container {
    width: 100% !important;
}

table.DTCR_clonedTable.dataTable {
    position: absolute !important;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 202;
}
div.DTCR_pointer {
    width: 1px;
    background-color: #0259c4;
    z-index: 201;
}

.profilepic {
    position: relative;
    width: 12%;
    float: left;
}  
.profilepic:hover .profilepic__content {
    opacity: 1;
}
.profilepic:hover .profilepic__image {
    opacity: .5;
}
.profilepic__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.cursorPointer {
    cursor: pointer;
}

.chart-legend ul {
    display: block;
}
.chart-legend li {
    float: left;
}

.sidebarMenu {
    width: 13%;
    float: left;
    display: block;
}

.management-sidebar {
    overflow: hidden;
    margin-top: 0.75rem;
    padding: 0.65rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
}

.management-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.65rem;
    border-bottom: 1px solid var(--ui-border);
}

.management-sidebar-header > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-ring);
    color: var(--ui-primary);
}

.management-sidebar-header strong,
.management-sidebar-header small {
    display: block;
}

.management-sidebar-header strong {
    color: var(--ui-text);
    font-size: 0.78rem;
    font-weight: 800;
}

.management-sidebar-header small {
    margin-top: 0.08rem;
    color: var(--ui-text-muted);
    font-size: 0.58rem;
}

.management-sidebar .sidebar-menu-nav {
    padding-top: 0;
}

.management-sidebar .nav-sidebar {
    gap: 0.25rem;
}

.management-sidebar .nav-sidebar > .nav-item > .nav-link {
    display: flex;
    width: 100% !important;
    min-height: 54px;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--ui-text-muted);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.management-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    transform: translateX(2px);
}

.management-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    border-color: rgba(10, 111, 122, 0.2);
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong));
    color: #fff;
    box-shadow: 0 7px 16px rgba(10, 111, 122, 0.18);
}

.management-sidebar-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 0.72rem;
}

.management-sidebar .nav-link.active .management-sidebar-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.management-sidebar-copy {
    min-width: 0;
    flex: 1;
}

.management-sidebar-copy strong,
.management-sidebar-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.management-sidebar-copy strong {
    color: inherit;
    font-size: 0.69rem;
    font-weight: 800;
}

.management-sidebar-copy small {
    margin-top: 0.08rem;
    color: inherit;
    font-size: 0.53rem;
    opacity: 0.78;
}

.management-sidebar-arrow {
    flex: 0 0 auto;
    font-size: 0.55rem;
    opacity: 0.55;
}

.mobile-submenu-shell {
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.mobile-submenu-shell label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    color: var(--ui-text);
    font-size: 0.68rem;
    font-weight: 800;
}

.mobile-submenu-shell label i {
    color: var(--ui-primary);
}

.mobile-submenu-shell #selectSubMenu {
    width: 100%;
    margin: 0;
}

.dataTableContent {
    width: 87%;
}
.dropdown-item:active {
    color: #212529;
    text-decoration: unset;
    background-color: transparent;
}
.control-sidebar-slide-open .control-sidebar, .control-sidebar-slide-open .control-sidebar::before {
    right: 0;
    transition: right .3s ease-in-out,display .3s ease-in-out;
}

.filterClass {
    display: table-cell;
    vertical-align: middle;
    padding-right: 2rem;
}
.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar::before {
    margin-left: -500px;
}
body:not(.layout-fixed) .main-sidebar {
    position:  absolute;
}
.dataTableContent .navbar-light {
    background-color: unset;
    border-bottom: unset;
}

.privacyLine {
    position: fixed;
    bottom: 0%;
    margin: 0 1rem 1rem;
    font-size: 0.85rem;
}
.privacyLine a {
    text-decoration: underline;
}

.dashboardBox {
    padding-right: 7.5px;
    padding-left: 7.5px;
}

#missedOpportunitiesBreakupByDepartment {
    max-height: 100%;
    max-width: 100%;
}

.iconClass {
    position: relative;
}
.iconClass span {
    position: absolute;
    top: -10px;
    right: 0px;
    display: block;
}

.fa-arrow-up-short-wide {
    background: url('../images/arrow-up-short-wide-solid.svg') no-repeat center;
}

.fa-arrow-down-short-wide {
    background: url('../images/arrow-down-short-wide-solid.svg') no-repeat center;
}

.fa-arrow-up-short-wide, .fa-arrow-down-short-wide {
    display: block;
    width: 30px;
    height: 100%;
}

.select2-container--default .select2-search--inline .select2-search__field {
    border: none !important;
    cursor: pointer;
    margin: 0;
    padding: .46875rem .75rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    padding: 0;
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
    border-color: #CBEEF1;
    padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff;
    color: #404040;
    border-color: #e5e5e5;
    padding: 0.1rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none;
    color: #000;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: unset;
}

.dropdown-suggestion {
    font-style: italic;
    color: #848080;
}
.dashboard-filter-suggestion {
    width: 100%;
    text-align: end;
    margin-right: 2rem;
}
#batteryHistoryDashboardView.content-wrapper {
    min-height: unset !important;
}

.pagination .page-item .page-link.paginate_of:hover, .pagination .page-item .page-link.showRecords:hover {
    background-color: unset !important;
}

#records .tableEditable {
    cursor: pointer;
}

.dispenser-activity-report table {
    width: 100%;
    table-layout: fixed;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.dispenser-activity-report th, .dispenser-activity-report td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    background: white;
    width: 60px;
}
.dispenser-activity-report thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.dispenser-activity-report th {
    position: sticky;
    left: 0;
    z-index: 1;
}
.dispenser-activity-report th, .dispenser-activity-report thead td {
    text-align: center;
}
.dispenser-activity-report td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.dispenser-activity-report {
    width: 100%;
    max-height: 600px;
    overflow: auto;
    border: 1px solid #ddd;
}
.dispenser-activity-report .gray-background {
    background-color: #f2f2f2;
}


@media screen and (min-width: 577px) {
    .sidebarMenu {
        display: none;
    }
    .dataTableContent {
        width: 100%;
    }
    .dashboardBox {
        width: 25%;
    }
    #missedOpportunitiesBreakupByDepartment {
        max-height: 70%;
        max-width: 70%;
    }
}

@media screen and (min-width: 768px) {
    .sidebarMenu {
        display: none;
    }
    .dataTableContent {
        width: 100%;
    }
    .filterClass {
        padding-right: unset;
    }
    #missedOpportunitiesBreakupByDepartment {
        max-height: 50%;
        max-width: 50%;
    }
    .dashboardFilterSection .select2-container--default {
        width: 200px !important;
    }
    .staffActivityBox, .staffUserDashboardBox, .staffPerformanceBox {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media screen and (min-width: 992px) {
    .right-header {
        justify-content: flex-end;
    }
    .sidebarMenu {
        display: block;
    }
    .dataTableContent {
        width: 87%;
    }
    .filterClass {
        padding-right: 2rem;
    }
    body:not(.layout-fixed) .main-sidebar {
        position:  unset;
    }
    .dashboardBox {
        width: 25%;
    }
    #missedOpportunitiesBreakupByDepartment {
        max-height: 40%;
        max-width: 40%;
    }
}

@media screen and (min-width: 1200px) {
    #dispenserDashboardView #relatedRecordsSection, #eventDashboardView #relatedRecordsSection {
        padding-left: 11px;
        padding-right: unset;
    }
    #dispenserDashboardView #criticalRefileAlertsGraphDataDiv, #eventDashboardView #missedOpportunitiesVSSanitizationChartDiv,
    #eventDashboardView #totalMissedOpportunitiesChartDiv {
        padding-right: 4px !important;
    }
    #relatedRecordsSection .card {
        height: 100%;
    }
    .dashboardBox {
        width: 12.5%;
    }
}

@media screen and (max-width: 576px) {
    #filters #filterForm .form-inline label {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 0;
    }
    .sidebarMenu {
        display: none;
    }
    .nav-pills .show > .nav-link {
        background-color: unset;
    }
    .nav-pills .nav-link:not(.active), .nav-pills .nav-item.dropdown.show .nav-link:hover {
        color: #0A286A;
    }
    .dataTableContent {
        width: 100%;
    }
    .chart-legend ul {
        font-size: 0.8rem;
    }
    .dashboardBox {
        width: 50%;
    }
    .dataTables_wrapper .dataTables_paginate .pagination .page-item {
        padding-left: unset;
    }
    .dataTables_wrapper .top .dataTables_length {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left;
    }
    .dataTables_wrapper .bottom .dataTables_length {
        margin-left: unset;
        margin-right: 1rem;
    }
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .privacyLine {
        position: unset;
        margin: 1rem 1rem;
        bottom: unset;
    }

    .dashboardFilterSection .select2-container--default {
        width: 100% !important;
    }

    .fa-arrow-up-short-wide, .fa-arrow-down-short-wide {
        width: 3vw;
    }
    .dataTables_wrapper .top .dataTables_length {
        margin-left: unset;
    }
    .dataTables_wrapper .top .dataTables_filter {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.dashboard-cards {
    height: 53px;
}
.dashboard-cards + h3 {
    font-size: 1.8rem;
}
.dispensers-dashboard-cards, .events-dashboard-cards, .staff-dashboard-cards {
    height: 29px;
}
@media screen and (max-width: 1830px) {
    .dashboardBox .dashboard-cards {
        height: 77px;
    }
}
@media screen and (max-width: 1540px) {
    .staffActivityBox .events-dashboard-cards, .staffPerformanceBox .staff-dashboard-cards {
        height: 53px;
    }
}
@media screen and (max-width: 1050px) {
    .staffActivityBox .events-dashboard-cards, .staffPerformanceBox .staff-dashboard-cards {
        height: 70px;
    }
}
@media screen and (max-width: 991px) {
    .dashboard-cards, .dispensers-dashboard-cards {
        height: 53px;
    }
}
@media screen and (max-width: 910px) {
    .staff-dashboard-cards {
        height: 53px;
    }
}
@media screen and (max-width: 840px) {
    .dashboard-cards {
        height: 77px;
    }
}
@media screen and (max-width: 767px) {
    .dashboard-cards {
        height: 41px;
    }
    .dispensers-dashboard-cards, .staffActivityBox .events-dashboard-cards, .staff-dashboard-cards, .staffPerformanceBox .staff-dashboard-cards {
        height: 23px;
    }
}
@media screen and (max-width: 649px) {
    .dashboard-cards {
        height: 59px;
    }
}
@media screen and (max-width: 576px) {
    .dashboard-cards, .staffActivityBox .events-dashboard-cards, .staffPerformanceBox .staff-dashboard-cards {
        height: 41px;
    }
}
@media screen and (max-width: 500px) {
    .staff-dashboard-cards {
        height: 41px;
    }
}
@media screen and (max-width: 420px) {
    .dispensers-dashboard-cards {
        height: 41px;
    }
}
@media screen and (max-width: 361px) {
    .staffActivityBox .events-dashboard-cards, .staffPerformanceBox .staff-dashboard-cards {
        height: 59px;
    }
}
@media screen and (max-width: 349px) {
    .dashboard-cards, .staff-dashboard-cards {
        height: 59px;
    }
}
@media (min-width: 1600px) {
    .card-body-table-row .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
@page {
    size: auto;
}

/* --------------------------------------------------------------------------
   Mirador UI refresh
   Shared component styling. Theme-specific colors are supplied by each
   main-{theme}.css file so light, bright, and dark modes remain supported.
   -------------------------------------------------------------------------- */
:root {
    --ui-primary: #0a6f7a;
    --ui-primary-strong: #075560;
    --ui-accent: #25b9c0;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f5fafb;
    --ui-surface-raised: rgba(255, 255, 255, 0.92);
    --ui-text: #19313a;
    --ui-text-muted: #667b83;
    --ui-border: #d9e8eb;
    --ui-ring: rgba(37, 185, 192, 0.22);
    --ui-shadow-sm: 0 2px 8px rgba(20, 64, 74, 0.08);
    --ui-shadow-md: 0 10px 30px rgba(20, 64, 74, 0.11);
    --ui-radius-sm: 0.55rem;
    --ui-radius-md: 0.85rem;
    --ui-radius-lg: 1rem;
}

body {
    color: var(--ui-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a,
button,
.btn,
.form-control,
.select2-selection,
.small-box,
.card,
.dropdown-item,
.nav-link {
    transition: color 160ms ease, background-color 160ms ease,
        border-color 160ms ease, box-shadow 160ms ease,
        transform 160ms ease;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--ui-ring);
    outline-offset: 2px;
}

/* Header and primary navigation */
.main-header {
    position: relative;
    z-index: 1050;
    min-height: 64px;
    padding: 0.25rem 0.35rem;
    border-radius: var(--ui-radius-md);
}

.main-header .dashboard-brand-link {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(217, 232, 235, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 20px rgba(20, 64, 74, 0.1);
}

.main-header .dashboard-brand-link:hover {
    border-color: rgba(37, 185, 192, 0.5);
    box-shadow: 0 9px 24px rgba(20, 64, 74, 0.14);
    transform: translateY(-1px);
}

.main-header .brand-image {
    width: min(255px, 100%);
    max-width: 255px;
    height: auto;
    max-height: 38px;
    object-fit: contain;
}

.main-header .dashboard-brand-logo {
    display: block;
    margin: 0;
}

.main-header .timezone-selector {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.main-header .timezone-selector label {
    flex: 0 0 auto;
    white-space: nowrap;
}

.main-header .timezone-selector select {
    flex: 0 0 170px;
    width: 170px;
    min-height: 38px;
}

.main-header .nav-icons {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.main-header .nav-icons:hover {
    background: var(--ui-surface-soft) !important;
    transform: translateY(-1px);
}

.main-header .nav-icons img {
    border: 2px solid var(--ui-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ui-border);
    object-fit: cover;
}

.badge-notification {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    padding: 0.22rem 0.35rem;
    border: 2px solid var(--ui-surface);
    font-size: 0.65rem;
}

.menu {
    position: relative;
    z-index: 1040;
    margin-bottom: 0.85rem;
    overflow: visible;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.menu .navbar-nav {
    position: relative;
    z-index: 1;
    gap: 0.15rem;
    padding: 0.3rem;
}

.menu .dropdown {
    position: relative;
}

.menu .dropdown-menu {
    top: 100%;
    left: 0;
    z-index: 1055;
    min-width: 15rem;
}

.menu .dropdown-hover:hover > .dropdown-menu,
.menu .dropdown-hover:focus-within > .dropdown-menu {
    display: block;
}

.menu .nav-item > a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0.65rem 0.9rem !important;
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.menu .nav-item > a:hover {
    color: var(--ui-primary);
    background: var(--ui-surface-soft);
}

.menu .nav-item > a[style*="text-decoration: underline"] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent));
    box-shadow: 0 5px 14px var(--ui-ring);
}

/* Page hierarchy and content surfaces */
.content-wrapper {
    border-radius: var(--ui-radius-lg);
}

.content-header {
    padding: 1rem 0.5rem 0.75rem;
}

.content-wrapper .content-header h1 {
    color: var(--ui-text);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.card,
.report-header,
.small-box,
.sidebar {
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.card {
    overflow: hidden;
    border-radius: var(--ui-radius-lg) !important;
}

.card > .card-header {
    min-height: 52px;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--ui-border) !important;
}

.card > .card-header.cursorPointer:hover {
    background: var(--ui-surface-soft) !important;
}

.card-title {
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 1.15rem;
}

.chart {
    border: 0 !important;
    border-radius: var(--ui-radius-md);
}

.report-header {
    padding: 0.35rem !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface-raised) !important;
}

/* Dashboard metric cards */
.small-box {
    min-height: 126px;
    overflow: hidden;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface-raised) !important;
}

.small-box::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 76px;
    height: 76px;
    border-radius: 0 0 0 100%;
    background: linear-gradient(135deg, transparent, var(--ui-ring));
    content: "";
    pointer-events: none;
}

.cursorPointer .small-box:hover,
.small-box.cursorPointer:hover {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-shadow-md) !important;
    transform: translateY(-3px);
}

.small-box > .inner {
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.small-box p {
    color: var(--ui-text-muted);
    font-weight: 600;
    line-height: 1.35;
}

.small-box h3,
.dashboard-cards + h3 {
    margin-top: 0.4rem;
    color: var(--ui-primary);
    font-size: clamp(1.65rem, 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

/* Dashboard hierarchy and metrics */
.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding: 0.25rem 0.25rem 0;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ui-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dashboard-welcome h1 {
    margin: 0;
    color: var(--ui-text);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 750;
    letter-spacing: -0.045em;
}

.dashboard-welcome p {
    margin: 0.35rem 0 0;
    color: var(--ui-text-muted);
    font-size: 0.9rem;
}

.dashboard-period-badge {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    box-shadow: var(--ui-shadow-sm);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-period-badge .fa-calendar-alt {
    color: var(--ui-primary);
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.85rem;
}

.dashboard-section-heading > div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dashboard-section-icon,
.chart-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.dashboard-section-icon {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: var(--ui-text);
    font-size: 0.95rem;
    font-weight: 750;
}

.dashboard-section-heading p {
    margin: 0.1rem 0 0;
    color: var(--ui-text-muted);
    font-size: 0.72rem;
}

.dashboard-alert-heading {
    margin-top: 1.1rem;
}

.dashboard-metric-grid {
    row-gap: 0.9rem;
}

.dashboard-metric-card {
    height: 100%;
    min-height: 142px;
    margin-bottom: 0;
    border: 1px solid var(--ui-border) !important;
}

.dashboard-metric-card .inner {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.dashboard-metric-card .metric-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.7rem;
    border-radius: 11px;
    background: var(--metric-soft, var(--ui-surface-soft));
    color: var(--metric-color, var(--ui-primary));
    font-size: 0.95rem;
}

.dashboard-metric-card .dashboard-cards {
    min-height: 38px;
}

.dashboard-metric-card .dashboard-cards p:first-child {
    color: var(--ui-text);
    font-size: 0.79rem;
    font-weight: 750;
    line-height: 1.25;
}

.dashboard-metric-card .dashboard-cards p + p {
    margin-top: 0.16rem !important;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.dashboard-metric-card h3 {
    margin-top: 0.5rem;
    color: var(--metric-color, var(--ui-primary));
    font-size: clamp(1.55rem, 2.3vw, 2rem);
}

.metric-success,
.metric-positive {
    --metric-color: #16836f;
    --metric-soft: rgba(22, 131, 111, 0.12);
}

.metric-info {
    --metric-color: #16749a;
    --metric-soft: rgba(22, 116, 154, 0.12);
}

.metric-warning {
    --metric-color: #c77918;
    --metric-soft: rgba(199, 121, 24, 0.13);
}

.metric-danger {
    --metric-color: #c64f5a;
    --metric-soft: rgba(198, 79, 90, 0.12);
}

.dashboard-toolbar {
    margin-top: 1.35rem !important;
}

.dashboard-toolbar .dashboardFilterSection {
    display: flex;
    align-items: center;
}

.dashboard-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ui-text);
}

.dashboard-toolbar-title > .fas {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.dashboard-toolbar-title strong,
.dashboard-toolbar-title small {
    display: block;
}

.dashboard-toolbar-title strong {
    font-size: 0.82rem;
}

.dashboard-toolbar-title small {
    color: var(--ui-text-muted);
    font-size: 0.68rem;
}

.dashboard-print-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
}

.chart-title-icon {
    width: 30px;
    height: 30px;
    margin-right: 0.55rem;
    font-size: 0.78rem;
}

.chart-title-danger {
    background: rgba(198, 79, 90, 0.12);
    color: #c64f5a;
}

.chart-title-warning {
    background: rgba(199, 121, 24, 0.13);
    color: #c77918;
}

.card > .card-header .card-title {
    display: flex;
    align-items: center;
}

.maintenance-dashboard .dashboard-metric-card .dispensers-dashboard-cards {
    min-height: 36px;
}

.maintenance-dashboard .dashboard-metric-card .dispensers-dashboard-cards p {
    color: var(--ui-text);
    font-size: 0.79rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: left;
}

.maintenance-toolbar-actions {
    gap: 0.55rem;
}

.maintenance-dashboard .card {
    height: calc(100% - 1rem);
    margin-bottom: 1rem;
}

.maintenance-dashboard .chart-body {
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

/* Battery history */
.battery-history-dashboard {
    min-height: 593px !important;
    padding: 1.5rem 1rem 2rem;
}

.battery-history-welcome {
    margin-bottom: 1.15rem;
}

.battery-health-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.battery-health-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.battery-health-item > span {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--battery-soft);
    color: var(--battery-color);
}

.battery-health-item strong,
.battery-health-item small {
    display: block;
}

.battery-health-item strong {
    color: var(--ui-text);
    font-size: 0.8rem;
}

.battery-health-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.68rem;
}

.battery-health-good {
    --battery-color: #16836f;
    --battery-soft: rgba(22, 131, 111, 0.12);
}

.battery-health-low {
    --battery-color: #c77918;
    --battery-soft: rgba(199, 121, 24, 0.13);
}

.battery-health-critical {
    --battery-color: #c64f5a;
    --battery-soft: rgba(198, 79, 90, 0.12);
}

.battery-history-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.battery-history-toolbar-actions {
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    margin-left: auto;
}

.battery-dispenser-select {
    width: 280px;
}

.battery-dispenser-select .select2-container {
    width: 100% !important;
}

.battery-history-chart-card {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.battery-history-chart-card .card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
}

.battery-history-chart-card .chart-body {
    padding: 1.25rem;
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

.battery-history-empty {
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--ui-text-muted);
    text-align: center;
}

.battery-history-empty > span {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border-radius: 15px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 1.1rem;
}

.battery-history-empty strong,
.battery-history-empty small {
    display: block;
}

.battery-history-empty strong {
    color: var(--ui-text);
    font-size: 0.9rem;
}

.battery-history-empty small {
    max-width: 390px;
    margin-top: 0.3rem;
    font-size: 0.72rem;
}

.battery-readings-section {
    margin-top: 1.1rem;
}

.battery-readings-report > .content-wrapper {
    min-height: 0 !important;
    padding: 0;
    background: transparent !important;
}

.battery-readings-report > .content-wrapper > .content {
    padding-bottom: 0;
}

.battery-readings-report .report-header {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.battery-readings-report #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.battery-readings-report #records_wrapper {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.battery-readings-report #records_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.battery-readings-report #records_wrapper > .bottom {
    padding: 0.9rem;
}

/* Dispenser activity dashboard */
.dispenser-activity-dashboard .dispensers-dashboard-cards small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.activity-dashboard-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.activity-toolbar-actions {
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    margin-left: auto;
}

.activity-organization-select {
    width: 280px;
}

.activity-organization-select .select2-container {
    width: 100% !important;
}

.activity-chart-grid {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.activity-chart-grid > div {
    display: flex;
}

.activity-chart-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}

.activity-chart-card:hover {
    border-color: rgba(10, 111, 122, 0.28);
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
}

.activity-chart-card .card-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
}

.activity-chart-card .card-title {
    line-height: 1.35;
}

.activity-chart-card .chart-body {
    padding: 1.1rem;
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

.chart-title-info {
    background: rgba(22, 116, 154, 0.12);
    color: #16749a;
}

.activity-chart-card [id$="NoData"] {
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

.activity-details-section {
    margin-top: 1.1rem;
}

.activity-details-report > .content-wrapper {
    min-height: 0 !important;
    padding: 0;
    background: transparent !important;
}

.activity-details-report > .content-wrapper > .content {
    padding-bottom: 0;
}

.activity-details-report .report-header {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.activity-details-report #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.activity-details-report #records_wrapper {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.activity-details-report #records_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.activity-details-report #records_wrapper > .bottom {
    padding: 0.9rem;
}

/* Dispenser activity history report */
.activity-history-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.activity-history-welcome {
    margin-bottom: 1.15rem;
}

.activity-history-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.activity-history-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.activity-history-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--activity-history-soft);
    color: var(--activity-history-color);
}

.activity-history-legend-item strong,
.activity-history-legend-item small {
    display: block;
}

.activity-history-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.activity-history-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.activity-history-sanitizer {
    --activity-history-color: #16836f;
    --activity-history-soft: rgba(22, 131, 111, 0.12);
}

.activity-history-soap {
    --activity-history-color: #16749a;
    --activity-history-soft: rgba(22, 116, 154, 0.12);
}

.activity-history-registered {
    --activity-history-color: #0a6f7a;
    --activity-history-soft: rgba(10, 111, 122, 0.12);
}

.activity-history-unregistered {
    --activity-history-color: #c77918;
    --activity-history-soft: rgba(199, 121, 24, 0.13);
}

.activity-history-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.activity-history-toolbar #export {
    margin-top: 0.7rem;
}

.activity-history-toolbar #exportText {
    margin-top: 0.35rem;
}

.activity-history-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.activity-history-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.activity-history-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.activity-history-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.activity-history-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.activity-history-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.activity-history-page #records tbody td:first-child a,
.activity-history-page #records tbody td:nth-child(2) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.activity-history-page #records tbody tr {
    transition: background-color 150ms ease;
}

.activity-history-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Tag history report */
.tag-history-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.tag-history-welcome {
    margin-bottom: 1.15rem;
}

.tag-history-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.tag-history-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-history-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--tag-history-soft);
    color: var(--tag-history-color);
}

.tag-history-legend-item strong,
.tag-history-legend-item small {
    display: block;
}

.tag-history-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.tag-history-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.tag-history-entry,
.tag-history-tag {
    --tag-history-color: #16749a;
    --tag-history-soft: rgba(22, 116, 154, 0.12);
}

.tag-history-exit,
.tag-history-location {
    --tag-history-color: #7656a8;
    --tag-history-soft: rgba(118, 86, 168, 0.12);
}

.tag-history-sanitized,
.tag-history-user {
    --tag-history-color: #16836f;
    --tag-history-soft: rgba(22, 131, 111, 0.12);
}

.tag-history-compliance {
    --tag-history-color: #c77918;
    --tag-history-soft: rgba(199, 121, 24, 0.13);
}

.tag-history-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.tag-history-toolbar #export {
    margin-top: 0.7rem;
}

.tag-history-toolbar #exportText {
    margin-top: 0.35rem;
}

.tag-history-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.tag-history-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-history-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-history-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.tag-history-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.tag-history-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.tag-history-page #records tbody td:first-child a,
.tag-history-page #records tbody td:nth-child(6) a,
.tag-history-page #records tbody td:nth-child(7) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.tag-history-page #records tbody tr {
    transition: background-color 150ms ease;
}

.tag-history-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Unresponsive users report */
.unresponsive-users-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.unresponsive-users-welcome {
    margin-bottom: 1.15rem;
}

.unresponsive-period-badge {
    border-color: rgba(198, 79, 90, 0.2);
    background: rgba(198, 79, 90, 0.08);
    color: #a83f4a;
}

.unresponsive-users-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.unresponsive-users-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unresponsive-users-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--unresponsive-users-soft);
    color: var(--unresponsive-users-color);
}

.unresponsive-users-legend-item strong,
.unresponsive-users-legend-item small {
    display: block;
}

.unresponsive-users-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.unresponsive-users-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.unresponsive-users-inactive {
    --unresponsive-users-color: #c64f5a;
    --unresponsive-users-soft: rgba(198, 79, 90, 0.12);
}

.unresponsive-users-accounts {
    --unresponsive-users-color: #16836f;
    --unresponsive-users-soft: rgba(22, 131, 111, 0.12);
}

.unresponsive-users-context {
    --unresponsive-users-color: #16749a;
    --unresponsive-users-soft: rgba(22, 116, 154, 0.12);
}

.unresponsive-users-followup {
    --unresponsive-users-color: #c77918;
    --unresponsive-users-soft: rgba(199, 121, 24, 0.13);
}

.unresponsive-users-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.unresponsive-users-toolbar #export {
    margin-top: 0.7rem;
}

.unresponsive-users-toolbar #exportText {
    margin-top: 0.35rem;
}

.unresponsive-users-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.unresponsive-users-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unresponsive-users-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unresponsive-users-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.unresponsive-users-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.unresponsive-users-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.unresponsive-users-page #records tbody td:first-child a,
.unresponsive-users-page #records tbody td:nth-child(5) a,
.unresponsive-users-page #records tbody td:nth-child(6) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.unresponsive-users-page #records tbody tr {
    transition: background-color 150ms ease;
}

.unresponsive-users-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Unassigned tags report */
.unassigned-tags-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.unassigned-tags-welcome {
    margin-bottom: 1.15rem;
}

.unassigned-tags-period-badge {
    border-color: rgba(199, 121, 24, 0.22);
    background: rgba(199, 121, 24, 0.09);
    color: #a86412;
}

.unassigned-tags-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.unassigned-tags-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unassigned-tags-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--unassigned-tags-soft);
    color: var(--unassigned-tags-color);
}

.unassigned-tags-legend-item strong,
.unassigned-tags-legend-item small {
    display: block;
}

.unassigned-tags-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.unassigned-tags-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.unassigned-tags-active {
    --unassigned-tags-color: #16836f;
    --unassigned-tags-soft: rgba(22, 131, 111, 0.12);
}

.unassigned-tags-user {
    --unassigned-tags-color: #c64f5a;
    --unassigned-tags-soft: rgba(198, 79, 90, 0.12);
}

.unassigned-tags-events {
    --unassigned-tags-color: #c77918;
    --unassigned-tags-soft: rgba(199, 121, 24, 0.13);
}

.unassigned-tags-organization {
    --unassigned-tags-color: #16749a;
    --unassigned-tags-soft: rgba(22, 116, 154, 0.12);
}

.unassigned-tags-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.unassigned-tags-toolbar #export {
    margin-top: 0.7rem;
}

.unassigned-tags-toolbar #exportText {
    margin-top: 0.35rem;
}

.unassigned-tags-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.unassigned-tags-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unassigned-tags-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.unassigned-tags-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.unassigned-tags-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.unassigned-tags-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.unassigned-tags-page #records tbody td:first-child {
    color: var(--ui-primary);
    font-weight: 800;
}

.unassigned-tags-page #records tbody td:last-child {
    color: #a86412;
    font-weight: 800;
}

.unassigned-tags-page #records tbody tr {
    transition: background-color 150ms ease;
}

.unassigned-tags-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* User entry report */
.user-entry-report-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.user-entry-report-welcome {
    margin-bottom: 1.15rem;
}

.user-entry-report-badge {
    border-color: rgba(22, 131, 111, 0.22);
    background: rgba(22, 131, 111, 0.09);
    color: #126e5e;
}

.user-entry-report-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.user-entry-report-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-entry-report-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--user-entry-soft);
    color: var(--user-entry-color);
}

.user-entry-report-legend-item strong,
.user-entry-report-legend-item small {
    display: block;
}

.user-entry-report-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.user-entry-report-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.user-entry-report-event {
    --user-entry-color: #16836f;
    --user-entry-soft: rgba(22, 131, 111, 0.12);
}

.user-entry-report-user {
    --user-entry-color: #16749a;
    --user-entry-soft: rgba(22, 116, 154, 0.12);
}

.user-entry-report-tag {
    --user-entry-color: #7656a8;
    --user-entry-soft: rgba(118, 86, 168, 0.12);
}

.user-entry-report-location {
    --user-entry-color: #c77918;
    --user-entry-soft: rgba(199, 121, 24, 0.13);
}

.user-entry-report-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.user-entry-report-toolbar #export {
    margin-top: 0.7rem;
}

.user-entry-report-toolbar #exportText {
    margin-top: 0.35rem;
}

.user-entry-report-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.user-entry-report-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-entry-report-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-entry-report-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.user-entry-report-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.user-entry-report-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.user-entry-report-page #records tbody td:first-child {
    color: var(--ui-text-muted);
    font-weight: 650;
    white-space: nowrap;
}

.user-entry-report-page #records tbody td:nth-child(2) a,
.user-entry-report-page #records tbody td:nth-child(3) a,
.user-entry-report-page #records tbody td:nth-child(4) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.user-entry-report-page #records tbody tr {
    transition: background-color 150ms ease;
}

.user-entry-report-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Dispenser management */
.dispenser-management-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.dispenser-management-welcome {
    margin-bottom: 1.15rem;
}

.dispenser-management-badge {
    border-color: rgba(10, 111, 122, 0.22);
    background: rgba(10, 111, 122, 0.09);
    color: var(--ui-primary);
}

.dispenser-management-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dispenser-management-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-management-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--dispenser-guide-soft);
    color: var(--dispenser-guide-color);
}

.dispenser-management-guide-item strong,
.dispenser-management-guide-item small {
    display: block;
}

.dispenser-management-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.dispenser-management-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.dispenser-guide-connectivity {
    --dispenser-guide-color: #16749a;
    --dispenser-guide-soft: rgba(22, 116, 154, 0.12);
}

.dispenser-guide-supplies {
    --dispenser-guide-color: #16836f;
    --dispenser-guide-soft: rgba(22, 131, 111, 0.12);
}

.dispenser-guide-location {
    --dispenser-guide-color: #7656a8;
    --dispenser-guide-soft: rgba(118, 86, 168, 0.12);
}

.dispenser-guide-updates {
    --dispenser-guide-color: #c77918;
    --dispenser-guide-soft: rgba(199, 121, 24, 0.13);
}

.dispenser-management-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.dispenser-management-toolbar #export {
    margin-top: 0.7rem;
}

.dispenser-management-toolbar #exportText {
    margin-top: 0.35rem;
}

.dispenser-management-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dispenser-management-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.dispenser-management-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.dispenser-management-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-management-page #bulk_action_section {
    align-items: flex-start;
    margin-bottom: 1rem !important;
    padding: 0.85rem;
    border: 1px solid rgba(10, 111, 122, 0.22);
    border-radius: var(--ui-radius-md);
    background: var(--ui-ring);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-health-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 0.9rem 0.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-soft);
}

.dispenser-health-legend-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.dispenser-health-legend-title > span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-ring);
    color: var(--ui-primary);
    font-size: 0.72rem;
}

.dispenser-health-legend-title strong,
.dispenser-health-legend-title small,
.dispenser-health-legend-item strong,
.dispenser-health-legend-item small {
    display: block;
}

.dispenser-health-legend-title strong {
    color: var(--ui-text);
    font-size: 0.74rem;
}

.dispenser-health-legend-title small {
    margin-top: 0.08rem;
    color: var(--ui-text-muted);
    font-size: 0.61rem;
}

.dispenser-health-legend-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.dispenser-health-legend-item {
    display: inline-flex;
    min-width: 92px;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.58rem;
    border: 1px solid var(--health-border);
    border-radius: 10px;
    background: var(--health-soft);
}

.dispenser-health-legend-item > i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--health-color);
    box-shadow: 0 0 0 3px var(--health-ring);
}

.dispenser-health-legend-item strong {
    color: var(--health-color);
    font-size: 0.68rem;
    line-height: 1.1;
}

.dispenser-health-legend-item small {
    margin-top: 0.08rem;
    color: var(--ui-text-muted);
    font-size: 0.55rem;
    line-height: 1;
}

.dispenser-health-strong {
    --health-color: #16836f;
    --health-soft: rgba(22, 131, 111, 0.08);
    --health-border: rgba(22, 131, 111, 0.2);
    --health-ring: rgba(22, 131, 111, 0.12);
}

.dispenser-health-weak {
    --health-color: #b87517;
    --health-soft: rgba(199, 121, 24, 0.08);
    --health-border: rgba(199, 121, 24, 0.22);
    --health-ring: rgba(199, 121, 24, 0.13);
}

.dispenser-health-critical {
    --health-color: #c64f5a;
    --health-soft: rgba(198, 79, 90, 0.08);
    --health-border: rgba(198, 79, 90, 0.2);
    --health-ring: rgba(198, 79, 90, 0.12);
}

.dispenser-management-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-management-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.dispenser-management-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.dispenser-management-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.dispenser-management-page #records tbody td:nth-child(2) a,
.dispenser-management-page #records tbody td:nth-child(10) a,
.dispenser-management-page #records tbody td:nth-child(11) a,
.dispenser-management-page #records tbody td:nth-child(12) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.dispenser-management-page #records tbody tr {
    transition: background-color 150ms ease;
}

.dispenser-management-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

.dispenser-management-page #listIdAll,
.dispenser-management-page [id^="listIds"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ui-primary);
}

.dispenser-upload-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.dispenser-upload-modal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

.dispenser-upload-modal .modal-body {
    padding: 1.25rem;
}

/* Dispenser groups */
.dispenser-group-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.dispenser-group-welcome {
    margin-bottom: 1.15rem;
}

.dispenser-group-badge {
    border-color: rgba(118, 86, 168, 0.22);
    background: rgba(118, 86, 168, 0.09);
    color: #684894;
}

.dispenser-group-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dispenser-group-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-group-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--group-guide-soft);
    color: var(--group-guide-color);
}

.dispenser-group-guide-item strong,
.dispenser-group-guide-item small {
    display: block;
}

.dispenser-group-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.dispenser-group-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.dispenser-group-location {
    --group-guide-color: #7656a8;
    --group-guide-soft: rgba(118, 86, 168, 0.12);
}

.dispenser-group-organization {
    --group-guide-color: #16749a;
    --group-guide-soft: rgba(22, 116, 154, 0.12);
}

.dispenser-group-compliance {
    --group-guide-color: #16836f;
    --group-guide-soft: rgba(22, 131, 111, 0.12);
}

.dispenser-group-bulk {
    --group-guide-color: #c77918;
    --group-guide-soft: rgba(199, 121, 24, 0.13);
}

.dispenser-group-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.dispenser-group-toolbar #export {
    margin-top: 0.7rem;
}

.dispenser-group-toolbar #exportText {
    margin-top: 0.35rem;
}

.dispenser-group-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dispenser-group-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.dispenser-group-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.dispenser-group-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-group-page #bulk_action_section {
    margin-bottom: 1rem !important;
    padding: 0.85rem;
    border: 1px solid rgba(118, 86, 168, 0.22);
    border-radius: var(--ui-radius-md);
    background: rgba(118, 86, 168, 0.07);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-group-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.dispenser-group-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.dispenser-group-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.dispenser-group-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.dispenser-group-page #records tbody td:nth-child(2) a,
.dispenser-group-page #records tbody td:nth-child(4) a {
    color: var(--ui-primary);
    font-weight: 750;
}

.dispenser-group-page #records tbody tr {
    transition: background-color 150ms ease;
}

.dispenser-group-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

.dispenser-group-page #listIdAll,
.dispenser-group-page [id^="listIds"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ui-primary);
}

.dispenser-group-upload-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.dispenser-group-upload-modal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

/* Tag management */
.tag-management-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.tag-management-welcome {
    margin-bottom: 1.15rem;
}

.tag-management-badge {
    border-color: rgba(22, 116, 154, 0.22);
    background: rgba(22, 116, 154, 0.09);
    color: #126887;
}

.tag-management-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.tag-management-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-management-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--tag-guide-soft);
    color: var(--tag-guide-color);
}

.tag-management-guide-item strong,
.tag-management-guide-item small {
    display: block;
}

.tag-management-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.tag-management-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.tag-guide-identity {
    --tag-guide-color: #16749a;
    --tag-guide-soft: rgba(22, 116, 154, 0.12);
}

.tag-guide-user {
    --tag-guide-color: #16836f;
    --tag-guide-soft: rgba(22, 131, 111, 0.12);
}

.tag-guide-organization {
    --tag-guide-color: #7656a8;
    --tag-guide-soft: rgba(118, 86, 168, 0.12);
}

.tag-guide-status {
    --tag-guide-color: #c77918;
    --tag-guide-soft: rgba(199, 121, 24, 0.13);
}

.tag-management-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.tag-management-toolbar #export {
    margin-top: 0.7rem;
}

.tag-management-toolbar #exportText {
    margin-top: 0.35rem;
}

.tag-management-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-management-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.tag-management-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.tag-management-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-management-page #bulk_action_section {
    margin-bottom: 1rem !important;
    padding: 0.85rem;
    border: 1px solid rgba(22, 116, 154, 0.22);
    border-radius: var(--ui-radius-md);
    background: rgba(22, 116, 154, 0.07);
    box-shadow: var(--ui-shadow-sm);
}

.tag-management-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.tag-management-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.tag-management-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.tag-management-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.tag-management-page #records tbody td a {
    color: var(--ui-primary);
    font-weight: 750;
}

.tag-management-page #records tbody tr {
    transition: background-color 150ms ease;
}

.tag-management-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

.tag-management-page #listIdAll,
.tag-management-page [id^="listIds"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ui-primary);
}

.tag-management-upload-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.tag-management-upload-modal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

/* User management */
.user-management-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.user-management-welcome {
    margin-bottom: 1.15rem;
}

.user-management-badge {
    border-color: rgba(10, 111, 122, 0.22);
    background: rgba(10, 111, 122, 0.09);
    color: var(--ui-primary);
}

.user-management-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.user-management-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-management-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--user-guide-soft);
    color: var(--user-guide-color);
}

.user-management-guide-item strong,
.user-management-guide-item small {
    display: block;
}

.user-management-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.user-management-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.user-guide-identity {
    --user-guide-color: #16749a;
    --user-guide-soft: rgba(22, 116, 154, 0.12);
}

.user-guide-access {
    --user-guide-color: #7656a8;
    --user-guide-soft: rgba(118, 86, 168, 0.12);
}

.user-guide-tag {
    --user-guide-color: #16836f;
    --user-guide-soft: rgba(22, 131, 111, 0.12);
}

.user-guide-account {
    --user-guide-color: #c77918;
    --user-guide-soft: rgba(199, 121, 24, 0.13);
}

.user-management-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.user-management-toolbar #export {
    margin-top: 0.7rem;
}

.user-management-toolbar #exportText {
    margin-top: 0.35rem;
}

.user-management-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-management-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.user-management-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.user-management-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-management-page #bulk_action_section {
    margin-bottom: 1rem !important;
    padding: 0.85rem;
    border: 1px solid rgba(10, 111, 122, 0.22);
    border-radius: var(--ui-radius-md);
    background: var(--ui-ring);
    box-shadow: var(--ui-shadow-sm);
}

.user-management-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-management-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.user-management-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.user-management-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.user-management-page #records tbody td a {
    color: var(--ui-primary);
    font-weight: 750;
}

.user-management-page #records tbody tr {
    transition: background-color 150ms ease;
}

.user-management-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

.user-management-page #listIdAll,
.user-management-page [id^="listIds"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ui-primary);
}

.user-management-upload-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.user-management-upload-modal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

/* Wi-Fi settings */
.wifi-settings-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.wifi-settings-welcome {
    margin-bottom: 1.15rem;
}

.wifi-settings-badge {
    border-color: rgba(22, 116, 154, 0.22);
    background: rgba(22, 116, 154, 0.09);
    color: #126887;
}

.wifi-settings-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.wifi-settings-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.wifi-settings-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--wifi-guide-soft);
    color: var(--wifi-guide-color);
}

.wifi-settings-guide-item strong,
.wifi-settings-guide-item small {
    display: block;
}

.wifi-settings-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.wifi-settings-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.wifi-guide-network {
    --wifi-guide-color: #16749a;
    --wifi-guide-soft: rgba(22, 116, 154, 0.12);
}

.wifi-guide-security {
    --wifi-guide-color: #16836f;
    --wifi-guide-soft: rgba(22, 131, 111, 0.12);
}

.wifi-guide-encryption {
    --wifi-guide-color: #7656a8;
    --wifi-guide-soft: rgba(118, 86, 168, 0.12);
}

.wifi-guide-organization {
    --wifi-guide-color: #c77918;
    --wifi-guide-soft: rgba(199, 121, 24, 0.13);
}

.wifi-settings-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.wifi-settings-toolbar #export {
    margin-top: 0.7rem;
}

.wifi-settings-toolbar #exportText {
    margin-top: 0.35rem;
}

.wifi-settings-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wifi-settings-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.wifi-settings-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.wifi-settings-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.wifi-settings-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.wifi-settings-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.wifi-settings-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.wifi-settings-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.wifi-settings-page #records tbody td:first-child a {
    color: var(--ui-primary);
    font-weight: 800;
}

.wifi-settings-page #records tbody tr {
    transition: background-color 150ms ease;
}

.wifi-settings-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Role management */
.role-management-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.role-management-welcome {
    margin-bottom: 1.15rem;
}

.role-management-badge {
    border-color: rgba(118, 86, 168, 0.22);
    background: rgba(118, 86, 168, 0.09);
    color: #684894;
}

.role-management-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.role-management-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.role-management-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--role-guide-soft);
    color: var(--role-guide-color);
}

.role-management-guide-item strong,
.role-management-guide-item small {
    display: block;
}

.role-management-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.role-management-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.role-guide-identity {
    --role-guide-color: #7656a8;
    --role-guide-soft: rgba(118, 86, 168, 0.12);
}

.role-guide-access {
    --role-guide-color: #c77918;
    --role-guide-soft: rgba(199, 121, 24, 0.13);
}

.role-guide-users {
    --role-guide-color: #16749a;
    --role-guide-soft: rgba(22, 116, 154, 0.12);
}

.role-guide-governance {
    --role-guide-color: #16836f;
    --role-guide-soft: rgba(22, 131, 111, 0.12);
}

.role-management-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.role-management-toolbar #export {
    margin-top: 0.7rem;
}

.role-management-toolbar #exportText {
    margin-top: 0.35rem;
}

.role-management-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.role-management-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.role-management-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.role-management-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.role-management-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.role-management-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.role-management-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.role-management-page #records tbody td:first-child a {
    color: var(--ui-primary);
    font-weight: 800;
}

.role-management-page #records tbody tr {
    transition: background-color 150ms ease;
}

.role-management-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Permission management */
.permission-management-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.permission-management-welcome {
    margin-bottom: 1.15rem;
}

.permission-management-badge {
    border-color: rgba(199, 121, 24, 0.22);
    background: rgba(199, 121, 24, 0.09);
    color: #a86412;
}

.permission-management-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.permission-management-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.permission-management-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--permission-guide-soft);
    color: var(--permission-guide-color);
}

.permission-management-guide-item strong,
.permission-management-guide-item small {
    display: block;
}

.permission-management-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.permission-management-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.permission-guide-read {
    --permission-guide-color: #16749a;
    --permission-guide-soft: rgba(22, 116, 154, 0.12);
}

.permission-guide-create {
    --permission-guide-color: #16836f;
    --permission-guide-soft: rgba(22, 131, 111, 0.12);
}

.permission-guide-update {
    --permission-guide-color: #c77918;
    --permission-guide-soft: rgba(199, 121, 24, 0.13);
}

.permission-guide-delete {
    --permission-guide-color: #c64f5a;
    --permission-guide-soft: rgba(198, 79, 90, 0.12);
}

.permission-management-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.permission-management-toolbar #export {
    margin-top: 0.7rem;
}

.permission-management-toolbar #exportText {
    margin-top: 0.35rem;
}

.permission-management-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.permission-management-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.permission-management-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.permission-management-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.permission-management-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.permission-management-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.permission-management-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.permission-management-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.permission-management-page #records tbody td:first-child a {
    color: var(--ui-primary);
    font-weight: 800;
}

.permission-management-page #records tbody td:nth-child(3) {
    font-weight: 800;
}

.permission-management-page #records tbody tr {
    transition: background-color 150ms ease;
}

.permission-management-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Shared utility administration pages */
.utility-admin-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.utility-admin-welcome {
    margin-bottom: 1.15rem;
}

.utility-admin-badge {
    border-color: rgba(10, 111, 122, 0.2);
    background: rgba(10, 111, 122, 0.08);
    color: var(--ui-primary);
}

.utility-admin-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.utility-admin-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.utility-admin-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--utility-soft);
    color: var(--utility-color);
}

.utility-admin-guide-item strong,
.utility-admin-guide-item small {
    display: block;
}

.utility-admin-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.utility-admin-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.utility-tone-primary {
    --utility-color: #16749a;
    --utility-soft: rgba(22, 116, 154, 0.12);
}

.utility-tone-success {
    --utility-color: #16836f;
    --utility-soft: rgba(22, 131, 111, 0.12);
}

.utility-tone-purple {
    --utility-color: #7656a8;
    --utility-soft: rgba(118, 86, 168, 0.12);
}

.utility-tone-warning {
    --utility-color: #c77918;
    --utility-soft: rgba(199, 121, 24, 0.13);
}

.utility-admin-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.utility-admin-toolbar #export {
    margin-top: 0.7rem;
}

.utility-admin-toolbar #exportText {
    margin-top: 0.35rem;
}

.utility-admin-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.utility-admin-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.utility-admin-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.utility-admin-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.utility-admin-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.utility-admin-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.utility-admin-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.utility-admin-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.utility-admin-page #records tbody td:first-child a {
    color: var(--ui-primary);
    font-weight: 800;
}

.utility-admin-page #records tbody tr {
    transition: background-color 150ms ease;
}

.utility-admin-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

.dispenser-history-admin #records tbody td:nth-child(5) {
    font-weight: 800;
}

.tag-activity-admin #records tbody td:nth-child(7),
.tag-activity-admin #records tbody td:nth-child(9),
.dispenser-history-admin #records tbody td:last-child {
    white-space: nowrap;
}

/* Shared catalog and configuration pages */
.catalog-admin-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.catalog-admin-welcome {
    margin-bottom: 1.15rem;
}

.catalog-admin-badge {
    border-color: rgba(10, 111, 122, 0.2);
    background: rgba(10, 111, 122, 0.08);
    color: var(--ui-primary);
}

.catalog-admin-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.catalog-admin-guide-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.catalog-admin-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--catalog-soft);
    color: var(--catalog-color);
}

.catalog-admin-guide-item strong,
.catalog-admin-guide-item small {
    display: block;
}

.catalog-admin-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.catalog-admin-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.catalog-tone-primary { --catalog-color:#16749a; --catalog-soft:rgba(22,116,154,.12); }
.catalog-tone-success { --catalog-color:#16836f; --catalog-soft:rgba(22,131,111,.12); }
.catalog-tone-purple { --catalog-color:#7656a8; --catalog-soft:rgba(118,86,168,.12); }
.catalog-tone-warning { --catalog-color:#c77918; --catalog-soft:rgba(199,121,24,.13); }

.catalog-admin-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.catalog-admin-toolbar #export { margin-top: 0.7rem; }
.catalog-admin-toolbar #exportText { margin-top: 0.35rem; }

.catalog-admin-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.catalog-admin-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
    font-size: 0.75rem;
    font-weight: 750;
}

.catalog-admin-action:hover {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong);
}

.catalog-admin-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.catalog-admin-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.catalog-admin-table-shell .dataTables_wrapper > .top { padding: 0.9rem 0.9rem 0; }
.catalog-admin-table-shell .dataTables_wrapper > .bottom { padding: 0.9rem; }
.catalog-admin-page .dataTables_scroll { border-width: 1px 0; border-radius: 0; }
.catalog-admin-page #records tbody td a { color: var(--ui-primary); font-weight: 750; }
.catalog-admin-page #records tbody tr { transition: background-color 150ms ease; }
.catalog-admin-page #records tbody tr:hover { background: var(--ui-surface-soft); }

.department-admin-page .content-header,
.api-log-page .content-header { padding: 1.5rem 1rem 0.9rem; }
.department-admin-welcome,
.api-log-welcome { margin-bottom: 1.15rem; }
.department-admin-badge,
.api-log-badge { border-color:rgba(22,116,154,.22); background:rgba(22,116,154,.09); color:#126887; }
.department-admin-guide,
.api-log-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.department-admin-guide > div,
.api-log-guide > div { display:flex; min-height:76px; align-items:center; gap:.7rem; padding:.85rem; border:1px solid var(--ui-border); border-radius:var(--ui-radius-md); background:var(--ui-surface-raised); box-shadow:var(--ui-shadow-sm); }
.department-admin-guide span,
.api-log-guide span { display:inline-flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center; border-radius:11px; background:var(--ui-surface-soft); color:var(--ui-primary); }
.department-admin-guide strong,.department-admin-guide small,
.api-log-guide strong,.api-log-guide small { display:block; }
.department-admin-guide strong,.api-log-guide strong { color:var(--ui-text); font-size:.79rem; }
.department-admin-guide small,.api-log-guide small { margin-top:.12rem; color:var(--ui-text-muted); font-size:.67rem; }
.department-admin-toolbar,.api-log-toolbar { align-items:center; margin-bottom:1rem!important; padding:.75rem!important; }
.department-admin-toolbar #export,.api-log-toolbar #export { margin-top:.7rem; }
.department-admin-toolbar .dt-buttons,.api-log-toolbar .dt-buttons { display:flex!important; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; }
.department-admin-page #filterForm,.api-log-page #filterForm { margin-bottom:1rem; padding:1rem; border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); background:var(--ui-surface-raised); box-shadow:var(--ui-shadow-sm); }
.department-upload-modal .modal-content { overflow:hidden; border:0; border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-md); }
.api-log-action { display:inline-flex; min-height:40px; align-items:center; border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm); background:var(--ui-surface-raised); color:var(--ui-primary); font-size:.75rem; font-weight:750; }
.api-log-table-shell { overflow:hidden; border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); background:var(--ui-surface-raised); box-shadow:var(--ui-shadow-sm); }
.api-log-table-shell .dataTables_wrapper > .top { padding:.9rem .9rem 0; }
.api-log-table-shell .dataTables_wrapper > .bottom { padding:.9rem; }
.api-log-page .dataTables_scroll { border-width:1px 0; border-radius:0; }

/* User profile */
.user-profile-container {
    padding: 1.5rem 1rem 2rem;
}

.user-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background:
        radial-gradient(circle at top right, rgba(10, 111, 122, 0.12), transparent 34%),
        var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-md);
}

.user-profile-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.user-profile-avatar.profilepic {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    margin: 0;
    border: 4px solid var(--ui-surface-raised);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(20, 64, 74, 0.17);
}

.user-profile-avatar .profilepic__image,
.user-profile-avatar .profilepic__image img,
.user-profile-avatar .profilepic__content {
    border-radius: 50%;
}

.user-profile-avatar .profilepic__image img {
    object-fit: cover;
}

.user-profile-avatar .profilepic__content {
    gap: 0.75rem;
}

.user-profile-avatar .profilepic__icon,
.user-profile-avatar .profilepic__text {
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
}

.user-profile-heading {
    min-width: 0;
}

.user-profile-heading h1,
.user-profile-heading p {
    margin: 0;
}

.user-profile-heading h1 {
    color: var(--ui-text);
    font-size: 1.55rem;
    font-weight: 800;
}

.user-profile-heading p {
    margin-top: 0.2rem;
    color: var(--ui-text-muted);
    font-size: 0.78rem;
}

.user-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-top: 0.65rem;
}

.user-profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ui-text-muted);
    font-size: 0.69rem;
}

.user-profile-meta i {
    color: var(--ui-primary);
}

.user-profile-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
}

.user-profile-primary-action,
.user-profile-secondary-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--ui-radius-sm);
    font-size: 0.72rem;
    font-weight: 750;
}

.user-profile-primary-action {
    border: 1px solid var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
}

.user-profile-primary-action:hover {
    color: #fff;
    background: var(--ui-primary-strong);
}

.user-profile-secondary-action {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-primary);
}

.user-profile-secondary-action:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary-strong);
}

.user-profile-view-only {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-soft);
    color: var(--ui-text-muted);
    font-size: 0.7rem;
}

.user-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.user-profile-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ui-border);
}

.user-profile-card-header > span {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.user-profile-card-header h2,
.user-profile-card-header p {
    margin: 0;
}

.user-profile-card-header h2 {
    color: var(--ui-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.user-profile-card-header p {
    margin-top: 0.08rem;
    color: var(--ui-text-muted);
    font-size: 0.62rem;
}

.user-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.user-profile-detail {
    min-width: 0;
    padding: 0.7rem;
    border-radius: 10px;
    background: var(--ui-surface-soft);
}

.user-profile-detail-wide {
    grid-column: 1 / -1;
}

.user-profile-detail span,
.user-profile-detail strong {
    display: block;
}

.user-profile-detail span {
    margin-bottom: 0.2rem;
    color: var(--ui-text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-profile-detail strong {
    overflow-wrap: anywhere;
    color: var(--ui-text);
    font-size: 0.72rem;
}

.user-profile-notifications {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-profile-notifications > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.65rem;
    border: 1px solid rgba(22, 131, 111, 0.18);
    border-radius: 999px;
    background: rgba(22, 131, 111, 0.08);
    color: #126e5e;
    font-size: 0.66rem;
    font-weight: 700;
}

.user-profile-empty-state {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 58px;
    border: 1px dashed var(--ui-border);
    border-radius: 10px;
    color: var(--ui-text-muted);
    font-size: 0.68rem;
}

.user-profile-security-message {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    border-radius: 10px;
    background: rgba(22, 131, 111, 0.08);
    color: #16836f;
}

.user-profile-security-message > i {
    font-size: 1rem;
}

.user-profile-security-message strong,
.user-profile-security-message small {
    display: block;
}

.user-profile-security-message strong {
    font-size: 0.7rem;
}

.user-profile-security-message small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.61rem;
}

.user-profile-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.user-profile-modal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

.user-profile-edit-modal .modal-dialog {
    max-width: 680px;
}

.user-profile-edit-modal .modal-body {
    padding: 0;
}

.user-profile-edit-modal .modal-body > div > .content {
    padding: 0;
}

.user-profile-edit-modal .modal-body .card {
    margin: 0;
    border: 0;
    box-shadow: none;
}

/* Dispenser activity rollup */
.dispenser-rollup-dashboard {
    padding: 1.5rem 1rem 2rem;
}

.rollup-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rollup-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.rollup-legend-item > span {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--rollup-soft);
    color: var(--rollup-color);
}

.rollup-legend-item strong,
.rollup-legend-item small {
    display: block;
}

.rollup-legend-item strong {
    color: var(--ui-text);
    font-size: 0.8rem;
}

.rollup-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.68rem;
}

.rollup-sanitizer {
    --rollup-color: #16836f;
    --rollup-soft: rgba(22, 131, 111, 0.12);
}

.rollup-soap {
    --rollup-color: #16749a;
    --rollup-soft: rgba(22, 116, 154, 0.12);
}

.rollup-total {
    --rollup-color: #c77918;
    --rollup-soft: rgba(199, 121, 24, 0.13);
}

.rollup-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.rollup-toolbar-actions {
    align-items: center;
    gap: 0.55rem;
    margin-right: 0;
    margin-left: auto;
}

.rollup-filter {
    width: 230px;
}

.rollup-filter .select2-container {
    width: 100% !important;
}

.rollup-download-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(22, 131, 111, 0.28);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: #16836f !important;
    font-size: 0.78rem;
    font-weight: 750;
    box-shadow: var(--ui-shadow-sm);
}

.rollup-download-btn:hover,
.rollup-download-btn:focus {
    border-color: #16836f;
    background: rgba(22, 131, 111, 0.11);
    color: #116b5c !important;
    box-shadow: 0 5px 14px rgba(22, 131, 111, 0.15);
    transform: translateY(-1px);
}

.rollup-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-md);
}

.rollup-table-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
    color: var(--ui-text-muted);
    font-size: 0.7rem;
}

.rollup-table-note > span:first-child {
    color: var(--ui-primary);
}

.rollup-table-shell .dispenser-activity-report {
    max-height: 650px;
    border: 0;
}

.rollup-table-shell .dispenser-activity-report th,
.rollup-table-shell .dispenser-activity-report td {
    padding: 0.65rem 0.55rem;
    border-color: var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.72rem;
}

.rollup-table-shell .dispenser-activity-report thead th,
.rollup-table-shell .dispenser-activity-report thead td {
    background: var(--ui-surface-soft);
    color: var(--ui-text);
    font-weight: 750;
}

.rollup-table-shell .dispenser-activity-report tbody tr:hover td {
    background: rgba(10, 111, 122, 0.055);
}

.rollup-table-shell .dispenser-activity-report tbody tr.font-weight-bold td {
    background: rgba(10, 111, 122, 0.09);
    color: var(--ui-primary-strong);
}

.rollup-table-shell .dispenser-activity-report .gray-background {
    background: var(--ui-surface-soft);
    font-weight: 750;
}

/* Staff activity dashboard */
.staff-activity-dashboard .events-dashboard-cards small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.staff-activity-metrics .dashboard-metric-card {
    min-height: 142px;
}

.staff-activity-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.staff-activity-filter-actions {
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    margin-left: auto;
}

.staff-activity-filter {
    width: 240px;
}

.staff-activity-filter > div,
.staff-activity-filter .select2-container {
    width: 100% !important;
}

.staff-activity-analytics-heading {
    margin-top: 1rem;
}

.staff-activity-chart-grid {
    margin-right: 0;
    margin-left: 0;
}

.staff-activity-chart-grid > div {
    display: flex;
}

.staff-activity-chart-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}

.staff-activity-chart-card:hover {
    border-color: rgba(10, 111, 122, 0.28);
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
}

.staff-activity-chart-card .card-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
}

.staff-activity-chart-card .card-title {
    line-height: 1.35;
}

.staff-activity-chart-card .chart-body {
    padding: 1.1rem;
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

.staff-activity-chart-card [id$="NoData"] {
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

/* Staff performance dashboard */
.staff-performance-dashboard .staff-dashboard-cards small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.staff-performance-metrics .dashboard-metric-card {
    min-height: 148px;
}

.staff-performance-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.staff-performance-filter-actions {
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    margin-left: auto;
}

.staff-performance-filter {
    width: 230px;
}

.staff-performance-filter > div,
.staff-performance-filter .select2-container {
    width: 100% !important;
}

.staff-performance-suggestion {
    margin-top: 0.45rem;
    margin-right: 0;
    text-align: right;
}

.staff-performance-analytics-heading {
    margin-top: 1rem;
}

.staff-performance-chart-grid > div {
    display: flex;
}

.staff-performance-chart-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}

.staff-performance-chart-card:hover {
    border-color: rgba(10, 111, 122, 0.28);
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
}

.staff-performance-chart-card .card-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
}

.staff-performance-chart-card .card-title {
    line-height: 1.35;
}

.staff-performance-chart-card .chart-body {
    padding: 1.1rem;
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

.staff-performance-chart-card [id$="NoData"] {
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

.staff-performance-details-section {
    margin-top: 1.1rem;
}

.staff-performance-details-report > .content-wrapper {
    min-height: 0 !important;
    padding: 0;
    background: transparent !important;
}

.staff-performance-details-report > .content-wrapper > .content {
    padding-bottom: 0;
}

.staff-performance-details-report .report-header {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.staff-performance-details-report #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.staff-performance-details-report #records_wrapper {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.staff-performance-details-report #records_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.staff-performance-details-report #records_wrapper > .bottom {
    padding: 0.9rem;
}

/* User snapshot dashboard */
.user-snapshot-toolbar {
    align-items: center;
    padding: 0.75rem 1rem !important;
}

.user-snapshot-filter-actions {
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    margin-left: auto;
}

.user-snapshot-filter {
    width: 240px;
}

.user-snapshot-filter > div,
.user-snapshot-filter .select2-container {
    width: 100% !important;
}

.user-snapshot-dashboard .events-dashboard-cards small {
    display: block;
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.user-snapshot-metrics .dashboard-metric-card {
    min-height: 142px;
}

.user-snapshot-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-right: 0;
    margin-bottom: 0.75rem;
    margin-left: 0;
}

.user-snapshot-metrics > [class*="col-"] {
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    flex: none;
}

.user-snapshot-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.user-snapshot-fact {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-snapshot-fact > span {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.user-snapshot-fact small,
.user-snapshot-fact strong {
    display: block;
}

.user-snapshot-fact small {
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.user-snapshot-fact strong {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    color: var(--ui-text);
    font-size: 0.79rem;
}

.user-snapshot-analytics-heading {
    margin-top: 0.5rem;
}

.user-snapshot-chart-row {
    margin-right: -0.375rem;
    margin-left: -0.375rem;
}

.user-snapshot-chart-row > [class*="col-"] {
    display: flex;
    padding-right: 0.375rem !important;
    padding-left: 0.375rem !important;
}

.user-snapshot-chart-card {
    width: 100%;
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}

.user-snapshot-chart-card:hover {
    border-color: rgba(10, 111, 122, 0.28);
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
}

.user-snapshot-chart-card .card-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
}

.user-snapshot-chart-card .chart-body {
    padding: 1.1rem;
    background:
        linear-gradient(180deg, var(--ui-surface-raised), var(--ui-surface));
}

.user-snapshot-chart-card [id$="NoData"] {
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

.user-snapshot-details-section {
    margin-top: 1.1rem;
}

.user-snapshot-details-report > .content-wrapper {
    min-height: 0 !important;
    padding: 0;
    background: transparent !important;
}

.user-snapshot-details-report > .content-wrapper > .content {
    padding-bottom: 0;
}

.user-snapshot-details-report .report-header {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.user-snapshot-details-report #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-snapshot-details-report #records_wrapper {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.user-snapshot-details-report #records_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.user-snapshot-details-report #records_wrapper > .bottom {
    padding: 0.9rem;
}

/* Organization hierarchy */
.organization-hierarchy-page {
    padding: 0 1rem 2rem;
}

.hierarchy-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hierarchy-guide-item {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.hierarchy-guide-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--hierarchy-soft);
    color: var(--hierarchy-color);
}

.hierarchy-guide-item strong,
.hierarchy-guide-item small {
    display: block;
}

.hierarchy-guide-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.hierarchy-guide-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
}

.hierarchy-guide-organization {
    --hierarchy-color: #0a6f7a;
    --hierarchy-soft: rgba(10, 111, 122, 0.12);
}

.hierarchy-guide-partner {
    --hierarchy-color: #7656a8;
    --hierarchy-soft: rgba(118, 86, 168, 0.12);
}

.hierarchy-guide-department {
    --hierarchy-color: #16749a;
    --hierarchy-soft: rgba(22, 116, 154, 0.12);
}

.hierarchy-mobile-toggle {
    z-index: 99;
    margin-bottom: 0.75rem;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.hierarchy-mobile-toggle .nav-link {
    color: var(--ui-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.hierarchy-workspace {
    margin-right: -0.375rem;
    margin-left: -0.375rem;
}

.hierarchy-workspace > [class*="col-"] {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

.organization-hierarchy-page .hierarchy-sidebar {
    position: static !important;
    width: auto !important;
    min-height: 0;
    padding: 0 0.375rem !important;
    background: transparent;
    box-shadow: none;
}

.hierarchy-tree-card,
.hierarchy-detail-shell,
.hierarchy-side-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.hierarchy-tree-card {
    overflow: visible;
}

.hierarchy-tree-card .card-header {
    padding: 0.9rem 1rem;
}

.hierarchy-card-eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ui-text-muted);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hierarchy-tree-card .card-title {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--ui-text);
    font-size: 0.84rem;
    font-weight: 750;
}

.orgHierarchyList,
.hierarchy-children .table {
    margin: 0;
}

.orgHierarchyList td,
.hierarchy-children td {
    padding: 0 !important;
    border-top: 1px solid var(--ui-border);
}

.hierarchy-node-content {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    color: var(--ui-text);
}

.hierarchy-node-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 0.72rem;
}

.hierarchy-department .hierarchy-node-icon {
    color: #16749a;
}

.hierarchy-node-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 0.74rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hierarchy-caret {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    transition: transform 160ms ease;
}

.orgHierarchyList .hierarchy-node:hover > td > .hierarchy-node-content,
.orgHierarchyList .hierarchy-node-active > td > .hierarchy-node-content {
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.orgHierarchyList .hierarchy-node-active > td > .hierarchy-node-content {
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

.hierarchy-children {
    padding-left: 0.7rem;
    border-left: 1px dashed var(--ui-border);
}

.hierarchy-detail-shell {
    min-height: 420px;
    overflow: hidden;
}

.hierarchy-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hierarchy-detail-shell > .card {
    margin-bottom: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.hierarchy-detail-message {
    display: flex;
    min-height: 420px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    color: var(--ui-text-muted);
    text-align: center;
}

.hierarchy-detail-message > span {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    border-radius: 16px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 1.05rem;
}

.hierarchy-detail-message strong,
.hierarchy-detail-message small {
    display: block;
}

.hierarchy-detail-message strong {
    color: var(--ui-text);
    font-size: 0.9rem;
}

.hierarchy-detail-message small {
    max-width: 330px;
    margin-top: 0.3rem;
    font-size: 0.72rem;
}

.hierarchy-detail-message-error > span {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.hierarchy-entity-detail {
    min-height: 420px;
    background:
        radial-gradient(circle at top right, rgba(36, 113, 163, 0.09), transparent 32%),
        var(--ui-surface);
}

.hierarchy-entity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
}

.hierarchy-entity-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.85rem;
}

.hierarchy-entity-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--ui-primary), #174f78);
    color: #fff;
    box-shadow: 0 8px 18px rgba(36, 113, 163, 0.2);
}

.hierarchy-entity-eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ui-primary);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hierarchy-entity-heading h2,
.hierarchy-entity-heading p {
    margin: 0;
}

.hierarchy-entity-heading h2 {
    overflow: hidden;
    color: var(--ui-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hierarchy-entity-heading p {
    margin-top: 0.18rem;
    color: var(--ui-text-muted);
    font-size: 0.68rem;
}

.hierarchy-entity-edit {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    color: var(--ui-primary);
    font-size: 0.68rem;
    font-weight: 750;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hierarchy-entity-edit:hover {
    border-color: rgba(36, 113, 163, 0.35);
    color: var(--ui-primary);
    box-shadow: 0 7px 16px rgba(31, 45, 61, 0.09);
    text-decoration: none;
    transform: translateY(-1px);
}

.hierarchy-entity-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.hierarchy-entity-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.hierarchy-entity-section-title > span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 0.72rem;
}

.hierarchy-entity-section-title h3,
.hierarchy-entity-section-title p {
    margin: 0;
}

.hierarchy-entity-section-title h3 {
    color: var(--ui-text);
    font-size: 0.78rem;
    font-weight: 800;
}

.hierarchy-entity-section-title p {
    margin-top: 0.08rem;
    color: var(--ui-text-muted);
    font-size: 0.62rem;
}

.hierarchy-entity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.hierarchy-entity-field {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.72);
}

.hierarchy-entity-field-wide {
    grid-column: 1 / -1;
}

.hierarchy-entity-field-label {
    display: block;
    margin-bottom: 0.24rem;
    color: var(--ui-text-muted);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.hierarchy-entity-field-value {
    overflow-wrap: anywhere;
    color: var(--ui-text);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.45;
}

.hierarchy-entity-field-value img {
    width: auto;
    max-width: 110px;
    height: 36px;
    object-fit: contain;
}

.hierarchy-entity-empty {
    color: var(--ui-text-muted);
    font-style: italic;
    font-weight: 500;
}

.hierarchy-detail-placeholder {
    display: flex;
    min-height: 420px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    color: var(--ui-text-muted);
    text-align: center;
}

.hierarchy-detail-placeholder > span {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    border-radius: 16px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 1.1rem;
}

.hierarchy-detail-placeholder strong,
.hierarchy-detail-placeholder small {
    display: block;
}

.hierarchy-detail-placeholder strong {
    color: var(--ui-text);
    font-size: 0.9rem;
}

.hierarchy-detail-placeholder small {
    max-width: 330px;
    margin-top: 0.3rem;
    font-size: 0.72rem;
}

.hierarchy-side-card {
    margin-bottom: 0.75rem;
}

.hierarchy-side-card .card-body {
    padding: 1rem;
}

.hierarchy-side-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--ui-border);
}

.hierarchy-side-heading > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.hierarchy-side-heading h5,
.hierarchy-side-heading small {
    display: block;
    margin: 0;
}

.hierarchy-side-heading h5 {
    color: var(--ui-text);
    font-size: 0.82rem;
    font-weight: 750;
}

.hierarchy-side-heading small {
    margin-top: 0.1rem;
    color: var(--ui-text-muted);
    font-size: 0.64rem;
}

.hierarchy-report-links,
.hierarchy-summary-list {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.8rem;
}

.hierarchy-report-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-soft);
    color: var(--ui-text) !important;
    font-size: 0.7rem;
    font-weight: 700;
}

.hierarchy-report-link:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary) !important;
    transform: translateX(2px);
}

.hierarchy-report-link > i:first-child {
    color: var(--ui-primary);
    text-align: center;
}

.hierarchy-report-link > i:last-child {
    color: var(--ui-text-muted);
    font-size: 0.62rem;
    text-align: right;
}

.hierarchy-summary-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.hierarchy-summary-item .summary-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--summary-soft);
    color: var(--summary-color);
}

.summary-registered {
    --summary-color: #16836f;
    --summary-soft: rgba(22, 131, 111, 0.12);
}

.summary-unregistered {
    --summary-color: #c77918;
    --summary-soft: rgba(199, 121, 24, 0.13);
}

.summary-total {
    --summary-color: #16749a;
    --summary-soft: rgba(22, 116, 154, 0.12);
}

.hierarchy-summary-item small,
.hierarchy-summary-item strong {
    display: block;
}

.hierarchy-summary-item small {
    color: var(--ui-text-muted);
    font-size: 0.64rem;
}

.hierarchy-summary-item strong {
    margin-top: 0.05rem;
    color: var(--ui-text);
    font-size: 1rem;
}

/* Dispenser status report */
.status-report-page .content-header {
    padding: 1.5rem 1rem 0.9rem;
}

.status-report-welcome {
    margin-bottom: 1.15rem;
}

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

.status-legend-item {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.status-legend-item > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--status-soft);
    color: var(--status-color);
}

.status-legend-item strong,
.status-legend-item small {
    display: block;
}

.status-legend-item strong {
    color: var(--ui-text);
    font-size: 0.79rem;
}

.status-legend-item small {
    margin-top: 0.12rem;
    color: var(--ui-text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
}

.status-legend-online {
    --status-color: #16836f;
    --status-soft: rgba(22, 131, 111, 0.12);
}

.status-legend-offline {
    --status-color: #c64f5a;
    --status-soft: rgba(198, 79, 90, 0.12);
}

.status-legend-battery {
    --status-color: #c77918;
    --status-soft: rgba(199, 121, 24, 0.13);
}

.status-legend-liquid {
    --status-color: #16749a;
    --status-soft: rgba(22, 116, 154, 0.12);
}

.status-report-toolbar {
    align-items: center;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

.status-report-toolbar #exportText {
    display: none;
}

.report-header #export {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.report-header #export .dt-buttons {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
}

.row.report-header #export .dt-buttons .btn-secondary {
    display: inline-flex;
    min-width: 104px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface-raised);
    box-shadow: 0 2px 6px rgba(20, 64, 74, 0.08);
    color: var(--ui-text) !important;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.row.report-header #export .buttons-csv {
    border-color: rgba(22, 131, 111, 0.28);
    color: #16836f !important;
}

.row.report-header #export .buttons-excel {
    border-color: rgba(10, 111, 122, 0.3);
    color: var(--ui-primary) !important;
}

.row.report-header #export .buttons-csv:hover,
.row.report-header #export .buttons-csv:focus {
    border-color: #16836f;
    background: rgba(22, 131, 111, 0.11);
    color: #116b5c !important;
    box-shadow: 0 5px 14px rgba(22, 131, 111, 0.15);
    transform: translateY(-1px);
}

.row.report-header #export .buttons-excel:hover,
.row.report-header #export .buttons-excel:focus {
    border-color: var(--ui-primary);
    background: var(--ui-ring);
    color: var(--ui-primary-strong) !important;
    box-shadow: 0 5px 14px rgba(10, 111, 122, 0.16);
    transform: translateY(-1px);
}

.row.report-header #export .dt-button i {
    width: 16px;
    margin-right: 0.35rem !important;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
}

.row.report-header #export .dt-button:active {
    box-shadow: none;
    transform: translateY(0);
}

.status-report-toolbar #export {
    margin-top: 0.7rem;
}

.status-report-toolbar .dt-buttons {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.status-inactive-toggle,
.status-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-inactive-toggle input {
    width: 15px;
    height: 15px;
    margin-left: 0.55rem;
    accent-color: var(--ui-primary);
}

.status-filter-button {
    min-width: 98px !important;
}

.status-report-page #filterForm {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.status-table-shell {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-sm);
}

.status-table-shell .dataTables_wrapper > .top {
    padding: 0.9rem 0.9rem 0;
}

.status-table-shell .dataTables_wrapper > .bottom {
    padding: 0.9rem;
}

.status-report-page .dataTables_scroll {
    border-width: 1px 0;
    border-radius: 0;
}

.status-report-page #records tbody td:first-child a {
    color: var(--ui-primary);
    font-weight: 750;
}

.status-report-page #records tbody tr {
    transition: background-color 150ms ease, transform 150ms ease;
}

.status-report-page #records tbody tr:hover {
    background: var(--ui-surface-soft);
}

/* Forms and actions */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px var(--ui-ring) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* Unified select fields */
select.form-control,
select:not(.select2-hidden-accessible) {
    min-height: 42px;
    padding: 0.5rem 2.5rem 0.5rem 0.85rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-surface) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ui-text-muted) 50%),
        linear-gradient(135deg, var(--ui-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    color: var(--ui-text) !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    appearance: none;
}

select.form-control:hover,
select:not(.select2-hidden-accessible):hover {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 2px 8px var(--ui-ring);
}

select.form-control:focus,
select:not(.select2-hidden-accessible):focus {
    border-color: var(--ui-accent) !important;
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-ring) !important;
}

select.form-control:disabled,
select:not(.select2-hidden-accessible):disabled {
    background-color: var(--ui-surface-soft) !important;
    color: var(--ui-text-muted) !important;
    cursor: not-allowed;
    opacity: 0.72;
}

.select2-container {
    max-width: 100%;
    vertical-align: middle;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text);
    box-shadow: 0 1px 2px rgba(20, 64, 74, 0.04);
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 2px 8px var(--ui-ring);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px var(--ui-ring) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    height: 40px;
    align-items: center;
    padding: 0 2.65rem 0 0.85rem;
    color: var(--ui-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ui-text-muted);
    font-weight: 400;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 1px;
    right: 0.35rem;
    width: 2rem;
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border: 0;
    border-right: 2px solid var(--ui-text-muted);
    border-bottom: 2px solid var(--ui-text-muted);
    transform: rotate(45deg);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    margin-top: -1px;
    border: 0;
    border-top: 2px solid var(--ui-text-muted);
    border-left: 2px solid var(--ui-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none;
}

.select2-dropdown {
    margin-top: 0.25rem;
    overflow: hidden;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-md);
}

.select2-search--dropdown {
    padding: 0.65rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.select2-results__options {
    padding: 0.35rem;
}

.select2-results__option {
    margin: 0.1rem 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    font-size: 0.875rem;
    line-height: 1.35;
}

.select2-container--default .select2-results__option--selected {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-primary) !important;
    font-weight: 700;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ui-primary) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--ui-text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.select2-container--default .select2-selection--multiple {
    padding: 0.25rem 0.35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    min-height: 32px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    margin: 0;
    padding: 0.2rem 0.55rem 0.2rem 1.65rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    width: 1.35rem;
    height: 100%;
    border: 0;
    border-right: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--ui-primary);
}

.select2-container--default .select2-search--inline .select2-search__field {
    min-height: 30px;
    margin: 0;
    padding: 0.25rem 0.45rem;
    color: var(--ui-text) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text-muted);
    cursor: not-allowed;
    opacity: 0.72;
}

.was-validated select.form-control:invalid,
select.form-control.is-invalid,
.select2-selection.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14) !important;
}

/* Pagination uses compact Select2 controls. */
.dataTables_paginate .select2-container--default .select2-selection--single {
    min-height: 26px;
    border-radius: 0.4rem !important;
}

.dataTables_paginate .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 24px;
    padding-left: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

.dataTables_paginate .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 24px;
}

.btn {
    min-height: 38px;
    padding: 0.45rem 0.9rem;
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
}

.btn-dark,
.btn-primary {
    border-color: var(--ui-primary) !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--ui-ring);
}

.btn-dark:hover,
.btn-primary:hover {
    border-color: var(--ui-primary-strong) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 16px var(--ui-ring);
    transform: translateY(-1px);
}

.dropdown-menu {
    padding: 0.45rem;
    overflow: hidden;
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md) !important;
}

.dropdown-item {
    padding: 0.65rem 0.75rem;
    border-radius: var(--ui-radius-sm);
}

.dropdown-divider {
    margin: 0.3rem 0;
    border-color: var(--ui-border);
}

/* Data-heavy screens */
.dataTables_scroll,
.table-responsive {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
}

.table {
    color: var(--ui-text);
}

.table thead th,
.card-body-table-header {
    border-bottom: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.table td,
.table th {
    padding: 0.8rem 0.75rem;
    border-color: var(--ui-border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--ui-surface-soft);
}

.page-link {
    margin: 0 0.12rem;
    border-color: var(--ui-border);
    border-radius: 0.4rem !important;
    color: var(--ui-primary);
}

.page-item.active .page-link {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
}

/* Login and account recovery */
.login-page,
.register-page {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 15%, rgba(37, 185, 192, 0.2), transparent 30%),
        radial-gradient(circle at 88% 85%, rgba(10, 40, 106, 0.14), transparent 34%),
        linear-gradient(145deg, #f7fcfd, #eaf5f7) !important;
}

.login-page::before,
.login-page::after {
    position: fixed;
    border: 1px solid rgba(37, 185, 192, 0.18);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.login-page::before {
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
}

.login-page::after {
    bottom: -220px;
    left: -160px;
    width: 480px;
    height: 480px;
}

.login-box {
    width: min(420px, calc(100% - 2rem));
}

.login-card-body,
.register-card-body {
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 1.15rem !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 24px 70px rgba(25, 49, 58, 0.16) !important;
    backdrop-filter: blur(14px);
}

.login-card-body .card-body,
.register-card-body .card-body {
    padding: 1.75rem;
}

.login-logo img {
    max-width: 250px;
}

.login-box-msg {
    padding-bottom: 1.25rem;
    color: var(--ui-text);
    font-size: 1.2rem;
    font-weight: 700;
}

.login-page .input-group-text {
    min-width: 44px;
    justify-content: center;
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
    color: var(--ui-primary);
}

.privacyLine {
    max-width: 760px;
    color: var(--ui-text-muted) !important;
    line-height: 1.6;
    text-align: center;
}

/* Premium login experience */
.login-page {
    display: block !important;
    min-height: 100vh;
    padding: 0;
}

.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-height: 100vh;
    grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr);
}

.login-showcase {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    padding: clamp(3rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 15% 20%, rgba(101, 219, 224, 0.3), transparent 27%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.13), transparent 25%),
        linear-gradient(145deg, #063d48 0%, #087782 48%, #13a8b0 100%);
    color: #ffffff;
}

.login-showcase::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    mask-image: linear-gradient(to bottom right, #000, transparent 85%);
}

.login-showcase-content {
    position: relative;
    z-index: 2;
    max-width: 610px;
}

.login-eyebrow {
    margin-bottom: 0.75rem;
    color: inherit;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.login-showcase h1 {
    max-width: 580px;
    margin-bottom: 1.35rem;
    color: #ffffff;
    font-size: clamp(2.6rem, 4.8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.login-showcase-copy {
    max-width: 540px;
    margin-bottom: 2.6rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.75;
}

.login-benefits {
    display: grid;
    max-width: 540px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.login-benefits > div {
    display: flex;
    min-height: 108px;
    align-items: flex-start;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
}

.login-benefits > div > span {
    margin: 0.15rem 0.8rem 0 0;
    color: #92f2f2;
    font-size: 1.1rem;
}

.login-benefits p {
    margin: 0;
    color: #ffffff;
}

.login-benefits strong,
.login-benefits small {
    display: block;
}

.login-benefits strong {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.login-benefits small {
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.78rem;
    line-height: 1.45;
}

.login-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.login-orbit-one {
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
}

.login-orbit-two {
    right: -80px;
    bottom: -260px;
    width: 620px;
    height: 620px;
}

.login-form-panel {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    background:
        radial-gradient(circle at 90% 10%, var(--ui-ring), transparent 28%),
        var(--ui-surface-soft);
}

.login-page .login-box {
    width: min(470px, 100%);
    margin: 0;
}

.login-page .login-card-body {
    overflow: visible;
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ui-border), transparent 15%) !important;
    border-radius: 24px !important;
    background: var(--ui-surface-raised) !important;
    box-shadow: 0 28px 80px rgba(20, 64, 74, 0.16) !important;
}

.login-page .login-card-body .card-body {
    padding: clamp(2rem, 4vw, 3.25rem);
}

.login-page .login-logo {
    margin-bottom: 2.5rem;
    text-align: left;
}

.login-page .login-logo img {
    width: min(240px, 72%);
    max-width: none;
}

.login-heading {
    margin-bottom: 2rem;
}

.login-heading .login-eyebrow {
    margin-bottom: 0.55rem;
    color: var(--ui-primary);
}

.login-heading h2 {
    margin-bottom: 0.65rem;
    color: var(--ui-text);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.login-heading > p:last-child {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.login-form > label,
.login-label-row label {
    margin-bottom: 0.45rem;
    color: var(--ui-text);
    font-size: 0.82rem;
    font-weight: 700;
}

.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
}

.login-label-row a {
    color: var(--ui-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.login-input-group {
    overflow: hidden;
    min-height: 50px;
    margin-bottom: 0.3rem;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(20, 64, 74, 0.04);
}

.login-input-group:focus-within {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 4px var(--ui-ring);
}

.login-page .login-input-group .form-control {
    min-height: 48px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    font-size: 0.92rem;
}

.login-page .login-input-group .form-control::placeholder {
    color: var(--ui-text-muted);
    opacity: 0.7;
}

.login-page .login-input-group .input-group-text {
    min-width: 48px;
    border: 0;
    background: transparent;
    color: var(--ui-primary);
}

.login-password-toggle {
    cursor: pointer;
}

.login-password-toggle:hover {
    color: var(--ui-accent) !important;
}

.login-submit {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.75rem;
    padding: 0.7rem 1.15rem;
    border-radius: 12px;
    font-size: 0.92rem;
}

.login-submit .fa-arrow-right {
    transition: transform 160ms ease;
}

.login-submit:hover .fa-arrow-right {
    transform: translateX(4px);
}

.login-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.35rem;
    color: var(--ui-text-muted);
    font-size: 0.72rem;
}

.login-security-note .fa-lock {
    color: var(--ui-primary);
}

.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--ui-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.login-back-link .fa-arrow-left {
    transition: transform 160ms ease;
}

.login-back-link:hover .fa-arrow-left {
    transform: translateX(-3px);
}

.otp-code-input {
    font-size: 1.35rem !important;
    font-weight: 700;
    letter-spacing: 0.45em;
    text-align: center;
}

.otp-resend-form {
    margin-top: 0.75rem;
    text-align: center;
}

.otp-resend-button {
    padding: 0.35rem;
    color: var(--ui-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.login-page .invalid-feedback,
.login-page .valid-feedback {
    margin: 0 0 0.45rem;
    font-size: 0.76rem;
}

.login-page .privacyLine {
    display: flex;
    max-width: 470px;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 1rem;
    color: var(--ui-text-muted) !important;
    font-size: 0.72rem;
}

.login-page .privacyLine a {
    color: var(--ui-primary);
    font-weight: 700;
}

/* Responsive refinements */
@media (max-width: 991px) {
    .wrapper {
        padding: 0.75rem !important;
    }

    .small-box {
        min-height: 116px;
    }

    .login-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-showcase {
        display: none;
    }

    .login-form-panel {
        min-height: 100vh;
        padding: 2rem 1rem;
    }

    .dashboard-toolbar .dashboardFilterSection {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
    }

    .dashboard-toolbar .dashboardFilterSection > .col-lg-8 {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start !important;
    }

    .maintenance-toolbar-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        margin-top: 0.8rem;
    }

    .maintenance-toolbar-actions > div {
        width: 100% !important;
    }

    .status-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-history-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-history-toolbar > div {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .activity-history-toolbar .dt-buttons {
        float: none !important;
        justify-content: flex-start;
        margin-top: 0.75rem;
    }

    .tag-history-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tag-history-toolbar > div {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .tag-history-toolbar .dt-buttons {
        float: none !important;
        justify-content: flex-start;
        margin-top: 0.75rem;
    }

    .battery-history-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .battery-history-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 0.75rem;
    }

    .battery-dispenser-select,
    .battery-history-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .activity-dashboard-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .activity-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 0.75rem;
    }

    .activity-organization-select,
    .activity-dashboard-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .rollup-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .rollup-toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.75rem;
    }

    .rollup-filter {
        width: 100%;
    }

    .rollup-download-btn,
    .rollup-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .staff-activity-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .staff-activity-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.75rem;
    }

    .staff-activity-filter {
        width: 100%;
    }

    .staff-activity-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .staff-performance-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .staff-performance-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.75rem;
    }

    .staff-performance-filter {
        width: 100%;
    }

    .staff-performance-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .user-snapshot-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .user-snapshot-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.75rem;
    }

    .user-snapshot-filter {
        width: 100%;
    }

    .user-snapshot-toolbar .dashboard-print-btn {
        width: 100%;
    }

    .hierarchy-guide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hierarchy-sidebar,
    .hierarchy-detail-column,
    .hierarchy-insights-column {
        margin-bottom: 0.75rem;
    }

    .status-report-toolbar > div {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .status-report-toolbar .dt-buttons {
        float: none !important;
        justify-content: flex-start;
        margin-top: 0.75rem;
    }
}

@media (max-width: 767px) {
    .main-header {
        align-items: center;
    }

    .main-header .dashboard-brand-link {
        min-height: 48px;
        padding: 0.45rem 0.7rem;
        border-radius: 12px;
    }

    .main-header .brand-image {
        width: min(215px, 100%);
        max-height: 32px;
    }

    .main-header .input-group {
        min-width: 0;
    }

    .content {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .card-body {
        padding: 0.85rem;
    }

    .report-header {
        padding: 0.6rem !important;
    }

    .login-page .login-card-body .card-body {
        padding: 1.65rem 1.35rem;
    }

    .login-page .login-logo {
        margin-bottom: 1.8rem;
    }

    .login-heading {
        margin-bottom: 1.5rem;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.85rem;
    }

    .dashboard-section-heading {
        margin-top: 0.35rem;
    }

    .dashboard-metric-card {
        min-height: 132px;
    }

    .dashboard-toolbar-title {
        margin-bottom: 0.15rem;
    }

    .dashboard-print-btn {
        width: 100%;
        justify-content: center;
        margin: 0.5rem 0 0;
    }

    .status-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-history-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-history-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .activity-history-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-history-toolbar .status-inactive-toggle,
    .activity-history-toolbar .status-filter-button {
        width: 100%;
    }

    .tag-history-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .unresponsive-users-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .unresponsive-users-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .unresponsive-users-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .unresponsive-users-toolbar .status-filter-button {
        width: 100%;
    }

    .unassigned-tags-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .unassigned-tags-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .unassigned-tags-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .unassigned-tags-toolbar .status-filter-button {
        width: 100%;
    }

    .user-entry-report-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-entry-report-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .user-entry-report-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .user-entry-report-toolbar .status-filter-button {
        width: 100%;
    }

    .dispenser-management-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .dispenser-management-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .dispenser-management-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .dispenser-management-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .dispenser-management-toolbar .btn {
        width: 100%;
    }

    .dispenser-health-legend {
        align-items: stretch;
        flex-direction: column;
    }

    .dispenser-health-legend-items {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .dispenser-health-legend-item {
        width: 100%;
    }

    .dispenser-group-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .dispenser-group-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .dispenser-group-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .dispenser-group-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .dispenser-group-toolbar .btn {
        width: 100%;
    }

    .tag-management-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .tag-management-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .tag-management-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .tag-management-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .tag-management-toolbar .btn {
        width: 100%;
    }

    .user-management-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-management-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .user-management-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .user-management-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .user-management-toolbar .btn {
        width: 100%;
    }

    .wifi-settings-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .wifi-settings-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .wifi-settings-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .wifi-settings-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .wifi-settings-toolbar .btn {
        width: 100%;
    }

    .role-management-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .role-management-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .role-management-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .role-management-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .role-management-toolbar .btn {
        width: 100%;
    }

    .permission-management-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .permission-management-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .permission-management-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .permission-management-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .permission-management-toolbar .btn {
        width: 100%;
    }

    .utility-admin-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .utility-admin-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .utility-admin-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .utility-admin-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .utility-admin-toolbar .btn {
        width: 100%;
    }

    .catalog-admin-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-admin-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .catalog-admin-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .catalog-admin-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .catalog-admin-toolbar .btn {
        width: 100%;
    }

    .department-admin-guide,
    .api-log-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .department-admin-page .content-header,
    .api-log-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .department-admin-toolbar > div,
    .api-log-toolbar > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .department-admin-toolbar .dt-buttons,
    .api-log-toolbar .dt-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0.75rem;
    }

    .department-admin-toolbar .btn,
    .api-log-toolbar .btn {
        width: 100%;
    }

    .user-profile-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .user-profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-profile-avatar.profilepic {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }

    .user-profile-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .user-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-profile-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-profile-detail-wide {
        grid-column: auto;
    }

    .user-profile-primary-action,
    .user-profile-secondary-action {
        width: 100%;
    }

    .tag-history-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .tag-history-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .tag-history-toolbar .status-filter-button {
        width: 100%;
    }

    .battery-history-dashboard {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .battery-health-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .battery-history-chart-card .chart-body {
        padding: 0.75rem;
    }

    .activity-chart-grid {
        padding-right: 0;
        padding-left: 0;
    }

    .activity-chart-card .chart-body {
        padding: 0.75rem;
    }

    .dispenser-rollup-dashboard {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .rollup-legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .rollup-toolbar-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-activity-dashboard {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .staff-activity-filter-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-activity-chart-card .chart-body {
        padding: 0.75rem;
    }

    .staff-performance-dashboard {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .staff-performance-filter-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-performance-suggestion {
        text-align: left;
    }

    .staff-performance-chart-card .chart-body {
        padding: 0.75rem;
    }

    .user-snapshot-dashboard {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .user-snapshot-filter-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-snapshot-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-snapshot-metrics,
    .user-snapshot-chart-row {
        margin-right: 0;
        margin-left: 0;
    }

    .user-snapshot-chart-row > [class*="col-"] {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .user-snapshot-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .user-snapshot-chart-card .chart-body {
        padding: 0.75rem;
    }

    .organization-hierarchy-page {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .hierarchy-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .hierarchy-workspace {
        margin-right: 0;
        margin-left: 0;
    }

    .hierarchy-workspace > [class*="col-"],
    .organization-hierarchy-page .hierarchy-sidebar {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .hierarchy-entity-header {
        align-items: stretch;
        flex-direction: column;
    }

    .hierarchy-entity-edit {
        width: 100%;
    }

    .hierarchy-entity-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hierarchy-entity-field-wide {
        grid-column: auto;
    }

    .status-report-page .content-header {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .status-report-toolbar .dt-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .report-header #export,
    .report-header #export .dt-buttons {
        width: 100%;
    }

    .report-header #export .dt-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .row.report-header #export .dt-buttons .btn-secondary {
        width: 100%;
        min-width: 0;
    }

    .status-inactive-toggle,
    .status-filter-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}