/* M3.2.1 · Shared Component System v19 -----------------------------------
 * Canonical component layer. This replaces the v18 component tail.
 * Legacy page classes remain for layout/business compatibility; ui-* classes
 * now own the shared product language.
 */

/* ------------------------------------------------------------------------
   PageHeader
   ------------------------------------------------------------------------ */
.ui-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

.ui-page-header > :first-child {
    min-width: 0;
}

.ui-page-header h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.ui-page-header > :last-child {
    flex-shrink: 0;
}

/* ------------------------------------------------------------------------
   SectionHeader
   ------------------------------------------------------------------------ */
.ui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ds-line, var(--line-soft));
}

.ui-section-header > :first-child {
    min-width: 0;
}

.ui-section-header h2,
.ui-section-header .panel-title {
    margin-top: 0;
    color: var(--text-primary);
    letter-spacing: -.016em;
}

/* ------------------------------------------------------------------------
   StatGrid / StatCard
   ------------------------------------------------------------------------ */
.ui-stat-grid {
    align-items: stretch;
}

.ui-stat-card {
    position: relative;
    min-width: 0;
    isolation: isolate;
}

.ui-stat-card :is(
    .device-stat-value,
    .detail-stat-value,
    .settings-overview-value,
    .fleet-summary-value
),
.ui-stat-card > strong {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------
   FilterBar
   ------------------------------------------------------------------------ */
.ui-filter-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ui-filter-bar :is(input, select, button) {
    min-height: 38px;
}

/* ------------------------------------------------------------------------
   StatusChip
   ------------------------------------------------------------------------ */
.ui-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------
   TableShell
   ------------------------------------------------------------------------ */
.ui-table-shell {
    position: relative;
    overflow: auto;
    border: 1px solid var(--ds-border-soft, var(--glass-white-46));
    border-radius: var(--ds-radius-card, 14px);
    background: var(--glass-white-42);
    box-shadow: inset 0 1px 0 var(--glass-white-48);
    scrollbar-gutter: stable;
}

.ui-table-shell table {
    width: 100%;
    background: transparent;
}

.ui-table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--surface-table-head) 72%, white);
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    backdrop-filter: blur(var(--blur-glass-md));
}

.ui-table-shell tbody tr:last-child td {
    border-bottom-color: transparent;
}

/* ------------------------------------------------------------------------
   EmptyState / LoadingState
   ------------------------------------------------------------------------ */
.ui-empty-state {
    text-align: center;
    color: var(--text-secondary);
}

.ui-empty-state:not(td) {
    min-height: 76px;
}

td.ui-empty-state {
    height: 72px;
    vertical-align: middle;
}

.ui-loading-state {
    position: relative;
    overflow: hidden;
}

@keyframes m321-loading-soft-sweep {
    0% { transform: translateX(-130%); opacity: 0; }
    35% { opacity: .28; }
    70% { opacity: .18; }
    100% { transform: translateX(130%); opacity: 0; }
}

.ui-loading-state::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            105deg,
            transparent 28%,
            var(--glass-highlight-54) 48%,
            transparent 68%
        );
    animation:
        m321-loading-soft-sweep
        1.8s
        ease-in-out
        infinite;
}

/* ------------------------------------------------------------------------
   Dialog / Modal
   ------------------------------------------------------------------------ */
.ui-dialog-backdrop {
    --ui-dialog-backdrop: var(--dialog-backdrop);
}

.ui-dialog-surface {
    border: 1px solid var(--trend-card-border);
    border-radius: var(--radius-glass-lg);
    background:
        linear-gradient(
            150deg,
            var(--glass-white-88),
            var(--dialog-surface-end)
        );
    box-shadow:
        var(--dialog-shadow);
    -webkit-backdrop-filter: blur(var(--blur-glass-panel)) saturate(112%);
    backdrop-filter: blur(var(--blur-glass-panel)) saturate(112%);
}

dialog.ui-dialog-surface::backdrop {
    background: var(--ui-dialog-backdrop);
    -webkit-backdrop-filter: blur(var(--blur-glass-xs));
    backdrop-filter: blur(var(--blur-glass-xs));
}

/* Existing non-native modal containers. */
.ui-dialog-backdrop[aria-hidden="false"],
.ui-dialog-backdrop.show {
    background: var(--ui-dialog-backdrop);
    -webkit-backdrop-filter: blur(var(--blur-glass-xs));
    backdrop-filter: blur(var(--blur-glass-xs));
}

/* Normalize dialog heads/actions across account/device/notification/restore. */
.ui-dialog-surface :is(
    .dialog-head,
    .device-dialog-head,
    .notification-dialog-head
) {
    border-bottom: 1px solid var(--line-soft);
}

.ui-dialog-surface :is(
    .dialog-actions,
    .device-dialog-actions,
    .notification-dialog-actions,
    .restore-dialog-actions
) {
    border-top-color: color-mix(in srgb, var(--border-line) 90%, transparent);
}

/* ------------------------------------------------------------------------
   Responsive component contract
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
    .ui-page-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ui-page-header > :last-child {
        max-width: 100%;
    }

    .ui-section-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ui-filter-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .ui-filter-bar > * {
        max-width: 100%;
    }

    .ui-dialog-surface {
        border-radius: var(--radius-glass-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-loading-state::after {
        animation: none;
        display: none;
    }
}

/* M3.2.1 · Device detail metric cards v24 ------------------------------
 * Canonical component rules for compact device measurement cards.
 */
/* Device detail metric-card rules -----------------------------
 * Scope: the compact metric cards on the device detail page.
 * v12 typography and v11 trend-page hierarchy are intentionally preserved.
 *
 * Visual target:
 * - less "white plastic tile", more thin frosted glass
 * - a crisp bright rim instead of a grey hard border
 * - short, soft contact shadow; no large grey halo between rows
 * - inner min/avg/max cells remain subordinate to the card
 */

/* Main metric cards. */
.detail-stat-card {
    background:
        linear-gradient(
            150deg,
            var(--glass-white-58) 0%,
            var(--glass-white-42) 48%,
            var(--detail-surface-end) 100%
        );
    border: 1px solid var(--glass-white-74);
    border-radius: var(--radius-glass-lg);
    box-shadow:
        0 8px 18px rgba(36,51,43,.042),
        0 2px 5px rgba(36,51,43,.022),
        inset 0 1px 0 var(--glass-white-84),
        inset 1px 0 0 var(--glass-white-22);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    backdrop-filter: blur(12px) saturate(112%);
}

/* Remove the old generic green top stripe on these measurement cards.
 * The status/type information already exists in the card content; the stripe
 * made the glass edge look mechanically segmented.
 */
.detail-stat-card::before {
    opacity: 0;
    height: 0;
}

/* Give the card a very subtle lower-edge grounding without turning it into
 * a second border.
 */
.detail-stat-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        var(--detail-lower-edge) 22%,
        var(--detail-lower-edge) 78%,
        transparent
    );
    opacity: .42;
}

/* Nested min / average / max capsules: softer than the outer pane. */
.detail-stat-card .detail-stat-mini,
.detail-stat-card .stat-mini,
.detail-stat-card .mini-stat,
.detail-stat-card .metric-stat,
.detail-stat-card .metric-summary > *,
.detail-stat-card .stat-grid > * {
    background: var(--detail-subcard-surface);
    border: 1px solid var(--glass-white-48);
    border-radius: 11px;
    box-shadow:
        inset 0 1px 0 var(--glass-white-56),
        0 1px 3px rgba(39,54,46,.012);
    -webkit-backdrop-filter: blur(var(--blur-glass-sm)) saturate(105%);
    backdrop-filter: blur(var(--blur-glass-sm)) saturate(105%);
}

/* The horizontal divider should be quieter than the glass perimeter. */
.detail-stat-card hr,
.detail-stat-card .divider,
.detail-stat-card .stat-divider {
    border-color: var(--detail-divider);
    background: var(--detail-divider);
}

/* Keep text crisp against the more transparent pane. */
.detail-stat-card .detail-stat-label {
    color: var(--detail-text-label);
}

.detail-stat-card .detail-stat-value,
.detail-stat-card .metric-value {
    color: var(--detail-text-value);
}

/* Static hover remains deliberately restrained in v13.
 * The full motion language will be introduced separately in v14.
 */
.detail-stat-card:hover {
    transform: none;
    background:
        linear-gradient(
            150deg,
            var(--detail-hover-top) 0%,
            var(--detail-hover-mid) 48%,
            var(--detail-hover-end) 100%
        );
    border-color: var(--trend-card-border-hover);
    box-shadow:
        0 9px 20px rgba(36,51,43,.046),
        0 2px 5px rgba(36,51,43,.022),
        inset 0 1px 0 var(--glass-white-88),
        inset 1px 0 0 var(--glass-white-24);
}

/* The large current-device summary above the metric grid should be a little
 * calmer than the measurement cards so it reads as a parent information pane.
 */
.detail-header + .panel,
.detail-device-summary,
.current-device-card {
    box-shadow:
        0 7px 20px rgba(36,51,43,.032),
        0 1px 4px rgba(36,51,43,.016),
        inset 0 1px 0 var(--glass-white-62);
}

/* Narrow screens: keep the same hierarchy, just reduce blur/shadow cost. */
@media (max-width: 760px) {
    .detail-stat-card {
        border-radius: var(--radius-glass-md);
        box-shadow:
            0 6px 15px rgba(36,51,43,.038),
            0 1px 4px rgba(36,51,43,.020),
            inset 0 1px 0 var(--glass-white-80);
        -webkit-backdrop-filter: blur(9px) saturate(108%);
        backdrop-filter: blur(9px) saturate(108%);
    }
}

/* M3.2.1 · Trend dashboard components v24
 * Canonical owner of the former consolidated trend-glass compatibility block.
 */
/* M3.2.1 · Consolidated Trend Glass v22 ----------------------------------
 * Replaces historical v5/v6/v7/v8/v10/v11 override chains.
 *
 * Architecture:
 * - global panel/card material is owned by design_system.css;
 * - trend-specific glass stays here only where dashboard semantics require it;
 * - type-group header is the calmer, whiter grouping layer;
 * - individual chart cards are the more transparent glass layer;
 * - no parent-group backdrop blur, preventing nested white haze.
 */

/* Trend group is structural only. */
.trend-sensor-group {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Group header: stable, brighter grouping surface. */
.trend-sensor-group-head {
    background:
        linear-gradient(
            180deg,
            var(--trend-group-bg-top) 0%,
            var(--trend-group-surface-end) 100%
        );
    border: 1px solid var(--glass-white-78);
    border-radius: var(--radius-glass-md);
    color: var(--trend-group-text);
    box-shadow:
        0 5px 16px rgba(38,52,45,.032),
        0 1px 4px rgba(38,52,45,.015),
        inset 0 1px 0 var(--glass-white-88);
    -webkit-backdrop-filter: blur(10px) saturate(106%);
    backdrop-filter: blur(10px) saturate(106%);
}

.trend-sensor-group-kicker,
.trend-sensor-group-head .group-kicker {
    color: var(--trend-group-kicker);
    font-size: 12px;
    font-weight: 700;
}

.trend-sensor-group-count,
.trend-sensor-group-head .group-count {
    color: var(--trend-group-count);
    font-size: 12px;
    font-weight: 700;
}

.group-toggle-label,
.trend-sensor-group-head button,
.trend-sensor-group-head .group-toggle {
    color: var(--text-accent-control);
    font-weight: 700;
    opacity: 1;
}

.trend-sensor-group-head + * {
    margin-top: 10px;
}

/* Chart card: thin translucent glass, not an opaque white tile. */
.chart-box {
    background:
        linear-gradient(
            145deg,
            var(--trend-card-bg-top) 0%,
            var(--trend-card-bg-mid) 50%,
            var(--trend-card-bg-bottom) 100%
        );
    border: 1px solid var(--trend-card-border);
    border-radius: var(--radius-glass-lg);
    background-clip: padding-box;
    overflow: hidden;
    box-shadow:
        0 4px 11px rgba(37,51,45,.027),
        0 1px 3px rgba(37,51,45,.013),
        inset 0 1px 0 var(--glass-white-80),
        inset 1px 0 0 var(--glass-highlight-21);
    -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(112%);
    backdrop-filter: blur(var(--blur-glass-card)) saturate(112%);
}

.chart-box:hover {
    background:
        linear-gradient(
            145deg,
            var(--trend-card-hover-top) 0%,
            var(--trend-card-hover-mid) 50%,
            var(--trend-card-hover-bottom) 100%
        );
    border-color: var(--trend-card-border-hover);
}

/* Remove old decorative hard edge. */
.chart-box::after {
    display: none;
}

/* Nested summary panes stay subordinate to the chart card. */
.chart-box .trend-stat,
.chart-box .range-summary > *,
.chart-box .trend-health-item {
    background: var(--trend-stat-surface);
    border-color: var(--trend-stat-border);
    box-shadow:
        inset 0 1px 0 var(--glass-white-48),
        0 2px 5px rgba(40,55,48,.012);
    -webkit-backdrop-filter: blur(var(--blur-glass-sm)) saturate(106%);
    backdrop-filter: blur(var(--blur-glass-sm)) saturate(106%);
}

.chart-box .chart-wrap {
    border-top-color: var(--trend-divider);
}

/* Trend card typography. */
.chart-box .chart-title,
.chart-box .trend-card-title {
    letter-spacing: 0;
}

.chart-box .trend-stat-label {
    color: var(--text-secondary-strong);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}

.chart-box .trend-stat-value {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.chart-box .trend-stat-value .stat-unit {
    font-size: 11.5px;
    font-weight: 600;
}

.chart-box .trend-marker-legend {
    color: var(--text-secondary-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.chart-box .trend-marker-legend strong,
.chart-box .trend-marker-legend b,
.chart-box .trend-marker-legend .count {
    font-size: 13px;
    font-weight: 720;
}

/* Crisp native HTML empty-state text. */
.chart-empty-message {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 2;
    transform: translate(-50%, -50%);
    color: #68786e;
    font-family:
        "Microsoft YaHei UI",
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans CJK SC",
        "Segoe UI",
        system-ui,
        sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.chart-empty-message[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .trend-sensor-group-head {
        border-radius: 14px;
        background:
            linear-gradient(
                180deg,
                var(--glass-white-84) 0%,
                var(--trend-group-surface-end-mobile) 100%
            );
        -webkit-backdrop-filter: blur(var(--blur-glass-md)) saturate(104%);
        backdrop-filter: blur(var(--blur-glass-md)) saturate(104%);
    }

    .chart-box {
        -webkit-backdrop-filter: blur(9px) saturate(108%);
        backdrop-filter: blur(9px) saturate(108%);
    }

    .chart-empty-message {
        font-size: 13px;
    }
}

/* M3.2.1 · Trend glass specificity fix v28.1 -----------------------------
 * common.css still owns an old high-specificity rule:
 *     body .container .chart-box { background: #fff; }
 *
 * v28 correctly removed forced declarations from canonical CSS, which exposed that
 * legacy specificity debt. The trend component now wins through semantic
 * scope rather than restoring forced declarations.
 */

.container .trend-sensor-group .chart-box {
    background:
        linear-gradient(
            145deg,
            var(--trend-card-bg-top) 0%,
            var(--trend-card-bg-mid) 50%,
            var(--trend-card-bg-bottom) 100%
        );
    border: 1px solid var(--trend-card-border);
    border-radius: var(--radius-glass-lg);
    background-clip: padding-box;
    overflow: hidden;
    box-shadow:
        0 4px 11px rgba(37,51,45,.027),
        0 1px 3px rgba(37,51,45,.013),
        inset 0 1px 0 var(--glass-white-80),
        inset 1px 0 0 var(--glass-highlight-21);
    -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(112%);
    backdrop-filter: blur(var(--blur-glass-card)) saturate(112%);
}

.container .trend-sensor-group .chart-box:hover {
    background:
        linear-gradient(
            145deg,
            var(--trend-card-hover-top) 0%,
            var(--trend-card-hover-mid) 50%,
            var(--trend-card-hover-bottom) 100%
        );
    border-color: var(--trend-card-border-hover);
}

.container .trend-sensor-group .chart-box .trend-stat,
.container .trend-sensor-group .chart-box .range-summary > *,
.container .trend-sensor-group .chart-box .trend-health-item {
    background: var(--trend-stat-surface);
    border-color: var(--trend-stat-border);
    box-shadow:
        inset 0 1px 0 var(--glass-white-48),
        0 2px 5px rgba(40,55,48,.012);
    -webkit-backdrop-filter: blur(var(--blur-glass-sm)) saturate(106%);
    backdrop-filter: blur(var(--blur-glass-sm)) saturate(106%);
}

/* Preserve the intended hierarchy:
 * group header = brighter grouping surface
 * individual sensor card = more transparent glass
 */
.container .trend-sensor-group > .trend-sensor-group-head {
    background:
        linear-gradient(
            180deg,
            var(--trend-group-bg-top) 0%,
            var(--trend-group-surface-end) 100%
        );
}