/* Per the Labconco style guide (style-guide.pdf), Inter is the specified typeface
   for the whole app. Self-hosted (not a Google Fonts CDN import) to keep the
   app working on offline/on-prem installs with no guaranteed outbound
   internet access. */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

/* Style guide specifies weight 800 (Extra Bold) for every heading level. Font-size
   is intentionally left unset here — every heading in the app today is a scoped
   descendant rule (.card h2, .form-section h3, etc.) that already sets its own
   size; CSS specificity applies per-property, so those rules keep their existing
   sizes while still picking up this weight/letter-spacing via the cascade. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.unauth-landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.unauth-card {
    width: min(520px, 96vw);
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 2rem 1.5rem 1.25rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.unauth-logo {
    width: min(340px, 88%);
    height: auto;
    margin: 0 auto 1rem auto;
    display: block;
}

.unauth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.unauth-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.unauth-card .btn {
    width: auto;
    min-width: 140px;
}

#unauth-error {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.unauth-powered-by {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    width: 100%;
}

.unauth-powered-logo {
    width: 60px;
    height: auto;
}

.unauth-build-version {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    min-height: 1rem;
}

/* ── User avatar chip ──────────────────────────────────────────── */
.user-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}

.user-avatar-btn:hover {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.8);
}

/* ── Profile panel ─────────────────────────────────────────────── */
.profile-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.profile-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: auto;
    max-height: 86dvh;
    width: 320px;
    max-width: 100vw;
    background: var(--card-bg);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border-color);
    border-bottom-left-radius: 10px;
}

.profile-panel.open {
    transform: translateX(0);
}

.profile-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem 1rem 1rem 1.25rem;
    background: linear-gradient(180deg, var(--brand-blue) 0%, var(--blue-green-3) 100%);
    color: var(--white);
    flex-shrink: 0;
}

.profile-panel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--white);
    letter-spacing: 0.04em;
}

.profile-panel-identity {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.profile-panel-display-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-panel-username {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.profile-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-badge-role {
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
}

.profile-badge-plan {
    background: rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.85);
}

.profile-panel-close {
    color: rgba(255, 255, 255, 0.8) !important;
    flex-shrink: 0;
    margin-top: -2px;
    margin-right: -4px;
}

.profile-panel-close:hover {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.profile-panel-body {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.profile-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.profile-field-row.is-last-visible {
    border-bottom: none;
}

.profile-field-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.profile-field-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-panel-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.profile-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.profile-broker-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.profile-build-info {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    padding: 0;
    white-space: normal;
    opacity: 0.95;
}

.profile-build-info:hover {
    color: var(--text-primary);
}

.profile-build-info:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

.profile-panel-footer .btn-danger {
    align-self: flex-end;
    min-width: 6.25rem;
}

.profile-health-section {
    margin: 0.35rem 1.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--cool-gray-9);
}

.profile-health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.profile-health-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.profile-health-refresh {
    width: 1.6rem;
    height: 1.6rem;
}

.profile-health-refresh svg {
    width: 13px;
    height: 13px;
}

.profile-health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

.profile-health-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.profile-health-left .status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.profile-health-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-health-detail {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    text-align: right;
    margin-left: 0.5rem;
}

.profile-health-detail.is-down {
    color: var(--danger-color);
    font-weight: 600;
}

.profile-health-row.is-down {
    background: color-mix(in srgb, var(--danger-color) 6%, var(--card-bg));
}

.mfa-post-reset-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--cool-gray-9) 0%, var(--white) 100%);
}

.mfa-post-reset-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mfa-post-reset-copy {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.mfa-status-pill {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--cool-gray-8);
    color: var(--cool-gray-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mfa-status-pill.is-enabled {
    background: var(--success-bg);
    color: var(--success-text);
}

.mfa-enrollment-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.mfa-setup-intro {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.mfa-step {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.mfa-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--white);
    min-height: 232px;
}

.mfa-qr-wrap.is-fallback {
    min-height: 0;
    padding: 1rem 1.1rem;
    align-items: flex-start;
    background: var(--cool-gray-9);
}

.mfa-qr-image {
    width: 180px;
    height: 180px;
    display: block;
}

.mfa-qr-wrap.is-fallback .mfa-qr-image {
    display: none !important;
}

.mfa-qr-help {
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    color: var(--text-secondary);
    max-width: 22rem;
}

.mfa-qr-wrap.is-fallback .mfa-qr-help {
    text-align: left;
    max-width: none;
}

.mfa-secret-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mfa-secret-label,
.mfa-help-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.mfa-verify-help {
    margin-top: -0.2rem;
    line-height: 1.45;
}

.mfa-secret-value {
    display: block;
    overflow-wrap: anywhere;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--cool-gray-9);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--warning-color);
    animation: pulse 2s infinite;
}

.status-dot.online {
    background-color: var(--success-color);
}

.status-dot.offline {
    background-color: var(--danger-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.tab-button[data-feature],
.device-right-tab[data-feature],
.fleet-subnav-btn[data-feature],
.btn[data-feature] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.reports-subnav-btn[data-feature] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.feature-tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.feature-tier-badge.feature-tier-premium {
    color: var(--premium-color);
    border-color: rgba(154, 103, 0, 0.35);
    background: var(--premium-bg);
}

.feature-tier-badge.feature-tier-enterprise {
    color: var(--enterprise-color);
    border-color: rgba(15, 76, 129, 0.3);
    background: var(--enterprise-bg);
}

[data-feature].feature-locked {
    cursor: not-allowed !important;
    opacity: 0.66;
    filter: saturate(0.72);
}

[data-feature].feature-locked .feature-tier-badge {
    opacity: 1;
}

/* ── Full-height layout chain ──────────────────────────────────────────────── */

html, body { height: 100%; }

footer { display: none; }

/* Non-dashboard tabs scroll internally */
#admin.tab-content.active,
#automation.tab-content.active,
#reports.tab-content.active,
#service.tab-content.active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Service tab: the map is the whole point of this card, so give it the same
   tighter padding treatment as the dashboard's full-bleed card instead of the
   generic 2rem form-card padding, and tighten the subtitle's gap to match. */
#service > .card {
    padding: 1.25rem 1.5rem;
}

#service .subtitle {
    margin-bottom: 1rem;
}

.service-map-container {
    position: relative;
    width: 100%;
    padding-top: 60%;
    border-radius: 8px;
    overflow: hidden;
}

.service-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.service-map-origin-note {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    margin: 0;
    padding: 0.25rem 0.75rem;
    background: var(--card-bg);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Dashboard tab fills remaining height without page scroll */
#dashboard.tab-content.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card inside dashboard fills its parent */
#dashboard > .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.25rem;
}

/* Remove redundant top-level tab titles (Service tab intentionally unchanged). */
#admin > .card > h2,
#automation > .card > .card-header,
#fleet > .card > .card-header,
#reports > .card > .card-header {
    display: none;
}

/* Dashboard cleanup: hide connection/status row and auth prompt. */
#dashboard > .card > .card-header {
    display: none;
}

/* Fixed-height items inside the dashboard card */
#dashboard > .card > .card-header { flex-shrink: 0; }

/* SparkplugB view is a flex column */
#sparkplug-view {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: 0.75rem;
}

.card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--button-shadow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.card h2 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    cursor: pointer;
    color: var(--text-primary);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background-color: var(--white);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--primary-focus-ring);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.roles-checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.roles-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    line-height: 1.2;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.admin-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-color);
    border-radius: 8px;
}

.admin-section h3 {
    margin-bottom: 0.5rem;
}

.admin-section p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.admin-section .form-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.admin-section .form-group label {
    margin-bottom: 0;
}

.admin-section .form-group input {
    flex: 1;
}

.global-notice-banner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(58vw, 880px);
    width: max-content;
    padding: 0.32rem 0.75rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: var(--white);
    color: var(--brand-blue);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
    z-index: 2;
}

.global-notice-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--info-bg);
    color: var(--blue-green-3);
}

.global-notice-message {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 760px);
}

.global-notice-message.global-notice-marquee-in {
    animation: globalNoticeMarqueeIn 5.0s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@keyframes globalNoticeMarqueeIn {
    0% {
        transform: translateX(100%);
        opacity: 0.7;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 860px) {
    .global-notice-banner {
        max-width: 56vw;
        padding: 0.24rem 0.55rem;
    }

    .global-notice-label {
        display: none;
    }

    .global-notice-message {
        font-size: 13px;
        max-width: 52vw;
    }
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.chat-integration-add-form {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--card-bg);
}

#chat-integration-modal .chat-integration-add-form {
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}

.chat-integration-row-top {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

#chat-integration-modal .chat-integration-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.chat-integration-name-group {
    flex: 1 1 460px;
    min-width: 260px;
    margin-bottom: 0;
}

.chat-integration-platform-group {
    flex: 0 0 180px;
    min-width: 180px;
    margin-bottom: 0;
}

#chat-integration-modal .chat-integration-name-group,
#chat-integration-modal .chat-integration-platform-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 0;
}

#chat-integration-modal .chat-integration-platform-group select {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    line-height: 1.2;
}

#chat-integration-modal .chat-integration-name-group label,
#chat-integration-modal .chat-integration-platform-group label {
    margin-bottom: 0;
}

#chat-integration-modal .chat-integration-name-group input,
#chat-integration-modal .chat-integration-platform-group select {
    min-height: 44px;
}

.chat-integration-url-group {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.chat-integration-edit-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .chat-integration-platform-group {
        flex: 1 1 220px;
    }

    #chat-integration-modal .chat-integration-row-top {
        grid-template-columns: 1fr;
    }
}

.message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    display: none;
}

.message.success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-color);
    display: block;
}

.message.error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-color);
    display: block;
}

.message.warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-color);
    display: block;
}

.users-list {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.auth-user-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

@media (pointer: coarse) {
    .auth-user-actions {
        gap: 0.5rem;
    }
}

.no-users, .loading, .users-list .error {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.users-list .error {
    color: var(--danger-color);
}

.portal-users-headerline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.15rem;
}

.portal-users-headerline p {
    margin: 0;
}

.users-list-table-wrap {
    padding: 0;
    max-height: 420px;
    /* .portal-users-table below has min-width: 980px, which clips columns with no way to reach
       them on any viewport narrower than that -- phone and most tablets alike. Vertical scroll
       is already handled by the shared .users-list base class (overflow-y: auto); this file adds
       the missing horizontal axis. */
    overflow-x: auto;
}

.portal-users-table {
    min-width: 980px;
}

.portal-users-table td {
    vertical-align: middle;
}

.status-tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-enabled {
    color: var(--success-text);
    background: var(--success-bg);
}

.status-disabled {
    color: var(--danger-text);
    background: var(--danger-bg);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

footer {
    margin-top: 3rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.feed-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    font-style: italic;
    font-family: inherit;
}

.metrics-table-container {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.metrics-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.metrics-table th {
    background: var(--text-primary);
    color: var(--cool-gray-8);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.metrics-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-family: 'Monaco', 'Courier New', monospace;
    color: var(--text-primary);
}

.metrics-table th:last-child,
.metrics-table td:last-child {
    white-space: nowrap;
    width: 1%;
}

.metrics-table-empty-cell {
    text-align: center;
    color: var(--text-secondary);
}

.metrics-table tbody tr:hover {
    background: var(--bg-color);
}

.metrics-table tbody tr:nth-child(even) {
    background: var(--cool-gray-9);
}

/* ── Section headers ────────────────────────────────────── */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.section-header-row h4 {
    margin-bottom: 0;
}

.section-header-left {
    display: flex;
    align-items: center;
}

.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    border-radius: 4px;
}

.section-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.section-toggle h4 {
    margin: 0;
    color: var(--text-primary);
}

.section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    transform-origin: center center;
    flex-shrink: 0;
}

.section-chevron::before {
    content: '▾';
    font-size: 1.6rem;
    line-height: 1;
    display: block;
}

.section-toggle.collapsed .section-chevron {
    transform: rotate(-90deg);
}

/* Let Live Metrics fill the full paired-column height instead of stopping at a fixed table max-height. */
#live-metrics-section {
    display: flex;
    flex-direction: column;
}

#live-metrics-body {
    min-height: 0;
}

/* Group for drag-handle + toggle button */
.section-header-left {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Drag handle */
.section-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0 3px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.section-drag-handle:hover { opacity: 1; }

.section-drag-handle:active { cursor: grabbing; }

@media (max-width: 768px) {
    header {
        padding: 0.6rem 0.85rem;
    }

    /* .tabs { flex-direction: column } removed (step 10) -- this 768px threshold reached wider
       than phone.css's 640px cutoff, so real tablet-portrait widths (e.g. iPad Mini at 744px)
       got the tab bar forced into a broken vertical stack instead of its normal desktop layout.
       phone.css already hides .tabs entirely below 640px (replaced by the step-6 drawer nav), so
       .tabs now correctly falls through to its unmodified row layout in the 641-768px gap. */

    .form-actions {
        flex-direction: column;
    }

    /* :not(.btn-icon) -- unscoped, this also stretched every icon-only button (dashboard card
       actions, admin table row actions, these profile-panel edit-pencils, etc.) to full row width
       at any viewport <=768px, not just the full-width action buttons (Save/Cancel/Submit) this
       was actually meant for. Same specificity as .btn-icon's own width:30px (core.css), and this
       rule loads later in the cascade, so it was silently winning everywhere -- a latent,
       pre-existing bug this effort's phone-width testing happened to surface, not something new. */
    .btn:not(.btn-icon) {
        padding: 4px 12px 5px 12px;
        border-radius: 5px;
        width: 100%;
    }
}

/* Default border while tier class hasn't been applied yet */
.premium-modal-box {
    border-top: 4px solid var(--premium-color);
}

.premium-modal-box.modal-tier-premium {
    border-top-color: var(--premium-color);
}

.premium-modal-box.modal-tier-enterprise {
    border-top-color: var(--enterprise-color);
}

.premium-modal-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.55rem;
}

.premium-modal-tier-badge-premium {
    color: var(--premium-color);
    background: var(--premium-bg);
    border: 1px solid rgba(154, 103, 0, 0.3);
}

.premium-modal-tier-badge-enterprise {
    color: var(--enterprise-color);
    background: var(--enterprise-bg);
    border: 1px solid rgba(15, 76, 129, 0.25);
}

.premium-modal-title {
    margin-bottom: 0.35rem;
}

.premium-modal-detail {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.55;
}

.recurring-cancel-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.recurring-cancel-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    font-weight: 700;
}

.recurring-cancel-btn-neutral {
    border-color: var(--border-color);
    color: var(--text-primary);
    background: var(--card-bg);
}

.recurring-cancel-btn-neutral:hover {
    background: var(--bg-color);
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

.recurring-cancel-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text-secondary);
}

/* ── Schematic view section ────────────────────────────── */

/* ── Focused Dashboard Responsiveness (no wholesale redesign) ───────────── */
/* .device-grid's column count used to be fought over by 3 competing rules here (this one, plus
   two narrower/fixed overrides below) -- this auto-fill/minmax pattern already produces a
   sensible column count at any width on its own (the plan's own named model for this), so the
   other two were pure redundant conflict, removed rather than reconciled (step 10). */
@media (max-width: 1200px) {
    .device-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* Was two separate @media (max-width: 900px) blocks (step 10 merged them -- same condition, no
   reason to be split). #dashboard > .card and .device-card each had two conflicting padding
   declarations across the two blocks; only the later (larger) value ever actually applied, so
   the other was already-dead code, not a real behavior choice -- dropped here, not merged. */
@media (max-width: 900px) {
    .container {
        padding: 8px 10px;
    }

    .sparkplug-body-layout {
        gap: 0.5rem;
    }

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

    .device-card-name {
        font-size: 0.9rem;
    }

    #broker-status {
        display: none;
    }

    #dashboard > .card > .card-header {
        display: none;
    }

    header {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
    }

    .header-brand-logo {
        height: 26px;
        max-width: 140px;
    }

    .header-title {
        font-size: 1.3rem;
    }

    .header-auth-controls {
        gap: 0.35rem;
    }

    .tabs {
        flex-direction: row;
        gap: 0.35rem;
        padding: 0.25rem;
    }

    .tab-button {
        flex: 1 1 0;
        padding: 0.45rem 0.6rem;
        font-size: 0.9rem;
    }

    #dashboard > .card {
        padding: 0.55rem;
    }

    .sparkplug-top-bar {
        padding: 0.35rem 0.5rem;
        gap: 0.5rem;
        font-size: 0.78rem;
    }

    .device-card {
        padding: 0.7rem;
    }

    .device-card-field {
        font-size: 0.72rem;
    }
}

@media (max-width: 640px) {
    .header-title {
        display: none;
    }
}

/* ============================================
   Automation Rules
   ============================================ */

#automation > .card {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

#automation > .card > .card-header {
    padding: 1rem 1.25rem 0;
    border-bottom: none;
    margin-bottom: 0;
    flex-shrink: 0;
}

#automation .automation-subview {
    padding: 0.9rem 1.25rem 1.25rem;
}

#automation .automation-section-header {
    padding: 0;
    border: none;
    margin-bottom: 0.5rem;
}

#automation .automation-section-header h3 {
    margin: 0;
}

#automation .automation-subtitle {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* Step 3: Review */

.review-label {
    flex: 0 0 130px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-secondary);
}

.review-value {
    flex: 1;
    color: var(--text-primary);
}

/* Notify mode: segmented multi-button control instead of a plain <select>,
   so all 7 options are visible and switchable at a glance. The underlying
   value still lives in a hidden input (#report-schedule-notification-mode)
   so the rest of the app's read/write logic is unaffected. */
.seg {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    overflow: hidden;
}

.seg button {
    flex: 1;
    padding: 0.75rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--white);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.seg button:last-child {
    border-right: none;
}

.seg button.active {
    background: var(--primary-color);
    color: var(--white);
}

/* Live "what will this actually do" preview on the Report Criteria step. */
.summary-card {
    background: color-mix(in srgb, var(--success-color) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, var(--white));
    border-radius: 9px;
    padding: 0.75rem 0.9rem;
    margin-top: 1rem;
    font-size: 0.82rem;
}

.summary-card .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--success-color) 60%, var(--black));
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.summary-card .count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: color-mix(in srgb, var(--success-color) 14%, var(--white));
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--success-color) 65%, var(--black));
}

#automation .card-header h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

#automation .card-header {
    flex-wrap: nowrap;
    gap: 0.45rem;
    align-items: center;
}

#automation .card-header .btn {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 2.1rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

@media (max-width: 640px) {
    #automation .card-header h2 {
        font-size: 1.2rem;
    }
}

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

/* ── Inline field validation errors ─────────────────────────────────────── */

.field-error {
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    display: none;
}

.field-error.visible { display: block; }

/* ── Auth modal ─────────────────────────────────────────────────────────── */

/* Visually hides an input (autofill/accessibility honeypot pattern) without
   display:none, so it stays focusable/announced but off-screen. */
.visually-hidden-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-modal-box {
    max-width: 560px;
    width: 92%;
}

.auth-modal-body {
    margin-bottom: 1rem;
}

/* Keep portal-user modal fields consistent with other form controls. */
.auth-modal-box .form-group label {
    margin-bottom: 0.5rem;
}

.auth-modal-box .form-group input[type="text"],
.auth-modal-box .form-group input[type="number"],
.auth-modal-box .form-group input[type="email"],
.auth-modal-box .form-group input[type="tel"],
.auth-modal-box .form-group input[type="password"],
.auth-modal-box .form-group input[type="url"],
.auth-modal-box .form-group select {
    width: 100%;
    box-sizing: border-box;
}

/* Keep Create API Key scope field visually consistent with modal input controls. */
#api-key-create-form #api-key-new-scope {
    height: 44px;
    min-height: 44px;
    width: 100%;
    padding: 0.65rem 0.75rem;
    line-height: 1.2;
}

/* Keep SMS Settings provider field consistent with modal input controls. */
#sms-settings-modal #sms-provider-input {
    height: 44px;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    line-height: 1.2;
}

.auth-modal-box .form-group input[readonly] {
    background-color: #f5f7fb;
    color: var(--text-secondary);
    cursor: not-allowed;
}

.auth-modal-box .form-group.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.auth-modal-box .form-group.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.auth-modal-box .form-group.checkbox-group input[type="checkbox"] {
    margin: 0;
}

.auth-modal-box .roles-checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.auth-modal-box .roles-checkbox-group label {
    font-weight: 500;
}

.auth-modal-box .auth-contact-row .auth-contact-email {
    flex: 1 1 auto;
}

.auth-modal-box .auth-contact-row .auth-contact-phone {
    flex: 0 0 20ch;
}

.auth-modal-box .auth-contact-row .auth-contact-phone input {
    width: 100%;
}

.auth-transition-layer {
    position: fixed;
    inset: 0;
    margin: 0;
    max-width: none;
    width: 100%;
}

.container.auth-transition-layer {
    z-index: 20;
}

.unauth-landing.auth-transition-layer {
    z-index: 10;
}

.auth-site-enter-up {
    animation: authSiteEnterUp 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-site-exit-down {
    animation: authSiteExitDown 620ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.auth-landing-enter-down {
    animation: authLandingEnterDown 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authSiteEnterUp {
    from {
        transform: translateY(100%);
        opacity: 0.75;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes authSiteExitDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0.85;
    }
}

@keyframes authLandingEnterDown {
    from {
        transform: translateY(-100%);
        opacity: 0.75;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Fleet Tab ─────────────────────────────────────────────────────────────── */

#fleet.tab-content.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#fleet > .card {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#fleet > .card > .card-header {
    padding: 1rem 1.25rem 0;
    border-bottom: none;
    flex-shrink: 0;
}

.fleet-subnav {
    display: flex;
    gap: 0;
    padding: 0 1.25rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    flex-shrink: 0;
}

.fleet-subnav-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 0;
}

.fleet-subnav-btn:hover {
    color: var(--text-primary);
}

.fleet-subnav-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.fleet-subview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Filter bar */
.fleet-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.fleet-notifications-add-btn {
    margin-left: auto;
}

.fleet-notifications-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.fleet-location-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-filter-arrow {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.fleet-filter-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    height: 34px;
    color: var(--text-primary);
    background: var(--card-bg);
    cursor: pointer;
}

.fleet-filter-input {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    height: 34px;
    width: 200px;
    background: var(--card-bg);
    color: var(--text-primary);
}

.fleet-filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ── Reports Tab ───────────────────────────────────────────────────────────── */

#reports.tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#reports > .card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.fleet-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-color);
}

.fleet-selected-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.fleet-device-type-filter-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

.fleet-device-type-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.fleet-device-type-filter-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.4rem 0.2rem;
}

/* Inventory table */
.fleet-table-wrap {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    margin: 0;
    border-radius: 0;
}

.fleet-table .fleet-col-check,
.fleet-table .fleet-col-dot {
    width: 36px;
    text-align: center;
    padding: 0.5rem 0.25rem;
}

.fleet-table .fleet-col-actions {
    width: 80px;
    text-align: right;
}

.fleet-table tbody tr {
    cursor: pointer;
}

.fleet-table tbody tr:hover td {
    background: var(--cool-gray-9);
}

.fleet-table tbody tr.fleet-row-selected td {
    background: var(--primary-bg);
}

.fleet-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.4;
}

.fleet-status-dot.online {
    background: var(--success-color);
    opacity: 1;
}

.fleet-status-dot.unknown {
    background: transparent;
    border: 2px dashed var(--warning-color);
    box-sizing: border-box;
    opacity: 1;
}

.fleet-location-cell {
    color: var(--text-secondary);
    font-size: 0.82rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-location-cell.assigned {
    color: var(--text-primary);
}

.fleet-unassigned {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.82rem;
}

.fleet-row-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s;
}

@media (pointer: coarse) {
    .fleet-row-actions {
        gap: 0.5rem;
        /* Hover has no reliable equivalent on touch input -- these actions would otherwise be
           unreachable rather than just hard to tap. .fleet-row-actions-static already opts a
           couple of usages into always-visible for unrelated reasons; this makes it universal
           for touch specifically. */
        opacity: 1;
    }
}

.fleet-table tbody tr:hover .fleet-row-actions {
    opacity: 1;
}

/* Location picker tree (in modal) */
.fleet-picker-tree {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
}

.fleet-picker-node-row {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    margin: 1px 4px;
    transition: background 0.1s;
}

.fleet-picker-node-row:hover {
    background: var(--border-color);
}

.fleet-picker-node-row.selected {
    background: var(--primary-bg);
    color: var(--primary-color);
    font-weight: 600;
}

.fleet-picker-special-options {
    border-bottom: 1px solid var(--border-color);
    margin: 0 4px 5px;
    padding-bottom: 4px;
}

.fleet-picker-unassigned-row {
    font-style: italic;
    color: var(--text-secondary);
}

.fleet-picker-unassigned-row.selected {
    font-style: normal;
}

.fleet-picker-chevron {
    width: 16px;
    font-size: 0.6rem;
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.fleet-picker-chevron.open {
    transform: rotate(90deg);
}

.fleet-picker-label {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-picker-type {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.4rem;
    flex-shrink: 0;
}

.form-optional {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
}

.form-required {
    color: var(--danger-color);
}

/* Device detail location row */
.detail-location-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.detail-location-path {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.detail-location-path.is-unassigned {
    font-style: italic;
}

.detail-location-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

@media (max-width: 768px) {
    .fleet-filter-bar {
        flex-wrap: wrap;
    }

    .fleet-filter-input {
        width: 100%;
    }
}

/* ── Software Update Campaign wizard ─────────────────────────────────────── */

.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.wizard-step .wizard-step-circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wizard-step.active {
    color: var(--primary-color);
}

.wizard-step.active .wizard-step-circle {
    background: var(--primary-color);
}

.wizard-step.done .wizard-step-circle {
    background: var(--success-color);
}

.wizard-step.done {
    color: var(--success-color);
}

.wizard-step-connector {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.wizard-panel .form-group:last-of-type {
    margin-bottom: 1rem;
}

/* Compact caption-style labels + tighter field sizing, scoped to the campaign
   wizard only — matches the approved design without changing other modals. */
.wizard-panel h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
    color: var(--text-primary);
}

.wizard-panel .field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.wizard-panel .form-group > input[type="text"],
.wizard-panel .form-group > input[type="number"],
.wizard-panel .form-group > input[type="datetime-local"],
.wizard-panel .form-group > select {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
}

/* Compact multi-select combobox: fixed-height trigger + overlay popover so the
   modal's footprint doesn't grow with the number of locations/device types. */
.picker {
    position: relative;
}

.picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.picker-trigger.open {
    border-color: var(--primary-color);
}

.picker-trigger .picker-caret {
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.12s;
    flex-shrink: 0;
}

.picker-trigger.open .picker-caret {
    transform: rotate(180deg);
}

.picker-popover {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    /* Reparented to <body> at open time (see the three body.appendChild(popover)
       call sites: rules.js, scheduled-reports.js, software-update-campaigns.js) so
       it floats outside its modal's scroll/overflow context -- needs to sit above
       whatever dialog it was opened from, since it's now a body-level sibling
       rather than a nested descendant.
       This must stay comfortably above dialog-manager.js's nextZIndex floor
       (currently 1150, incrementing by 10 per nested dialog -- see dialog-manager.js),
       not just above .modal-overlay's static 1000. It was 1100 (safe when the floor
       was 1000) until the floor was bumped to 1150 for an unrelated fix and this
       rule wasn't updated to match -- every dialog then painted over this popover,
       on every screen width, in all three places that use it. Set well above the
       realistic range of that floor (unlike toasts at 2000, this doesn't need to
       beat everything, just any dialog) so it doesn't silently break again the
       next time dialog-manager's floor moves. */
    z-index: 1500;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
    padding: 0.55rem;
}

.picker-popover.open {
    display: block;
}

.picker-search {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    font-family: inherit;
}

.picker-list {
    max-height: 252px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding-right: 0.15rem;
}

.picker-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.81rem;
    color: var(--text-primary);
    padding: 0.15rem 0;
}

.picker-list label.picker-depth-2 {
    padding-left: 1.1rem;
    color: var(--text-secondary);
}

.picker-list .picker-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.4rem 0.1rem;
}

.picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.picker-footer .link-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.wizard-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.wizard-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--white));
    color: color-mix(in srgb, var(--primary-color) 80%, var(--black));
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--white));
    border-radius: 20px;
    padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.wizard-chip .wizard-chip-x {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 20%, var(--white));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    cursor: pointer;
    line-height: 1;
    border: none;
    color: inherit;
}

.wizard-live-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.5rem;
    background: color-mix(in srgb, var(--success-color) 12%, var(--white));
    color: color-mix(in srgb, var(--success-color) 70%, var(--black));
    border: 1px solid color-mix(in srgb, var(--success-color) 32%, var(--white));
}

.wizard-live-count.empty {
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    font-weight: 500;
    font-style: italic;
}

.wizard-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.wizard-stat {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}

.wizard-stat .wizard-stat-num {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.wizard-stat .wizard-stat-lbl {
    font-size: 0.66rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.3rem;
}

.wizard-stat.total .wizard-stat-num { color: var(--text-primary); }

.wizard-stat.eligible .wizard-stat-num { color: var(--success-color); }

.wizard-stat.blocked .wizard-stat-num { color: var(--warning-color); }

.wizard-stat.excluded .wizard-stat-num { color: var(--text-secondary); }

.status-badge {
    display: inline-flex;
    align-items: center;
    height: 1.35rem;
    padding: 0 0.55rem;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-badge.behind {
    background: color-mix(in srgb, var(--warning-color) 16%, var(--white));
    color: color-mix(in srgb, var(--warning-color) 65%, var(--black));
    border: 1px solid color-mix(in srgb, var(--warning-color) 40%, var(--white));
}

.status-badge.ahead {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--white));
    color: color-mix(in srgb, var(--primary-color) 85%, var(--black));
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--white));
}

.status-badge.equal, .status-badge.succeeded, .status-badge.eligible {
    background: color-mix(in srgb, var(--success-color) 14%, var(--white));
    color: color-mix(in srgb, var(--success-color) 75%, var(--black));
    border: 1px solid color-mix(in srgb, var(--success-color) 35%, var(--white));
}

.status-badge.unknown {
    background: var(--cool-gray-8);
    color: var(--cool-gray-4);
    border: 1px solid var(--cool-gray-8);
}

.status-badge.blocked, .status-badge.failed, .status-badge.excluded {
    background: color-mix(in srgb, var(--danger-color) 12%, var(--white));
    color: color-mix(in srgb, var(--danger-color) 75%, var(--black));
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, var(--white));
}

.status-badge.sent, .status-badge.dispatching {
    background: color-mix(in srgb, var(--secondary-color) 12%, var(--white));
    color: color-mix(in srgb, var(--secondary-color) 70%, var(--black));
    border: 1px solid color-mix(in srgb, var(--secondary-color) 30%, var(--white));
}

.status-badge.waiting {
    background: color-mix(in srgb, var(--warning-color) 16%, var(--white));
    color: color-mix(in srgb, var(--warning-color) 65%, var(--black));
    border: 1px solid color-mix(in srgb, var(--warning-color) 40%, var(--white));
}