:root {
    --topbar-height: 56px;
    --sidebar-width: 168px;
    --sidebar-collapsed-width: 60px;
    --app-bg: #f4f7fb;
    --app-surface: #f8fafc;
    --app-surface-strong: #ffffff;
    --app-surface-muted: #eef3f8;
    --app-border: #d8e0ea;
    --app-border-strong: #9aa9bb;
    --app-text: #172033;
    --app-text-muted: #607086;
    --app-accent: #2563eb;
    --app-accent-strong: #1d4ed8;
    --app-accent-soft: #e8f0ff;
    --app-success: #168065;
    --app-success-soft: #e4f6ef;
    --app-warning: #b7791f;
    --app-warning-soft: #fff5db;
    --app-danger: #c2415b;
    --app-danger-soft: #fde8ee;
    --app-hover: #edf4ff;
    --app-focus-ring: rgba(37, 99, 235, 0.2);
    --app-shadow: 0 10px 26px rgba(23, 32, 51, 0.08);
    --app-shadow-sm: 0 4px 12px rgba(23, 32, 51, 0.06);
    --app-radius: 8px;
    --app-radius-sm: 6px;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

body {
    overflow: hidden;
}

a {
    color: inherit;
}

.app-shell {
    height: calc(100vh - var(--topbar-height));
    overflow: hidden;
}

.app-layout {
    display: block;
    height: 100%;
}

.app-main {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    background: var(--app-bg);
}

.app-page__container {
    max-width: 100%;
}

.app-title,
.app-subtitle,
.app-overline,
.app-label,
.app-help {
    margin-top: 0;
}

.app-title {
    margin-bottom: 0.7rem;
    color: var(--app-text);
    font-weight: 650;
    line-height: 1.2;
}

.app-title--xl {
    font-size: 1.85rem;
}

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

.app-title--md {
    font-size: 1.25rem;
}

.app-title--sm {
    font-size: 1.05rem;
}

.app-subtitle {
    margin-bottom: 0.6rem;
    color: var(--app-text-muted);
    font-weight: 600;
}

.app-subtitle--sm,
.app-help,
.app-overline {
    color: var(--app-text-muted);
    font-size: 0.82rem;
}

.app-overline {
    margin-bottom: 0.35rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.app-overline--tight {
    margin-bottom: 0.25rem;
}

.app-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--app-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.app-label--sm {
    font-size: 0.78rem;
}

.app-copy-muted {
    color: var(--app-text-muted);
}

.app-copy-centered {
    text-align: center;
}

.app-copy-compact {
    margin: 0;
    font-size: 0.82rem;
}

.app-text-danger,
.app-help--danger {
    color: var(--app-danger) !important;
}

.app-help--success {
    color: var(--app-success) !important;
}

.app-hidden {
    display: none !important;
}

.app-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.1rem;
    box-sizing: border-box;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.app-tag--info {
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
}

.app-tag--danger {
    background: var(--app-danger-soft);
    color: #8f3726;
}

.app-tag--success {
    background: var(--app-success-soft);
    color: #1f6751;
}

.app-tag--warning {
    background: var(--app-warning-soft);
    color: #755413;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #101828;
    color: #f8fafc;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.18);
}

.app-topbar__brand-row,
.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-topbar__brand {
    color: inherit;
    text-decoration: none;
    font-size: 1.02rem;
    letter-spacing: 0;
}

.app-topbar__spacer {
    flex: 1 1 auto;
}

.app-topbar__menu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 1rem;
}

.app-topbar__search-slot {
    margin-left: auto;
}

.app-topbar__auth-slot {
    flex: 0 0 auto;
}

.app-topbar__burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 248, 238, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.28rem;
}

.app-topbar__burger span {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.app-topbar__burger.app-is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.app-topbar__burger.app-is-open span:nth-child(2) {
    opacity: 0;
}

.app-topbar__burger.app-is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--app-radius-sm);
    border: 1px solid transparent;
    background: var(--app-accent);
    color: #f5f9ff;
    text-decoration: none;
    font-weight: 650;
    cursor: pointer;
    box-shadow: var(--app-shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.app-button:hover,
.app-button:focus-visible {
    background: var(--app-accent-strong);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
    outline: none;
}

.app-button:disabled,
.app-button.app-is-loading {
    opacity: 0.72;
    transform: none;
}

.app-button:disabled {
    cursor: not-allowed;
}

.app-button.app-is-loading {
    cursor: wait;
}

.app-button__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.55rem;
    border: 2px solid rgba(245, 249, 255, 0.45);
    border-top-color: #f5f9ff;
    border-radius: 999px;
    animation: app-button-spin 0.75s linear infinite;
}

.app-button.app-is-loading .app-button__spinner {
    display: inline-block;
}

@keyframes app-button-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-button--ghost {
    border-color: rgba(226, 232, 240, 0.24);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.app-search-field {
    position: relative;
    min-width: min(28rem, 55vw);
}

.app-search-field__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.55rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: var(--app-radius-sm);
    background: rgba(255, 255, 255, 0.09);
}

.app-search-field__input-wrap:focus-within {
    border-color: rgba(147, 197, 253, 0.72);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.app-search-field__icon {
    color: rgba(244, 248, 255, 0.78);
}

.app-search-field__input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

.app-search-field__input::placeholder {
    color: rgba(228, 238, 252, 0.58);
}

.app-sidebar {
    background: #ffffff;
    box-shadow: inset -1px 0 0 var(--app-border);
}

.app-sidebar__header {
    display: flex;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--app-border);
}

.app-sidebar__toggle {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-text);
    cursor: pointer;
}

.app-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0.6rem;
}

.app-sidebar__nav li + li {
    margin-top: 0.3rem;
}

.app-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    text-decoration: none;
    white-space: nowrap;
}

.app-sidebar__link:hover,
.app-sidebar__link:focus-visible {
    background: var(--app-hover);
    outline: none;
}

.app-sidebar__icon {
    width: 1.25rem;
    text-align: center;
    color: #475569;
}

.app-sidebar-link-label {
    overflow: hidden;
    transition: max-width 0.3s ease, opacity 0.2s ease;
}

/* floating topbar search results */
.topbar-search-wrapper {
    position: relative;
}
#topbar-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 2000;
    background: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow);
    max-height: 320px;
    overflow-y: auto;
}

.app-search-results {
    padding: 0.5rem;
}

.app-search-results__message,
.app-search-results__section-title,
.app-search-results__meta {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.78rem;
}

.app-search-results__section-title {
    padding: 0.45rem 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.app-search-results__item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.app-search-results__item.selected,
.app-search-results__item:hover,
.app-search-results__item:focus-visible {
    background-color: var(--app-accent-soft);
    outline: none;
}

.app-search-results__divider {
    margin: 0.4rem 0;
    border: 0;
    border-top: 1px solid var(--app-border);
}

#topbar-search-results [data-search-item].selected {
    background-color: var(--app-accent-soft);
}

/* highlight selection in modal customer search */
#add_customer_results {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.app-search-results--inline {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 1300;
    margin-top: 0;
    max-height: 14.5rem;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-top: 0;
    border-radius: var(--app-radius-sm);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.app-combobox {
    position: relative;
}

.app-combobox .app-input[aria-expanded="true"] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#add_customer_results .app-search-results__item.selected {
    background-color: var(--app-accent-soft);
}

/* Set the sidebar to have a fixed position */
#sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    overflow: hidden;
    overflow-y: auto;
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

/* When the sidebar is collapsed */
#sidebar.app-is-collapsed {
    width: var(--sidebar-collapsed-width);
}

.layout-shell {
    padding-left: var(--sidebar-width);
    transition: padding-left 0.3s ease;
}

body.sidebar-collapsed .layout-main-content {
    margin-left: 0;
}

body.sidebar-collapsed .layout-shell {
    padding-left: var(--sidebar-collapsed-width);
}

.layout-main-content {
    margin-left: 0;
    transition: margin-left 0.3s ease;
}

#sidebar.app-is-collapsed .app-sidebar-link-label {
    max-width: 0;
    opacity: 0;
}

#sidebar.app-is-collapsed .app-sidebar__link {
    justify-content: center;
}

#sidebar,
.layout-main-content {
    overflow-y: auto;
    max-height: 100vh;
}

.layout-main-content {
    padding: 1.25rem;
}

#sidebar-overlay {
    display: none;
}

/* overlay for clients column picker */
.column-picker-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; z-index:1000; }
.column-picker-overlay.column-picker-popover {
    width: auto;
    height: auto;
    background: transparent;
    display: block;
    z-index: 2100;
}
.column-picker-overlay__panel {
    max-width: 300px;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.column-picker-overlay__title {
    margin: 0 0 0.65rem;
    color: var(--app-text);
    font-weight: 700;
}

/* hide a column in the clients table by adding .hidden to the corresponding <col> element */
#clients-tab-content table col.hidden {
    display: none;
}

/* sorting indicator arrows on headers */
#clients-tab-content table th.sorted-asc::after {
    content: " \25B2"; /* ▲ */
}
#clients-tab-content table th.sorted-desc::after {
    content: " \25BC"; /* ▼ */
}

@media screen and (max-width: 1023px) {
    .app-topbar {
        padding: 0 0.85rem;
    }

    .app-topbar__burger {
        display: inline-flex;
    }

    .app-topbar__menu {
        position: fixed;
        top: var(--topbar-height);
        right: 0.75rem;
        left: 0.75rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 0.9rem;
        border-radius: var(--app-radius);
        background: #101828;
        box-shadow: 0 18px 36px rgba(7, 19, 40, 0.28);
    }

    .app-topbar__menu.app-is-open {
        display: flex;
    }

    .app-topbar__spacer {
        display: none;
    }

    .app-topbar__actions,
    .app-topbar__search-slot,
    .app-topbar__auth-slot {
        width: 100%;
    }

    .app-search-field {
        min-width: 0;
        width: 100%;
    }

    #sidebar {
        width: 220px;
        transform: translateX(-100%);
    }

    #sidebar.app-is-collapsed {
        width: 220px;
    }

    #sidebar.app-is-open {
        transform: translateX(0);
    }

    .layout-main-content,
    body.sidebar-collapsed .layout-main-content {
        margin-left: 0;
    }

    .layout-shell,
    body.sidebar-collapsed .layout-shell {
        padding-left: 0;
    }

    #sidebar-overlay {
        display: block;
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 999;
    }

    body.sidebar-open #sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

#devicesTable col.hidden {
    display: none;
}

#devicesTable th[data-sort] {
    cursor: pointer;
    user-select: none;
}

#devicesTable th.devices-sorted-asc::after {
    content: " \25B2";
}

#devicesTable th.devices-sorted-desc::after {
    content: " \25BC";
}

/* Dashboard summary cards should look like clickable buttons */
.dashboard-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dashboard-card:hover {
    border-color: #b9c7da;
    background-color: #f8fbff;
    transform: translateY(-1px);
}
.dashboard-card:active {
    background-color: #eef4ff;
    transform: translateY(0);
}

.app-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1rem;
}

.app-summary-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.app-summary-card,
.app-surface-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.app-summary-card {
    display: block;
    padding: 1.15rem;
    text-align: center;
    text-decoration: none;
    color: var(--app-text);
}

.app-summary-card__label {
    margin: 0 0 0.45rem;
    color: var(--app-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.app-summary-card__value {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.55rem);
    font-weight: 700;
}

.app-surface-card {
    padding: 1rem;
}

.app-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-problem-panel {
    margin-top: 1.5rem;
}

.app-problem-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.app-count-pill,
.app-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.app-count-pill {
    background: #172033;
    color: #f5f9ff;
}

.app-status-badge {
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.app-status-badge.app-status-badge--danger {
    background: var(--app-danger-soft);
    color: #982d46;
}

.app-status-badge.app-status-badge--warning {
    background: var(--app-warning-soft);
    color: #8c5a10;
}

.app-status-badge.app-status-badge--info {
    background: var(--app-accent-soft);
    color: #0d5fbe;
}

.app-status-badge.app-status-badge--success {
    background: var(--app-success-soft);
    color: #145f4d;
}

.app-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-sm);
}

.app-page-toolbar__group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-input,
.app-select,
.app-textarea {
    width: 100%;
    min-height: 2.5rem;
    box-sizing: border-box;
    padding: 0.58rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-strong);
    color: var(--app-text);
    font: inherit;
}

.app-textarea {
    min-height: 8rem;
    resize: vertical;
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    outline: 3px solid var(--app-focus-ring);
    border-color: var(--app-accent);
}

.app-input[readonly],
.app-textarea[readonly],
.app-static-input {
    background: var(--app-surface-muted);
    color: #48576b;
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.app-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.app-form-field--compact {
    margin-bottom: 0;
}

.app-form-field--full {
    grid-column: 1 / -1;
}

.app-form-label {
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--app-text-muted);
}

.app-table-shell {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

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

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.app-table thead {
    background: #f8fafc;
}

.app-table th,
.app-table td {
    padding: 0.78rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--app-border);
    vertical-align: middle;
}

.app-table th {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-table tbody tr {
    background: var(--app-surface-strong);
}

.app-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.app-table tbody tr[data-clickable="true"] {
    cursor: pointer;
}

.app-table tbody tr[data-clickable="true"]:hover {
    background: var(--app-hover);
}

.customer-editor .customer-table-shell {
    border-color: var(--app-border);
    box-shadow: var(--app-shadow);
}

.customer-editor .customer-table thead {
    background: #f8fafc;
}

.customer-editor .customer-table th {
    border-bottom: 1px solid var(--app-border);
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.customer-editor .customer-table th + th,
.customer-editor .customer-table td + td {
    border-left: 1px solid rgba(216, 224, 234, 0.72);
}

.customer-editor .customer-table tbody tr {
    background: rgba(255, 255, 255, 0.98);
}

.customer-editor .customer-table tbody tr:nth-child(even) {
    background: rgba(246, 250, 255, 0.98);
}

.customer-editor .customer-table tbody td {
    vertical-align: top;
}

.app-empty-state {
    padding: 1.5rem;
    text-align: center;
    color: var(--app-text-muted);
}

.app-inline-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--app-text-muted);
}

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.app-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.app-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    color: var(--app-text);
    text-decoration: none;
}

.app-pagination__link--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.app-pagination__link--current {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #f5f9ff;
}

.app-alert {
    padding: 0.85rem 0.95rem;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: #f8fafc;
    color: var(--app-text);
}

.app-alert--success {
    background: var(--app-success-soft);
    border-color: #98d5be;
}

.app-alert--danger {
    background: var(--app-danger-soft);
    border-color: #f1a7b4;
}

.app-alert--warning {
    background: var(--app-warning-soft);
    border-color: #e8c17c;
}

.app-alert__title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.app-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-inline-actions--end {
    justify-content: flex-end;
}

.app-inline-actions--spread {
    justify-content: space-between;
}

.app-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-static-input {
    background: var(--app-surface-muted);
}

.app-row-clickable {
    cursor: pointer;
}

.app-table-cell-centered {
    text-align: center;
}


.app-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 2000;
}

.app-modal.app-is-open {
    display: flex;
}

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(3px);
}

.app-modal__panel {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 3rem);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.app-modal__header,
.app-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
}

.app-modal__header {
    border-bottom: 1px solid var(--app-border);
}

.app-modal__footer {
    border-top: 1px solid var(--app-border);
}

.app-modal__body {
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    padding: 1.25rem;
}

.app-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.app-modal__close {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-strong);
    color: var(--app-text);
    cursor: pointer;
}

.app-modal__footer {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.app-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

.app-button--secondary {
    border-color: var(--app-border);
    background: #ffffff;
    color: #334155;
    box-shadow: none;
}

.app-button--secondary:hover,
.app-button--secondary:focus-visible {
    border-color: #b9c7da;
    background: #f8fafc;
    box-shadow: var(--app-shadow-sm);
}

.app-button--danger {
    background: var(--app-danger);
}

.app-button--danger:hover,
.app-button--danger:focus-visible {
    background: #b93a53;
}

.app-button--warning {
    background: var(--app-warning);
    box-shadow: 0 10px 20px rgba(172, 124, 35, 0.18);
}

.app-button--warning:hover,
.app-button--warning:focus-visible {
    background: #a96812;
}

.app-button--success {
    background: var(--app-success);
    box-shadow: 0 10px 20px rgba(47, 123, 100, 0.18);
}

.app-button--success:hover,
.app-button--success:focus-visible {
    background: #125f4b;
}

.app-button--small {
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.88rem;
}

.app-button--wide {
    width: 100%;
}

.app-settings-page {
    --settings-gap: 0.85rem;
    position: relative;
}

.app-settings-page__intro {
    margin-bottom: 1rem;
}

.app-settings-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    margin-bottom: 0.9rem;
    padding: 0.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: none;
}

.app-settings-tab {
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.app-settings-tab:hover,
.app-settings-tab:focus-visible {
    border-color: var(--app-border);
    background: var(--app-hover);
    color: var(--app-text);
    outline: none;
}

.app-settings-tab.app-is-active {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
}

.app-settings-workspace {
    display: block;
}

.app-settings-panel[hidden] {
    display: none;
}

.app-settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.settings-section-surface {
    padding: 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: none;
}

.settings-section-toolbar {
    margin-bottom: 0.15rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--app-border);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-section-toolbar__group--grow {
    flex: 1 1 30rem;
}

.settings-toolbar-field {
    min-width: min(18rem, 100%);
    flex: 1 1 16rem;
}

.settings-section-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
}

.settings-section-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0;
}

.settings-section-header-copy {
    flex: 1 1 18rem;
}

.settings-user-table__row {
    cursor: pointer;
}

.settings-user-table__row:hover {
    background: var(--app-hover);
}

.settings-user-table__row--active,
.settings-user-table__row--active:nth-child(even) {
    background: var(--app-accent-soft);
}

.settings-user-table__actions {
    justify-content: center;
}

.settings-feedback-note {
    padding: 0.15rem 0;
}

.settings-checkbox-field {
    justify-content: flex-end;
    align-self: end;
}

.settings-time-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.settings-time-range__separator {
    color: var(--app-text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.settings-subsection {
    padding: 0.85rem 0.9rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
}

.settings-subsection--muted {
    background: #f8fafc;
}

.settings-subsection__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.system-release-notes {
    margin: 0;
    max-height: 26rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1rem;
    background: #f8fafc;
    color: var(--app-text);
    font: inherit;
    line-height: 1.5;
}

.settings-integration-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-integration-block__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.settings-block-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
    margin-bottom: 0.65rem;
}

.settings-block-header--spaced {
    padding-top: 0.85rem;
    border-top: 1px solid var(--app-border);
}

.settings-block-header--nested {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.3rem;
}

.settings-repeater-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.settings-repeater-list--nested {
    gap: 0.6rem;
}

.settings-entry,
.settings-inline-entry {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    padding: 0.75rem 0.85rem;
    box-shadow: none;
}

.settings-entry--nested {
    background: #f8fafc;
    border-style: dashed;
}

.settings-entry__header,
.settings-inline-entry__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.settings-inline-entry__title {
    margin: 0;
    color: var(--app-text);
    font-weight: 700;
}

.settings-nested-block {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--app-border);
}

.app-settings-page .app-button {
    box-shadow: none;
}

.app-settings-page .app-input,
.app-settings-page .app-select,
.app-settings-page input[type="time"],
.app-settings-page input[type="url"],
.app-settings-page input[type="number"],
.app-settings-page input[type="text"],
.app-settings-page input[type="password"] {
    background: rgba(255, 255, 255, 0.96);
}

.app-settings-page .settings-inline-checks {
    display: flex;
    gap: 0.45rem 0.9rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.app-settings-page .settings-inline-checks label.app-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
}

.app-settings-page .template-variable-reference {
    background: #f8fafc;
    border-color: var(--app-border);
    color: var(--app-text);
    max-height: 18rem;
    overflow-y: auto;
}

.app-settings-page .template-variable-token:hover,
.app-settings-page .template-variable-token:focus-visible {
    background: var(--app-hover);
    color: var(--app-text);
}

.app-settings-page .template-variable-autocomplete {
    position: fixed;
    z-index: 1000;
    min-width: 260px;
    max-width: min(360px, 90vw);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.app-settings-page .template-variable-autocomplete[hidden] {
    display: none;
}

.app-settings-page .template-variable-autocomplete-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
    padding: 0.75rem 0.9rem;
    text-align: left;
    cursor: pointer;
}

.app-settings-page .template-variable-autocomplete-item:last-child {
    border-bottom: 0;
}

.app-settings-page .template-variable-autocomplete-item.app-is-active,
.app-settings-page .template-variable-autocomplete-item:hover,
.app-settings-page .template-variable-autocomplete-item:focus-visible {
    background: var(--app-hover);
    outline: none;
}

.app-settings-page .template-variable-autocomplete-item strong {
    display: block;
    color: var(--app-text);
}

.app-settings-page .template-variable-autocomplete-item span {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.8rem;
}

.app-checkbox,
.app-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--app-text);
}

.app-mb-0 { margin-bottom: 0; }
.app-mb-2 { margin-bottom: 0.5rem; }
.app-mb-4 { margin-bottom: 1rem; }
.app-mt-3 { margin-top: 0.75rem; }

.app-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media screen and (max-width: 900px) {
    .app-settings-tabs {
        align-items: stretch;
    }

    .app-settings-tab {
        flex: 1 0 auto;
    }

    .settings-time-range {
        grid-template-columns: 1fr;
    }

    .settings-time-range__separator {
        justify-self: center;
    }

    .settings-section-surface {
        padding: 1.1rem;
    }
}

.app-import-help {
    margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
    .app-summary-grid {
        grid-template-columns: 1fr;
    }

    .app-summary-grid__cards {
        grid-template-columns: 1fr;
    }

    .app-page-toolbar {
        align-items: stretch;
    }

    .app-page-toolbar__group {
        width: 100%;
    }

    .app-page-toolbar__group .app-button {
        flex: 1 1 auto;
    }
}

.devices-filter-trigger {
    margin-left: 0.35rem;
    width: 1.8rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
    padding: 0;
    box-shadow: none;
}

.devices-filter-trigger.app-is-filter-active {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
}

.devices-filter-box {
    min-width: 180px;
    max-width: 240px;
}

.devices-filter-popover {
    position: fixed;
    z-index: 2100;
}

.devices-filter-box__title {
    margin: 0 0 0.65rem;
    color: var(--app-text);
    font-weight: 700;
}

.devices-filter-option {
    display: flex;
    margin-bottom: 0.4rem;
}

.devices-filter-box__actions {
    display: flex;
    margin-top: 0.75rem;
}

.devices-filter-box__actions .app-button {
    width: 100%;
}

.devices-filter-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.5rem;
    padding: 0 0.15rem;
    color: var(--app-text-muted);
    font-size: 0.86rem;
    font-weight: 650;
}

.client-modal-content {
    width: min(1120px, 94vw);
    overflow-y: auto;
}

.client-modal-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 0;
}

.client-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.client-modal-heading {
    min-width: 0;
}

.client-modal-title {
    margin-bottom: 0.45rem;
    word-break: break-word;
}

.client-modal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.client-modal-primary-action {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding-right: 2.3rem;
}

.client-modal-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.client-modal-toolbar-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.client-modal-top-row {
    align-items: flex-start;
}

.client-modal-section-card {
    padding: 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-sm);
}

.client-modal-edit-card {
    background: var(--app-surface);
}

.client-modal-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.client-modal-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.client-modal-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.client-modal-detail-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.client-modal-detail-list > div {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--app-border);
}

.client-modal-detail-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.client-modal-detail-list dt {
    color: var(--app-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.client-modal-detail-list dd {
    min-width: 0;
    margin: 0;
    color: var(--app-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

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

.client-modal-chart-wrap {
    height: 230px;
    position: relative;
}

.client-modal-signal-wrap {
    height: 210px;
}

.client-modal-chart {
    width: 100%;
    height: 100%;
}

.client-modal-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-modal-stat-card {
    min-height: 6.5rem;
    padding: 0.9rem;
}

.client-modal-stat-value {
    line-height: 1.25;
    word-break: break-word;
}

#customerListContainer > .app-page-toolbar {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-page {
    padding: 0;
}

.customer-editor__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-sm);
}

.customer-editor__identity {
    min-width: min(100%, 18rem);
}

.customer-editor__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex: 1 1 34rem;
    flex-wrap: wrap;
}

.customer-editor__network-field {
    flex: 1 1 13rem;
    max-width: 18rem;
}

.customer-editor__template-field {
    flex: 1 1 14rem;
    max-width: 19rem;
}

.customer-editor__controls .app-input,
.customer-editor__controls .app-select,
.customer-editor__controls .app-button {
    min-height: 2.5rem;
}

.customer-editor__stat-card {
    min-height: 6rem;
}

.customer-editor__section {
    padding: 0;
    margin-bottom: 1rem;
}

.app-loading-state {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    color: var(--app-text-muted);
}

.app-is-clickable {
    cursor: pointer;
}

.save-actions-row {
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-sm);
}

.app-tabs {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.app-tabs ul {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    color: var(--app-text-muted);
    font-weight: 650;
    text-decoration: none;
}

.app-tabs a:hover,
.app-tabs a:focus-visible {
    background: var(--app-hover);
    color: var(--app-text);
    outline: none;
}

.app-tabs .app-is-active a {
    border-color: var(--app-border);
    background: var(--app-surface-strong);
    color: var(--app-accent-strong);
    box-shadow: 0 -2px 0 var(--app-accent) inset;
}

.tab-content {
    display: none;
}

.tab-content.app-is-active {
    display: block;
}

.router-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-weight: 650;
}

.router-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
}

.router-status-indicator--online {
    border-color: #9bd8c5;
    background: var(--app-success-soft);
    color: var(--app-success);
}

.router-status-indicator--offline {
    border-color: #e6a4b1;
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.app-button-pair {
    gap: 0;
    flex-wrap: nowrap;
}

.save-actions-group {
    align-items: stretch;
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-sm);
}

.save-actions-group > .app-button,
.save-actions-group .schedule-dropdown-button {
    box-shadow: none;
}

.save-actions-group > .app-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.save-actions-group .schedule-dropdown-button {
    min-width: 2.65rem;
    padding-inline: 0.65rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(245, 249, 255, 0.32);
}

.save-actions-group .schedule-dropdown__menu {
    left: 0;
    right: auto;
}

.customer-table-tools {
    margin-bottom: 0.75rem;
}

.customer-card-header {
    margin-bottom: 0.5rem;
}

.customer-modal-meta {
    margin-bottom: 1rem;
}

.customer-modal-meta p {
    margin: 0;
}

.customer-modal-meta p + p {
    margin-top: 0.25rem;
}

.customer-modal-error {
    margin-top: 0.75rem;
}

.scheduled-change-editor-field {
    margin-bottom: 0.5rem;
}

.scheduled-change-time {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.scheduled-change-meta {
    margin-bottom: 0.25rem;
}

.field-changed,
.changed-field {
    border-color: var(--app-warning) !important;
    box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.16) !important;
}

.schedule-dropdown,
.device-schedule-dropdown {
    position: relative;
}

.schedule-dropdown__menu,
.device-schedule-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1500;
    min-width: 14rem;
}

.schedule-dropdown.app-is-active .schedule-dropdown__menu,
.device-schedule-dropdown.app-is-active .device-schedule-dropdown__menu {
    display: block;
}

.schedule-dropdown__content,
.device-schedule-dropdown__content {
    padding: 0.35rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.schedule-dropdown__item,
.device-schedule-dropdown__item {
    display: block;
    padding: 0.6rem 0.7rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    text-decoration: none;
}

.schedule-dropdown__item:hover,
.schedule-dropdown__item:focus-visible,
.device-schedule-dropdown__item:hover,
.device-schedule-dropdown__item:focus-visible {
    background: var(--app-hover);
    outline: none;
}

.scheduled-change-card + .scheduled-change-card {
    margin-top: 0.75rem;
}

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

.scheduled-change-card-actions {
    justify-content: flex-end;
}

.pf-client-picker-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.client-modal-empty-state {
    height: 100%;
}

.client-modal-detail-actions {
    align-items: flex-end;
    gap: 0.75rem;
}

.client-modal-name-field {
    flex: 1 1 16rem;
    margin-bottom: 0;
}

.client-modal-comment-field {
    flex: 1 1 18rem;
    margin-bottom: 0;
}

.client-modal-helper {
    margin: 0;
}

.client-modal-section {
    margin-bottom: 1rem;
}

.client-modal-section-sm {
    margin-bottom: 0.75rem;
}

.client-modal-subtitle {
    margin-bottom: 0;
}

.client-modal-sample-age {
    margin-left: 0.25rem;
}

.client-modal-range-actions {
    gap: 0.5rem;
}

.client-modal-chart-title {
    margin-bottom: 0.5rem;
}

.client-modal-metric-grid {
    margin-top: 0.75rem;
}

.client-modal-range-picker {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .client-modal-content {
        width: 96vw;
    }

    .client-modal-shell {
        padding: 1rem;
    }

    .client-modal-header,
    .client-modal-toolbar {
        align-items: stretch;
    }

    .client-modal-primary-action {
        justify-content: flex-start;
        padding-right: 0;
    }

    .client-modal-stat-grid,
    .client-modal-detail-grid,
    .client-modal-chart-grid {
        grid-template-columns: 1fr;
    }

    .client-modal-detail-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .client-modal-range-picker {
        justify-content: flex-start;
    }

    .client-modal-chart-wrap {
        height: 210px;
    }

    .client-modal-signal-wrap {
        height: 190px;
    }
}