/* eltra-ui widget styles - self-contained, scoped under .eltra-widget */

.eltra-widget {
    --eltra-accent: #2563eb;
    --eltra-bg: #ffffff;
    --eltra-border: #e2e8f0;
    --eltra-text: #1e293b;
    --eltra-muted: #64748b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--eltra-text);
    max-width: 920px;
}

.eltra-widget h3 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.eltra-hint { color: var(--eltra-muted); font-size: .85rem; margin: .25rem 0 1rem; }

/* forms */
.eltra-form { display: flex; flex-direction: column; gap: .75rem; max-width: 380px; }
.eltra-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.eltra-form label.eltra-inline { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.eltra-form input[type=email],
.eltra-form input[type=password],
.eltra-form input[type=text] {
    padding: .5rem .65rem;
    border: 1px solid var(--eltra-border);
    border-radius: 8px;
    font-size: .9rem;
}
.eltra-form button[type=submit] {
    margin-top: .25rem;
    padding: .55rem .9rem;
    background: var(--eltra-accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.eltra-form button[type=submit]:hover { filter: brightness(1.1); }

.eltra-link {
    background: none; border: 0; color: var(--eltra-accent);
    cursor: pointer; padding: .35rem .5rem; font-size: .85rem; text-decoration: underline;
}

/* status banners */
.eltra-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px; padding: .5rem .75rem; margin-bottom: .75rem; font-size: .85rem; }
.eltra-info  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 8px; padding: .5rem .75rem; margin-bottom: .75rem; font-size: .85rem; }
.eltra-busy  { color: var(--eltra-muted); font-size: .85rem; margin-bottom: .5rem; }

/* channel / device cards */
.eltra-card { border: 1px solid var(--eltra-border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .75rem; background: var(--eltra-bg); }
.eltra-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.eltra-device-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; border-top: 1px dashed var(--eltra-border); }
.eltra-device-row button { padding: .35rem .7rem; border: 1px solid var(--eltra-accent); color: var(--eltra-accent); background: none; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.eltra-device-row button:hover { background: var(--eltra-accent); color: #fff; }

/* parameter table */
.eltra-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.eltra-table th { text-align: left; padding: .45rem .6rem; border-bottom: 2px solid var(--eltra-border); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eltra-muted); }
.eltra-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--eltra-border); vertical-align: middle; }
.eltra-mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .8rem; }

.eltra-value { cursor: pointer; min-width: 8rem; font-family: ui-monospace, Consolas, monospace; }
.eltra-value:hover { color: var(--eltra-accent); }
.eltra-value.eltra-pending { opacity: .5; }

.eltra-edit { width: 9rem; padding: .25rem .4rem; border: 1px solid var(--eltra-accent); border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }

.eltra-actions { white-space: nowrap; }
.eltra-icon { background: none; border: 0; cursor: pointer; font-size: .9rem; padding: .15rem .3rem; }
.eltra-icon:hover { transform: scale(1.15); }

/* badges */
.eltra-badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.eltra-badge-ok  { background: #dcfce7; color: #15803d; }
.eltra-badge-off { background: #f1f5f9; color: #64748b; }
.eltra-badge-ro  { background: #f1f5f9; color: #475569; }
.eltra-badge-rw  { background: #dbeafe; color: #1d4ed8; }
.eltra-badge-wo  { background: #fef9c3; color: #a16207; }

/* live update flash */
@keyframes eltra-flash-anim {
    0% { background: #dbeafe; }
    100% { background: transparent; }
}
.eltra-flash { animation: eltra-flash-anim 0.8s ease-out; }