:root {
    /*    --dash-teal: #0097A7;*/
    --dash-teal: #1db0de;
    --dash-teal-light: #E0F7FA;
    --dash-teal-mid: #B2EBF2;
    --dash-teal-dark: #00788A;
    --dash-white: #FFFFFF;
    --dash-gray-50: #F8F9FA;
    --dash-gray-100: #F1F3F4;
    --dash-gray-200: #E8EAED;
    --dash-gray-300: #DADCE0;
    --dash-gray-500: #9AA0A6;
    --dash-gray-700: #5F6368;
    --dash-gray-900: #202124;
    --dash-green: #1E8E3E;
    --dash-green-bg: #E6F4EA;
    --dash-yellow: #B06000;
    --dash-yellow-bg: #FEF7E0;
    --dash-red: #C5221F;
    --dash-red-bg: #FCE8E6;
    --dash-blue: #1967D2;
    --dash-blue-bg: #E8F0FE;
    --dash-orange: #E65100;
    --dash-orange-bg: #FFF3E0;
    --dash-radius: 6px;
    --dash-radius-lg: 10px;
    --dash-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}

.dashboard-root.theme-gray {
    --dash-teal: #607D8B;
    --dash-teal-light: #ECEFF1;
    --dash-teal-mid: #CFD8DC;
    --dash-teal-dark: #455A64;
    --dash-white: #F3F4F6;
    --dash-gray-50: #ECEFF1;
    --dash-gray-100: #E5E7EB;
    --dash-gray-200: #D1D5DB;
    --dash-gray-300: #9CA3AF;
    --dash-gray-500: #6B7280;
    --dash-gray-700: #374151;
    --dash-gray-900: #111827;
    --dash-shadow: 0 1px 3px rgba(17, 24, 39, 0.15), 0 1px 2px rgba(17, 24, 39, 0.10);
}

.dashboard-root.theme-dark {
    --dash-teal: #58B8C9;
    --dash-teal-light: #25363E;
    --dash-teal-mid: #2E4954;
    --dash-teal-dark: #9CCFDB;
    --dash-white: #171C22;
    --dash-gray-50: #1E242C;
    --dash-gray-100: #14191F;
    --dash-gray-200: #2A323C;
    --dash-gray-300: #3A4654;
    --dash-gray-500: #8F9DAF;
    --dash-gray-700: #C4CEDA;
    --dash-gray-900: #E8EEF5;
    --dash-green-bg: rgba(30, 142, 62, 0.12);
    --dash-yellow-bg: rgba(176, 96, 0, 0.14);
    --dash-red-bg: rgba(197, 34, 31, 0.14);
    --dash-blue-bg: rgba(25, 103, 210, 0.14);
    --dash-shadow: 0 8px 24px rgba(3, 6, 10, 0.45);
}

.dashboard-root.theme-dark-blue {
    --dash-teal: #63B4CF;
    --dash-teal-light: #223443;
    --dash-teal-mid: #2C465A;
    --dash-teal-dark: #A2C9DA;
    --dash-white: #151B24;
    --dash-gray-50: #1B2430;
    --dash-gray-100: #111823;
    --dash-gray-200: #2A3645;
    --dash-gray-300: #3A4B5E;
    --dash-gray-500: #93A5BB;
    --dash-gray-700: #C8D5E3;
    --dash-gray-900: #E9F0F9;
    --dash-green-bg: rgba(30, 142, 62, 0.12);
    --dash-yellow-bg: rgba(176, 96, 0, 0.14);
    --dash-red-bg: rgba(197, 34, 31, 0.14);
    --dash-blue-bg: rgba(25, 103, 210, 0.14);
    --dash-shadow: 0 8px 24px rgba(3, 7, 12, 0.5);
}

.dashboard-root.theme-dark .dash-card,
.dashboard-root.theme-dark .dash-device-row,
.dashboard-root.theme-dark .dash-device-header,
.dashboard-root.theme-dark .dash-device-card,
.dashboard-root.theme-dark .dash-inline-panel,
.dashboard-root.theme-dark .dash-drawer,
.dashboard-root.theme-dark .dash-input,
.dashboard-root.theme-dark .btn-seg,
.dashboard-root.theme-dark-blue .dash-card,
.dashboard-root.theme-dark-blue .dash-device-row,
.dashboard-root.theme-dark-blue .dash-device-header,
.dashboard-root.theme-dark-blue .dash-device-card,
.dashboard-root.theme-dark-blue .dash-inline-panel,
.dashboard-root.theme-dark-blue .dash-drawer,
.dashboard-root.theme-dark-blue .dash-input,
.dashboard-root.theme-dark-blue .btn-seg {
    background: var(--dash-white);
    color: var(--dash-gray-900);
    border-color: var(--dash-gray-200);
}

*, *::before, *::after {
    box-sizing: border-box;
}

.dashboard-root {
    margin: 0;
    padding: 20px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--dash-gray-100);
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(84px, calc(20px + env(safe-area-inset-bottom)));
    color: var(--dash-gray-900);
}

    .dashboard-root input[type=number]::-webkit-inner-spin-button,
    .dashboard-root input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
    }

.text-truncate-dash {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-user-email-pill {
    max-width: 240px;
    height: 34px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--dash-teal);
    color: var(--dash-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 0 2px var(--dash-teal-light);
}

.dash-user-email-pill-initial {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dash-white) 20%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.dash-user-email-pill-text {
    font-size: 12px;
    font-weight: 600;
    max-width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-root.theme-gray .dash-user-email-pill,
.dashboard-root.theme-dark .dash-user-email-pill,
.dashboard-root.theme-dark-blue .dash-user-email-pill {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-teal-light) 80%, transparent);
}

@media (max-width: 720px) {
    .dash-user-email-pill {
        max-width: 46px;
        padding-right: 4px;
        justify-content: center;
    }

    .dash-user-email-pill-text {
        display: none;
    }
}

/* Status Colors */
.status-online {
    color: #1E8E3E;
    background: #E6F4EA;
}

.status-offline {
    color: #C5221F;
    background: #FCE8E6;
}

.status-alert {
    color: #B06000;
    background: #FEF7E0;
}

.status-standby {
    color: #1967D2;
    background: #E8F0FE;
}

.status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .status-pill.online {
        color: var(--dash-green);
        background: var(--dash-green-bg);
    }
    .status-pill.online .status-indicator { background: var(--dash-green); }

    .status-pill.offline {
        color: var(--dash-red);
        background: var(--dash-red-bg);
    }
    .status-pill.offline .status-indicator { background: var(--dash-red); }

    .status-pill.critical .status-indicator {
        background: var(--dash-red);
    }

    .status-pill.alert, .status-pill.critical {
        color: var(--dash-yellow);
        background: var(--dash-yellow-bg);
    }
    .status-pill.alert .status-indicator { background: var(--dash-yellow); }

    .status-pill.standby {
        color: var(--dash-blue);
        background: var(--dash-blue-bg);
    }
    .status-pill.standby .status-indicator { background: var(--dash-blue); }



.btn-dash {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-dash-sm {
    padding: 4px 9px;
    font-size: 11px;
}

.dash-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dash-blue);
    color: var(--dash-white);
    font-size: 12px;
    font-weight: 700;
}

.dash-group-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dash-white) 88%, transparent);
}

.dash-group-chip-close {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.dash-group-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-gray-900);
    font-size: 12px;
    font-weight: 600;
}

.dash-group-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dash-group-slider {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--dash-gray-300);
    border: 1px solid var(--dash-gray-300);
    transition: all 0.2s ease;
}

.dash-group-slider::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--dash-white);
    transition: transform 0.2s ease;
}

.dash-group-switch input:checked + .dash-group-slider {
    background: var(--dash-teal);
    border-color: var(--dash-teal);
}

.dash-group-switch input:checked + .dash-group-slider::after {
    transform: translateX(16px);
}

.btn-dash-md {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-primary-dash {
    background: var(--dash-teal);
    border: none;
    color: var(--dash-white);
}

.btn-ghost-dash {
    background: none;
    border: 1px solid var(--dash-gray-300);
    color: var(--dash-gray-700);
}

.btn-ghost-hover:hover {
    background: var(--dash-gray-50);
    color: var(--dash-teal);
}

    .btn-ghost-dash:hover {
        border-color: var(--dash-teal);
        color: var(--dash-teal);
        background: var(--dash-teal-light);
    }

.btn-secondary-dash {
    background: #FFFFFF;
    border: 1px solid #DADCE0;
    color: #5F6368;
}

    .btn-secondary-dash:hover {
        border-color: #0097A7;
        color: #0097A7;
    }

/* Grid Layouts */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.dash-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.dash-card {
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    border-radius: var(--dash-radius-lg);
    box-shadow: var(--dash-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.dash-card-header {
    padding: 10px 18px;
    border-bottom: 1px solid var(--dash-gray-200);
    background: var(--dash-gray-50);
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 3px solid var(--dash-teal);
}

    .dash-card-header.issue {
        background: #FFFBF0;
        border-top-color: #B06000;
    }

.dash-card-body {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-main-grid-header,
.dash-main-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.6fr) minmax(108px, 0.85fr) minmax(86px, 0.75fr) minmax(64px, 0.5fr) minmax(165px, 1.25fr) minmax(260px, 2.2fr) minmax(150px, 1.3fr) minmax(70px, 0.6fr) minmax(120px, 0.9fr);
    align-items: center;
    gap: 0;
}

.dash-main-grid-header {
    background: #ffffff;
    border: 1px solid var(--dash-gray-200);
    border-bottom: 2px solid var(--dash-gray-300);
    border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0;
    color: var(--dash-gray-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0 12px;
    min-height: 42px;
}

.dash-main-group {
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    border-top: 0;
    border-radius: 0 0 var(--dash-radius-lg) var(--dash-radius-lg);
    box-shadow: var(--dash-shadow);
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
}

.dash-main-group.ungrouped {
    border-top: 1px solid var(--dash-gray-200);
    border-radius: 0 0 var(--dash-radius-lg) var(--dash-radius-lg);
}

.dash-main-group-header {
    padding: 8px 14px;
    border-bottom: 1px solid #D8DFF8;
    background: #EEF1FF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-main-group.issue .dash-main-group-header {
    background: #FFFBF0;
    border-bottom-color: #F2DAB8;
}

.dash-main-group-body {
    display: flex;
    flex-direction: column;
    background: var(--dash-gray-100);
}

.dash-main-row-wrap {
    border: 0;
    border-radius: 0;
    margin: 0;
    background: var(--dash-gray-50);
}

.dash-main-row-wrap > .dash-device-card {
    margin: 6px 0;
}

.dash-main-row {
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--dash-gray-200);
    background: #FFFFFF;
}

.dash-main-row.offline {
    background: #FFF8F8;
}

.dash-main-row.issue {
    background: rgb(255, 251, 240);
}

.dash-main-row.gateway-issue {
    background: rgb(255, 251, 240);
}

.dash-device-card.gateway.gateway-issue {
    border-left-color: #D99200;
    background: rgb(255, 251, 240);
}

.dash-main-group.group-issue-highlight .dash-main-group-header {
    background: #fff5de;
    border-bottom-color: rgba(176,96,0,0.47);
}

.dashboard-root.theme-gray .dash-main-row.issue {
    background: rgb(255, 251, 240);
}

.dashboard-root.theme-dark .dash-main-row.issue,
.dashboard-root.theme-dark-blue .dash-main-row.issue {
    background: rgba(176, 96, 0, 0.14);
}

.dash-main-cell {
    min-height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--dash-gray-700);
    border-right: 1px solid var(--dash-gray-200);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-main-cell.flow {
    white-space: normal;
}

.dash-flow-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    max-height: 2.5em;
    white-space: normal;
}

.dash-main-cell:last-child {
    border-right: 0;
}

.dash-main-cell.name {
    color: var(--dash-gray-900);
    font-weight: 700;
}

.dash-main-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dash-main-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-main-icon {
    width: 20px;
    height: 20px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.dash-main-icon.active {
    background: transparent;
}

.dash-main-icon.blue {
    background: transparent;
}

.dash-main-icon.orange {
    background: transparent;
}

.dash-device-row.dash-main-row-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0;
}

.dash-main-gw-off {
    font-size: 10px;
    font-weight: 700;
    color: var(--dash-orange);
    background: var(--dash-orange-bg);
    border-radius: 20px;
    padding: 1px 6px;
}

.dash-main-cell.caps {
    gap: 5px;
    flex-wrap: wrap;
    white-space: normal;
}

.dash-main-cell.type {
    overflow: visible;
}

.dash-main-cell.actions {
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.btn-icon-gear {
    min-width: 32px;
    justify-content: center;
    padding-inline: 8px;
}

.dash-devices-btn {
    min-width: 72px;
    justify-content: center;
    gap: 6px;
}

.dash-device-toggle-arrow {
    font-size: 10px;
    line-height: 1;
}

.dash-device-row {
    border: 1px solid #E8EAED;
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
    margin-bottom: 12px;
}

    .dash-device-row.issue {
        border-color: rgba(176,96,0,0.47);
    }

.dash-device-header, .dash-device-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: #FFFFFF;
    border: 1px solid #E8EAED;
    border-left: 3px solid #0097A7;
    border-radius: 8px;
    transition: all 0.12s ease;
    position: relative;
}

    .dash-device-header.offline {
        border-left-color: #C5221F;
        background: #FFF8F8;
    }

.dash-device-card.issue {
    background: rgb(255, 251, 240);
    border-color: rgba(176,96,0,0.47);
}

    .dash-device-card:hover {
        border-color: #DADCE0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

.dash-device-body {
    border-top: 1px solid #E8EAED;
    background: #F8F9FA;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-indent {
    padding-left: 20px;
    border-left: 1px solid #E8EAED;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Section Headers */
.dash-section-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9AA0A6;
    margin: 10px 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dash-section-header .dash-count {
        color: #5F6368;
    }

/* Accent Colors Overrides */
.dash-device-card.pinpoint {
    border-left-color: #1E8E3E;
}

.dash-device-card.remoteio {
    border-left-color: #F48F42;
}

.dash-device-card.extender {
    border-left-color: #9AA0A6;
}

.dash-device-card.gconnect {
    border-left-color: #0097A7;
}

.dash-device-header.wificonnect, .dash-device-card.wificonnect {
    border-left-color: #1967D2;
}

/* Icon Boxes */
.dash-side-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5F6368;
    flex-shrink: 0;
    margin-top: 2px;
}

.dash-side-icon-box img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

    .dash-side-icon-box.active {
        background: #E0F7FA;
        color: #0097A7;
    }

    .dash-side-icon-box.blue {
        background: #E8F0FE;
        color: #1967D2;
    }

    .dash-side-icon-box.green {
        background: #E6F4EA;
        color: #1E8E3E;
    }

    .dash-side-icon-box.yellow {
        background: #FEF7E0;
        color: #B06000;
    }

    .dash-side-icon-box.orange {
        background: #FCE8E6;
        color: #C5221F;
    }

/* Card Content Rows */
.dash-card-details {
    flex: 1;
    min-width: 0;
}

.dash-card-row-1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.dash-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #202124;
}

.dash-card-row-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #5F6368;
    margin-bottom: 6px;
}

.dash-card-row-3 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Pill Badges (Capability Pills) */
.dash-cap-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

    .dash-cap-pill.teal {
        background: #E0F7FA;
        color: #00796B;
        border-color: #0097A733;
    }

    .dash-cap-pill.green {
        background: #E6F4EA;
        color: #1E8E3E;
        border-color: #1E8E3E33;
    }

    .dash-cap-pill.yellow {
        background: #FEF7E0;
        color: #B06000;
        border-color: #B0600033;
    }

    .dash-cap-pill.gray {
        background: #F1F3F4;
        color: #5F6368;
        border-color: #5F636833;
    }

/* Checkboxes */
.dash-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    margin-top: 8px;
}

.dash-custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #DADCE0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.dash-checkbox-container:hover .dash-custom-checkbox {
    border-color: #9AA0A6;
}

.dash-checkbox-container.checked .dash-custom-checkbox {
    background: #0097A7;
    border-color: #0097A7;
}

.dashboard-root.theme-gray .dash-custom-checkbox {
    background: var(--dash-gray-50);
    border-color: var(--dash-gray-300);
}

.dashboard-root.theme-dark .dash-custom-checkbox,
.dashboard-root.theme-dark-blue .dash-custom-checkbox {
    background: var(--dash-gray-50);
    border-color: var(--dash-gray-300);
}

.dashboard-root.theme-dark .dash-checkbox-container:hover .dash-custom-checkbox,
.dashboard-root.theme-dark-blue .dash-checkbox-container:hover .dash-custom-checkbox {
    border-color: var(--dash-teal-mid);
}

    .dash-checkbox-container.checked .dash-custom-checkbox::after {
        content: '\2713';
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

/* Actions */
.dash-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.dash-device-status-inline {
    margin-right: 2px;
}

.dash-global-settings-drawer {
    width: min(640px, calc(100vw - 26px));
    left: 0 !important;
    right: auto !important;
    border-radius: 0 12px 12px 0;
    animation: dashSlideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

@keyframes dashSlideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.dash-global-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-global-settings-actions {
    justify-content: flex-end;
    gap: 8px;
}

.dash-sensor-inline-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #5F6368;
    white-space: nowrap;
}

.dash-sensor-inline-metric svg {
    flex: 0 0 auto;
}

.dash-sensor-inline-metric img {
    display: block;
    flex: 0 0 auto;
}

.dashboard-root.theme-dark .dash-sensor-inline-metric,
.dashboard-root.theme-dark-blue .dash-sensor-inline-metric,
.dashboard-root.theme-gray .dash-sensor-inline-metric {
    color: var(--dash-gray-700);
}

/* Layout Grids */
.dash-grid-expansion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1100px) {
    .dash-main-grid-header,
    .dash-main-row {
        grid-template-columns: minmax(176px, 1.28fr) 110px 90px 72px 205px 280px 180px 80px 110px;
    }

    .dash-main-group {
        overflow-x: auto;
    }

    .dash-main-grid-header,
    .dash-main-group-body {
        min-width: 1320px;
    }
}

@media (max-width: 900px) {
    .dash-grid-expansion {
        grid-template-columns: 1fr;
    }
}

/* Layout Elements */
.dash-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #DADCE0;
    margin-bottom: 20px;
}

.dash-group-drop-hint {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 6px 0;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--dash-gray-700);
    background: var(--dash-gray-50);
    border: 1px dashed var(--dash-gray-300);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.dash-group-drop-hint strong,
.dash-group-chip,
.dash-group-switch,
.dash-group-drop-hint > div {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dash-group-hint-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-group-drop-hint.active {
    border-color: var(--dash-teal);
    background: color-mix(in srgb, var(--dash-teal-light) 55%, var(--dash-gray-50));
}

.dash-group-drop-hint strong {
    color: var(--dash-gray-900);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 11px;
}

.dashboard-root.theme-dark .dash-group-drop-hint,
.dashboard-root.theme-dark-blue .dash-group-drop-hint {
    background: color-mix(in srgb, var(--dash-gray-50) 72%, transparent);
    border-color: var(--dash-gray-300);
}

.dashboard-root.theme-dark .dash-group-chip,
.dashboard-root.theme-dark-blue .dash-group-chip {
    background: color-mix(in srgb, var(--dash-blue) 75%, #0f1723);
}

.dashboard-root.theme-gray .dash-group-drop-hint {
    background: color-mix(in srgb, var(--dash-gray-50) 85%, transparent);
}

.dash-groupable-header {
    user-select: none;
}

.dash-groupable-header.enabled {
    cursor: grab;
    color: var(--dash-gray-900);
}

.dash-groupable-header.enabled::after {
    content: " ⋮⋮";
    color: var(--dash-gray-500);
    font-size: 10px;
}

.dash-groupable-header.enabled:active {
    cursor: grabbing;
}

.dash-tab {
    padding: 10px 5px;
    font-size: 13px;
    font-weight: 600;
    color: #5F6368;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .dash-tab:hover {
        color: #202124;
    }

    .dash-tab.active {
        color: var(--dash-teal);
        border-bottom-color: var(--dash-teal);
    }

.status-pill .status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pill.online {
    color: #1E8E3E;
    background: #E6F4EA;
}
.status-pill.online .status-indicator { background: #1E8E3E; }

.status-pill.offline, .status-pill.shutoff {
    color: #C5221F;
    background: #FCE8E6;
}
.status-pill.offline .status-indicator, .status-pill.shutoff .status-indicator { background: #C5221F; }

.status-pill.home {
    color: #1E8E3E;
    background: #E6F4EA;
}
.status-pill.home .status-indicator { background: #1E8E3E; }

.status-pill.away {
    color: #1967D2;
    background: #E8F0FE;
}
.status-pill.away .status-indicator { background: #1967D2; }

.status-pill.bypass {
    color: #B06000;
    background: #FEF7E0;
}
.status-pill.bypass .status-indicator { background: #B06000; }

.status-pill.standby {
    color: #1967D2;
    background: #E8F0FE;
}
.status-pill.standby .status-indicator { background: #1967D2; }

/* TYPE BADGES */
.type-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.type-badge.gateway { color: #6D4C41; border-color: rgba(109,76,65,0.3); }
.type-badge.gconnect { color: #0097A7; border-color: rgba(0,151,167,0.3); }
.type-badge.wificonnect { color: #1967D2; border-color: rgba(25,103,210,0.3); }
.type-badge.pinpoint { color: #1E8E3E; border-color: rgba(30,142,62,0.3); }
.type-badge.remoteio { color: #B06000; border-color: rgba(176,96,0,0.3); }
.type-badge.extender { color: #5F6368; border-color: rgba(95,99,104,0.3); }
    .type-badge.zgateway {
        color: #6D4C41;
        border-color: rgba(109,76,65,0.3);
    }

    .type-badge.zconnect {
        color: #0097A7;
        border-color: rgba(0,151,167,0.3);
    }

    .type-badge.wificonnect {
        color: #1967D2;
        border-color: rgba(25,103,210,0.3);
    }

    .type-badge.zsensor {
        color: #1E8E3E;
        border-color: rgba(30,142,62,0.3);
    }

    .type-badge.zinput {
        color: #B06000;
        border-color: rgba(176,96,0,0.3);
    }

    .type-badge.zrepeater {
        color: #5F6368;
        border-color: rgba(95,99,104,0.3);
    }



.dash-container {
    width: min(90vw, 1800px);
    max-width: none;
    margin: 0 auto;
    padding-bottom: 40px;
}

@media (max-width: 1200px) {
    .dash-container {
        width: 90vw;
    }
}

.dash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    backdrop-filter: blur(2px);
    animation: dashFadeIn 0.2s ease;
}

@keyframes dashFadeIn { from { opacity: 0; } to { opacity: 1; } }

.dash-user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    border-radius: 8px;
    box-shadow: var(--dash-shadow);
    z-index: 102;
    padding: 6px;
}

.dash-user-menu form {
    margin: 0;
}

.dash-user-menu-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-gray-900);
    transition: background-color 0.15s ease;
}

.dash-user-menu-item:hover {
    background: var(--dash-gray-100);
}

.dash-user-menu-item.danger {
    color: var(--dash-red);
}

.dash-top-drawer {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, calc(100vw - 32px));
    max-height: min(84vh, 900px);
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    z-index: 1101;
    box-shadow: 0 20px 46px rgba(17, 24, 39, 0.26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dashSlideDown 220ms ease-out;
}

.dash-top-drawer-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--dash-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #F8F9FA;
}

.dash-top-drawer-title {
    color: var(--dash-gray-900);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-top-drawer-body {
    overflow-y: auto;
    flex: 1;
    padding: 10px;
}

.dash-top-drawer-body .col-12.col-md-5.col-xxl-4 {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
}

@keyframes dashSlideDown {
    from {
        transform: translate(-50%, -16px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .dash-top-drawer {
        width: calc(100vw - 20px);
        max-height: 88vh;
        border-radius: 0 0 14px 14px;
    }
}

.dashboard-root.theme-gray .dash-top-drawer-header {
    background: var(--dash-gray-50);
    border-bottom-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .dash-top-drawer,
.dashboard-root.theme-dark-blue .dash-top-drawer {
    border-color: var(--dash-gray-200);
    box-shadow: 0 22px 44px rgba(3, 7, 12, 0.55);
}

.dashboard-root.theme-dark .dash-top-drawer-header,
.dashboard-root.theme-dark-blue .dash-top-drawer-header {
    background: var(--dash-gray-100);
    border-bottom-color: var(--dash-gray-200);
}

.dash-account-shell {
    border: 1px solid var(--dash-gray-200);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 251, 252, 0.6) 0%, var(--dash-white) 100%);
    padding: 12px;
}

.dash-account-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--dash-gray-700);
    font-size: 13px;
    font-weight: 600;
}

.dash-account-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dash-gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dash-white);
}

.dash-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    min-height: 48px;
    border-bottom: 1px solid var(--dash-gray-200);
    cursor: pointer;
}

.dash-account-row:last-of-type {
    border-bottom: 0;
}

.dash-account-row:hover {
    background: var(--dash-gray-50);
}

.dash-account-row-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-gray-700);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dash-account-row-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    color: var(--dash-gray-900);
    font-size: 13px;
    font-weight: 600;
}

.dash-account-row-arrow {
    color: var(--dash-gray-500);
    font-size: 16px;
    line-height: 1;
}

.dash-account-editor {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px dashed var(--dash-gray-200);
    background: var(--dash-gray-50);
}

.dash-account-editor.hidden {
    display: none;
}

.dash-account-select {
    width: 230px;
    min-width: 230px;
    max-width: 100%;
    height: 34px;
    padding: 5px 32px 5px 9px;
    font-size: 12px;
}

.dash-account-save-btn {
    width: 92px;
    min-width: 92px;
    display: inline-flex;
    justify-content: center;
}

.dash-account-editor.stacked .dash-account-save-btn {
    align-self: flex-end;
}

.dash-account-editor.stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.dash-account-editor-grid {
    display: grid;
    gap: 8px;
}

.dashboard-root.theme-gray .dash-account-editor {
    background: var(--dash-gray-50);
}

.dashboard-root.theme-dark .dash-account-editor,
.dashboard-root.theme-dark-blue .dash-account-editor {
    background: var(--dash-gray-50);
    border-top-color: var(--dash-gray-200);
}

.dash-account-error {
    margin-top: 8px;
    color: var(--dash-red);
    font-size: 12px;
    font-weight: 600;
}

.dash-account-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.dash-account-actions form {
    margin: 0;
}

.dash-account-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-account-dialog {
    width: min(360px, calc(100vw - 32px));
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.28);
    padding: 16px;
}

.dash-account-dialog-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-gray-900);
    margin-bottom: 8px;
}

.dash-account-dialog-message {
    color: var(--dash-gray-700);
    font-size: 13px;
    margin-bottom: 14px;
}

.dash-account-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(17, 24, 39, 0.35);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dash-account-popup {
    width: min(520px, calc(100vw - 32px));
    max-height: min(86vh, 860px);
    overflow: hidden;
    border: 1px solid var(--dash-gray-200);
    border-radius: 14px;
    background: var(--dash-white);
    box-shadow: 0 20px 42px rgba(17, 24, 39, 0.28);
    display: flex;
    flex-direction: column;
}

.dash-account-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dash-gray-200);
    background: #F8F9FA;
}

.dash-account-popup-title {
    color: var(--dash-gray-900);
    font-size: 14px;
    font-weight: 700;
}

.dash-account-popup-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.dash-account-popup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-account-popup-field label {
    color: var(--dash-gray-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dash-account-popup-note {
    font-size: 12px;
    color: var(--dash-gray-700);
}

.dash-account-popup-error {
    color: var(--dash-red);
    font-size: 12px;
    font-weight: 600;
}

.dash-account-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--dash-gray-200);
    background: var(--dash-gray-50);
}

.dash-account-popup-footer.wrap {
    flex-wrap: wrap;
}

.dashboard-root.theme-dark .dash-account-popup,
.dashboard-root.theme-dark-blue .dash-account-popup {
    box-shadow: 0 22px 44px rgba(3, 7, 12, 0.58);
}

.dashboard-root.theme-dark .dash-account-popup-header,
.dashboard-root.theme-dark-blue .dash-account-popup-header {
    background: var(--dash-gray-100);
}

.dash-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 90%;
    background: var(--dash-white);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    animation: dashSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dashSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.dash-drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E8EAED;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dash-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.dash-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid #E8EAED;
    display: flex;
    gap: 12px;
}

/* FORM CONTROLS */
.dash-field {
    margin-bottom: 20px;
}

.dash-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5F6368;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dash-field-hint {
    font-size: 11px;
    color: #80868B;
    margin-bottom: 8px;
    line-height: 1.4;
}

.dash-input-group {
    position: relative;
}

.dash-input-unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #9AA0A6;
    pointer-events: none;
}

.dash-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #DADCE0;
    border-radius: 6px;
    font-size: 14px;
    color: #202124;
    outline: none;
    transition: all 0.2s;
}

.dash-input-small {
    width: 100%;
    padding: 0px 12px;
    border: 1px solid #DADCE0;
    border-radius: 6px;
    font-size: 14px;
    color: #202124;
    outline: none;
    transition: all 0.2s;
}

.dash-input:focus {
    border-color: #0097A7;
    box-shadow: 0 0 0 3px rgba(0,151,167,0.1);
}

/* SEGMENTED BUTTONS */
.dash-seg-grid {
    display: flex;
    gap: 6px;
}

.btn-seg {
    flex: 1;
    padding: 10px 0;
    border: 1px solid #DADCE0;
    background: #FFFFFF;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5F6368;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-seg.active {
    border: 2px solid #0097A7;
    background: #E0F7FA;
    color: #00788A;
    padding: 9px 0; /* Compensation for 2px border */
}

/* INLINE SETTINGS PANEL */
.dash-inline-panel {
    border-top: 1px solid #E8EAED;
    background: #FAFBFC;
    padding: 20px 24px;
}

.dash-inline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* USER LIST ITEMS */
.user-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #E8EAED;
    border-radius: 6px;
    margin-bottom: 6px;
}

.user-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E0F7FA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0097A7;
    font-size: 11px;
    font-weight: 700;
}

/* Loading and Disabled States */
.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

.spinner-md {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 151, 167, 0.1);
    border-top-color: #0097A7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.drawer-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.disabled-state {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
}

.btn-dash.disabled {
    opacity: 0.4;
    cursor: default !important;
    pointer-events: none;
}

.btn-seg.disabled {
    opacity: 0.5;
    cursor: default !important;
}

/* CONNECT SETTINGS HOSTED IN DRAWER */
.dash-connect-host .shadow-box {
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.dash-connect-host,
.dash-connect-host * {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}

.dash-connect-host .sectionLabel {
    display: block;
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #5F6368;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dash-connect-host .details-box {
    background: #FFFFFF;
    border: 1px solid #E8EAED;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: none !important;
}

.dash-connect-host .details-box .d-flex {
    padding: 12px !important;
    border-bottom: 0 !important;
    background: #FFFFFF !important;
}

.dash-connect-host .details-box .d-flex:last-child {
    border-bottom: 0 !important;
}

.dash-connect-host .detail-label {
    font-size: 12px;
    font-weight: 600;
    color: #5F6368;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-connect-host .detail-value {
    min-width: 190px;
    display: flex;
    justify-content: flex-end;
    color: #5F6368;
    font-size: 12px;
}

.dash-connect-host .detail-value .k-input,
.dash-connect-host .detail-value .k-picker,
.dash-connect-host .detail-value .k-picker-md {
    border-color: #DADCE0 !important;
    border-radius: 6px !important;
    min-height: 34px;
}

.dash-connect-host .detail-value .k-button {
    min-height: 34px;
}

.dash-connect-host .detail-value .k-input:focus,
.dash-connect-host .detail-value .k-picker:focus-within {
    border-color: #0097A7 !important;
    box-shadow: 0 0 0 3px rgba(0,151,167,0.1) !important;
}

.dash-connect-host .detail-value .k-loader {
    transform: scale(0.85);
}

.dash-connect-host .k-input,
.dash-connect-host .k-picker,
.dash-connect-host .k-input-inner {
    font-size: 13px;
}

.dashboard-root.theme-dark .dash-card-header.issue,
.dashboard-root.theme-dark-blue .dash-card-header.issue {
    background: rgba(176, 96, 0, 0.12);
    border-top-color: rgba(176, 96, 0, 0.7);
}

.dashboard-root.theme-dark .dash-device-body,
.dashboard-root.theme-dark-blue .dash-device-body {
    background: var(--dash-gray-50);
    border-top-color: var(--dash-gray-200);
}

.dashboard-root.theme-gray .dash-card {
    border-color: #BFC8D2;
}

.dashboard-root.theme-gray .dash-device-row {
    border-color: #BFC8D2;
    background: #EEF2F5;
}

.dashboard-root.theme-gray .dash-device-header,
.dashboard-root.theme-gray .dash-device-card {
    border-color: #BFC8D2;
    background: #F3F6F8;
}

.dashboard-root.theme-gray .dash-device-card.issue {
    background: rgb(255, 251, 240);
    border-color: rgba(176,96,0,0.47);
}

.dashboard-root.theme-gray .dash-main-grid-header {
    background: #F2F6FB;
    border-color: #BFC8D2;
    color: var(--dash-gray-700);
}

.dashboard-root.theme-dark .dash-device-card.issue,
.dashboard-root.theme-dark-blue .dash-device-card.issue {
    background: rgba(176, 96, 0, 0.22);
    border-color: rgba(176,96,0,0.58);
}

.dashboard-root.theme-gray .dash-main-group {
    border-color: #BFC8D2;
}

.dashboard-root.theme-gray .dash-main-group-header {
    background: #E9EEF5;
    border-bottom-color: #C7D1DE;
}

.dashboard-root.theme-gray .dash-main-row {
    background: #F3F6F8;
}

.dashboard-root.theme-gray .dash-main-row.offline {
    background: #F8EFEF;
}

.dashboard-root.theme-dark .dash-card,
.dashboard-root.theme-dark-blue .dash-card {
    border-color: rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(21, 28, 36, 0.96) 0%, var(--dash-white) 100%);
    box-shadow: 0 14px 30px rgba(3, 7, 12, 0.38);
}

.dashboard-root.theme-dark .dash-card-header,
.dashboard-root.theme-dark-blue .dash-card-header {
    background: var(--dash-gray-100);
    border-bottom-color: rgba(148, 163, 184, 0.3);
}

.dashboard-root.theme-dark .dash-card-body,
.dashboard-root.theme-dark-blue .dash-card-body {
    background: rgba(17, 24, 35, 0.55);
}

.dashboard-root.theme-dark .dash-device-row,
.dashboard-root.theme-dark-blue .dash-device-row {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(27, 36, 48, 0.78);
}

.dashboard-root.theme-dark .dash-main-grid-header,
.dashboard-root.theme-dark-blue .dash-main-grid-header {
    background: rgba(69, 89, 114, 0.78);
    border-color: rgba(148, 163, 184, 0.3);
    color: #D9E4F3;
}

.dashboard-root.theme-dark .dash-main-group,
.dashboard-root.theme-dark-blue .dash-main-group {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 12px 28px rgba(3, 7, 12, 0.34);
}

.dashboard-root.theme-dark .dash-main-group-header,
.dashboard-root.theme-dark-blue .dash-main-group-header {
    background: rgba(41, 54, 71, 0.62);
    border-bottom-color: rgba(148, 163, 184, 0.3);
}

.dashboard-root.theme-dark .dash-main-group.issue .dash-main-group-header,
.dashboard-root.theme-dark-blue .dash-main-group.issue .dash-main-group-header {
    background: rgba(176, 96, 0, 0.18);
    border-bottom-color: rgba(176, 96, 0, 0.42);
}

.dashboard-root.theme-dark .dash-main-row,
.dashboard-root.theme-dark-blue .dash-main-row {
    background: linear-gradient(180deg, rgba(30, 40, 53, 0.96) 0%, rgba(24, 33, 46, 0.96) 100%);
    border-bottom-color: rgba(148, 163, 184, 0.24);
}

.dashboard-root.theme-dark .dash-main-row.offline,
.dashboard-root.theme-dark-blue .dash-main-row.offline {
    background: rgba(197, 34, 31, 0.08);
}

.dashboard-root.theme-dark .dash-main-cell,
.dashboard-root.theme-dark-blue .dash-main-cell {
    color: var(--dash-gray-700);
    border-right-color: rgba(148, 163, 184, 0.24);
}

.dashboard-root.theme-dark .dash-main-cell.name,
.dashboard-root.theme-dark-blue .dash-main-cell.name {
    color: var(--dash-gray-900);
}

.dashboard-root.theme-dark .dash-device-header,
.dashboard-root.theme-dark .dash-device-card,
.dashboard-root.theme-dark-blue .dash-device-header,
.dashboard-root.theme-dark-blue .dash-device-card {
    border-color: rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(30, 40, 53, 0.96) 0%, rgba(24, 33, 46, 0.96) 100%);
}

.dashboard-root.theme-dark .dash-device-header,
.dashboard-root.theme-dark-blue .dash-device-header {
    border-left-color: #0097A7;
}

.dashboard-root.theme-dark .dash-device-header.offline,
.dashboard-root.theme-dark-blue .dash-device-header.offline {
    border-left-color: #C5221F;
}

.dashboard-root.theme-dark .dash-device-card.gconnect,
.dashboard-root.theme-dark-blue .dash-device-card.gconnect {
    border-left-color: #0097A7;
}

.dashboard-root.theme-dark .dash-device-card.wificonnect,
.dashboard-root.theme-dark-blue .dash-device-card.wificonnect,
.dashboard-root.theme-dark .dash-device-header.wificonnect,
.dashboard-root.theme-dark-blue .dash-device-header.wificonnect {
    border-left-color: #1967D2;
}

.dashboard-root.theme-dark .dash-device-card.pinpoint,
.dashboard-root.theme-dark-blue .dash-device-card.pinpoint {
    border-left-color: #1E8E3E;
}

.dashboard-root.theme-dark .dash-device-card.remoteio,
.dashboard-root.theme-dark-blue .dash-device-card.remoteio {
    border-left-color: #F48F42;
}

.dashboard-root.theme-dark .dash-device-card.extender,
.dashboard-root.theme-dark-blue .dash-device-card.extender {
    border-left-color: #9AA0A6;
}

.dashboard-root.theme-dark .dash-device-card:hover,
.dashboard-root.theme-dark-blue .dash-device-card:hover {
    border-color: rgba(88, 184, 201, 0.5);
    box-shadow: 0 10px 22px rgba(3, 7, 12, 0.35);
}

.dashboard-root.theme-dark .dash-device-body,
.dashboard-root.theme-dark-blue .dash-device-body {
    background: rgba(17, 24, 35, 0.82);
    border-top-color: rgba(148, 163, 184, 0.26);
}

.dashboard-root.theme-dark .dash-indent,
.dashboard-root.theme-dark-blue .dash-indent {
    border-left-color: rgba(148, 163, 184, 0.24);
}

.dashboard-root.theme-dark .dash-device-header.offline,
.dashboard-root.theme-dark-blue .dash-device-header.offline {
    background: rgba(197, 34, 31, 0.08);
}

.dashboard-root.theme-dark .dash-card-name,
.dashboard-root.theme-dark-blue .dash-card-name {
    color: var(--dash-gray-900);
}

.dashboard-root.theme-dark .dash-card-row-2,
.dashboard-root.theme-dark-blue .dash-card-row-2 {
    color: var(--dash-gray-700);
}

.dashboard-root.theme-dark .dash-section-header,
.dashboard-root.theme-dark-blue .dash-section-header {
    color: var(--dash-gray-500);
}

.dashboard-root.theme-dark .dash-section-header .dash-count,
.dashboard-root.theme-dark-blue .dash-section-header .dash-count {
    color: var(--dash-gray-700);
}

.dashboard-root.theme-dark .dash-side-icon-box,
.dashboard-root.theme-dark-blue .dash-side-icon-box {
    background: rgba(148, 163, 184, 0.14);
    color: var(--dash-gray-700);
}

.dashboard-root.theme-dark .dash-side-icon-box.active,
.dashboard-root.theme-dark-blue .dash-side-icon-box.active {
    background: rgba(88, 184, 201, 0.16);
    color: var(--dash-teal-dark);
}

.dashboard-root.theme-dark .dash-side-icon-box.blue,
.dashboard-root.theme-dark-blue .dash-side-icon-box.blue {
    background: rgba(99, 139, 203, 0.16);
    color: #9FC4FA;
}

.dashboard-root.theme-dark .dash-side-icon-box.green,
.dashboard-root.theme-dark-blue .dash-side-icon-box.green {
    background: rgba(48, 163, 98, 0.16);
    color: #8DE4AB;
}

.dashboard-root.theme-dark .dash-side-icon-box.yellow,
.dashboard-root.theme-dark-blue .dash-side-icon-box.yellow {
    background: rgba(176, 126, 48, 0.16);
    color: #F2C66B;
}

.dashboard-root.theme-dark .dash-side-icon-box.orange,
.dashboard-root.theme-dark-blue .dash-side-icon-box.orange {
    background: rgba(197, 68, 63, 0.16);
    color: #F6A7A3;
}

.dashboard-root.theme-dark .dash-cap-pill,
.dashboard-root.theme-dark-blue .dash-cap-pill {
    border-color: transparent;
}

.dashboard-root.theme-dark .dash-cap-pill[style*="background"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="background"] {
    color: var(--dash-gray-700) !important;
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

.dashboard-root.theme-dark .dash-cap-pill[style*="#E0F7FA"],
.dashboard-root.theme-dark .dash-cap-pill[style*="#e0f7fa"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#E0F7FA"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#e0f7fa"] {
    color: #98D4E0 !important;
    background: rgba(88, 184, 201, 0.14) !important;
    border-color: rgba(88, 184, 201, 0.3) !important;
}

.dashboard-root.theme-dark .dash-cap-pill[style*="#E6F4EA"],
.dashboard-root.theme-dark .dash-cap-pill[style*="#e6f4ea"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#E6F4EA"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#e6f4ea"] {
    color: #9FE3B5 !important;
    background: rgba(30, 142, 62, 0.14) !important;
    border-color: rgba(30, 142, 62, 0.3) !important;
}

.dashboard-root.theme-dark .dash-cap-pill[style*="#FEF7E0"],
.dashboard-root.theme-dark .dash-cap-pill[style*="#fef7e0"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#FEF7E0"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#fef7e0"] {
    color: #E9C48A !important;
    background: rgba(176, 96, 0, 0.14) !important;
    border-color: rgba(176, 96, 0, 0.3) !important;
}

.dashboard-root.theme-dark .dash-cap-pill[style*="#F1F3F4"],
.dashboard-root.theme-dark .dash-cap-pill[style*="#f1f3f4"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#F1F3F4"],
.dashboard-root.theme-dark-blue .dash-cap-pill[style*="#f1f3f4"] {
    color: #C8D2DE !important;
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

.dashboard-root.theme-dark .dash-cap-pill.teal,
.dashboard-root.theme-dark-blue .dash-cap-pill.teal {
    background: rgba(88, 184, 201, 0.14);
    color: #98D4E0;
}

.dashboard-root.theme-dark .dash-cap-pill.green,
.dashboard-root.theme-dark-blue .dash-cap-pill.green {
    background: rgba(30, 142, 62, 0.14);
    color: #9FE3B5;
}

.dashboard-root.theme-dark .dash-cap-pill.yellow,
.dashboard-root.theme-dark-blue .dash-cap-pill.yellow {
    background: rgba(176, 96, 0, 0.14);
    color: #E9C48A;
}

.dashboard-root.theme-dark .dash-cap-pill.gray,
.dashboard-root.theme-dark-blue .dash-cap-pill.gray {
    background: rgba(148, 163, 184, 0.14);
    color: #C8D2DE;
}

.dashboard-root.theme-dark .status-pill,
.dashboard-root.theme-dark-blue .status-pill {
    border: 1px solid transparent;
}

.dashboard-root.theme-dark .status-pill.online,
.dashboard-root.theme-dark .status-pill.home,
.dashboard-root.theme-dark-blue .status-pill.online,
.dashboard-root.theme-dark-blue .status-pill.home {
    color: #9FE3B5;
    background: rgba(30, 142, 62, 0.14);
    border-color: rgba(30, 142, 62, 0.3);
}

.dashboard-root.theme-dark .status-pill.offline,
.dashboard-root.theme-dark .status-pill.shutoff,
.dashboard-root.theme-dark-blue .status-pill.offline,
.dashboard-root.theme-dark-blue .status-pill.shutoff {
    color: #F2B2AE;
    background: rgba(197, 34, 31, 0.14);
    border-color: rgba(197, 34, 31, 0.3);
}

.dashboard-root.theme-dark .status-pill.alert,
.dashboard-root.theme-dark .status-pill.bypass,
.dashboard-root.theme-dark-blue .status-pill.alert,
.dashboard-root.theme-dark-blue .status-pill.bypass {
    color: #E9C48A;
    background: rgba(176, 96, 0, 0.14);
    border-color: rgba(176, 96, 0, 0.3);
}

.dashboard-root.theme-dark .status-pill.away,
.dashboard-root.theme-dark .status-pill.standby,
.dashboard-root.theme-dark-blue .status-pill.away,
.dashboard-root.theme-dark-blue .status-pill.standby {
    color: #A7C6F8;
    background: rgba(25, 103, 210, 0.14);
    border-color: rgba(25, 103, 210, 0.3);
}

.dashboard-root.theme-dark .type-badge,
.dashboard-root.theme-dark-blue .type-badge {
    background: rgba(148, 163, 184, 0.12);
}

.dashboard-root.theme-dark [style*="background: white"],
.dashboard-root.theme-dark [style*="background: #fff"],
.dashboard-root.theme.dark [style*="background: #FFF"],
.dashboard-root.theme-dark [style*="background: #FFFFFF"],
.dashboard-root.theme-dark [style*="background: #f8f9fa"],
.dashboard-root.theme-dark [style*="background: #F8F9FA"],
.dashboard-root.theme-dark-blue [style*="background: white"],
.dashboard-root.theme-dark-blue [style*="background: #fff"],
.dashboard-root.theme-dark-blue [style*="background: #FFF"],
.dashboard-root.theme-dark-blue [style*="background: #FFFFFF"],
.dashboard-root.theme-dark-blue [style*="background: #f8f9fa"],
.dashboard-root.theme-dark-blue [style*="background: #F8F9FA"] {
    background: var(--dash-white) !important;
}

.dashboard-root.theme-dark [style*="background: #E8EAED"],
.dashboard-root.theme-dark [style*="background: #e8eaed"],
.dashboard-root.theme-dark-blue [style*="background: #E8EAED"],
.dashboard-root.theme-dark-blue [style*="background: #e8eaed"] {
    background: var(--dash-gray-200) !important;
}

.dashboard-root.theme-dark [style*="border: 1px solid #E8EAED"],
.dashboard-root.theme-dark [style*="border: 1px solid #e8eaed"],
.dashboard-root.theme-dark [style*="border-bottom: 1px solid #E8EAED"],
.dashboard-root.theme-dark [style*="border-bottom: 1px solid #e8eaed"],
.dashboard-root.theme-dark-blue [style*="border: 1px solid #E8EAED"],
.dashboard-root.theme-dark-blue [style*="border: 1px solid #e8eaed"],
.dashboard-root.theme-dark-blue [style*="border-bottom: 1px solid #E8EAED"],
.dashboard-root.theme-dark-blue [style*="border-bottom: 1px solid #e8eaed"] {
    border-color: var(--dash-gray-200) !important;
}

.dashboard-root.theme-dark [style*="color: #202124"],
.dashboard-root.theme-dark-blue [style*="color: #202124"] {
    color: var(--dash-gray-900) !important;
}

.dashboard-root.theme-dark [style*="color: #5F6368"],
.dashboard-root.theme-dark-blue [style*="color: #5F6368"] {
    color: var(--dash-gray-700) !important;
}

.dashboard-root.theme-dark [style*="color: #9AA0A6"],
.dashboard-root.theme-dark-blue [style*="color: #9AA0A6"] {
    color: var(--dash-gray-500) !important;
}

.dashboard-root.theme-dark .dash-connect-host .details-box,
.dashboard-root.theme-dark .dash-connect-host .details-box .d-flex,
.dashboard-root.theme-dark-blue .dash-connect-host .details-box,
.dashboard-root.theme-dark-blue .dash-connect-host .details-box .d-flex {
    background: var(--dash-white) !important;
    border-color: var(--dash-gray-200) !important;
}

.dashboard-root.theme-dark .drawer-loading-overlay,
.dashboard-root.theme-dark-blue .drawer-loading-overlay {
    background: rgba(9, 13, 18, 0.72);
}

.compact-grid-header-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
}

.compact-grid-header-btn span {
    font-size: 10px;
    color: var(--dash-gray-500);
}

.compact-grid-filter-row {
    background: var(--dash-white);
    border-bottom: 1px solid var(--dash-gray-200);
}

.compact-grid-filter {
    min-width: 120px;
    padding: 6px 8px;
    font-size: 11px;
    height: 30px;
}

.compact-grid-filter-clear {
    min-width: 60px;
}


.scheduler-top-overlay {
    z-index: 1100;
    backdrop-filter: blur(1px);
}

.scheduler-top-drawer {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, calc(100vw - 32px));
    max-height: min(84vh, 900px);
    z-index: 1101;
    border: 1px solid #E8EAED;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: var(--dash-white);
    box-shadow: 0 20px 46px rgba(17, 24, 39, 0.26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scheduler-top-drawer-in 220ms ease-out;
}

.scheduler-top-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #E8EAED;
    background: #F8F9FA;
}

.scheduler-top-drawer-title {
    font-size: 14px;
    font-weight: 700;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheduler-top-drawer-close {
    flex-shrink: 0;
}

.scheduler-top-drawer-body {
    overflow: auto;
    flex: 1;
    padding: 10px;
}

.scheduler-top-drawer-body .scheduler-new-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.scheduler-top-drawer-body .scheduler-new-head {
    border-radius: 12px;
    border: 1px solid var(--dash-gray-200);
    margin-bottom: 10px;
}

.dashboard-root.theme-gray .scheduler-top-drawer-header {
    background: var(--dash-gray-50);
    border-bottom-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .scheduler-top-drawer,
.dashboard-root.theme-dark-blue .scheduler-top-drawer {
    border-color: var(--dash-gray-200);
    box-shadow: 0 22px 44px rgba(3, 7, 12, 0.55);
}

.dashboard-root.theme-dark .scheduler-top-drawer-header,
.dashboard-root.theme-dark-blue .scheduler-top-drawer-header {
    background: var(--dash-gray-100);
    border-bottom-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .scheduler-top-drawer-title,
.dashboard-root.theme-dark-blue .scheduler-top-drawer-title {
    color: var(--dash-gray-900);
}

@keyframes scheduler-top-drawer-in {
    from {
        opacity: 0;
        transform: translate(-50%, -16px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 1024px) {
    .scheduler-top-drawer {
        width: calc(100vw - 20px);
        max-height: 88vh;
        border-radius: 0 0 14px 14px;
    }
}


.scheduler-new-shell {
    border: 1px solid var(--dash-gray-200);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 251, 252, 0.6) 0%, var(--dash-white) 100%);
    box-shadow: 0 8px 20px rgba(32, 33, 36, 0.06);
    overflow: hidden;
}

.scheduler-new-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--dash-gray-200);
    background: rgba(255, 255, 255, 0.75);
}

.scheduler-new-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.scheduler-new-head-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.scheduler-new-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--dash-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scheduler-new-head-icon img {
    width: 17px;
    height: 17px;
}

.scheduler-new-head-caption {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dash-gray-500);
    font-weight: 700;
}

.scheduler-new-head-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.scheduler-new-head-chip {
    font-size: 11px;
    font-weight: 700;
    color: var(--dash-teal-dark);
    background: var(--dash-teal-light);
    border: 1px solid rgba(0, 151, 167, 0.25);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.scheduler-new-head-subtitle {
    margin-top: 8px;
    font-size: 11px;
    color: var(--dash-gray-600);
}

.scheduler-new-body {
    padding: 10px;
}

.scheduler-new-tabstrip-wrapper {
    padding: 0;
}

.scheduler-new-tabstrip .k-tabstrip-items {
    border: 0;
    gap: 6px;
    padding-bottom: 8px;
    justify-content: center;
}

.scheduler-new-tabstrip .k-item {
    border: 1px solid var(--dash-gray-200);
    border-radius: 999px;
    background: var(--dash-white);
}

.scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab {
    border-color: rgba(0, 151, 167, 0.35);
    background: #F0FBFD;
}

.scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab .k-link {
    color: var(--dash-teal-dark);
}

.scheduler-new-tabstrip .k-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-gray-700);
    padding: 6px 12px;
}

.scheduler-new-tabstrip .k-active {
    border-color: rgba(0, 151, 167, 0.35);
    background: var(--dash-teal-light);
}

.scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab.k-active {
    border-color: rgba(0, 151, 167, 0.55);
    background: #DDF7FA;
}

.dashboard-root.theme-gray .scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab {
    background: #EAF3F7;
    border-color: rgba(96, 125, 139, 0.4);
}

.dashboard-root.theme-gray .scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab .k-link {
    color: var(--dash-teal-dark);
}

.dashboard-root.theme-gray .scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab.k-active {
    background: #DFECF2;
    border-color: rgba(96, 125, 139, 0.55);
}

.scheduler-new-tabstrip .k-active .k-link {
    color: var(--dash-teal-dark);
}

.scheduler-new-tabstrip .k-tabstrip-content {
    background: transparent;
    border: 0;
    padding: 4px 0 0;
}

.scheduler-new-day-list {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.scheduler-new-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #E7EBEE;
    border-radius: 12px;
    background: var(--dash-white);
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.scheduler-new-card:hover {
    border-color: rgba(0, 151, 167, 0.35);
    box-shadow: 0 6px 16px rgba(0, 151, 167, 0.09);
    transform: translateY(-1px);
}

.scheduler-new-card-mode {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dash-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scheduler-new-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.scheduler-new-card-content-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.scheduler-new-card-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-gray-900);
}

.scheduler-new-card-mode-pill {
    display: inline-flex;
    width: fit-content;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid transparent;
}

.scheduler-new-card-mode-pill.mode-home {
    color: #1E8E3E;
    background: #E6F4EA;
    border-color: rgba(30, 142, 62, 0.22);
}

.scheduler-new-card-mode-pill.mode-away {
    color: #B06000;
    background: #FEF7E0;
    border-color: rgba(176, 96, 0, 0.22);
}

.scheduler-new-card-mode-pill.mode-shutoff {
    color: #C5221F;
    background: #FCE8E6;
    border-color: rgba(197, 34, 31, 0.22);
}

.scheduler-new-card-mode-pill.mode-bypass {
    color: #1967D2;
    background: #E8F0FE;
    border-color: rgba(25, 103, 210, 0.22);
}

.dashboard-root.theme-gray .scheduler-new-card-mode-pill.mode-home {
    color: #1E8E3E;
    background: #E6F4EA;
    border-color: rgba(30, 142, 62, 0.26);
}

.dashboard-root.theme-gray .scheduler-new-card-mode-pill.mode-away {
    color: #1967D2;
    background: #E8F0FE;
    border-color: rgba(25, 103, 210, 0.26);
}

.dashboard-root.theme-gray .scheduler-new-card-mode-pill.mode-shutoff {
    color: #C5221F;
    background: #FCE8E6;
    border-color: rgba(197, 34, 31, 0.26);
}

.dashboard-root.theme-gray .scheduler-new-card-mode-pill.mode-bypass {
    color: #B06000;
    background: #FEF7E0;
    border-color: rgba(176, 96, 0, 0.26);
}

.dashboard-root.theme-dark .scheduler-new-card-mode-pill.mode-home,
.dashboard-root.theme-dark-blue .scheduler-new-card-mode-pill.mode-home {
    color: #9FE3B5;
    background: rgba(30, 142, 62, 0.14);
    border-color: rgba(30, 142, 62, 0.3);
}

.dashboard-root.theme-dark .scheduler-new-card-mode-pill.mode-away,
.dashboard-root.theme-dark-blue .scheduler-new-card-mode-pill.mode-away {
    color: #A7C6F8;
    background: rgba(25, 103, 210, 0.14);
    border-color: rgba(25, 103, 210, 0.3);
}

.dashboard-root.theme-dark .scheduler-new-card-mode-pill.mode-shutoff,
.dashboard-root.theme-dark-blue .scheduler-new-card-mode-pill.mode-shutoff {
    color: #F2B2AE;
    background: rgba(197, 34, 31, 0.14);
    border-color: rgba(197, 34, 31, 0.3);
}

.dashboard-root.theme-dark .scheduler-new-card-mode-pill.mode-bypass,
.dashboard-root.theme-dark-blue .scheduler-new-card-mode-pill.mode-bypass {
    color: #E9C48A;
    background: rgba(176, 96, 0, 0.14);
    border-color: rgba(176, 96, 0, 0.3);
}

.scheduler-new-card-content-actions {
    flex-shrink: 0;
}

.scheduler-new-card-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--dash-teal-dark);
}

.scheduler-new-card-time-main {
    font-size: 12px;
    font-weight: 800;
}

.scheduler-new-card-time-hint {
    font-size: 10px;
    color: var(--dash-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.scheduler-new-arrow {
    color: var(--dash-teal);
}

.scheduler-new-empty {
    margin-top: 8px;
    padding: 16px;
    border: 1px dashed var(--dash-gray-200);
    border-radius: 10px;
    background: #FBFCFD;
    text-align: center;
    font-size: 12px;
    color: var(--dash-gray-500);
}

.scheduler-new-add-wrap {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.scheduler-new-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.scheduler-new-popup-box {
    width: min(500px, calc(100% - 24px));
    border-radius: 14px;
    overflow: hidden;
    background: var(--dash-white);
    border: 1px solid var(--dash-gray-200);
    box-shadow: 0 20px 34px rgba(17, 24, 39, 0.22);
}

.scheduler-new-popup-head {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--dash-gray-200);
    background: #F8FBFC;
}

.scheduler-new-popup-head-content {
    min-width: 0;
}

.scheduler-new-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-gray-900);
}

.scheduler-new-popup-subtitle {
    margin-top: 3px;
    font-size: 11px;
    color: var(--dash-gray-600);
}

.scheduler-new-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dash-gray-200);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--dash-white);
    color: var(--dash-gray-900);
    font-weight: 700;
}

.scheduler-new-day-badge img {
    width: 18px;
    height: 18px;
}

.scheduler-new-popup-body {
    padding: 10px 14px;
    display: grid;
    gap: 8px;
}

.scheduler-new-popup-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--dash-gray-200);
    border-radius: 10px;
    background: #FCFDFD;
}

.scheduler-new-popup-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--dash-gray-700);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.scheduler-new-popup-editor {
    display: flex;
    justify-content: flex-end;
}

.scheduler-new-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--dash-gray-200);
    background: #F8FBFC;
}

.scheduler-new-save-btn {
    background: var(--dash-teal);
    color: #FFFFFF;
    border: none;
}

.scheduler-new-shell .scheduler-new-switch,
.scheduler-new-popup-box .scheduler-new-switch {
    transform: scale(0.95);
}

.scheduler-new-shell .scheduler-new-switch .k-switch-track,
.scheduler-new-popup-box .scheduler-new-switch .k-switch-track {
    background: var(--dash-gray-300) !important;
    border-color: var(--dash-gray-300) !important;
}

.scheduler-new-shell .scheduler-new-switch .k-switch-thumb,
.scheduler-new-popup-box .scheduler-new-switch .k-switch-thumb {
    background: var(--dash-white) !important;
}

.scheduler-new-shell .scheduler-new-switch.k-switch-on .k-switch-track,
.scheduler-new-popup-box .scheduler-new-switch.k-switch-on .k-switch-track {
    background: var(--dash-teal) !important;
    border-color: var(--dash-teal) !important;
}

.scheduler-new-popup-editor .k-input,
.scheduler-new-popup-editor .k-picker,
.scheduler-new-popup-editor .k-picker-md,
.scheduler-new-popup-editor .k-dropdownlist,
.scheduler-new-popup-editor .k-dropdownlist-md,
.scheduler-new-popup-editor .k-input-inner {
    border-color: var(--dash-gray-300) !important;
    color: var(--dash-gray-900) !important;
    background: var(--dash-white) !important;
}

.scheduler-new-popup-editor .k-picker:focus-within,
.scheduler-new-popup-editor .k-dropdownlist:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.20) !important;
    border-color: var(--dash-teal) !important;
}

.dashboard-root.theme-dark .scheduler-new-shell,
.dashboard-root.theme-dark-blue .scheduler-new-shell {
    background: linear-gradient(180deg, rgba(27, 36, 48, 0.92) 0%, var(--dash-white) 100%);
}

.dashboard-root.theme-gray .scheduler-new-shell {
    background: linear-gradient(180deg, rgba(236, 239, 241, 0.92) 0%, var(--dash-white) 100%);
}

.dashboard-root.theme-dark .scheduler-new-card,
.dashboard-root.theme-dark-blue .scheduler-new-card {
    background: var(--dash-white);
    box-shadow: none;
    border-color: rgba(148, 163, 184, 0.26);
}

.dashboard-root.theme-dark .scheduler-new-card:hover,
.dashboard-root.theme-dark-blue .scheduler-new-card:hover {
    border-color: rgba(88, 184, 201, 0.5);
    box-shadow: 0 8px 18px rgba(3, 7, 12, 0.35);
}

.dashboard-root.theme-dark .scheduler-new-card-mode,
.dashboard-root.theme-dark-blue .scheduler-new-card-mode {
    background: rgba(88, 184, 201, 0.18);
}

.dashboard-root.theme-dark .scheduler-new-popup-overlay,
.dashboard-root.theme-dark-blue .scheduler-new-popup-overlay {
    background: rgba(3, 8, 14, 0.65);
}

.dashboard-root.theme-dark .scheduler-new-popup-head,
.dashboard-root.theme-dark .scheduler-new-popup-actions,
.dashboard-root.theme-dark-blue .scheduler-new-popup-head,
.dashboard-root.theme-dark-blue .scheduler-new-popup-actions {
    background: var(--dash-gray-100);
}

.dashboard-root.theme-gray .scheduler-new-head {
    background: rgba(236, 239, 241, 0.9);
    border-bottom-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .scheduler-new-head,
.dashboard-root.theme-dark-blue .scheduler-new-head {
    background: rgba(20, 25, 31, 0.92);
    border-bottom-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .scheduler-new-head-subtitle,
.dashboard-root.theme-dark-blue .scheduler-new-head-subtitle {
    color: var(--dash-gray-500);
}

.dashboard-root.theme-dark .scheduler-new-empty,
.dashboard-root.theme-dark-blue .scheduler-new-empty {
    background: rgba(20, 25, 31, 0.72);
    border-color: var(--dash-gray-300);
    color: var(--dash-gray-500);
}

.dashboard-root.theme-gray .scheduler-new-empty {
    background: #EEF2F5;
    border-color: var(--dash-gray-200);
}

.dashboard-root.theme-dark .scheduler-new-popup-row,
.dashboard-root.theme-dark-blue .scheduler-new-popup-row {
    background: var(--dash-gray-50);
}

.dashboard-root.theme-dark .scheduler-new-tabstrip .k-item,
.dashboard-root.theme-dark-blue .scheduler-new-tabstrip .k-item {
    background: var(--dash-gray-50);
}

.dashboard-root.theme-dark .scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab,
.dashboard-root.theme-dark-blue .scheduler-new-tabstrip .k-item.scheduler-new-event-day-tab {
    background: rgba(88, 184, 201, 0.16);
    border-color: rgba(88, 184, 201, 0.35);
}

.dashboard-root.theme-dark .scheduler-new-shell .scheduler-new-switch .k-switch-track,
.dashboard-root.theme-dark .scheduler-new-popup-box .scheduler-new-switch .k-switch-track,
.dashboard-root.theme-dark-blue .scheduler-new-shell .scheduler-new-switch .k-switch-track,
.dashboard-root.theme-dark-blue .scheduler-new-popup-box .scheduler-new-switch .k-switch-track {
    background: var(--dash-gray-300) !important;
    border-color: var(--dash-gray-300) !important;
}

.dashboard-root.theme-dark .scheduler-new-shell .scheduler-new-switch.k-switch-on .k-switch-track,
.dashboard-root.theme-dark .scheduler-new-popup-box .scheduler-new-switch.k-switch-on .k-switch-track,
.dashboard-root.theme-dark-blue .scheduler-new-shell .scheduler-new-switch.k-switch-on .k-switch-track,
.dashboard-root.theme-dark-blue .scheduler-new-popup-box .scheduler-new-switch.k-switch-on .k-switch-track {
    background: rgba(88, 184, 201, 0.55) !important;
    border-color: rgba(88, 184, 201, 0.6) !important;
}

.dashboard-root.theme-dark .scheduler-new-popup-editor .k-input,
.dashboard-root.theme-dark .scheduler-new-popup-editor .k-picker,
.dashboard-root.theme-dark .scheduler-new-popup-editor .k-dropdownlist,
.dashboard-root.theme-dark .scheduler-new-popup-editor .k-input-inner,
.dashboard-root.theme-dark-blue .scheduler-new-popup-editor .k-input,
.dashboard-root.theme-dark-blue .scheduler-new-popup-editor .k-picker,
.dashboard-root.theme-dark-blue .scheduler-new-popup-editor .k-dropdownlist,
.dashboard-root.theme-dark-blue .scheduler-new-popup-editor .k-input-inner {
    background: var(--dash-gray-50) !important;
    border-color: var(--dash-gray-300) !important;
    color: var(--dash-gray-900) !important;
}

.dashboard-root.theme-dark .scheduler-new-tabstrip .k-link,
.dashboard-root.theme-dark-blue .scheduler-new-tabstrip .k-link {
    color: var(--dash-gray-700);
}

.dashboard-root.theme-dark .scheduler-new-tabstrip .k-active .k-link,
.dashboard-root.theme-dark-blue .scheduler-new-tabstrip .k-active .k-link {
    color: var(--dash-teal-dark);
}

/* Login page */
.login-page {
    min-height: 100vh;
    margin: -20px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #F7FAFC 0%, #EEF5F7 100%);
}

.login-shell {
    width: 100%;
    max-width: 460px;
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #E6ECEF;
    box-shadow: 0 8px 30px rgba(18, 42, 66, 0.08);
    background: #FFFFFF;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.login-form h4 {
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: #12232E;
}

.login-form-subtitle {
    text-align: center;
    font-size: 13px;
    color: #5B6A74;
    margin: 6px 0 18px;
}

.login-form .form-control {
    border-radius: 10px;
    border: 1px solid #D8E1E7;
    background: #FBFCFD;
}

.login-form .form-control:focus {
    border-color: rgba(0, 136, 153, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 153, 0.12);
}

.remember-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.remember-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #394B57;
}

.wrong-credential-row {
    text-align: center;
    margin-bottom: 8px;
}

.login-actions {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.forgot-link,
.register-link {
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}

.forgot-link {
    color: var(--dash-teal);
}

.register-link {
    color: #354754;
}

.button-login {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--dash-teal);
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 16px;
}

.button-login:hover {
    background: #007A89;
}

.password-wrapper .pwd-toggle {
    border: 0;
    background: transparent;
}

.theme-gray .login-page {
    background: linear-gradient(180deg, #F4F6F8 0%, #EAEFF3 100%);
}

.theme-gray .login-card {
    background: #F3F6F8;
    border-color: #BFC8D2;
}

.theme-gray .login-form-subtitle,
.theme-gray .remember-label,
.theme-gray .register-link {
    color: #4F5E68;
}

.theme-dark .login-page {
    background: linear-gradient(180deg, #111720 0%, #0C1119 100%);
}

.theme-dark .login-card {
    background: #1B2430;
    border-color: #2C3A4C;
    box-shadow: none;
}

.theme-dark .login-form h4 {
    color: #F4F8FD;
}

.theme-dark .login-form-subtitle,
.theme-dark .remember-label,
.theme-dark .register-link {
    color: #C4CFDA;
}

.theme-dark .login-form .form-control {
    background: #121A24;
    border-color: #2A3A4C;
    color: #E8F0F8;
}

.theme-dark-blue .login-page {
    background: linear-gradient(180deg, #0E1C30 0%, #0A1524 100%);
}

.theme-dark-blue .login-card {
    background: #16263A;
    border-color: #284363;
    box-shadow: none;
}

.theme-dark-blue .login-form h4 {
    color: #FFFFFF;
}

.theme-dark-blue .login-form-subtitle,
.theme-dark-blue .remember-label,
.theme-dark-blue .register-link {
    color: #C9D9EA;
}

.theme-dark-blue .login-form .form-control {
    background: #0F1B2D;
    border-color: #2D4A6C;
    color: #E9F2FB;
}

@media (max-width: 680px) {
    .login-page {
        padding: 14px;
        margin: -12px;
    }

    .login-card {
        padding: 18px;
    }
}