body {
    background-color: #f0f4f8;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

html.i18n-pending body {
    visibility: hidden;
}

html.i18n-ready body {
    visibility: visible;
}

img, svg { width: 160px; }

.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

thead {
    background: #007BFF;
    text-align: left;
}

th, td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
}

tbody tr:nth-child(even) {
    background: #f9f9f9;
}

tbody tr:hover {
    background: #f1f1f1;
}

th {
    font-weight: bold;
}

@media (max-width: 768px) {
    th, td {
        padding: 10px;
        font-size: 14px;
    }
}

:root {
    --app-sidebar-width: 230px;
    --tenant-primary: #e6273f;
    --tenant-primary-rgb: 230, 39, 63;
    --tenant-primary-contrast: #fff;
    --tenant-sidebar: #1a1a2e;
    --tenant-sidebar-contrast: #fff;
    --tenant-page-background: #f0f4f8;
    --tenant-background-contrast: #172033;
    --tenant-surface: #fff;
    --tenant-surface-contrast: #172033;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--app-sidebar-width);
    height: 100%;
    background-color: #1a1a2e;
    color: white;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Keep the fixed sidebar background stable while permissions, branding,
   translations and version information are resolved. */
.sidebar > .sidebar-top,
.sidebar > .sidebar-bottom {
    visibility: hidden;
    opacity: 0;
    animation: sidebar-init-fallback 0s linear 3s forwards;
}

.sidebar.sidebar-ready > .sidebar-top,
.sidebar.sidebar-ready > .sidebar-bottom {
    visibility: visible;
    opacity: 1;
    animation: none;
    transition: opacity 0.08s ease-out;
}

.sidebar:not(.sidebar-ready) ~ .container .app-hero-title,
.sidebar:not(.sidebar-ready) ~ .container .footer p {
    visibility: hidden;
}

@keyframes sidebar-init-fallback {
    to {
        visibility: visible;
        opacity: 1;
    }
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-app-version {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
}

.sidebar .logo {
    width: calc(var(--app-sidebar-width) - 30px);
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.sidebar .logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 58px;
    object-fit: contain;
}

.sidebar .logo img:not([src]) {
    display: none;
}

.sidebar-tenant-name {
    display: block;
    max-width: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.device-timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.device-timeline-modal { z-index: 1070; }
.device-timeline-backdrop { z-index: 1065; }

.compliance-exception-modal { z-index: 1080; }
.compliance-exception-backdrop { z-index: 1075; }

.compliance-exception-overview {
    padding: .85rem 1rem;
    border: 1px solid #f2cf73;
    border-left: 4px solid #f0ad00;
    border-radius: .65rem;
    background: #fffaf0;
}

.compliance-exception-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .6rem;
    border: 1px solid #f2cf73;
    border-radius: 999px;
    background: #fff;
    color: #594600;
    font-size: .78rem;
}

.compliance-exception-badge-link {
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.compliance-exception-badge-link:hover,
.compliance-exception-badge-link:focus-visible {
    border-color: #d69b00;
    background: #fff4cf;
    transform: translateY(-1px);
    outline: none;
}

.compliance-exception-badge-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
}

.compliance-exception-badge-reason {
    display: inline-block;
    min-width: 0;
    max-width: min(28rem, 45vw);
    overflow: hidden;
    color: #755d0a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compliance-exception-badge-orphan {
    border-style: dashed;
    background: #fff8e1;
}

.compliance-exception-badge-orphan em {
    color: #8a6d1d;
    font-size: .7rem;
    font-style: normal;
}

.compliance-exception-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid #dc3545;
    border-radius: 999px;
    background: #fff;
    color: #dc3545;
}

.compliance-exception-remove:hover,
.compliance-exception-remove:focus-visible {
    background: #dc3545;
    color: #fff;
    outline: none;
}

.policy-device-item.compliance-device-jump-target .policy-device-accordion {
    animation: compliance-device-jump-pulse 2.4s ease;
}

@keyframes compliance-device-jump-pulse {
    0%, 100% {
        border-color: #d9e2ec;
        box-shadow: none;
    }
    18%, 65% {
        border-color: #f0ad00;
        box-shadow: 0 0 0 4px rgba(240, 173, 0, .2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .policy-device-item.compliance-device-jump-target .policy-device-accordion {
        animation: none;
        border-color: #f0ad00;
        box-shadow: 0 0 0 3px rgba(240, 173, 0, .18);
    }
}

.compliance-exception-inline {
    display: inline-flex;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: .45rem;
    background: #fff3cd;
    color: #664d03;
}

.compliance-exception-list {
    display: grid;
    gap: .65rem;
}

.compliance-exception-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    background: #fff;
}

.compliance-exception-list-scope {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    border: 1px solid #d7dee5;
    border-radius: .45rem;
    background: #f8f9fa;
    color: #495057;
}

.compliance-exception-list-scope strong {
    color: #212529;
}

.compliance-exception-empty {
    padding: 1rem;
    border: 1px dashed #ced4da;
    border-radius: .6rem;
    color: #6c757d;
    text-align: center;
}

#complianceExceptionDeviceWrap[hidden] { display: none !important; }

.firmware-workspace-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    color: #495057;
    font-weight: 600;
}

.firmware-workspace-tabs .nav-link.active {
    color: #0d6efd;
}

.firmware-catalog-table td,
.firmware-rollout-table td {
    vertical-align: top;
}

.firmware-catalog-table code {
    color: #5c2d91;
}

.firmware-candidate-badge-button {
    display: inline-flex;
    align-items: center;
    padding: .32em .58em;
    font-family: inherit;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.firmware-candidate-badge-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
}

.firmware-candidate-badge-button:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.firmware-candidate-card {
    border-color: #f2cf73;
}

.firmware-candidate-card > .card-header {
    background: #fffaf0;
}

.firmware-candidate-grid {
    display: grid;
    gap: .65rem;
}

.firmware-candidate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem;
    border: 1px solid #f2cf73;
    border-left: 4px solid #f0ad00;
    border-radius: .6rem;
    background: #fff;
}

.firmware-candidate-item-muted {
    border-color: #dee2e6;
    border-left-color: #adb5bd;
    background: #f8f9fa;
    opacity: .8;
}

.firmware-candidate-main {
    min-width: 0;
}

.firmware-candidate-version {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.firmware-candidate-version strong {
    color: #9a6700;
}

.firmware-candidate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 0 0 auto;
}

.firmware-candidate-empty {
    padding: .5rem;
    color: #6c757d;
}

.firmware-release-history {
    max-height: 150px;
    overflow: auto;
    padding: .55rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #f8f9fa;
}

.firmware-release-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem 0;
    border-bottom: 1px solid #e9ecef;
    font-size: .8rem;
}

.firmware-release-history-item:last-child {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .firmware-workspace-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .firmware-workspace-tabs .nav-link {
        white-space: nowrap;
    }

    .firmware-candidate-item {
        align-items: stretch;
        flex-direction: column;
    }

    .firmware-candidate-actions {
        justify-content: flex-start;
    }
}
.policy-device-summary-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.device-timeline-list {
    position: relative;
    display: grid;
    gap: 12px;
    padding-left: 12px;
}

.device-timeline-list::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 28px;
    width: 2px;
    background: #dbe3ec;
}

.device-timeline-event {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.device-timeline-marker {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff;
}

.device-timeline-card {
    padding: 12px 14px;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    background: #fff;
}

.device-timeline-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.device-timeline-description {
    margin-top: 8px;
    color: #3f4b5a;
    white-space: pre-wrap;
}

.device-timeline-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
    color: #6c757d;
    font-size: 0.78rem;
}

.device-timeline-fact {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.device-timeline-loading,
.device-timeline-empty {
    padding: 36px 16px;
    color: #6c757d;
    text-align: center;
}

.device-timeline-days {
    display: grid;
    gap: 16px;
}

.device-timeline-day {
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    background: #f8fafc;
}

.device-timeline-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid #dce4ed;
    background: #edf3f9;
}

.device-timeline-day-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
}

.device-timeline-day-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.device-timeline-day-stat {
    padding: 2px 7px;
    border: 1px solid #d4dde7;
    border-radius: 999px;
    background: #fff;
    color: #647184;
    font-size: .7rem;
}

.device-timeline-day-content {
    display: grid;
    gap: 9px;
    padding: 11px;
}

.device-timeline-policy-group {
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    background: #fff;
}

.device-timeline-policy-group > summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.device-timeline-policy-group > summary::-webkit-details-marker { display: none; }
.device-timeline-policy-group > summary:hover { background: #f7f9fc; }

.device-timeline-policy-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.device-timeline-policy-group summary small {
    display: block;
    margin-top: 1px;
    color: #6c757d;
}

.device-timeline-expand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5f6b7a;
    font-size: .74rem;
}

.device-timeline-policy-group .hide-label { display: none; }
.device-timeline-policy-group[open] .show-label { display: none; }
.device-timeline-policy-group[open] .hide-label { display: inline; }
.device-timeline-policy-group[open] .device-timeline-expand i { transform: rotate(180deg); }
.device-timeline-expand i { transition: transform .15s ease; }

.device-timeline-policy-results {
    border-top: 1px solid #e8edf3;
}

.device-timeline-policy-result {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 70px auto;
    gap: 9px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #edf1f5;
    font-size: .78rem;
}

.device-timeline-policy-result:last-child { border-bottom: 0; }
.device-timeline-policy-result small { display: block; margin-top: 1px; color: #6c757d; }
.device-timeline-policy-result time { color: #6c757d; }
.policy-result-dot { width: 8px; height: 8px; border-radius: 50%; background: #6c757d; }
.policy-result-dot.is-success { background: #198754; }
.policy-result-dot.is-failed { background: #dc3545; }

.device-timeline-day-content .device-timeline-event {
    grid-template-columns: 34px minmax(0, 1fr);
}

@media (max-width: 700px) {
    .device-timeline-day-header { align-items: flex-start; flex-direction: column; }
    .device-timeline-day-stats { justify-content: flex-start; }
    .device-timeline-expand span { display: none !important; }
    .device-timeline-policy-result { grid-template-columns: 9px minmax(0, 1fr) auto; }
    .device-timeline-policy-result time { display: none; }
}

/* Action Center */
.action-center-filter-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 9px;
  font-size: .86rem;
}

.action-center-filter-intro strong { margin-right: 8px; }

.action-center-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.action-kpi {
  position: relative;
  border: 1px solid #dfe5eb;
  border-left: 4px solid #0d6efd;
  border-radius: 12px;
  background: #fff;
  padding: 13px 15px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

.action-kpi:hover,
.action-kpi.active {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .1);
  border-color: #0d6efd;
}

.action-kpi.active::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 11px;
  display: inline-flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

.action-kpi span { display: block; color: #657183; font-size: .8rem; }
.action-kpi strong { display: block; margin-top: 3px; font-size: 1.6rem; line-height: 1.15; }
.action-kpi-danger { border-left-color: #dc3545; }
.action-kpi-warning { border-left-color: #f59f00; }
.action-center-active-filter {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f6b7a;
  font-size: .82rem;
}
.action-center-active-filter .active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #0b5ed7;
  font-weight: 600;
}
.action-center-active-filter button { border: 0; background: transparent; color: inherit; padding: 0; line-height: 1; }
.action-center-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 14px rgba(15, 23, 42, .07); }
.action-center-filters { display: grid; grid-template-columns: minmax(260px, 1.7fr) minmax(255px, 1.15fr) repeat(3, minmax(140px, .85fr)); gap: 10px; }
.action-center-type-filters {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid #d7e0ea;
  border-radius: 10px;
  background: #fff;
}
.action-center-type-label {
  margin-right: 2px;
  color: #68758a;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.action-center-type-filters .option-filter-chip {
  min-height: 27px;
  gap: 4px;
  padding: 3px 8px;
  font-size: .66rem;
}
body.dark-mode .action-center-type-filters { border-color: #3b424c; background: #22272e; }
.action-center-table th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .025em; color: #657183; background: #f7f9fb; }
.action-center-table td { vertical-align: middle; }
.action-center-table .action-center-customer-login { max-width: 190px; }
.action-center-table th:last-child,
.action-center-table td:last-child { width: 200px; min-width: 200px; }
.action-center-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.action-center-row-actions .btn { flex: 0 0 auto; }
.action-center-table tbody tr:hover { background: #f8fbff; }
.action-center-device-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
}
.action-center-device-link i { color: #0d6efd; font-size: .82rem; }
.action-center-device-link span { overflow-wrap: anywhere; }
.action-center-device-link:hover,
.action-center-device-link:focus-visible { color: #0d6efd; text-decoration: underline; }
.action-priority { display: inline-flex; width: 36px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-weight: 700; }
.action-priority-1 { background: #a61e2d; }
.action-priority-2 { background: #dc3545; }
.action-priority-3 { background: #f59f00; }
.action-priority-4 { background: #6c757d; }
.action-signal { font-weight: 500; }
.action-connectivity { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.action-connectivity-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  background: #f5f7fa;
  color: #667085;
  font-size: .6rem;
  line-height: 1;
}
.action-connectivity-badge i { font-size: .42rem; }
.action-connectivity-badge strong { font-size: .58rem; letter-spacing: .02em; }
.action-connectivity-badge.is-online { border-color: #abdcc5; background: #e9f7f0; color: #137a4e; }
.action-connectivity-badge.is-offline { border-color: #f3b5bd; background: #fff0f2; color: #c8253a; }
.action-connectivity-badge.is-degraded { border-color: #f2d092; background: #fff8e8; color: #a96600; }
body.dark-mode .action-connectivity-badge { border-color: #4b5563; background: #29313b; color: #d0d5dd; }
.action-reason { min-width: 230px; max-width: 430px; font-size: .88rem; }
.action-center-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #667085; }
.action-center-empty i { font-size: 2.3rem; color: #198754; }
.ac-spin { animation: ac-spin .75s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

@media (max-width: 1400px) {
  .action-center-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-center-filters { grid-template-columns: minmax(280px, 1.5fr) minmax(255px, 1fr) repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 992px) {
  .action-center-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
  .action-center-kpis,
  .action-center-filters { grid-template-columns: 1fr; }
  .action-center-type-filters { flex-wrap: wrap; }
  .action-center-type-label { flex-basis: 100%; }
}

.tenant-logo-preview-wrap {
    min-height: 86px;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tenant-logo-preview {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.tenant-logo-fallback {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
}

.sidebar-bottom {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.app-locale-switcher {
    width: 160px;
    margin-bottom: 12px;
}

.app-locale-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.app-locale-btn {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: #fff;
    color: #1a1a2e;
    font-weight: 600;
    padding: 8px 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.app-locale-btn:hover {
    border-color: #e30513;
    color: #e30513;
}

.app-locale-btn.active {
    background: #e30513;
    border-color: #e30513;
    color: #fff;
}

#checkUpdateBtn {
    width: 140px;
}

@keyframes update-wobble {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

#checkUpdateBtn.update-alert {
    animation: update-wobble 0.9s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.7);
}

.sidebar a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    margin: 5px 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.sidebar a:hover {
    background-color: #e30513;
}
.sidebar a.active {
    background-color: #e30513;
    font-weight: 600;
}

#toggleDarkMode {
    display: none !important;
}

.container {
    box-sizing: border-box;
    width: calc(100% - var(--app-sidebar-width));
    margin-left: var(--app-sidebar-width);
    padding-top: 20px;
    max-width: none;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden;
}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.app-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #eadde0;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    background:
      radial-gradient(circle at 92% 16%, rgba(230, 39, 63, .13), transparent 27%),
      linear-gradient(135deg, #fff 0%, #fff8f9 100%);
    box-shadow: 0 12px 32px rgba(27, 35, 50, .07);
}

.app-hero::before {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -82px;
    width: 190px;
    height: 190px;
    border: 28px solid rgba(230, 39, 63, .045);
    border-radius: 50%;
    pointer-events: none;
}

.app-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.app-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 520px;
    max-width: 860px;
    padding-left: 0;
}

.app-hero-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #ef3c52, #c9162c);
    box-shadow: 0 9px 20px rgba(210, 24, 47, .23);
    color: #fff;
    font-size: 1.5rem;
}

.app-hero-eyebrow {
    margin-bottom: 3px;
    color: #e6273f;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.app-hero-title {
    margin: 0;
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: #172033;
}

.app-hero-copy.tenant-title-wide {
    width: 100%;
    max-width: none;
}

@media (min-width: 1200px) {
    .app-hero-title.tenant-title-single-line {
        max-width: 100%;
        font-size: clamp(1.45rem, 1.55vw, 1.85rem);
        white-space: nowrap;
    }
}

.app-hero-subtitle {
    margin-top: 5px;
    max-width: 760px;
    font-size: .84rem;
    line-height: 1.45;
    color: #667085;
}

.app-hero-meta {
    margin-top: 7px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #8a94a3;
    font-size: .7rem;
}

.app-hero-subtitle:empty,
.app-hero-meta:empty {
    display: none;
}

.app-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-left: auto;
    position: relative;
    z-index: 1;
}

.app-hero-actions .btn {
    min-width: 132px;
    border-radius: 12px;
    padding: 9px 16px;
    font-weight: 600;
}

.app-hero .btn-primary {
    border-color: #e6273f;
    background: #e6273f;
}

.app-hero .btn-outline-primary {
    border-color: #e98b98;
    color: #c9162c;
}

.app-hero .btn-outline-primary:hover,
.app-hero .btn-primary:hover {
    border-color: #c9162c;
    background: #c9162c;
    color: #fff;
}

.app-toolbar-panel {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #dbe6f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.app-toolbar-panel .search-container {
    margin-left: 0;
}

.app-toolbar-card,
.app-surface-card,
.app-summary-card {
    border: 1px solid #e4e9f0 !important;
    border-radius: 15px !important;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 32, 51, .055) !important;
    overflow: hidden;
}

.app-toolbar-card > .card-body {
    padding: 13px 15px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
}

.app-surface-card > .card-header {
    padding: 12px 15px;
    border-bottom: 1px solid #e4e9f0;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    color: #172033;
    font-size: .82rem;
    font-weight: 600;
}

.app-summary-card {
    position: relative;
    min-height: 88px;
}

.app-summary-card::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -34px;
    width: 78px;
    height: 78px;
    border: 13px solid #e6273f;
    border-radius: 50%;
    opacity: .035;
    pointer-events: none;
}

.app-summary-card > .card-body {
    position: relative;
    z-index: 1;
    padding: 14px 15px;
}

.app-summary-card .text-muted,
.app-summary-card .small {
    font-size: .68rem;
}

.app-summary-card .fs-3,
.app-summary-card .fs-4,
.app-summary-card .display-6,
.app-summary-card .rem-summary-value {
    color: #172033;
    font-size: 1.45rem !important;
    line-height: 1.1;
}

.app-hero-row > .btn {
    position: relative;
    z-index: 1;
    margin-left: auto;
}

.app-workspace-tabs {
    gap: 5px;
    padding: 6px;
    border: 1px solid #e4e9f0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(23, 32, 51, .045);
}

.app-workspace-tabs .nav-link {
    border: 0 !important;
    border-radius: 9px !important;
    color: #667085;
    font-size: .75rem;
    font-weight: 600;
}

.app-workspace-tabs .nav-link.active {
    background: #fff0f2 !important;
    color: #c9162c !important;
}

.app-accordion {
    display: grid;
    gap: 10px;
}

.app-accordion .accordion-item {
    overflow: hidden;
    border: 1px solid #e4e9f0;
    border-radius: 13px !important;
    box-shadow: 0 6px 18px rgba(23, 32, 51, .045);
}

.app-accordion .accordion-button {
    padding: 13px 15px;
    background: #fff;
    color: #344054;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: none;
}

.app-accordion .accordion-button:not(.collapsed) {
    background: #fff6f7;
    color: #bd1730;
}

.search-container {
    margin-left: auto;
}

.option-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.option-filter-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

.option-filter-check {
    display: none;
}

.option-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
    margin: 0;
    line-height: 1.2;
}

.option-filter-chip:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.option-filter-check:checked + .option-filter-chip {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .15);
}

.option-filter-check:checked + .option-filter-chip.priority-filter-chip.priority-p1 {
    background: #842029;
    border-color: #842029;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(132, 32, 41, .18);
}

.option-filter-check:checked + .option-filter-chip.priority-filter-chip.priority-p2 {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.option-filter-check:checked + .option-filter-chip.priority-filter-chip.priority-p3 {
    background: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, .18);
}

.option-filter-check:checked + .option-filter-chip.priority-filter-chip.priority-p4 {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.option-filter-inline .option-filter-title {
    margin-right: 2px;
}

.option-filter-dropdown-btn {
    min-width: 180px;
    height: 30px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 28px;
    text-align: left;
}

.option-filter-select {
    width: auto;
    min-width: 150px;
    height: 30px;
    border-radius: 999px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    line-height: 28px;
    color: #495057;
    border-color: #d0d7de;
    background-color: #fff;
}

.model-multiselect .dropdown-toggle::after {
    float: right;
    margin-top: .7rem;
}

.model-multiselect .dropdown-menu {
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
}

.model-filter-options {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.model-multiselect .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    margin-bottom: .35rem;
}

.model-multiselect .form-check-input {
    float: none;
    margin: 0;
}

.model-multiselect .form-check-label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    text-align: left;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }

    .container {
        width: 100%;
        margin-left: 0;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .app-hero {
        padding: 20px;
    }

    .app-hero-copy {
        max-width: none;
        padding-left: 0;
    }

    .app-hero-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
        font-size: 1.25rem;
    }

    .app-hero-title {
        font-size: 1.45rem;
    }

    .app-hero-meta {
        display: flex;
        border-radius: 14px;
    }

    .app-hero-actions {
        width: 100%;
    }

    .app-hero-actions .btn {
        width: 100%;
    }
    
    .search-container {
        margin-left: 0;
        width: 100%;
    }

    .option-filter-inline {
        width: 100%;
    }
    
    .search-input {
        width: 100% !important;
    }
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.dashboard-table th,
.dashboard-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.dashboard-table th {
    background-color: #f2f2f2;
    color: #333;
}

.dashboard-table td {
    background-color: #ffffff;
}

.accordion-button {
    background-color: #f5f5f5;
    color: #333;
}

.footer {
    text-align: center;
    margin-top: 20px;
    color: #888;
}

.modal-content {
    padding: 20px;
}

#customerDetailsModal .modal-content,
#xeroxDeviceDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
}

#customerDetailsModal .modal-header,
#customerDetailsModal .modal-footer,
#xeroxDeviceDetailsModal .modal-header,
#xeroxDeviceDetailsModal .modal-footer {
    padding: 1rem 1.25rem;
}

#customerDetailsModal .modal-body,
#xeroxDeviceDetailsModal .modal-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b6c2d1 transparent;
}

#customerDetailsBody {
    min-width: 0;
    overflow-wrap: anywhere;
}

#customerDetailsModal .modal-body::-webkit-scrollbar,
#xeroxDeviceDetailsModal .modal-body::-webkit-scrollbar {
    width: 10px;
}

#customerDetailsModal .modal-body::-webkit-scrollbar-track,
#xeroxDeviceDetailsModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#customerDetailsModal .modal-body::-webkit-scrollbar-thumb,
#xeroxDeviceDetailsModal .modal-body::-webkit-scrollbar-thumb {
    background: #b6c2d1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.app-modal-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e6273f;
    color: #fff;
    box-shadow: 0 8px 18px rgba(230, 39, 63, .2);
}

.app-modal-eyebrow {
    margin-bottom: 2px;
    color: #e6273f;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-details-modal-dialog {
    max-width: min(1040px, calc(100vw - 1.5rem));
}

/* Firmware catalog editor follows the same compact visual language as Compliance details. */
.firmware-family-modal-dialog {
    max-width: min(1080px, calc(100vw - 1.5rem));
}

#firmwareFamilyModal .modal-content {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f7f9fc;
    box-shadow: 0 24px 70px rgba(16, 42, 74, .24);
}

#firmwareFamilyModal form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#firmwareFamilyModal .modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid #e7dfe3;
    background: linear-gradient(100deg, #fff 0%, #fff 54%, #fff0f3 100%);
}

.firmware-family-modal-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

#firmwareFamilyModal .app-modal-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
    background: #102a4a;
    box-shadow: 0 8px 18px rgba(16, 42, 74, .2);
}

#firmwareFamilyModal .modal-title {
    color: #172033;
    font-size: 1.04rem;
    font-weight: 600;
}

.firmware-family-modal-subtitle {
    margin-top: 2px;
    color: #667085;
    font-size: .73rem;
}

#firmwareFamilyModal .modal-body {
    padding: 16px 20px 20px;
    overflow-x: hidden;
    background: #f7f9fc;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b6c2d1 transparent;
}

.firmware-family-section {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(23, 32, 51, .035);
}

.firmware-family-section:last-child {
    margin-bottom: 0;
}

.firmware-family-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #e8edf3;
    background: linear-gradient(90deg, #f8fafc, #fff7f8);
}

.firmware-family-section-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 9px;
    background: #ffe9ed;
    color: #e6273f;
}

.firmware-family-section-header h6 {
    margin: 0;
    color: #172033;
    font-size: .86rem;
    font-weight: 600;
}

.firmware-family-section-header p {
    margin: 2px 0 0;
    color: #667085;
    font-size: .69rem;
}

.firmware-family-section-body {
    padding: 14px;
}

#firmwareFamilyModal .form-label {
    margin-bottom: 5px;
    color: #526178;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .025em;
}

#firmwareFamilyModal .form-control,
#firmwareFamilyModal .form-select {
    border-color: #d6dfeb;
    border-radius: 9px;
    color: #263247;
    font-size: .82rem;
}

#firmwareFamilyModal input.form-control,
#firmwareFamilyModal .form-select {
    min-height: 39px;
}

#firmwareFamilyModal .form-control:focus,
#firmwareFamilyModal .form-select:focus {
    border-color: #ef8d9b;
    box-shadow: 0 0 0 3px rgba(230, 39, 63, .1);
}

#firmwareFamilyModal .form-text {
    margin-top: 4px;
    color: #7a8597;
    font-size: .66rem;
}

#firmwareFamilyModal .firmware-release-history {
    padding: 10px;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    background: #f8fafc;
}

#firmwareFamilyModal .modal-footer {
    gap: 8px;
    padding: 11px 20px;
    border-top: 1px solid #dfe6ef;
    background: #fff;
}

#firmwareFamilyModal .modal-footer .btn {
    min-width: 92px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 600;
}

#firmwareFamilyFeedback {
    min-width: 0;
    color: #526178;
}

.firmware-proposal-details-dialog {
    max-width: min(1120px, calc(100vw - 1.5rem));
}

#firmwareProposalDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f7f9fc;
    box-shadow: 0 24px 70px rgba(16, 42, 74, .24);
}

#firmwareProposalDetailsModal .modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid #e7dfe3;
    background: linear-gradient(100deg, #fff 0%, #fff 54%, #fff0f3 100%);
}

#firmwareProposalDetailsModal .app-modal-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
    background: #102a4a;
    box-shadow: 0 8px 18px rgba(16, 42, 74, .2);
}

#firmwareProposalDetailsModal .modal-body {
    padding: 16px 20px 20px;
    overflow-x: hidden;
    background: #f7f9fc;
}

#firmwareProposalDetailsModal .modal-footer {
    padding: 11px 20px;
    border-top: 1px solid #dfe6ef;
    background: #fff;
}

.firmware-proposal-run-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.firmware-proposal-stat {
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #dfe6ef;
    border-radius: 11px;
    background: #fff;
}

.firmware-proposal-stat > span {
    display: block;
    margin-bottom: 4px;
    color: #738096;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.firmware-proposal-stat > strong {
    color: #172033;
    font-size: .86rem;
    font-weight: 600;
}

.firmware-proposal-device-table {
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 12px;
    background: #fff;
}

.firmware-proposal-device-table .settings-table {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.firmware-proposal-log-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    background: #fff;
}

.firmware-proposal-log-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8edf3;
    color: #172033;
    font-size: .82rem;
    font-weight: 600;
}

.firmware-proposal-log-heading small {
    color: #7a8597;
    font-size: .65rem;
    font-weight: 400;
}

.firmware-proposal-timeline {
    display: grid;
    gap: 8px;
}

.firmware-proposal-timeline-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.firmware-proposal-timeline-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 8px;
    background: #eef3f8;
    color: #244769;
    font-size: .72rem;
}

.firmware-proposal-timeline-item strong,
.firmware-proposal-timeline-item small {
    display: block;
}

.firmware-proposal-timeline-item strong {
    color: #344054;
    font-size: .72rem;
    font-weight: 600;
}

.firmware-proposal-timeline-item small {
    color: #7a8597;
    font-size: .64rem;
}

.firmware-proposal-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 9px;
    color: #526178;
    font-size: .68rem;
}

.firmware-proposal-result-log {
    min-width: 0;
}

.firmware-proposal-result-item {
    padding: 8px 10px;
    border: 1px solid #e4e9f0;
    border-radius: 9px;
    background: #f8fafc;
}

.firmware-proposal-result-item + .firmware-proposal-result-item {
    margin-top: 7px;
}

.firmware-proposal-result-item > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.firmware-proposal-result-item strong,
.firmware-proposal-result-item span,
.firmware-proposal-result-item small {
    display: block;
    font-size: .67rem;
}

.firmware-proposal-result-item span {
    color: #16834f;
    text-align: right;
}

.firmware-proposal-result-item small {
    margin-top: 2px;
    color: #667085;
}

.firmware-action-processing {
    position: relative;
    cursor: wait !important;
    animation: firmware-action-pulse 1s ease-in-out infinite;
}

.firmware-action-processing .spinner-border {
    width: .78rem;
    height: .78rem;
    border-width: .12em;
}

.firmware-proposal-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.firmware-proposal-sort i {
    color: #98a2b3;
    font-size: .67rem;
}

.firmware-proposal-sort:hover,
.firmware-proposal-sort:focus-visible,
.firmware-proposal-sort.is-active {
    color: #e6273f;
}

.firmware-proposal-sort.is-active i {
    color: #e6273f;
}

.firmware-proposal-sort:focus-visible {
    border-radius: 4px;
    outline: 2px solid rgba(230, 39, 63, .25);
    outline-offset: 3px;
}

@keyframes firmware-action-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(36, 71, 105, 0); }
    50% { box-shadow: 0 0 0 4px rgba(36, 71, 105, .14); }
}

@media (prefers-reduced-motion: reduce) {
    .firmware-action-processing {
        animation: none;
    }
}

@media (max-width: 991px) {
    .firmware-proposal-run-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #firmwareFamilyModal .modal-header,
    #firmwareFamilyModal .modal-body,
    #firmwareFamilyModal .modal-footer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .firmware-family-modal-subtitle,
    .firmware-family-section-header p {
        display: none;
    }

    #firmwareFamilyModal .modal-footer {
        flex-wrap: wrap;
    }

    #firmwareFamilyFeedback {
        width: 100%;
    }

    #firmwareProposalDetailsModal .modal-header,
    #firmwareProposalDetailsModal .modal-body,
    #firmwareProposalDetailsModal .modal-footer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .firmware-proposal-run-summary {
        grid-template-columns: 1fr;
    }
}

.settings-container {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e4e9f0;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(23, 32, 51, .06);
}

.settings-form {
    max-width: 1800px;
    margin: 20px auto;
}

.settings-table,
.app-data-table {
    width: 100%;
    margin-top: 12px;
    border: 1px solid #e4e9f0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(23, 32, 51, .045);
    color: #344054;
    overflow: hidden;
}

.app-data-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #fbfcfd;
    --bs-table-hover-bg: #fff6f7;
    --bs-table-color: #344054;
}

.content-section > h2 {
    margin: 4px 0 14px;
    color: #172033;
    font-size: clamp(1.25rem, 1.5vw, 1.55rem);
    font-weight: 600;
    letter-spacing: -.025em;
}

.settings-table thead,
.app-data-table thead {
    background: transparent;
}

.settings-table th,
.app-data-table th {
    padding: 9px 11px;
    border-bottom: 1px solid #dfe4ea;
    background-color: #f4f6f9;
    color: #667085;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-table td,
.app-data-table td {
    padding: 9px 11px;
    border-bottom: 1px solid #edf0f4;
    background: transparent;
    color: #344054;
    font-size: .76rem;
    vertical-align: middle;
}

.settings-table tbody tr,
.app-data-table tbody tr {
    transition: background-color .15s ease;
}

.settings-table tbody tr:nth-child(even),
.app-data-table tbody tr:nth-child(even) {
    background: #fbfcfd;
}

.settings-table tbody tr:hover,
.app-data-table tbody tr:hover {
    background: #fff6f7;
}

.settings-table tbody tr:last-child td,
.app-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-management-page {
    --users-border: #d8e1ea;
    --users-muted: #667085;
    --users-header: #f7f9fc;
}

.user-management-page .users-page-container {
    max-width: none;
}

.user-management-page .app-hero {
    margin-bottom: 14px;
    padding: 18px 22px;
}

.user-management-page .app-hero-title {
    font-size: 1.55rem;
}

.user-management-page .app-hero-subtitle {
    margin-top: 4px;
}

.user-management-page .app-hero-meta {
    margin-top: 10px;
}

.users-management-shell {
    display: grid;
    gap: 14px;
}

.user-management-page .card {
    border: 1px solid var(--users-border);
    border-radius: 8px;
}

.user-management-page .card-body {
    padding: 14px;
}

.users-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.users-card-header h4,
.users-add-card h4 {
    font-size: 1.05rem;
}

.user-management-page .form-label {
    margin-bottom: 4px;
    color: #344054;
    font-size: .74rem;
    font-weight: 600;
}

.users-add-card {
    margin-bottom: 0 !important;
}

.users-add-form .form-control,
.users-add-form .form-select,
.user-role-form .form-control,
.user-role-form .form-select,
.user-list-table .form-control,
.user-list-table .form-select {
    min-height: 30px;
    font-size: .82rem;
}

.user-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--users-border);
    border-radius: 8px;
    background: #fff;
}

.user-table-wrap .settings-table {
    margin-top: 0;
    box-shadow: none;
    table-layout: fixed;
    border-radius: 0;
}

.user-table-wrap .settings-table thead {
    background: transparent;
}

.user-table-wrap .settings-table th,
.user-table-wrap .settings-table td {
    padding: 7px 8px;
    vertical-align: middle;
}

.user-table-wrap .settings-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--users-header);
    color: #172033;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.user-table-wrap .settings-table td {
    color: #172033;
    font-size: .82rem;
}

.user-table-wrap .settings-table tbody tr:hover {
    background: #f7fbff;
}

.user-list-table {
    min-width: 1530px;
}

.user-list-table th:nth-child(1),
.user-list-table td:nth-child(1),
.user-id-cell {
    width: 48px;
}

.user-list-table th:nth-child(2),
.user-list-table td:nth-child(2),
.user-name-cell {
    width: 145px;
}

.user-list-table th:nth-child(3),
.user-list-table td:nth-child(3),
.user-email-cell {
    width: 230px;
}

.user-list-table th:nth-child(4),
.user-list-table td:nth-child(4),
.user-role-cell {
    width: 200px;
}

.user-list-table th:nth-child(5),
.user-list-table td:nth-child(5),
.user-tenant-cell {
    width: 390px;
}

.user-list-table th:nth-child(6),
.user-list-table td:nth-child(6),
.user-created-cell {
    width: 170px;
}

.user-list-table th:nth-child(7),
.user-list-table td:nth-child(7),
.user-password-cell {
    width: 220px;
}

.user-list-table th:nth-child(8),
.user-list-table td:nth-child(8),
.user-actions-cell {
    width: 128px;
}

.user-roles-table {
    min-width: 1070px;
}

.user-roles-table th:nth-child(1),
.user-roles-table td:nth-child(1),
.role-name-cell {
    width: 150px;
}

.user-roles-table th:nth-child(2),
.user-roles-table td:nth-child(2),
.role-description-cell {
    width: 230px;
}

.user-roles-table th:nth-child(4),
.user-roles-table td:nth-child(4),
.role-count-cell {
    width: 60px;
    text-align: center;
}

.user-roles-table th:nth-child(5),
.user-roles-table td:nth-child(5),
.role-type-cell {
    width: 86px;
    text-align: center;
}

.user-roles-table th:nth-child(6),
.user-roles-table td:nth-child(6),
.role-actions-cell {
    width: 78px;
}

.role-description-cell {
    color: #344054;
}

.tenant-checkbox-list,
#addUserTenantAccess {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#addUserTenantAccess {
    min-height: 32px;
    padding: 5px !important;
}

.tenant-check-pill,
.user-permission-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--users-border);
    border-radius: 6px;
    background: #fff;
    color: #172033;
    font-size: .74rem;
    line-height: 1.15;
    white-space: nowrap;
}

.tenant-check-pill .form-check-input,
.user-permission-option .form-check-input {
    width: 13px;
    height: 13px;
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

.tenant-check-pill:has(.form-check-input:checked),
.user-permission-option:has(.form-check-input:checked) {
    border-color: #86b7fe;
    background: #eef5ff;
}

.tenant-check-pill:has(.form-check-input:disabled) {
    opacity: .75;
}

.tenant-access-editor {
    display: grid;
    gap: 4px;
}

.tenant-access-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tenant-access-line .tenant-checkbox-list {
    flex: 1 1 auto;
    min-width: 0;
}

.tenant-default-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
}

.tenant-default-inline span {
    color: var(--users-muted);
    font-size: .68rem;
    font-weight: 600;
}

.tenant-default-select {
    width: 160px;
    max-width: 160px;
}

.permission-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-right: 3px;
}

.permission-editor-section {
    min-width: 0;
}

.permission-editor-title {
    margin-bottom: 5px;
    color: #344054;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.permission-editor-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.permission-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding-right: 2px;
}

.permission-chip-list .badge {
    margin: 0;
    font-size: .62rem;
    line-height: 1.1;
    white-space: nowrap;
}

.user-role-form {
    background: #fbfdff;
}

.users-compact-editor {
    padding: 12px !important;
}

.user-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.user-action-buttons .btn {
    min-width: 46px;
    padding: 4px 8px;
    font-size: .74rem;
}

@media (max-width: 1100px) {
    .permission-editor-grid {
        grid-template-columns: 1fr;
    }
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.btn-icon:hover {
    opacity: 0.8;
}

.password-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compliance-login-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compliance-password-field {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #fbfcfe;
}

.compliance-password-field .password-text {
    min-width: 72px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 576px) {
    .compliance-login-row {
        flex-direction: column;
        align-items: stretch;
    }

    .compliance-password-field {
        justify-content: space-between;
    }
}

h1, h2 {
    color: #333;
    font-size: 1.5rem;
}

ul {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

li {
    margin-bottom: 10px;
}

.image {
    max-width: 100%;
    display: block;
    margin: 10px 0;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.form-check-input[type=checkbox] {
    width: 20px;
}

.compliance-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    flex: 1;
    min-width: 220px;
    padding: 20px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-card.compliant {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
}

.stat-card.non-compliant {
    background: linear-gradient(135deg, #F44336, #C62828);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 10px 0;
}

.stat-percent {
    font-size: 1.2rem;
    opacity: 0.9;
}

.stat-detail {
    margin-top: 6px;
    font-size: .82rem;
    opacity: .78;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

.compliance-grid > div {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

@media (max-width: 992px) {
    .compliance-grid {
        grid-template-columns: 1fr;
    }
}

.compliance-status-column h3 {
    color: #333;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    margin-bottom: 15px;
    font-size: 1.35rem;
}

.compliant-customers h3 {
    color: #2E7D32;
}

.non-compliant-customers h3 {
    color: #C62828;
}

.unknown-customers h3 {
    color: #6c757d;
}

.excluded-customers h3 {
    color: #9a7100;
}

.compliance-status-column .customer-cards,
.compliance-status-column .accordion-container {
    grid-template-columns: 1fr;
}

.communication-health-panel {
    overflow: hidden;
    border: 1px solid #efcf78;
    border-left: 4px solid #e3a600;
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 2px 8px rgba(80, 59, 0, 0.06);
}

.communication-health-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 72px;
    padding: 10px 14px;
}

.communication-health-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
}

.communication-health-icon {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #ffe7a3;
    color: #8a6200;
    font-size: 1.1rem;
}

.communication-health-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #2c3138;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.communication-health-title .badge {
    font-size: .73rem;
}

.communication-health-subtitle {
    margin-top: 2px;
    color: #6d6553;
    font-size: .72rem;
    line-height: 1.25;
}

.communication-health-metrics {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 7px;
    max-width: 660px;
}

.communication-health-metric {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #ebdfc4;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: #655d4e;
    font-family: inherit;
    font-size: .69rem;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.communication-health-metric:hover,
.communication-health-metric:focus-visible {
    border-color: #d8a828;
    background: #fff;
    box-shadow: 0 2px 6px rgba(120, 83, 0, .12);
}

.communication-health-metric.active {
    border-color: #ca9000;
    background: #fff0b8;
    box-shadow: inset 0 0 0 1px rgba(202, 144, 0, .22);
}

.communication-health-metric-all {
    align-items: center;
}

.communication-health-metric-all i {
    font-size: .85rem;
}

.communication-health-metric strong {
    color: #28303b;
    font-size: 1rem;
}

.communication-health-metric-warning {
    border-color: #f0c76a;
}

.communication-health-metric-critical {
    border-color: #e9a5a5;
    color: #9b2929;
}

.communication-health-metric-critical strong {
    color: #b4232f;
}

.communication-health-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    white-space: nowrap;
}

.communication-toggle-hide {
    display: none;
}

#toggleCommunicationPanel[aria-expanded="true"] .communication-toggle-show {
    display: none;
}

#toggleCommunicationPanel[aria-expanded="true"] .communication-toggle-hide {
    display: inline;
}

#toggleCommunicationPanel[aria-expanded="true"] .communication-toggle-icon {
    display: inline-block;
    transform: rotate(180deg);
}

.communication-health-details {
    padding: 12px 14px 10px;
    border-top: 1px solid #efdfb8;
    background: #fff;
}

.communication-health-details[hidden] {
    display: none !important;
}

.communication-health-panel.has-no-issues {
    border-color: #a8d8b3;
    border-left-color: #2f9b4b;
    background: #f4fbf6;
}

.communication-health-panel.has-no-issues .communication-health-icon {
    background: #d9f1df;
    color: #24783a;
}

.communication-health-panel.has-load-error {
    border-color: #e5a1a8;
    border-left-color: #c93645;
    background: #fff7f8;
}

.communication-health-panel.has-load-error .communication-health-icon {
    background: #f8dadd;
    color: #a92130;
}

@media (max-width: 1100px) {
    .communication-health-summary {
        flex-wrap: wrap;
    }

    .communication-health-identity {
        flex: 1 1 360px;
    }

    .communication-health-metrics {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .communication-health-summary {
        gap: 10px;
        padding: 10px;
    }

    .communication-health-identity,
    .communication-health-actions {
        min-width: 0;
        width: 100%;
    }

    .communication-health-actions {
        justify-content: stretch;
    }

    .communication-health-actions .btn {
        flex: 1 1 0;
    }

    .communication-health-metrics {
        grid-template-columns: 1fr;
    }

    .communication-health-metric {
        justify-content: space-between;
    }
}

.customer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }

.customer-cards.customer-cards-compact {
    grid-template-columns: 1fr;
    gap: 10px;
}

.customer-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border-left: 4px solid;
}

.customer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.customer-card.compliant {
    border-left-color: #4CAF50;
}

.customer-card.non-compliant {
    border-left-color: #F44336;
}

.customer-card.action-recency-today {
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-card.action-recency-yesterday,
.customer-card.action-recency-week {
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.26), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.customer-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.customer-status.compliant {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.customer-status.non-compliant {
    background-color: #FFEBEE;
    color: #C62828;
}

.customer-status.unknown {
    background-color: #fff7e6;
    color: #b26a00;
}

.customer-device-count {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.customer-device-count.non-compliant {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b42333;
}

.customer-device-count.excluded {
    border-color: #f2cb62;
    background: #fff7df;
    color: #8a6200;
}

.customer-card-topline > .customer-device-count {
    justify-content: center;
    min-width: 24px;
    flex-shrink: 0;
    margin-top: 0;
}

.customer-action-recency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.customer-action-recency.today {
    background-color: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.customer-action-recency.yesterday {
    background-color: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #075985;
}

.customer-action-recency.week {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
}

.customer-action-recency.older {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

.customer-action-recency.none {
    background-color: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.customer-open-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 1px 5px;
    border: 1px solid #f2c45c;
    border-radius: 999px;
    background: #fff4cf;
    color: #8a5a00;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.25;
    vertical-align: middle;
    white-space: nowrap;
}

.compliance-open-action-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    background: #fff;
}

.compliance-open-action-filter-chip i,
.customer-open-actions i { color: #d68a00; }

body.dark-mode .customer-open-actions {
    border-color: #8f6b22;
    background: #4a3a19;
    color: #ffe29a;
}

body.dark-mode .compliance-open-action-filter {
    border-color: #344a63;
    background: #1c2e44;
}

.customer-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.customer-subtext {
    margin-top: 6px;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.35;
}

#unknownCustomers .customer-card {
    padding: 10px 12px;
    border-left-color: #d4a017;
}

#unknownCustomers .customer-name {
    margin-bottom: 0;
    line-height: 1.3;
}

#unknownCustomers .customer-status {
    flex-shrink: 0;
    white-space: nowrap;
}

.customer-priority-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.customer-priority-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.customer-priority-chip.priority-p1 {
    background: #842029;
}

.customer-priority-chip.priority-p2 {
    background: #dc3545;
}

.customer-priority-chip.priority-p3 {
    background: #fd7e14;
}

.customer-priority-chip.priority-p4 {
    background: #6c757d;
}

.compliance-priority-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.customer-models {
    margin-top: 6px;
    font-size: 0.73rem;
    color: #6b7280;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.noncompliant-device-inline {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.noncompliant-device-total {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.noncompliant-model-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.noncompliant-model-summary-label strong {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
}

.noncompliant-model-chips,
.noncompliant-model-overflow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.noncompliant-model-overflow[hidden] {
    display: none;
}

.noncompliant-model-chip,
.noncompliant-model-more {
    min-height: 0;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    font-size: 0.62rem;
    line-height: 1.2;
    white-space: nowrap;
}

.noncompliant-model-chip:hover,
.noncompliant-model-chip:focus-visible,
.noncompliant-model-chip.active,
.noncompliant-model-more:hover,
.noncompliant-model-more:focus-visible {
    color: #b42333;
    background: #fff;
}

.compliance-email-composer {
    border-top: 1px solid rgba(13, 110, 253, 0.15);
    padding-top: 12px;
}

.compliance-email-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compliance-email-grid > div,
.compliance-email-grid .form-control {
    min-width: 0;
}

.compliance-email-template-row {
    display: grid;
    gap: 6px;
}

.compliance-email-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.compliance-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.compliance-email-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.compliance-email-editor {
    min-height: 140px;
    background: #fff;
    overflow-y: auto;
}

.compliance-email-editor:empty:before {
    content: attr(data-placeholder);
    color: #6c757d;
}

.customer-devices {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
}

.stat-card.unknown {
    background-color: #a9a5a5;
    border-left: 5px solid #6c757d;
}

.stat-card.excluded {
    background: linear-gradient(135deg, #d59b00, #8a6500);
    border-left: 5px solid #664d03;
}

.customer-card.excluded {
    background-color: #fffaf0;
    border-left: 4px solid #d59b00;
}

.customer-status.excluded {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #f2cf73;
}

.customer-card.unknown {
    background-color: #f9f9f9;
    border-left: 4px solid #6c757d;
}

.unknown-customers .customer-name {
    font-weight: 500;
}

.text-danger {
    font-size: 0.9em;
    font-weight: 500;
    color: #C62828;
}

.text-success {
    font-weight: 500;
    color: #2E7D32;
}

.text-muted {
    font-size: 0.85em;
}

.login-wrapper {
    display: grid;
    min-height: 100vh;
    place-items: center;
    position: relative;
    overflow-x: hidden;
    padding: 40px;
    background:
        radial-gradient(circle at 12% 15%, rgba(230, 47, 71, .10), transparent 27%),
        radial-gradient(circle at 88% 84%, rgba(43, 99, 181, .10), transparent 30%),
        linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
    color: #172033;
    font-family: 'Poppins', sans-serif;
}

.login-wrapper::before,
.login-wrapper::after {
    position: fixed;
    width: 340px;
    height: 340px;
    border: 54px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.login-wrapper::before { top: -175px; right: -130px; }
.login-wrapper::after { bottom: -210px; left: -150px; }

.login-shell {
    display: grid;
    z-index: 1;
    width: min(980px, 100%);
    min-height: 590px;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(214, 221, 231, .92);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(26, 39, 63, .16);
}

.login-brand-panel {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 54px 52px 38px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .14), transparent 34%),
        linear-gradient(145deg, #171a2f 0%, #202541 58%, #2b2f4e 100%);
    color: #fff;
}

.login-brand-panel::before {
    position: absolute;
    right: -145px;
    bottom: -125px;
    width: 390px;
    height: 390px;
    border: 62px solid rgba(230, 47, 71, .18);
    border-radius: 50%;
    content: '';
}

.login-brand-panel::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #eb2945;
    content: '';
}

.login-brand-content,
.login-brand-footer { position: relative; z-index: 1; }

.login-brand-mark,
.login-mobile-brand {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #f23b54, #db1634);
    box-shadow: 0 12px 28px rgba(230, 47, 71, .32);
    color: #fff;
    font-size: 1.45rem;
}

.login-brand-eyebrow,
.login-card-eyebrow {
    margin: 28px 0 8px;
    color: #ff6c7f;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-brand-panel h1 {
    max-width: 430px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.045em;
}

.login-brand-description {
    max-width: 430px;
    margin: 18px 0 0;
    color: #c5cad8;
    font-size: .9rem;
    line-height: 1.75;
}

.login-capabilities {
    display: grid;
    gap: 13px;
    margin-top: 38px;
}

.login-capabilities > div {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #e8eaf1;
    font-size: .78rem;
    font-weight: 500;
}

.login-capabilities i {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #ff7183;
}

.login-brand-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
    color: #9ca4b8;
    font-size: .68rem;
}

.login-mobile-brand { display: none; }

.login-card-heading-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 7px;
}

.login-locale-host {
    display: inline-flex;
    width: max-content;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
}

.login-locale-host .app-locale-switcher {
    width: max-content !important;
    min-width: 0 !important;
    margin-bottom: 0;
    padding: 2px;
    border: 1px solid #e0e5ed;
    border-radius: 8px;
    background: #f6f7f9;
    box-shadow: none;
}

.login-locale-host .app-locale-switcher label {
    display: none !important;
}

.login-locale-host .app-locale-buttons {
    display: inline-flex;
    width: auto !important;
    gap: 2px;
}

.login-locale-host .app-locale-btn {
    width: auto !important;
    min-width: 30px;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-locale-host .app-locale-btn:hover {
    background: #fff;
    color: #172033;
}

.login-locale-host .app-locale-btn.active {
    background: #fff;
    color: #df1f3b;
    box-shadow: 0 1px 4px rgba(23, 32, 51, .11);
}

.login-card {
    display: flex;
    position: relative;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 58px 52px;
    background: #fff;
}

.login-card h2 {
    margin: 0;
    color: #172033;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.login-card-eyebrow { margin: 0; color: #e62f47; }

.login-card-intro {
    margin: 9px 0 30px;
    color: #667085;
    font-size: .78rem;
    line-height: 1.55;
}

.login-agent-status {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -14px 0 20px;
    padding: 11px 12px;
    border: 1px solid #d9e1eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #344054;
}

.login-agent-status-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef2f7;
}

.login-agent-status strong,
.login-agent-status small { display: block; }
.login-agent-status strong { font-size: .69rem; font-weight: 700; }
.login-agent-status small { margin-top: 2px; color: #7b8797; font-size: .59rem; line-height: 1.35; }
.login-agent-status.is-online { border-color: #abd9c4; background: #f0faf5; color: #087a4f; }
.login-agent-status.is-online .login-agent-status-icon { background: #dff4e9; color: #087a4f; }
.login-agent-status.is-offline { border-color: #fac6ce; background: #fff4f5; color: #b42336; }
.login-agent-status.is-offline .login-agent-status-icon { background: #ffe4e8; color: #d51c39; }
.login-card .login-submit.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.login-field { margin-bottom: 18px; }

.login-card .form-label {
    margin-bottom: 7px;
    color: #344054;
    font-size: .7rem;
    font-weight: 600;
}

.login-input-wrap { position: relative; }

.login-input-wrap > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #7b8797;
    font-size: .92rem;
    pointer-events: none;
}

.login-card .form-control,
.login-card .form-select {
    min-height: 48px;
    padding: 10px 44px 10px 42px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: #f9fbfd;
    color: #172033;
    font-size: .78rem;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-card .form-control:focus,
.login-card .form-select:focus {
    border-color: #e62f47;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(230, 47, 71, .11);
}

.login-password-toggle {
    display: inline-flex;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible { background: #eef2f7; color: #172033; outline: none; }

.login-card .login-submit {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 7px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ee354e, #dc1735);
    box-shadow: 0 9px 22px rgba(224, 30, 59, .22);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    transition: transform .16s ease, box-shadow .16s ease;
}

.login-card .login-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #e92e48, #cc102d);
    box-shadow: 0 12px 26px rgba(224, 30, 59, .28);
    color: #fff;
    transform: translateY(-1px);
}

.login-card .login-submit:disabled { opacity: .72; }

.login-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 25px;
    padding-top: 19px;
    border-top: 1px solid #edf0f4;
    color: #7b8797;
    font-size: .62rem;
    line-height: 1.55;
}

.login-security-note i { margin-top: 1px; color: #2d69b7; font-size: .78rem; }

.login-wrapper .error-message {
    margin: 0 0 16px;
    padding: 9px 11px;
    border: 1px solid #fac6ce;
    border-radius: 9px;
    background: #fff2f4;
    color: #b42336;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.login-wrapper .error-message::before {
    margin-right: 7px;
    font-family: bootstrap-icons;
    content: '\f33a';
}

@media (max-width: 850px) {
    .login-shell { max-width: 470px; min-height: 0; grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .login-card { padding: 45px 38px; }
    .login-mobile-brand { display: inline-flex; margin-bottom: 24px; }
}

@media (max-width: 576px) {
    .login-wrapper {
        display: block;
        padding: 20px 14px;
    }

    .login-card-heading-row { gap: 10px; }

    .login-shell { width: 100%; border-radius: 18px; }
    .login-card { padding: 34px 24px; }
    .login-card h2 { font-size: 1.5rem; }
}

.accordion-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    padding-bottom: 5px;
  }

.accordion-collapsing {
    max-height: 800px;
}

.accordion-expanded {
    max-height: none;
    overflow: visible;
}

.toggle-button {
    display: block;
    margin: 20px auto 0;
    padding: 8px 16px;
    background-color: #e8f5e9;
    border: 1px solid #2E7D32;
    border-radius: 8px;
    color: #2E7D32;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle-button:hover {
    background-color: #c8e6c9;
}

.accordion-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

.policy-device-accordion > summary {
    cursor: pointer;
    list-style-position: inside;
}

.policy-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.compliance-device-summary-list {
    margin: 0;
    padding-left: 1.2rem;
}

.compliance-device-summary-item {
    margin-bottom: 0.75rem;
}

.compliance-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.compliance-summary-main {
    min-width: 0;
    flex: 1 1 320px;
}

.compliance-summary-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.35;
}

.compliance-summary-meta {
    margin-top: 4px;
    padding-left: 20px;
}

.compliance-summary-actions {
    flex: 0 0 auto;
}

.compliance-action-panel {
    margin-top: 0.25rem;
}

.compliance-action-panel .card {
    border-radius: 12px;
}

.compliance-action-form-row .form-control,
.compliance-action-form-row .form-select {
    min-height: 38px;
}

.compliance-action-notes-block textarea {
    min-height: 84px;
    resize: vertical;
}

.compliance-action-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
}

.compliance-action-flags {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.compliance-action-flags .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.compliance-action-save,
.compliance-bulk-action-save {
    min-width: 180px;
    align-self: flex-start;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .compliance-action-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .compliance-action-save,
    .compliance-bulk-action-save {
        width: 100%;
        min-width: 0;
    }
}

.compliance-action-history-table td,
.compliance-action-history-table th {
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.compliance-action-panel .table-responsive {
    overflow-x: visible;
}

.compliance-action-history-table {
    width: 100%;
    table-layout: fixed;
}

.compliance-action-history-table th:nth-child(1),
.compliance-action-history-table td:nth-child(1) {
    width: 12%;
}

.compliance-action-history-table th:nth-child(2),
.compliance-action-history-table td:nth-child(2) {
    width: 14%;
}

.compliance-action-history-table th:nth-child(3),
.compliance-action-history-table td:nth-child(3) {
    width: 14%;
}

.compliance-action-history-table th:nth-child(4),
.compliance-action-history-table td:nth-child(4) {
    width: 28%;
}

.compliance-action-history-table th:nth-child(5),
.compliance-action-history-table td:nth-child(5) {
    width: 16%;
}

.compliance-action-history-table th:nth-child(6),
.compliance-action-history-table td:nth-child(6) {
    width: 16%;
}

.compliance-triage-toolbar {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.compliance-triage-filter-grid {
    display: grid;
    grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(165px, 1fr));
    gap: 8px;
}

.compliance-triage-filter-grid > div,
.compliance-triage-filter-grid .form-control,
.compliance-triage-filter-grid .form-select {
    min-width: 0;
}

.compliance-triage-section + .compliance-triage-section {
    margin-top: 14px;
}

.compliance-triage-section {
    padding: 12px 14px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.compliance-triage-table-wrap {
    border: 1px solid #edf2f7;
    border-radius: 12px;
    overflow: hidden;
    scrollbar-gutter: auto;
    background: #fff;
}

.compliance-triage-table {
    margin: 0;
    width: 100%;
    table-layout: fixed;
}

.compliance-triage-table thead th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6c7b;
    background: #f8fafc;
    border-bottom-width: 1px;
}

.compliance-triage-table td {
    min-width: 0;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.compliance-triage-table .compliance-triage-col-actions,
.compliance-triage-table .compliance-triage-actions-cell {
    width: 112px;
}

.compliance-triage-table .compliance-triage-col-device,
.compliance-triage-table .compliance-triage-device-cell {
    width: 28%;
}

.compliance-triage-table .compliance-triage-col-reason,
.compliance-triage-table .compliance-triage-reason-cell {
    width: 21%;
}

.compliance-triage-table .compliance-triage-col-communication,
.compliance-triage-table .compliance-triage-communication-cell {
    width: 29%;
}

.compliance-triage-table .compliance-triage-col-status,
.compliance-triage-table .compliance-triage-status-cell {
    width: 15%;
}

.compliance-triage-row td {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    vertical-align: middle;
}

.compliance-triage-detail-row td {
    padding: 0;
    border: 0;
    background: #f8fafc;
}

.compliance-triage-detail-cell {
    padding: 0 !important;
}

.compliance-triage-device-cell {
    min-width: 0;
}

.compliance-triage-device-model {
    margin-top: 2px;
    color: #5f6c7b;
    font-weight: 600;
}

.compliance-triage-device-meta {
    display: grid;
    gap: 2px;
}

.compliance-triage-device-meta > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: normal;
}

.compliance-triage-device-meta-label {
    display: inline-block;
    min-width: 2.5rem;
    font-weight: 600;
    color: #5f6c7b;
    flex: 0 0 auto;
}

.compliance-triage-signal-stack {
    display: grid;
    gap: 6px;
}

.compliance-triage-signal-line {
    display: grid;
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.compliance-triage-signal-line .badge {
    min-width: 112px;
    justify-self: start;
    text-align: center;
}

.compliance-triage-signal-line .text-muted {
    white-space: nowrap;
}

.compliance-triage-detail-panel {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    min-width: 0;
    overflow: hidden;
}

.compliance-action-panel .card,
.compliance-action-form,
.compliance-action-notes-block,
.compliance-action-notes-block textarea {
    min-width: 0;
}

.compliance-triage-action-button {
    justify-content: center;
    text-align: center;
}

.compliance-triage-actions-cell {
    white-space: nowrap;
    overflow-wrap: normal !important;
}

.compliance-triage-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}

.compliance-triage-compact-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    line-height: 1.15;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 991.98px) {
    .customer-details-modal-dialog {
        max-width: calc(100vw - 1rem);
    }

    .compliance-action-panel .table-responsive {
        overflow-x: auto;
    }

    .compliance-action-history-table {
        table-layout: auto;
    }

    .compliance-triage-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .compliance-triage-table {
        min-width: 900px;
        table-layout: auto;
    }

    .compliance-triage-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compliance-triage-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .compliance-email-grid {
        grid-template-columns: 1fr;
    }

    .compliance-email-footer {
        align-items: stretch;
    }

    .compliance-email-actions {
        width: 100%;
        justify-content: stretch;
    }

    .compliance-email-actions .btn {
        flex: 1 1 0;
    }

    .compliance-triage-section {
        padding: 10px 10px 12px;
    }

    .compliance-triage-table {
        min-width: 760px;
    }

    .compliance-triage-filter-grid {
        grid-template-columns: 1fr;
    }

    .compliance-triage-search-field {
        grid-column: auto;
    }
}

.policy-device-item {
    margin: 0;
}

.policy-device-accordion {
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #fbfcfe;
    overflow: hidden;
}

.policy-device-summary {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    background: #f3f7fb;
    border-bottom: 1px solid transparent;
    user-select: none;
}

.policy-device-summary::-webkit-details-marker {
    display: none;
}

.policy-device-summary::before {
    content: '>';
    color: #4b647d;
    font-size: 0.85rem;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

.policy-device-summary-main {
    min-width: 0;
    flex: 1 1 auto;
}

.policy-device-detail-button {
    flex-shrink: 0;
}

.policy-device-delete-button {
    flex-shrink: 0;
}

.policy-device-accordion[open] .policy-device-summary {
    border-bottom-color: #d9e2ec;
    background: #edf4fb;
}

.policy-device-accordion[open] .policy-device-summary::before {
    transform: rotate(90deg);
}

.policy-device-meta {
    padding: 10px 12px 2px;
}

.policy-device-meta small {
    color: #5c6b7a;
}

.policy-setting-list {
    margin: 0;
    padding: 8px 14px 10px 30px;
}

.policy-setting-list > li {
    padding: 6px 0;
    border-bottom: 1px dashed #ecf0f4;
}

.policy-setting-list > li:last-child {
    border-bottom: 0;
}

.stale-device-item .card[role="button"] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 14px;
}

.stale-device-item .card[role="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.08) !important;
}

#staleDevicesGrid {
    row-gap: 10px !important;
}

#staleDevicesGrid .card {
    padding: 10px 12px !important;
}

#staleDevicesGrid .badge {
    font-size: 0.68rem;
}

.stale-device-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stale-device-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.stale-device-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.stale-device-title {
    font-weight: 700;
    line-height: 1.25;
    color: #162033;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stale-device-age {
    flex-shrink: 0;
    border-radius: 999px;
    background: #fff7e6;
    color: #b26a00;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.stale-device-meta {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.77rem;
    line-height: 1.3;
}

.stale-device-meta-label {
    min-width: 40px;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    font-weight: 700;
}

.stale-device-meta-value {
    color: #5c6b7a;
    word-break: break-word;
}

.stale-device-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.stale-device-ignore,
.stale-device-retire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    background: #fff;
    color: #6b7280;
    padding: 0;
}

.stale-device-ignore:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

.stale-device-retire:hover {
    background: #fff1f2;
    color: #dc3545;
    border-color: #f5a9b2;
}

.xerox-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.xerox-status-badge {
    text-transform: capitalize;
    font-size: 0.8rem;
}

.xerox-detail-panel {
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    background: #fbfcfe;
    padding: 14px 16px;
}

.xerox-detail-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
}

.xerox-detail-grid {
    display: grid;
    gap: 8px;
}

.xerox-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e7edf3;
}

.xerox-detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.xerox-detail-row span {
    color: #5c6b7a;
    font-size: 0.86rem;
}

.xerox-detail-row strong {
    text-align: right;
    font-size: 0.9rem;
    word-break: break-word;
}

.xerox-device-overview {
    --xerox-ink: #1f3047;
    --xerox-muted: #6a788b;
    --xerox-line: #e5eaf1;
    color: var(--xerox-ink);
}

.xerox-overview-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.xerox-overview-printer {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf2f8;
    color: #405b7b;
    font-size: 1.15rem;
}

.xerox-overview-identity { flex: 1; min-width: 0; }
.xerox-overview-identity h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.xerox-overview-identity p { margin: 0; color: var(--xerox-muted); font-size: 0.76rem; }
.xerox-overview-status { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.xerox-ready-label { color: #37805e; font-size: 0.73rem; white-space: nowrap; }

.xerox-firmware-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: linear-gradient(110deg, #f1f5fb, #fafcfe);
}

.xerox-firmware-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.xerox-firmware-heading > span:first-child { font-size: 0.76rem; font-weight: 600; }
.xerox-firmware-heading i { margin-right: 6px; }
.xerox-firmware-version {
    color: #253f65;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.xerox-overview-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 18px 0; }
.xerox-overview-section h6, .xerox-overview-alerts h6 { margin: 0 0 10px; font-size: 0.8rem; font-weight: 600; }
.xerox-overview-section h6 i, .xerox-overview-alerts h6 i { margin-right: 6px; color: var(--xerox-muted); }
.xerox-overview-facts { margin: 0; }
.xerox-overview-facts > div {
    display: grid;
    grid-template-columns: minmax(115px, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--xerox-line);
    font-size: 0.75rem;
}
.xerox-overview-facts dt { margin: 0; color: var(--xerox-muted); font-weight: 400; }
.xerox-overview-facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.xerox-overview-alerts { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #f0dfb8; border-radius: 10px; background: #fffcf4; }
.xerox-overview-alerts > div { display: flex; flex-wrap: wrap; gap: 8px; }
.xerox-overview-alerts > div > span { padding: 4px 9px; border-radius: 5px; background: #f6edda; color: #7d5f29; font-size: 0.75rem; }
.xerox-overview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 18px; border-top: 1px solid var(--xerox-line); }
.xerox-overview-login { flex: 1 1 360px; min-width: 0; }
.xerox-overview-login .compliance-login-row { margin: 0; }
.xerox-overview-actions > button { flex: 0 0 auto; }
.xerox-device-overview .btn { font-size: 0.75rem; }

body.dark-mode .xerox-device-overview { --xerox-ink: #e0e8f4; --xerox-muted: #a7b5c9; --xerox-line: #344051; }
body.dark-mode .xerox-firmware-card { background: linear-gradient(110deg, #223043, #202938); border-color: #3b4c64; }
body.dark-mode .xerox-overview-printer { background: #28384b; color: #b6ccec; }
body.dark-mode .xerox-firmware-version { color: #d2e2fb; }
body.dark-mode .xerox-overview-alerts { background: #362f22; border-color: #655234; }

@media (max-width: 600px) {
    .xerox-overview-heading { gap: 10px; flex-wrap: wrap; }
    .xerox-overview-printer { flex-basis: 42px; height: 42px; }
    .xerox-overview-identity h4 { font-size: 0.95rem; }
    .xerox-firmware-card { padding: 12px; flex-wrap: wrap; gap: 8px 16px; }
    .xerox-overview-columns { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .xerox-overview-facts > div { grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr); }
    .xerox-overview-login { flex-basis: 100%; }
}

    body.dark-mode {
        background-color: #121212;
        color: #f0f0f0;
      }
      
      body.dark-mode .container,
      body.dark-mode .header,
      body.dark-mode .settings-container,
      body.dark-mode .compliance-grid > div,
      body.dark-mode .modal-content,
      body.dark-mode .login-card,
      body.dark-mode .table,
      body.dark-mode .form-control,
      body.dark-mode .form-select,
      body.dark-mode .customer-card {
        background-color: #1e1e1e !important;
        color: #f0f0f0 !important;
        border-color: #2a2a2a;
      }
      
      body.dark-mode h1,
      body.dark-mode h2,
      body.dark-mode th,
      body.dark-mode .customer-name,
      body.dark-mode .stat-value {
        color: #ffffff !important;
      }
      
   /* COMPLIANCE LABEL STYLES */
body.dark-mode .customer-status {
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 2px 8px;
    display: inline-block;
    margin-top: 5px;
  }
      
      body.dark-mode .table thead,
      body.dark-mode .settings-table th {
        background-color: #2c2c2c !important;
        color: #ffffff !important;
      }
      
      body.dark-mode .btn-primary {
        background-color: #1e88e5 !important;
        border-color: #1e88e5 !important;
        color: #fff;
      }
      
      body.dark-mode .btn-danger {
        background-color: #e53935 !important;
        border-color: #e53935 !important;
        color: #fff;
      }
      
      body.dark-mode .btn-warning {
        background-color: #ffa000 !important;
        border-color: #ffa000 !important;
        color: #000;
      }
      
      body.dark-mode .sidebar {
        background-color: #0d0d1a !important;
      }
      
      body.dark-mode .sidebar a {
        color: #ddd !important;
      }
      
      body.dark-mode .sidebar a:hover {
        background-color: #e30513 !important;
        color: #fff !important;
      }
      
      body.dark-mode .footer {
        color: #aaa;
      }
      
      body.dark-mode .customer-card {
        border-left-color: #444 !important;
        box-shadow: 0 0 0 1px #444;
      }
      
      body.dark-mode .customer-card:hover {
        box-shadow: 0 0 10px rgba(255,255,255,0.05);
        transform: translateY(-2px);
      }
      
      /* GENERAL TABLE DARK MODE FIX */
body.dark-mode table {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
  
  body.dark-mode th,
  body.dark-mode td {
    background-color: #1a1a1a;
    color: #e0e0e0;
    border-color: #333;
  }
  
  body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #202020;
  }
  
  body.dark-mode .table-hover tbody tr:hover {
    background-color: #2a2a2a;
  }
  
  /* SETTINGS TABLE SPECIFIC */
  body.dark-mode .settings-table {
    background-color: #1a1a1a;
    color: #f0f0f0;
    border-collapse: collapse;
  }
  
  body.dark-mode .settings-table th {
    background-color: #2c2c2c;
    color: #ffffff;
  }
  
  body.dark-mode .settings-table td {
    background-color: #1e1e1e;
    color: #ddd;
  }
  
  body.dark-mode .compliance-grid > div {
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    color: #fff;
    transition: transform 0.2s ease;
  }

  body.dark-mode .compliance-grid > div:hover {
    transform: scale(1.01);
  }
  
  body.dark-mode .compliance-grid .stat-value {
    color: #fff;
  }
  
/* INDIVIDUAL CUSTOMER CARDS */
body.dark-mode .customer-card {
    background-color: #181818 !important;
    border: 1px solid #2e2e2e !important;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: #f0f0f0;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  
  body.dark-mode .customer-card .customer-name {
    color: #f2c14e !important;
  }
  
  body.dark-mode .customer-status.compliant {
    background-color: #2e7d32;
    color: #ffffff;
  }
  
  body.dark-mode .customer-status.non-compliant {
    background-color: #c62828;
    color: #ffffff;
  }
  
  body.dark-mode .customer-status.unknown {
    background-color: #6c757d;
    color: #ffffff;
  }

  body.dark-mode .customer-card.action-recency-today {
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4);
  }

  body.dark-mode .customer-card.action-recency-yesterday,
  body.dark-mode .customer-card.action-recency-week {
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.34);
  }

  body.dark-mode .customer-action-recency.today {
    background-color: rgba(34, 197, 94, 0.18);
    border-color: rgba(74, 222, 128, 0.45);
    color: #bbf7d0;
  }

  body.dark-mode .customer-action-recency.yesterday {
    background-color: rgba(14, 165, 233, 0.2);
    border-color: rgba(125, 211, 252, 0.45);
    color: #bae6fd;
  }

  body.dark-mode .customer-action-recency.week {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(165, 180, 252, 0.42);
    color: #c7d2fe;
  }

  body.dark-mode .customer-action-recency.older {
    background-color: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
  }

  body.dark-mode .customer-action-recency.none {
    background-color: rgba(244, 63, 94, 0.18);
    border-color: rgba(251, 113, 133, 0.4);
    color: #fecdd3;
  }

  body.dark-mode .customer-models {
    color: #aeb5bd;
  }

  /* BUTTONS */
  body.dark-mode .btn-primary {
    background-color: #1976d2;
    border-color: #1976d2;
  }
  
  body.dark-mode .btn-danger {
    background-color: #d32f2f;
    border-color: #d32f2f;
  }
  
  body.dark-mode .btn-warning {
    background-color: #ffa000;
    border-color: #ffa000;
    color: #000;
  }
  
      

  /* COMPLIANCE SECTION HEADINGS */
body.dark-mode .compliance-grid h2,
body.dark-mode .compliance-grid h3,
body.dark-mode .compliance-grid .section-header {
  color: #ffffff;
  border-bottom: 1px solid #444;
  padding-bottom: 6px;
  margin-bottom: 15px;
}

.px-3 {
    margin-top: 8px !important; }

/* Force light text on anything styled as "last-updated" or Bootstrap primary in dark mode */
body.dark-mode .last-updated,
body.dark-mode .last-updated *,
body.dark-mode .text-primary,
body.dark-mode .text-primary * {
  color: #ffffff !important;
}


body.dark-mode .modal-content {
    background-color: #1f1f1f;
    color: #f0f0f0;
    border: 1px solid #333;
  }
  
  body.dark-mode .modal-header,
  body.dark-mode .modal-footer {
    background-color: #1e1e1e;
    border-color: #333;
  }
  
  body.dark-mode .modal-title {
    color: #ffffff;
  }
  
  body.dark-mode .modal-body ul,
  body.dark-mode .modal-body li {
    background-color: transparent;
    color: #dddddd;
  }
  
  body.dark-mode .modal-body .customer-status {
    font-size: 0.75rem;
    background-color: #2e7d32;
    color: white;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 8px;
  }

  body.dark-mode .policy-device-accordion {
    background: #222831;
    border-color: #38414a;
  }

  body.dark-mode .policy-device-summary {
    background: #2a313b;
  }

  body.dark-mode .policy-device-accordion[open] .policy-device-summary {
    background: #313a46;
    border-bottom-color: #495464;
  }

  body.dark-mode .policy-setting-list > li {
    border-bottom-color: #37414c;
  }

  body.dark-mode .compliance-action-panel .card {
    background: #222831;
    color: #f1f3f5;
  }

  body.dark-mode .compliance-email-editor {
    background: #222831;
    color: #f1f3f5;
    border-color: #495464;
  }

  body.dark-mode .compliance-email-editor:empty:before {
    color: #9aa4af;
  }
  
  .modal-content {
    transition: background-color 0.3s, color 0.3s;
  }
  

body.dark-mode .text-muted {
    color: #bbbbbb !important;
  }

body.dark-mode .option-filter-dropdown-btn,
body.dark-mode .option-filter-select {
    background: #2a2f35;
    color: #f0f0f0;
    border-color: #4f5660;
}

body.dark-mode .model-multiselect .dropdown-menu {
    background: #2a2f35;
    border-color: #4f5660;
    color: #f0f0f0;
}
  
  @media (max-width: 768px) {
    #logging .row > div {
      margin-bottom: 2rem;
    }
  }
  

  .sortable {
    cursor: pointer;
  }
  .sortable::after {
    content: " ⇅";
    font-size: 0.8em;
    color: #aaa;
  }
  

  #checkUpdateBtn.update-available {
    animation: pulse 1.5s infinite;
    background-color: #ffc107 !important;
    color: #000;
    font-weight: bold;
    border-color: #ffc107 !important;
  }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,193,7, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255,193,7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7, 0); }
  }
  

/* Fade utility class */
.fade-transition {
  transition: opacity 0.4s ease;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

.text-warning {
  color: #ff8f00;
  font-weight: 500;
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding-top: 10px;
}

.device-col {
    padding-left: 10px;
}

.device-col h6 {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.device-check {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.form-check { padding-left: 0px; }

.chart-container {
  position: relative;
  height: 300px;  /* Fixed height */
  width: 100%;
}

/* Optional: Make the chart canvas itself smaller */
#statusChart {
  max-height: 250px;
  margin: 0 auto;
}

/* Override Bootstrap's bg-success class inside progress bars */
.progress-bar.bg-success {
  background-color: #00c851 !important; /* your custom green */
}

/* --- Pretty mini-cards + sparklines --- */
.customer-trend-card{
  border:1px solid var(--bs-border-color, rgba(0,0,0,.08));
  border-radius:14px;
  padding:12px 14px;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin-bottom: 10px;
}
.customer-trend-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.customer-trend-name{
  font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.customer-trend-meta{
  font-size:.8rem; color: var(--bs-secondary-color, #6c757d);
}
.sparkline{
  width:100%; height:54px; display:block;
}
.sparkline path.line{
  fill:none; stroke:#dc3545; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.sparkline path.area{
  fill:url(#grad-default);
}
.customer-trends-grid{
  display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 992px){
  .customer-trends-grid{ grid-template-columns: 1fr; }
}

/* Dark mode polish */
body.dark-mode .customer-trend-card{
  background:#14171a; border-color:#262a2f; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
body.dark-mode .sparkline path.line{
  stroke:#ff6b81;
}

/* --- Trend cards --- */
.trend-item {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 4px 16px rgba(0,0,0,.03);
  transition: box-shadow .2s ease, transform .2s ease;
  margin-bottom: 10px;
}
.trend-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.trend-header {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  margin-bottom: 8px;
}
.trend-name {
  font-weight: 600; font-size: .95rem;
}
.trend-meta {
  font-size: .85rem; color: #6c757d;
}
.trend-body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px; /* chart | side list */
  gap: 16px; align-items: center;
}
.trend-canvas-wrap { height: 150px; }
.trend-side-title {
  font-weight: 600; font-size: .9rem; margin-bottom: 6px;
}
.trend-failures {
  list-style: none; padding: 0; margin: 0;
}
.trend-failures li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,.06);
  font-size: .9rem;
}
.trend-failures li:last-child { border-bottom: 0; }
.trend-badge {
  font-size: .75rem; padding: 2px 8px; border-radius: 999px;
  background: rgba(13,110,253,.1); color: #0d6efd; font-weight: 600;
}

@media (max-width: 992px) {
  .trend-body { grid-template-columns: 1fr; }
  .trend-canvas-wrap { height: 140px; }
}
  .trend-chart-wrap { position: relative; height: 160px; }
  .trend-chart { width: 100%; height: 100%; display: block; }
  
  /* Fallback background colors */
#customersTableBody tr.row-ok,
#customersTableBody tr.row-ok > td { background-color: #d1e7dd !important; } /* green-ish */
#customersTableBody tr.row-bad,
#customersTableBody tr.row-bad > td { background-color: #f8d7da !important; } /* red-ish */

/* Softer overlays for dark mode */
body.dark-mode #customersTableBody tr.row-ok,
body.dark-mode #customersTableBody tr.row-ok > td { background-color: rgba(25,135,84,0.25) !important; }
body.dark-mode #customersTableBody tr.row-bad,
body.dark-mode #customersTableBody tr.row-bad > td { background-color: rgba(220,53,69,0.25) !important; }


/* Compliance colors for customer buttons */
#loginButtons .login-item button.compliance-ok {
  background-color: #198754 !important;  /* green */
  border-color: #198754 !important;
  color: #fff !important;
}
#loginButtons .login-item button.compliance-bad {
  background-color: #dc3545 !important;  /* red */
  border-color: #dc3545 !important;
  color: #fff !important;
}

#complianceLayout .card { border: 1px solid rgba(0,0,0,.06); border-radius: 12px; }
#complianceLayout .card-body { padding: 14px 16px; }
#staleDevicesGrid .border { box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* Compact compliance overview: keep the full page usable at 100% browser zoom. */
#compliance .compliance-stats {
  gap: 12px;
  margin-bottom: 14px !important;
}

#compliance .stat-card {
  min-width: 180px;
  padding: 13px 12px;
}

#compliance .stat-card h3 {
  margin: 0 0 2px;
  font-size: 1.25rem;
}

#compliance .stat-value {
  margin: 3px 0;
  font-size: 2rem;
  line-height: 1.1;
}

#compliance .stat-percent {
  font-size: .92rem;
}

#compliance .stat-detail {
  margin-top: 3px;
  font-size: .7rem;
}

#compliance .noncompliant-device-inline {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#compliance .noncompliant-device-total {
  padding: 1px 6px;
  font-size: .62rem;
}

#complianceLayout {
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .75rem;
  --customer-name-color: #172033;
}

#complianceLayout .customer-card {
  font-weight: 400;
}

#complianceLayout .compliance-status-column h3 {
  min-height: 34px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  font-size: 1.05rem;
}

#complianceLayout .compliance-status-column .customer-cards,
#complianceLayout .compliance-status-column .accordion-container {
  gap: 8px;
}

#complianceLayout .compliance-status-column .customer-card,
#complianceLayout #unknownCustomers .customer-card {
  min-width: 0;
  padding: 7px 8px;
  border-left-width: 3px;
}

#complianceLayout .compliance-status-column .customer-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--customer-name-color);
}

#complianceLayout .compliance-status-column .customer-status,
#complianceLayout .compliance-status-column .customer-device-count,
#complianceLayout .compliance-status-column .customer-action-recency,
#complianceLayout .compliance-status-column .customer-priority-chip,
#complianceLayout .compliance-status-column .customer-subtext,
#complianceLayout .compliance-status-column .badge {
  font-weight: 400;
}

#complianceLayout .compliance-status-column .customer-status {
  padding: 1px 5px;
  font-size: .63rem;
}

#complianceLayout .compliance-status-column .customer-card-topline {
  gap: 5px;
}

/* Give unknown customer names the full width of these narrow cards. */
#complianceLayout #unknownCustomers .customer-card-topline {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

#complianceLayout #unknownCustomers .customer-name {
  width: 100%;
}

#complianceLayout #unknownCustomers .customer-status {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#complianceLayout .compliance-status-column .customer-subtext,
#complianceLayout .compliance-status-column .customer-models {
  margin-top: 3px;
  font-size: .65rem;
  line-height: 1.2;
}

#complianceLayout .compliance-status-column .customer-action-recency {
  margin-left: 3px;
  padding: 1px 4px;
  font-size: .6rem;
}

#complianceLayout .compliance-status-column .customer-priority-list {
  gap: 3px;
  margin-top: 4px;
}

#complianceLayout .compliance-status-column .customer-priority-chip {
  padding: 1px 5px;
  font-size: .6rem;
}

#complianceLayout .accordion-button-wrapper .toggle-button {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: .78rem;
}

/* On a normal Full-HD screen, show two customers inside every status column. */
@media (min-width: 1600px) {
  #complianceLayout .compliance-status-column .customer-cards,
  #complianceLayout .compliance-status-column .accordion-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Logging workspace */
#logging {
  --logging-ink: #172033;
  --logging-muted: #667085;
  --logging-border: #e4e9f0;
  --logging-soft: #f6f8fb;
  --logging-accent: #e6273f;
  --logging-accent-soft: #fff0f2;
}

#logging .logging-page {
  padding: 2px 2px 28px;
}

#logging .logging-page-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid #eadde0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 16%, rgba(230, 39, 63, .13), transparent 27%),
    linear-gradient(135deg, #fff 0%, #fff8f9 100%);
  box-shadow: 0 12px 32px rgba(27, 35, 50, .07);
}

#logging .logging-page-heading::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -82px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(230, 39, 63, .045);
  border-radius: 50%;
  pointer-events: none;
}

#logging .logging-heading-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #ef3c52, #c9162c);
  box-shadow: 0 9px 20px rgba(210, 24, 47, .23);
  color: #fff;
  font-size: 1.65rem;
}

#logging .logging-eyebrow {
  margin-bottom: 3px;
  color: var(--logging-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#logging .logging-page-heading h2 {
  margin: 0;
  color: var(--logging-ink);
  font-size: clamp(1.35rem, 1.7vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.025em;
}

#logging .logging-page-heading p {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--logging-muted);
  font-size: .88rem;
}

#logging .logging-date-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 15px;
  border: 1px solid var(--logging-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(23, 32, 51, .04);
}

#logging .logging-filter-label,
#logging .logging-card-title-group,
#logging .logging-card-controls {
  display: flex;
  align-items: center;
}

#logging .logging-filter-label {
  gap: 10px;
}

#logging .logging-filter-label strong,
#logging .logging-filter-label small {
  display: block;
}

#logging .logging-filter-label strong {
  color: var(--logging-ink);
  font-size: .82rem;
}

#logging .logging-filter-label small {
  margin-top: 1px;
  color: var(--logging-muted);
  font-size: .7rem;
}

#logging .logging-filter-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--logging-soft);
  color: #475467;
}

#logging .logging-date-input,
#logging .logging-search-field {
  position: relative;
}

#logging .logging-date-input > i,
#logging .logging-search-field > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 12px;
  color: #98a2b3;
  transform: translateY(-50%);
  pointer-events: none;
}

#logging .logging-date-input .form-control {
  width: 245px;
  min-height: 39px;
  padding-left: 36px;
  border-color: #d7dde6;
  border-radius: 10px;
  background: #fafbfc;
  font-size: .8rem;
}

#logging .logging-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

#logging .logging-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  min-height: 88px;
  padding: 15px 16px;
  border: 1px solid var(--logging-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(23, 32, 51, .05);
}

#logging .logging-stat-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -34px;
  width: 78px;
  height: 78px;
  border: 13px solid currentColor;
  border-radius: 50%;
  opacity: .035;
}

#logging .logging-stat-icon {
  display: inline-flex;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #edf4ff;
  color: #2867c7;
  font-size: 1.15rem;
}

#logging .logging-stat-card > div > strong,
#logging .logging-stat-card > div > span {
  display: block;
}

#logging .logging-stat-icon > i {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#logging .logging-stat-icon > i::before {
  display: block;
  line-height: 1;
}

#logging .logging-stat-card strong {
  color: var(--logging-ink);
  font-size: 1.45rem;
  line-height: 1.05;
}

#logging .logging-stat-card div > span {
  margin-top: 4px;
  color: var(--logging-muted);
  font-size: .68rem;
  font-weight: 500;
}

#logging .stat-users .logging-stat-icon {
  background: #edf7f2;
  color: #198754;
}

#logging .stat-privileged .logging-stat-icon {
  background: #fff0f2;
  color: #d51f38;
}

#logging .stat-attention .logging-stat-icon {
  background: #fff5e8;
  color: #b35b00;
}

#logging .logging-ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#logging .logging-ranking-card {
  overflow: hidden;
  border: 1px solid var(--logging-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(23, 32, 51, .045);
}

#logging .logging-ranking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--logging-border);
  color: var(--logging-ink);
  font-size: .75rem;
  font-weight: 600;
}

#logging .logging-ranking-header i {
  color: var(--logging-accent);
}

#logging .logging-ranking-header small {
  color: #98a2b3;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#logging .logging-ranking-list {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}

#logging .logging-ranking-item {
  display: flex;
  align-items: center;
  gap: 9px;
}

#logging .logging-ranking-position {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #f2f4f7;
  color: #667085;
  font-size: .58rem;
  font-weight: 700;
}

#logging .logging-ranking-main {
  min-width: 0;
  flex: 1;
}

#logging .logging-ranking-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  color: #475467;
  font-size: .67rem;
}

#logging .logging-ranking-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#logging .logging-ranking-label strong {
  color: var(--logging-ink);
  font-size: .65rem;
}

#logging .logging-ranking-track {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: #edf0f4;
}

#logging .logging-ranking-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed354c, #f17b89);
}

#logging #auditTopActors .logging-ranking-track span {
  background: linear-gradient(90deg, #2876ca, #66a3e5);
}

#logging .logging-login-summary-header {
  min-height: 43px;
}

#logging .logging-login-summary .logging-card-controls {
  gap: 6px;
}

#logging .logging-login-summary .logging-card-controls .form-select {
  width: 62px;
  min-height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-color: #d7dde6;
  border-radius: 8px;
  font-size: .67rem;
}

#logging .logging-login-summary .logging-count-badge {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  font-size: .64rem;
}

#logging .logging-login-table-wrap {
  max-height: 218px;
}

#logging .logging-login-table {
  min-width: 0;
  table-layout: fixed;
}

#logging .logging-login-table th,
#logging .logging-login-table td {
  padding: 7px 9px;
  font-size: .64rem;
  white-space: nowrap;
}

#logging .logging-login-table th:nth-child(1) { width: 39%; }
#logging .logging-login-table th:nth-child(2) { width: 23%; }
#logging .logging-login-table th:nth-child(3) { width: 38%; }

#logging .logging-login-table .logging-user-cell {
  gap: 7px;
  overflow: hidden;
}

#logging .logging-login-table .logging-user-cell > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

#logging .logging-login-table .logging-user-avatar {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
  font-size: .58rem;
}

#logging .logging-login-table .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .55rem;
}

#logging .logging-ranking-empty {
  padding: 17px;
  color: #98a2b3;
  font-size: .7rem;
  text-align: center;
}

#logging .logging-card {
  overflow: hidden;
  border: 1px solid var(--logging-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 32, 51, .065);
}

#logging .logging-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--logging-border);
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

#logging .logging-card-title-group {
  min-width: 0;
  gap: 11px;
}

#logging .logging-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #edf7f2;
  color: #198754;
  font-size: 1.15rem;
}

#logging .logging-card-audit .logging-card-icon {
  background: var(--logging-accent-soft);
  color: var(--logging-accent);
}

#logging .logging-card-title-group h4 {
  margin: 0;
  color: var(--logging-ink);
  font-size: 1rem;
  font-weight: 600;
}

#logging .logging-card-title-group p {
  margin: 2px 0 0;
  color: var(--logging-muted);
  font-size: .72rem;
}

#logging .logging-card-controls {
  flex: 0 0 auto;
  gap: 8px;
}

#logging .logging-card-controls .form-select {
  width: 78px;
  min-height: 34px;
  border-color: #d7dde6;
  border-radius: 9px;
  font-size: .75rem;
}

#logging .logging-count-badge {
  display: inline-flex;
  min-width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #e1e6ed;
  border-radius: 999px;
  background: var(--logging-soft);
  color: #475467;
  font-size: .7rem;
  font-weight: 700;
}

#logging .logging-export-button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #f2b9c1;
  border-radius: 9px;
  background: var(--logging-accent-soft);
  color: #bd1730;
  font-size: .73rem;
  font-weight: 600;
}

#logging .logging-export-button:hover {
  border-color: var(--logging-accent);
  background: var(--logging-accent);
  color: #fff;
}

#logging .logging-audit-filters {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(130px, .75fr));
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--logging-border);
  background: #fafbfc;
}

#logging .logging-audit-filters .form-control,
#logging .logging-audit-filters .form-select {
  min-height: 36px;
  border-color: #dce1e8;
  border-radius: 9px;
  background-color: #fff;
  font-size: .72rem;
}

#logging .logging-search-field .form-control {
  padding-left: 34px;
}

#logging .logging-table-wrap {
  max-height: 420px;
  overflow: auto;
}

#logging .logging-audit-table-wrap {
  max-height: 590px;
}

#logging .logging-table {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  table-layout: auto;
}

#logging .logging-table thead {
  background: transparent;
}

#logging .logging-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dfe4ea;
  background: #f4f6f9;
  color: #667085;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

#logging .logging-table td {
  padding: 10px 12px;
  border-bottom-color: #edf0f4;
  color: #344054;
  font-size: .72rem;
  vertical-align: middle;
}

#logging .logging-table tbody tr {
  transition: background-color .15s ease;
}

#logging .logging-table tbody tr:nth-child(even) {
  background: #fbfcfd;
}

#logging .logging-table tbody tr:hover {
  background: #fff6f7;
}

#logging .logging-user-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--logging-ink);
  font-weight: 600;
}

#logging .logging-user-avatar {
  display: inline-flex;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef2f7;
  color: #475467;
  font-size: .65rem;
  font-weight: 700;
}

#logging .audit-action-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}

#logging .audit-action-icon {
  display: inline-flex;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef2f7;
  color: #475467;
}

#logging .audit-action-icon.category-privileged_access {
  background: #fff0f2;
  color: #d51f38;
}

#logging .audit-action-icon.category-administration {
  background: #fff5e8;
  color: #b35b00;
}

#logging .audit-action-icon.category-access {
  background: #edf7f2;
  color: #198754;
}

#logging .audit-action-icon.category-export {
  background: #edf4ff;
  color: #2867c7;
}

#logging .audit-action-icon.category-authentication {
  background: #eaf8f4;
  color: #087d67;
}

#logging .audit-action-icon.category-session {
  background: #f2f4f7;
  color: #667085;
}

#logging .audit-action-name {
  color: var(--logging-ink);
  font-weight: 600;
}

#logging .audit-action-category,
#logging .audit-cell-meta {
  display: block;
  margin-top: 2px;
  color: #98a2b3;
  font-size: .62rem;
}

#logging .audit-source {
  color: #667085;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
}

#logging .logging-empty-state {
  padding: 28px 14px !important;
  color: #98a2b3 !important;
  text-align: center;
}

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

  #logging .logging-ranking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #logging .logging-login-summary {
    grid-column: 1 / -1;
  }

  #logging .logging-audit-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #logging .logging-audit-filters .logging-search-field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  #logging .logging-stat-grid,
  #logging .logging-ranking-grid {
    grid-template-columns: 1fr;
  }

  #logging .logging-login-summary {
    grid-column: auto;
  }

  #logging .logging-page-heading,
  #logging .logging-date-toolbar,
  #logging .logging-card-header {
    align-items: flex-start;
  }

  #logging .logging-page-heading {
    padding: 18px;
  }

  #logging .logging-heading-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
    font-size: 1.3rem;
  }

  #logging .logging-date-toolbar,
  #logging .logging-card-header {
    flex-direction: column;
  }

  #logging .logging-date-input,
  #logging .logging-date-input .form-control,
  #logging .logging-card-controls {
    width: 100%;
  }

  #logging .logging-card-controls {
    justify-content: flex-end;
  }

  #logging .logging-audit-filters {
    grid-template-columns: 1fr;
  }

  #logging .logging-audit-filters .logging-search-field:first-child {
    grid-column: auto;
  }
}

body.dark-mode #logging {
  --logging-ink: #f4f6f8;
  --logging-muted: #aab2bd;
  --logging-border: #343a43;
  --logging-soft: #252a31;
}

body.dark-mode #logging .logging-page-heading,
body.dark-mode #logging .logging-card,
body.dark-mode #logging .logging-date-toolbar,
body.dark-mode #logging .logging-card-header,
body.dark-mode #logging .logging-stat-card,
body.dark-mode #logging .logging-ranking-card {
  border-color: var(--logging-border);
  background: #1c2026;
}

body.dark-mode #logging .logging-audit-filters,
body.dark-mode #logging .logging-table th {
  background: #242930;
}

body.dark-mode #logging .logging-audit-filters .form-control,
body.dark-mode #logging .logging-audit-filters .form-select,
body.dark-mode #logging .logging-date-input .form-control {
  border-color: #424954;
  background-color: #191d22;
  color: #eef1f4;
}

body.dark-mode #logging .logging-table tbody tr:nth-child(even),
body.dark-mode #logging .logging-table tbody tr:hover {
  background: #22272e;
}

body.dark-mode #logging .logging-ranking-label,
body.dark-mode #logging .logging-ranking-position {
  color: #b8c0ca;
}

body.dark-mode #logging .logging-ranking-position,
body.dark-mode #logging .logging-ranking-track {
  background: #303640;
}

body.dark-mode .app-hero {
  border-color: #3a3034;
  background:
    radial-gradient(circle at 92% 16%, rgba(230, 39, 63, .16), transparent 27%),
    #1c2026;
}

body.dark-mode .app-hero-title,
body.dark-mode .app-summary-card .fs-3,
body.dark-mode .app-summary-card .fs-4,
body.dark-mode .app-summary-card .display-6,
body.dark-mode .app-summary-card .rem-summary-value {
  color: #f4f6f8;
}

body.dark-mode .app-hero-subtitle,
body.dark-mode .app-hero-meta {
  color: #aab2bd;
}

body.dark-mode .app-toolbar-card,
body.dark-mode .app-surface-card,
body.dark-mode .app-summary-card,
body.dark-mode .app-workspace-tabs,
body.dark-mode .app-accordion .accordion-item,
body.dark-mode .app-accordion .accordion-button {
  border-color: #343a43 !important;
  background: #1c2026;
}

body.dark-mode .app-toolbar-card > .card-body,
body.dark-mode .app-surface-card > .card-header,
body.dark-mode .app-accordion .accordion-button:not(.collapsed) {
  border-color: #343a43;
  background: #242930;
  color: #f4f6f8;
}

/* Unified application shell ------------------------------------------------ */
:root {
  --app-sidebar-collapsed-width: 78px;
  --app-page-gap: 16px;
  --app-border: #e4e9f0;
  --app-surface: #fff;
  --app-surface-soft: #f7f9fc;
  --app-text: #172033;
  --app-muted: #667085;
  --app-focus: rgba(47, 111, 219, .2);
}

.app-shell-ready .sidebar {
  z-index: 1040;
  padding: 14px 10px 12px;
  align-items: stretch;
  box-shadow: 12px 0 32px rgba(10, 15, 30, .08);
  transition: width .22s ease, transform .22s ease;
}

.app-shell-ready .sidebar-top {
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  overflow: hidden;
}

.app-shell-ready .sidebar .logo {
  width: 100%;
  min-height: 52px;
  padding: 0 8px;
}

.sidebar-nav {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
  padding-right: 2px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

/* A 1080p application shell has enough room for the complete navigation.
   Keep wheel/keyboard scrolling available without rendering a nested bar. */
@media (min-width: 992px) and (min-height: 900px) {
  .sidebar-nav { scrollbar-width: none; }
  .sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-heading {
  padding: 6px 10px 2px;
  color: rgba(255,255,255,.42);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sidebar .sidebar-nav-link,
.sidebar .sidebar-nav-link:visited {
  display: flex;
  width: 100%;
  min-height: 35px;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.sidebar .sidebar-nav-link i {
  width: 18px;
  flex: 0 0 18px;
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  text-align: center;
}

.sidebar .sidebar-nav-link:hover {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.07);
  color: #fff;
  transform: translateX(2px);
}

.sidebar .sidebar-nav-link.active {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(135deg, #ed263f, #c9142a);
  box-shadow: 0 7px 18px rgba(201,20,42,.25);
  color: #fff;
  font-weight: 600;
}

.sidebar .sidebar-nav-link.active i { color: #fff; }

.sidebar-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 auto;
  align-items: stretch !important;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255,255,255,.09);
}

.sidebar-utilities {
  display: grid;
  width: 100%;
  gap: 4px;
  order: 1;
}

.sidebar-bottom .app-locale-switcher {
  order: 2;
  width: 100%;
  margin: 0;
}

.sidebar-bottom .app-locale-switcher > label { display: none !important; }
.sidebar-bottom .app-locale-buttons { gap: 5px; }
.sidebar-bottom .app-locale-btn {
  min-height: 30px;
  padding: 4px 0;
  border-color: rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.76);
  font-size: .68rem;
}
.sidebar-bottom .app-locale-btn:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; }
.sidebar-bottom .app-locale-btn.active { border-color: #e6273f; background: #e6273f; color: #fff; }

.sidebar-bottom #tenantSwitcherWrap {
  order: 3;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.sidebar-bottom #tenantSwitcherWrap label {
  margin: 0 0 3px !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .58rem !important;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.sidebar-bottom #tenantSwitcher {
  min-height: 32px;
  padding-block: 4px;
  border-color: rgba(255,255,255,.16);
  border-radius: 8px;
  background-color: rgba(255,255,255,.95);
  font-size: .67rem;
}

.sidebar-action-grid {
  order: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}

.sidebar-action-grid .btn {
  display: inline-flex;
  width: 100% !important;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  padding: 6px 7px !important;
  border-radius: 9px;
  font-size: .66rem;
  line-height: 1.1;
  white-space: nowrap;
}
.sidebar-action-grid .btn-outline-light {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.8);
}
.sidebar-action-grid .btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-action-grid #checkUpdateBtn {
  border-color: rgba(245,184,0,.42);
  background: rgba(245,184,0,.12);
  color: #ffd86a;
}
.sidebar-action-grid #checkUpdateBtn:hover { background: rgba(245,184,0,.22); color: #ffe59a; }
.sidebar-action-grid #checkUpdateBtn.update-available { border-color: #ffc107; background: #ffc107; color: #2e2600; }

.sidebar-utility-btn {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.7);
  font: inherit;
  font-size: .7rem;
  text-align: left;
}

.sidebar-utility-btn:hover,
.sidebar-utility-btn.active { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-utility-btn i { width: 18px; font-size: .9rem; text-align: center; }
.sidebar-utility-btn kbd { margin-left: auto; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); font-size: .58rem; }

.sidebar-collapse-btn {
  position: absolute;
  top: 68px;
  right: -12px;
  z-index: 2;
  display: inline-flex;
  width: 26px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.19);
  border-left-color: rgba(255,255,255,.08);
  border-radius: 0 10px 10px 0;
  background: #202136;
  box-shadow: 5px 5px 14px rgba(10, 14, 28, .2);
  color: rgba(255,255,255,.88);
  transition: width .15s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.sidebar-collapse-btn::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: #e6273f;
  content: '';
  opacity: .35;
}

.sidebar-collapse-btn i {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  margin-left: 3px;
  font-size: .72rem;
  line-height: 1;
}

.sidebar-collapse-btn:hover {
  width: 29px;
  border-color: #ed5268;
  background: #d91f38;
  box-shadow: 6px 6px 17px rgba(10, 14, 28, .28);
  color: #fff;
}

.sidebar-collapse-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(237, 38, 63, .18), 5px 5px 14px rgba(20, 28, 45, .13);
}

body.sidebar-collapsed .sidebar-collapse-btn::before { opacity: .7; }
body.sidebar-collapsed .sidebar-nav { padding-top: 36px; }

.mobile-nav-toggle,
.sidebar-backdrop { display: none; }

body.sidebar-collapsed .sidebar { width: var(--app-sidebar-collapsed-width); }
body.sidebar-collapsed .container { width: calc(100% - var(--app-sidebar-collapsed-width)); margin-left: var(--app-sidebar-collapsed-width); }
body.sidebar-collapsed .footer { margin-left: var(--app-sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar-nav-heading,
body.sidebar-collapsed .sidebar-nav-link span,
body.sidebar-collapsed .sidebar-tenant-name,
body.sidebar-collapsed .sidebar-app-version,
body.sidebar-collapsed .sidebar-utility-btn span,
body.sidebar-collapsed .sidebar-utility-btn kbd,
body.sidebar-collapsed #tenantSwitcherWrap label,
body.sidebar-collapsed .sidebar-bottom > .btn { font-size: 0; }
body.sidebar-collapsed .sidebar .logo { min-height: 36px; padding: 0; }
body.sidebar-collapsed .sidebar .logo img { max-height: 34px; }
body.sidebar-collapsed .sidebar-nav-link,
body.sidebar-collapsed .sidebar-utility-btn { justify-content: center; padding-inline: 7px; }
body.sidebar-collapsed .sidebar .sidebar-nav-link:hover { transform: none; }
body.sidebar-collapsed #tenantSwitcherWrap { padding-inline: 0 !important; }
body.sidebar-collapsed #tenantSwitcher { padding: 5px 4px; font-size: .65rem; }
body.sidebar-collapsed .sidebar-bottom > .btn i { margin: 0 !important; font-size: .95rem; }
body.sidebar-collapsed .sidebar-action-grid { grid-template-columns: 1fr; }
body.sidebar-collapsed .sidebar-action-grid .btn span { display: none; }
body.sidebar-collapsed .sidebar-action-grid .btn { padding-inline: 4px !important; }

.app-page {
  padding-top: var(--app-page-gap);
  padding-right: var(--app-page-gap);
  padding-left: var(--app-page-gap);
  transition: width .22s ease, margin-left .22s ease;
}

.app-page .app-hero {
  padding: 17px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
}

.app-page .app-hero-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 14px;
  font-size: 1.3rem;
}

.app-page .app-hero-title { font-size: clamp(1.25rem, 1.55vw, 1.7rem); }
.app-page .app-hero-subtitle { margin-top: 4px; }
.app-page .app-hero-meta { margin-top: 4px; }

.app-tenant-context {
  position: relative;
  z-index: 1;
  display: inline-flex;
  max-width: 230px;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid #eadde0;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #667085;
  font-size: .68rem;
  white-space: nowrap;
}
.app-tenant-context span { overflow: hidden; text-overflow: ellipsis; }
.app-tenant-context + .app-hero-actions { margin-left: 0; }

.app-toolbar-panel,
.app-toolbar-card,
.app-surface-card,
.app-summary-card,
.rem-filter-panel,
.rem-summary-card {
  border-color: var(--app-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(23, 32, 51, .045) !important;
}

.app-toolbar-panel,
.app-toolbar-card { position: relative; }

.app-toolbar-panel::before,
.app-toolbar-card::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #e6273f;
  opacity: .72;
}

.form-control,
.form-select,
.btn {
  border-radius: 9px;
}

.form-control,
.form-select {
  border-color: #d7dee8;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  border-color: #6f9de5;
  box-shadow: 0 0 0 3px var(--app-focus);
  outline: 0;
}

.btn-primary:not(.app-hero .btn-primary),
.btn-outline-primary:not(.app-hero .btn-outline-primary) {
  --bs-btn-color: #275fae;
  --bs-btn-border-color: #90add5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #275fae;
  --bs-btn-hover-border-color: #275fae;
  --bs-btn-active-bg: #1f4f94;
  --bs-btn-active-border-color: #1f4f94;
}

.btn-primary:not(.app-hero .btn-primary) {
  --bs-btn-color: #fff;
  --bs-btn-bg: #275fae;
}

.app-data-table {
  width: 100%;
  margin-bottom: 0;
  color: #344054;
  font-size: .76rem;
}

.app-data-table thead { position: sticky; top: 0; z-index: 2; }
.app-data-table thead th {
  padding: 10px 12px;
  border-bottom: 1px solid #dfe5ec;
  background: #f5f7fa !important;
  color: #617087;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f4;
  vertical-align: middle;
  transition: background-color .12s ease;
}

.app-data-table tbody tr:nth-child(even) td { background: #fbfcfd; }
.app-data-table tbody tr:hover td { background: #fff5f7; }
.app-data-table tbody tr:last-child td { border-bottom: 0; }
.app-density-compact .app-data-table thead th { padding-block: 7px; }
.app-density-compact .app-data-table tbody td { padding-block: 6px; }

.app-table-scroll,
.user-table-wrap,
.logging-table-wrap,
.table-responsive:not(.compliance-triage-table-wrap) {
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.settings-container.app-surface-card,
.content-section > .settings-container {
  padding: 16px;
}

.settings-container > .d-flex:first-child {
  min-height: 54px;
  margin: -16px -16px 16px !important;
  padding: 13px 16px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

.settings-container > .d-flex:first-child h3,
.app-surface-card h4,
.app-toolbar-card h4 {
  color: var(--app-text);
  font-weight: 600;
  letter-spacing: -.02em;
}

.settings-form {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  background: #fafbfd;
}

.app-section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.app-section-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  background: #fff0f2;
  color: #dd2038;
  font-size: 1rem;
}

.app-count-badge {
  display: inline-flex;
  min-width: 29px;
  height: 29px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 9px;
  border: 1px solid #dfe5ec;
  border-radius: 999px;
  background: #f7f9fc;
  color: #536176;
  font-size: .68rem;
  font-weight: 600;
}

.app-table-state,
.app-empty-state {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  color: #7a8595;
  text-align: center;
}

.app-empty-state { flex-direction: column; }
.app-empty-state i { color: #d7a0a8; font-size: 1.4rem; }
.app-empty-state strong { color: #4b5668; font-size: .8rem; }
.app-empty-state span { font-size: .68rem; }
.app-skeleton-line {
  width: 110px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf0f4 25%, #f8fafc 50%, #edf0f4 75%);
  background-size: 200% 100%;
  animation: app-skeleton 1.25s linear infinite;
}
@keyframes app-skeleton { to { background-position: -200% 0; } }

.users-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.app-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  padding: min(12vh, 100px) 18px 18px;
  background: rgba(12, 18, 30, .55);
  backdrop-filter: blur(4px);
}

.app-command-overlay[hidden] { display: none; }
.app-command-dialog {
  width: min(620px, 100%);
  max-height: min(680px, 76vh);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(8, 15, 30, .28);
}

.app-command-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7ebf0;
  color: #7a8595;
}

.app-command-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #172033; font: inherit; font-size: .95rem; }
.app-command-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #e0e5ec;
  border-radius: 10px;
  background-color: #f8fafc;
  background-size: 11px;
  opacity: .72;
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.app-command-close:hover,
.app-command-close:focus-visible { border-color: #e6a4ad; background-color: #fff; opacity: 1; }
.app-command-heading { padding: 10px 15px 5px; color: #8993a2; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-command-results { max-height: 56vh; padding: 5px 8px 10px; overflow-y: auto; }
.app-command-result {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #263145;
  text-align: left;
  text-decoration: none;
}
.app-command-result:hover,
.app-command-result:focus { background: #f5f7fb; color: #d51c34; outline: 0; }
.app-command-result > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #fff0f2; color: #df2038; }
.app-command-result span { display: flex; flex-direction: column; }
.app-command-result strong { font-size: .78rem; }
.app-command-result small { color: #8a94a3; font-size: .65rem; }
.app-command-empty { padding: 18px; color: #7b8492; text-align: center; }

.app-toast-region { position: fixed; z-index: 12100; right: 18px; bottom: 18px; display: grid; width: min(380px, calc(100vw - 36px)); gap: 8px; }
.app-toast { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #dce3ec; border-left: 4px solid #3b78d8; border-radius: 11px; background: #fff; box-shadow: 0 12px 35px rgba(20,28,45,.16); color: #344054; font-size: .76rem; }
.app-toast-success { border-left-color: #1c9a65; }
.app-toast-warning { border-left-color: #e39a19; }
.app-toast-danger { border-left-color: #dc3545; }
.app-toast span { flex: 1; }
.app-toast button { border: 0; background: transparent; color: #7a8493; font-size: 1.1rem; }

@media (max-width: 991.98px) {
  .app-shell-ready .sidebar {
    width: min(280px, 86vw);
    transform: translateX(-105%);
  }
  body.sidebar-collapsed .sidebar { width: min(280px, 86vw); }
  .app-shell-ready .container,
  body.sidebar-collapsed .container { width: 100%; margin-left: 0; padding-left: 16px; }
  .app-shell-ready .footer,
  body.sidebar-collapsed .footer { margin-left: 0; }
  .mobile-nav-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1035;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20,28,45,.13);
    color: #1d2940;
    font-size: 1.25rem;
  }
  .sidebar-collapse-btn { display: none; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1039; border: 0; background: rgba(9,14,25,.45); }
  body.mobile-nav-open .sidebar { transform: translateX(0); }
  body.mobile-nav-open .sidebar-backdrop { display: block; }
  .app-page { padding-top: 64px; }
}

@media (max-width: 575.98px) {
  .app-page { padding-right: 10px !important; padding-left: 10px !important; }
  .app-page .app-hero { padding: 14px; }
  .app-page .app-hero-row { align-items: flex-start; gap: 11px; }
  .app-page .app-hero-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; font-size: 1.15rem; }
  .app-page .app-hero-copy { flex-basis: calc(100% - 56px); }
  .app-page .app-hero-meta { display: none; }
  .app-page .app-hero-actions { width: 100%; }
  .app-page .app-hero-actions .btn { min-width: 0; flex: 1; }
}

body.dark-mode .app-command-dialog,
body.dark-mode .app-toast { border-color: #343a43; background: #1c2026; color: #e8ebef; }
body.dark-mode .app-tenant-context { border-color: #44363a; background: rgba(36,41,48,.85); color: #c1c7d0; }
body.dark-mode .app-command-search { border-color: #343a43; }
body.dark-mode .app-command-search input { background: transparent; color: #f4f6f8; }
body.dark-mode .app-command-close { border-color: #4a515b; background-color: #fff; opacity: .85; }
body.dark-mode .app-command-result { color: #e8ebef; }
body.dark-mode .app-command-result:hover { background: #272d35; }
body.dark-mode .app-data-table thead th { border-color: #38404a; background: #242930 !important; color: #b8c0ca; }
body.dark-mode .app-data-table tbody td { border-color: #303640; background: #1c2026; color: #d8dde4; }
body.dark-mode .app-data-table tbody tr:nth-child(even) td,
body.dark-mode .app-data-table tbody tr:hover td { background: #242930; }

/* Consolidated modal system ------------------------------------------------ */
.modal.app-modal .modal-dialog {
  width: calc(100% - 28px);
  margin-top: 24px;
  margin-bottom: 24px;
}

.modal.app-modal .modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid #e4e9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(13, 22, 38, .28);
  color: #344054;
}

.modal.app-modal .modal-header {
  position: relative;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border-bottom: 1px solid #eadfe2;
  background:
    radial-gradient(circle at 94% 12%, rgba(230,39,63,.12), transparent 33%),
    linear-gradient(135deg, #fff 0%, #fff8f9 100%);
}

.modal.app-modal .modal-header::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #e6273f;
}

.app-modal-title-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #ef3c52, #c9162c);
  box-shadow: 0 8px 18px rgba(210,24,47,.2);
  color: #fff;
  font-size: 1.08rem;
}

.app-modal-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.modal.app-modal .modal-title {
  margin: 0;
  color: #172033;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.modal.app-modal .modal-header .text-muted {
  margin-top: 3px;
  color: #7b8595 !important;
  font-size: .68rem;
}

.modal.app-modal .modal-header .btn-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: 0 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid #e0e5ec;
  border-radius: 10px;
  background-color: rgba(255,255,255,.8);
  background-size: 11px;
  opacity: .72;
}
.modal.app-modal .modal-header .btn-close:hover { border-color: #e6a4ad; background-color: #fff; opacity: 1; }

.modal.app-modal .modal-body {
  padding: 17px 18px 19px;
  background: #fff;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #bdc7d4 transparent;
}

.modal.app-modal .modal-body > .card,
.modal.app-modal .modal-body .app-surface-card {
  border-color: #e5eaf0;
  box-shadow: 0 5px 18px rgba(23,32,51,.045);
}

.modal.app-modal .modal-body .form-label {
  margin-bottom: 5px;
  color: #4c596d;
  font-size: .7rem;
  font-weight: 600;
}

.modal.app-modal .modal-footer {
  min-height: 58px;
  gap: 7px;
  padding: 11px 17px;
  border-top: 1px solid #e7ebf0;
  background: #fafbfd;
}

.modal.app-modal .modal-footer .btn {
  min-width: 92px;
  padding: 7px 13px;
  font-size: .72rem;
  font-weight: 600;
}

.modal.app-modal .modal-footer .btn-secondary {
  border-color: #d2d9e2;
  background: #fff;
  color: #596579;
}
.modal.app-modal .modal-footer .btn-secondary:hover { border-color: #9eabbc; background: #f3f5f8; color: #293548; }

.modal-backdrop.show {
  opacity: .42;
  backdrop-filter: blur(3px);
}

@media (max-width: 575.98px) {
  .modal.app-modal .modal-dialog {
    width: calc(100% - 14px);
    margin: 7px auto;
  }
  .modal.app-modal .modal-content { max-height: calc(100vh - 14px); border-radius: 15px; }
  .modal.app-modal .modal-header { min-height: 66px; padding: 11px 12px; }
  .app-modal-title-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .modal.app-modal .modal-body { padding: 13px; }
  .modal.app-modal .modal-footer { padding: 10px 12px; }
  .modal.app-modal .modal-footer .btn { min-width: 0; flex: 1 1 auto; }
}

body.dark-mode .modal.app-modal .modal-content,
body.dark-mode .modal.app-modal .modal-body {
  border-color: #363d46;
  background: #1c2026;
  color: #e3e7ec;
}
body.dark-mode .modal.app-modal .modal-header {
  border-color: #44363a;
  background: radial-gradient(circle at 94% 12%, rgba(230,39,63,.16), transparent 33%), #22272e;
}
body.dark-mode .modal.app-modal .modal-title { color: #f5f6f8; }
body.dark-mode .modal.app-modal .modal-footer { border-color: #363d46; background: #22272e; }
body.dark-mode .modal.app-modal .modal-header .btn-close { border-color: #4a515b; background-color: #fff; }
body.dark-mode .modal.app-modal .modal-footer .btn-secondary { border-color: #4a515b; background: #2a3038; color: #e2e6eb; }

.app-system-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(12,18,30,.48);
  backdrop-filter: blur(3px);
}

.app-system-dialog {
  width: min(660px, 100%);
  overflow: hidden;
  border: 1px solid #e4e9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(13,22,38,.28);
  color: #344054;
}

.app-system-dialog-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border-bottom: 1px solid #eadfe2;
  background: radial-gradient(circle at 94% 12%, rgba(230,39,63,.12), transparent 33%), linear-gradient(135deg, #fff, #fff8f9);
}
.app-system-dialog-header h5 { flex: 1; margin: 0; color: #172033; font-size: 1rem; font-weight: 600; }
.app-system-dialog-header .btn-close { width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid #e0e5ec; border-radius: 10px; background-color: rgba(255,255,255,.8); background-size: 11px; }
.app-system-dialog-body { padding: 17px 18px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; line-height: 1.55; }
.app-system-dialog-package { margin: 0 18px 14px; padding: 10px 12px; border: 1px solid #e4e9f0; border-radius: 10px; background: #f7f9fc; font-size: .7rem; overflow-wrap: anywhere; }
.app-system-dialog-package a { display: block; margin-top: 4px; }
.app-system-dialog-footer { display: flex; justify-content: flex-end; gap: 7px; padding: 11px 17px; border-top: 1px solid #e7ebf0; background: #fafbfd; }
.app-system-dialog-footer .btn { min-width: 92px; font-size: .72rem; font-weight: 600; }

body.dark-mode .app-system-dialog { border-color: #363d46; background: #1c2026; color: #e3e7ec; }
body.dark-mode .app-system-dialog-header { border-color: #44363a; background: radial-gradient(circle at 94% 12%, rgba(230,39,63,.16), transparent 33%), #22272e; }
body.dark-mode .app-system-dialog-header h5 { color: #f5f6f8; }
body.dark-mode .app-system-dialog-package { border-color: #3b424c; background: #252b32; }
body.dark-mode .app-system-dialog-footer { border-color: #363d46; background: #22272e; }

@media (max-width: 575.98px) {
  .app-system-dialog-overlay { padding: 7px; }
  .app-system-dialog { border-radius: 15px; }
  .app-system-dialog-header { min-height: 66px; padding: 11px 12px; }
  .app-system-dialog-body { padding: 13px; }
  .app-system-dialog-footer { flex-wrap: wrap; padding: 10px 12px; }
  .app-system-dialog-footer .btn { min-width: 0; flex: 1 1 auto; }
}

/* Compact customer administration table ---------------------------------- */
.customer-management-table.app-data-table {
  width: 100%;
  min-width: 1500px;
  margin-top: 0;
  table-layout: fixed;
  border-radius: 11px;
  font-size: .7rem;
}

.customer-management-table.app-data-table thead th {
  padding: 8px 8px;
  font-size: .59rem;
  letter-spacing: .05em;
}

.customer-management-table.app-data-table tbody td {
  height: 48px;
  padding: 6px 8px;
  font-size: .69rem;
  line-height: 1.25;
  vertical-align: middle;
}

.customer-management-table th:nth-child(1) { width: 78px; }
.customer-management-table th:nth-child(2) { width: 150px; }
.customer-management-table th:nth-child(3) { width: 105px; }
.customer-management-table th:nth-child(4) { width: 285px; }
.customer-management-table th:nth-child(5) { width: 105px; }
.customer-management-table th:nth-child(6) { width: 70px; }
.customer-management-table th:nth-child(7) { width: 75px; }
.customer-management-table th:nth-child(8) { width: 255px; }
.customer-management-table th:nth-child(9) { width: 90px; }
.customer-management-table th:nth-child(10) { width: 180px; }
.customer-management-table th:nth-child(11) { width: 115px; }

.customer-primary-name {
  overflow: hidden;
  color: #172033;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-login-button {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #172033;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.customer-login-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-login-button > i { flex: 0 0 auto; color: #77859a; font-size: .68rem; transition: color .15s ease, transform .15s ease; }
.customer-login-button:hover { color: #bb1730; }
.customer-login-button:hover > i { color: #df2038; transform: translateX(2px); }
.customer-login-button:focus-visible { border-radius: 4px; box-shadow: 0 0 0 3px var(--app-focus); outline: 0; }
.customer-login-button:disabled { cursor: wait; opacity: .65; }
.customer-login-button.is-loading > i { animation: customer-login-spin .75s linear infinite; color: #df2038; }
@keyframes customer-login-spin { to { transform: rotate(360deg); } }

.customer-cfm-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: #7b8595;
  font-size: .56rem;
  line-height: 1.15;
  white-space: nowrap;
}
.customer-cfm-meta i { flex: 0 0 auto; color: #8090a5; font-size: .62rem; }
.customer-cfm-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.customer-table-ellipsis,
.customer-table-compact-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-contact-compact {
  min-width: 0;
  overflow: hidden;
  font-size: .62rem;
  line-height: 1.25;
}
.customer-contact-compact strong,
.customer-contact-compact > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-contact-compact strong { color: #3f4b5d; font-weight: 600; }
.customer-contact-compact a { color: #2368c4; text-decoration: none; }
.customer-contact-compact a:hover { text-decoration: underline; }

.customer-created-by {
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
}
.customer-created-by strong,
.customer-created-by small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-created-by strong { color: #3f4b5d; font-size: .64rem; font-weight: 600; }
.customer-created-by small { margin-top: 2px; color: #7b8595; font-size: .55rem; }

.customer-management-table .password-field {
  display: table-cell;
  white-space: nowrap;
}
.customer-management-table .password-field .btn-icon { margin-left: 4px; }

.customer-table-actions-cell { white-space: nowrap; }
.customer-table-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.customer-table-actions .btn {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: .62rem;
  line-height: 1;
}

.app-row-action-icon.btn {
  width: 29px;
  min-width: 29px;
  height: 29px;
  min-height: 29px;
  justify-content: center;
  padding: 0;
}
.app-row-action-icon.btn i { margin: 0; }

.customer-notes-button {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  background: #f8fafc;
  color: #526075;
  font: inherit;
  font-size: .59rem;
  line-height: 1.15;
  text-align: left;
}
.customer-notes-button > i:first-child { flex: 0 0 auto; color: #d18b00; }
.customer-notes-button > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-notes-open-icon { flex: 0 0 auto; color: #8d98a8; font-size: .55rem; }
.customer-notes-button:hover,
.customer-notes-button:focus-visible { border-color: #e0aa3e; background: #fff9e9; color: #253248; outline: 0; }
.customer-notes-empty { color: #a6afbc; }
.customer-note-full { min-height: 90px; white-space: pre-wrap; overflow-wrap: anywhere; color: #344054; font-size: .8rem; line-height: 1.6; }

#customersTableBody tr.row-ok td:first-child { box-shadow: inset 3px 0 #38a65a; }
#customersTableBody tr.row-bad td:first-child { box-shadow: inset 3px 0 #e74652; }

.app-density-compact .customer-management-table.app-data-table tbody td {
  height: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.app-density-compact .customer-cfm-meta { margin-top: 2px; }

@media (max-width: 1199.98px) {
  .customer-management-table.app-data-table { min-width: 1340px; }
  .customer-management-table th:nth-child(4) { width: 235px; }
  .customer-management-table th:nth-child(8) { width: 220px; }
  .customer-management-table th:nth-child(10) { width: 150px; }
}

body.dark-mode .customer-primary-name,
body.dark-mode .customer-login-button,
body.dark-mode .customer-contact-compact strong,
body.dark-mode .customer-created-by strong { color: #f0f2f5; }
body.dark-mode .customer-cfm-meta { color: #aeb6c2; }
body.dark-mode .customer-notes-button { border-color: #424a55; background: #262c33; color: #d8dde4; }
body.dark-mode .customer-note-full { color: #e3e7ec; }

/* Unified workspace controls and tables ---------------------------------- */
.app-page {
  color: #344054;
  font-size: .8rem;
}

.app-page .app-surface-card > .card-header {
  min-height: 54px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

.app-page .app-surface-card > .card-header h2,
.app-page .app-surface-card > .card-header h3,
.app-page .app-surface-card > .card-header h4,
.app-page .app-surface-card > .card-header h5,
.app-page .app-surface-card .card-title,
.app-page .app-section-heading h4,
.app-page .rem-panel-title h4 {
  margin-bottom: 2px;
  color: #172033;
  font-weight: 600;
  letter-spacing: -.025em;
}

.app-page .app-surface-card > .card-header h5,
.app-page .app-surface-card .card-title,
.app-page .app-section-heading h4,
.app-page .rem-panel-title h4 {
  font-size: .92rem;
}

.app-page .form-label {
  margin-bottom: 5px;
  color: #526075;
  font-size: .68rem;
  font-weight: 600;
}

.app-ui-button:not(.btn-link) {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.app-ui-button.btn-sm:not(.btn-link),
.btn-group-sm > .app-ui-button:not(.btn-link) {
  min-height: 29px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: .64rem;
}

.btn-group > .app-ui-button:not(:first-child),
.btn-group-sm > .app-ui-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .app-ui-button:not(:last-child),
.btn-group-sm > .app-ui-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.app-ui-button.btn-secondary,
.app-ui-button.btn-outline-secondary,
.app-ui-button.btn-outline-dark,
.app-ui-button.app-btn-utility {
  --bs-btn-color: #526075;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #cbd5e1;
  --bs-btn-hover-color: #275fae;
  --bs-btn-hover-bg: #f4f7fb;
  --bs-btn-hover-border-color: #91acd2;
  --bs-btn-active-color: #1f4f94;
  --bs-btn-active-bg: #eaf1fa;
  --bs-btn-active-border-color: #7d9cc8;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: var(--bs-btn-bg);
}

.app-ui-button.btn-primary {
  --bs-btn-bg: #275fae;
  --bs-btn-border-color: #275fae;
  --bs-btn-hover-bg: #1f4f94;
  --bs-btn-hover-border-color: #1f4f94;
  --bs-btn-active-bg: #193f78;
  --bs-btn-active-border-color: #193f78;
}

.app-ui-button.btn-danger,
.app-ui-button.btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #df3045;
  --bs-btn-border-color: #df3045;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c51f34;
  --bs-btn-hover-border-color: #c51f34;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: var(--bs-btn-bg);
}

.app-ui-button.btn-success,
.app-ui-button.btn-outline-success {
  --bs-btn-color: #167846;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #8bc7aa;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #168653;
  --bs-btn-hover-border-color: #168653;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: var(--bs-btn-bg);
}

.app-shell .app-ui-button.app-btn-utility {
  --bs-btn-color: #526075;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #cbd5e1;
  color: #526075;
  border-color: #cbd5e1;
  background: #fff;
}

.app-ui-button.app-btn-utility:hover,
.app-ui-button.app-btn-utility:focus-visible,
.app-ui-button.app-btn-utility:active {
  color: #275fae;
  border-color: #91acd2;
  background: #f4f7fb;
}

.app-table-surface {
  background: #fff;
}

.app-table-region {
  max-width: 100%;
  border: 0;
  border-top: 1px solid #dfe4ea;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.app-table-region-inset {
  margin: 13px -16px -16px;
}

.app-shell .app-unified-table,
.app-shell .settings-table.app-unified-table,
.app-shell .table.app-unified-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #344054;
  font-size: .72rem;
}

.app-shell .app-unified-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 9px 11px;
  border-bottom: 1px solid #dfe4ea;
  background: #f4f6f9 !important;
  color: #667085;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-shell .app-unified-table tbody td {
  padding: 8px 11px;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  color: #344054;
  font-size: .71rem;
  line-height: 1.3;
  vertical-align: middle;
}

.app-shell .app-unified-table tbody tr:nth-child(even) td { background: #fbfcfd; }
.app-shell .app-unified-table tbody tr:hover td { background: #fff6f7; }
.app-shell .app-unified-table tbody tr:last-child td { border-bottom: 0; }

.app-density-compact .app-unified-table thead th { padding-block: 6px; }
.app-density-compact .app-unified-table tbody td { padding-block: 5px; }

.users-roles-card.app-table-surface > .card-body,
.users-list-card.app-table-surface > .card-body {
  padding-bottom: 16px;
}

body.dark-mode .app-table-surface,
body.dark-mode .app-table-region { background: #1c2026; }
body.dark-mode .app-table-region { border-color: #38404a; }
body.dark-mode .app-page .app-surface-card > .card-header { border-color: #38404a; background: #22272e; }
body.dark-mode .app-page .app-surface-card > .card-header h2,
body.dark-mode .app-page .app-surface-card > .card-header h3,
body.dark-mode .app-page .app-surface-card > .card-header h4,
body.dark-mode .app-page .app-surface-card > .card-header h5,
body.dark-mode .app-page .app-surface-card .card-title,
body.dark-mode .app-page .app-section-heading h4,
body.dark-mode .app-page .rem-panel-title h4 { color: #f0f2f5; }
body.dark-mode .app-shell .app-unified-table thead th { border-color: #38404a; background: #242930 !important; color: #b8c0ca; }
body.dark-mode .app-shell .app-unified-table tbody td { border-color: #303640; background: #1c2026; color: #d8dde4; }
body.dark-mode .app-shell .app-unified-table tbody tr:nth-child(even) td,
body.dark-mode .app-shell .app-unified-table tbody tr:hover td { background: #242930; }

@media (max-width: 767.98px) {
  .app-ui-button:not(.btn-link) { min-height: 32px; padding-inline: 9px; }
  .app-table-region-inset { margin-right: -12px; margin-left: -12px; }
}

/* User administration ---------------------------------------------------- */
.user-management-page .users-management-shell {
  gap: 16px;
}

.user-management-page .users-add-card > .card-body {
  padding: 14px 16px 16px;
}

.user-management-page .users-add-card .users-card-header {
  min-height: 0;
  margin-bottom: 14px !important;
  padding: 0;
}

.users-add-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 11px 12px;
  align-items: end;
}

.users-form-field { min-width: 0; }
.users-form-username { grid-column: span 4; }
.users-form-email { grid-column: span 5; }
.users-form-role { grid-column: span 3; }
.users-form-tenants { grid-column: span 6; }
.users-form-default { grid-column: span 3; }
.users-form-languages { grid-column: span 6; }
.user-language-options { margin: 0; padding: 0; border: 0; }
.user-language-options legend { float: none; width: auto; }
.user-language-editor { min-width: 175px; }
.user-language-options .form-check-input { margin-top: 0; }
.users-form-actions { display: grid; grid-column: span 3; }
.users-form-actions .btn { width: 100%; }

.user-management-page .users-add-form .form-control,
.user-management-page .users-add-form .form-select,
.user-management-page .user-role-form .form-control,
.user-management-page .user-role-form .form-select {
  min-height: 36px;
  border-color: #d7dee8;
  border-radius: 8px;
  background-color: #fff;
  font-size: .74rem;
}

.user-management-page #addUserTenantAccess {
  min-height: 36px;
  align-content: center;
  padding: 4px 6px !important;
  border-color: #d7dee8 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.user-management-page .users-roles-card > .card-body,
.user-management-page .users-list-card > .card-body {
  padding: 0;
}

.user-management-page .users-card-header {
  min-height: 64px;
  margin: 0;
  padding: 12px 15px;
}

.user-management-page .users-roles-card .users-card-header,
.user-management-page .users-list-card .users-card-header {
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

.users-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.user-management-page .users-compact-editor {
  margin: 14px 15px !important;
  padding: 13px !important;
  border-color: #dce3eb !important;
  border-radius: 10px !important;
  background: #f8fafc;
}

.user-management-page .user-table-wrap.app-table-region,
.user-management-page .user-table-wrap.app-table-region-inset {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.user-management-page .user-table-wrap .settings-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.user-management-page .user-roles-table { min-width: 1180px; }
.user-management-page .user-roles-table th:nth-child(1),
.user-management-page .user-roles-table td:nth-child(1) { width: 140px; }
.user-management-page .user-roles-table th:nth-child(2),
.user-management-page .user-roles-table td:nth-child(2) { width: 220px; }
.user-management-page .user-roles-table th:nth-child(4),
.user-management-page .user-roles-table td:nth-child(4) { width: 62px; }
.user-management-page .user-roles-table th:nth-child(5),
.user-management-page .user-roles-table td:nth-child(5) { width: 82px; }
.user-management-page .user-roles-table th:nth-child(6),
.user-management-page .user-roles-table td:nth-child(6) { width: 220px; }

.user-management-page .user-list-table { min-width: 1495px; }
.user-management-page .user-list-table th:nth-child(1),
.user-management-page .user-list-table td:nth-child(1) { width: 44px; }
.user-management-page .user-list-table th:nth-child(2),
.user-management-page .user-list-table td:nth-child(2) { width: 135px; }
.user-management-page .user-list-table th:nth-child(3),
.user-management-page .user-list-table td:nth-child(3) { width: 205px; }
.user-management-page .user-list-table th:nth-child(4),
.user-management-page .user-list-table td:nth-child(4) { width: 160px; }
.user-management-page .user-list-table th:nth-child(5),
.user-management-page .user-list-table td:nth-child(5) { width: 405px; }
.user-management-page .user-list-table th:nth-child(6),
.user-management-page .user-list-table td:nth-child(6) { width: 145px; }
.user-management-page .user-list-table th:nth-child(7),
.user-management-page .user-list-table td:nth-child(7) { width: 180px; }
.user-management-page .user-list-table th:nth-child(8),
.user-management-page .user-list-table td:nth-child(8) { width: 220px; }

.user-management-page .user-list-table .form-control,
.user-management-page .user-list-table .form-select {
  min-height: 31px;
  padding: 5px 8px;
  border-color: #d7dee8;
  border-radius: 8px;
  font-size: .7rem;
}

.user-management-page .tenant-check-pill,
.user-management-page .user-permission-option {
  min-height: 25px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: .65rem;
}

.user-management-page .tenant-check-pill .form-check-input,
.user-management-page .user-permission-option .form-check-input {
  width: 13px;
  height: 13px;
}

.user-management-page .tenant-default-select {
  width: 165px;
  max-width: 165px;
}

.user-management-page .tenant-access-editor {
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid #e0e6ee;
  border-radius: 9px;
  background: #f8fafc;
}

.tenant-access-heading,
.tenant-default-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-access-heading > span,
.tenant-default-row > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #526075;
  font-size: .59rem;
  font-weight: 700;
}

.tenant-access-heading > span { text-transform: uppercase; letter-spacing: .035em; }
.tenant-access-heading i,
.tenant-default-row i { color: #6b83a5; }
.tenant-access-heading small { color: #8490a1; font-size: .57rem; }

.user-management-page .tenant-access-editor .tenant-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-management-page .tenant-default-row {
  margin: 1px 0 0;
  padding-top: 5px;
  border-top: 1px solid #e2e7ee;
}

.user-management-page .user-field-hint {
  margin-top: 3px;
  color: #7a8698;
  font-size: .59rem;
  line-height: 1.25;
}

.permission-chip-list {
  gap: 4px;
}

.permission-chip {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid #dce3eb;
  border-radius: 999px;
  background: #f5f7fa;
  color: #526075;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.role-type-badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 700;
}
.role-type-system { background: #253248; color: #fff; }
.role-type-custom { border: 1px solid #ccd6e2; background: #fff; color: #526075; }

.user-management-page .user-action-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: 5px;
  overflow: visible;
}

.user-management-page .user-action-buttons .btn {
  min-width: 0;
  width: max-content;
  padding: 4px 7px;
  font-size: .62rem;
}

.user-management-page .role-actions-cell,
.user-management-page .user-actions-cell {
  overflow: visible;
  white-space: nowrap;
}

.user-management-page .user-action-buttons .btn i { margin: 0; }

.user-management-page .user-action-buttons .app-row-action-icon.btn {
  width: 29px;
  height: 29px;
  padding: 0;
}

/* Keep row controls in a predictable first column across workspaces. */
.app-actions-first .app-action-column {
  white-space: nowrap;
  text-align: left !important;
}
.app-actions-first .app-action-column > [class*="actions"] {
  justify-content: flex-start;
}

.app-actions-first.action-center-table th:first-child,
.app-actions-first.action-center-table td:first-child {
  width: 200px;
  min-width: 200px;
}
.app-actions-first.action-center-table th:last-child,
.app-actions-first.action-center-table td:last-child {
  width: auto;
  min-width: 0;
}

.app-actions-first.rem-table th:nth-child(1) { width: 11%; }
.app-actions-first.rem-table th:nth-child(2) { width: 14%; }
.app-actions-first.rem-table th:nth-child(3) { width: 9%; }
.app-actions-first.rem-table th:nth-child(4) { width: 11%; }
.app-actions-first.rem-table th:nth-child(5) { width: 19%; }
.app-actions-first.rem-table th:nth-child(6) { width: 10%; }
.app-actions-first.rem-table th:nth-child(7) { width: 15%; }
.app-actions-first.rem-table th:nth-child(8) { width: 11%; }

.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(1),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(1) { width: 78px; }
.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(2),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(2) { width: 140px; }
.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(3),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(3) { width: 220px; }
.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(4),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(4) { width: 598px; }
.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(5),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(5) { width: 62px; text-align: center; }
.user-management-page .user-roles-table[data-actions-position="keep"] th:nth-child(6),
.user-management-page .user-roles-table[data-actions-position="keep"] td:nth-child(6) { width: 82px; text-align: center; }

.user-management-page .app-actions-first.user-list-table th:nth-child(1),
.user-management-page .app-actions-first.user-list-table td:nth-child(1) { width: 78px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(2),
.user-management-page .app-actions-first.user-list-table td:nth-child(2) { width: 44px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(3),
.user-management-page .app-actions-first.user-list-table td:nth-child(3) { width: 135px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(4),
.user-management-page .app-actions-first.user-list-table td:nth-child(4) { width: 205px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(5),
.user-management-page .app-actions-first.user-list-table td:nth-child(5) { width: 160px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(6),
.user-management-page .app-actions-first.user-list-table td:nth-child(6) { width: 405px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(7),
.user-management-page .app-actions-first.user-list-table td:nth-child(7) { width: 145px; }
.user-management-page .app-actions-first.user-list-table th:nth-child(8),
.user-management-page .app-actions-first.user-list-table td:nth-child(8) { width: 180px; }

@media (max-width: 1199.98px) {
  .users-form-username,
  .users-form-email,
  .users-form-password,
  .users-form-role { grid-column: span 6; }
  .users-form-tenants { grid-column: span 6; }
  .users-form-default,
  .users-form-actions { grid-column: span 3; }
}

@media (max-width: 767.98px) {
  .users-form-username,
  .users-form-email,
  .users-form-password,
  .users-form-role,
  .users-form-tenants,
  .users-form-languages,
  .users-form-default,
  .users-form-actions { grid-column: 1 / -1; }
  .user-management-page .users-card-header { align-items: flex-start; }
  .users-card-actions { align-self: center; }
}

body.dark-mode .user-management-page .users-roles-card .users-card-header,
body.dark-mode .user-management-page .users-list-card .users-card-header { border-color: #38404a; background: #22272e; }
body.dark-mode .user-management-page .users-compact-editor,
body.dark-mode .user-management-page #addUserTenantAccess { border-color: #3b424c !important; background: #242930 !important; }
body.dark-mode .permission-chip { border-color: #424a55; background: #262c33; color: #d8dde4; }
body.dark-mode .role-type-custom { border-color: #4a535f; background: #262c33; color: #d8dde4; }
body.dark-mode .user-management-page .tenant-access-editor { border-color: #3b424c; background: #242930; }
body.dark-mode .user-management-page .tenant-default-row { border-color: #3b424c; }

/* Compact compliance customer summary ----------------------------------- */
.compliance-customer-summary {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dde4ed;
  border-radius: 12px;
  background: #fff;
  color: #344054;
}

.compliance-summary-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border-bottom: 1px solid #e6eaf0;
  background: linear-gradient(180deg, #fff, #fafbfd);
}

.compliance-summary-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.compliance-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #feecef;
  color: #df3045;
  font-size: .9rem;
}

.compliance-summary-name-wrap { min-width: 0; }
.compliance-summary-eyebrow,
.compliance-summary-created > span,
.compliance-summary-kpi > span,
.compliance-communication-item span {
  display: block;
  color: #778398;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.25;
  text-transform: uppercase;
}

.compliance-summary-heading .customer-name {
  margin: 1px 0 3px;
  color: #172033;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
}

.compliance-summary-company-code {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 3px;
  color: #667085;
  font-size: .61rem;
}

.compliance-summary-company-code span { font-weight: 600; }
.compliance-summary-company-code strong { color: #344054; font-weight: 700; }

.compliance-summary-options {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.compliance-summary-options > span:first-child {
  margin-right: 2px;
  color: #667085;
  font-size: .61rem;
  font-weight: 600;
}

.compliance-summary-options .badge {
  padding: 3px 7px;
  font-size: .56rem;
}

.compliance-summary-created {
  display: grid;
  min-width: 145px;
  justify-items: end;
  text-align: right;
}
.compliance-summary-created strong { margin-top: 2px; color: #344054; font-size: .69rem; font-weight: 600; }
.compliance-summary-created small { color: #8490a1; font-size: .58rem; }

.compliance-summary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #e6eaf0;
}

.compliance-summary-kpi {
  min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid #e6eaf0;
}
.compliance-summary-kpi > span {
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compliance-summary-kpi:last-child { border-right: 0; }
.compliance-summary-kpi strong { display: block; margin-top: 2px; color: #172033; font-size: .9rem; font-weight: 700; line-height: 1.2; }
.compliance-summary-kpi-score strong { color: #275fae; }
.compliance-summary-kpi-compliant strong { color: #138a52; }
.compliance-summary-kpi-noncompliant strong { color: #d92d43; }

.compliance-summary-communications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compliance-communication-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
}
.compliance-communication-item + .compliance-communication-item { border-left: 1px solid #e6eaf0; }
.compliance-communication-item > i { flex: 0 0 auto; color: #5682be; font-size: .92rem; }
.compliance-communication-item > div { min-width: 0; }
.compliance-communication-item strong { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #344054; font-size: .66rem; font-weight: 600; line-height: 1.25; }
.compliance-communication-item small { display: block; overflow: hidden; margin-top: 2px; color: #8490a1; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.communication-status-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border: 0;
  font-size: .56rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .015em;
  vertical-align: middle;
}
.communication-status-badge.communication-status-ok { background: #138a52 !important; color: #fff !important; }
.communication-status-badge.communication-status-danger { background: #d92d43 !important; color: #fff !important; }
.communication-status-badge.communication-status-warning { background: #ffc107 !important; color: #382800 !important; }
.communication-status-badge.communication-status-neutral { background: #667085 !important; color: #fff !important; }

.compliance-customer-actions {
  overflow: hidden;
  margin: 0 0 10px;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  background: #fff;
}

.compliance-customer-actions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.compliance-customer-action {
  min-width: 0;
  padding: 10px 12px;
}

.compliance-customer-action + .compliance-customer-action {
  border-left: 1px solid #e6eaf0;
}

.compliance-customer-action-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #667085;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.compliance-customer-action-title i { color: #e62f47; font-size: .78rem; }
.compliance-customer-actions .compliance-login-row { gap: 8px; }
.compliance-customer-actions .compliance-login-row > .btn { min-width: 0; min-height: 34px; padding: 6px 12px; font-size: .72rem; font-weight: 700; }
.compliance-customer-actions .compliance-password-field { min-height: 34px; padding: 5px 9px; border-radius: 8px; }
.compliance-customer-actions .compliance-password-field .password-text { min-width: 62px; font-size: .7rem; }

.compliance-contact-action {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.compliance-contact-details { display: grid; min-width: 0; gap: 1px; }
.compliance-contact-details strong,
.compliance-contact-details span,
.compliance-contact-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-contact-details strong { color: #172033; font-size: .7rem; font-weight: 700; }
.compliance-contact-details > span { color: #526071; font-size: .64rem; }
.compliance-contact-details small { color: #8490a1; font-size: .58rem; }
.compliance-contact-action > .btn { flex: 0 0 auto; min-height: 34px; font-size: .68rem; font-weight: 700; }

.compliance-action-empty {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  color: #8a5a00;
  font-size: .66rem;
  line-height: 1.35;
}

.compliance-email-composer-top {
  margin: 0;
  padding: 12px;
  border-top: 1px solid #e6eaf0;
  background: #fbfcfe;
}

.compliance-communication-warning {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: .68rem;
}
.compliance-communication-warning > i { flex: 0 0 auto; }
.compliance-communication-warning strong,
.compliance-communication-warning span { display: block; }
.compliance-communication-warning span { margin-top: 1px; }

@media (max-width: 767.98px) {
  .compliance-summary-heading { align-items: flex-start; }
  .compliance-summary-created { min-width: 0; }
  .compliance-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance-summary-kpi:nth-child(2n) { border-right: 0; }
  .compliance-summary-kpi:nth-child(-n+2) { border-bottom: 1px solid #e6eaf0; }
  .compliance-summary-communications { grid-template-columns: 1fr; }
  .compliance-communication-item + .compliance-communication-item { border-top: 1px solid #e6eaf0; border-left: 0; }
  .compliance-customer-actions-grid { grid-template-columns: 1fr; }
  .compliance-customer-action + .compliance-customer-action { border-top: 1px solid #e6eaf0; border-left: 0; }
}

@media (max-width: 479.98px) {
  .compliance-summary-heading { display: grid; }
  .compliance-summary-created { justify-items: start; text-align: left; }
}

body.dark-mode .compliance-customer-summary { border-color: #3b424c; background: #1c2026; color: #d8dde4; }
body.dark-mode .compliance-summary-heading { border-color: #3b424c; background: #22272e; }
body.dark-mode .compliance-summary-heading .customer-name,
body.dark-mode .compliance-summary-company-code strong,
body.dark-mode .compliance-summary-created strong,
body.dark-mode .compliance-summary-kpi strong,
body.dark-mode .compliance-communication-item strong { color: #eef1f4; }
body.dark-mode .compliance-summary-kpis,
body.dark-mode .compliance-summary-kpi,
body.dark-mode .compliance-communication-item + .compliance-communication-item { border-color: #3b424c; }
body.dark-mode .compliance-customer-actions { border-color: #3b424c; background: #1c2026; }
body.dark-mode .compliance-customer-action + .compliance-customer-action,
body.dark-mode .compliance-email-composer-top { border-color: #3b424c; }
body.dark-mode .compliance-email-composer-top { background: #22272e; }
body.dark-mode .compliance-contact-details strong { color: #eef1f4; }

/* Customer device inventory filters */
.customer-devices-page .app-toolbar-card {
  z-index: 20;
  overflow: visible;
}

.customer-devices-page .app-toolbar-card > .card-body {
  border-radius: inherit;
}

.inventory-filter-row { align-items: stretch; }
.inventory-filter-row > div { min-width: 0; }

.inventory-filter-control {
  width: 100%;
  min-height: 38px;
  border-color: #d7dee8;
  border-radius: 9px;
  background-color: #fff;
  color: #344054;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
}

.customer-devices-page button.inventory-filter-control.dropdown-toggle {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  text-align: left !important;
}

.customer-devices-page button.inventory-filter-control.dropdown-toggle::after {
  flex: 0 0 auto;
  margin: 0;
}

.customer-devices-page button.inventory-filter-control.dropdown-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-search-field,
.inventory-dropdown-search { position: relative; }

.inventory-search-field > i,
.inventory-dropdown-search > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #8994a4;
  font-size: .75rem;
  pointer-events: none;
}

.inventory-search-field .form-control { padding-left: 34px; }

.customer-multiselect .dropdown-menu,
.model-multiselect .dropdown-menu {
  z-index: 1080;
  width: max(100%, 285px) !important;
  max-height: none;
  margin-top: 5px !important;
  overflow: visible;
  border: 1px solid #dfe5ed;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 15px 36px rgba(23, 32, 51, .16);
}

.inventory-dropdown-search { margin-bottom: 7px; }
.inventory-dropdown-search > i { left: 10px; }
.inventory-dropdown-search .form-control {
  min-height: 32px;
  padding-left: 30px;
  border-radius: 8px;
  font-size: .67rem;
}

.customer-multiselect .form-check,
.model-multiselect .form-check {
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 7px;
  text-align: left;
}

.customer-multiselect .form-check:hover,
.model-multiselect .form-check:hover { background: #f5f7fa; }
.customer-multiselect .form-check[hidden],
.model-multiselect .form-check[hidden] { display: none !important; }

.customer-multiselect .form-check-input,
.model-multiselect .form-check-input {
  float: none;
  width: 15px !important;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  opacity: 1;
  accent-color: #e6273f;
}

.customer-multiselect .form-check-label,
.model-multiselect .form-check-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: #344054;
  font-size: .68rem;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.customer-filter-options,
.model-filter-options {
  max-height: 235px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.inventory-option-filters {
  display: flex;
  min-height: 31px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.inventory-option-title {
  margin-right: 3px;
  color: #667085;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.inventory-option-check { display: none; }

.inventory-option-chip {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  background: #fff;
  color: #495057;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
}

.inventory-option-chip:hover { border-color: #e58c99; background: #fff7f8; color: #b42336; }
.inventory-option-check:checked + .inventory-option-chip {
  border-color: #dc3545;
  background: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, .13);
  color: #fff;
}

.inventory-clear-filters {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: .64rem;
  font-weight: 600;
}

.inventory-clear-filters:hover { background: #f2f4f7; color: #b42336; }
.inventory-clear-filters:disabled { background: transparent; color: #aab2bf; opacity: .62; cursor: default; }

.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1400px) {
  .inventory-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .customer-devices-page .app-toolbar-card { z-index: 20; }
  .inventory-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-multiselect .dropdown-menu,
  .model-multiselect .dropdown-menu { width: 100% !important; }
}

@media (max-width: 575.98px) {
  .inventory-kpi-grid { grid-template-columns: 1fr; }
  .inventory-clear-filters { width: 100%; justify-content: center; margin-left: 0; }
}

body.dark-mode .customer-multiselect .dropdown-menu,
body.dark-mode .model-multiselect .dropdown-menu,
body.dark-mode .inventory-filter-control,
body.dark-mode .inventory-option-chip { border-color: #3b424c; background: #22272e; color: #e7eaee; }
body.dark-mode .customer-multiselect .form-check:hover,
body.dark-mode .model-multiselect .form-check:hover,
body.dark-mode .inventory-clear-filters:hover { background: #2b3139; }
body.dark-mode .customer-multiselect .form-check-label,
body.dark-mode .model-multiselect .form-check-label { color: #e7eaee; }

/* Customer overview login cards */
#customers #loginButtons { --bs-gutter-x: .75rem; }

#customers #loginButtons .customer-login-card {
  display: grid;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 3px 9px;
  padding: 8px 10px;
  border: 1px solid #dfe5ed;
  border-left: 4px solid #7b8794;
  border-radius: 10px;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(23, 32, 51, .055);
  color: #172033 !important;
  line-height: 1.2;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#customers #loginButtons .customer-login-card:hover,
#customers #loginButtons .customer-login-card:focus-visible {
  box-shadow: 0 7px 18px rgba(23, 32, 51, .11);
  color: #172033 !important;
  transform: translateY(-1px);
}

#customers #loginButtons .login-item button.customer-login-card.compliance-ok {
  border-color: #b8dfca !important;
  border-left-color: #198754 !important;
  background: #f4fbf7 !important;
}

#customers #loginButtons .login-item button.customer-login-card.compliance-bad {
  border-color: #f0b6bf !important;
  border-left-color: #dc3545 !important;
  background: #fff5f6 !important;
}

#customers #loginButtons .login-item button.customer-login-card.compliance-unknown {
  border-color: #d9dee5 !important;
  border-left-color: #7b838c !important;
  background: #f7f8fa !important;
}

.customer-login-identity {
  display: flex;
  min-width: 0;
  grid-column: 1;
  align-items: center;
  gap: 7px;
}

.customer-login-company-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(102, 112, 133, .10);
  color: #667085;
  font-size: .65rem;
}

.compliance-ok .customer-login-company-icon { background: #dff3e8; color: #147448; }
.compliance-bad .customer-login-company-icon { background: #fde3e7; color: #c5223a; }

.customer-login-name {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: .72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-login-note { flex: 0 0 auto; color: #d58a00; font-size: .68rem; }

.customer-login-devices {
  display: flex;
  min-width: 0;
  grid-column: 1;
  align-items: center;
  gap: 6px;
  padding-left: 29px;
}

.customer-login-devices-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #7a8698;
  font-size: .53rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.customer-login-devices-value {
  min-width: 0;
  overflow: hidden;
  color: #526075;
  font-size: .61rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-login-open {
  display: inline-flex;
  width: 24px;
  height: 24px;
  grid-column: 2;
  grid-row: 1 / -1;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #7a8698;
  font-size: .72rem;
}

#customers #loginButtons .customer-login-card:hover .customer-login-open { background: #fff; color: #d9223b; }

body.dark-mode #customers #loginButtons .login-item button.customer-login-card {
  border-color: #3b424c !important;
  background: #22272e !important;
  color: #eef1f4 !important;
}
body.dark-mode #customers .customer-login-name { color: #eef1f4; }
body.dark-mode #customers .customer-login-devices-value { color: #c0c7d0; }
body.dark-mode #customers .customer-login-open { background: #2b3139; }

/* Customer overview filter workspace */
#indexCustomerToolbar,
#firmwareProposalToolbar {
  padding: 0;
  border-left: 3px solid #ed334d;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  overflow: visible;
}

.customer-filter-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 2.2fr);
  gap: 0;
}

.customer-filter-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid #e6ebf1;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(90deg, #fff7f8 0%, #fff 42%, #f8fafc 100%);
}

.customer-filter-heading-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fde7ea;
  color: #df2842;
  font-size: .78rem;
}

.customer-filter-heading-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.customer-filter-heading-copy strong {
  color: #172033;
  font-size: .76rem;
  font-weight: 700;
}

.customer-filter-heading-copy small {
  margin-top: 3px;
  color: #7a8698;
  font-size: .61rem;
}

.customer-filter-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 11px 0 11px 13px;
}

.customer-filter-search > .bi {
  position: absolute;
  left: 13px;
  z-index: 1;
  color: #8995a7;
  font-size: .88rem;
  pointer-events: none;
}

#indexCustomerToolbar #searchInput,
#firmwareProposalToolbar #firmwareProposalSearch {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 14px 0 38px;
  border-color: #d8e0ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-size: .85rem;
}

#indexCustomerToolbar #searchInput:focus,
#firmwareProposalToolbar #firmwareProposalSearch:focus {
  border-color: #ed6b7e;
  box-shadow: 0 0 0 3px rgba(237, 51, 77, .10);
}

.customer-filter-controls {
  justify-content: flex-end;
  gap: 8px;
  margin: 11px 13px 11px 10px;
}

.customer-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#indexCustomerToolbar .option-filter-chip,
#firmwareProposalToolbar .option-filter-chip {
  min-height: 30px;
  gap: 5px;
  padding: 4px 11px;
  border-color: #d6dee8;
  font-size: .72rem;
}

#indexCustomerToolbar .option-filter-dropdown-btn,
#indexCustomerToolbar .option-filter-select,
#firmwareProposalToolbar .option-filter-dropdown-btn,
#firmwareProposalToolbar .option-filter-select {
  height: 32px;
  border-color: #d6dee8;
  border-radius: 9px;
  line-height: 30px;
}

.customer-filter-reset {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d6dee8;
  border-radius: 9px;
  background: #f8fafc;
  color: #526075;
  font-size: .7rem;
  font-weight: 600;
  margin-left: auto;
}

.customer-filter-reset:hover,
.customer-filter-reset:focus-visible {
  border-color: #ef8796;
  background: #fff4f6;
  color: #c91f37;
}

.customer-login-metadata {
  display: flex;
  min-width: 0;
  grid-column: 1;
  align-items: center;
  gap: 8px;
  padding-left: 29px;
}

.customer-login-types {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.customer-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #536176;
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.customer-type-fleet { border-color: #cfdcf6; color: #315eaa; }
.customer-type-print { border-color: #f1cbd2; color: #bd2740; }
.customer-type-monitor { border-color: #c7e6d7; color: #147448; }

.customer-login-metadata .customer-login-devices {
  padding-left: 0;
}

.customer-login-metadata .customer-login-types + .customer-login-devices {
  padding-left: 8px;
  border-left: 1px solid #dfe5ed;
}

body.dark-mode #indexCustomerToolbar,
body.dark-mode #firmwareProposalToolbar { background: linear-gradient(180deg, #22272e, #20252b); }
body.dark-mode .customer-filter-heading { border-bottom-color: #353b43; background: linear-gradient(90deg, #2d2529, #22272e 46%, #20252b); }
body.dark-mode .customer-filter-heading-copy strong { color: #f2f4f7; }
body.dark-mode #indexCustomerToolbar #searchInput,
body.dark-mode #firmwareProposalToolbar #firmwareProposalSearch,
body.dark-mode .customer-filter-reset,
body.dark-mode .customer-type-badge { border-color: #3b424c; background: #22272e; color: #e7eaee; }
body.dark-mode .customer-filter-controls { border-top-color: #353b43; }

/* Compact customer add/edit form */
#customerForm.settings-form {
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  border-color: #dfe6ee;
  border-left: 3px solid #ed334d;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 32, 51, .06);
}

.customer-form-header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-bottom: 1px solid #e6ebf1;
  background: linear-gradient(90deg, #fff7f8 0%, #fff 48%, #f8fafc 100%);
}

.customer-form-title { color: #172033; font-size: .9rem; font-weight: 700; }

.customer-form-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.customer-form-actions .btn {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 600;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 12px 13px 13px;
}

.customer-form-field { min-width: 0; }
.customer-form-field .form-label,
.customer-form-choice legend,
.customer-form-devices-heading {
  display: block;
  width: auto;
  margin: 0 0 4px;
  color: #536176;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.customer-form-field .form-control {
  min-height: 34px;
  padding: 5px 9px;
  border-color: #d8e0ea;
  border-radius: 8px;
  font-size: .73rem;
}

.customer-form-email { grid-column: span 2; }
.customer-form-notes { grid-column: span 2; }
.customer-form-notes textarea.form-control { min-height: 58px; resize: vertical; }

.customer-form-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.customer-form-chips { display: flex; min-height: 34px; flex-wrap: wrap; align-items: center; gap: 6px; }
.customer-form-chips label { margin: 0; cursor: pointer; }
.customer-form-chips input { position: absolute; opacity: 0; pointer-events: none; }
.customer-form-chips label > span {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  background: #fff;
  color: #526075;
  font-size: .68rem;
  font-weight: 600;
  transition: all .15s ease;
}
.customer-form-chips label:hover > span { border-color: #ed8796; background: #fff7f8; }
.customer-form-chips input:checked + span {
  border-color: #df2842;
  background: #df2842;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(223, 40, 66, .11);
}
.customer-form-chips input:focus-visible + span { outline: 2px solid #7aa7e8; outline-offset: 2px; }

.customer-form-devices {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}
.customer-form-devices-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
#customerForm .devices-container { max-height: 175px; overflow: auto; scrollbar-width: thin; }
#customerForm .device-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 7px;
  padding-top: 2px;
}
#customerForm .device-col { padding: 6px 7px; border-radius: 7px; background: #fff; }
#customerForm .device-col h6 { margin: 0 0 3px; font-size: .66rem; }
#customerForm .device-check { gap: 5px; margin: 0 0 2px; font-size: .63rem; }
#customerForm .device-check .form-check-input { width: 13px; height: 13px; flex: 0 0 13px; margin: 0; }

body.dark-mode #customerForm.settings-form,
body.dark-mode .customer-form-chips label > span,
body.dark-mode #customerForm .device-col { border-color: #3b424c; background: #22272e; color: #e7eaee; }
body.dark-mode .customer-form-header { border-bottom-color: #353b43; background: linear-gradient(90deg, #2d2529, #22272e 48%, #20252b); }
body.dark-mode .customer-form-title { color: #f2f4f7; }
body.dark-mode .customer-form-devices { border-color: #3b424c; background: #20252b; }

@media (max-width: 1100px) {
  .customer-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-form-email { grid-column: span 1; }
}

@media (max-width: 620px) {
  .customer-form-header { align-items: flex-start; }
  .customer-form-header .text-muted { display: none; }
  .customer-form-actions span { display: none; }
  .customer-form-grid { grid-template-columns: 1fr; }
  .customer-form-email,
  .customer-form-notes { grid-column: span 1; }
}

@media (max-width: 1500px) {
  .customer-filter-layout { grid-template-columns: 1fr; }
  .customer-filter-heading,
  .customer-filter-search,
  .customer-filter-controls { grid-column: 1; }
  .customer-filter-search { margin: 11px 13px 0; }
  .customer-filter-controls {
    margin: 9px 13px 11px;
    padding-top: 9px;
    border-top: 1px solid #edf0f4;
  }
  .customer-filter-controls { justify-content: flex-start; }
  .customer-filter-priority-group { margin-left: 0; }
}

@media (max-width: 680px) {
  .customer-filter-group { flex-wrap: wrap; }
  .customer-filter-group .option-filter-title { flex-basis: 100%; }
  .customer-filter-reset span { display: none; }
  .customer-filter-heading-copy small { display: none; }
  .customer-login-metadata { flex-wrap: wrap; }
}
.login-entra {
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 18px;
}

.login-entra[hidden], .login-divider[hidden], #loginForm[hidden] { display: none !important; }

.microsoft-mark {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(2, 8px);
  gap: 2px;
}

.microsoft-mark i:nth-child(1) { background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 18px;
  color: #7d879a;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.login-divider::before, .login-divider::after {
  content: '';
  height: 1px;
  background: #e1e6ef;
  flex: 1;
}

/* Tenant branding -------------------------------------------------------- */
body:not(.login-wrapper) {
  background-color: var(--tenant-page-background);
  color: var(--tenant-background-contrast);
}

.sidebar {
  background-color: var(--tenant-sidebar);
  color: var(--tenant-sidebar-contrast);
}

.sidebar .sidebar-tenant-name,
.sidebar .sidebar-app-version,
.sidebar .sidebar-nav-heading,
.sidebar .sidebar-nav-link,
.sidebar .sidebar-nav-link:visited,
.sidebar .sidebar-nav-link i,
.sidebar .sidebar-utility-btn {
  color: color-mix(in srgb, var(--tenant-sidebar-contrast) 76%, transparent);
}

.sidebar .sidebar-nav-link:hover,
.sidebar .sidebar-utility-btn:hover {
  color: var(--tenant-sidebar-contrast);
}

.sidebar a.active,
.sidebar .sidebar-nav-link.active,
.sidebar-bottom .app-locale-btn.active {
  border-color: color-mix(in srgb, var(--tenant-primary) 78%, white 22%);
  background: var(--tenant-primary);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--tenant-primary) 28%, transparent);
  color: var(--tenant-primary-contrast);
}

.sidebar .sidebar-nav-link.active i {
  color: var(--tenant-primary-contrast);
}

.app-hero {
  border-color: color-mix(in srgb, var(--tenant-primary) 16%, #d9e1ea);
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--tenant-primary) 13%, transparent), transparent 27%),
    linear-gradient(135deg, var(--tenant-surface) 0%, color-mix(in srgb, var(--tenant-primary) 5%, var(--tenant-surface)) 100%);
}

.app-hero::before {
  border-color: color-mix(in srgb, var(--tenant-primary) 5%, transparent);
}

.app-hero-icon,
.app-modal-title-icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 88%, white), color-mix(in srgb, var(--tenant-primary) 82%, black));
  box-shadow: 0 9px 20px color-mix(in srgb, var(--tenant-primary) 24%, transparent);
  color: var(--tenant-primary-contrast);
}

.app-hero-eyebrow {
  color: var(--tenant-primary);
}

.app-hero .btn-primary,
.btn-primary:not(.app-hero .btn-primary) {
  --bs-btn-color: var(--tenant-primary-contrast);
  --bs-btn-bg: var(--tenant-primary);
  --bs-btn-border-color: var(--tenant-primary);
  --bs-btn-hover-color: var(--tenant-primary-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--tenant-primary) 84%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--tenant-primary) 84%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--tenant-primary) 76%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--tenant-primary) 76%, black);
}

.app-hero .btn-outline-primary,
.btn-outline-primary:not(.app-hero .btn-outline-primary) {
  --bs-btn-color: var(--tenant-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--tenant-primary) 58%, white);
  --bs-btn-hover-color: var(--tenant-primary-contrast);
  --bs-btn-hover-bg: var(--tenant-primary);
  --bs-btn-hover-border-color: var(--tenant-primary);
}

.app-toolbar-panel::before,
.app-toolbar-card::before,
.modal.app-modal .modal-header::before,
.sidebar-collapse-btn::before {
  background: var(--tenant-primary);
}

.app-toolbar-panel,
.app-toolbar-card,
.app-surface-card,
.app-summary-card,
.modal.app-modal .modal-content {
  background-color: var(--tenant-surface);
  color: var(--tenant-surface-contrast);
}

.app-hero-title,
.modal.app-modal .modal-title {
  color: var(--tenant-surface-contrast);
}

.app-hero-subtitle,
.app-hero-meta {
  color: color-mix(in srgb, var(--tenant-surface-contrast) 66%, transparent);
}

.app-tenant-context {
  border-color: color-mix(in srgb, var(--tenant-primary) 16%, #d9e1ea);
  background: color-mix(in srgb, var(--tenant-surface) 82%, transparent);
  color: color-mix(in srgb, var(--tenant-surface-contrast) 70%, transparent);
}

.tenant-colour-control {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
}

.tenant-settings-layout {
  display: grid;
  gap: 18px;
}

.tenant-settings-primary-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.35fr);
  gap: 18px;
}

.tenant-settings-section {
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tenant-surface, #fff) 96%, #f4f7fb);
  box-shadow: 0 5px 16px rgba(21, 36, 56, .045);
}

.tenant-settings-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4eaf1;
  background: #f8fafc;
}

.tenant-settings-section-header-actions {
  flex-wrap: wrap;
}

.tenant-settings-section-header h5,
.tenant-settings-section-header p {
  margin: 0;
}

.tenant-settings-section-header h5 {
  color: #132744;
  font-size: 1rem;
  font-weight: 700;
}

.tenant-settings-section-header p {
  margin-top: 2px;
  color: #6c7a8d;
  font-size: .78rem;
}

.tenant-settings-section-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tenant-primary, #0c2340) 11%, white);
  color: var(--tenant-primary, #0c2340);
  font-size: 1rem;
}

.tenant-settings-section-security .tenant-settings-section-icon {
  background: #edf4ff;
  color: #2764b4;
}

.tenant-settings-section-body {
  padding: 18px;
}

.tenant-settings-section .form-label {
  margin-bottom: 6px;
  color: #3e5068;
  font-size: .78rem;
  font-weight: 650;
}

.tenant-settings-section .form-text {
  margin-top: 5px;
  color: #758297;
  font-size: .7rem;
}

.tenant-readonly-field {
  position: relative;
}

.tenant-readonly-field > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 12px;
  color: #78869a;
  transform: translateY(-50%);
  pointer-events: none;
}

.tenant-readonly-field .form-control {
  padding-left: 36px;
  background: #f4f7fa;
}

.tenant-branding-logo-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(320px, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.tenant-settings-subheading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 12px;
  padding-top: 18px;
  border-top: 1px solid #e8edf3;
}

.tenant-settings-subheading h6 {
  margin: 0;
  color: #263b58;
  font-weight: 700;
}

.tenant-settings-subheading span {
  color: #748195;
  font-size: .75rem;
}

.tenant-settings-actions {
  position: sticky;
  z-index: 5;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px -20px -20px;
  padding: 14px 20px;
  border-top: 1px solid #dce4ed;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -8px 22px rgba(18, 35, 58, .07);
  backdrop-filter: blur(8px);
}

@media (max-width: 1199px) {
  .tenant-settings-primary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .tenant-settings-section-header,
  .tenant-settings-section-body {
    padding: 14px;
  }

  .tenant-branding-logo-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tenant-settings-subheading {
    display: block;
  }

  .tenant-settings-subheading span {
    display: block;
    margin-top: 4px;
  }

  .tenant-settings-actions {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .tenant-settings-actions .ms-auto {
    width: 100%;
    margin-left: 0 !important;
  }

  .tenant-settings-actions .ms-auto .btn {
    flex: 1;
  }
}

.tenant-colour-control .form-control-color {
  width: 48px;
  height: 38px;
  padding: 4px;
}

.tenant-colour-value {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  text-transform: uppercase;
}

.tenant-brand-preview {
  --preview-primary: #e6273f;
  --preview-sidebar: #1a1a2e;
  --preview-background: #f0f4f8;
  --preview-surface: #fff;
  --preview-primary-contrast: #fff;
  --preview-sidebar-contrast: #fff;
  --preview-surface-contrast: #172033;
  display: grid;
  min-height: 180px;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d9e1ea;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(23, 32, 51, .07);
}

.tenant-brand-preview-sidebar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 17px 12px;
  background: var(--preview-sidebar);
  color: var(--preview-sidebar-contrast);
}

.tenant-brand-preview-logo {
  margin-bottom: 10px;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
}

.tenant-brand-preview-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--preview-sidebar-contrast) 72%, transparent);
  font-size: .68rem;
}

.tenant-brand-preview-link.is-active {
  background: var(--preview-primary);
  color: var(--preview-primary-contrast);
}

.tenant-brand-preview-page {
  padding: 16px;
  background: var(--preview-background);
}

.tenant-brand-preview-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: 12px;
  background: var(--preview-surface);
  color: var(--preview-surface-contrast);
}

.tenant-brand-preview-hero small {
  display: block;
  margin-top: 2px;
  opacity: .65;
  font-size: .62rem;
}

.tenant-brand-preview-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--preview-primary);
  color: var(--preview-primary-contrast);
}

.tenant-brand-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.tenant-brand-preview-cards span {
  height: 54px;
  border-radius: 10px;
  background: var(--preview-surface);
}

@media (max-width: 575px) {
  .tenant-brand-preview { grid-template-columns: 96px minmax(0, 1fr); }
  .tenant-brand-preview-cards { grid-template-columns: 1fr; }
  .tenant-brand-preview-cards span:not(:first-child) { display: none; }
}