/* ============================================================
   MAT.CSS — GLOBAL DESIGN SYSTEM
   Reutilitzat per totes les barres (llums, persianes, clima…)
   ============================================================ */

/* --- Colors globals Catppuccin --- */
:root[data-app="mat.loxone-wasm"] {
    --background-color: #888888;
    --text-color: #cdd6f4;
    --ac-bg: #1e1e2e;
    --ac-border: #313244;
    --ac-fg: #cdd6f4;
    --ac-subtext: #a6adc8;
    --ac-overlay0: #6c7086;
    --ac-surface0: #313244;
    --ac-crust: #11111b;
    --ac-mantle: #181825;
    --ac-green: #a6e3a1;
    --ac-blue: #89b4fa;
    --ac-yellow: #f9e2af;
}

/* --- Barra base --- */
.ac-compact-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px; /* Nova alçada global */
    padding: 0 12px;
    border-radius: 10px;
    background: var(--ac-bg);
    /*background-color: var(--ac-crust);*/
    border: 1px solid var(--ac-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    color: var(--ac-fg);
    user-select: none;
}

/* --- Grups --- */
.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Label global --- */
.label {
    flex: 1 1 auto;
    min-width: 0; 
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Divider global --- */
.divider {
    width: 1px;
    height: 40px;
    background: var(--ac-border);
}

/* --- Botons genèrics --- */
.pwr-btn,
.step-btn,
.spd-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* --- Value-box global --- */
.value-box {
    display: flex;
    align-items: center;
    background: var(--ac-mantle);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--ac-border);
    height: 36px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* --- Value-display global --- */
.value-display {
    min-width: 60px;
    text-align: center;
    padding: 0 6px;
}


/* --- Estat OFF global --- :not(.power-group) */
.ac-compact-bar.is-off .control-group:not(.no-dim) {
     opacity: 0.35;
    pointer-events: none;
}