:root {
    --sidebar-bg: #f1f1f1;
    --secondary-bg: #f7f7f7;
    --accent: #0d5cab;
    --accent-dark: #084f94;
    --danger: #c1121f;
    --danger-bg: #fff1f2;
    --success: #137333;
    --success-bg: #e5f6ed;
    --text: #333333;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text);
    margin: 0;
    overflow: hidden;
}

.app-shell {
    display: grid;
    height: 100vh;
    grid-template-columns: 17rem 17.5rem minmax(0, 1fr);
    min-height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.16s ease;
}

.app-shell:has(.secondary-sidebar.is-pinned) {
    grid-template-columns: 17rem clamp(17.5rem, calc(100vw - 17rem - 36rem), 34rem) minmax(0, 1fr);
}

.secondary-sidebar-storage-pinned .app-shell {
    grid-template-columns: 17rem clamp(17.5rem, calc(100vw - 17rem - 36rem), 34rem) minmax(0, 1fr);
}

.secondary-sidebar-storage-pinned .secondary-sidebar {
    box-shadow: none;
    width: 100%;
}

.qr-detail-shell {
    grid-template-columns: minmax(0, 1fr);
}

.qr-detail-mode .main-content {
    padding: 1rem;
}

.mobile-topbar,
.mobile-menu-backdrop {
    display: none;
}

.primary-sidebar,
.secondary-sidebar {
    min-height: 100vh;
    padding: 1.5rem 1rem;
}

.primary-sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid #dddddd;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: sticky;
    top: 0;
}

.primary-sidebar .nav {
    flex: 0 0 auto;
    min-height: 0;
    padding-right: 0.15rem;
}

.secondary-sidebar {
    background: var(--secondary-bg);
    border-right: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    transition: width 0.16s ease, box-shadow 0.16s ease;
    width: 17.5rem;
    z-index: 50;
}

.secondary-sidebar.is-expandable:not(.is-pinned):hover,
.secondary-sidebar.is-expandable:not(.is-pinned):focus-within {
    box-shadow: 0.85rem 0 1.6rem rgba(30, 40, 54, 0.12);
    width: min(34rem, calc(100vw - 17rem));
}

.secondary-sidebar.is-pinned {
    box-shadow: none;
    width: 100%;
}

.secondary-sidebar-pin[hidden] {
    display: none;
}

.secondary-sidebar-pin[aria-pressed="true"] {
    background: #eaf3ff;
    border-color: #b7d7f5;
    color: var(--accent);
}

.brand {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0;
}

.brand-logo {
    display: block;
    height: auto;
    max-height: 3rem;
    max-width: 12rem;
    object-fit: contain;
    width: 100%;
}

.nav-link {
    border-radius: 8px;
    color: #444444;
    padding: 0.75rem 0.9rem;
}

.logout-button {
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
}

.nav-link.active,
.nav-link:hover {
    background: var(--accent);
    color: #ffffff;
}

.auth-page {
    align-items: center;
    background: #f7f7f7;
    display: flex;
    min-height: 100vh;
    padding: 1.5rem;
}

.auth-card {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 26rem;
    padding: 2rem;
    width: 100%;
}

.auth-logo {
    display: block;
    margin-bottom: 1.5rem;
    max-width: 12rem;
}

.auth-card h1 {
    font-size: 1.55rem;
    font-weight: 650;
    margin-bottom: 1.5rem;
}

.sidebar-footer {
    background: var(--sidebar-bg);
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 1rem;
}

.current-user {
    align-items: center;
    border-top: 1px solid #dddddd;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 0 0.6rem;
    padding: 0.8rem 0 0.2rem;
}

.current-user .role-badge-list {
    grid-column: 1 / -1;
}

.current-user-name {
    color: #333333;
    font-weight: 700;
    line-height: 1.2;
}

.current-user-email {
    color: #6c757d;
    font-size: 0.78rem;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.audit-log-metadata {
    width: 100%;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-top: 0.65rem;
    padding: 0.85rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #334155;
}

.audit-log-details summary {
    cursor: pointer;
    color: #495057;
    font-size: 0.875rem;
    font-weight: 600;
}

.audit-log-entry h2 {
    overflow-wrap: anywhere;
}

.avatar-thumb,
.organization-logo-thumb {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d9dee3;
    color: #6c757d;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    overflow: hidden;
}

.avatar-thumb {
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
}

.avatar-thumb-sm {
    height: 2.35rem;
    width: 2.35rem;
}

.avatar-thumb-xs {
    height: 1.6rem;
    width: 1.6rem;
}

.organization-logo-thumb {
    border-radius: 8px;
    height: 3.25rem;
    width: 3.25rem;
}

.organization-logo-thumb.organization-logo-thumb-xs {
    border-radius: 6px;
    height: 1.6rem;
    width: 1.6rem;
}

.avatar-thumb img,
.organization-logo-thumb img,
.image-upload-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

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

.entity-heading > :last-child {
    min-width: 0;
}

.secondary-link-main {
    align-items: center;
    display: inline-flex;
    flex: 1 1 auto;
    gap: 0.45rem;
    min-width: 0;
}

.secondary-link-main > span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.avatar-stack {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 0.45rem;
}

.avatar-stack .avatar-thumb {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px #d9dee3;
    margin-left: -0.35rem;
}

.language-form {
    margin-bottom: 1rem;
}

.language-switcher {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(4, 2.35rem);
}

.language-button {
    align-items: center;
    aspect-ratio: 1;
    background: #ffffff;
    border: 1px solid #d2d2d2;
    border-radius: 8px;
    display: inline-flex;
    font-size: 1.35rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.language-button.active,
.language-button:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.16rem rgba(13, 92, 171, 0.18);
}

.search-box {
    display: block;
    margin-bottom: 1.5rem;
}

.search-box .form-control {
    border: 0;
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.secondary-title-action[aria-expanded="true"],
.secondary-title-action[aria-pressed="true"] {
    background: #eaf3ff;
    border-color: #b7d7f5;
    color: var(--accent);
}

.secondary-filter-panel {
    border: 1px solid #d8dee6;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
}

.secondary-filter-reset {
    position: relative;
}

.composite-action-icon {
    align-items: center;
    display: inline-flex;
    height: 1.08rem;
    justify-content: center;
    position: relative;
    width: 1.08rem;
}

.composite-action-icon-main {
    font-size: 1.03rem;
    line-height: 1;
}

.composite-action-icon-corner {
    background: #ffffff;
    border-radius: 50%;
    bottom: -0.12rem;
    font-size: 0.58rem;
    line-height: 1;
    position: absolute;
    right: -0.2rem;
}

.secondary-filter-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.45rem;
}

.secondary-filter-bar:last-child {
    margin-bottom: 0;
}

.secondary-filter-bar-visual {
    gap: 0.32rem;
}

.secondary-filter-button {
    align-items: center;
    appearance: none;
    cursor: pointer;
    justify-content: center;
    min-height: 1.35rem;
    text-align: center;
}

.secondary-filter-button[aria-pressed="true"] {
    box-shadow: 0 0 0 2px rgba(13, 92, 171, 0.22);
}

.secondary-entity-filter {
    background: transparent;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    min-height: auto;
    padding: 0.08rem;
}

.secondary-entity-filter[aria-pressed="true"] {
    background: #eaf3ff;
}

.secondary-entity-filter .avatar-thumb,
.secondary-entity-filter .organization-logo-thumb {
    pointer-events: none;
}

.secondary-filter-button.seqg8-core-series-badge {
    margin-left: 0;
    min-height: 1.35rem;
    padding-bottom: 0.16rem;
    padding-top: 0.16rem;
}

.secondary-filter-button.status-badge {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.72rem;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0.16rem 0.48rem;
    text-align: center;
}

.zabbix-status-filter {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 4px;
    color: #334155;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.28rem;
    line-height: 1;
    min-height: 1.35rem;
    padding: 0.16rem 0.34rem;
}

.zabbix-status-filter::before {
    border-radius: 2px;
    content: "";
    flex: 0 0 auto;
    height: 0.78rem;
    width: 0.78rem;
}

.vpn-status-filter::before {
    content: none;
}

.zabbix-status-filter-status-0::before {
    background:
        repeating-linear-gradient(
            90deg,
            #129247 0,
            #129247 0.18rem,
            #34d37a 0.18rem,
            #34d37a 0.36rem
        );
}

.zabbix-status-filter-status-1::before {
    background: #ff3b30;
}

.zabbix-status-filter-unlinked::before {
    background: #aeb6c2;
}

.secondary-sidebar.hide-badges .location-link .secondary-problem-badges,
.secondary-sidebar.hide-badges .location-link .seqg8-core-series-badge {
    display: none;
}

.secondary-list-count {
    border-top: 1px solid #dddddd;
    color: #6c757d;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    text-align: right;
}

.secondary-title {
    align-items: center;
    border-bottom: 1px solid #dddddd;
    display: flex;
    gap: 0.6rem;
    font-weight: 600;
    justify-content: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.secondary-title-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.25rem;
    min-width: max-content;
    white-space: nowrap;
}

.secondary-title-action.action-button {
    flex: 0 0 auto;
}

.secondary-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.main-content {
    max-height: 100vh;
    overflow-anchor: none;
    overflow-y: auto;
    padding: 1.5rem 2.5rem 3rem;
    position: relative;
    z-index: 1;
}

.content-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.content-header h1 {
    font-size: 1.75rem;
    font-weight: 650;
    margin: 0 0 1rem;
}

.add-button {
    align-items: center;
    background: linear-gradient(180deg, #1473d1 0%, var(--accent) 100%);
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    box-shadow: 0 0.45rem 1rem rgba(13, 92, 171, 0.18);
    color: #ffffff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.55rem 1rem;
}

.add-button .bi {
    color: currentColor;
}

.add-button:has(.bi) {
    aspect-ratio: 1;
    padding: 0;
    width: 2.45rem;
}

.add-button:hover,
.add-button:focus {
    background: linear-gradient(180deg, #0f66bd 0%, var(--accent-dark) 100%);
    border-color: #063e75;
    box-shadow: 0 0.55rem 1.2rem rgba(13, 92, 171, 0.24);
    color: #ffffff;
}

.table {
    border: 1px solid #dddddd;
}

.location-link {
    align-items: center;
    border-radius: 8px;
    color: #444444;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    justify-content: space-between;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    text-decoration: none;
    white-space: nowrap;
}

.zabbix-vertical-marker {
    align-self: stretch;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 0.28rem;
    min-height: 1.95rem;
    overflow: hidden;
    width: 0.28rem;
}

.zabbix-marker-online {
    background: #22a852;
    box-shadow: 0 0.12rem 0.55rem rgba(34, 168, 82, 0.18);
    animation: zabbix-online-breathe 1.35s ease-in-out infinite;
}

.zabbix-marker-disabled {
    background: #ff3b30;
}

.zabbix-marker-unavailable {
    background: #aeb6c2;
}

.zabbix-marker-empty {
    background: transparent;
}

.location-link.inactive {
    background: #f0f1f2;
    color: #8a929a;
    opacity: 0.68;
}

.location-link.inactive .search-result-type {
    color: #9aa1a8;
}

.role-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.role-badge {
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.16rem 0.38rem;
    white-space: nowrap;
}

.location-link .role-badge-list {
    flex-wrap: nowrap;
    margin-top: 0;
}

.seqg8-core-series-badge {
    align-items: center;
    background: #dff4e6;
    border: 1px solid #a8d9b8;
    border-radius: 4px;
    color: #17663a;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    margin-left: calc(-0.45rem + 1px);
    padding: 0.17rem 0.28rem;
    text-align: center;
}

.secondary-filter-button.seqg8-core-series-badge-empty {
    background: #e5e7eb;
    border-color: #cbd5e1;
    color: #475569;
}

.location-link.active .seqg8-core-series-badge,
.location-link[aria-current="true"] .seqg8-core-series-badge {
    background: #e8f8ed;
    border-color: #c2e8ce;
    color: #17663a;
}

.role-badge-administrator {
    background: #fff0f0;
    border-color: #ffc9c9;
    color: #c2413d;
}

.role-badge-superadmin {
    background: #ffd7d7;
    border-color: #f05b56;
    color: #9f1712;
}

.role-badge-distributor {
    background: #fff0d8;
    border-color: #ffc46b;
    color: #9a5b00;
}

.role-badge-service {
    background: #dceeff;
    border-color: #9ccfff;
    color: #0b5cab;
}

.role-badge-technician {
    background: #edf0f2;
    border-color: #d2d8de;
    color: #5c6670;
}

.employee-meta {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.person-list-main {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
}

.search-result-link {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.15rem;
}

.search-result-link .secondary-link-main {
    flex-basis: auto;
}

.search-result-link .search-result-type {
    flex: 0 0 auto;
    margin-left: 0.35rem;
}

.search-result-type {
    color: #6c757d;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.location-link:hover {
    background: #e9ecef;
    color: #111111;
}

.location-link.active,
.location-link[aria-current="true"] {
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
}

.location-link.active .search-result-type,
.location-link[aria-current="true"] .search-result-type {
    color: rgba(255, 255, 255, 0.82);
}

.dashboard-stat-link {
    justify-content: flex-start;
}

.dashboard-stat-link > .bi {
    color: #607080;
    flex: 0 0 auto;
    font-size: 1rem;
}

.dashboard-stat-link.active > .bi,
.dashboard-stat-link[aria-current="true"] > .bi {
    color: #ffffff;
}

[data-detail-panel][hidden] {
    display: none;
}

.empty-state,
.empty-row {
    border: 1px solid #dddddd;
    border-radius: 8px;
    color: #6c757d;
    padding: 1rem;
}

.empty-row.compact {
    background: #f8f9fa;
    border-color: #d8dee6;
    border-style: dashed;
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
}

.zabbix-problems-empty,
.zabbix-latest-loading,
.empty-row.compact {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
}

.location-panel {
    border: 1px solid #dddddd;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: visible;
}

.dashboard-stat-panel {
    margin-bottom: 1rem;
}

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

.dashboard-stat-card {
    border: 1px solid #dddddd;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-stat-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dddddd;
    padding: 0.9rem 1rem;
}

.dashboard-stat-header h2 {
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0;
}

.dashboard-stat-list,
.dashboard-severity-list {
    display: grid;
}

.dashboard-location-filter-list {
    max-height: 18rem;
    overflow-y: auto;
}

.dashboard-stat-row,
.dashboard-severity-row {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid #edf0f2;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    color: #1f2937;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.75rem;
    min-height: 2.85rem;
    padding: 0.65rem 1rem;
    text-align: left;
    width: 100%;
}

.dashboard-stat-row:first-child,
.dashboard-severity-row:first-child {
    border-top: 0;
}

.dashboard-stat-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-severity-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-stat-row span,
.dashboard-severity-row span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-stat-row strong,
.dashboard-severity-row strong {
    color: #1f2937;
    font-size: 1.05rem;
}

.dashboard-filter-row:hover,
.dashboard-filter-row:focus {
    background: #f5f8fb;
}

.dashboard-filter-row[aria-pressed="true"] {
    background: #eaf3ff;
    box-shadow: inset 0.24rem 0 0 var(--accent);
}

.dashboard-drilldown-card {
    border: 1px solid #dddddd;
    border-radius: 8px;
    margin-top: 1rem;
    overflow: visible;
}

.dashboard-stat-panel {
    overflow: visible;
}

.dashboard-drilldown-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dashboard-filter-reset {
    flex: 0 0 auto;
}

.dashboard-problems-body {
    font-size: 0.68rem;
    overflow: visible;
    padding: 0;
}

.dashboard-documentation-body {
    font-size: 0.72rem;
    padding: 0;
}

.dashboard-documentation-row {
    align-items: center;
    border-top: 1px solid #edf0f2;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) 5.5rem 6.5rem;
    min-width: 32rem;
}

.dashboard-documentation-row[hidden] {
    display: none;
}

.dashboard-documentation-row > * {
    min-width: 0;
    padding: 0.34rem 0.55rem;
}

.dashboard-documentation-row > strong {
    color: #1f2937;
    font-size: 0.82rem;
    text-align: right;
}

.dashboard-documentation-count-link {
    color: inherit;
    display: inline-block;
    min-width: 1.5rem;
    text-decoration: underline dotted;
    text-underline-offset: 0.18rem;
}

.dashboard-documentation-count-link:hover,
.dashboard-documentation-count-link:focus {
    color: var(--accent);
}

.dashboard-documentation-header {
    background: #f8f9fa;
    border-top: 0;
    color: #607080;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-documentation-header > span:nth-child(n + 2) {
    text-align: right;
}

.dashboard-problem-row[hidden] {
    display: none;
}

.dashboard-problem-name,
.dashboard-problem-notes {
    background: #ffffff;
    color: #1f2328;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    min-height: 1.45rem;
    min-width: 0;
    padding: 0.22rem 0.4rem;
}

.dashboard-problem-time {
    align-items: center;
    background: #ffffff;
    color: #607080;
    display: flex;
    font-weight: 700;
    min-height: 1.25rem;
    min-width: 0;
    padding: 0.18rem 0.32rem;
    white-space: nowrap;
}

.dashboard-problem-name,
.dashboard-problem-row .zabbix-problem-duration,
.dashboard-problem-row .zabbix-problem-acknowledged,
.dashboard-problem-notes {
    min-height: 1.25rem;
    overflow: hidden;
    padding: 0.18rem 0.32rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-problem-name {
    font-weight: 650;
}

.dashboard-problem-row .zabbix-acknowledgement-note {
    margin-left: 0.2rem;
}

.location-header {
    align-items: flex-start;
    background: #f8f9fa;
    border-bottom: 1px solid #dddddd;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.group-header {
    align-items: stretch;
}

.group-header > .action-buttons {
    align-self: flex-end;
}

.group-header-side {
    align-items: flex-end;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    justify-content: space-between;
}

.qr-side {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qr-side-main {
    align-items: flex-end;
    display: flex;
    gap: 0.75rem;
}

.location-header-actions {
    justify-content: flex-end;
}

.location-header-actions .action-button {
    font-size: 0.82rem;
    height: 1.55rem;
    width: 1.55rem;
}

.qr-code {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    flex: 0 0 auto;
    height: 84px;
    padding: 0.2rem;
    width: 84px;
}

.qr-code.small {
    height: 42px;
    width: 42px;
}

.qr-popover {
    display: inline-flex;
    position: relative;
}

.qr-popover-panel {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    box-shadow: 0 0.6rem 1.4rem rgba(33, 37, 41, 0.16);
    display: none;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
}

.qr-popover:hover .qr-popover-panel,
.qr-popover:focus-within .qr-popover-panel,
.qr-popover.open .qr-popover-panel {
    display: block;
}

.qr-target-highlight {
    animation: qr-target-pulse 1.8s ease-out;
}

.qr-target-active {
    background: #fff8d7;
    border-color: #f0c94a;
    box-shadow: 0 0 0 0.2rem rgba(240, 201, 74, 0.24);
}

.machine-list-row.qr-target-active {
    border-radius: 8px;
}

@keyframes qr-target-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.35);
    }

    100% {
        box-shadow: 0 0 0 0.65rem rgba(13, 110, 253, 0);
    }
}

.location-header h2,
.machine-header h3 {
    margin: 0;
}

.location-header h2 {
    font-size: 1.2rem;
}

.problem-count-badge {
    align-items: center;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 1.35rem;
    padding: 0.18rem 0.42rem;
}

.problem-count-badge-group {
    align-items: center;
    display: inline-flex;
    gap: 0.12rem;
}

.secondary-problem-badges {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-end;
}

.problem-count-badge-sidebar {
    border: 1px solid rgba(255, 255, 255, 0.82);
    font-size: 0.68rem;
    margin-left: -0.28rem;
    min-width: 1.2rem;
    padding: 0.16rem 0.34rem;
}

.problem-count-badge-sidebar:first-child {
    margin-left: 0;
}

.problem-count-badge-section {
    font-size: 0.78rem;
    min-width: 1.45rem;
    padding: 0.18rem 0.45rem;
}

.problem-count-badge-filter {
    border: 1px solid rgba(255, 255, 255, 0.82);
    min-width: 1.35rem;
}

.location-organization-line {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    margin-top: 0.12rem;
}

.location-technician-row {
    align-items: center;
    display: flex;
    margin-top: 0.28rem;
}

.location-technician-row .avatar-stack {
    margin-left: 0;
    padding-left: 0;
}

.location-technician-row .avatar-stack .avatar-thumb:first-child {
    margin-left: 0;
}

.location-ip-summary {
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    gap: 0.35rem 0.8rem;
    margin-top: 0.35rem;
}

.location-ip-summary[hidden],
.location-ip-summary-row[hidden] {
    display: none;
}

.location-ip-summary-row {
    align-items: baseline;
    color: #59636e;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 400;
    gap: 0.28rem;
}

.location-ip-summary-row span {
    font-weight: 700;
}

.location-ip-summary-row span:last-child {
    color: #27313b;
    font-weight: 400;
}

.machine-header h3 {
    font-size: 1rem;
}

.status-badge,
.type-label {
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.32rem 0.65rem;
    white-space: nowrap;
}

.status-badge.active {
    background: var(--success-bg);
    border: 1px solid #a8e0bf;
    color: var(--success);
}

.status-badge.inactive {
    background: var(--danger-bg);
    border: 1px solid #ffc2c7;
    color: var(--danger);
}

.type-label {
    background: #e9ecef;
    color: #495057;
}

.machine-section {
    padding: 1rem;
}

.machine-section + .machine-section {
    border-top: 1px solid #eeeeee;
}

.machine-header,
.part-heading,
.document-row,
.document-meta {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.machine-header > :first-child,
.part-heading > :first-child {
    min-width: 0;
}

.machine-header {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.part-heading {
    justify-content: space-between;
}

.part-row {
    border-top: 1px solid #eeeeee;
    padding: 0.75rem 0;
}

.part-row:last-child {
    padding-bottom: 0;
}

.part-heading {
    margin-bottom: 0.5rem;
}

.object-detail-list {
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.72rem;
    font-weight: 400;
    gap: 0.25rem 0.65rem;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.object-detail-list > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.object-attribute-details {
    color: #6c757d;
    font-size: 0.72rem;
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    min-width: 0;
}

.object-attribute-details summary {
    cursor: pointer;
    width: fit-content;
}

.object-attribute-details dl {
    display: grid;
    gap: 0.2rem 0.75rem;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    margin: 0.45rem 0 0;
}

.object-attribute-details dt,
.object-attribute-details dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.object-attribute-details dt {
    font-weight: 600;
}

.document-row {
    border-left: 3px solid var(--accent);
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    justify-content: stretch;
    padding: 0.45rem 0 0.45rem 0.75rem;
}

.document-name {
    color: #212529;
    font-weight: 600;
    text-decoration: none;
}

.document-name:hover {
    color: var(--accent);
}

.document-meta {
    color: #6c757d;
    flex-wrap: wrap;
    font-size: 0.85rem;
    justify-content: flex-end;
}

.location-actions {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    padding-right: 2.75rem;
    position: relative;
}

.action-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.action-buttons form {
    align-items: center;
    display: flex;
    margin: 0;
}

.ifc-import-input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.action-buttons .dropdown {
    align-items: center;
    display: inline-flex;
    height: 1.35rem;
}

.action-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #495057;
    display: inline-grid;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    height: 1.35rem;
    min-height: 1.35rem;
    padding: 0;
    place-items: center;
    text-decoration: none;
    width: 1.35rem;
}

.action-button .bi {
    font-size: 0.78rem;
    line-height: 1;
    margin: 0;
}

.action-button.dropdown-toggle::after {
    display: none;
}

.action-button:hover {
    background: #f1f4f8;
    color: #212529;
}

.action-button-edit {
    background: #eef6ff;
    border-color: #b7d7f5;
    color: var(--accent);
}

.action-button-edit:hover {
    background: #dfefff;
    color: var(--accent-dark);
}

.action-button-deactivate {
    background: #f6f7f9;
    border-color: #d8dde3;
    color: #5c6670;
}

.action-button-deactivate:hover {
    background: #eceff3;
    color: #32383f;
}

.action-button-activate {
    background: var(--success-bg);
    border-color: #a8e0bf;
    color: var(--success);
}

.action-button-activate:hover {
    background: #d4f0df;
    color: #0b5d29;
}

.action-button-delete {
    background: var(--danger-bg);
    border-color: #ffc2c7;
    color: var(--danger);
}

.action-button-delete:hover {
    background: #ffe1e4;
    color: #980f19;
}

.action-button-qr {
    background: #f6f7f9;
    border-color: #d8dde3;
    color: #495057;
}

.action-button-qr:hover {
    background: #edf0f4;
    color: #212529;
}

.panel-details {
    background: #ffffff;
    padding: 1rem;
}

.collapsible-section {
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.template-objects-section.collapsible-section {
    border-bottom: 0;
}

.template-objects-section > .panel-details {
    padding-left: 0;
    padding-right: 0;
}

.collapsible-section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-right: 1rem;
}

.collapsible-section-toggle {
    align-items: center;
    background: #ffffff;
    border: 0;
    color: #2f3a43;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.78rem 1rem;
    text-align: left;
}

.collapsible-section-toggle i {
    color: #607080;
    font-size: 0.85rem;
}

.collapsible-section-toggle:hover,
.collapsible-section-toggle:focus {
    color: var(--accent);
}

.port-forwarding-body {
    padding: 0 1rem 1rem;
}

.seqg8-core-body .port-forwarding-section {
    background: transparent;
    border-bottom: 0;
}

.seqg8-core-body .port-forwarding-section .collapsible-section-header {
    padding-right: 0;
}

.port-forwarding-table {
    background: #ffffff;
    border: 1px solid #dfe5eb;
    border-radius: 6px;
    margin-bottom: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.port-forwarding-row {
    background: #ffffff;
    color: #1f2328;
    display: grid;
    font-size: 0.82rem;
    grid-template-columns: minmax(5rem, 0.45fr) minmax(6rem, 0.55fr) minmax(5rem, 0.5fr) minmax(11rem, 1.5fr);
    width: 100%;
}

.port-forwarding-header {
    background: #f7f9fb;
    color: #607080;
    font-size: 0.74rem;
    font-weight: 700;
}

.port-forwarding-row span {
    border-bottom: 1px solid #edf0f2;
    min-width: 0;
    overflow: hidden;
    padding: 0.42rem 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.port-forwarding-row:last-child span {
    border-bottom: 0;
}

.port-forwarding-import-form {
    border-top: 1px solid #edf0f2;
    padding-top: 0.9rem;
}

.port-forwarding-import-box {
    border: 1px solid #dfe5eb;
    border-radius: 6px;
    max-width: 100%;
    overflow: hidden;
}

.port-forwarding-import-header {
    align-items: center;
    background: #f7f9fb;
    border-bottom: 1px solid #edf0f2;
    color: #607080;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.42rem 0.5rem;
}

.port-forwarding-import-label {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.port-forwarding-import-command {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 500;
}

.port-forwarding-command-copy {
    align-items: center;
    background: transparent;
    border: 0;
    color: #607080;
    cursor: pointer;
    display: inline-flex;
    height: 1.35rem;
    justify-content: center;
    padding: 0;
    width: 1.35rem;
}

.port-forwarding-command-copy:hover,
.port-forwarding-command-copy:focus {
    color: var(--accent);
}

.port-forwarding-import-input.form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #1f2328;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.47rem;
    line-height: 1.45;
    min-height: 8.5rem;
    padding: 0.5rem;
    resize: vertical;
    white-space: pre;
}

.port-forwarding-import-input.form-control:focus {
    box-shadow: inset 0 0 0 2px rgba(32, 95, 159, 0.18);
}

.port-forwarding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.65rem;
}

.section-count-badge {
    align-items: center;
    background: #eef1f4;
    border: 1px solid #d8dee6;
    border-radius: 999px;
    color: #607080;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 1.45rem;
    padding: 0.18rem 0.45rem;
}

.template-card-metrics {
    align-items: center;
    color: #2f3a43;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 0.35rem;
}

.object-section-actions {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.object-section-actions .action-button {
    font-size: 0.82rem;
    height: 1.55rem;
    width: 1.55rem;
}

.item-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
}

.template-object-list.item-list {
    margin: 0;
}

.assigned-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #495057;
    display: grid;
}

.assigned-list > * {
    padding: 0.55rem 0.75rem;
}

.assigned-list > * + * {
    border-top: 1px solid #e5e7eb;
}

.location-group-list {
    display: grid;
    gap: 0.9rem;
}

.location-group-block h3 {
    color: #495057;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.item-list-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 2.6rem;
    padding: 0.55rem 0.75rem;
}

.item-list-row > :first-child,
.machine-list-header > :first-child,
.part-list-heading > :first-child {
    min-width: 0;
}

.part-list-heading {
    align-items: center;
}

.part-list-heading > :first-child,
.machine-list-header > :first-child {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.part-list-heading > .object-title-block,
.machine-list-header > .object-title-block {
    align-items: center;
    column-gap: 0.4rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    row-gap: 0.18rem;
}

.object-title-block .object-image-thumb,
.object-title-block .object-collapse-toggle {
    grid-row: 1;
}

.object-title-block .object-title-text {
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.object-title-block .object-detail-list {
    grid-column: 1 / -1;
    min-width: 0;
}

.item-list-row + .item-list-row {
    border-top: 1px solid #edf0f2;
}

.location-group-location-row {
    flex-wrap: nowrap;
}

.location-group-location-name {
    flex: 1 1 auto;
    min-width: 12rem;
}

.location-group-location-meta {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    justify-content: flex-end;
    min-width: 0;
}

.location-group-location-meta .avatar-stack {
    margin-left: 0.2rem;
    padding-left: 0;
}

.machine-list-row {
    padding: 0.75rem;
}

.machine-list-row + .machine-list-row {
    border-top: 1px solid #edf0f2;
}

.machine-list-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 2.35rem;
}

.machine-list-header > :first-child > strong,
.machine-list-header > :first-child > span,
.part-list-heading > :first-child > strong,
.part-list-heading > :first-child > span {
    font-size: 0.9rem;
    line-height: 1.25;
    max-width: 100%;
}

.part-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.part-list-item {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    margin-left: calc(var(--object-depth, 0) * 1.25rem);
    padding: 0.6rem 0.7rem;
}

.nested-object-list {
    margin-top: 0.65rem;
}

.object-drag-active [data-object-drop-target] {
    outline: 1px dashed #9bb8d8;
    outline-offset: 3px;
}

.object-dragging {
    opacity: 0.45;
}

.object-drop-active {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.16);
}

.object-collapse-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #6c757d;
    display: inline-flex;
    flex: 0 0 1.25rem;
    height: 1.25rem;
    justify-content: center;
    padding: 0;
    width: 1.25rem;
}

.object-collapse-toggle:hover,
.object-collapse-toggle:focus-visible {
    color: #212529;
}

.part-list-heading {
    background: #ffffff;
    padding: 0;
}

.part-list-heading.item-list-row {
    align-items: center;
    min-height: 2.7rem;
    position: relative;
}

.part-list-heading .action-buttons,
.machine-list-header .action-buttons {
    align-self: center;
}

.location-panel .machine-list-header .action-buttons,
.location-panel .part-list-heading .action-buttons {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    box-shadow: 0 0.55rem 1.3rem rgba(29, 40, 54, 0.12);
    opacity: 0;
    padding: 0.35rem;
    pointer-events: none;
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.12s ease, transform 0.12s ease;
    visibility: hidden;
    z-index: 20;
}

.location-panel .machine-list-header,
.location-panel .part-list-heading {
    padding-right: 2.4rem;
    position: relative;
}

.location-panel .machine-list-header::after,
.location-panel .part-list-heading::after {
    align-items: center;
    background: #f6f7f9;
    border: 1px solid #d8dee6;
    border-radius: 4px;
    color: #5c6670;
    content: "\F5D4";
    display: inline-flex;
    font-family: "bootstrap-icons";
    font-size: 0.82rem;
    height: 1.45rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.45rem;
}

.location-panel .machine-list-header:hover .action-buttons,
.location-panel .machine-list-header:focus-within .action-buttons,
.location-panel .part-list-heading:hover .action-buttons,
.location-panel .part-list-heading:focus-within .action-buttons {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    visibility: visible;
}

.location-panel .machine-list-header:hover::after,
.location-panel .machine-list-header:focus-within::after,
.location-panel .part-list-heading:hover::after,
.location-panel .part-list-heading:focus-within::after {
    opacity: 0;
}

.location-panel {
    position: relative;
}

.zabbix-host-online::before,
.zabbix-host-disabled::before,
.zabbix-host-unavailable::before {
    border-radius: 999px;
    content: "";
    height: 0.32rem;
    left: 0.65rem;
    pointer-events: none;
    position: absolute;
    right: 0.65rem;
    top: 0.72rem;
    z-index: 1;
}

.zabbix-host-online::before {
    background: #22a852;
    box-shadow: 0 0.2rem 0.8rem rgba(34, 168, 82, 0.18);
    animation: zabbix-online-breathe 1.35s ease-in-out infinite;
}

.zabbix-host-disabled::before {
    background: linear-gradient(90deg, #d92d20, #ff3b30, #d92d20);
    box-shadow: 0 0.2rem 0.8rem rgba(217, 45, 32, 0.16);
}

.zabbix-host-unavailable::before {
    background: #aeb6c2;
    box-shadow: 0 0.2rem 0.8rem rgba(108, 117, 125, 0.12);
}

.location-panel.zabbix-host-online > :first-child,
.location-panel.zabbix-host-disabled > :first-child,
.location-panel.zabbix-host-unavailable > :first-child {
    padding-top: 1.42rem;
}

.zabbix-problems-panel {
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
    font-size: 0.82rem;
    overflow: visible;
    padding: 0;
}

.zabbix-problems-body {
    overflow: visible;
    padding: 0 1rem 0.8rem;
}

.zabbix-problems-header,
.zabbix-problem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.8rem 5.4rem;
    min-width: 0;
}

.zabbix-problems-header {
    color: #607080;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0 0 0.35rem;
}

.zabbix-problems-header > span,
.zabbix-problem-duration,
.zabbix-problem-acknowledged {
    align-items: center;
    display: flex;
}

.zabbix-problems-header > span:nth-child(2),
.zabbix-problem-duration {
    justify-content: flex-start;
}

.zabbix-problems-header > span:nth-child(3),
.zabbix-problem-acknowledged {
    justify-content: flex-start;
}

.zabbix-problem-row {
    border-top: 1px solid #edf0f2;
}

.zabbix-problem-name,
.zabbix-problem-duration,
.zabbix-problem-acknowledged {
    min-height: 1.75rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
}

.zabbix-problem-name {
    color: #1f2328;
    overflow-wrap: anywhere;
}

.zabbix-problem-duration,
.zabbix-problem-acknowledged {
    background: #ffffff;
    color: #1f2328;
}

.zabbix-problem-acknowledged.is-unacknowledged {
    color: #d92d20;
}

.zabbix-problem-acknowledged.is-acknowledged {
    color: #168a4a;
}

.zabbix-acknowledgement-note {
    align-items: center;
    background: #6f8291;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.18rem;
    line-height: 1;
    margin-left: 0.35rem;
    min-height: 1rem;
    padding: 0.12rem 0.28rem;
    position: relative;
    vertical-align: middle;
    z-index: 2;
}

.zabbix-acknowledgement-note:hover,
.zabbix-acknowledgement-note:focus,
.zabbix-acknowledgement-note:focus-within {
    background: #536a7b;
    border-color: #415564;
    box-shadow: 0 0 0 2px rgba(83, 106, 123, 0.18);
    z-index: 80;
}

.zabbix-acknowledgement-note i {
    font-size: 0.66rem;
}

.zabbix-acknowledgement-popover {
    background: #ffffff;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    bottom: calc(100% + 0.55rem);
    box-shadow: 0 0.75rem 2rem rgba(16, 24, 40, 0.14);
    color: #1f2937;
    cursor: default;
    display: block;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.28;
    max-width: min(42rem, calc(100vw - 2rem));
    min-width: min(36rem, calc(100vw - 2rem));
    opacity: 0;
    padding: 0.85rem 1rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: left;
    transform: translateY(0.25rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
    visibility: hidden;
    white-space: normal;
    z-index: 90;
}

.zabbix-acknowledgement-popover::after {
    background: #ffffff;
    border-bottom: 1px solid #dfe5eb;
    border-right: 1px solid #dfe5eb;
    bottom: -0.32rem;
    content: "";
    height: 0.6rem;
    position: absolute;
    right: 0.6rem;
    transform: rotate(45deg);
    width: 0.6rem;
}

.zabbix-acknowledgement-note:hover .zabbix-acknowledgement-popover,
.zabbix-acknowledgement-note:focus .zabbix-acknowledgement-popover,
.zabbix-acknowledgement-note:focus-within .zabbix-acknowledgement-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.zabbix-acknowledgement-table {
    display: grid;
    gap: 0;
    grid-template-columns: max-content minmax(11rem, max-content) minmax(16rem, 1fr);
    max-height: 16rem;
    overflow: auto;
}

.zabbix-acknowledgement-table > span {
    border-top: 1px solid #e8edf2;
    min-width: 0;
    padding: 0.55rem 1rem 0.55rem 0;
}

.zabbix-acknowledgement-table > span:nth-child(3n) {
    padding-right: 0;
}

.zabbix-acknowledgement-head {
    border-top: 0 !important;
    color: #607080;
    font-weight: 800;
    padding-top: 0 !important;
}

.zabbix-problems-empty {
    background: #f8f9fa;
    border: 1px dashed #d8dee6;
    border-radius: 6px;
    color: #6c757d;
    padding: 0.65rem 0.75rem;
}

.dashboard-problems-body .dashboard-problem-row {
    border-top: 1px solid #edf0f2;
    display: grid;
    grid-template-columns: 8.7rem minmax(10rem, 19rem) minmax(18rem, 1fr) 4.1rem 2.5rem 2.8rem;
    min-width: 52rem;
    overflow: visible;
}

.dashboard-problems-body .dashboard-problems-header {
    background: #f8f9fa;
    border-top: 0;
    color: #607080;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-problems-body .dashboard-problems-header > span {
    align-items: center;
    display: flex;
    min-height: 1.45rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.22rem 0.38rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-problems-body .dashboard-problems-header + .dashboard-problem-row {
    border-top: 0;
}

.dashboard-problems-body .dashboard-problem-row:hover {
    background: #f8fafc;
}

.dashboard-problems-body .dashboard-problem-time,
.dashboard-problems-body .dashboard-problem-name,
.dashboard-problems-body .dashboard-problem-location,
.dashboard-problems-body .zabbix-problem-duration,
.dashboard-problems-body .zabbix-problem-acknowledged,
.dashboard-problems-body .dashboard-problem-notes {
    align-items: center;
    display: flex;
    font-size: 0.68rem;
    min-height: 1.55rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.22rem 0.38rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-problems-body .dashboard-cell-tooltip,
.dashboard-documentation-body .dashboard-cell-tooltip {
    position: relative;
}

.dashboard-cell-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.dashboard-problems-body .dashboard-cell-tooltip:hover,
.dashboard-problems-body .dashboard-cell-tooltip:focus,
.dashboard-problems-body .dashboard-cell-tooltip:focus-within,
.dashboard-documentation-body .dashboard-cell-tooltip:hover,
.dashboard-documentation-body .dashboard-cell-tooltip:focus,
.dashboard-documentation-body .dashboard-cell-tooltip:focus-within {
    overflow: visible;
    z-index: 70;
}

.dashboard-cell-tooltip-panel {
    background: #ffffff;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    bottom: calc(100% + 0.45rem);
    box-shadow: 0 0.75rem 2rem rgba(16, 24, 40, 0.14);
    color: #1f2937;
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    left: 0;
    line-height: 1.28;
    max-width: min(44rem, calc(100vw - 2rem));
    min-width: min(16rem, calc(100vw - 2rem));
    opacity: 0;
    padding: 0.7rem 0.85rem;
    pointer-events: none;
    position: absolute;
    flex: 0 0 auto;
    text-align: left;
    transform: translateY(0.2rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
    visibility: hidden;
    white-space: normal;
    z-index: 90;
}

.dashboard-cell-tooltip-panel::after {
    background: #ffffff;
    border-bottom: 1px solid #dfe5eb;
    border-right: 1px solid #dfe5eb;
    bottom: -0.32rem;
    content: "";
    height: 0.6rem;
    left: 0.8rem;
    position: absolute;
    transform: rotate(45deg);
    width: 0.6rem;
}

.dashboard-cell-tooltip:hover .dashboard-cell-tooltip-panel,
.dashboard-cell-tooltip:focus .dashboard-cell-tooltip-panel,
.dashboard-cell-tooltip:focus-within .dashboard-cell-tooltip-panel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.dashboard-problems-body .dashboard-problem-time {
    color: #0070c0;
    font-weight: 700;
}

.dashboard-problems-body .dashboard-problem-location {
    color: #1f2328;
    font-weight: 650;
    text-decoration: underline dotted;
    text-underline-offset: 0.18rem;
}

.dashboard-problems-body .dashboard-problem-location:hover,
.dashboard-problems-body .dashboard-problem-location:focus,
.dashboard-documentation-body .dashboard-problem-location:hover,
.dashboard-documentation-body .dashboard-problem-location:focus {
    color: var(--accent);
}

.dashboard-documentation-body .dashboard-problem-location {
    color: #1f2328;
    display: block;
    font-weight: 650;
    overflow: hidden;
    text-decoration: underline dotted;
    text-overflow: ellipsis;
    text-underline-offset: 0.18rem;
    white-space: nowrap;
}

.dashboard-problems-body .dashboard-problem-name {
    color: #1f2328;
    font-weight: 500;
    text-decoration: underline dotted;
    text-underline-offset: 0.18rem;
}

.dashboard-problems-body .zabbix-problem-duration {
    color: #1f2328;
}

.dashboard-problems-body .zabbix-problem-acknowledged {
    font-weight: 700;
    justify-content: flex-start;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.dashboard-problems-body .dashboard-problem-notes {
    color: #607080;
    justify-content: flex-end;
    overflow: visible;
}

.seqg8-core-panel {
    background: #eef7f1;
    border-bottom: 1px solid #dddddd;
    font-size: 0.82rem;
    padding: 0;
}

.seqg8-core-panel .collapsible-section-toggle {
    background: #eef7f1;
}

.seqg8-core-body {
    background: #eef7f1;
    padding: 0 1rem 0.8rem;
}

.seqg8-core-list {
    border: 1px solid #dce8df;
    border-radius: 6px;
    overflow: hidden;
}

.seqg8-core-row {
    align-items: center;
    background: #f4fbf6;
    border-top: 1px solid #dce8df;
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: minmax(18rem, 18rem) minmax(0, 1fr);
    padding: 0.65rem 0.75rem;
}

.seqg8-core-row:first-child {
    border-top: 0;
}

.seqg8-core-label {
    color: #607080;
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
}

.seqg8-core-value-warning {
    color: #c77700;
}

.seqg8-core-value-danger {
    color: #d84242;
}

.seqg8-core-pinout-body {
    margin-top: 0.8rem;
}

.seqg8-core-pinout-layout {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 0.2rem;
}

.seqg8-core-pinout-wrap {
    flex: 0 0 auto;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    position: relative;
}

.seqg8-document-menu-wrap {
    line-height: 0;
    position: relative;
}

.seqg8-document-menu-toggle {
    background: transparent;
    border: 0;
    display: block;
    line-height: 0;
    padding: 0;
}

.seqg8-document-menu-toggle:focus-visible {
    outline: 2px solid #4f8cff;
    outline-offset: 2px;
}

.seqg8-document-menu {
    background: #ffffff;
    border: 1px solid #d8e1e8;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    left: 0;
    min-width: 12rem;
    padding: 0.25rem;
    position: absolute;
    top: calc(100% + 0.35rem);
    z-index: 20;
}

.seqg8-document-menu a {
    border-radius: 4px;
    color: #243342;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.45rem 0.55rem;
    text-decoration: none;
    white-space: nowrap;
}

.seqg8-document-menu a:hover,
.seqg8-document-menu a:focus {
    background: #eef7f1;
    color: #111827;
}

.seqg8-core-pinout-image {
    display: block;
    height: 130px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    width: auto;
}

.seqg8-core-extender-image {
    display: block;
    height: 130px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.seqg8-core-io-indicator {
    background: #9aa5b1;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22);
    height: 10px;
    position: absolute;
    top: 8px;
    transform: translate(-50%, -50%);
    width: 10px;
}

.seqg8-core-io-indicator[data-state="on"] {
    background: #1fa463;
}

.seqg8-core-io-indicator[data-state="off"] {
    background: #d84242;
}

.seqg8-core-io-indicator[data-state="intermittent"] {
    background: #f59e0b;
}

.seqg8-core-io-indicator[data-seqg8-core-io="OUT1"] {
    left: 31.4%;
}

.seqg8-core-io-indicator[data-seqg8-core-io="OUT2"] {
    left: 42.1%;
}

.seqg8-core-io-indicator[data-seqg8-core-io="IN1"] {
    left: 57.8%;
}

.seqg8-core-io-indicator[data-seqg8-core-io="IN2"] {
    left: 68.6%;
}

.seqg8-core-io-indicator[data-seqg8-core-io="IN3"] {
    left: 79.3%;
}

.seqg8-core-io-indicator[data-seqg8-core-io="IN4"] {
    left: 90.1%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="OUT1"] {
    left: 13%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="OUT2"] {
    left: 29%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="IN1"] {
    left: 58.6%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="IN2"] {
    left: 69.2%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="IN3"] {
    left: 79.8%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-io-indicator[data-seqg8-core-io="IN4"] {
    left: 90.4%;
}

.seqg8-core-led-indicator {
    background: transparent;
    border: 0;
    border-radius: 50%;
    height: 9px;
    left: 11.1%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 9px;
}

.seqg8-core-led-indicator[data-state="lit"] {
    background: #8fd8ff;
    box-shadow: 0 0 0 1px rgba(71, 139, 178, 0.4), 0 0 8px rgba(143, 216, 255, 0.75);
}

.seqg8-core-led-indicator[data-seqg8-core-led="A"] {
    top: 35.8%;
}

.seqg8-core-led-indicator[data-seqg8-core-led="B"] {
    top: 50.4%;
}

.seqg8-core-led-indicator[data-seqg8-core-led="C"] {
    top: 65.2%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-led-indicator {
    left: 12.6%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-led-indicator[data-seqg8-core-led="A"] {
    top: 36.2%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-led-indicator[data-seqg8-core-led="B"] {
    top: 50.7%;
}

.seqg8-core-pinout-panel-210 .seqg8-core-led-indicator[data-seqg8-core-led="C"] {
    top: 65.1%;
}

.seqg8-core-network-table {
    border-collapse: collapse;
    color: #293847;
    flex: 1 1 24rem;
    font-size: 0.78rem;
    line-height: 1.2;
    margin-left: 1rem;
    max-width: 38rem;
    min-width: min(100%, 24rem);
}

.seqg8-core-network-table th,
.seqg8-core-network-table td {
    border-bottom: 1px solid #d8e1e8;
    padding: 0.38rem 0.55rem;
    text-align: left;
    white-space: nowrap;
}

.seqg8-core-network-table thead th {
    color: #607080;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.seqg8-core-network-table tbody th {
    color: #1d2b38;
    font-weight: 800;
}

.zabbix-problem-severity-0 {
    background: #97aab3;
}

.zabbix-problem-severity-1 {
    background: #7499ff;
}

.zabbix-problem-severity-2 {
    background: #ffc859;
}

.zabbix-problem-severity-3 {
    background: #ffa059;
}

.zabbix-problem-severity-4 {
    background: #e97659;
}

.zabbix-problem-severity-5 {
    background: #e45959;
}

.zabbix-latest-panel {
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
    padding: 0;
}

.zabbix-latest-toggle {
    align-items: center;
    background: #ffffff;
    border: 0;
    color: #2f3a43;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.78rem 1rem;
    text-align: left;
}

.zabbix-latest-toggle i {
    color: #607080;
    font-size: 0.85rem;
}

.zabbix-latest-toggle:hover,
.zabbix-latest-toggle:focus {
    color: var(--accent);
}

.zabbix-latest-body {
    padding: 0 1rem 0.9rem;
}

.zabbix-latest-table {
    border: 1px solid #dfe5eb;
    border-radius: 6px;
    max-width: 100%;
    overflow: hidden;
}

.zabbix-latest-loading {
    background: #f8f9fa;
    border: 1px dashed #d8dee6;
    border-radius: 6px;
    color: #6c757d;
    padding: 0.65rem 0.75rem;
}

.zabbix-latest-header,
.zabbix-latest-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1.35fr) minmax(7.25rem, 0.72fr) minmax(7.5rem, 1fr) 4.9rem;
    width: 100%;
}

.zabbix-latest-header {
    background: #f7f9fb;
    color: #607080;
    font-size: 0.74rem;
    font-weight: 700;
}

.zabbix-latest-header span,
.zabbix-latest-row > div {
    border-bottom: 1px solid #edf0f2;
    min-width: 0;
    padding: 0.42rem 0.5rem;
}

.zabbix-latest-group {
    background: #f2f6f9;
    border-bottom: 1px solid #dfe7ee;
    color: #24323d;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.42rem 0.55rem;
}

.zabbix-latest-group span {
    color: #52606d;
    font-weight: 600;
}

.zabbix-latest-row {
    color: #1f2328;
    font-size: 0.78rem;
    font-weight: 400;
}

.zabbix-latest-row:hover {
    background: #f8fafc;
}

.zabbix-latest-name,
.zabbix-latest-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zabbix-latest-row > div:nth-child(2) {
    font-variant-numeric: tabular-nums;
    line-height: 1.18;
}

.zabbix-latest-header span:last-child,
.zabbix-latest-row > div:last-child {
    text-align: right;
}

.zabbix-latest-row a {
    border: 1px solid #c8d7e3;
    border-radius: 4px;
    color: #205f9f;
    display: inline-flex;
    font-weight: 600;
    max-width: 100%;
    padding: 0.12rem 0.35rem;
    text-decoration: none;
}

.zabbix-latest-row a:hover {
    background: #f2f7fb;
    border-color: #9fc2df;
    text-decoration: none;
}

@keyframes zabbix-online-breathe {
    0%,
    100% {
        background: #178a42;
        box-shadow: 0 0.12rem 0.45rem rgba(23, 138, 66, 0.14);
    }

    50% {
        background: #4ade80;
        box-shadow: 0 0.24rem 1rem rgba(74, 222, 128, 0.32);
    }
}

.document-list {
    background: #f8f9fa;
    border: 1px solid #edf0f2;
    border-radius: 6px;
    margin-top: 0.55rem;
    overflow-anchor: none;
    overflow: hidden;
    padding: 0 0.65rem;
}

.document-list-row {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(5.8rem, 9rem) auto;
    min-height: 2.5rem;
    padding: 0.35rem 0;
}

.document-list-row + .document-list-row {
    border-top: 1px solid #e5e7eb;
}

.document-list-name {
    color: #212529;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.template-object-form {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(8rem, 0.7fr) auto;
    margin-top: 0.75rem;
}

.template-object-form .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.document-list-name:hover {
    color: var(--accent);
}

.document-list-row .document-meta {
    color: #6c757d;
    display: grid;
    font-size: 0.68rem;
    gap: 0.05rem;
    justify-items: end;
    line-height: 1.08;
    min-width: 0;
    text-align: right;
}

.document-list-row .document-meta span {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-actions {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
}

.document-actions form {
    margin: 0;
}

.document-versions {
    grid-column: 2 / 5;
    min-width: 0;
}

.document-versions select {
    background: #ffffff;
    border: 1px solid #d7dee6;
    border-radius: 4px;
    color: #52606d;
    font-size: 0.74rem;
    max-width: 15rem;
    min-height: 1.85rem;
    padding: 0.15rem 1.7rem 0.15rem 0.45rem;
    width: 100%;
}

.document-version-list {
    border: 1px solid #dfe5eb;
    border-radius: 6px;
    display: grid;
    overflow: hidden;
}

.document-version-row {
    align-items: center;
    color: #2f3a43;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.55rem 0.75rem;
}

.document-version-row + .document-version-row {
    border-top: 1px solid #edf0f2;
}

.document-version-row:hover {
    background: #f8f9fa;
}

.document-version-info {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 8rem minmax(0, 1fr);
    min-width: 0;
}

.document-version-info span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-version-actions {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    min-height: 1.35rem;
}

.document-version-actions form {
    align-items: center;
    display: inline-flex;
    height: 1.35rem;
    margin: 0;
}

.document-preview-link {
    align-items: center;
    aspect-ratio: 35 / 31;
    background: #ffffff;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    contain: layout paint size;
    display: inline-flex;
    flex: 0 0 3.5rem;
    height: 3.1rem;
    justify-content: center;
    min-height: 3.1rem;
    min-width: 3.5rem;
    overflow-anchor: none;
    overflow: hidden;
    width: 3.5rem;
}

.document-preview {
    aspect-ratio: 35 / 31;
    display: block;
    height: 100%;
    max-height: 3.1rem;
    max-width: 3.5rem;
    object-fit: cover;
    width: 100%;
}

.document-preview-pdf {
    border: 0;
    pointer-events: none;
}

.document-preview-icon {
    color: var(--danger);
    font-size: 1.45rem;
}

.confirm-modal[hidden] {
    display: none;
}

.confirm-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1000;
}

.confirm-modal-backdrop {
    background: rgba(17, 24, 39, 0.38);
    inset: 0;
    position: absolute;
}

.confirm-modal-dialog {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    box-shadow: 0 1rem 2.5rem rgba(17, 24, 39, 0.22);
    max-width: 24rem;
    padding: 1.25rem;
    position: relative;
    width: 100%;
}

.confirm-modal-dialog h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.confirm-modal-dialog p {
    color: #6c757d;
    margin: 0 0 1rem;
}

.confirm-modal-subject {
    color: #343a40;
    display: inline-block;
    font-weight: 700;
    max-width: 100%;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.confirm-modal-preview {
    margin-bottom: 1rem;
}

.confirm-modal-preview .document-preview-link {
    height: 7rem;
    pointer-events: none;
    width: 8rem;
}

.confirm-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.item-list-row a {
    color: #212529;
    font-weight: 600;
    text-decoration: none;
}

.item-list-row a:hover {
    color: var(--accent);
}

.status-dot {
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.status-dot.active {
    background: var(--success-bg);
    border-color: #a8e0bf;
    color: var(--success);
}

.status-dot.inactive {
    background: var(--danger-bg);
    border-color: #ffc2c7;
    color: var(--danger);
}

.location-form {
    max-width: 44rem;
}

.organization-picker-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-picker {
    min-width: 0;
}

.organization-picker .form-select {
    min-height: 8.5rem;
}

.image-upload {
    align-items: center;
    border: 1px dashed #cbd3dc;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    padding: 0.85rem;
}

.image-upload:focus-within,
.image-upload.paste-ready,
.image-upload.drag-ready {
    border-color: var(--accent);
}

.image-upload-preview {
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #d9dee3;
    color: #6c757d;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.4rem;
    justify-content: center;
    overflow: hidden;
}

.avatar-preview {
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
}

.organization-logo-preview {
    border-radius: 8px;
    height: 5rem;
    width: 5rem;
}

.object-image-upload-preview {
    border-radius: 6px;
    height: 4.4rem;
    width: 6rem;
}

.image-upload-preview img,
.object-image-thumb {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.object-image-thumb {
    background: #f8f9fa;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    flex: 0 0 auto;
    height: 3.8rem;
    width: 5.2rem;
}

.image-upload-controls {
    min-width: 0;
    width: 100%;
}

@media (max-width: 992px) {
    body {
        overflow: auto;
    }

    .app-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .app-shell:has(.secondary-sidebar.is-pinned) {
        grid-template-columns: 1fr;
    }

    .mobile-topbar {
        align-items: center;
        background: #ffffff;
        border-bottom: 1px solid #dddddd;
        display: flex;
        gap: 0.75rem;
        min-height: 4rem;
        padding: 0.65rem 1rem;
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .mobile-menu-button {
        align-items: center;
        aspect-ratio: 1;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 8px;
        color: #333333;
        display: inline-flex;
        font-size: 1.6rem;
        justify-content: center;
        padding: 0;
        width: 2.65rem;
    }

    .mobile-menu-button:hover,
    .mobile-menu-button:focus {
        border-color: var(--accent);
        color: var(--accent);
    }

    .mobile-logo {
        display: block;
        height: auto;
        max-height: 2.45rem;
        max-width: 10rem;
        object-fit: contain;
    }

    .mobile-menu-backdrop {
        background: rgba(0, 0, 0, 0.32);
        display: block;
        inset: 0;
        position: fixed;
        z-index: 35;
    }

    .mobile-menu-backdrop[hidden] {
        display: none;
    }

    .primary-sidebar {
        bottom: 0;
        left: 0;
        max-width: min(18rem, 86vw);
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        width: 18rem;
        z-index: 40;
    }

    .primary-sidebar.mobile-menu-open {
        transform: translateX(0);
    }

    .primary-sidebar .nav {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    .secondary-sidebar {
        max-height: none;
        min-height: auto;
        overflow-y: visible;
        width: auto;
    }

    .secondary-list {
        overflow-y: visible;
    }

    .secondary-sidebar.is-expandable:not(.is-pinned):hover,
    .secondary-sidebar.is-expandable:not(.is-pinned):focus-within {
        box-shadow: none;
        width: auto;
    }

    .secondary-sidebar.is-pinned {
        box-shadow: none;
        width: auto;
    }

    .main-content {
        max-height: none;
        overflow-y: visible;
        padding: 2rem 1rem;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .location-header,
    .location-actions,
    .document-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-buttons {
        justify-content: flex-start;
    }

    .action-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .document-row .document-meta {
        justify-content: flex-start;
    }

    .qr-side {
        align-items: flex-start;
    }

    .qr-side-main {
        align-items: flex-start;
    }

    .location-header-actions .action-button,
    .object-section-actions .action-button {
        flex: 0 0 1.55rem;
    }
}

@media (max-width: 640px) {
    .organization-picker-grid {
        grid-template-columns: 1fr;
    }
}