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

html {
    scrollbar-gutter: stable;
}

html:has(body.panel-open) {
    scrollbar-gutter: auto;
}

/* Pleine largeur viewport y compris le gutter Firefox (scrollbar-gutter: stable). */
.full-bleed-width {
    width: 100vw;
    margin-right: calc(100% - 100vw);
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-muted);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* ── Confirm dialog (actions destructives) ── */
.app-confirm-dialog {
    max-width: min(92vw, 24rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.22));
}

.app-confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.app-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem 1rem;
}

.app-confirm-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
}

.app-confirm-message {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text);
}

.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.app-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.app-confirm-btn:hover {
    border-color: var(--color-accent, #6d84a3);
}

.app-confirm-btn:focus-visible {
    outline: 2px solid var(--color-accent, #6d84a3);
    outline-offset: 2px;
}

.app-confirm-btn-secondary {
    background: transparent;
}

.app-confirm-btn-primary {
    background: var(--color-accent, #6d84a3);
    border-color: var(--color-accent, #6d84a3);
    color: #fff;
}

.app-confirm-btn-danger {
    background: var(--color-danger, #c62828);
    border-color: var(--color-danger, #c62828);
    color: #fff;
}

.app-confirm-btn-danger:hover {
    filter: brightness(0.95);
    border-color: var(--color-danger, #c62828);
}

.app-prompt-dialog {
    max-width: min(92vw, 28rem);
}

.app-prompt-input {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    font: inherit;
    font-size: 0.9rem;
    background: var(--color-bg, #fff);
    color: var(--color-text);
}

.app-prompt-input:focus {
    outline: none;
    border-color: var(--color-accent, #6d84a3);
    box-shadow: 0 0 0 2px rgba(109, 132, 163, 0.25);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Login overlay ── */
#login-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--color-bg-muted);
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.login-brand {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 128px;
    height: 32px;
    object-fit: contain;
}

.login-lang {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
}

.login-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    min-height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.login-lang-trigger:hover,
.login-lang-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.login-lang-trigger .zmdi-globe-alt {
    font-size: 1.1rem;
    opacity: 0.9;
}

.login-lang-code {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-lang-chevron {
    font-size: 1rem;
    opacity: 0.75;
    transition: transform var(--transition);
}

.login-lang-trigger[aria-expanded="true"] .login-lang-chevron {
    transform: rotate(180deg);
}

.login-lang-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 11.5rem;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: #2c2c2c;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.login-lang-menu[hidden] {
    display: none;
}

.login-lang-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.login-lang-option:hover,
.login-lang-option:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.login-lang-option[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.12);
    font-weight: 500;
}

.login-lang-option img {
    display: block;
    width: 20px;
    height: auto;
    flex-shrink: 0;
}

.login-diag-trigger {
    position: fixed;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 1001;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.65);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.login-diag-trigger:hover,
.login-diag-trigger[aria-expanded="true"] {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.55);
}

.login-diag-panel {
    position: fixed;
    bottom: 2.75rem;
    left: 0.75rem;
    z-index: 1002;
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 28rem);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: #1e1e1e;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: #ececec;
}

.login-diag-panel.hidden {
    display: none;
}

.login-diag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

.login-diag-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.login-diag-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    padding: 0 0.15rem;
}

.login-diag-close:hover {
    opacity: 1;
}

.login-diag-output {
    flex: 1;
    margin: 0;
    padding: 0.6rem 0.65rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(255, 255, 255, 0.88);
}

.login-diag-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-diag-btn {
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    color: #f2f2f2;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.login-diag-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.login-diag-btn-primary {
    border-color: rgba(199, 255, 156, 0.7);
    background: rgba(199, 255, 156, 0.15);
    color: #d8ffb8;
}

.login-page {
    width: 100%;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: auto 0;
}

.login-notice {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.login-notice-top {
    font-size: 0.9375rem;
}

.login-notice-bottom {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.login-notice-bottom p + p {
    margin-top: 0.75rem;
}

.login-notice a {
    color: var(--color-accent);
    text-decoration: none;
}

.login-notice a:hover {
    text-decoration: underline;
}

.login-card {
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-header);
    overflow: hidden;
}

.login-card-signup {
    margin-top: 0.25rem;
}

.login-signup-body {
    text-align: center;
}

.login-signup-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.btn-create-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
    padding: 0.75rem 1.25rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.btn-create-account:hover,
.btn-create-account:focus-visible {
    border-color: var(--color-accent);
    background: rgba(3, 169, 244, 0.06);
    outline: none;
}

.btn-create-account .zmdi {
    font-size: 1.25rem;
    color: var(--color-accent);
}

.login-header {
    background: var(--color-primary);
    color: #fff;
    padding: 1.25rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.login-body {
    padding: 1.5rem;
}

.login-body label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.login-body input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.login-password-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.login-password-wrap input {
    margin-bottom: 0;
    padding-right: 2.75rem;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    color: var(--color-accent);
    background: rgba(3, 169, 244, 0.08);
    outline: none;
}

.login-password-toggle .zmdi {
    font-size: 1.25rem;
    line-height: 1;
}

.login-body input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(3, 169, 244, 0.2);
}

.login-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    min-height: 1.25rem;
}

.login-body .btn-primary {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-btn-save);
    color: #333;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition);
}

.login-body .btn-primary:hover {
    background: var(--color-btn-save-hover);
}

.login-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.login-back-btn:hover,
.login-back-btn:focus-visible {
    text-decoration: underline;
    outline: none;
}

.login-field {
    margin-bottom: 0.15rem;
}

.login-field label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.login-field input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.login-field .login-password-wrap {
    margin-bottom: 0.25rem;
}

.login-field .login-password-wrap input {
    margin-bottom: 0;
}

.login-field-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.login-field-error {
    min-height: 1.1rem;
    margin-bottom: 0.65rem;
    font-size: 0.8125rem;
    color: var(--color-danger);
}

.login-input-invalid {
    border-color: var(--color-danger) !important;
}

.login-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    cursor: pointer;
}

.login-terms input {
    width: auto;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.login-terms a {
    color: var(--color-accent);
    text-decoration: none;
}

.login-terms a:hover {
    text-decoration: underline;
}

.login-activate-notice {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
}

.login-activate-spam {
    margin-top: 0.5rem;
}

/* ── App shell ── */
#app-shell {
    min-height: 100vh;
}

/* Barre fixe m.eedomus (ui-header) — hors #app-shell, pleine largeur viewport */
.app-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2200;
    width: 100vw;
    margin-right: calc(100% - 100vw);
    height: var(--header-height);
    background: var(--color-app-toolbar-bg);
    color: var(--color-app-toolbar-text);
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 0.25rem;
    box-shadow: var(--shadow-header);
    box-sizing: border-box;
    overflow: visible;
}

/* Plein écran pièce : pas de toolbar / bandeau / menu latéral (legacy is_full_screen) */
html.room-fullscreen .app-toolbar {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

html.room-fullscreen .app-toolbar .menu-toggle-btn,
html.room-fullscreen .app-toolbar .toolbar-back-btn,
html.room-fullscreen .app-toolbar .app-toolbar-heading,
html.room-fullscreen .app-toolbar .favorites-toggle-btn,
html.room-fullscreen .app-toolbar .favorites-edit-btn,
html.room-fullscreen .app-toolbar .favorites-save-btn {
    visibility: hidden;
    pointer-events: none;
}

html.room-fullscreen .app-toolbar .app-toolbar-actions {
    pointer-events: auto;
    margin-left: auto;
}

html.room-fullscreen .app-toolbar .room-view-menu-btn {
    visibility: visible;
    pointer-events: auto;
    color: var(--color-text, #1e293b);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

html.dark-mode.room-fullscreen .app-toolbar .room-view-menu-btn {
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.88);
}

html.room-fullscreen .main-content {
    padding-top: 0;
}

html.room-fullscreen .main-content:has(.room-plan-view:not(.hidden)),
html.room-fullscreen .main-content:has(.room-tile-view:not(.hidden)) {
    padding-top: 0;
}

html.room-fullscreen .main-content--panel-bg::before,
html.room-fullscreen .home-panel-bg {
    top: 0;
}

html.room-fullscreen #home-notification {
    display: none !important;
}

html.room-fullscreen #nav_panel,
html.room-fullscreen #panel-dismiss {
    display: none !important;
}

html.room-fullscreen #app-shell.nav-sidebar-open .main-content,
html.room-fullscreen #app-shell .main-content {
    margin-left: 0 !important;
}

html.room-fullscreen #room-view-menu-dismiss,
html.room-fullscreen #room-view-menu {
    top: 0;
}

.menu-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-app-toolbar-icon);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    transition: background var(--transition);
}

.toolbar-back-btn {
    background: transparent;
    border: none;
    color: var(--color-app-toolbar-icon);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    transition: background var(--transition);
}

.toolbar-back-btn:hover,
.toolbar-back-btn:focus-visible {
    background: var(--color-app-toolbar-btn-hover);
    outline: none;
}

.menu-toggle-btn:hover,
.menu-toggle-btn:focus-visible {
    background: var(--color-app-toolbar-btn-hover);
    outline: none;
}

.app-toolbar-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 0.5rem;
    padding-right: 5.5rem;
    overflow: hidden;
    pointer-events: none;
}

.app-toolbar-heading .app-breadcrumb-link,
.app-toolbar-heading .app-breadcrumb-current,
.app-toolbar-heading .favorites-edit-search-field,
.app-toolbar-heading .favorites-edit-search-input {
    pointer-events: auto;
}

.app-breadcrumb {
    flex: 1;
    min-width: 0;
}

.app-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app-breadcrumb-item {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}

.app-breadcrumb-sep {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.2rem;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
}

.app-breadcrumb-sep .zmdi {
    font-size: 1.05rem;
}

.app-breadcrumb-link {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 400;
    padding: 0.2rem 0.4rem;
    margin: 0 -0.2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
    opacity: 0.92;
    transition: background var(--transition), opacity var(--transition);
}

.app-breadcrumb-link:hover,
.app-breadcrumb-link:focus-visible {
    background: var(--color-app-toolbar-btn-hover);
    opacity: 1;
    outline: none;
}

.app-breadcrumb-current {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0;
}

body.toolbar-breadcrumb-active .app-toolbar-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-toolbar-title {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.app-toolbar-actions {
    position: absolute;
    right: 0.75rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    z-index: 30;
    pointer-events: auto;
}

.room-view-menu-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.35rem;
    flex-shrink: 0;
    cursor: pointer;
    pointer-events: auto;
}

.room-view-menu-btn:hover,
.room-view-menu-btn:focus-visible {
    background: var(--color-app-toolbar-btn-hover);
    outline: none;
}

.room-view-menu-btn i {
    pointer-events: none;
}

.app-toolbar--fav-edit .app-toolbar-title {
    flex: 0 1 auto;
    max-width: 42%;
}

.favorites-edit-search-toolbar {
    flex: 1;
    min-width: 0;
    margin: 0 0.35rem 0 0.25rem;
    display: flex;
    align-items: stretch;
}

.favorites-edit-search-toolbar.hidden {
    display: none;
}

.favorites-edit-search-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.3rem;
    margin: 0;
    padding: 0 0.55rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    min-height: 2rem;
}

.favorites-edit-search-icon {
    color: var(--color-text-muted, #666);
    font-size: 1rem;
    flex-shrink: 0;
}

.favorites-edit-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    padding: 0.35rem 0;
    color: var(--color-text, #222);
    outline: none;
}

.favorites-edit-search-input::placeholder {
    color: var(--color-text-muted, #888);
}

.fav-edit-no-match {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.fav-edit-no-match.hidden {
    display: none;
}

.favorites-toggle-btn {
    background: none;
    border: none;
    color: var(--color-app-toolbar-icon);
    margin: 0;
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}

.favorites-toggle-btn:hover,
.favorites-toggle-btn:focus-visible,
.favorites-toggle-btn.active {
    background: none;
    outline: none;
    box-shadow: none;
}

.favorites-toggle-icon {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    pointer-events: none;
    transition: transform 0.15s ease;
    overflow: visible;
    background: none;
}

.favorites-toggle-btn.active .favorites-toggle-icon {
    transform: scale(1.12);
}

.toolbar-icon-btn {
    background: none;
    border: none;
    color: var(--color-app-toolbar-icon);
    margin: 0;
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
}

.toolbar-icon-btn:hover,
.toolbar-icon-btn:focus-visible {
    background: none;
    outline: none;
    opacity: 0.92;
}

.toolbar-icon-btn:disabled {
    opacity: 0.45;
    cursor: wait;
}

.toolbar-icon-btn.hidden {
    display: none;
}

body.panel-open {
    overflow: hidden;
}

/* ── Panneaux overlay (m.eedomus) ── */
.panel-dismiss {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: transparent;
    pointer-events: none;
    transition: background 0.3s ease;
}

.panel-dismiss.open {
    background: rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.nav-panel {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    max-width: 90%;
    z-index: 2000;
    background: var(--color-bg);
    color: var(--color-text);
    border-left: 3px solid var(--color-accent);
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
}

.nav-panel.open {
    transform: translateX(0);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    visibility: visible;
}

.nav-panel-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.nav-panel-collapse-btn {
    display: none;
}

.nav-panel-list {
    list-style: none;
    height: 100%;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.nav-panel-list::-webkit-scrollbar {
    width: 5px;
}

.nav-panel-list::-webkit-scrollbar-track {
    background: transparent;
}

.nav-panel-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 3px;
}

html.dark-mode .nav-panel-list {
    scrollbar-color: #4a4a4a transparent;
}

html.dark-mode .nav-panel-list::-webkit-scrollbar-thumb {
    background: #4a4a4a;
}

.nav-panel-divider {
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-light);
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}

.nav-panel-item {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    padding-right: 2.25rem;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    border-bottom: 1px solid var(--color-bg);
    font-size: 1rem;
    font-weight: 400;
    transition: background var(--transition);
}

.nav-panel-item:hover {
    background: var(--color-bg-muted);
}

.nav-panel-item.active {
    background: var(--color-nav-item-active-bg);
}

.nav-panel-item i.zmdi {
    margin-right: 15px;
    font-size: 1.35rem;
    color: var(--color-nav-icon);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.nav-panel-item::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid var(--color-nav-chevron);
    border-bottom: 2px solid var(--color-nav-chevron);
    transform: rotate(-45deg);
}

.nav-panel-item--external::after {
    display: none;
}

.nav-panel-item.is-syncing {
    pointer-events: none;
    opacity: 0.75;
}

.nav-panel-item.is-syncing i.zmdi-refresh {
    animation: eedomus-sync-spin 0.9s linear infinite;
}

@keyframes eedomus-sync-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nav-panel-footer-item {
    list-style: none;
}

.nav-panel-footer-item .mode-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

.nav-panel-footer-item .version-label {
    display: block;
    padding: 0.35rem 1rem 0.85rem;
    font-size: 0.65rem;
    color: var(--color-text-light);
}

/* ── favorites_menu overlay (droite) ── */
.favorites-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: min(450px, 90%);
    z-index: 2000;
    background: var(--color-bg);
    color: var(--color-text);
    border-left: 3px solid var(--color-accent);
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    visibility: hidden;
}

.favorites-panel.open {
    transform: translateX(0);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    visibility: visible;
}

.favorites-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.favorites-panel-list,
.favorites-panel-items {
    list-style: none;
    padding: 0;
}

.favorites-panel-items {
    flex: 1;
    overflow-y: auto;
}

.favorites-panel-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    padding-right: 2rem;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    border-bottom: 1px solid var(--color-bg);
    transition: background var(--transition);
}

.favorites-panel-item:hover {
    background: var(--color-bg-muted);
}

.favorites-panel-item i.zmdi {
    font-size: 1.5rem;
    color: #555;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

html.dark-mode .favorites-panel-item i.zmdi {
    color: var(--color-text-muted);
}

.favorites-panel-edit span {
    font-size: 1rem;
}

.favorites-panel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.favorites-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.favorites-panel-value {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.favorites-panel-item::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid #bbb;
    border-bottom: 2px solid #bbb;
    transform: rotate(-45deg);
}

/* ── Favoris (sections menu) ── */
.fav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fav-list--periphs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fav-list--rooms {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fav-room-section {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fav-room-heading {
    margin: 0 0 0.35rem;
    padding: 0.3rem 0 0.3rem 0.65rem;
    border-left: 3px solid var(--color-accent, #6d84a3);
}

.fav-room-heading-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-light, #888);
    text-align: left;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.fav-room-heading-btn:hover,
.fav-room-heading-btn:focus-visible {
    color: var(--color-text, #333);
    outline: none;
}

html.dark-mode .fav-room-heading-btn:hover,
html.dark-mode .fav-room-heading-btn:focus-visible {
    color: var(--color-text, #eee);
}

.fav-link-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fav-periph-row {
    list-style: none;
}

.fav-periph-row--nested .mini-widget {
    margin-left: 0.25rem;
}

.fav-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.fav-edit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface, #fff);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html.dark-mode .fav-edit-list {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.fav-edit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border, #eee);
}

.fav-edit-row:last-child {
    border-bottom: none;
}

.fav-edit-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.fav-edit-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.fav-edit-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fav-edit-periph-name {
    font-size: 0.95rem;
    line-height: 1.3;
}

.fav-edit-detail,
.fav-edit-room-name {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.fav-edit-row[hidden] {
    display: none;
}

.fav-edit-toggle {
    flex-shrink: 0;
}

/* Main content */
.main-content {
    position: relative;
    min-height: 100vh;
    padding-top: var(--header-height);
    transition: margin-left 0.3s ease;
}

/* Fond personnalisé d'un affichage — plein écran sous la barre (legacy secure) */
.main-content--panel-bg .content-area {
    position: relative;
    z-index: 1;
}

.main-content--panel-bg::before {
    content: '';
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: 100vw;
    margin-right: calc(100% - 100vw);
    z-index: 0;
    pointer-events: none;
    background-color: var(--panel-bg-color, var(--color-panel-bg-default));
}

.home-panel-bg {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: 100vw;
    margin-right: calc(100% - 100vw);
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media (min-width: 769px) {
    #app-shell.nav-sidebar-open .main-content--panel-bg::before,
    #app-shell.nav-sidebar-open .home-panel-bg {
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
    }
}

/* Desktop : menu fixe à côté du contenu (pas overlay) */
@media (min-width: 769px) {
    body.panel-open {
        overflow: auto;
    }

    .panel-dismiss {
        display: none !important;
    }

    .nav-panel {
        z-index: 200;
        max-width: none;
        top: var(--header-height);
        bottom: 0;
    }

    .nav-panel.open {
        box-shadow: none;
    }

    #app-shell.nav-sidebar-open .nav-panel {
        transform: translateX(0);
        visibility: visible;
    }

    #app-shell.nav-sidebar-open .main-content {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }

    #app-shell:not(.nav-sidebar-open) .nav-panel {
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
    }

    .nav-panel-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.45rem;
        right: 0.35rem;
        z-index: 2;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--color-nav-chevron);
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
    }

    .nav-panel-collapse-btn:hover,
    .nav-panel-collapse-btn:focus-visible {
        background: var(--color-bg-muted);
        color: var(--color-text);
        outline: none;
    }

    #app-shell:not(.nav-sidebar-open) .nav-panel-collapse-btn {
        display: none;
    }

    body.toolbar-breadcrumb-active .toolbar-back-btn {
        display: none !important;
    }
}

.mode-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    cursor: pointer;
    transition: background var(--transition);
}

.mode-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition);
}

.mode-toggle input:checked + .mode-toggle-slider {
    background: var(--color-accent);
}

.mode-toggle input:checked + .mode-toggle-slider::before {
    transform: translateX(20px);
}

.content-area {
    flex: 1;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.content-area.periph-overlay-open > .content-section.active > * {
    display: none;
}

.content-area.periph-overlay-open > .room-chart-view:not(.hidden),
.content-area.periph-overlay-open > .room-actions-view:not(.hidden) {
    display: block;
}

/* Transient API notice (3 s) */
.api-transient-notice {
    position: fixed;
    top: calc(var(--toolbar-height, 3.25rem) + 0.5rem);
    left: 50%;
    z-index: 1200;
    transform: translateX(-50%);
    width: min(92vw, 28rem);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning);
    background: var(--color-warning-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
    pointer-events: none;
}

.api-transient-notice.hidden {
    display: none;
}

.api-transient-notice-title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.api-transient-notice-detail {
    margin: 0 0 0.35rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.api-transient-notice-code {
    margin: 0;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-text-muted);
}

.api-transient-notice-endpoint {
    font-family: inherit;
}

/* Notification banner */
.notification-banner {
    position: relative;
    background: var(--color-notification-banner-bg);
    border: 1px solid var(--color-notification-banner-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 2.5rem 2.1rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-notification-banner-text);
}

.notification-close {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.notification-close:hover,
.notification-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}

html.dark-mode .notification-close:hover,
html.dark-mode .notification-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.notification-close:disabled {
    opacity: 0.5;
    cursor: wait;
}

.notification-banner-body {
    padding-right: 0.5rem;
    cursor: pointer;
}

.notification-banner.hidden {
    display: none;
}

.notification-banner strong {
    color: var(--color-notification-banner-text);
}

.notification-count {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    display: inline-block;
    background: var(--color-notification-count-bg);
    color: var(--color-notification-count-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-right: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.notification-count:hover,
.notification-count:focus-visible {
    filter: brightness(0.95);
}

/* Room grid (main-panel style) */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.panel-group-break {
    grid-column: 1 / -1;
    height: 0;
    margin-bottom: 0.25rem;
}

.room-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: box-shadow var(--transition), transform var(--transition);
}

.room-tile:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.room-tile.highlight {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-ring);
}

.room-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.room-tile span {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text);
}

.room-tile-api {
    border: none;
    font-family: inherit;
    width: 100%;
}

.room-tile-icon-img {
    background: transparent;
    border-radius: 0;
    width: 64px;
    height: 64px;
}

.room-tile-icon-img img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.loading-msg {
    color: var(--color-text-muted);
    padding: 1rem 0;
}

/* Message de chargement injecté dans une room-grid (évite 1 mot par colonne). */
.room-grid > .loading-msg {
    grid-column: 1 / -1;
    width: 100%;
    white-space: nowrap;
}

html.modern-look .room-tile-icon-img,
html.modern-look .room-tile-icon-img img,
html.modern-look .mini-widget-icon img,
html.modern-look .periph-photo,
html.modern-look .periph-value-icon-bg,
html.modern-look .periph-macro-icon-bg,
html.modern-look .periph-room-tile-icon,
html.modern-look .settings-room-icon,
html.modern-look .fav-edit-icon img {
    border-radius: 0;
}

html.modern-look .room-tile-icon-img img,
html.modern-look .mini-widget-icon img,
html.modern-look .periph-photo {
    background-size: 100% 100%;
}

/* ── Liste périphériques (Vos Périphériques) ── */
.periph-list-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.periph-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.periph-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-btn-muted-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.periph-add-btn:hover,
.periph-add-btn:focus-visible {
    background: var(--color-btn-muted-hover);
    outline: none;
}

.periph-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 768px) {
    .periph-add-btn .periph-add-label {
        display: none;
    }

    .periph-add-btn {
        padding: 0.35rem;
        gap: 0;
    }
}

.periph-search-wrap {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.periph-search-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.35rem;
    padding: 0 0.5rem;
    margin: 0;
}

.periph-search-icon {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.periph-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    padding: 0.4rem 0;
    color: var(--color-text);
    outline: none;
}

.periph-search-input:disabled {
    opacity: 0.9;
    cursor: not-allowed;
}

.periph-search-input::placeholder {
    color: var(--color-text-muted);
}

.periph-list-no-match {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

.periph-list-no-match.hidden {
    display: none;
}

.periph-all-channels {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.periph-all-channels-input {
    margin: 0;
    cursor: pointer;
}

.periph-row-channel .periph-col-name {
    padding-left: 1.25rem;
}

.periph-list-view > .welcome-card {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Ajout périphérique (mock) ── */
.periph-add-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.periph-add-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.1rem 0.85rem;
    background: linear-gradient(180deg, var(--color-periph-header-start) 0%, var(--color-periph-header-end) 100%);
    border-bottom: 1px solid var(--color-border);
}

.periph-add-header-main {
    flex: 1 1 14rem;
    min-width: 0;
}

.periph-add-box-select {
    flex: 0 1 auto;
    min-width: 10rem;
    max-width: 100%;
    align-self: center;
}

.periph-add-box-select.is-hidden {
    display: none;
}

.periph-add-box-select-label {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.periph-add-box-select-input {
    width: 100%;
    min-width: 10rem;
    max-width: 18rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.periph-add-box-select-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.periph-add-box-select-hint {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    max-width: 18rem;
}

.periph-add-title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

.periph-add-lead {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.periph-add-mock-badge {
    display: inline-block;
    margin: 0.55rem 0 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-periph-badge-text);
    background: var(--color-periph-badge-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.periph-add-feedback {
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 0.8125rem;
    color: var(--color-feedback-success-text);
    background: var(--color-feedback-success-bg);
    border-bottom: 1px solid var(--color-feedback-success-border);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.periph-add-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.periph-add-categories {
    padding: 0.65rem 0.85rem 1rem;
}

.periph-add-category + .periph-add-category {
    margin-top: 0.85rem;
}

.periph-add-category-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.45rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
}

.periph-add-category-icon {
    font-size: 1rem;
    color: var(--color-accent);
}

.periph-add-category-count {
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.05);
}

html.dark-mode .periph-add-category-count {
    background: rgba(255, 255, 255, 0.08);
}

.periph-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.45rem;
}

.periph-add-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.1rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.periph-add-item:hover,
.periph-add-item:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(109, 132, 163, 0.18);
    outline: none;
}

.periph-add-item.is-pressed {
    transform: scale(0.98);
    background: rgba(109, 132, 163, 0.08);
}

.periph-add-item--implemented {
    border-color: var(--color-success);
    box-shadow: inset 0 0 0 1px var(--color-success);
}

.periph-add-item--implemented:hover,
.periph-add-item--implemented:focus-visible {
    border-color: var(--color-success);
    box-shadow: inset 0 0 0 1px var(--color-success), 0 2px 8px rgba(0, 136, 0, 0.15);
}

.periph-add-item--implemented.is-selected {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.periph-add-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(109, 132, 163, 0.12);
    color: var(--color-accent);
    font-size: 0.95rem;
}

.periph-add-item-label {
    flex: 1;
    min-width: 0;
}

.periph-add-item--more {
    border-style: dashed;
    color: var(--color-text-muted);
}

.periph-add-item--more:hover,
.periph-add-item--more:focus-visible,
.periph-add-item--more.is-expanded {
    color: var(--color-text);
}

.periph-add-item--more.is-expanded {
    border-style: solid;
    border-color: var(--color-accent);
    background: rgba(109, 132, 163, 0.08);
}

.periph-add-more-items {
    margin-top: 0.45rem;
}

.periph-add-more-items[hidden] {
    display: none;
}

.periph-add-item.is-selected {
    border-color: var(--color-accent);
    background: rgba(109, 132, 163, 0.12);
    box-shadow: 0 0 0 1px rgba(109, 132, 163, 0.25);
}

.periph-add-detail-row {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0.35rem;
}

.periph-add-detail {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
}

.periph-add-detail-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.periph-add-detail-photo {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.periph-add-detail-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.periph-add-detail-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.periph-add-detail-create-zone {
    margin-bottom: 0.65rem;
}

.periph-add-detail-create-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.periph-add-detail-create-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.periph-add-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

html.dark-mode .periph-add-create-btn {
    background: var(--color-surface);
}

.periph-add-create-btn:hover:not(:disabled),
.periph-add-create-btn:focus-visible:not(:disabled) {
    border-color: var(--color-accent);
    outline: none;
}

.periph-add-create-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.periph-add-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.periph-add-create-label {
    font-weight: 600;
}

.periph-add-create-box {
    color: var(--color-text-muted);
}

.periph-add-detail-doc {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-accent);
    text-decoration: none;
    text-align: right;
}

.periph-add-detail-doc:hover,
.periph-add-detail-doc:focus-visible {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .periph-add-detail-create-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .periph-add-detail-doc {
        margin-left: 0;
        text-align: left;
    }
}

.periph-add-detail-error,
.periph-add-detail-status,
.periph-add-detail-empty {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
}

.periph-add-detail-error {
    color: #b42318;
}

.periph-add-detail-status {
    color: var(--color-text-muted);
}

.periph-config-readonly {
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.periph-config-api-code-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.periph-config-api-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.periph-config-api-builder {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0.8125rem;
}

.periph-config-field--checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.periph-config-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.15rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.periph-config-help-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.periph-config-field-label .periph-config-help-btn {
    flex-shrink: 0;
}

.periph-config-field--readonly label {
    color: var(--color-text-muted);
}

.periph-config-fieldset--expert {
    margin-top: 0.65rem;
}

@media (max-width: 520px) {
    .periph-add-grid {
        grid-template-columns: 1fr;
    }

    .periph-add-header {
        padding: 0.85rem 0.75rem 0.7rem;
    }

    .periph-add-categories {
        padding: 0.55rem 0.55rem 0.85rem;
    }
}

.periph-list-heading {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-section-heading-text);
    background: var(--color-section-heading-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.periph-list-heading-text {
    font-weight: 500;
}

.periph-list-heading-actions {
    position: relative;
    flex-shrink: 0;
}

.periph-list-columns-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.periph-list-columns-gear:hover,
.periph-list-columns-gear:focus-visible {
    color: inherit;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.periph-list-columns-gear .zmdi {
    font-size: 1.125rem;
}

.periph-list-columns-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 30;
    min-width: 13rem;
    max-width: 18rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.periph-list-columns-popover.hidden {
    display: none;
}

.periph-list-columns-title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.periph-list-columns-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 16rem;
    overflow: auto;
}

.periph-list-columns-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--color-text);
    cursor: pointer;
}

.periph-list-columns-option input {
    margin: 0;
    flex-shrink: 0;
}

.periph-col-notes {
    max-width: 14rem;
    white-space: normal;
    word-break: break-word;
}

.periph-col-api {
    max-width: 10rem;
    white-space: normal;
    word-break: break-word;
}

.periph-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.periph-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.periph-table thead th {
    padding: 0.45rem 0.5rem;
    text-align: left;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.periph-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.periph-group-header td {
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
}

.periph-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.periph-group-toggle:hover,
.periph-group-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

html.dark-mode .periph-group-toggle:hover,
html.dark-mode .periph-group-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.periph-group-icon {
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-weight: 700;
    line-height: 1;
}

.periph-group.is-collapsed .periph-row {
    display: none;
}

.periph-col-photo {
    width: 56px;
}

.periph-photo {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}

.periph-col-room {
    min-width: 5.5rem;
}

.periph-col-name {
    min-width: 8rem;
    font-weight: 500;
}

.periph-col-battery {
    min-width: 5.5rem;
    white-space: nowrap;
}

.periph-battery {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.periph-col-contact,
.periph-col-radio {
    text-align: center;
    white-space: nowrap;
    min-width: 5.5rem;
}

.periph-status-ok {
    background-color: var(--color-success-bg);
}

.periph-status-pb {
    background-color: var(--color-status-error-bg);
    color: var(--color-on-accent);
}

.periph-status-na {
    background-color: var(--color-status-na-bg);
    color: var(--color-text);
}

.periph-status-warning {
    background-color: var(--color-status-warning-bg);
    color: var(--color-on-accent);
}

.periph-table tbody tr.periph-row:hover td:not(.periph-status-ok):not(.periph-status-pb):not(.periph-status-na):not(.periph-status-warning) {
    background: var(--color-row-hover);
}

@media (max-width: 640px) {
    .periph-table {
        font-size: 0.75rem;
        table-layout: fixed;
    }

    .periph-table thead th,
    .periph-table td {
        padding: 0.3rem 0.3rem;
    }

    .periph-photo,
    .periph-camera-thumb {
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
    }

    .periph-col-photo {
        width: 2.5rem;
        min-width: 2.5rem;
    }

    .periph-col-room {
        width: 18%;
        max-width: none;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .periph-col-name {
        width: 42%;
        max-width: none;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .periph-name-link {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .periph-col-battery {
        width: 1.75rem;
        max-width: 1.75rem;
        min-width: 1.75rem;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        text-align: center;
        overflow: hidden;
    }

    th.periph-col-battery {
        font-size: 0;
        line-height: 0;
    }

    th.periph-col-battery::after {
        content: 'Batt.';
        font-size: 0.7rem;
        line-height: 1.2;
        font-weight: 500;
    }

    .periph-battery {
        gap: 0;
        justify-content: center;
    }

    .periph-battery img {
        width: 18px;
        height: 7px;
    }

    .periph-battery-label {
        display: none;
    }

    .periph-col-contact {
        width: 28%;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.6875rem;
    }

    th.periph-col-contact {
        font-size: 0;
        line-height: 0;
    }

    th.periph-col-contact::after {
        content: 'Contact';
        font-size: 0.7rem;
        line-height: 1.2;
        font-weight: 500;
    }

    th.periph-col-radio,
    td.periph-col-radio {
        display: none;
    }
}

.periph-name-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--color-link);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.periph-name-link:hover,
.periph-name-link:focus-visible {
    color: var(--color-accent);
    outline: none;
}

/* Configuration périphérique */
.periph-config-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.periph-config-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    overflow-x: auto;
    scrollbar-width: none;
}

.periph-config-tabs::-webkit-scrollbar {
    display: none;
}

.periph-config-tabs-spacer {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

.periph-config-history-tab {
    flex-shrink: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.periph-config-history-tab:hover,
.periph-config-history-tab:focus-visible {
    color: var(--color-text);
    outline: none;
}

.periph-config-tab {
    border: none;
    background: transparent;
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    cursor: default;
    border-bottom: 2px solid transparent;
}

.periph-config-tab.active {
    background: var(--color-config-tab-active-bg);
    color: var(--color-text);
    border-bottom-color: var(--color-config-tab-active-border);
    font-weight: 500;
}

.periph-config-tab.disabled {
    opacity: 0.55;
}

.periph-config-tab[data-tab]:not(.disabled) {
    cursor: pointer;
}

.periph-config-panel {
    display: none;
}

.periph-config-panel.active {
    display: block;
    min-width: 0;
}

.periph-config-form {
    padding: 1rem;
}

.periph-config-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1rem 0.75rem;
    margin: 0 0 1rem;
}

.periph-config-fieldset legend {
    padding: 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.periph-config-photo-wrap {
    text-align: center;
    margin-bottom: 1rem;
}

.periph-config-photo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.periph-config-fieldset--caract {
    padding-top: 1.1rem;
}

.periph-config-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.periph-config-fieldset--caract .periph-config-photo-wrap {
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
}

.periph-config-fieldset--caract .periph-config-photo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md, 10px);
    display: block;
}

.periph-config-identity-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.periph-config-identity-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.periph-config-identity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.periph-config-identity-fields input[type="text"],
.periph-config-identity-row input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.9375rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.periph-config-active {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
}

.periph-config-active-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.periph-config-block {
    margin-bottom: 0.65rem;
}

.periph-config-block--notes {
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
}

.periph-config-fieldset--data .periph-config-data {
    border: none;
    padding: 0;
    background: transparent;
}

.periph-config-data {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.periph-config-data-row {
    display: grid;
    grid-template-columns: minmax(7rem, 9.5rem) 1fr;
    gap: 0.35rem 0.85rem;
    align-items: baseline;
}

.periph-config-data-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.periph-config-data-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    min-width: 0;
}

.periph-config-data-value strong {
    font-weight: 600;
}

.periph-config-data-date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.periph-config-data-battery {
    align-items: center;
}

.periph-config-battery-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.15rem;
}

.periph-config-block-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.periph-config-rooms-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.periph-config-rooms-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
}

.periph-config-block--rooms .periph-config-room {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.periph-config-block--rooms .periph-room-picker {
    gap: 0.35rem;
}

.periph-config-block--rooms .periph-room-picker-summary {
    align-items: center;
    padding: 0;
    gap: 0.4rem 0.55rem;
}

.periph-config-block--rooms .periph-room-tile {
    width: auto;
    min-width: 3.25rem;
    max-width: 5.5rem;
    padding: 0.1rem 0.15rem;
}

.periph-config-block--rooms .periph-room-picker-panel {
    width: 100%;
    min-width: min(100%, 18rem);
}

.periph-config-block-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.periph-config-rooms-title {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
}

.periph-config-rooms-title:hover,
.periph-config-rooms-title:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
    outline: none;
}

.periph-config-rooms-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.periph-config-rooms-gear:hover,
.periph-config-rooms-gear:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
}

.periph-config-rooms-gear .zmdi {
    font-size: 1rem;
}

.periph-config-notes {
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    background: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
}

.periph-config-fieldset--caract .periph-config-field {
    margin-bottom: 0.65rem;
}

@media (max-width: 480px) {
    .periph-config-identity {
        align-items: flex-start;
    }

    .periph-config-identity-row {
        flex-wrap: wrap;
    }

    .periph-config-fieldset--caract .periph-config-photo {
        width: 56px;
        height: 56px;
    }
}

.periph-config-field {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.periph-config-field label {
    text-align: right;
    font-weight: 500;
    font-size: 0.8125rem;
    padding-top: 0.45rem;
}

.periph-config-field-label {
    display: inline-block;
    text-align: right;
    line-height: 1.35;
}

.periph-config-field-label a {
    color: var(--color-link, #1a6fb5);
    text-decoration: none;
    white-space: nowrap;
}

.periph-config-field-label a:hover,
.periph-config-field-label a:focus-visible {
    text-decoration: underline;
}

.periph-config-field-label img.contextual_help,
.periph-config-field-label img.contextual_img {
    vertical-align: middle;
    margin-left: 0.15rem;
    cursor: help;
}

.periph-config-field-label img.contextual_help {
    width: 16px;
    height: 16px;
    background: url(/img/Help_shaded.png) center / contain no-repeat;
    object-fit: contain;
}

.periph-config-field-label img.contextual_help:hover {
    background-image: url(/img/Help.png);
}

.periph-help-dialog {
    max-width: min(92vw, 28rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.2));
}

.periph-help-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.periph-help-dialog-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
}

.periph-help-dialog-body {
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: min(60vh, 24rem);
    overflow: auto;
}

.periph-help-dialog-body.eedomus_help b,
.periph-help-dialog-body.eedomus_help strong {
    font-weight: 600;
}

.periph-help-dialog-close {
    align-self: flex-end;
}

.periph-config-field input[type="text"],
.periph-config-field select,
.periph-config-field textarea {
    width: 100%;
    max-width: 280px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.periph-config-field textarea {
    max-width: 100%;
    resize: vertical;
}

.periph-config-room {
    padding-top: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 100%;
}

.periph-room-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.periph-room-picker-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    cursor: pointer;
    padding: 0.15rem 0;
    border: none;
    background: none;
    text-align: left;
}

.periph-room-picker-summary:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
    border-radius: 4px;
}

.periph-room-picker-empty {
    color: var(--color-text-muted, #666);
    font-style: italic;
}

.periph-room-picker-panel.hidden {
    display: none;
}

.periph-room-picker-panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem 0.65rem;
}

.periph-room-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0;
}

.periph-room-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    transition: opacity 0.15s ease;
}

.periph-room-tile--muted {
    opacity: 0.35;
}

.periph-room-tile--primary .periph-room-tile-label {
    font-weight: 600;
}

.periph-room-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-image: var(--room-icon-bg);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.periph-room-tile-icon img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.periph-room-tile-label {
    font-size: 0.7rem;
    line-height: 1.2;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.periph-room-picker-actions {
    padding-top: 0.25rem;
}

.periph-room-picker-manage {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: underline;
}

.periph-room-picker-status {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #666);
}

.periph-room-picker-status:empty {
    display: none;
}

.periph-config-block--rooms {
    margin-bottom: 0.35rem;
}

.periph-config-block--rooms .loading-msg {
    margin: 0;
    font-size: 0.8125rem;
}

.periph-config-room img {
    vertical-align: middle;
}

.periph-config-linked {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding-top: 0.35rem;
}

.periph-linked-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: underline;
}

.periph-config-expert {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.periph-config-expert summary {
    cursor: pointer;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.periph-config-soon {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin: 0.5rem 0 0;
}

.periph-config-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.periph-config-actions-left,
.periph-config-actions-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.periph-config-actions-right {
    margin-left: auto;
}

.periph-config-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.periph-config-btn-icon-img {
    display: block;
    flex-shrink: 0;
}

.periph-config-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: linear-gradient(to bottom, #fafafa, #e8e8e8);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

html.dark-mode .periph-config-btn {
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.periph-config-btn:hover,
.periph-config-btn:focus-visible {
    border-color: #99bbe8;
    outline: none;
}

.periph-config-btn-danger {
    color: var(--color-danger);
}

.periph-config-btn-danger:hover,
.periph-config-btn-danger:focus-visible {
    color: var(--color-danger);
    border-color: #e8a8a8;
}

.periph-config-btn-save {
    background: linear-gradient(to bottom, #d4edbc, var(--color-btn-save));
    color: #333;
    border-color: #a8d87a;
    font-weight: 500;
}

.periph-config-btn-save:hover,
.periph-config-btn-save:focus-visible {
    background: var(--color-btn-save-hover);
    border-color: #98c86a;
}

.periph-config-status {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    min-height: 1.25rem;
}

.periph-config-status.is-error {
    color: var(--color-danger, #b42318);
}

.box-config-html img {
    vertical-align: middle;
}

.box-config-link {
    color: #858585;
    font-size: 0.8125rem;
    text-decoration: none;
}

.box-config-link:hover,
.box-config-link:focus-visible {
    text-decoration: underline;
}

/* Onglet Valeurs — valeurs possibles actionneur */
.periph-values-panel {
    padding: 1rem;
}

.periph-values-heading {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.periph-values-hidden-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.periph-values-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    background: var(--color-bg-muted);
    margin-bottom: 1rem;
}

.periph-values-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.periph-values-table th,
.periph-values-table td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.periph-values-table th {
    background: var(--color-surface);
    font-weight: 500;
    text-align: left;
    color: var(--color-text-muted);
}

.periph-values-table tbody tr:last-child td {
    border-bottom: none;
}

.periph-values-col-raw {
    width: 110px;
}

.periph-values-col-http-url {
    min-width: 180px;
}

.periph-values-col-http-type {
    width: 90px;
}

.periph-values-col-http-params {
    min-width: 160px;
}

.periph-values-http-type {
    width: 100%;
    min-width: 72px;
}

.periph-values-row.is-selected td {
    background: rgba(109, 132, 163, 0.1);
}

.periph-values-row--empty td {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.periph-values-params-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.periph-values-params-wrap .periph-values-http-params {
    flex: 1;
    min-width: 0;
}

.periph-values-params-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    cursor: pointer;
}

.periph-values-params-edit:hover,
.periph-values-params-edit:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.periph-values-params-dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
    max-width: min(42rem, 95vw);
    width: 42rem;
}

.periph-values-params-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.periph-values-params-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.periph-values-params-dialog-title {
    margin: 0;
    font-size: 1rem;
}

.periph-values-params-textarea {
    width: 100%;
    min-height: 14rem;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    resize: vertical;
}

.periph-values-params-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.periph-values-actions {
    width: 100%;
}

.periph-values-col-img {
    width: 72px;
    text-align: center;
}

.periph-values-col-exec {
    width: 6.5rem;
    text-align: center;
    white-space: nowrap;
}

.periph-values-exec-btn {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.periph-values-exec-btn:hover:not(:disabled),
.periph-values-exec-btn:focus-visible:not(:disabled) {
    background: var(--color-bg-muted);
}

.periph-values-exec-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.periph-values-input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.periph-values-input[readonly] {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.periph-value-icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.periph-value-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    vertical-align: middle;
}

.periph-value-icon-btn:hover,
.periph-value-icon-btn:focus-visible {
    background: var(--color-row-highlight);
    outline: none;
}

.periph-value-icon-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.periph-value-icon-bg,
.periph-value-icon-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Onglet Macros */
.periph-macros-view {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
}

.periph-macros-main {
    min-width: 0;
    max-width: 100%;
}

.periph-macros-saved {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    padding: 1rem;
    box-sizing: border-box;
}

.periph-macros-saved-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-bottom: 0.75rem;
}

.periph-macros-saved-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.periph-macro-fieldset legend,
.periph-macro-fieldset-legend {
    font-weight: 500;
    padding: 0 0.35rem;
}

.periph-macro-fieldset-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
}

.periph-macro-fieldset-label {
    color: var(--color-text);
}

.periph-macro-current-name {
    font-weight: 600;
    color: var(--color-accent-teal, var(--color-accent));
}

.periph-macro-current-name::before {
    content: "—";
    margin-right: 0.65rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.periph-macro-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: var(--color-bg-muted);
    min-width: 0;
    max-width: 100%;
}

.periph-macro-steps {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.periph-macro-step {
    min-width: 0;
}

.periph-macro-step-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    padding: 0.35rem 0;
}

.periph-macro-step-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.periph-macro-step-wait {
    width: 4rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}

.periph-macro-step-unit {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    background: var(--color-surface);
    min-width: 5.25rem;
    flex-shrink: 0;
}

.periph-macro-step-action {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    background: var(--color-surface);
    min-width: 5rem;
    flex: 1 1 0;
    max-width: 10rem;
}

.periph-macro-step-dynamic {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.periph-macro-step-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}

.periph-macro-step-up,
.periph-macro-step-down {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.periph-macro-step-del {
    border: 1px solid #d88;
    background: linear-gradient(to bottom, #f8d8d8, #e8a8a8);
    color: #8b0000;
    border-radius: var(--radius-sm);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

html.dark-mode .periph-macro-step-del {
    background: linear-gradient(to bottom, #5a3030, #4a2020);
    border-color: #8a5050;
    color: #ffb0b0;
}

.periph-macro-step-up:hover,
.periph-macro-step-up:focus-visible,
.periph-macro-step-down:hover,
.periph-macro-step-down:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.periph-macro-step-del:hover,
.periph-macro-step-del:focus-visible {
    background: linear-gradient(to bottom, #f0c0c0, #d89898);
    border-color: #c66;
    outline: none;
}

html.dark-mode .periph-macro-step-del:hover,
html.dark-mode .periph-macro-step-del:focus-visible {
    background: linear-gradient(to bottom, #6a3838, #5a2828);
    border-color: #a06060;
}

.periph-macro-add-step-btn {
    margin-top: 0.25rem;
}

.periph-macro-sequence-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.periph-macro-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.periph-macro-bottom-bar .periph-macro-playback {
    margin-top: 0;
    margin-left: auto;
}

.periph-macro-hide {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.periph-macro-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.periph-macro-meta-label {
    min-width: 110px;
    color: var(--color-text-muted);
}

.periph-macro-icon-wrap {
    position: relative;
    width: 48px;
    height: 48px;
}

.periph-macro-icon-bg,
.periph-macro-icon-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.periph-macro-api-id {
    font-weight: 500;
    color: var(--color-text);
}

.periph-macro-playback {
    margin-top: 0.5rem;
}

.periph-macro-running {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.periph-macros-action {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
}

.periph-macros-action:hover,
.periph-macros-action:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.periph-macros-action-add {
    background: linear-gradient(to bottom, #d4edbc, var(--color-btn-save));
    color: #333;
    border-color: #a8d87a;
    font-weight: 500;
    white-space: nowrap;
}

.periph-macros-action-add:hover,
.periph-macros-action-add:focus-visible {
    background: var(--color-btn-save-hover);
    border-color: #98c86a;
}

.periph-macros-action-del {
    background: linear-gradient(to bottom, #f8d8d8, #e8a8a8);
    color: #8b0000;
    border-color: #d88;
    font-weight: 500;
}

.periph-macros-action-del:hover,
.periph-macros-action-del:focus-visible {
    background: linear-gradient(to bottom, #f0c0c0, #d89898);
    border-color: #c66;
}

html.dark-mode .periph-macros-action-add {
    color: #1a2a10;
}

html.dark-mode .periph-macros-action-del {
    background: linear-gradient(to bottom, #5a3030, #4a2020);
    border-color: #8a5050;
    color: #ffb0b0;
}

html.dark-mode .periph-macros-action-del:hover,
html.dark-mode .periph-macros-action-del:focus-visible {
    background: linear-gradient(to bottom, #6a3838, #5a2828);
    border-color: #a06060;
}

.periph-macro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.periph-macro-list-row {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    border-radius: var(--radius-sm);
}

.periph-macro-list-row.is-selected {
    background: var(--color-section-heading-bg);
}

.periph-macro-list-item {
    flex: 1;
    min-width: 0;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-text);
}

.periph-macro-list-rename {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    width: 2rem;
    height: 2rem;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-text);
}

.periph-macro-list-rename:hover,
.periph-macro-list-rename:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.periph-macro-list-item:hover,
.periph-macro-list-item:focus-visible {
    background: var(--color-surface);
    outline: none;
}

.periph-macro-list-item.is-selected {
    font-weight: 500;
}

.periph-macro-list-item.is-active {
    color: var(--color-accent-teal);
}

@media (max-width: 640px) {
    .periph-config-field {
        grid-template-columns: 1fr;
    }

    .periph-config-field label {
        text-align: left;
        padding-top: 0;
    }
}

/* Mini widgets (liste périphériques d'une pièce) */
.room-widgets-view {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* Mode plan — widgets positionnés sur fond (legacy m.eedomus) */
.main-content:has(.room-plan-view:not(.hidden)),
.main-content:has(.room-tile-view:not(.hidden)) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100dvh;
    min-height: 100dvh;
    padding-top: var(--header-height, 3.25rem);
}

.content-area:has(.room-plan-view:not(.hidden)),
.content-area:has(.room-tile-view:not(.hidden)) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

#home:has(.room-plan-view:not(.hidden)),
#home:has(.room-tile-view:not(.hidden)) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.room-plan-view {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.room-plan-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.room-plan-canvas {
    position: relative;
    width: 100%;
    min-height: 100%;
}

.room-plan-bg {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.room-plan-bg-img {
    display: none;
}

.room-plan-widgets {
    position: relative;
    width: 100%;
    min-height: 100%;
    z-index: 5;
}

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

.plan-widget {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0.35rem 0.45rem;
    border: none;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.plan-widget:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.room-plan-widgets--unlocked .plan-widget--draggable {
    cursor: grab;
    touch-action: none;
}

.plan-widget--draggable.plan-widget--dragging {
    cursor: grabbing;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.plan-widget-title {
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-widget-body {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    min-height: 3rem;
}

.plan-widget-icon {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    line-height: 0;
}

.plan-widget-icon-img,
.plan-widget-icon img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 2.75rem;
    object-fit: contain;
    background: none;
}

.plan-widget--size-1 .plan-widget-icon,
.plan-widget--size-1 .plan-widget-icon img {
    min-height: 3rem;
}

.plan-widget--size-2 .plan-widget-icon,
.plan-widget--size-2 .plan-widget-icon img {
    min-height: 3.35rem;
}

.plan-widget--size-3 .plan-widget-icon,
.plan-widget--size-3 .plan-widget-icon img {
    min-height: 3.75rem;
}

.plan-widget--size-4 .plan-widget-icon,
.plan-widget--size-4 .plan-widget-icon img {
    min-height: 4.25rem;
}

.plan-widget-value {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    align-self: center;
    padding-top: 0.15rem;
}

.plan-widget-duration {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    opacity: 0.9;
    clear: both;
}

.plan-widget--camera {
    display: block;
    min-height: 4.5rem;
    padding: 0.3rem 0.35rem;
    box-sizing: border-box;
}

.plan-widget--camera .plan-widget-title {
    margin-bottom: 0.25rem;
}

.plan-widget--camera .plan-widget-camera-preview {
    display: block;
    width: 100%;
    line-height: 0;
    min-height: 3.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.plan-widget--camera .plan-widget-camera-preview img {
    display: block;
    width: 75%;
    max-width: 100%;
    height: auto;
    max-height: 12rem;
    margin: 0 auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.plan-widget--camera .plan-widget-camera-preview--empty {
    aspect-ratio: 4 / 3;
    width: 75%;
    margin: 0 auto;
}

.plan-widget--camera .plan-widget-duration {
    margin-top: 0.25rem;
}

/* Mode tuile — grille 3 ou 6 cases (legacy m.eedomus) */
.room-tile-view {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: visible;
}

.room-tile-help {
    position: absolute;
    z-index: 30;
    margin: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.35);
}

.room-tile-help[data-tooltip]:hover::after,
.room-tile-help[data-tooltip]:focus::after,
.room-tile-help[data-tooltip]:focus-visible::after {
    position: fixed;
    z-index: 2300;
    max-width: min(18rem, var(--tile-help-bubble-max, 18rem), calc(100vw - 1.5rem));
}

.room-tile-help[data-tooltip]:hover::before,
.room-tile-help[data-tooltip]:focus::before,
.room-tile-help[data-tooltip]:focus-visible::before {
    position: fixed;
    z-index: 2301;
}

.room-tile-help.room-tile-help--right[data-tooltip]:hover::after,
.room-tile-help.room-tile-help--right[data-tooltip]:focus::after,
.room-tile-help.room-tile-help--right[data-tooltip]:focus-visible::after {
    left: calc(var(--tile-help-right, 0px) + 0.45rem);
    top: var(--tile-help-cy, 50%);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}

.room-tile-help.room-tile-help--right[data-tooltip]:hover::before,
.room-tile-help.room-tile-help--right[data-tooltip]:focus::before,
.room-tile-help.room-tile-help--right[data-tooltip]:focus-visible::before {
    left: calc(var(--tile-help-right, 0px) + 0.1rem);
    top: var(--tile-help-cy, 50%);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #2c3340;
}

.room-tile-help.room-tile-help--left[data-tooltip]:hover::after,
.room-tile-help.room-tile-help--left[data-tooltip]:focus::after,
.room-tile-help.room-tile-help--left[data-tooltip]:focus-visible::after {
    left: auto;
    right: calc(var(--tile-help-inset-left, 0px) + 0.45rem);
    top: var(--tile-help-cy, 50%);
    bottom: auto;
    transform: translateY(-50%);
}

.room-tile-help.room-tile-help--left[data-tooltip]:hover::before,
.room-tile-help.room-tile-help--left[data-tooltip]:focus::before,
.room-tile-help.room-tile-help--left[data-tooltip]:focus-visible::before {
    left: auto;
    right: calc(var(--tile-help-inset-left, 0px) + 0.1rem);
    top: var(--tile-help-cy, 50%);
    bottom: auto;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #2c3340;
    border-right-color: transparent;
}

.room-tile-help.room-tile-help--top[data-tooltip]:hover::after,
.room-tile-help.room-tile-help--top[data-tooltip]:focus::after,
.room-tile-help.room-tile-help--top[data-tooltip]:focus-visible::after {
    left: auto;
    right: var(--tile-help-inset-right, 0.55rem);
    top: auto;
    bottom: calc(var(--tile-help-inset-bottom, 0px) + 0.45rem);
    transform: none;
}

.room-tile-help.room-tile-help--top[data-tooltip]:hover::before,
.room-tile-help.room-tile-help--top[data-tooltip]:focus::before,
.room-tile-help.room-tile-help--top[data-tooltip]:focus-visible::before {
    left: calc(var(--tile-help-cx, 0px) - 5px);
    right: auto;
    top: auto;
    bottom: calc(var(--tile-help-inset-bottom, 0px) + 0.05rem);
    transform: none;
    border: 5px solid transparent;
    border-top-color: #2c3340;
    border-right-color: transparent;
}

.room-tile-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.room-tile-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.room-tile-grid-host {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.room-tile-grid {
    display: grid;
    gap: 0.35rem;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.room-tile-grid--landscape {
    aspect-ratio: 3 / 2;
}

.room-tile-grid--portrait {
    aspect-ratio: 2 / 3;
}

.room-tile-grid--6.room-tile-grid--landscape {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.room-tile-grid--6.room-tile-grid--portrait {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.room-tile-grid--3.room-tile-grid--landscape {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.room-tile-grid--3.room-tile-grid--landscape .room-tile-cell:first-child {
    grid-row: span 2;
}

.room-tile-grid--3.room-tile-grid--portrait {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
}

.room-tile-grid--3.room-tile-grid--portrait .room-tile-cell:first-child {
    grid-column: span 2;
}

.room-tile-cell {
    container-type: size;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.room-tile-cell--empty {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.room-tile-cell--split {
    padding: 0;
}

.room-tile-subgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.room-tile-subgrid .room-tile-cell {
    min-width: 0;
    min-height: 0;
}

.room-tile-subgrid .plan-widget--tile {
    padding: 2.5cqmin;
    font-size: clamp(10px, 4.5cqmin, 22px);
}

.room-tile-cell .plan-widget,
.plan-widget--tile {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 4cqmin;
    font-size: clamp(14px, 6cqmin, 36px);
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
}

.plan-widget--tile .plan-widget-title {
    flex: 0 0 auto;
    margin: 0 0 0.15em;
    font-size: 0.82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-widget--tile .plan-widget-body--tile {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.2em;
}

.plan-widget--tile .plan-widget-icon--tile-fill {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-widget--tile .plan-widget-icon--tile-fill img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.plan-widget--tile .plan-widget-icon--camera img {
    object-fit: cover;
}

.plan-widget--tile .plan-widget-value {
    flex: 0 0 auto;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.plan-widget--tile .plan-widget-body--tile > .plan-widget-value:only-child {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
}

.plan-widget--tile .plan-widget-duration {
    flex: 0 0 auto;
    margin-top: auto;
    font-size: 0.72em;
    opacity: 0.95;
    text-align: center;
}

.plan-widget--tile .plan-widget-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.plan-widget--tile .plan-widget-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plan-widget--tile .plan-widget-overlay {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.15em;
    padding: 0.1em 0;
    background: none;
}

.plan-widget--tile .plan-widget-overlay .plan-widget-title,
.plan-widget--tile .plan-widget-overlay .plan-widget-value,
.plan-widget--tile .plan-widget-overlay .plan-widget-duration {
    text-shadow: none;
}

.plan-widget--tile .plan-widget-overlay .plan-widget-duration {
    margin-top: 0;
}

/* Menu affichage pièce (trois tirets, legacy m.eedomus) — même pattern que .favorites-panel */
#room-view-menu-dismiss {
    display: none;
    position: fixed;
    top: var(--header-height, 3.25rem);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2490;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

#room-view-menu-dismiss.open,
#room-view-menu-dismiss.is-open {
    display: block;
    pointer-events: auto;
}

#room-view-menu {
    position: fixed;
    top: var(--header-height, 3.25rem);
    right: 0;
    bottom: 0;
    width: min(320px, 90vw);
    z-index: 2500;
    background: var(--color-surface, #fff);
    color: var(--color-text);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    visibility: hidden;
    overflow-y: auto;
    pointer-events: none;
}

#room-view-menu.open,
#room-view-menu.is-open {
    transform: translateX(0);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    visibility: visible;
    pointer-events: auto;
}

.room-view-menu-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
}

.room-view-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.room-view-menu-item:hover:not(:disabled),
.room-view-menu-item:focus-visible:not(:disabled) {
    background: var(--color-bg-muted);
}

.room-view-menu-item.is-active span {
    font-weight: 700;
}

.room-view-menu-item--disabled,
.room-view-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.room-view-menu-item i.zmdi:first-child {
    width: 1.5rem;
    text-align: center;
    font-size: 1.25rem;
    color: var(--color-text-muted);
}

.room-view-menu-chevron {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.room-view-menu-section {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0.15rem;
}

.room-view-menu-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-right: 0.35rem;
}

.room-view-menu-section-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.room-view-menu-section-toggle:hover,
.room-view-menu-section-toggle:focus-visible {
    background: var(--color-bg-muted);
    color: inherit;
}

.room-view-menu-section-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.room-view-menu-section-toggle.is-collapsed {
    opacity: 0.55;
}

.room-view-menu-submenu.is-collapsed > li:not(.room-view-menu-section--plan-edition) {
    display: none;
}

.room-view-menu-section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.room-view-menu-item-emphasis {
    font-weight: 700;
}

.room-view-menu-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.15rem 1.35rem;
    border-left: 2px solid rgba(0, 0, 0, 0.06);
    margin-left: 1.15rem;
}

.room-view-menu-plan-edition.hidden {
    display: none;
}

/* Pop-up édition mode plan (legacy #popup_plan_mode add_del_wdg) */
.plan-edit-dialog {
    width: min(92vw, 24rem);
    max-height: min(88vh, 32rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.22));
}

.plan-edit-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.plan-edit-form {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 32rem);
}

.plan-edit-header {
    padding: 1rem 1.15rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.plan-edit-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
}

.plan-edit-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 1.15rem;
}

.plan-edit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-edit-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.plan-edit-row:last-child {
    border-bottom: none;
}

.plan-edit-row-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    cursor: pointer;
}

.plan-edit-checkbox {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.plan-edit-row-name {
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.35;
}

.plan-edit-empty {
    margin: 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.plan-edit-error {
    margin: 0 0 0.75rem;
    color: var(--color-danger, #c0392b);
    font-size: 0.85rem;
}

.plan-edit-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.85rem 1.15rem 1rem;
    border-top: 1px solid var(--color-border);
}

.plan-edit-actions--save-block {
    justify-content: stretch;
}

.plan-bg-save--wide {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.plan-bg-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0.25rem;
}

.plan-bg-link {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.plan-bg-link:hover,
.plan-bg-link:focus-visible {
    color: var(--color-accent);
}

.plan-bg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

.plan-bg-row span {
    flex: 1 1 auto;
    font-size: 0.92rem;
}

.plan-bg-row select,
.plan-bg-row input[type="color"] {
    flex: 0 0 auto;
}

.plan-bg-row--checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.plan-bg-row--color input[type="color"] {
    width: 2.5rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.plan-bg-picker-dialog {
    width: min(92vw, 36rem);
}

.plan-bg-picker-grid-wrap {
    min-height: 5rem;
}

.plan-bg-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.65rem;
}

.plan-bg-picker-item {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--color-bg-muted);
    cursor: pointer;
    overflow: hidden;
}

.plan-bg-picker-item:hover,
.plan-bg-picker-item:focus-visible {
    border-color: var(--color-accent);
}

.plan-bg-picker-item img {
    display: block;
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.plan-tpl-select-item {
    display: block;
    width: 100%;
    padding: 0.65rem 0.35rem;
    border: none;
    background: transparent;
    color: var(--color-accent, #2563eb);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.plan-tpl-select-item:hover,
.plan-tpl-select-item:focus-visible {
    text-decoration: underline;
}

.plan-tpl-select-list .plan-edit-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.plan-tpl-dialog .plan-edit-body {
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}

.room-actions-view,
.room-chart-view {
    background: transparent;
}

.mini-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.mini-widget-list > li {
    border-bottom: none;
    min-width: 0;
}

/* Panneau pièce — colonnes indépendantes, largeur min 280 px puis partage de l'espace */
.mini-widget-list--columns {
    display: grid;
    grid-template-columns: repeat(var(--widget-cols, 1), minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.mini-widget-column {
    min-width: 0;
}

.mini-widget-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mini-widget-column-list > li {
    min-width: 0;
}

.mini-widget {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
    font-family: inherit;
    text-align: left;
    position: relative;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.mini-widget-icon-btn,
.mini-widget-body {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.mini-widget-icon-btn {
    flex-shrink: 0;
    border-radius: 8px;
    transition: opacity var(--transition);
}

.mini-widget-icon-btn:hover,
.mini-widget-icon-btn:focus-visible {
    opacity: 0.85;
    outline: none;
}

.mini-widget-body {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-right: 1.25rem;
}

.mini-widget-body::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid var(--color-text-light);
    border-bottom: 1.5px solid var(--color-text-light);
    transform: rotate(-45deg);
    opacity: 0.7;
}

html.dark-mode .mini-widget {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mini-widget:hover,
.mini-widget:focus-within {
    border-color: rgba(3, 169, 244, 0.18);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

html.dark-mode .mini-widget:hover,
html.dark-mode .mini-widget:focus-within {
    border-color: rgba(41, 182, 246, 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2);
}

.mini-widget-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-widget-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background-size: 44px 44px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}

.mini-widget-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.2rem;
}

.mini-widget-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.mini-widget-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.mini-widget-value {
    font-weight: 500;
    color: var(--color-text);
}

.mini-widget-duration {
    font-weight: 400;
    margin-left: 0.3rem;
    color: var(--color-text-light);
}

.mini-widget-empty {
    grid-column: 1 / -1;
    padding: 1.25rem 1rem;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mini-widget-empty p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Actionneur inline (legacy secure : replié → liste au clic) */
.widget-card--actuator {
    list-style: none;
}

.actuator-widget {
    width: 100%;
}

button.mini-widget.mini-widget--actuator {
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.mini-widget--actuator {
    position: relative;
    padding-right: 1.75rem;
}

.mini-widget--actuator::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid var(--color-text-light);
    border-bottom: 1.5px solid var(--color-text-light);
    transform: rotate(-45deg);
    opacity: 0.7;
    pointer-events: none;
}

.mini-widget--actuator .mini-widget-text {
    flex: 1;
    min-width: 0;
}

.widget-card--actuator-expanded .actuator-widget {
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

html.dark-mode .widget-card--actuator-expanded .actuator-widget {
    border-color: rgba(255, 255, 255, 0.08);
}

.actuator-expanded-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 2.75rem 0.55rem 0.75rem;
    background: rgba(109, 132, 163, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html.dark-mode .actuator-expanded-header {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.actuator-expanded-title {
    margin: 0;
    padding: 0.15rem 0.35rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
    cursor: pointer;
    max-width: calc(100% - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actuator-expanded-title:hover,
.actuator-expanded-title:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

html.dark-mode .actuator-expanded-title:hover,
html.dark-mode .actuator-expanded-title:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.actuator-expanded-tools {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.actuator-expanded-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    cursor: pointer;
}

.actuator-expanded-tool:hover,
.actuator-expanded-tool:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}

html.dark-mode .actuator-expanded-tool:hover,
html.dark-mode .actuator-expanded-tool:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.actuator-expanded-body {
    padding: 0.35rem 0.5rem 0.55rem;
}

.widget-actuator-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.widget-actuator-actions > li {
    min-width: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.widget-actuator-actions > li:last-child {
    border-bottom: none;
}

html.dark-mode .widget-actuator-actions > li {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.widget-actuator-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.35rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    color: #666;
}

html.dark-mode .widget-actuator-action {
    color: var(--color-text-muted);
}

.widget-actuator-action:hover,
.widget-actuator-action:focus-visible {
    background: var(--color-bg-muted);
}

.widget-actuator-action--active {
    color: var(--color-text);
}

.widget-actuator-action-icon {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.widget-actuator-action-icon-bg,
.widget-actuator-action-icon-img {
    position: absolute;
    inset: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.widget-actuator-action-icon-img {
    z-index: 1;
}

.widget-actuator-action-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    padding-left: 0.25rem;
}

.widget-actuator-action-label strong {
    font-weight: 700;
    color: var(--color-text);
}

.widget-actuator-action-label--macro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.widget-actuator-macro-input {
    width: 3rem;
    padding: 0.1rem 0.3rem;
    font: inherit;
    font-size: 0.875rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background: var(--color-surface);
}

.widget-actuator-current {
    font-size: inherit;
    color: #666;
    font-weight: 400;
}

html.dark-mode .widget-actuator-current {
    color: var(--color-text-muted);
}

/* Mode configuration pièce — widgets allongés avec bandeau titre */
.widget-config-shell {
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

html.dark-mode .widget-config-shell {
    border-color: rgba(255, 255, 255, 0.08);
}

.widget-config-header-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    max-width: calc(100% - 1rem);
}

.widget-config-header-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.widget-config-body {
    display: block;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

html.dark-mode .widget-config-body {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.widget-config-body--sensor {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.widget-config-body--sensor:hover,
.widget-config-body--sensor:focus-visible,
.widget-config-body--camera:hover,
.widget-config-body--camera:focus-visible {
    background: var(--color-bg-muted);
}

.widget-config-body--camera {
    padding: 0.5rem 0.65rem 0.65rem;
}

.widget-config-body--camera .camera-image-wrap {
    width: 100%;
}

.widget-config-body--camera .camera-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.widget-config-body--chart {
    padding: 0;
    cursor: default;
}

.widget-config-body--chart .widget-card-inner {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.widget-card--config-layout {
    list-style: none;
}

.mini-widget-list--config-mode .widget-card--actuator-expanded .actuator-widget {
    border: none;
    box-shadow: none;
}

/* Vue actions actionneur (liste des valeurs / macros) */
.room-actions-view {
    padding: 0;
}

.periph-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.periph-action-list > li {
    list-style: none;
    min-width: 0;
}

.periph-action-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

html.dark-mode .periph-action-row {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.periph-action-row:hover,
.periph-action-row:focus-visible {
    border-color: rgba(3, 169, 244, 0.18);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    outline: none;
}

html.dark-mode .periph-action-row:hover,
html.dark-mode .periph-action-row:focus-visible {
    border-color: rgba(41, 182, 246, 0.25);
}

.periph-action-row-nav {
    padding-right: 2rem;
    position: relative;
}

.periph-action-feedback {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
}

.periph-action-feedback.is-error {
    color: var(--color-danger, #c62828);
}

.periph-action-row-nav::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid var(--color-text-light);
    border-bottom: 1.5px solid var(--color-text-light);
    transform: rotate(-45deg);
    opacity: 0.7;
}

.periph-action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.periph-action-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}

.periph-action-icon--layered .periph-action-icon-overlay {
    position: absolute;
    transform: translate(5px, 5px);
}

.periph-action-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.periph-action-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.periph-action-label--macro {
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.periph-action-current {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.periph-action-macro-input {
    width: 3.25rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;
}

.periph-action-empty {
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    list-style: none;
}

/* Widgets panneau — cartes (graphe, image, simple) */
.widget-card {
    list-style: none;
    min-width: 0;
}

.widget-card-inner {
    display: block;
    width: 100%;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition);
}

.widget-card-inner:hover,
.widget-card-inner:focus-visible {
    box-shadow: var(--shadow-card-hover);
    outline: none;
}

.widget-card-header {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.widget-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
}

.widget-card-now {
    margin: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.widget-card-value {
    color: var(--color-text);
    font-weight: 500;
}

.widget-card-chart {
    min-height: 169px;
    padding: 0.25rem 0.35rem 0.5rem;
}

.widget-card-chart.loading-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.widget-chart-fallback {
    margin: 0;
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Widgets agenda / programmation (types touchscreen, wizard) */
.widget-card--touchscreen,
.widget-card--wizard {
    list-style: none;
}

.widget-touchscreen-card,
.widget-wizard-card {
    padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
}

.widget-touchscreen-header,
.widget-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.widget-touchscreen-title,
.widget-wizard-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.widget-touchscreen-duration {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.widget-touchscreen-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.widget-touchscreen-actions > li {
    min-width: 0;
}

.widget-touchscreen-action {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.widget-touchscreen-action:hover,
.widget-touchscreen-action:focus-visible {
    background: var(--color-bg-muted);
}

.widget-touchscreen-action--active {
    background: rgba(109, 132, 163, 0.08);
}

.widget-touchscreen-action-label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.widget-touchscreen-current {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Empilement icônes MDM (legacy secure : fond + icône + check_yes/check_no) */
.widget-mdm-icon-stack {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.widget-mdm-icon-bg,
.widget-mdm-icon-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.widget-mdm-icon-check {
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    object-fit: contain;
    pointer-events: none;
}

.widget-wizard-header .widget-mdm-icon-stack {
    width: 48px;
    height: 48px;
}

.widget-wizard-header .widget-mdm-icon-check {
    right: -4px;
    bottom: -2px;
}

.widget-wizard-body {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.widget-wizard-body.loading-msg {
    min-height: 1.5rem;
}

/* Room detail — camera cards (layout mobile m.eedomus) */
.room-camera-card {
    list-style: none;
}

.room-camera-card-inner {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.room-camera-card-inner:hover,
.room-camera-card-inner:focus-visible {
    outline: none;
    box-shadow: var(--shadow-card-hover);
}

.room-camera-card .camera-card-header {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.cam-subtitle {
    margin: 0;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.camera-no-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Periph list — camera thumbnail */
.periph-camera-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #888;
}

/* Graphes périphérique (valeurs + périodes) */
.room-chart-view {
    background: transparent;
    border: none;
    box-shadow: none;
}

.periph-chart-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.dark-mode .periph-chart-view {
    border-color: rgba(255, 255, 255, 0.08);
}

.periph-chart-linked-wrap.hidden {
    display: none;
}

.periph-chart-linked {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem 0.85rem 0.35rem;
    border-top: 1px solid var(--color-border);
}

.periph-chart-linked-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.periph-chart-linked-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.periph-chart-body {
    min-height: 0;
}

.periph-value-tabs,
.periph-period-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.periph-period-tabs-spacer {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

.periph-config-tab {
    flex-shrink: 0;
}

.periph-value-tabs::-webkit-scrollbar,
.periph-period-tabs::-webkit-scrollbar {
    display: none;
}

.periph-value-tab,
.periph-period-tab {
    flex: 0 0 auto;
    padding: 0.7rem 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}

.periph-value-tab:hover,
.periph-period-tab:hover,
.periph-value-tab:focus-visible,
.periph-period-tab:focus-visible {
    color: var(--color-text);
    outline: none;
}

.periph-value-tab.active,
.periph-period-tab.active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

.periph-period-tab-curves {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    text-decoration: none;
}

.periph-period-tab-curves .zmdi {
    font-size: 1.05rem;
}

.periph-chart-curves-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.periph-chart-curves-link:hover .periph-chart-container,
.periph-chart-curves-link:focus-visible .periph-chart-container {
    outline: 2px solid var(--color-accent, #6d84a3);
    outline-offset: 2px;
}

.periph-chart-panel {
    padding: 0.5rem 0.25rem 0.75rem;
    min-height: 340px;
}

.periph-chart-container {
    width: 100%;
    min-height: 320px;
}

.periph-chart-msg {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.periph-chart-history {
    padding: 1.5rem 1rem;
}

.periph-chart-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
}

.periph-chart-image-preview {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #888;
    border-radius: var(--radius-sm, 4px);
}

.periph-chart-image-legend {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Onglet IMAGE — live/dernière en haut, historique en bas */
.camera-images-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem;
}

.camera-images-hero {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

.camera-images-mode-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.camera-images-mode-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.camera-images-playback {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.camera-images-playback-btn {
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    min-width: 2.1rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.camera-images-playback-btn:hover:not(:disabled),
.camera-images-playback-btn:focus-visible:not(:disabled) {
    border-color: var(--color-link);
    color: var(--color-link);
    outline: none;
}

.camera-images-playback-btn-active {
    border-color: var(--color-link);
    color: var(--color-link);
    background: rgba(3, 169, 244, 0.08);
}

.camera-images-playback-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.camera-images-mode-btn {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.camera-images-mode-btn:hover,
.camera-images-mode-btn:focus-visible {
    border-color: var(--color-link);
    color: var(--color-link);
    outline: none;
}

.camera-images-mode-btn-active {
    border-color: var(--color-link);
    color: var(--color-link);
    background: rgba(3, 169, 244, 0.08);
}

.camera-images-mode-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.camera-images-mode-btn-capture {
    min-width: 2.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.camera-images-mode-btn-capture .zmdi {
    font-size: 1.15rem;
    line-height: 1;
    vertical-align: middle;
}

.camera-images-mode-btn-video {
    min-width: 2.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.camera-images-mode-btn-video .zmdi {
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: middle;
}

.camera-images-video-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.65rem 0 0.25rem;
}

.camera-images-video-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.camera-images-video-date {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text);
}

.camera-images-video-generate {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-link);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-link);
    color: #fff;
    cursor: pointer;
}

.camera-images-video-generate:hover,
.camera-images-video-generate:focus-visible {
    filter: brightness(1.05);
    outline: none;
}

.camera-images-video-generate:disabled {
    opacity: 0.55;
    cursor: default;
    filter: none;
}

.camera-images-video-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.5rem 0.75rem;
    text-align: center;
}

.camera-images-video-status {
    margin: 0;
    min-height: 1.25em;
    color: var(--color-text);
    font-size: 0.95rem;
}

.camera-images-video-indication {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.camera-images-video-player {
    width: 100%;
    max-width: 640px;
    margin-top: 0.5rem;
}

.camera-images-video-player video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #000;
    border-radius: var(--radius-sm, 4px);
}

.camera-images-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.camera-images-history-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.camera-images-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.camera-images-field select {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text);
    max-width: 11rem;
}

.camera-images-field-filter select {
    max-width: 14rem;
}

.camera-images-mvt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text-muted);
    user-select: none;
}

.camera-images-mvt-toggle .zmdi {
    font-size: 1.25rem;
    line-height: 1;
}

.camera-images-mvt-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-accent, #6d84a3);
    cursor: pointer;
}

.camera-images-mvt-toggle:hover,
.camera-images-mvt-toggle:focus-within {
    border-color: var(--color-accent, #6d84a3);
    outline: none;
}

.camera-images-mvt-toggle-on {
    color: var(--color-accent, #6d84a3);
    border-color: var(--color-accent, #6d84a3);
}

.camera-images-refresh {
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text-muted);
}

.camera-images-refresh:hover,
.camera-images-refresh:focus-visible {
    border-color: var(--color-link);
    color: var(--color-link);
    outline: none;
}

.camera-images-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.camera-images-preview-empty {
    padding: 1rem 0;
}

.camera-images-preview-img {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #888;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
}

.camera-images-preview-legend {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.camera-images-status {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

.camera-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.camera-images-tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-muted);
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    text-align: left;
}

.camera-images-tile-media {
    position: relative;
    display: block;
    width: 100%;
}

.camera-images-tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #888;
}

/* DEBUG provisoire : fichier image sans point luminosité chart_data */
.camera-images-tile-no-lum {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e88e5;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}

.camera-images-tile-footer {
    padding: 0.2rem 0.35rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-images-tile-active {
    border-color: var(--color-link);
}

.camera-images-tile:hover,
.camera-images-tile:focus-visible {
    border-color: rgba(3, 169, 244, 0.45);
    outline: none;
}

.camera-images-empty {
    padding: 1rem 0;
    text-align: center;
}

.camera-images-preview-img--zoomable {
    cursor: zoom-in;
}

/* -- Lightbox historique images caméra (legacy secure) -- */
body.camera-image-lightbox-open {
    overflow: hidden;
}

.camera-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.camera-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.camera-image-lightbox-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(96vw, 920px);
    max-height: min(92vh, 720px);
    border: 1px solid #8eb4d8;
    border-radius: 4px;
    background: #d9e8f5;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    touch-action: none;
}

.camera-image-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.55rem 0.45rem 0.75rem;
    background: linear-gradient(180deg, #e8f2fa 0%, #d9e8f5 100%);
    border-bottom: 1px solid #8eb4d8;
    cursor: move;
    user-select: none;
}

.camera-image-lightbox-info {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a4f8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-image-lightbox-close {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #555;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.camera-image-lightbox-close:hover,
.camera-image-lightbox-close:focus-visible {
    color: #111;
    outline: none;
}

.camera-image-lightbox-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #888;
    padding: 0;
}

.camera-image-lightbox-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: min(72vh, 560px);
    object-fit: contain;
    background: #888;
}

.camera-image-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    background: linear-gradient(180deg, #d9e8f5 0%, #e8f2fa 100%);
    border-top: 1px solid #8eb4d8;
}

.camera-image-lightbox-nav {
    border: none;
    background: transparent;
    color: #1a4f8a;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
}

.camera-image-lightbox-nav:hover:not(:disabled),
.camera-image-lightbox-nav:focus-visible:not(:disabled) {
    text-decoration: underline;
    outline: none;
}

.camera-image-lightbox-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 640px) {
    .camera-image-lightbox-panel {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .camera-image-lightbox-info {
        font-size: 0.8rem;
    }

    .camera-image-lightbox-img {
        max-height: calc(100vh - 7rem);
    }
}

.platform-error-card {
    background: var(--color-surface);
    border: 1px solid rgba(231, 76, 60, 0.35);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
    max-width: 32rem;
}

.platform-error-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-danger);
    margin-bottom: 0.5rem;
}

.platform-error-detail {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.platform-error-tech {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 0.75rem;
}

/* Camera grid */
.camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.camera-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.camera-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.camera-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.cam-title {
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
}

.camera-refresh-btn,
.camera-refresh-spacer {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
}

.camera-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.camera-refresh-btn:hover,
.camera-refresh-btn:focus-visible {
    background: rgba(109, 132, 163, 0.12);
    color: var(--color-primary);
    outline: none;
}

.camera-refresh-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.camera-refresh-btn.is-busy i {
    animation: camera-refresh-spin 0.9s linear infinite;
}

.camera-refresh-spacer {
    display: inline-block;
}

@keyframes camera-refresh-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.camera-image-wrap {
    position: relative;
    background: #888;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
}

.camera-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.camera-legend {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.camera-status-card .camera-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-muted);
    min-height: 120px;
}

.status-badge {
    padding: 0.5rem 1rem;
    background: var(--color-success-bg);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Config list */
.config-group {
    margin-bottom: 1.5rem;
}

.config-group h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.config-list {
    list-style: none;
}

.config-list li {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: default;
    font-size: 0.95rem;
}

.config-list li:hover {
    color: var(--color-accent);
}

.config-list .config-icon {
    width: 1.25rem;
    text-align: center;
    opacity: 0.7;
}

.config-list li.logout-item {
    color: var(--color-danger);
    cursor: pointer;
}

.config-list li.logout-item:hover {
    color: var(--color-danger);
    opacity: 0.85;
}

/* Notifications list */
.notif-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.notif-read-all-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: 0.85rem;
    cursor: pointer;
}

.notif-read-all-btn:hover,
.notif-read-all-btn:focus-visible {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.notif-read-all-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.notif-list {
    list-style: none;
}

.notif-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-card);
}

.notif-item .notif-delay {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 0.35rem;
}

.notif-item-unread {
    border-color: var(--color-warning);
}

.notif-icon {
    float: left;
    width: 16px;
    height: 16px;
    margin: 0.15rem 0.5rem 0.25rem 0;
}

.notif-body {
    line-height: 1.45;
}

.notif-body .periph_link,
.notification-banner-text .periph_link {
    color: var(--color-primary, #6d84a3);
    cursor: pointer;
    text-decoration: underline;
}

.notif-body a[data-notif-detail],
.notification-banner-text a[data-notif-detail] {
    color: var(--color-primary, #6d84a3);
    cursor: pointer;
    text-decoration: underline;
}

/* Welcome card */
.welcome-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.welcome-card h2 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.welcome-card p {
    color: var(--color-text-muted);
    line-height: 1.5;
}

.log-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
}

.log-card h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

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

.log-card-header h3 {
    margin-bottom: 0;
}

.log-clear-btn {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.log-clear-btn:hover {
    background: var(--color-bg-muted);
}

.log-error-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.log-error-item {
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.log-error-item:first-child {
    border-top: none;
    padding-top: 0;
}

.log-error-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.log-error-detail {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.35rem;
}

.log-url {
    font-size: 0.7rem;
    color: var(--color-text-light);
    word-break: break-all;
    line-height: 1.35;
}

.log-meta,
.log-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.log-body {
    max-height: 40vh;
    overflow: auto;
    padding: 0.75rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (min-width: 769px) {
    /* Favoris et listes sans layout panneau explicite */
    .mini-widget-list:not(.mini-widget-list--columns) {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .room-camera-card .room-camera-card-inner,
    .widget-card--image .room-camera-card-inner {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        transition: box-shadow var(--transition);
    }

    .room-camera-card .room-camera-card-inner:hover,
    .room-camera-card .room-camera-card-inner:focus-visible,
    .widget-card--image .room-camera-card-inner:hover,
    .widget-card--image .room-camera-card-inner:focus-visible {
        box-shadow: var(--shadow-card-hover);
    }

    .room-camera-card .camera-card-header,
    .widget-card--image .camera-card-header {
        border-bottom: 1px solid var(--color-border);
        padding: 0.65rem 0.85rem;
        padding-bottom: 0.65rem;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: 1rem;
    }

    .camera-grid {
        grid-template-columns: 1fr;
    }

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

    .app-toolbar-title {
        font-size: 1.1rem;
    }

    .account-field {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .account-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .account-tab span {
        white-space: nowrap;
    }
}

/* ── Mon compte (multi-onglets) ── */
.account-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #e8ebef;
    border-bottom: 1px solid var(--color-border);
}

html.dark-mode .account-tabs {
    background: #2a2f36;
}

.account-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: background var(--transition), color var(--transition);
}

.account-tab:hover {
    background: rgba(255, 255, 255, 0.45);
    color: var(--color-text);
}

.account-tab.active {
    background: var(--color-surface);
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

.account-tab i {
    font-size: 1.1rem;
}

.account-panels {
    background: #eef1f4;
}

html.dark-mode .account-panels {
    background: #252830;
}

.account-panel {
    display: none;
    padding: 1rem 1.25rem 1.25rem;
}

.account-panel.active {
    display: block;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.account-field {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.35rem 0;
}

.account-label {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.35;
    overflow: visible;
}

.account-hint,
.account-link-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 0.15rem;
}

.account-link-sub {
    color: var(--color-accent);
    text-decoration: none;
}

.account-link {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.875rem;
}

.account-link:hover,
.account-link-sub:hover {
    text-decoration: underline;
}

.account-email-change {
    margin: 0.15rem 0 0.5rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid #c5cad1;
    border-radius: var(--radius-sm);
    background: #f7f8fa;
}

html.dark-mode .account-email-change {
    background: #2a2e38;
    border-color: #3d4450;
}

.account-email-change-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.account-email-change-header strong {
    font-size: 1rem;
    font-weight: 650;
}

.account-email-change-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.account-email-change-close:hover {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.06);
}

.account-email-change-text {
    margin: 0 0 0.45rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
}

.account-email-change-field {
    display: block;
    margin: 0.65rem 0 0.35rem;
}

.account-email-change-field .account-input {
    max-width: 100%;
}

.account-email-change-status {
    min-height: 1.2rem;
    margin: 0.25rem 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.account-email-change-status--error {
    color: var(--color-danger, #c62828);
}

.account-email-change-status--success {
    color: #2e7d32;
}

.account-email-change-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-action-primary {
    background: var(--color-accent, #6d84a3);
    border-color: var(--color-accent, #6d84a3);
    color: #fff;
}

.account-action-primary:hover:not(:disabled) {
    filter: brightness(0.96);
}

.account-control {
    min-width: 0;
}

.account-input,
.account-select {
    width: 100%;
    max-width: 420px;
    padding: 0.45rem 0.55rem;
    border: 1px solid #c5cad1;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    background: #fff;
    color: var(--color-text);
}

html.dark-mode .account-input,
html.dark-mode .account-select {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.account-input:focus,
.account-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(3, 169, 244, 0.15);
}

.account-input--muted,
.account-input:disabled,
.account-input[readonly] {
    background: #e8ebef;
    color: #6b7280;
    border-color: #d0d5db;
    cursor: not-allowed;
    opacity: 1;
}

html.dark-mode .account-input--muted,
html.dark-mode .account-input:disabled,
html.dark-mode .account-input[readonly] {
    background: #2a2f36;
    color: #9ca3af;
    border-color: var(--color-border);
}

.account-input-pin {
    max-width: 5rem;
}

.account-control-pin .account-input {
    max-width: 5rem;
}

.account-checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.account-checkbox-label input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
}

.account-notifications {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.account-notif-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-text);
}

.account-notif-option input {
    accent-color: var(--color-accent);
}

.account-notif-option i {
    color: var(--color-text-muted);
}

.account-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.15rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #b0b8c4;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.account-help[data-tooltip]:hover::after,
.account-help[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: max-content;
    max-width: min(18rem, 55vw);
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    background: #2c3340;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.account-help[data-tooltip]:hover::before,
.account-help[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    left: calc(100% + 0.1rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 41;
    border: 5px solid transparent;
    border-right-color: #2c3340;
    pointer-events: none;
}

.account-icon-btn {
    border: none;
    background: transparent;
    color: var(--color-accent);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.15rem;
}

.account-twitter {
    font-size: 0.875rem;
    color: var(--color-text);
}

.account-inline-icon {
    color: var(--color-accent);
    font-size: 1rem;
    vertical-align: middle;
}

.account-static {
    font-size: 0.875rem;
    color: var(--color-text);
}

.account-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: background var(--transition), color var(--transition);
}

.account-footer--success {
    background: linear-gradient(180deg, #82d800 0%, #5eb900 100%);
    border-top-color: transparent;
}

.account-footer--error {
    background: #fde8e8;
    border-top-color: #f5c2c2;
}

.account-footer-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.account-status {
    flex: 1 1 8rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    min-height: 1.25rem;
    text-align: center;
}

.account-status--success {
    color: #fff;
}

.account-status--error {
    color: #b91c1c;
}

.account-footer--success .account-action-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.65);
}

.account-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.account-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.account-action-danger {
    color: var(--color-danger);
}

.account-placeholder {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.account-secondary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .account-user-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .account-user-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.account-user-item {
    margin: 0;
    min-width: 0;
}

.account-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: none;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.account-user-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-user-btn:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-accent);
}

.account-user-btn.is-selected {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.account-user-btn i {
    flex: 0 0 auto;
    color: var(--color-accent);
    font-size: 1.15rem;
}

.account-secondary-detail {
    margin-top: 0.25rem;
    padding: 0.75rem 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

html.dark-mode .account-secondary-detail {
    background: transparent;
    border-color: transparent;
}

.account-secondary-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 0.75rem;
}

.account-secondary-detail-title {
    font-size: 0.95rem;
    font-weight: 650;
}

.account-secondary-back {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.account-secondary-invite-done {
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text);
    background: #f0f7e8;
    border-radius: var(--radius-sm);
}

html.dark-mode .account-secondary-invite-done {
    background: #2a3a28;
}

.account-input-date {
    max-width: 14rem;
}

.account-empty {
    margin: 0;
    padding: 1.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.account-linked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-linked-intro {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text);
}

.account-linked-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-linked-heading {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text);
}

.account-linked-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.account-linked-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.account-linked-item > .zmdi {
    color: var(--color-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.account-linked-login {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    min-width: 4rem;
}

.account-linked-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.account-linked-date {
    width: auto;
    min-width: 9.5rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}

.account-linked-cam {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.account-linked-cam input {
    margin: 0;
}

.account-linked-action {
    font-size: 0.8rem;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.account-linked-actions {
    margin-top: 0.25rem;
}

.account-service {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-service-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}

.account-service-section--extra {
    border-bottom: none;
    padding-bottom: 0;
}

.account-service-title {
    margin: 0 0 0.25rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: #d9e8f5;
    color: var(--color-text);
    border-radius: var(--radius-sm, 4px);
}

html.dark-mode .account-service-title {
    background: #2a3a4a;
}

.account-service-subtitle {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.account-service-field .account-label {
    min-width: 11rem;
}

.account-service-over {
    color: #b91c1c;
    font-weight: 600;
}

.account-service-block {
    font-size: 0.9rem;
    line-height: 1.45;
}

.account-service-block p {
    margin: 0.65rem 0 0;
}

.account-service-block [style*="color:red"],
.account-service-block [style*="color: red"] {
    color: #b91c1c !important;
}

.account-service-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.account-service-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.account-service-shop {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: flex-start;
}

.account-service-shop-link {
    font-size: 0.95rem;
}

.account-payment-bank.hidden {
    display: none;
}

.account-secondary-footer {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

#moncompte-content .loading-msg,
#moncompte-content .platform-error-card {
    margin: 0;
}

/* ── Changer d'utilisateur ── */
.switch-user-view {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 420px;
}

.switch-user-section-label {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.switch-user-current-login {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.switch-user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.switch-user-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.switch-user-btn:not(:disabled):hover {
    background: var(--color-bg-muted);
    border-color: var(--color-accent);
}

.switch-user-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.switch-user-btn-primary {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.switch-user-btn i {
    color: var(--color-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.switch-user-btn-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.switch-user-btn-label {
    font-weight: 600;
}

.switch-user-btn-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.switch-user-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.switch-user-error {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, #c62828 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #c62828 35%, var(--color-border));
    color: var(--color-text);
    font-size: 0.875rem;
}

#switch-user-content .loading-msg,
#switch-user-content .platform-error-card {
    margin: 0;
}

/* ── Agenda ── */
.agenda-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 920px;
}

.agenda-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-card);
}

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

.agenda-panel-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
}

.agenda-link-btn {
    border: none;
    background: none;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.agenda-link-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.agenda-type-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.agenda-type-pill {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: inherit;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.2;
    cursor: pointer;
    transition: box-shadow var(--transition), filter var(--transition);
}

.agenda-type-pill:hover {
    filter: brightness(0.97);
}

.agenda-type-pill-active {
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 6px rgba(109, 132, 163, 0.55);
    border-color: var(--color-primary);
}

.agenda-week-panel .agenda-panel-title {
    margin-bottom: 0.65rem;
}

.agenda-week-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.agenda-week-day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.15rem;
    font-size: 0.6875rem;
    font-family: inherit;
    color: #333;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    background: transparent;
    transition: box-shadow var(--transition);
}

.agenda-week-day:hover {
    box-shadow: inset 0 0 0 2px rgba(109, 132, 163, 0.45);
}

.agenda-week-day-label {
    line-height: 1.15;
}

.agenda-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.agenda-cal-month {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    min-width: 9rem;
    text-align: center;
    text-transform: capitalize;
}

.agenda-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
}

.agenda-nav-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.agenda-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.agenda-cal-head {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0.25rem 0;
}

.agenda-cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    font: inherit;
    color: #333;
    transition: box-shadow var(--transition);
}

.agenda-cal-cell:hover {
    box-shadow: inset 0 0 0 2px rgba(109, 132, 163, 0.45);
}

.agenda-cal-outside {
    opacity: 0.55;
}

.agenda-cal-today .agenda-cal-day {
    font-weight: 700;
}

.agenda-cal-selected {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.agenda-cal-day {
    font-size: 0.875rem;
    line-height: 1;
}

/* ── Phases timeline ── */
.agenda-phases-panel .agenda-panel-header {
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.agenda-phase-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.agenda-phase-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.agenda-phase-step-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.agenda-phase-step-text {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.agenda-phase-step-select {
    min-width: 3.25rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.agenda-phase-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted, #6d84a3);
    cursor: pointer;
}

.agenda-phase-zoom-btn:hover:not(:disabled) {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.agenda-phase-zoom-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.agenda-phase-zoom-btn .zmdi {
    font-size: 1.15rem;
    line-height: 1;
}

.agenda-phase-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.agenda-phase-pill {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: inherit;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.2;
    cursor: pointer;
    transition: box-shadow var(--transition), filter var(--transition);
}

.agenda-phase-pill:hover {
    filter: brightness(0.97);
}

.agenda-phase-pill-active {
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 6px rgba(109, 132, 163, 0.55);
    border-color: var(--color-primary);
}

.agenda-phase-timeline {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.agenda-phase-timeline::-webkit-scrollbar {
    display: none;
    height: 0;
}

.agenda-phase-timeline.is-panning {
    cursor: grabbing;
    user-select: none;
}

.agenda-phase-timeline-inner {
    --agenda-phase-track-w: 640px;
    width: max-content;
    min-width: 100%;
}

.agenda-phase-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 8.5rem) var(--agenda-phase-track-w);
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 3px;
    width: max-content;
    min-width: 100%;
}

.agenda-phase-row-header {
    margin-bottom: 0.35rem;
}

.agenda-phase-row-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    padding-right: 0.25rem;
}

.agenda-phase-hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    width: var(--agenda-phase-track-w);
    min-height: 1.1rem;
}

.agenda-phase-hour {
    font-size: 0.625rem;
    color: var(--color-text-light);
    text-align: left;
    line-height: 1.1;
    overflow: hidden;
}

.agenda-phase-track {
    display: flex;
    width: var(--agenda-phase-track-w);
    height: 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    background: #f0f0f0;
}

.agenda-phase-seg {
    height: 100%;
    flex-shrink: 0;
    min-width: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: grab;
}

.agenda-phase-seg-paintable {
    cursor: pointer;
}

.agenda-phase-timeline.is-panning .agenda-phase-seg,
.agenda-phase-timeline.is-panning .agenda-phase-seg-paintable {
    cursor: grabbing;
}

.agenda-phase-seg-paintable:hover {
    filter: brightness(0.92);
    box-shadow: inset 0 0 0 2px rgba(109, 132, 163, 0.55);
}

.agenda-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.agenda-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.agenda-footer-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.agenda-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.agenda-footer-link:hover:not(:disabled) {
    text-decoration: underline;
}

.agenda-footer-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agenda-footer-link .zmdi {
    font-size: 1.05rem;
}

.agenda-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-danger, #c62828);
    border-radius: var(--radius-sm);
    background: var(--color-danger, #c62828);
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.agenda-reset-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.agenda-reset-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agenda-reset-btn .zmdi {
    font-size: 1.05rem;
}

.agenda-ics-dialog {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.agenda-ics-title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.agenda-ics-count {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.agenda-ics-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.agenda-ics-select {
    width: 100%;
    max-width: 18rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
}

.agenda-ics-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    align-items: center;
}

.agenda-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.agenda-discard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted, #6d84a3);
    font: inherit;
    cursor: pointer;
}

.agenda-discard-btn .zmdi {
    font-size: 1.35rem;
    line-height: 1;
}

.agenda-discard-btn:hover:not(:disabled) {
    color: var(--color-accent, #6d84a3);
}

.agenda-discard-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.agenda-save-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.agenda-save-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.agenda-save-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agenda-save-btn .zmdi {
    font-size: 1.1rem;
}

.agenda-save-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.agenda-status-msg {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: right;
    width: 100%;
}

#agenda-content .loading-msg,
#agenda-content .platform-error-card {
    margin: 0;
}

html.dark-mode .agenda-type-pill,
html.dark-mode .agenda-week-day,
html.dark-mode .agenda-cal-cell,
html.dark-mode .agenda-phase-pill,
html.dark-mode .agenda-phase-seg {
    color: #222;
}

html.dark-mode .agenda-phase-track {
    background: #3a3a3a;
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .agenda-phase-row-label {
    background: var(--color-surface);
}

/* ── Liste programmations (menu Configuration) ── */
.wizard-list-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.wizard-list-heading {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-section-heading-text);
    background: var(--color-section-heading-bg);
    border-bottom: 1px solid var(--color-border);
}

.wizard-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wizard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wizard-table thead th {
    padding: 0.45rem 0.5rem;
    text-align: left;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}

.wizard-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.wizard-group-header td {
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
}

.wizard-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.wizard-group-toggle:hover,
.wizard-group-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

html.dark-mode .wizard-group-toggle:hover,
html.dark-mode .wizard-group-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.wizard-group-icon {
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-weight: 700;
    line-height: 1;
}

.wizard-group.is-collapsed .wizard-row {
    display: none;
}

.wizard-col-icon {
    width: 72px;
}

.wizard-icon-wrap {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
}

.wizard-icon {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.wizard-active-icon {
    position: absolute;
    right: -4px;
    bottom: -2px;
}

.wizard-col-type {
    min-width: 10rem;
    font-weight: 500;
}

.wizard-col-text {
    min-width: 8rem;
    color: var(--color-text-muted);
    white-space: normal;
}

.wizard-row-inactive .wizard-col-type,
.wizard-row-inactive .wizard-col-text {
    color: var(--color-text-muted);
}

#wizard-content .loading-msg,
#wizard-content .platform-error-card {
    margin: 0;
}

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

.wizard-row-clickable:hover,
.wizard-row-clickable:focus-visible {
    background: var(--color-bg-muted);
    outline: none;
}

/* ── Détail programmation (wizard config) ── */
.wizard-detail-view {
    padding: 0.75rem 0.5rem 1.5rem;
}

.wizard-detail-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0;
    margin: 0 0 0.75rem;
    overflow: hidden;
    background: var(--color-surface);
}

.wizard-detail-section > legend {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-primary, #5b7ea8);
    box-sizing: border-box;
}

.wizard-detail-section > legend.wizard-detail-section-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wizard-detail-section-legend-title {
    min-width: 0;
}

.wizard-associated-rules-link {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    white-space: nowrap;
}

.wizard-associated-rules-link:hover,
.wizard-associated-rules-link:focus-visible {
    color: #fff;
    outline: none;
}

.wizard-associated-rules-view {
    padding: 0.75rem 0.5rem 1.5rem;
}

.wizard-detail-section > .wizard-detail-field,
.wizard-detail-section > .wizard-detail-schedule {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.wizard-detail-section > .wizard-detail-field:first-of-type {
    margin-top: 0.85rem;
}

.wizard-detail-section > .wizard-detail-schedule {
    padding-bottom: 0.85rem;
}

.wizard-detail-field {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.wizard-detail-field label {
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
}

.wizard-detail-field-check {
    align-items: center;
}

.wizard-detail-input {
    width: 100%;
    max-width: 16rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.wizard-detail-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.wizard-detail-radio {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.wizard-detail-radio-inline {
    flex-wrap: wrap;
}

.wizard-detail-week-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0 1.5rem;
}

.wizard-detail-week-days[aria-hidden="true"] {
    opacity: 0.45;
}

.wizard-detail-week-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.wizard-detail-week-day.is-selected {
    border-color: var(--color-primary, #5b7ea8);
    background: var(--color-primary, #5b7ea8);
    color: #fff;
}

.wizard-detail-toggle-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: 0 0 0.75rem;
    background: var(--color-surface);
    overflow: hidden;
}

.wizard-detail-toggle-summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-section-heading-bg, #e8eef5);
    cursor: default;
    list-style: none;
}

.wizard-detail-toggle-summary::-webkit-details-marker {
    display: none;
}

.wizard-detail-toggle-check {
    margin: 0;
    flex-shrink: 0;
}

.wizard-detail-toggle-body {
    padding: 0.75rem 0.85rem;
}

.wizard-detail-criteria-row,
.wizard-detail-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.wizard-detail-select {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 0.8125rem;
    color: var(--color-text);
    white-space: nowrap;
}

.wizard-detail-select-icon {
    flex-shrink: 0;
    object-fit: contain;
}

.wizard-detail-select-text {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-detail-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.wizard-edit-view .wizard-detail-input:not([readonly]) {
    background: var(--color-surface);
}

.wizard-edit-week-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.wizard-edit-view .wizard-detail-week-day {
    cursor: pointer;
    user-select: none;
}

.wizard-edit-view .wizard-detail-week-day:has(.wizard-edit-week-input:checked) {
    border-color: var(--color-primary, #5b7ea8);
    background: var(--color-primary, #5b7ea8);
    color: #fff;
}

.wizard-edit-prog-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.wizard-edit-prog-toggle input {
    margin: 0;
}

.wizard-edit-actions {
    margin-top: 1rem;
    padding: 0 0.5rem;
}

.wizard-edit-view .rule-edit-dynamic-row {
    margin-bottom: 0.65rem;
}

.wizard-edit-view .rule-edit-add-btn {
    margin-top: 0.35rem;
}

.wizard-stub-view .wizard-stub-form {
    margin-top: 0.5rem;
}

.wizard-stub-coming-soon {
    margin: 1.25rem 0.5rem 0;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    background: var(--color-surface-muted, #f0f4f8);
    color: var(--color-text-muted, #5c6b7a);
    font-size: 0.95rem;
    text-align: center;
}

.wizard-alert-detectors {
    margin-bottom: 1rem;
}

.wizard-alert-detector-row {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.wizard-alert-detector-label {
    text-align: right;
    color: var(--color-text-muted, #5c6b7a);
    font-size: 0.9rem;
}

.wizard-alert-detector-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.wizard-alert-detector-icon {
    flex-shrink: 0;
    border-radius: 4px;
}

.wizard-alert-notify-group {
    margin: 1rem 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.wizard-alert-notify-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted, #5c6b7a);
}

.wizard-alert-notify-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wizard-alert-notify-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    cursor: pointer;
}

.wizard-alert-notify-name {
    font-weight: 600;
}

.wizard-alert-notify-detail {
    color: var(--color-text-muted, #8a96a3);
    font-size: 0.88rem;
}

.wizard-alert-message-field {
    margin-top: 1rem;
}

.wizard-alert-message {
    min-height: 4.5rem;
    resize: vertical;
}

.wizard-detail-notice {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
    font-size: 0.9rem;
    line-height: 1.45;
}

.wizard-detail-notice a {
    color: var(--color-link, #1a73e8);
}

.wizard-frost-threshold {
    max-width: 5rem;
}

.wizard-timer-duration {
    max-width: 5rem;
}

.wizard-simulation-hours {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wizard-simulation-hour-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ── Nouvelle programmation (choix du modèle) ── */
.wizard-new-view {
    padding: 0.75rem 0.5rem 1.5rem;
}

.wizard-new-list-view {
    margin-top: 0;
}

.wizard-new-table .wizard-new-group-header td {
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}

.wizard-new-row {
    cursor: pointer;
}

.wizard-new-row:hover,
.wizard-new-row:focus-visible {
    background: var(--color-bg-muted);
    outline: none;
}

.wizard-new-col-icon {
    width: 52px;
}

.wizard-new-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.wizard-new-col-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.wizard-new-row-disabled {
    cursor: default;
    opacity: 0.55;
}

.wizard-new-row-disabled:hover,
.wizard-new-row-disabled:focus-visible {
    background: transparent;
}

.wizard-new-status {
    margin: 0.75rem 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.wizard-new-status-error {
    color: var(--color-danger, #c0392b);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Liste règles (onglet Programmation) ── */
.rules-list-view {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.rules-list-heading {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-section-heading-text);
    background: var(--color-section-heading-bg);
    border-bottom: none;
    flex: 1 1 auto;
}

.rules-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--color-section-heading-text);
    background: var(--color-section-heading-bg);
    border-bottom: 1px solid var(--color-border);
    padding-right: 0.75rem;
}

.rules-list-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rules-list-header-actions {
    position: relative;
    flex-shrink: 0;
}

.rules-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.rules-add-btn:hover,
.rules-add-btn:focus-visible {
    background: var(--color-bg-muted);
}

.rules-add-icon {
    font-size: 1rem;
    line-height: 1;
}

.rules-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rules-table {
    width: 100%;
    min-width: 56rem;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rules-table tbody tr {
    display: table-row;
}

.rules-table tr.hidden {
    display: none !important;
}

.rules-table thead th {
    padding: 0.45rem 0.5rem;
    text-align: left;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.rules-sortable {
    padding: 0;
    vertical-align: middle;
}

.rules-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.5rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.rule-col-active .rules-sort-btn,
.rule-col-local .rules-sort-btn,
.rule-col-exec .rules-sort-btn {
    justify-content: center;
}

.rule-col-exec .rules-sort-btn {
    justify-content: flex-end;
}

.rules-sort-btn:hover,
.rules-sort-btn:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

html.dark-mode .rules-sort-btn:hover,
html.dark-mode .rules-sort-btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.rules-sort-icon {
    font-size: 0.65rem;
    opacity: 0.85;
}

.rules-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    display: table-cell;
}

.rule-col-active,
.rule-col-local {
    width: 3.5rem;
    text-align: center;
}

.rule-col-group {
    width: 8rem;
    min-width: 7rem;
    word-break: normal;
    white-space: normal;
}

.rule-col-type {
    width: 6rem;
    min-width: 5.5rem;
    word-break: normal;
}

.rule-col-icon {
    width: 2rem;
}

.rule-col-name {
    width: 14rem;
    min-width: 10rem;
    font-weight: 500;
    word-break: normal;
}

.rule-col-exec {
    width: 5rem;
    text-align: right;
    white-space: nowrap;
}

.rule-col-last,
.rule-col-created {
    width: 9rem;
    white-space: nowrap;
}

.rule-col-notif {
    width: auto;
    min-width: 8rem;
    color: var(--color-text-muted);
    word-break: normal;
    white-space: normal;
}

.rule-row-inactive .rule-col-name {
    color: var(--color-text-muted);
}

.rule-active-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-size: 0.75rem;
    line-height: 1;
    color: transparent;
}

.rule-active-mark.is-on {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.rule-icon {
    display: block;
}

.rule-notifications img {
    vertical-align: middle;
    margin-right: 0.15rem;
}

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

.rule-row-clickable:hover,
.rule-row-clickable:focus-visible {
    background: var(--color-bg-muted);
}

.rule-detail-view {
    padding: 0.75rem 0.5rem 1.5rem;
}

.rule-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.75rem 0.5rem;
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    cursor: pointer;
}

.rule-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.rule-detail-tab {
    padding: 0.55rem 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.rule-detail-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.rule-detail-panel.hidden {
    display: none;
}

.rule-detail-param {
    padding: 0 0.75rem;
}

.rule-detail-field {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.rule-detail-field-wide {
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

.rule-detail-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.rule-detail-value {
    font-size: 0.9375rem;
}

.rule-detail-input,
.rule-detail-textarea {
    width: 100%;
    max-width: 24rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
}

.rule-detail-textarea {
    max-width: none;
    resize: vertical;
}

.rule-detail-section {
    margin-top: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
}

.rule-detail-section > summary {
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.rule-detail-criteria-list,
.rule-detail-action-list,
.rule-detail-cron-list {
    margin: 0;
    padding-left: 1.1rem;
}

.rule-detail-criteria-row,
.rule-detail-action-list li,
.rule-detail-cron-row {
    margin-bottom: 0.45rem;
    line-height: 1.45;
}

.rule-detail-criteria-op {
    display: inline-block;
    min-width: 1.5rem;
    margin-right: 0.35rem;
    font-weight: 500;
}

.rule-detail-criteria-source {
    color: var(--color-text-muted);
    margin-left: 0.35rem;
}

.rule-detail-empty,
.rule-detail-hint,
.rule-detail-muted {
    color: var(--color-text-muted);
}

.rule-detail-notifications {
    display: grid;
    gap: 0.65rem;
}

.rule-detail-notif-group {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rule-detail-notif-group legend {
    padding: 0 0.25rem;
    font-size: 0.875rem;
}

.rule-detail-check-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.rule-detail-check-detail {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.rule-detail-actions {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.rule-detail-mock {
    padding: 1.5rem 0.75rem;
    color: var(--color-text-muted);
}

.rule-edit-section {
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.rule-edit-section-title {
    padding: 0.55rem 0.85rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rule-edit-section-body {
    padding: 0.85rem;
    background: var(--color-surface);
}

.rule-edit-field {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.rule-edit-field-check {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.rule-edit-field-wide {
    grid-template-columns: 1fr;
}

.rule-edit-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.rule-edit-input,
.rule-edit-select,
.rule-edit-textarea {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
}

.rule-edit-static {
    font-size: 0.9375rem;
}

.rule-edit-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--color-border);
    font-weight: 500;
}

.rule-edit-toggle:first-child {
    border-top: none;
    padding-top: 0;
}

.rule-edit-subpanel {
    padding: 0.75rem 0 0.25rem 1.5rem;
}

.rule-edit-subpanel.hidden {
    display: none;
}

.rule-edit-dynamic-row {
    padding: 0.75rem;
    margin-bottom: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
}

.rule-edit-row-field {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.55rem;
}

.rule-edit-row-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.rule-edit-row-delete,
.rule-edit-add-btn {
    margin-top: 0.35rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.rule-edit-unit {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.rule-histo-view {
    padding: 0.75rem;
}

.rule-histo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.5rem 0.35rem 0;
    background: var(--color-section-heading-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rule-histo-header .rule-histo-heading {
    margin: 0;
    flex: 1 1 auto;
    border: none;
    background: transparent;
    padding: 0.35rem 0.85rem;
}

.rule-histo-playback-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.rule-histo-playback-btn:hover,
.rule-histo-playback-btn:focus-visible {
    background: var(--color-bg-muted);
    outline: none;
}

.rule-histo-heading {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.85rem;
    background: var(--color-section-heading-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.rule-notif-view {
    padding: 0.75rem;
}

.rule-notif-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.rule-notif-header .rule-histo-heading {
    margin: 0;
    flex: 1 1 auto;
}

.rule-notif-view .notif-list {
    margin: 0 0 0.75rem;
}

.rule-histo-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rule-histo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.rule-histo-table thead th {
    padding: 0.45rem 0.65rem;
    text-align: left;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    font-weight: 500;
}

.rule-histo-table td {
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
}

.rule-histo-empty-row td {
    color: var(--color-text-muted);
    font-style: italic;
}

.rule-histo-col-date {
    white-space: nowrap;
    width: 11rem;
}

.rule-histo-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.55rem 0.65rem;
    background: var(--color-section-heading-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rule-histo-pager-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.rule-histo-pager-btn {
    min-width: 1.75rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.rule-histo-pager-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.rule-histo-pager-input {
    width: 3rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    font: inherit;
}

.rule-histo-pager-label,
.rule-histo-pager-status {
    font-size: 0.8125rem;
    color: var(--color-text);
}

.periph-histo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.periph-histo-header .rule-histo-heading {
    flex: 1 1 auto;
    margin: 0;
}

.periph-histo-header-actions {
    position: relative;
    flex-shrink: 0;
}

.periph-histo-sortable {
    padding: 0;
    vertical-align: middle;
}

.periph-histo-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.periph-histo-col-value .periph-histo-sort-btn,
.periph-histo-col-api .periph-histo-sort-btn {
    justify-content: flex-end;
}

.periph-histo-sort-btn:hover,
.periph-histo-sort-btn:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

html.dark-mode .periph-histo-sort-btn:hover,
html.dark-mode .periph-histo-sort-btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.periph-histo-sort-icon {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.periph-histo-col-api {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.periph-histo-pager-sep {
    width: 1px;
    align-self: stretch;
    margin: 0 0.35rem;
    background: var(--color-border);
}

.periph-histo-pager-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.periph-histo-pager-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.periph-histo-pager-action:hover {
    background: rgba(0, 0, 0, 0.04);
}

html.dark-mode .periph-histo-pager-action:hover {
    background: rgba(255, 255, 255, 0.06);
}

.periph-histo-delete-btn:not(:disabled) {
    color: #b42318;
}

.periph-histo-delete-btn:not(:disabled):hover {
    background: rgba(180, 35, 24, 0.08);
}

.periph-histo-import-dialog {
    width: min(42rem, calc(100vw - 2rem));
    max-width: min(92vw, 42rem);
    max-height: calc(100vh - 2rem);
}

.periph-histo-import-form {
    gap: 0.75rem;
}

.periph-histo-import-summary {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.periph-histo-import-summary.hidden {
    display: none;
}

.periph-histo-import-table-wrap {
    max-height: 18rem;
    overflow: auto;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.periph-histo-import-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border);
}

.periph-histo-import-load,
.periph-histo-import-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.periph-histo-import-load .zmdi,
.periph-histo-import-confirm .zmdi {
    font-size: 1.05rem;
}

.periph-histo-import-overwrite {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.875rem;
}

.periph-histo-import-cancel {
    margin-left: auto;
}

.periph-histo-toolbar {
    margin-bottom: 0.65rem;
}

.periph-histo-filter {
    min-width: 14rem;
    max-width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
}

.periph-histo-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.025);
}

html.dark-mode .periph-histo-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

.periph-histo-col-select {
    width: 2rem;
    text-align: center;
    vertical-align: middle;
}

.periph-histo-col-select input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

.periph-histo-col-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.periph-histo-col-date {
    white-space: nowrap;
    width: 11rem;
}

.periph-histo-col-duration,
.periph-histo-col-source {
    white-space: nowrap;
}

.periph-histo-col-detail {
    min-width: 8rem;
}

.periph-chart-history {
    padding: 0;
}

.periph-chart-history .periph-histo-view {
    padding: 0.75rem 0.5rem;
}

.programming-view .account-panel {
    padding: 0;
}

.programming-view .account-panels {
    background: transparent;
}

.programming-view .account-tabs {
    flex-wrap: nowrap;
}

.programming-view .account-tab {
    flex: 1 1 50%;
    width: 50%;
    justify-content: center;
}

.programming-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: var(--color-toolbar-bg);
    border-bottom: 1px solid var(--color-border);
}

.programming-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}

.programming-add-btn:hover {
    background: var(--color-btn-muted-hover);
}

.programming-add-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.programming-search-wrap {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.programming-search-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.35rem;
    padding: 0 0.5rem;
    margin: 0;
}

.programming-search-icon {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.programming-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    padding: 0.4rem 0;
    color: var(--color-text);
    outline: none;
}

.programming-search-input:disabled {
    opacity: 0.9;
    cursor: not-allowed;
}

.programming-search-input::placeholder {
    color: var(--color-text-muted);
}

.programming-search-divider {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
}

.programming-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    cursor: not-allowed;
}

.programming-panel-body {
    min-height: 4rem;
}

.programming-panel-body .loading-msg {
    padding: 1rem 0.65rem;
}

.programming-list-no-match {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

.programming-list-no-match.hidden {
    display: none;
}

/* ── Courbes (graphes météo / présence) ── */
.curves-view .account-tabs {
    flex-wrap: nowrap;
}

.curves-view .account-tab {
    flex: 1 1 33.333%;
    justify-content: center;
}

.curves-panels {
    background: transparent;
}

.curves-tab-panel {
    display: none;
    padding: 0.75rem;
}

.curves-tab-panel.active {
    display: block;
}

.curves-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.curves-chart-area {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.curves-chart-area:fullscreen,
.curves-chart-area:-webkit-full-screen,
.curves-chart-area.curves-chart-area--pseudo-fs {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.curves-chart-area.curves-chart-area--pseudo-fs {
    z-index: 10000;
}

body.curves-pseudo-fs-active {
    overflow: hidden;
}

html.dark-mode .curves-chart-area {
    border-color: rgba(255, 255, 255, 0.08);
}

.curves-chart-container {
    flex: 1 1 auto;
    min-height: 320px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.5rem 0.25rem;
}

.curves-chart-area:fullscreen .curves-chart-container,
.curves-chart-area:-webkit-full-screen .curves-chart-container,
.curves-chart-area.curves-chart-area--pseudo-fs .curves-chart-container {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: 0.75rem 0.75rem 0.25rem;
}

.curves-chart-area:fullscreen .curves-chart-container .highcharts-container,
.curves-chart-area:-webkit-full-screen .curves-chart-container .highcharts-container,
.curves-chart-area.curves-chart-area--pseudo-fs .curves-chart-container .highcharts-container {
    width: 100% !important;
}

.curves-chart-area:fullscreen .highcharts-legend-item text,
.curves-chart-area:-webkit-full-screen .highcharts-legend-item text,
.curves-chart-area.curves-chart-area--pseudo-fs .highcharts-legend-item text {
    font-size: 20px !important;
}

.curves-chart-area:fullscreen .highcharts-axis-labels text,
.curves-chart-area:-webkit-full-screen .highcharts-axis-labels text,
.curves-chart-area.curves-chart-area--pseudo-fs .highcharts-axis-labels text {
    font-size: 14px !important;
}

.curves-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.35rem 0.6rem 0.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.curves-auto-refresh-label {
    margin: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.curves-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.curves-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text);
}

html.dark-mode .curves-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.curves-fullscreen-btn .zmdi {
    font-size: 1.15rem;
    line-height: 1;
}

.curves-params {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

html.dark-mode .curves-params {
    background: #252830;
}

.curves-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.curves-field label {
    font-size: 0.875rem;
    color: var(--color-text);
}

.curves-field select,
.curves-field input[type="date"] {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
}

.curves-field-check {
    padding-top: 0.15rem;
}

.curves-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
}

.curves-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition);
}

.curves-field-label-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.curves-field-label-row label {
    margin: 0;
}

.curves-manage-baskets-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.curves-manage-baskets-btn:hover {
    background: transparent;
    color: var(--color-text);
}

html.dark-mode .curves-manage-baskets-btn:hover {
    background: transparent;
}

.curves-manage-baskets-btn .zmdi {
    font-size: 1rem;
    line-height: 1;
}

.graph-baskets-dialog {
    width: min(520px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
}

.graph-baskets-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.graph-baskets-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.graph-baskets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.graph-baskets-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.graph-baskets-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.graph-baskets-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text);
}

html.dark-mode .graph-baskets-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

.graph-baskets-subtitle {
    margin: 0;
    padding: 0.5rem 1rem 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.graph-baskets-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.75rem 1rem;
    min-height: 12rem;
}

.graph-baskets-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.graph-baskets-list,
.graph-content-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.graph-baskets-row,
.graph-content-row {
    display: grid;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    cursor: pointer;
}

.graph-baskets-row {
    grid-template-columns: 1fr auto;
}

.graph-content-row {
    grid-template-columns: 1fr;
}

.graph-baskets-row.is-selected,
.graph-content-row.is-selected {
    border-color: var(--color-accent, #2f6fed);
    box-shadow: inset 0 0 0 1px var(--color-accent, #2f6fed);
}

.graph-baskets-name,
.graph-content-periph,
.graph-content-scale {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
}

.graph-baskets-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.graph-baskets-edit:hover {
    color: var(--color-text);
}

.graph-content-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.graph-baskets-status {
    min-height: 1.25rem;
    margin: 0;
    padding: 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.graph-baskets-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 560px) {
    .graph-content-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(5.5rem, 0.6fr) auto;
    }
}

.curves-refresh-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

html.dark-mode .curves-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 900px) {
    .curves-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .curves-chart-area {
        flex: 1 1 auto;
    }

    .curves-params {
        flex: 0 0 280px;
        max-width: 320px;
    }
}

/* Liste capteurs température (onglet Température) */
.curves-temp-list-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.curves-temp-list-section--baskets + .curves-temp-list-section {
    margin-top: 1rem;
}

.curves-temp-item--basket .curves-temp-item-value {
    font-variant-numeric: tabular-nums;
}

.curves-temp-show-more {
    display: inline-flex;
    align-items: center;
    margin: 0.65rem 0 0.15rem;
    padding: 0.35rem 0.15rem;
    border: none;
    background: transparent;
    color: var(--color-accent, #6d84a3);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.curves-temp-show-more:hover {
    color: var(--color-text);
}

.curves-temp-list-title {
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.curves-temp-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.curves-temp-list-empty {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.curves-temp-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.75rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.curves-temp-item:hover {
    border-color: var(--color-accent);
}

.curves-temp-item.recent {
    background: var(--color-success-bg);
}

html.dark-mode .curves-temp-item.recent {
    background: rgba(189, 228, 182, 0.18);
}

.curves-temp-item.active {
    border-color: var(--color-accent);
    background: rgba(109, 132, 163, 0.1);
}

.curves-temp-item.recent.active {
    background: var(--color-success-bg);
    border-color: var(--color-accent);
}

html.dark-mode .curves-temp-item.active {
    background: rgba(109, 132, 163, 0.2);
}

html.dark-mode .curves-temp-item.recent.active {
    background: rgba(189, 228, 182, 0.22);
}

.curves-temp-item-name {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.curves-temp-item-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-accent);
}

.curves-temp-item-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
}

/* ── Onglet Présence : timeline + paniers ── */
.curves-chart-container--presence {
    min-height: 360px;
    max-height: min(72vh, 640px);
    overflow: auto;
}

.curves-chart-area:fullscreen .curves-chart-container--presence,
.curves-chart-area:-webkit-full-screen .curves-chart-container--presence,
.curves-chart-area.curves-chart-area--pseudo-fs .curves-chart-container--presence {
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.curves-chart-area:fullscreen .curves-chart-container--presence .presence-timeline,
.curves-chart-area:-webkit-full-screen .curves-chart-container--presence .presence-timeline,
.curves-chart-area.curves-chart-area--pseudo-fs .curves-chart-container--presence .presence-timeline {
    flex: 1 1 auto;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.curves-chart-area:fullscreen.curves-chart-area--presence .curves-chart-toolbar,
.curves-chart-area:-webkit-full-screen.curves-chart-area--presence .curves-chart-toolbar,
.curves-chart-area.curves-chart-area--presence.curves-chart-area--pseudo-fs .curves-chart-toolbar {
    flex-shrink: 0;
    margin-top: 0;
}

.curves-params--presence .curves-field-baskets {
    margin-top: 0.25rem;
}

.curves-params--presence {
    position: relative;
    overflow: visible;
}

.curves-params--presence .curves-presence-help {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 2;
    margin: 0;
}

.curves-params--presence .curves-presence-help[data-tooltip]:hover::after,
.curves-params--presence .curves-presence-help[data-tooltip]:focus-visible::after {
    left: 0;
    right: auto;
    top: calc(100% + 0.45rem);
    transform: none;
    max-width: min(16rem, calc(100% + 4rem));
}

.curves-params--presence .curves-presence-help[data-tooltip]:hover::before,
.curves-params--presence .curves-presence-help[data-tooltip]:focus-visible::before {
    left: 0.35rem;
    top: calc(100% + 0.05rem);
    transform: none;
    border: 5px solid transparent;
    border-bottom-color: #2c3340;
    border-right-color: transparent;
}

.curves-params--presence .curves-field-mvt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.15rem;
    padding-left: 1.25rem;
}

.curves-params--presence .curves-field-mvt .camera-images-mvt-toggle {
    width: fit-content;
}

.curves-params--presence .curves-end-anchor-inputs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: stretch;
}

.curves-params--presence .curves-end-anchor-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.curves-params--presence .curves-end-anchor-label-row label {
    margin: 0;
}

.curves-presence-live-btn {
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.curves-presence-live-btn:hover {
    border-color: var(--color-accent, #6d84a3);
    color: var(--color-text);
}

.curves-presence-live-btn--active {
    border-color: var(--color-accent, #6d84a3);
    color: var(--color-accent, #6d84a3);
    font-weight: 600;
}

.curves-field-end-anchor--live .curves-end-anchor-inputs input {
    opacity: 0.72;
}

.curves-transient-toast {
    position: fixed;
    top: calc(var(--toolbar-height, 3.25rem) + 0.5rem);
    left: 50%;
    z-index: 1200;
    transform: translateX(-50%);
    width: min(92vw, 26rem);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning, #c9a227);
    background: var(--color-warning-bg, #fff8e1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
    pointer-events: none;
}

.curves-transient-toast.hidden {
    display: none;
}

.curves-params--presence .curves-end-anchor-inputs input[type="date"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.curves-params--presence .curves-end-anchor-inputs input[type="time"] {
    flex: 0 0 auto;
    width: 6.75rem;
    min-width: 5.75rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
}

.curves-field-label {
    font-size: 0.875rem;
    color: var(--color-text);
}

.curves-basket-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
}

.curves-basket-empty {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.curves-basket-btn {
    display: block;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.curves-basket-btn:hover {
    border-color: var(--color-accent);
}

.curves-basket-btn.active {
    border-color: var(--color-accent);
    background: rgba(109, 132, 163, 0.12);
    font-weight: 500;
}

html.dark-mode .curves-basket-btn.active {
    background: rgba(109, 132, 163, 0.22);
}

.presence-timeline {
    width: 100%;
    padding: 0.15rem 0.25rem 0.35rem;
}

.presence-timeline-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 0.2rem;
    min-height: 1.5rem;
    padding-bottom: 0.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

html.dark-mode .presence-timeline-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.presence-timeline-side {
    display: grid;
    grid-template-columns: repeat(var(--col-count, 1), minmax(0, 1fr));
    align-items: end;
    gap: 0.1rem;
    min-width: 0;
}

.presence-timeline-side--left {
    padding-right: 0.15rem;
}

.presence-timeline-side--right {
    padding-left: 0.15rem;
}

.presence-timeline-sensor-slot {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.presence-timeline-sensor-slot--empty {
    min-height: 1px;
}

.presence-timeline-sensor-name {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.presence-timeline-axis-head {
    width: 4.75rem;
    flex-shrink: 0;
}

.presence-timeline-track {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.presence-timeline-loading-older {
    margin: 0.5rem 0 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
}

.presence-timeline-scroll-pad {
    flex: 0 0 auto;
    width: 100%;
    pointer-events: none;
}

.presence-timeline-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.presence-timeline-hline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.presence-timeline-hline::before,
.presence-timeline-hline::after {
    content: '';
    position: absolute;
    top: 0;
    height: 0;
    border-top: 1px solid rgba(109, 132, 163, 0.22);
}

.presence-timeline-hline::before {
    left: 0;
    width: calc(50% - 2.6rem);
}

.presence-timeline-hline::after {
    right: 0;
    width: calc(50% - 2.6rem);
}

html.dark-mode .presence-timeline-hline::before,
html.dark-mode .presence-timeline-hline::after {
    border-top-color: rgba(160, 180, 210, 0.2);
}

.presence-timeline-axis-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--color-accent);
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
}

.presence-timeline-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.presence-timeline-tick {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.presence-timeline-tick-label {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.presence-timeline-events {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.presence-timeline-event {
    position: absolute;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: default;
    z-index: 2;
}

.presence-timeline-event--stacked {
    transform: none;
}

.presence-timeline-event-content--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    background: var(--color-surface);
}

.presence-timeline-event--right .presence-timeline-event-content--stack {
    align-items: flex-end;
}

.presence-timeline-event-sensor-name {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.presence-timeline-event-value {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    background: var(--color-surface);
}

.presence-timeline-event--stacked .presence-timeline-event-connector {
    align-self: flex-start;
    margin-top: var(--presence-anchor-offset, 15px);
}

.presence-timeline-event--left {
    padding-right: 0;
}

.presence-timeline-event--right {
    padding-left: 0;
}

.presence-timeline-event-body {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1px;
}

.presence-timeline-event--left .presence-timeline-event-body {
    flex-direction: row;
    justify-content: flex-start;
}

.presence-timeline-event--right .presence-timeline-event-body {
    flex-direction: row;
    justify-content: flex-end;
}

.presence-timeline-event-content {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    background: var(--color-surface);
    position: relative;
    z-index: 1;
}

.presence-timeline-event-connector {
    flex: 1 1 auto;
    align-self: center;
    height: 0;
    min-width: 0;
    border: none;
    border-top: 1px solid rgba(109, 132, 163, 0.4);
    margin: 0;
    pointer-events: none;
}

html.dark-mode .presence-timeline-event-connector {
    border-top-color: rgba(160, 180, 210, 0.35);
}

.presence-timeline-event-label {
    font-size: 0.65rem;
    line-height: 1.15;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 0.15rem;
    background: var(--color-surface);
}

.presence-timeline-event-img {
    flex: 0 0 auto;
    display: block;
    width: 58px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    position: relative;
    z-index: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: zoom-in;
}

.presence-timeline-event-img--motion {
    border: 3px solid #e53935;
    box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.35);
}

.presence-timeline-event-value--motion {
    color: #e53935;
    font-weight: 700;
}

html.dark-mode .presence-timeline-event-value--motion {
    color: #ff6b6b;
}

.presence-timeline-event--left .presence-timeline-event-img:hover {
    transform: scale(3);
    transform-origin: left center;
    z-index: 30;
    border-color: var(--color-accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.presence-timeline-event--right .presence-timeline-event-img:hover {
    transform: scale(3);
    transform-origin: right center;
    z-index: 30;
    border-color: var(--color-accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.presence-timeline-event-img--motion:hover {
    border-color: #c62828;
    box-shadow: 0 4px 18px rgba(198, 40, 40, 0.35);
}

.presence-timeline-event:hover {
    z-index: 20;
}

/* ── Timeline Présence : layout mobile (≤ 768 px) ── */
@media (max-width: 768px) {
    .presence-timeline--mobile .presence-timeline-header {
        display: none;
    }

    .presence-timeline--mobile .presence-timeline-track {
        border-top: none;
    }

    .presence-timeline-event--mobile {
        position: absolute;
        transform: none;
        width: calc(50% - 0.35rem);
        padding: 0;
        box-sizing: border-box;
        pointer-events: auto;
        z-index: 2;
    }

    .presence-timeline-event--mobile.presence-timeline-event--left {
        left: 0;
        padding-right: 0.2rem;
    }

    .presence-timeline-event--mobile.presence-timeline-event--right {
        left: auto;
        right: 0;
        width: calc(50% - 0.35rem);
        padding-left: 0.2rem;
    }

    .presence-timeline-mobile-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .presence-timeline-event--mobile.presence-timeline-event--left .presence-timeline-mobile-card {
        align-items: flex-start;
    }

    .presence-timeline-event--mobile.presence-timeline-event--right .presence-timeline-mobile-card {
        align-items: flex-end;
    }

    .presence-timeline--mobile .presence-timeline-event-img:hover {
        transform: scale(2.5);
        z-index: 40;
        border-color: var(--color-accent);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }

    .presence-timeline-event--mobile.presence-timeline-event--left .presence-timeline-event-img:hover {
        transform-origin: left bottom;
    }

    .presence-timeline-event--mobile.presence-timeline-event--right .presence-timeline-event-img:hover {
        transform-origin: right bottom;
    }

    .presence-timeline-mobile-meta {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 100%;
    }

    .presence-timeline-event--mobile .presence-timeline-event-content--stack {
        gap: 0.18rem;
        width: 100%;
    }

    .presence-timeline-event--mobile.presence-timeline-event--left .presence-timeline-event-content--stack {
        align-items: flex-start;
    }

    .presence-timeline-event--mobile.presence-timeline-event--right .presence-timeline-event-content--stack {
        align-items: flex-end;
    }

    .presence-timeline-event--mobile .presence-timeline-event-sensor-name {
        font-size: 0.62rem;
    }

    .presence-timeline-event--mobile .presence-timeline-event-value {
        font-size: 0.7rem;
    }

    .presence-timeline--mobile .presence-timeline-tick {
        z-index: 4;
    }
}

/* ── Paramètres (pièces + widgets + icônes) ── */
.settings-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 960px;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

html.dark-mode .settings-tabs {
    background: var(--color-surface-inset);
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 1 1 0;
    min-width: 5.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.6rem 0.85rem;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.settings-tab i {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.85;
}

.settings-tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.55);
}

html.dark-mode .settings-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

.settings-tab.active {
    color: var(--color-accent);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    font-weight: 600;
}

.settings-tab.active i {
    opacity: 1;
}

.settings-panels {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
}

.settings-panel-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 12rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.settings-panel-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-text-light);
    font-size: 1.75rem;
}

.settings-panel-placeholder-title {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.settings-panel-placeholder-text {
    margin: 0;
    font-size: 0.875rem;
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-rooms-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 720px;
}

.settings-rooms-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.settings-rooms-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.settings-rooms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.settings-rooms-table thead {
    background: var(--color-subtitle-bg);
    color: var(--color-on-accent);
}

.settings-rooms-table th {
    padding: 0.4rem 0.55rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.settings-rooms-table th.settings-room-th-count,
.settings-room-cell-count {
    text-align: center;
    width: 4.5rem;
}

.settings-rooms-table th:nth-child(2),
.settings-rooms-table th:nth-child(3),
.settings-room-cell-icon,
.settings-room-cell-io {
    text-align: center;
    width: 3.5rem;
}

.settings-room-row {
    cursor: pointer;
    transition: background var(--transition);
}

.settings-room-row:hover,
.settings-room-row:focus-visible {
    background: var(--color-row-highlight);
    outline: none;
}

.settings-room-row--active {
    background: var(--color-row-highlight-strong) !important;
}

.settings-room-row--active .settings-room-cell {
    border-top-color: var(--color-primary);
}

.settings-room-row--active .settings-room-cell-name {
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.settings-room-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.settings-room-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-room-chevron {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--color-accent);
    line-height: 1;
}

.settings-room-chevron--muted {
    color: var(--color-text-light);
    opacity: 0.55;
}

.settings-room-expand-row .settings-room-expand-cell {
    padding: 0;
    border-top: none;
    background: var(--color-bg-muted);
}

.settings-room-expand-row {
    animation: settings-expand-in 0.2s ease-out;
}

@keyframes settings-expand-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-room-detail--inline {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0.85rem 1rem 1rem 1.15rem;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--room-preview-bg, #ddd) 22%, var(--color-surface)) 0%,
        var(--color-surface) 48%
    );
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.settings-room-detail-preview {
    position: absolute;
    inset: 0 0 0 auto;
    width: 38%;
    max-width: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
    pointer-events: none;
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent);
}

html.dark-mode .settings-room-detail-preview {
    opacity: 0.22;
}

.settings-room-detail-kicker {
    margin: 0 0 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.settings-room-form {
    position: relative;
    z-index: 1;
    gap: 0.65rem;
}

.settings-room-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}

@media (min-width: 640px) {
    .settings-room-form-grid {
        grid-template-columns: 1.1fr 1fr 1fr auto;
    }
}

.settings-room-form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

@media (max-width: 639px) {
    .settings-room-detail--inline,
    .settings-room-detail--empty {
        box-shadow: none;
        padding: 0.85rem 1rem 1.15rem;
    }

    .settings-room-detail-preview {
        width: 42%;
        max-width: none;
    }

    .settings-room-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .settings-room-form-actions {
        margin-top: 0.35rem;
        padding-top: 0.15rem;
        align-items: stretch;
    }

    .settings-room-form-actions .settings-btn {
        width: 100%;
    }
}

.settings-image-picker--compact {
    padding: 0.35rem 0.5rem;
    gap: 0.5rem;
}

.settings-image-picker--compact img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.settings-image-picker--compact span {
    font-size: 0.8rem;
}

.settings-room-cell {
    padding: 0.3rem 0.55rem;
    border-top: 1px solid var(--color-border);
    vertical-align: middle;
}

.settings-room-cell-name {
    font-weight: 500;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-room-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-image: var(--room-icon-bg);
    background-size: cover;
    background-position: center;
}

.settings-room-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.settings-room-io {
    display: inline-block;
    min-width: 2rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.settings-room-io--out {
    color: var(--color-out-badge-text);
    border-color: var(--color-out-badge-border);
    background: var(--color-out-badge-bg);
}

.settings-room-cell-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.settings-room-detail {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.settings-room-detail-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.settings-room-detail--empty {
    padding: 1rem 1.15rem;
    box-shadow: inset 3px 0 0 var(--color-border);
}

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

.settings-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin: 0;
}

.settings-fieldset legend {
    padding: 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.settings-fieldset--soon {
    opacity: 0.65;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-field label {
    font-size: 0.85rem;
    font-weight: 500;
}

.settings-field--disabled label {
    color: var(--color-text-muted);
}

.settings-select {
    max-width: 280px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.settings-color-row,
.settings-range-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.settings-color-value,
.settings-range-value {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
}

.settings-image-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
}

.settings-image-picker img {
    border-radius: 8px;
    object-fit: cover;
    background: #eee;
}

.settings-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.settings-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-accent);
}

.settings-btn-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.settings-status {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.settings-status--error {
    color: #b91c1c;
}

.settings-hint,
.settings-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.settings-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}

.settings-picker-dialog {
    width: min(92vw, 520px);
    max-height: 80vh;
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.settings-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-picker-header h3 {
    margin: 0;
    font-size: 1rem;
}

.settings-picker-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}

.settings-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.5rem;
    padding: 1rem;
}

.settings-picker-item {
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    background: var(--color-bg-muted);
    cursor: pointer;
}

.settings-picker-item--active {
    border-color: var(--color-accent);
}

.settings-picker-item img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto;
}

#settings-content .loading-msg,
#settings-content .platform-error-detail {
    margin: 0;
}

/* ── Gestion des icônes (legacy) ── */
.settings-icons-host {
    margin: -0.25rem -0.15rem 0;
}

.icon-mgr-host {
    width: 100%;
}

.icon-mgr {
    --icon-mgr-header-bg: #dce6ef;
    --icon-mgr-tab-active: #4a5f7a;
    --icon-mgr-tab-idle: #8fa3b8;
    --icon-mgr-cell-bg: #5b7395;
    --icon-mgr-link: #3d6f98;
    font-size: 0.8125rem;
    color: #2f3f52;
    background: #f4f7fa;
    border: 1px solid #c5d0db;
    border-radius: 4px;
    overflow: hidden;
}

.icon-mgr--embedded {
    max-width: none;
}

.icon-mgr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    background: var(--icon-mgr-header-bg);
    border-bottom: 1px solid #b7c5d3;
}

.icon-mgr-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2f4d68;
}

.icon-mgr-close {
    border: none;
    background: transparent;
    color: #6b7f93;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}

.icon-mgr-tabs {
    display: flex;
    gap: 1.25rem;
    padding: 0.35rem 0.85rem 0;
    background: #eef3f7;
    border-bottom: 1px solid #c5d0db;
}

.icon-mgr-tab {
    position: relative;
    border: none;
    background: transparent;
    color: var(--icon-mgr-tab-idle);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.15rem 0.55rem;
    cursor: pointer;
}

.icon-mgr-tab.active {
    color: var(--icon-mgr-tab-active);
}

.icon-mgr-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #8e98a3;
    border-radius: 2px 2px 0 0;
}

.icon-mgr-body {
    padding: 0.65rem 0.75rem 0.85rem;
    max-height: min(70vh, 640px);
    overflow: auto;
}

.icon-mgr--popup .icon-mgr-body {
    max-height: calc(90vh - 7rem);
}

.icon-mgr-search-wrap {
    position: relative;
    margin-bottom: 0.65rem;
}

.icon-mgr-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8a97a8;
    pointer-events: none;
}

.icon-mgr-search {
    width: 100%;
    max-width: 280px;
    border: 1px solid #c5ced8;
    border-radius: 999px;
    padding: 0.4rem 0.85rem 0.4rem 2.1rem;
    font: inherit;
    background: #fff;
}

.icon-mgr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.icon-mgr-cell {
    width: 50px;
    height: 50px;
    border: 1px solid #d0d7df;
    border-radius: 10px;
    padding: 3px;
    background-color: var(--icon-mgr-cell-bg);
    background-image: var(--icon-mgr-badge);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-mgr-cell img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
}

.icon-mgr-cell--selected {
    border-color: #d42020;
    box-shadow: 0 0 0 1px #d42020;
}

.icon-mgr-cell--shared {
    outline: 1px dashed #7aa6c8;
    outline-offset: -2px;
}

.icon-mgr-user {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.icon-mgr-submenu {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    padding: 0 0.15rem;
}

.icon-mgr-submenu-link {
    border: none;
    background: transparent;
    color: var(--icon-mgr-link);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.icon-mgr-submenu-link.active {
    font-weight: 700;
    text-decoration: underline;
}

.icon-mgr-designer {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0.85rem;
}

.icon-mgr-section-title {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #35516b;
}

.icon-mgr-section-title--library {
    margin-top: 0.75rem;
}

.icon-mgr-fieldset {
    border: 1px solid #d2dbe4;
    border-radius: 4px;
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.55rem 0.55rem;
    background: #fff;
}

.icon-mgr-fieldset legend {
    padding: 0 0.25rem;
    font-weight: 600;
    color: #4a6278;
}

.icon-mgr-field {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;
}

.icon-mgr-field--slider {
    grid-template-columns: 5.5rem 1fr auto;
}

.icon-mgr-field-label,
.icon-mgr-field label {
    color: #4a6278;
}

.icon-mgr-input,
.icon-mgr-select,
.icon-mgr-num {
    width: 100%;
    border: 1px solid #c5ced8;
    border-radius: 3px;
    padding: 0.2rem 0.35rem;
    font: inherit;
    background: #fff;
}

.icon-mgr-num {
    width: 3rem;
}

.icon-mgr-font-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.icon-mgr-toggle {
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #c5ced8;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    color: #4a6278;
}

.icon-mgr-toggle.active {
    background: #e8f0f6;
    border-color: #7ea0bd;
}

.icon-mgr-color {
    display: grid;
    grid-template-columns: auto auto 4.5rem;
    gap: 0.25rem 0.35rem;
    align-items: center;
}

.icon-mgr-color-sliders {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.icon-mgr-color-sliders input[type="range"] {
    width: 100%;
}

.icon-mgr-color-clear {
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid #c5ced8;
    border-radius: 3px;
    background: #fff;
    color: #6b7f93;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.icon-mgr-color-swatch {
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid #9aabb9;
    border-radius: 2px;
}

.icon-mgr-color-hex {
    width: 4.5rem;
    border: 1px solid #c5ced8;
    border-radius: 3px;
    padding: 0.15rem 0.25rem;
    font: inherit;
}

.icon-mgr-color--disabled .icon-mgr-color-swatch {
    opacity: 0.35;
}

.icon-mgr-images-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.icon-mgr-add-layer {
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.icon-mgr-layer-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.icon-mgr-layer-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid #d2dbe4;
    border-radius: 3px;
    padding: 0.1rem;
    background: #fff;
}

.icon-mgr-layer-list button {
    border: none;
    background: transparent;
    color: #8a3b3b;
    cursor: pointer;
}

.icon-mgr-preview-wrap {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
}

.icon-mgr-preview-canvas {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--icon-mgr-cell-bg);
}

.icon-mgr-preview-text {
    position: relative;
    z-index: 5;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
    max-width: 92%;
}

.icon-mgr-preview-layer {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
}

.icon-mgr-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    border: 1px solid #b7c5d3;
    border-radius: 4px;
    background: linear-gradient(#f8fbfd, #e7eef4);
    color: #35516b;
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
}

.icon-mgr-library {
    max-height: 180px;
    overflow: auto;
    border: 1px solid #d2dbe4;
    border-radius: 4px;
    padding: 0.35rem;
    background: #fff;
}

.icon-mgr-placeholder,
.icon-mgr-empty,
.icon-mgr-hint,
.icon-mgr-status {
    margin: 0;
    color: #5f7386;
}

.icon-mgr-status--error {
    color: #b42318;
}

.icon-mgr-footer-status {
    margin: 0;
    padding: 0.35rem 0.75rem 0.55rem;
    font-size: 0.8rem;
    color: #4a6278;
    background: #eef3f7;
    border-top: 1px solid #d2dbe4;
}

.icon-mgr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 30, 40, 0.5);
}

.icon-mgr-popup-shell {
    width: min(96vw, 920px);
    max-height: 92vh;
}

.icon-mgr--popup {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 760px) {
    .icon-mgr-designer {
        grid-template-columns: 1fr;
    }

    .icon-mgr-body {
        max-height: none;
    }
}

html.dark-mode .icon-mgr {
    --icon-mgr-header-bg: #2a3542;
    --icon-mgr-tab-active: #c5d4e4;
    --icon-mgr-tab-idle: #8fa3b8;
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode .icon-mgr-header,
html.dark-mode .icon-mgr-tabs,
html.dark-mode .icon-mgr-footer-status {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
}

html.dark-mode .icon-mgr-fieldset,
html.dark-mode .icon-mgr-library,
html.dark-mode .icon-mgr-search,
html.dark-mode .icon-mgr-input,
html.dark-mode .icon-mgr-select,
html.dark-mode .icon-mgr-num,
html.dark-mode .icon-mgr-color-hex,
html.dark-mode .icon-mgr-toggle,
html.dark-mode .icon-mgr-color-clear,
html.dark-mode .icon-mgr-layer-list li {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}


/* -- API helper (constructeur d'URL) -- */
.api-helper-dialog {
    max-width: min(96vw, 40rem);
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.22));
}

.api-helper-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.api-helper-inner {
    padding: 1.1rem 1.15rem 1.15rem;
}

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

.api-helper-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
}

.api-helper-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    cursor: pointer;
}

.api-helper-close:hover {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.06);
}

.api-helper-intro {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.api-helper-intro a {
    color: var(--color-accent);
}

.api-helper-error {
    margin: 0 0 0.65rem;
    color: var(--color-danger, #c62828);
    font-size: 0.85rem;
}

.api-helper-pwd-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.api-helper-pwd-form .account-input {
    max-width: 16rem;
}

.api-helper-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.api-helper-row {
    display: grid;
    grid-template-columns: minmax(7rem, 9.5rem) 1fr;
    gap: 0.65rem 0.85rem;
    align-items: center;
}

.api-helper-label {
    font-size: 0.875rem;
    text-align: right;
    color: var(--color-text);
}

.api-helper-control {
    min-width: 0;
    font-size: 0.875rem;
}

.api-helper-control .account-select,
.api-helper-control .account-input {
    max-width: 100%;
}

.api-helper-revoke {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.65rem;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-accent);
}

.api-helper-url-row .api-helper-control {
    word-break: break-all;
}

.api-helper-url-row a {
    color: var(--color-accent);
}

.api-helper-qr {
    margin: 0.35rem 0 0.5rem 10.35rem;
}

.api-helper-qr-img {
    display: block;
    max-width: 180px;
    height: auto;
    background: #fff;
}

.api-helper-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem 0 0 10.35rem;
}

.api-helper-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.875rem;
}

.api-helper-footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .api-helper-row {
        grid-template-columns: 1fr;
    }

    .api-helper-label {
        text-align: left;
    }

    .api-helper-qr,
    .api-helper-footer-links {
        margin-left: 0;
    }
}

/* -- Camera direct test dialog -- */
.camera-direct-url-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.camera-direct-url-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: rgba(109, 132, 163, 0.06);
}

.camera-direct-url {
    word-break: break-all;
    text-align: center;
    color: var(--color-accent, #03A9F4);
    font-size: 0.85rem;
    line-height: 1.4;
}

.camera-direct-qr {
    min-height: 2rem;
}

.camera-direct-qr-img,
.camera-direct-qr img {
    display: block;
    max-width: 180px;
    height: auto;
    background: #fff;
}

.camera-direct-open-page {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    text-align: center;
}

.camera-direct-open-page a {
    color: var(--color-accent, #03A9F4);
}

.camera-direct-legacy-html {
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.camera-direct-legacy-html a {
    color: var(--color-accent, #03A9F4);
}

.camera-direct-qr-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

/* ── Expert (legacy network / scripts / logs) ── */
.expert-view {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    max-width: 960px;
}

.expert-group-title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.expert-banner {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.85rem;
    line-height: 1.45;
}

.expert-banner--warn {
    background: rgba(201, 144, 40, 0.12);
    border: 1px solid rgba(201, 144, 40, 0.35);
    color: var(--color-text);
}

html.dark-mode .expert-banner--warn {
    background: rgba(201, 144, 40, 0.16);
    border-color: rgba(201, 144, 40, 0.4);
}

.expert-banner--lan {
    background: rgba(46, 125, 50, 0.1);
    border: 1px solid rgba(46, 125, 50, 0.28);
    color: var(--color-text);
}

html.dark-mode .expert-banner--lan {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.32);
}

.expert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.expert-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}

.expert-list li:last-child .expert-item {
    border-bottom: none;
}

.expert-item:hover,
.expert-item:focus-visible {
    background: var(--color-bg-muted, rgba(109, 132, 163, 0.08));
}

html.dark-mode .expert-item:hover,
html.dark-mode .expert-item:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

.expert-item > .zmdi:first-child {
    font-size: 1.35rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.expert-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.expert-item-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-weight: 500;
}

.expert-item-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.expert-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #8a5a00;
    background: rgba(201, 144, 40, 0.18);
}

html.dark-mode .expert-badge {
    color: #f0d08a;
    background: rgba(201, 144, 40, 0.22);
}

.expert-scan-label {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.expert-scan-status {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.expert-scan-status--error {
    color: var(--color-text);
}

.expert-scan-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.expert-scan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.expert-scan-list .expert-scan-row:last-child {
    border-bottom: none;
}

.expert-scan-name {
    font-weight: 500;
    min-width: 0;
    flex: 1 1 8rem;
}

.expert-scan-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.expert-scan-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.expert-scan-link {
    font-size: 0.85rem;
    color: var(--color-accent, #03A9F4);
    text-decoration: none;
    white-space: nowrap;
}

.expert-scan-link:hover,
.expert-scan-link:focus-visible {
    text-decoration: underline;
}

.expert-scan-link--disabled {
    color: var(--color-text-muted);
    cursor: default;
    text-decoration: none;
    opacity: 0.55;
}

.expert-scan-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 5px;
    background: #6d84a3;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.expert-scan-mark.is-pending {
    background-image: none;
    opacity: 0.45;
}

.expert-scan-mark.is-pending::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: expert-scan-spin 0.7s linear infinite;
}

.expert-scan-mark.is-ok {
    background: #2e7d32;
}

.expert-scan-mark.is-fail {
    background: #c62828;
}

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

.expert-item-external,
.expert-item-chevron {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

button.expert-item {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.expert-list--spaced {
    margin-top: 0.75rem;
}

.expert-ip-dialog {
    max-width: min(96vw, 36rem);
}

.expert-ip-dialog-inner {
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 32rem);
}

.expert-ip-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.expert-ip-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.expert-ip-dialog-close {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
}

.expert-ip-dialog-close:hover,
.expert-ip-dialog-close:focus-visible {
    color: var(--color-text);
}

.expert-ip-dialog-body {
    overflow: auto;
    min-height: 3rem;
}

.expert-ip-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.expert-ip-wait {
    margin: 0.45rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.expert-ip-table {
    width: 100%;
    border-collapse: collapse;
}

.expert-ip-table td {
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: baseline;
}

.expert-ip-table tr:last-child td {
    border-bottom: none;
}

.expert-ip-addr {
    width: 8.5rem;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--color-text);
}

.expert-ip-name a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.expert-ip-name a:hover,
.expert-ip-name a:focus-visible {
    text-decoration: underline;
}

/* ── Help page ── */
.help-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

.help-doc-link {
    display: inline-block;
    min-width: 240px;
    padding: 0.9rem 1.25rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    background: #3fbae0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.help-doc-link:hover {
    background: #2aa8cf;
    color: #fff;
}

.help-assistant {
    margin-bottom: 2.25rem;
}

.help-assistant-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-text);
}

.help-assistant-form {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 360px;
    margin: 0 auto;
}

.help-assistant-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100px;
    padding: 0.75rem 0.85rem;
    border: 1px solid #3fbae0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: #f1f1f1;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

html.dark-mode .help-assistant-input {
    background: var(--color-bg-muted);
    border-color: #3fbae0;
}

.help-assistant-submit {
    flex: 0 0 50px;
    width: 50px;
    border: none;
    border-radius: 0 8px 8px 0;
    background: #3fbae0;
    color: #fff;
    cursor: pointer;
    font-size: 1.35rem;
    transition: background 0.15s ease;
}

.help-assistant-submit:hover {
    background: #2aa8cf;
}

.help-assistant-form.is-busy .help-assistant-submit,
.help-assistant-form.is-busy .help-assistant-input {
    opacity: 0.7;
    pointer-events: none;
}

.help-assistant-result {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--color-text);
    white-space: pre-wrap;
    text-align: left;
}

.help-assistant-result.is-error {
    text-align: center;
    color: var(--color-text-muted);
}

.help-assistant-result a {
    display: inline-block;
    margin-top: 0.5rem;
    color: #3fbae0;
}

.help-support-prompt {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--color-text-muted);
}

.help-support-btn {
    display: inline-block;
    min-width: 240px;
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    background: #aaa;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    transition: background 0.15s ease;
}

.help-support-btn:hover {
    background: #999;
    color: #fff;
}

.help-status-link {
    display: block;
    margin-top: 1.25rem;
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
}

.help-status-link:hover {
    text-decoration: underline;
}

/* -- rule-ai-builder (constructeur IA règle ; bloc isolé, supprimable) -- */
.rule-ai-builder {
    margin: 0 0 1rem;
    border: 1px solid #3fbae0;
    border-radius: 8px;
    background: rgba(63, 186, 224, 0.06);
    overflow: hidden;
}

.rule-ai-builder-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.rule-ai-builder-toggle:hover {
    background: rgba(63, 186, 224, 0.1);
}

.rule-ai-builder-toggle-label {
    flex: 1 1 auto;
}

.rule-ai-builder-toggle-icon::before {
    content: '▸';
    display: inline-block;
    color: #3fbae0;
    transition: transform 0.15s ease;
}

.rule-ai-builder.is-open .rule-ai-builder-toggle-icon::before {
    transform: rotate(90deg);
}

.rule-ai-builder-panel {
    padding: 0 1rem 1rem;
}

.rule-ai-builder-panel[hidden] {
    display: none !important;
}

.rule-ai-builder-hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.rule-ai-builder-history {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0 0 0.75rem;
    max-height: 14rem;
    overflow-y: auto;
}

.rule-ai-builder-history-item {
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.55);
    border-left: 3px solid #3fbae0;
}

html.dark-mode .rule-ai-builder-history-item {
    background: rgba(0, 0, 0, 0.15);
}

.rule-ai-builder-history-item.is-error {
    border-left-color: #c0392b;
}

.rule-ai-builder-history-query {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: pre-wrap;
}

.rule-ai-builder-history-response {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: pre-wrap;
}

.rule-ai-builder-history-item.is-error .rule-ai-builder-history-response {
    color: #c0392b;
}

.rule-ai-builder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

.rule-ai-builder-input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 4.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #3fbae0;
    border-radius: 8px;
    background: var(--color-bg, #fff);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

html.dark-mode .rule-ai-builder-input {
    background: var(--color-bg-muted);
}

.rule-ai-builder-submit {
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 8px;
    background: #3fbae0;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.rule-ai-builder-submit:hover {
    filter: brightness(0.95);
}

.rule-ai-builder-form.is-busy .rule-ai-builder-submit,
.rule-ai-builder-form.is-busy .rule-ai-builder-input {
    opacity: 0.65;
    pointer-events: none;
}

.rule-ai-builder-result {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.rule-ai-builder-result.is-error {
    color: #c0392b;
}

.rule-ai-builder-group-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.rule-ai-builder-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.rule-ai-builder-group-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}

.rule-ai-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.rule-ai-stack-intro {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.rule-ai-stack-card {
    border: 1px solid #3fbae0;
    border-radius: 8px;
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.rule-ai-stack-card.is-saved {
    border-color: #27ae60;
    opacity: 0.92;
}

.rule-ai-stack-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: #3fbae0;
    color: #fff;
}

.rule-ai-stack-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.rule-ai-stack-saved-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
}

.rule-ai-stack-card .rule-edit-section {
    margin: 0;
    border: none;
    border-radius: 0;
}

.rule-ai-stack-card .rule-detail-actions {
    padding: 0 1rem 1rem;
}

/* Rule playback / reconstitution */
.rule-playback-dialog {
    width: min(56rem, calc(100vw - 1.5rem));
    max-width: 56rem;
    max-height: min(90vh, 52rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface, #fff);
    color: var(--color-text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.rule-playback-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.rule-playback-shell {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 52rem);
}

.rule-playback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-section-heading-bg);
}

.rule-playback-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.rule-playback-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.rule-playback-body {
    padding: 0.85rem 1rem;
    overflow: auto;
    flex: 1 1 auto;
}

.rule-playback-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--color-border);
}

.rule-playback-summary {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.rule-playback-summary p {
    margin: 0 0 0.35rem;
}

.rule-playback-window-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.85rem;
    margin-bottom: 0.35rem;
}

.rule-playback-window-text {
    margin: 0;
    flex: 1 1 14rem;
}

.rule-playback-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.rule-playback-duration-btn {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rule-playback-duration-btn.is-active,
.rule-playback-duration-btn[aria-pressed="true"] {
    background: var(--color-accent);
    color: #fff;
}

.rule-playback-duration-btn:hover,
.rule-playback-duration-btn:focus-visible {
    outline: none;
    filter: brightness(0.97);
}

.rule-playback-duration-days {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem 0.15rem 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
}

.rule-playback-duration-days.is-active {
    border-color: var(--color-accent);
    background: rgba(63, 186, 224, 0.12);
}

.rule-playback-duration-select {
    min-width: 2.75rem;
    padding: 0.15rem 0.2rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.rule-playback-mode {
    color: var(--color-text-muted);
}

.rule-playback-criteria {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.rule-playback-toolbar {
    margin-bottom: 0.5rem;
}

.rule-playback-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.rule-playback-table-wrap {
    overflow: auto;
    max-height: min(55vh, 28rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rule-playback-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rule-playback-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4rem 0.55rem;
    text-align: left;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
    font-weight: 500;
}

.rule-playback-table td {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.rule-playback-col-time {
    white-space: nowrap;
    width: 10.5rem;
}

.rule-playback-col-value {
    font-variant-numeric: tabular-nums;
}

.rule-playback-row-exec {
    background: rgba(63, 186, 224, 0.18);
}

.rule-playback-row-blocked {
    background: rgba(230, 126, 34, 0.12);
    color: var(--color-text-muted);
}

.rule-playback-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rule-playback-exec-meta {
    font-weight: 400;
    color: var(--color-text-muted);
}

.rule-playback-periph-link {
    color: var(--color-link, #1a6fa8);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rule-playback-periph-link:hover,
.rule-playback-periph-link:focus-visible {
    color: var(--color-accent);
    outline: none;
}

.rule-playback-empty-row td {
    color: var(--color-text-muted);
    font-style: italic;
}