/* Dashboard based on SIM Anywhere proposal 10. */
.dashboard-page {
    --dash-blue: #2f80ff;
    --dash-green: #62bf45;
    --dash-purple: #8f55cc;
    --dash-red: #ef4444;
    --dash-text: #111827;
    --dash-muted: #65748b;
    --dash-line: #e6edf6;
    --dash-shadow: 0 10px 30px rgba(15, 23, 42, 0.055);
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
}

.dashboard-page .page-heading {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-page .page-heading__copy {
    min-width: 0;
    flex: 1;
}

.dashboard-page .page-title {
    margin: 0 0 7px !important;
    color: var(--dash-text) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
}

.dashboard-page .page-subtitle {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 13px !important;
}

.dashboard-page .page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.dashboard-page .header-action-tooltip-anchor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-page .header-action {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.dashboard-page .header-action:hover {
    background: #eef5ff;
    color: var(--dash-blue);
}

.dashboard-page .header-action .mud-icon-root {
    font-size: 1.35rem;
}

.dashboard-page .notification-action > span {
    position: absolute;
    top: -3px;
    right: -4px;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    place-items: center;
    border: 2px solid #f6f8fc;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-page .refresh-action {
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #475569 !important;
}

.dashboard-page .refresh-action:hover {
    background: #eef5ff !important;
    color: var(--dash-blue) !important;
}

.dashboard-page .loading-bar,
.dashboard-page .alerts-row {
    margin-bottom: 18px;
}

.dashboard-page .alerts-row {
    display: grid;
    gap: 10px;
}

.dashboard-page .alert-link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.dashboard-page .month-summary-section {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid var(--dash-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--dash-shadow);
}

.dashboard-page .section-header {
    margin-bottom: 18px;
}

.dashboard-page .section-header h6 {
    margin: 0 0 5px;
    color: var(--dash-text);
    font-size: 17px;
    font-weight: 800;
}

.dashboard-page .section-header p {
    margin: 0;
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-page .summary-cards-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(0, 0.88fr)
        minmax(0, 1.18fr)
        minmax(0, 0.82fr)
        minmax(0, 0.82fr)
        minmax(0, 0.98fr);
    gap: 14px;
}

.dashboard-page .summary-card {
    min-width: 0;
    min-height: 132px;
    padding: 16px;
    border: 1px solid var(--dash-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, 0.035);
}

.dashboard-page .summary-card-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.dashboard-page .summary-card h3 {
    margin: 0;
    color: var(--dash-text);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-page .active-chips-card {
    container-type: inline-size;
    min-height: 150px;
    padding: 15px;
}

.dashboard-page .active-chips-header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dashboard-page .active-chips-header > div {
    min-width: 0;
}

.dashboard-page .active-chips-header h3 {
    overflow: hidden;
    color: #0f1f4d;
    font-size: 12px;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .active-chips-header p {
    display: none;
    margin: 4px 0 0;
    color: #74819b;
    font-size: 9px;
    line-height: 1.3;
}

.dashboard-page .active-chips-main-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(180deg, #eef5ff 0%, #e7f0ff 100%);
    color: #2f80ff;
}

.dashboard-page .active-chips-main-icon .mud-icon-root {
    font-size: 1.25rem;
}

.dashboard-page .active-chips-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-page .active-chip-metric {
    min-width: 0;
    padding: 0 7px;
    border-right: 1px solid #e8eef6;
    text-align: center;
}

.dashboard-page .active-chip-metric:first-child {
    padding-left: 0;
}

.dashboard-page .active-chip-metric:last-child {
    padding-right: 0;
    border-right: 0;
}

.dashboard-page .active-chip-label {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 8px;
}

.dashboard-page .active-chip-label strong {
    overflow: hidden;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .active-chip-plan-icon {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
}

.dashboard-page .active-chip-plan-icon .mud-icon-root {
    font-size: 0.85rem;
}

.dashboard-page .active-chip-plan-icon .gold-bar-icon {
    display: block;
    width: 1rem;
    height: 1rem;
}

.dashboard-page .active-chip-metric--gold .active-chip-plan-icon {
    border-color: #f5deaf;
    background: #fff3d8;
    color: #c18b09;
}

.dashboard-page .active-chip-metric--gold .active-chip-label strong {
    color: #ad7c05;
}

.dashboard-page .active-chip-metric--diamond .active-chip-plan-icon {
    border-color: #cfe1ff;
    background: #e7f1ff;
    color: #2f80ff;
}

.dashboard-page .active-chip-metric--diamond .active-chip-label strong {
    color: #176de3;
}

.dashboard-page .active-chip-metric--total .active-chip-plan-icon {
    border-color: #e0d3ff;
    background: #efe9ff;
    color: #5d2add;
}

.dashboard-page .active-chip-metric--total .active-chip-label strong {
    color: #5120c5;
}

.dashboard-page .active-chip-value {
    display: block;
    overflow: hidden;
    color: #0f1f4d;
    font-size: clamp(0.82rem, 1.08vw, 1.12rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .active-chip-metric small {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: #74819b;
    font-size: 8px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container (min-width: 420px) {
    .dashboard-page .active-chips-card {
        padding: 18px;
    }

    .dashboard-page .active-chips-header {
        margin-bottom: 18px;
    }

    .dashboard-page .active-chips-header h3 {
        font-size: 15px;
    }

    .dashboard-page .active-chips-header p {
        display: block;
        font-size: 10px;
    }

    .dashboard-page .active-chips-main-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
    }

    .dashboard-page .active-chip-label strong {
        font-size: 11px;
    }

    .dashboard-page .active-chip-plan-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .dashboard-page .active-chip-value {
        font-size: clamp(1.1rem, 1.8vw, 1.55rem);
    }

    .dashboard-page .active-chip-metric small {
        font-size: 10px;
    }
}

.dashboard-page .summary-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.dashboard-page .summary-stats > div {
    min-width: 0;
    padding: 0 7px;
    border-right: 1px solid var(--dash-line);
}

.dashboard-page .summary-stats > div:last-child {
    border-right: 0;
}

.dashboard-page .summary-stats strong {
    display: block;
    margin-bottom: 6px;
    color: var(--dash-text);
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dashboard-page .summary-stats span {
    display: block;
    overflow: hidden;
    color: var(--dash-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .metric-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 10px;
}

.dashboard-page .metric-card .mini-icon {
    grid-row: 1;
}

.dashboard-page .metric-card h3 {
    align-self: center;
}

.dashboard-page .metric-card > strong {
    grid-column: 2;
    align-self: center;
    color: var(--dash-text);
    font-size: clamp(1.35rem, 1.75vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dashboard-page .surplus-card {
    display: flex;
    flex-direction: column;
}

.dashboard-page .surplus-card .summary-card-title {
    margin-bottom: 13px;
}

.dashboard-page .surplus-values {
    display: grid;
    min-height: 54px;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.dashboard-page .surplus-value {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    cursor: help;
    text-align: center;
}

.dashboard-page .surplus-value--plain {
    cursor: default;
}

.dashboard-page .surplus-value strong {
    display: block;
    font-size: clamp(1.12rem, 1.45vw, 1.45rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.dashboard-page .surplus-value > span {
    display: block;
    margin-top: 7px;
    color: var(--dash-muted);
    font-size: 10px;
}

.dashboard-page .surplus-divider {
    width: 1px;
    height: 42px;
    background: var(--dash-line);
}

.dashboard-page .surplus-zero {
    color: #1f2937;
}

.dashboard-page .surplus-available {
    color: #129b39;
}

.dashboard-page .surplus-exceeded {
    color: var(--dash-red);
}

.dashboard-page .mini-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
}

.dashboard-page .mini-icon .mud-icon-root,
.dashboard-page .mini-icon .mud-svg-icon {
    font-size: 1.15rem !important;
}

.dashboard-page .mini-icon.blue {
    background: #edf5ff;
    color: var(--dash-blue);
}

.dashboard-page .mini-icon.green {
    background: #eaf7e6;
    color: #129b39;
}

.dashboard-page .mini-icon.purple {
    background: #f2eafd;
    color: #8547dc;
}

.dashboard-page .mini-icon.red {
    background: #ffeded;
    color: var(--dash-red);
}

.dashboard-page .mini-icon.orange {
    background: #fff3e8;
    color: #e8791b;
}

.dashboard-page .content-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "chart1 chart1 chart1 chart1 chart2 chart2 chart2 chart2 devices devices devices devices"
        "map map map map map map map map map connection connection connection"
        "map map map map map map map map map status status status"
        "alert alert alert tech tech tech operator operator operator plan plan plan";
    gap: 14px;
}

.dashboard-page .chart-card--data { grid-area: chart1; }
.dashboard-page .chart-card--sms { grid-area: chart2; }
.dashboard-page .devices-card { grid-area: devices; }
.dashboard-page .map-card { grid-area: map; }
.dashboard-page .donut-card--alerts { grid-area: alert; }
.dashboard-page .donut-card--status { grid-area: status; }
.dashboard-page .donut-card--connectivity { grid-area: connection; }
.dashboard-page .donut-card--operators { grid-area: operator; }
.dashboard-page .donut-card--plans { grid-area: plan; }
.dashboard-page .donut-card--technology { grid-area: tech; }

.dashboard-page .map-card {
    display: flex;
    flex-direction: column;
}

.dashboard-page .map-card .leaflet-map-canvas {
    min-height: 340px;
    flex: 1;
}

.dashboard-page .panel,
.dashboard-page .donut-card {
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    border: 1px solid var(--dash-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--dash-shadow);
}

.dashboard-page .premium-donut-card {
    --premium-donut-text: #0f1f4d;
    --premium-donut-muted: #76839a;
    container-type: inline-size;
    min-height: 190px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.dashboard-page .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-page .panel-title,
.dashboard-page .donut-title {
    margin: 0 !important;
    color: #003b8f !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.dashboard-page .chart-title-block {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-page .chart-title-block > span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-page .premium-donut-card .donut-title {
    color: var(--premium-donut-text) !important;
    font-size: 13px !important;
    letter-spacing: -0.01em;
}

.dashboard-page .premium-donut-content {
    display: grid;
    grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.dashboard-page .premium-donut-visual {
    position: relative;
    display: grid;
    width: min(100%, 142px);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: var(--premium-donut-gradient);
    filter: drop-shadow(0 10px 16px rgba(47, 128, 255, 0.09));
}

.dashboard-page .premium-donut-visual::before {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.dashboard-page .premium-donut-center {
    position: relative;
    display: flex;
    width: 61%;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #e4eaf2;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 31, 77, 0.04);
}

.dashboard-page .premium-donut-total {
    color: var(--premium-donut-text);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dashboard-page .premium-donut-total--compact {
    font-size: clamp(1.1rem, 1.65vw, 1.5rem);
    letter-spacing: -0.06em;
}

.dashboard-page .premium-donut-total--dense {
    font-size: clamp(0.82rem, 1.2vw, 1.08rem);
    letter-spacing: -0.07em;
}

.dashboard-page .premium-donut-center span {
    margin-top: 4px;
    color: var(--premium-donut-muted);
    font-size: 9px;
    font-weight: 600;
}

.dashboard-page .premium-donut-legend {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.dashboard-page .premium-donut-legend-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #e9eef5;
}

.dashboard-page .premium-donut-legend-item:last-child {
    border-bottom: 0;
}

.dashboard-page .premium-donut-legend-main {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
}

.dashboard-page .premium-donut-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-top: 3px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(15, 31, 77, 0.025);
}

.dashboard-page .premium-donut-legend-copy {
    min-width: 0;
}

.dashboard-page .premium-donut-legend-copy strong,
.dashboard-page .premium-donut-legend-copy span {
    display: block;
}

.dashboard-page .premium-donut-legend-copy strong {
    overflow: hidden;
    color: #26334d;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .premium-donut-legend-copy span {
    margin-top: 2px;
    color: var(--premium-donut-muted);
    font-size: 9px;
    font-weight: 500;
}

.dashboard-page .premium-donut-pill {
    display: inline-flex;
    min-width: 43px;
    height: 23px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--pill-background);
    color: var(--pill-color);
    font-size: 9px;
    font-weight: 800;
}

@container (max-width: 330px) {
    .dashboard-page .premium-donut-content {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .dashboard-page .premium-donut-visual {
        width: 112px;
    }

    .dashboard-page .premium-donut-legend-item {
        padding: 5px 0;
    }
}

.dashboard-page .devices-card .panel-title {
    color: #e11d48 !important;
}

.dashboard-page .devices-card .table-wrap {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
}

.dashboard-page .panel-subtitle,
.dashboard-page .legend {
    color: var(--dash-muted) !important;
    font-size: 10px;
}

.dashboard-page .legend,
.dashboard-page .legend-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-page .legend-group {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-page .chart-heading-actions,
.dashboard-page .chart-zoom-controls {
    display: flex;
    align-items: center;
}

.dashboard-page .chart-heading-actions {
    gap: 10px;
}

.dashboard-page .chart-zoom-controls {
    gap: 2px;
}

.dashboard-page .chart-zoom-controls .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 8px;
    color: #64748b;
}

.dashboard-page .chart-zoom-controls .mud-icon-button:hover {
    background: #eef5ff;
    color: var(--dash-blue);
}

.dashboard-page .chart-zoom-controls .mud-icon-root {
    font-size: 1rem;
}

.dashboard-page .legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard-page .legend-dot.blue { background: var(--dash-blue); }
.dashboard-page .legend-dot.orange { background: #f59e0b; }

.dashboard-page .mud-chart {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}

.dashboard-page .mud-chart svg {
    max-width: 100%;
}

.dashboard-page .interactive-data-chart {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.dashboard-page .interactive-data-chart.is-dragging {
    cursor: grabbing;
}

.dashboard-page .table-wrap {
    max-height: 270px;
    overflow-x: hidden;
    overflow-y: auto;
}

.dashboard-page .unstable-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-size: 10px;
}

.dashboard-page .unstable-table .mud-table-container,
.dashboard-page .unstable-table table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    table-layout: fixed;
}

.dashboard-page .unstable-table thead th {
    padding: 6px 5px !important;
    border-bottom: 1px solid var(--dash-line) !important;
    color: #475569 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: none;
}

.dashboard-page .unstable-table .connections-column-header {
    width: 34px;
    padding-right: 5px !important;
    text-align: right;
}

.dashboard-page .unstable-table .device-name-column {
    width: 52%;
    min-width: 0;
}

.dashboard-page .unstable-table .device-iccid-column {
    width: 38%;
    min-width: 0;
}

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

.dashboard-page .unstable-table .device-name-column .mud-tooltip-root {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.dashboard-page .connections-header-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 6px;
    color: #64748b;
    cursor: help;
}

.dashboard-page .connections-header-icon:hover {
    background: #eef5ff;
    color: var(--dash-blue);
}

.dashboard-page .connections-header-icon .mud-icon-root {
    font-size: 0.9rem !important;
}

.dashboard-page .unstable-table tbody td {
    padding: 5px !important;
    border-bottom: 1px solid #edf2f7 !important;
    color: #2d3748 !important;
    font-size: 9px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-page .unstable-table .mono {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page .instability-high {
    color: #e11d48;
    font-weight: 800;
}

.dashboard-page .instability-mid {
    color: #d97706;
    font-weight: 800;
}

.dashboard-page .instability-low {
    color: #64748b;
}

.dashboard-page .table-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0b72e7;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-page .table-link .mud-icon-root {
    font-size: 0.9rem;
}

.dashboard-page .leaflet-map-canvas {
    display: block;
    width: 100%;
    height: 360px;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    background: #f4f7fc;
}

.dashboard-page .empty-state {
    display: flex;
    min-height: 110px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #93a1b1;
    font-size: 10px;
}

.dashboard-page .dashboard-footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0 4px;
    color: #7b8798;
    font-size: 12px;
    text-align: center;
}

.dashboard-page .dashboard-footer .secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dashboard-page .dashboard-footer svg {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

.dashboard-page .dashboard-footer .separator {
    opacity: 0.55;
    font-weight: 700;
}

@media (max-width: 1500px) {
    .dashboard-page .summary-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .current-month-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1280px) {
    .dashboard-page .content-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "chart1 chart2"
            "devices devices"
            "map map"
            "connection status"
            "alert tech"
            "operator plan";
    }

    .dashboard-page .leaflet-map-canvas {
        height: 320px;
        min-height: 320px;
    }
}

@media (max-width: 900px) {
    .dashboard-page .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-page .page-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .dashboard-page .summary-cards-grid,
    .dashboard-page .content-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-page .current-month-card {
        grid-column: auto;
    }

    .dashboard-page .content-grid {
        grid-template-areas:
            "chart1"
            "chart2"
            "devices"
            "map"
            "connection"
            "status"
            "alert"
            "tech"
            "operator"
            "plan";
    }
}

@media (max-width: 480px) {
    .dashboard-page .month-summary-section {
        padding: 15px;
    }

    .dashboard-page .summary-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dashboard-page .summary-stats > div {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid var(--dash-line);
    }

    .dashboard-page .summary-stats > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}