/* ── Reset & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.5;
    min-height: 100vh;
}
a { color: #4a90d9; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ──────────────────────────────────────────────── */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 30px; }
.header-nav { display: flex; gap: 8px; align-items: center; }
.header-nav a {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #555;
    transition: background 0.15s;
}
.header-nav a:hover { background: #f0f0f0; text-decoration: none; }
.header-nav a.active { background: #e3f2fd; color: #1565c0; font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 12px; font-size: 0.85em; }
.user-info { color: #666; }
.btn-logout {
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 0.85em;
    cursor: pointer;
    color: #666;
    text-decoration: none;
}
.btn-logout:hover { background: #f5f5f5; text-decoration: none; }

/* ── Flash messages ──────────────────────────────────────── */
.flash-container { padding: 0 20px; }
.flash {
    padding: 10px 16px;
    margin-top: 12px;
    border-radius: 6px;
    font-size: 0.9em;
}
.flash.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.flash.error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.flash.info { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* ── Auth cards (login/register) ─────────────────────────── */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f0f2f5;
}
.auth-card {
    background: white;
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.auth-card h2 {
    font-size: 1.3em;
    color: #1a1a2e;
    margin-bottom: 4px;
    text-align: center;
}
.auth-card .subtitle {
    text-align: center;
    color: #888;
    font-size: 0.9em;
    margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95em;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.15);
}
.btn-primary {
    width: 100%;
    padding: 10px;
    background: #4a90d9;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover { background: #3a7bc8; }
.auth-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 0.85em;
    color: #888;
}

/* ── Content area ────────────────────────────────────────── */
.content { padding: 20px; max-width: 1200px; margin: 0 auto; }
.page-title {
    font-size: 1.15em;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 16px;
}

/* ── Cards grid (user dashboard) ─────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.device-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.device-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #4a90d9;
    text-decoration: none;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.card-name { font-weight: 600; font-size: 1em; color: #1a1a2e; flex: 1; }
.card-id { font-size: 0.8em; color: #999; font-family: monospace; }
.card-actions { display: flex; gap: 2px; margin: 0 4px; }
.btn-icon {
    background: none; border: none; cursor: pointer; padding: 2px 6px;
    font-size: 1em; color: #999; border-radius: 4px; line-height: 1;
}
.btn-icon:hover { background: #f0f0f0; color: #333; }
.btn-icon-danger:hover { background: #ffebee; color: #e53935; }
.card-body { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82em; color: #888; }
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.status-dot.on { background: #43a047; }
.status-dot.off { background: #c62828; }
.status-dot.unknown { background: #ccc; }

/* ── Tables (admin) ──────────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.admin-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.82em;
    font-weight: 600;
    color: #666;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}
.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover { background: #f8f9fa; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 600;
}
.badge-admin { background: #e3f2fd; color: #1565c0; }
.badge-user { background: #f5f5f5; color: #666; }
.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-inactive { background: #ffebee; color: #c62828; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #ddd;
    background: white;
    color: #555;
    transition: background 0.15s;
    text-decoration: none;
}
.btn:hover { background: #f5f5f5; text-decoration: none; }
.btn-blue { background: #4a90d9; color: white; border-color: #4a90d9; }
.btn-blue:hover { background: #3a7bc8; }
.btn-red { background: #c62828; color: white; border-color: #c62828; }
.btn-red:hover { background: #b71c1c; }
.btn-sm { padding: 3px 8px; font-size: 0.8em; }

/* ── Admin detail panels ─────────────────────────────────── */
.detail-panel {
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 16px;
}
.detail-panel h3 {
    font-size: 0.95em;
    color: #1a1a2e;
    margin-bottom: 12px;
}
.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.inline-form select, .inline-form input[type=text] {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ── QR section ──────────────────────────────────────────── */
.qr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}
.qr-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    width: 180px;
}
.qr-item img { max-width: 150px; margin-bottom: 8px; }
.qr-item .qr-label { font-size: 0.82em; color: #666; }

/* ── Device detail page ──────────────────────────────────── */
.device-page {
    height: calc(100vh - 49px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.device-header {
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}
.device-title { font-size: 1.05em; font-weight: 600; color: #1a1a2e; margin-bottom: 4px; }
.device-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 0.8em; color: #888;
}
.device-meta .on { color: #43a047; font-weight: 600; }
.device-meta .off { color: #c62828; font-weight: 600; }
.device-toolbar {
    padding: 8px 20px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    gap: 8px;
    align-items: center;
}
.device-toolbar .search-input {
    flex: 0 1 260px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    outline: none;
}
.device-toolbar .search-input:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.15);
}
.expand-btn {
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 0.8em;
    cursor: pointer;
    color: #666;
}
.expand-btn:hover { background: #f5f5f5; }
.conn-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82em; color: #888;
}
.conn-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #c62828; display: inline-block;
}
.conn-dot.online { background: #43a047; }
.data-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px 20px;
}

/* ── Groups ──────────────────────────────────────────────── */
.group-section { margin-bottom: 4px; }
.group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
    font-size: 0.85em;
    font-weight: 600;
    color: #444;
}
.group-header:hover { background: #f8f9fa; }
.group-header .arrow { font-size: 0.7em; transition: transform 0.15s; }
.group-header .arrow.collapsed { transform: rotate(-90deg); }
.group-header .count { font-weight: 400; color: #999; font-size: 0.9em; }
.group-body {
    background: white;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 6px;
}
.group-body.collapsed { display: none; }

/* ── Data table ──────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.data-table tr { border-bottom: 1px solid #f0f0f0; }
.data-table tr:last-child { border-bottom: none; }
.data-table td { padding: 4px 10px; vertical-align: middle; }
.data-table .col-name { font-family: monospace; font-weight: 500; min-width: 140px; white-space: nowrap; }
.data-table .col-type { width: 55px; }
.data-table .col-value { min-width: 100px; font-family: monospace; }
.data-table .col-time { width: 50px; color: #aaa; font-size: 0.9em; text-align: right; }

/* Type badges */
.type-badge {
    display: inline-block; padding: 1px 6px;
    border-radius: 3px; font-size: 0.78em;
    font-weight: 600; font-family: monospace;
}
.type-REAL { background: #e3f2fd; color: #1565c0; }
.type-INT, .type-UINT, .type-DINT, .type-UDINT, .type-USINT { background: #fff3e0; color: #e65100; }
.type-BOOL { background: #e8f5e9; color: #2e7d32; }

/* Bool toggle */
.bool-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 12px;
    font-size: 0.85em; font-weight: 600;
    cursor: pointer; user-select: none; transition: all 0.15s;
}
.bool-pill.on { background: #e8f5e9; color: #2e7d32; }
.bool-pill.off { background: #fce4ec; color: #c62828; }
.bool-pill:hover { filter: brightness(0.95); }
.bool-pill.readonly { cursor: default; opacity: 0.7; }
.bool-pill.readonly:hover { filter: none; }
.bool-dot { width: 7px; height: 7px; border-radius: 50%; }
.bool-pill.on .bool-dot { background: #43a047; }
.bool-pill.off .bool-dot { background: #c62828; }

/* Inline edit */
.value-display { cursor: pointer; padding: 1px 4px; border-radius: 3px; transition: background 0.1s; }
.value-display:hover { background: #f0f0f0; }
.value-display.readonly { cursor: default; }
.value-display.readonly:hover { background: transparent; }
.value-edit {
    width: 90px; padding: 2px 6px;
    border: 1px solid #4a90d9; border-radius: 3px;
    font-family: monospace; font-size: 1em; outline: none;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.2);
}

/* Flash animation */
@keyframes flash-green { 0% { background: #c8e6c9; } 100% { background: transparent; } }
.value-flash { animation: flash-green 0.4s ease-out; }

/* Toast */
.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column-reverse; gap: 8px;
}
.toast {
    padding: 10px 16px; border-radius: 6px; font-size: 0.85em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: toast-in 0.2s ease-out; max-width: 320px;
}
.toast.ok { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.toast.err { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}
.empty-state h3 { font-size: 1.1em; margin-bottom: 8px; color: #888; }

/* ── Page title row ─────────────────────────────────────── */
.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* ── Schema viewer ──────────────────────────────────────── */
.sv-page {
    height: calc(100vh - 49px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}
.sv-header-left { display: flex; align-items: center; gap: 12px; }
.sv-title { font-weight: 600; font-size: 1em; color: #1a1a2e; }
.sv-desc { font-size: 0.85em; color: #888; }
.sv-body {
    flex: 1;
    overflow: hidden;
    padding: 12px 38px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sv-canvas-wrap {
    width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
}
.sv-canvas {
    position: relative;
    width: 100%;
    background: white;
    box-shadow: 0 0 0 1px #e0e0e0;
    border-radius: 8px;
    container-type: inline-size;
    overflow: hidden;
    max-height: 100%;
}
.sv-widget {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.sv-widget.sw-offline {
    opacity: 0.4;
    filter: grayscale(0.7);
}

/* ── Schema editor layout ───────────────────────────────── */
.se-page {
    height: calc(100vh - 49px);
    display: flex;
    overflow: hidden;
}
.se-toolbar {
    width: 220px;
    min-width: 220px;
    background: white;
    border-right: 1px solid #e0e0e0;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.se-toolbar h4 {
    font-size: 0.82em;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    margin: 0;
}
.se-toolbar-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.se-schema-name { font-weight: 600; font-size: 0.95em; color: #1a1a2e; }
.se-widget-btns { display: flex; flex-direction: column; gap: 4px; }
.se-widget-btns .btn { text-align: left; font-size: 0.82em; }
.se-bg-label { display: inline-block; cursor: pointer; text-align: center; }
#se-grid-btn.active { background: #4a90d9; color: white; border-color: #4a90d9; }
#se-format-btn.active { background: #e65100; color: white; border-color: #e65100; }
.se-format-active .se-widget { cursor: crosshair !important; }
.se-toolbar-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.se-toolbar-actions .btn { text-align: center; }

.se-canvas-area {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: #f0f0f0;
}
.se-canvas-wrap {
    margin: 0 auto;
}
.se-canvas-inner {
    position: relative;
    width: 100%;
    background: white;
    box-shadow: 0 0 0 1px #e0e0e0;
    border-radius: 8px;
    container-type: inline-size;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.se-canvas-bg, .sv-canvas-bg {
    width: 100%;
    display: block;
    pointer-events: none;
}

.se-grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; user-select: none; -webkit-user-select: none; }
.se-widget {
    position: absolute;
    border-radius: 4px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.1s;
    z-index: 2;
}
.se-widget:hover { box-shadow: 0 0 0 2px #4a90d9; }
.se-widget.selected { box-shadow: 0 0 0 2px #1565c0, 0 0 0 4px rgba(21,101,192,0.2); }
.se-widget.multi-selected { box-shadow: 0 0 0 2px #e65100, 0 0 0 4px rgba(230,81,0,0.2); }
.se-lasso { position: absolute; border: 1px dashed #4a90d9; background: rgba(74,144,217,0.08); display: none; pointer-events: none; z-index: 100; }
.se-widget-content { width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.se-resize-handle {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    background: #4a90d9;
    border-radius: 2px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.1s;
}
.se-widget:hover .se-resize-handle,
.se-widget.selected .se-resize-handle { opacity: 1; }

.se-properties {
    position: fixed;
    right: 16px;
    top: 60px;
    width: 270px;
    max-height: calc(100vh - 80px);
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 50;
    transition: opacity 0.15s, transform 0.15s;
}
.se-properties.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}
.se-props-empty { display: none; }
.se-props-section { margin-bottom: 10px; }
.se-props-section label {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    color: #666;
    margin-bottom: 2px;
}
.se-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    outline: none;
}
.se-input:focus { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.se-input-color { padding: 2px; height: 32px; cursor: pointer; }
.se-props-row { display: flex; gap: 8px; }
.se-props-half { flex: 1; }
.se-props-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e0e0e0; }
.se-range-val { font-size: 0.78em; color: #888; text-align: center; }

/* Variable picker dropdown */
.se-var-picker { position: relative; }
.se-var-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
.se-var-option {
    padding: 4px 8px;
    font-size: 0.82em;
    font-family: monospace;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.se-var-option:hover { background: #e3f2fd; }
.se-var-option b { color: #1565c0; font-weight: 700; }
.se-var-more { padding: 4px 8px; font-size: 0.78em; color: #999; font-style: italic; }

/* Quick variable picker (double-click on widget) */
.se-quick-picker {
    position: absolute;
    transform: translateY(-100%) translateY(-6px);
    width: 260px;
    background: white;
    border: 2px solid #1976d2;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 200;
    padding: 4px;
}
.se-quick-picker .se-input {
    width: 100%;
    font-size: 13px;
    padding: 5px 8px;
    margin-bottom: 2px;
    font-family: monospace;
}
.se-quick-picker-list {
    max-height: 240px;
    overflow-y: auto;
}
.se-qp-option {
    padding: 3px 8px;
    font-size: 12px;
    font-family: monospace;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.se-qp-option:hover { background: #e3f2fd; }
.se-qp-option b { color: #1565c0; font-weight: 700; }
.se-qp-selected { background: #bbdefb; }
.se-qp-empty { padding: 6px 8px; font-size: 12px; color: #999; font-style: italic; }
.se-qp-more { padding: 3px 8px; font-size: 11px; color: #999; font-style: italic; }

/* ── Schema widget styles (em-based for scaling) ────────── */
.sw-value { text-align: center; padding: 0.3em; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sw-label { font-size: 0.7em; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.sw-label:empty { display: none; }
.sw-num { font-size: 1.3em; font-weight: 700; font-family: monospace; line-height: 1.2; white-space: nowrap; }
.sw-num-unit { margin-left: 0.15em; }

.sw-status { display: flex; align-items: center; gap: 0.4em; padding: 0.3em 0.5em; width: 100%; height: 100%; }
.sw-status-dot { width: 0.9em; height: 0.9em; border-radius: 50%; flex-shrink: 0; position: relative; }
.sw-status-arrow { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; }

.sw-toggle { text-align: center; padding: 0.3em; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Auto-sized widgets */
.se-widget.sw-auto,
.sv-widget.sw-auto { width: auto !important; height: auto !important; }
.sw-auto .se-widget-content { width: auto; height: auto; overflow: visible; }
.sw-auto .sw-value,
.sw-auto .sw-status,
.sw-auto .sw-toggle,
.sw-auto .sw-gauge,
.sw-auto .sw-slider,
.sw-auto .sw-thermo,
.sw-auto .sw-valve,
.sw-auto .sw-pump,
.sw-auto .sw-manometer,
.sw-auto .sw-schedule { width: auto; height: auto; }
.sw-auto .sw-toggle { padding: 0.2em 0.3em; }
.sw-auto .sw-gauge { min-width: 5em; }
.sw-auto .sw-gauge-svg { width: 5em; }
.sw-auto .sw-slider { min-width: 6em; }
.sw-auto .sw-thermo { min-height: 5em; }
.sw-auto .sw-thermo-tube { min-height: 2.5em; }
.sw-auto .sw-valve-svg { width: 3.5em; }
.sw-auto .sw-pump-svg { width: 3em; }
.sw-auto .sw-manometer { min-width: 5em; }
.sw-auto .sw-manometer-svg { width: 5em; }
.sw-auto .sw-schedule { min-width: 5em; }
.sw-auto .sw-sch-icon { width: 2.5em; }
.sw-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.8em;
    border-radius: 1em;
    color: white;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    position: relative;
}
.sw-toggle-knob {
    width: 1.1em;
    height: 1.1em;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: transform 0.15s;
}
.sw-toggle-btn.on .sw-toggle-knob { transform: translateX(0.15em); }
.sw-toggle-btn.off .sw-toggle-knob { transform: translateX(-0.15em); }

.sw-gauge { text-align: center; padding: 0.15em; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sw-gauge-svg { width: 100%; max-height: 100%; }

.sw-slider { padding: 0.3em 0.5em; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sw-slider-track {
    height: 0.5em;
    background: #e0e0e0;
    border-radius: 0.25em;
    overflow: hidden;
    margin: 0.3em 0;
}
.sw-slider-fill { height: 100%; background: #4a90d9; border-radius: 0.25em; transition: width 0.3s; }
.sw-slider-val { font-size: 0.78em; font-weight: 600; font-family: monospace; text-align: center; }

.sw-thermo { display: flex; flex-direction: column; align-items: center; padding: 0.3em; width: 100%; height: 100%; }
.sw-thermo-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.sw-thermo-tube {
    width: 0.9em;
    flex: 1;
    min-height: 2em;
    background: #e0e0e0;
    border-radius: 0.4em 0.4em 0 0;
    position: relative;
    overflow: hidden;
}
.sw-thermo-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #c62828;
    border-radius: 0.4em 0.4em 0 0;
    transition: height 0.3s;
}
.sw-thermo-bulb {
    width: 1.4em;
    height: 1.4em;
    background: #c62828;
    border-radius: 50%;
    margin-top: -0.15em;
}
.sw-thermo-val { font-size: 1.1em; font-weight: 600; font-family: monospace; margin-top: 0.15em; }

/* ── Access panel ───────────────────────────────────────── */
.se-access-panel { border-top: 1px solid #e0e0e0; padding-top: 12px; }
.se-access-panel h4 { font-size: 0.82em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.se-access-table { width: 100%; font-size: 0.82em; border-collapse: collapse; }
.se-access-table td { padding: 3px 4px; border-bottom: 1px solid #f0f0f0; }
.se-access-empty { font-size: 0.82em; color: #aaa; }
.se-access-add { display: flex; gap: 4px; margin-top: 8px; }
.se-access-add select { flex: 1; }

/* ── Valve widget (compact P&ID icon) ────────────────────── */
.sw-valve { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.15em; position: relative; }
.sw-valve-svg { width: 100%; height: auto; max-height: 80%; }

/* ── Pump widget (compact P&ID icon) ─────────────────────── */
.sw-pump { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.15em; position: relative; }
.sw-pump-svg { width: 100%; height: auto; max-height: 60%; }
.sw-pump-val { font-size: 0.7em; font-weight: 700; font-family: monospace; color: #333; line-height: 1.2; }

/* ── Manometer widget ────────────────────────────────────── */
.sw-manometer { text-align: center; padding: 0.15em; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sw-manometer-svg { width: 100%; max-height: 100%; }
.sw-mano-val { font-size: 1.1em; font-weight: 600; font-family: monospace; margin-top: 0.1em; }

/* ── Schedule widget (24H planas) ────────────────────────── */
.sw-schedule { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; position: relative; padding: 0.15em; gap: 0.05em; }
.sw-sch-icon { width: 2.8em; height: auto; }
.sw-sch-cur { font-size: 0.55em; font-weight: 700; line-height: 1.2; }
/* Schedule detail */
.sw-sch-detail-bar { display: flex; height: 20px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.sw-sch-detail-bar-cell { flex: 1; position: relative; }
.sw-sch-detail-bar-cell.now { box-shadow: inset 0 0 0 2px #fff; }
.sw-sch-detail-bar-lbl { position: absolute; bottom: -14px; left: 0; font-size: 0.65em; color: #888; }
.sw-sch-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; margin-top: 14px; }
.sw-sch-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.8em; }
.sw-sch-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sw-sch-detail-list { }
.sw-sch-detail-row { display: flex; align-items: center; gap: 6px; padding: 1px 6px; font-size: 0.8em; border-radius: 3px; line-height: 1.4; }
.sw-sch-detail-row.current { background: #e3f2fd; font-weight: 700; }
.sw-sch-detail-hour { font-family: monospace; min-width: 3.5em; color: #555; }
.sw-sch-detail-mode { color: #333; }

/* ── Detail popup (hover on template widgets) ────────────── */
.sw-detail-popup {
    position: fixed;
    z-index: 1000;
    width: 320px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border: 1px solid #e0e0e0;
    padding: 14px;
    animation: detail-in 0.15s ease-out;
    overscroll-behavior: contain;
}
@keyframes detail-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.sw-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sw-detail-title {
    font-weight: 700;
    font-size: 0.95em;
    color: #1a1a2e;
}
.sw-detail-badge {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}
.sw-detail-badge.ok { background: #e8f5e9; color: #2e7d32; }
.sw-detail-badge.err, .sw-detail-badge.error { background: #ffebee; color: #c62828; }
.sw-detail-badge.unknown { background: #f5f5f5; color: #999; }

.sw-detail-diagram-wrap {
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 6px;
    padding: 8px 4px;
}
.sw-detail-diagram { width: 100%; height: auto; }

.sw-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.sw-detail-cell {
    text-align: center;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 6px 4px;
}
.sw-detail-cell-val {
    font-size: 0.95em;
    font-weight: 700;
    color: #1a1a2e;
    font-family: monospace;
}
.sw-detail-cell-lbl {
    font-size: 0.7em;
    color: #888;
    margin-top: 1px;
}

.sw-detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.sw-detail-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 600;
    background: #e3f2fd;
    color: #1565c0;
}
.sw-detail-tag.warn {
    background: #fff3e0;
    color: #e65100;
}

/* ── Generic DB template widgets ─────────────────────────── */
.sw-generic-tpl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.15em;
    position: relative;
    padding: 0.2em;
}
/* Alive dot — widget corner */
.sw-tpl-dot {
    position: absolute;
    top: 0.08em;
    right: 0.08em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    border: 0.06em solid white;
    box-shadow: 0 0 0.1em rgba(0,0,0,0.25);
    z-index: 2;
    pointer-events: none;
}
/* Direction arrow pill */
.sw-tpl-dir {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.7em;
    border-radius: 0.35em;
    width: 70%;
    max-width: 3.5em;
    flex-shrink: 0;
}
.sw-tpl-dir.hidden { display: none; }
.sw-tpl-dir.import { background: linear-gradient(90deg, #ff8f00, #e65100); }
.sw-tpl-dir.export { background: linear-gradient(90deg, #0288d1, #01579b); }
.sw-dir-svg { width: 1.8em; height: 0.5em; }
.sw-generic-tpl .sw-tpl-svg {
    display: flex;
    justify-content: center;
}
.sw-generic-tpl .sw-tpl-svg svg {
    width: 100%;
    max-height: 4em;
}
.sw-tpl-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05em;
}
.sw-tpl-line {
    display: flex;
    align-items: baseline;
    gap: 0.2em;
    line-height: 1.3;
}
.sw-tpl-lbl {
    font-size: 0.55em;
    color: #888;
}
.sw-tpl-val {
    font-size: 0.85em;
    font-weight: 700;
    color: #333;
}
.sw-tpl-unit {
    font-size: 0.55em;
    color: #999;
}
.sw-detail-group-title {
    font-size: 0.82em;
    font-weight: 700;
    color: #455a64;
    margin: 10px 0 4px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid #e0e0e0;
}

/* ── Template modal ──────────────────────────────────────── */
.se-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-modal {
    background: white;
    border-radius: 10px;
    width: 440px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.se-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e0e0e0;
}
.se-modal-header h3 { font-size: 1em; margin: 0; color: #1a1a2e; }
.se-modal-close {
    background: none; border: none; font-size: 1.4em;
    cursor: pointer; color: #888; line-height: 1; padding: 0 4px;
}
.se-modal-close:hover { color: #333; }
.se-modal-body { padding: 14px 18px; }
.se-modal-section { margin-bottom: 12px; }
.se-modal-section > label {
    display: block; font-size: 0.78em; font-weight: 600;
    color: #666; margin-bottom: 4px;
}
.se-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.se-tpl-types { display: flex; gap: 6px; flex-wrap: wrap; }
.se-tpl-type-btn {
    padding: 6px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
    text-align: center;
}
.se-tpl-type-btn:hover { border-color: #90caf9; }
.se-tpl-type-btn.active { border-color: #1565c0; background: #e3f2fd; color: #1565c0; font-weight: 600; }
.se-tpl-type-icon { font-size: 1.1em; }
.se-tpl-preview {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-tpl-preview-inner { width: 100%; max-width: 300px; }

/* ── Editor preview mode ─────────────────────────────────── */
.se-page.preview { flex-direction: column; }
.se-page.preview .se-toolbar { display: none; }
.se-page.preview .se-properties { display: none !important; }
.se-page.preview .se-widget { cursor: default; box-shadow: none !important; }
.se-page.preview .se-widget:hover { box-shadow: none !important; }
.se-page.preview .se-resize-handle { display: none; }
.se-page.preview .se-widget-content { pointer-events: auto; }
.se-preview-bar { display: none; }
.se-page.preview .se-preview-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}
.se-preview-bar .se-schema-name { font-weight: 600; font-size: 0.95em; color: #1a1a2e; }

/* ── Writable widgets ────────────────────────────────────── */
.sw-writable { cursor: pointer; }

/* ── Inline edit input ───────────────────────────────────── */
.sw-inline-edit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-family: monospace;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
    border: 2px solid #4a90d9;
    border-radius: 3px;
    text-align: center;
    outline: none;
    background: white;
    box-sizing: border-box;
}

/* ── Chart modal (schema-chart.js) ───────────────────────── */
.sc-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sc-fade-in 0.15s ease-out;
}
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sc-modal {
    background: white;
    border-radius: 10px;
    width: 820px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.sc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #e0e0e0;
}
.sc-modal-title { font-weight: 600; font-size: 1em; color: #1a1a2e; }
.sc-modal-close {
    background: none; border: none; font-size: 1.5em;
    cursor: pointer; color: #888; line-height: 1; padding: 0 4px;
}
.sc-modal-close:hover { color: #333; }

.sc-ranges {
    display: flex;
    gap: 4px;
    padding: 10px 18px 6px;
}
.sc-range-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 0.82em;
    cursor: pointer;
    color: #555;
    transition: all 0.15s;
}
.sc-range-btn:hover { background: #f5f5f5; }
.sc-range-btn.active { background: #4a90d9; color: white; border-color: #4a90d9; }

.sc-chart-wrap {
    min-height: 380px;
    padding: 8px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sc-uplot { width: 100%; }
.sc-chart-wrap .u-legend { font-family: 'Nunito', sans-serif; font-size: 0.82em; }
.sc-chart-wrap .u-legend th { font-weight: 600; }

.sc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    width: 100%;
}
.sc-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e0e0e0;
    border-top-color: #4a90d9;
    border-radius: 50%;
    animation: sc-spin 0.7s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

.sc-error, .sc-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 0.95em;
}
.sc-retry-btn {
    margin-top: 12px;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.85em;
}
.sc-retry-btn:hover { background: #f5f5f5; }

.sc-compare {
    padding: 10px 18px 14px;
    border-top: 1px solid #f0f0f0;
}
.sc-compare-label {
    font-size: 0.82em;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}
.sc-compare-picker { position: relative; }
.sc-compare-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: monospace;
    outline: none;
}
.sc-compare-input:focus { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.sc-compare-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    z-index: 610;
}
.sc-dd-option {
    padding: 5px 10px;
    font-size: 0.82em;
    font-family: monospace;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-dd-option:hover { background: #e3f2fd; }
.sc-dd-option b { color: #1565c0; font-weight: 700; }
.sc-dd-empty, .sc-dd-more { padding: 5px 10px; font-size: 0.78em; color: #999; font-style: italic; }

#sc-compare-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.sc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    font-size: 0.78em;
    font-family: monospace;
    font-weight: 600;
}
.sc-tag-remove {
    background: none; border: none;
    cursor: pointer; color: #1565c0;
    font-size: 1.1em; line-height: 1;
    padding: 0 2px;
}
.sc-tag-remove:hover { color: #c62828; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
    .header { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
    .header-left { gap: 8px; flex: 1; min-width: 0; }
    .header-nav { gap: 2px; flex-wrap: wrap; }
    .header-nav a { padding: 4px 8px; font-size: 0.78em; }
    .header-right { font-size: 0.8em; gap: 8px; }
    .user-info { display: none; }
    .content { padding: 12px; }
    .cards-grid { grid-template-columns: 1fr; }
    .se-page { flex-direction: column; }
    .se-toolbar { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #e0e0e0; }
    .se-properties { right: 8px; top: auto; bottom: 8px; width: 260px; max-height: 50vh; }
    .sv-page { height: auto; min-height: calc(100vh - 49px); min-height: calc(100dvh - 49px); overflow: visible; }
    .sv-body { padding: 0; overflow: visible; }
    .sv-canvas-wrap { max-height: none; }
    .sv-canvas { border-radius: 0; box-shadow: none; }
    .sv-header { padding: 6px 10px; }
    .sv-header-left { gap: 6px; }
    .sv-header-left .btn { display: none; }
    .sv-title { font-size: 0.88em; }
    .sv-desc { display: none; }
    .ai-chat-btn {
        width: 52px; height: 52px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 16px; z-index: 9999;
    }
    .ai-chat-btn svg { width: 24px; height: 24px; }
    .ai-chat-hint { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 28px; z-index: 9999; }
    .admin-table { font-size: 0.82em; }
    .admin-table th, .admin-table td { padding: 6px 8px; }
    .detail-panel { padding: 14px; }
    .modal-content { width: 95vw; padding: 18px; }
}

/* ── AI Chat Widget ──────────────────────────────────────── */
.ai-chat-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(74,144,217,0.45);
    z-index: 1000;
    transition: transform 0.15s, box-shadow 0.15s;
    animation: ai-btn-pulse 2s ease-in-out infinite;
}
.ai-chat-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(74,144,217,0.55); animation: none; }

.ai-chat-hint {
    position: fixed;
    bottom: 88px;
    right: 36px;
    z-index: 1000;
    animation: ai-arrow-bounce 1s ease-in-out infinite;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(74,144,217,0.4));
}

@keyframes ai-btn-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(74,144,217,0.45); }
    50% { box-shadow: 0 4px 24px rgba(74,144,217,0.7); }
}
@keyframes ai-arrow-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.6; }
}

.ai-chat-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 370px;
    height: 520px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 1001;
    flex-direction: column;
    overflow: hidden;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #4a90d9;
    color: white;
    font-weight: 700;
    font-size: 0.95em;
}
.ai-chat-header-actions { display: flex; gap: 4px; }
.ai-chat-hdr-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.85;
}
.ai-chat-hdr-btn:hover { opacity: 1; background: rgba(255,255,255,0.15); }

.ai-chat-sessions {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    max-height: 200px;
    overflow-y: auto;
}
.ai-session-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    position: relative;
    font-size: 0.85em;
}
.ai-session-item:hover { background: #eef3fa; }
.ai-session-active { background: #e3ecf7; }
.ai-session-preview { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }
.ai-session-meta { color: #999; font-size: 0.82em; margin-top: 2px; }
.ai-session-del {
    position: absolute; right: 8px; top: 8px;
    background: none; border: none; color: #ccc; cursor: pointer; font-size: 1.1em;
}
.ai-session-del:hover { color: #e53935; }

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-chat-welcome {
    color: #999;
    text-align: center;
    padding: 40px 20px;
    font-size: 0.92em;
}

.ai-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9em;
    line-height: 1.45;
    word-break: break-word;
}
.ai-msg code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.88em; }
.ai-msg-user {
    align-self: flex-end;
    background: #4a90d9;
    color: white;
    border-bottom-right-radius: 4px;
}
.ai-msg-model {
    align-self: flex-start;
    background: #f0f0f0;
    color: #333;
    border-bottom-left-radius: 4px;
}
.ai-msg-error {
    align-self: center;
    background: #fff3f3;
    color: #c62828;
    border: 1px solid #ffcdd2;
    font-size: 0.85em;
}
.ai-msg-tool {
    align-self: center;
    background: #f5f5f5;
    color: #666;
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.ai-tool-icon { font-size: 0.9em; }

.ai-msg-loading {
    align-self: flex-start;
    background: #f0f0f0;
    padding: 8px 16px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}
.ai-dots span {
    animation: aiDot 1.4s infinite;
    font-size: 1.4em;
    color: #999;
}
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }

.ai-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    gap: 8px;
}
.ai-chat-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 16px;
    font-family: inherit;
    resize: none;
    max-height: 80px;
    outline: none;
}
.ai-chat-input:focus { border-color: #4a90d9; }
.ai-chat-send {
    background: #4a90d9;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-chat-send:hover { background: #3a7bc8; }
.ai-chat-send:disabled { background: #ccc; cursor: default; }

/* ── Heartbeat Calendar ──────────────────────────────────── */
.hb-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.1em; color: #e57373; padding: 2px 6px;
    border-radius: 4px; transition: color 0.15s;
}
.hb-icon-btn:hover { color: #c62828; }
.hb-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.hb-modal-content {
    background: white; border-radius: 12px; width: 520px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.hb-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.hb-modal-header h3 { margin: 0; font-size: 1em; color: #333; }
.hb-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.hb-close:hover { color: #333; }
.hb-modal-body { padding: 16px 20px; }

.hb-tasks { margin-bottom: 14px; }
.hb-task-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 12px; font-size: 0.78em; font-weight: 600;
    margin: 0 4px 4px 0;
}

.hb-cal-nav {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 10px; font-weight: 600; font-size: 0.92em; color: #333;
}
.hb-calendar {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    font-size: 0.82em; text-align: center;
}
.hb-cal-dow { font-weight: 700; color: #888; padding: 4px 0; font-size: 0.78em; }
.hb-cal-day {
    padding: 6px 2px; border-radius: 6px; cursor: default;
    min-height: 32px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; position: relative;
}
.hb-cal-day.other { color: #ccc; }
.hb-cal-day.today { font-weight: 700; box-shadow: inset 0 0 0 2px #4a90d9; }
.hb-cal-day.has-results { cursor: pointer; }
.hb-cal-day.has-results:hover { background: #f0f4ff; }
.hb-cal-dots { display: flex; gap: 2px; margin-top: 2px; }
.hb-cal-dots span {
    width: 5px; height: 5px; border-radius: 50%; display: inline-block;
}

.hb-day-detail {
    margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px;
    display: none; max-height: 250px; overflow-y: auto;
}
.hb-day-detail.open { display: block; }
.hb-result-item {
    display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f5f5f5;
    font-size: 0.82em; align-items: flex-start;
}
.hb-result-time { color: #888; white-space: nowrap; min-width: 44px; }
.hb-result-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 0.78em; font-weight: 600; white-space: nowrap;
}
.hb-result-text { color: #333; line-height: 1.35; flex: 1; }
.hb-result-tools { color: #999; font-size: 0.9em; }

/* ── Email Log Modal ────────────────────────────────────── */
.em-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #90a4ae; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s; margin-left: -6px;
}
.em-icon-btn:hover { color: #546e7a; }
.em-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.em-modal-content {
    background: white; border-radius: 12px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.em-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.em-modal-header h3 { margin: 0; font-size: 1em; color: #333; }
.em-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.em-close:hover { color: #333; }
.em-modal-body { padding: 16px 20px; }
.em-empty { color: #999; font-size: 0.88em; text-align: center; padding: 24px 0; }

.em-list-item {
    padding: 10px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer;
    transition: background 0.1s;
}
.em-list-item:hover { background: #fafafa; }
.em-list-item:last-child { border-bottom: none; }
.em-list-meta {
    display: flex; gap: 8px; align-items: center; font-size: 0.78em; color: #888;
    margin-bottom: 3px;
}
.em-list-subject { font-weight: 600; font-size: 0.88em; color: #333; }
.em-list-recip { font-size: 0.78em; color: #999; margin-top: 2px; }
.em-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 0.75em; font-weight: 600; white-space: nowrap;
}
.em-badge.sent { background: #e8f5e9; color: #2e7d32; }
.em-badge.error { background: #ffebee; color: #c62828; }
.em-source {
    display: inline-block; padding: 1px 5px; border-radius: 3px;
    font-size: 0.72em; font-weight: 600;
}
.em-source.ai { background: #e3f2fd; color: #1565c0; }
.em-source.heartbeat { background: #fff3e0; color: #e65100; }

.em-detail-back {
    background: none; border: none; cursor: pointer; color: #4a90d9;
    font-size: 0.85em; padding: 0; margin-bottom: 12px;
}
.em-detail-back:hover { text-decoration: underline; }
.em-detail-meta {
    font-size: 0.82em; color: #666; margin-bottom: 12px; line-height: 1.6;
}
.em-detail-body {
    font-size: 0.88em; color: #333; line-height: 1.55;
    padding: 12px; background: #fafafa; border-radius: 6px;
    max-height: 300px; overflow-y: auto;
}
.em-detail-error {
    margin-top: 8px; padding: 8px 10px; background: #ffebee;
    color: #c62828; font-size: 0.82em; border-radius: 4px;
}

/* ── God Questions Modal ────────────────────────────────── */
.qg-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #8d6e63; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s; margin-left: -6px;
    position: relative;
}
.qg-icon-btn:hover { color: #5d4037; }
.qg-has-pending::after {
    content: attr(data-count);
    position: absolute; top: -6px; right: -8px;
    background: #e53935; color: white;
    font-size: 0.6em; font-weight: 700;
    min-width: 14px; height: 14px;
    border-radius: 7px; display: flex;
    align-items: center; justify-content: center;
    line-height: 1; padding: 0 3px;
}
.qg-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.qg-modal-content {
    background: white; border-radius: 12px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.qg-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.qg-modal-header h3 { margin: 0; font-size: 1em; color: #5d4037; }
.qg-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.qg-close:hover { color: #333; }
.qg-modal-body { padding: 16px 20px; }
.qg-empty { color: #999; font-size: 0.88em; text-align: center; padding: 24px 0; }

.qg-list-item {
    display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    cursor: pointer; transition: background 0.1s;
}
.qg-list-item:hover { background: #fafafa; }
.qg-list-item:last-child { border-bottom: none; }
.qg-list-item.pending { border-left: 3px solid #ff9800; padding-left: 8px; }
.qg-list-item.answered { border-left: 3px solid #8d6e63; padding-left: 8px; }
.qg-list-icon {
    font-size: 1.2em; font-weight: 700; width: 24px; text-align: center;
    flex-shrink: 0; line-height: 1.4;
}
.qg-list-icon.pending { color: #ff9800; }
.qg-list-icon.answered { color: #8d6e63; }
.qg-list-body { flex: 1; min-width: 0; }
.qg-list-meta {
    display: flex; gap: 8px; align-items: center; font-size: 0.78em; color: #888;
    margin-bottom: 3px;
}
.qg-list-question { font-weight: 600; font-size: 0.88em; color: #333; }
.qg-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 0.75em; font-weight: 600; white-space: nowrap;
}
.qg-badge.pending { background: #fff3e0; color: #e65100; }
.qg-badge.answered { background: #efebe9; color: #5d4037; }

.qg-detail-back {
    background: none; border: none; cursor: pointer; color: #4a90d9;
    font-size: 0.85em; padding: 0; margin-bottom: 12px;
}
.qg-detail-back:hover { text-decoration: underline; }
.qg-detail-question {
    font-weight: 700; font-size: 1em; color: #333; margin-bottom: 8px;
}
.qg-detail-context {
    font-size: 0.85em; color: #888; font-style: italic; margin-bottom: 8px;
}
.qg-detail-date {
    font-size: 0.78em; color: #aaa; margin-bottom: 16px;
}
.qg-answer-box {
    background: #efebe9; border-left: 3px solid #8d6e63;
    border-radius: 6px; padding: 12px 14px; position: relative;
}
.qg-blessing {
    color: #8d6e63; font-size: 1.3em; font-weight: 700; margin-bottom: 4px;
}
.qg-answer-text {
    font-size: 0.9em; color: #333; line-height: 1.5;
}
.qg-answer-date {
    font-size: 0.72em; color: #a1887f; margin-top: 6px;
}
.qg-pending-box {
    background: #fff8e1; border-left: 3px solid #ff9800;
    border-radius: 6px; padding: 12px 14px;
    font-size: 0.88em; color: #e65100;
}

/* ── AI Admin ────────────────────────────────────────────── */
.ai-settings-card {
    background: white;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 700px;
}
.ai-settings-card h3 { margin-bottom: 16px; color: #333; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.88em; font-weight: 600; color: #555; margin-bottom: 4px; }
.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
    outline: none;
}
.form-input:focus { border-color: #4a90d9; }
textarea.form-input { resize: vertical; min-height: 60px; }
select.form-input { background: white; }
.form-range { width: 100%; }
.form-hint { font-size: 0.8em; color: #999; margin-top: 4px; }

/* ── Modal overlay ──────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px 28px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* ── Badge pending ──────────────────────────────────────────── */
.badge-pending { background: #fff3cd; color: #856404; }

/* ── Energy Prices Modal ────────────────────────────────── */
.ep-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #ffc107; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s; margin-left: -6px;
}
.ep-icon-btn:hover { color: #f57f17; }
.ep-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.ep-modal-content {
    background: white; border-radius: 12px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.ep-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.ep-modal-header h3 { margin: 0; font-size: 1em; color: #f57f17; }
.ep-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.ep-close:hover { color: #333; }
.ep-modal-body { padding: 16px 20px; }
.ep-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-bottom: 12px;
}
.ep-nav span { font-weight: 600; font-size: 0.9em; min-width: 180px; text-align: center; }
.ep-chart { padding: 4px 0 4px 24px; }
.ep-bars {
    display: flex; align-items: flex-end; gap: 1px;
    height: 200px; position: relative;
}
.ep-grid {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed rgba(0,0,0,0.08);
    pointer-events: none; z-index: 0;
}
.ep-grid-label {
    position: absolute; right: 100%; top: -8px;
    font-size: 0.6em; color: #bbb; padding-right: 4px;
    white-space: nowrap;
}
.ep-bar {
    flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
    transition: opacity 0.15s; position: relative; cursor: default;
    z-index: 1;
}
.ep-bar:hover { opacity: 0.75; }
.ep-bar.current { box-shadow: 0 0 0 2px #1565c0; border-radius: 3px 3px 0 0; }
.ep-bar:hover .ep-tooltip { display: block; }
.ep-tooltip {
    display: none; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%); background: #333; color: white;
    font-size: 0.7em; padding: 2px 5px; border-radius: 3px;
    white-space: nowrap; margin-bottom: 2px; pointer-events: none;
    z-index: 10;
}
.ep-xaxis {
    position: relative; height: 18px; border-top: 1px solid #e0e0e0;
}
.ep-xlabel {
    position: absolute; top: 2px;
    transform: translateX(-50%);
    font-size: 0.65em; color: #999;
}
.ep-stats {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 10px; font-size: 0.85em; color: #555;
}
.ep-stat b { font-weight: 700; }
.ep-stat-lo b { color: #66bb6a; }
.ep-stat-hi b { color: #ef5350; }
.ep-empty { color: #999; font-size: 0.88em; text-align: center; padding: 40px 0; }

/* ── Solar Production modal ── */
.sp-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #FFC107; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s; margin-left: -6px;
}
.sp-icon-btn:hover { color: #f57f17; }
.sp-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.sp-modal-content {
    background: white; border-radius: 12px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.sp-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.sp-modal-header h3 { margin: 0; font-size: 1em; color: #f57f17; }
.sp-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.sp-close:hover { color: #333; }
.sp-modal-body { padding: 16px 20px; }
.sp-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-bottom: 12px;
}
.sp-nav span { font-weight: 600; font-size: 0.9em; min-width: 180px; text-align: center; }
.sp-chart { padding: 4px 0; }
.sp-chart svg { display: block; }
.sp-legend {
    display: flex; justify-content: center; gap: 16px;
    margin-bottom: 6px; font-size: 0.78em; color: #666;
}
.sp-legend-item { display: flex; align-items: center; gap: 4px; }
.sp-legend-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.sp-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px 16px; margin-top: 12px; padding: 10px 16px;
    background: #fafafa; border-radius: 8px; font-size: 0.82em;
}
.sp-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 0;
}
.sp-stat-label { color: #888; }
.sp-stat-value { font-weight: 600; color: #333; }
.sp-stat-primary { color: #f57f17; font-size: 1.1em; }
.sp-empty { color: #999; font-size: 0.88em; text-align: center; padding: 40px 0; }

/* ── Weather Forecast modal ── */
.wf-icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #42a5f5; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s; margin-left: -6px;
}
.wf-icon-btn:hover { color: #1565c0; }
.wf-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 5000; display: flex; align-items: center; justify-content: center;
}
.wf-modal-content {
    background: white; border-radius: 12px; width: 660px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.wf-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #eee;
}
.wf-modal-header h3 { margin: 0; font-size: 1em; color: #42a5f5; }
.wf-close { background: none; border: none; font-size: 1.4em; cursor: pointer; color: #999; padding: 0 4px; }
.wf-close:hover { color: #333; }
.wf-modal-body { padding: 16px 20px; }
.wf-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-bottom: 12px;
}
.wf-nav span { font-weight: 600; font-size: 0.9em; min-width: 180px; text-align: center; }
.wf-chart { padding: 4px 0; }
.wf-bars {
    display: flex; align-items: stretch; gap: 1px;
    height: 200px; position: relative;
}
.wf-grid {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed rgba(0,0,0,0.08);
    pointer-events: none; z-index: 0;
}
.wf-grid-label {
    position: absolute; right: 100%; top: -8px;
    font-size: 0.6em; color: #bbb; padding-right: 4px;
    white-space: nowrap;
}
.wf-zero {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid rgba(0,0,0,0.18);
    pointer-events: none; z-index: 1;
}
.wf-col {
    flex: 1; min-width: 2px; position: relative; cursor: default;
    border-radius: 2px; z-index: 1;
}
.wf-col:hover .wf-tooltip { display: block; }
.wf-col.current { box-shadow: 0 0 0 2px #1565c0; border-radius: 3px; }
.wf-bar {
    position: absolute; left: 0; right: 0;
    border-radius: 2px; transition: opacity 0.15s;
    min-height: 1px;
}
.wf-col:hover .wf-bar { opacity: 0.75; }
.wf-rain {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(66,165,245,0.35);
    border-radius: 0 0 2px 2px;
}
.wf-tooltip {
    display: none; position: absolute; top: -2px; left: 50%;
    transform: translate(-50%, -100%); background: #333; color: white;
    font-size: 0.7em; padding: 2px 5px; border-radius: 3px;
    white-space: nowrap; pointer-events: none; z-index: 10;
}
.wf-xaxis {
    position: relative; height: 18px; border-top: 1px solid #e0e0e0;
}
.wf-xlabel {
    position: absolute; top: 2px;
    transform: translateX(-50%);
    font-size: 0.65em; color: #999;
}
.wf-stats {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 10px; font-size: 0.85em; color: #555;
}
.wf-stat b { font-weight: 700; }
.wf-stat-wind b { color: #78909c; }
.wf-stat-rain b { color: #42a5f5; }
.wf-stat-cloud b { color: #9e9e9e; }
.wf-empty { color: #999; font-size: 0.88em; text-align: center; padding: 40px 0; }
.wf-mini { margin-bottom: 6px; }
.wf-mini:last-child { margin-bottom: 0; }
.wf-mini-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 2px; padding-left: 24px;
}
.wf-mini-label { font-size: 0.75em; font-weight: 600; color: #555; }
.wf-mini-sum { font-size: 0.7em; color: #999; }
.wf-mini-area { padding-left: 24px; }

/* ── Site clients table ─────────────────────────────────────── */
.clients-container { padding: 8px 16px 16px; background: #fafafa; }
.cl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; font-size: 0.9em; font-weight: 600; color: #555;
}
.clients-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85em; background: white;
    border: 1px solid #e0e0e0; border-radius: 4px;
}
.clients-table th {
    text-align: left; padding: 6px 10px;
    background: #f5f5f5; border-bottom: 1px solid #e0e0e0;
    font-weight: 600; font-size: 0.9em; color: #555;
    white-space: nowrap;
}
.clients-table td {
    padding: 5px 10px; border-bottom: 1px solid #f0f0f0;
}
.clients-table tbody tr:hover { background: #f8f9fa; }
.cl-mono { font-family: monospace; font-size: 0.92em; }
.cl-badge {
    display: inline-block; padding: 1px 7px; border-radius: 3px;
    font-size: 0.85em; font-weight: 600;
}
.cl-wifi { background: #e3f2fd; color: #1565c0; }
.cl-wired { background: #e8f5e9; color: #2e7d32; }
.cl-lan { background: #fff3e0; color: #e65100; }
.cl-sig-great { color: #2e7d32; font-weight: 600; }
.cl-sig-good { color: #43a047; }
.cl-sig-fair { color: #e65100; }
.cl-sig-weak { color: #c62828; font-weight: 600; }
.cl-error {
    padding: 12px 16px; color: #c62828;
    background: #ffebee; border-radius: 4px; margin: 8px 0;
}
.cl-assigned { background: #e8f5e9; color: #2e7d32; }
.cl-wan { background: #f3e5f5; color: #7b1fa2; }
.cl-offline { color: #c62828; font-size: 0.85em; }
.btn-icon {
    background: none; border: none; cursor: pointer;
    font-size: 1em; color: #999; padding: 2px 4px;
}
.btn-icon:hover { color: #c62828; }
.btn-outline {
    background: white; border: 1px solid #ddd; color: #555;
}
.btn-outline:hover { border-color: #1976d2; color: #1976d2; }
.cl-assign-popup {
    background: #fff; border: 1px solid #ddd;
    border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 1000; min-width: 320px;
}
.cl-assign-popup .form-input {
    width: 100%; padding: 6px 8px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 0.9em; box-sizing: border-box;
}
.cl-assign-popup select.form-input { height: 32px; }
.btn-primary {
    background: #1976d2; color: white; border: none;
}
.btn-primary:hover { background: #1565c0; }

/* ── Mobile chat fullscreen (MUST be after .ai-chat-panel base) ── */
@media (max-width: 700px) {
    .ai-chat-panel {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh; height: 100dvh;
        bottom: auto; right: auto;
        border-radius: 0;
        z-index: 9999;
    }
}

/* ── Bridge meta & deploy log ──────────────────────────────── */
.bridge-image-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin-bottom: 16px;
    background: white; border: 1px solid #e0e0e0; border-radius: 6px;
    font-size: 0.9em;
}
.bridge-image-label { font-weight: 600; color: #555; }
.bridge-meta { color: #999; font-size: 0.8em; margin-left: 4px; }
.deploy-log { background:#1e1e1e; color:#ccc; padding:12px; border-radius:4px;
    font-size:0.82em; max-height:200px; overflow-y:auto; white-space:pre-wrap; }
.deploy-ok { color:#2e7d32; font-weight:600; margin-top:8px; }
.deploy-err { color:#c62828; font-weight:600; margin-top:8px; }

/* Heartbeat result expand */
.hb-result-body.collapsed { max-height: 4.5em; overflow: hidden; position: relative; }
.hb-result-body.collapsed::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1.5em;
    background: linear-gradient(transparent, white); }
.hb-expand-link { font-size:0.8em; color:#4a90d9; cursor:pointer; display:inline-block; margin-top:2px; }

/* Tesla modal */
.ts-car-name { font-weight:700; font-size:1.1em; margin-bottom:12px; }
.ts-soc-wrap { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ts-soc-bar { flex:1; height:20px; background:#e0e0e0; border-radius:10px; overflow:hidden; }
.ts-soc-fill { height:100%; border-radius:10px; transition:width 0.5s; }
.ts-soc-label { font-weight:700; font-size:1.2em; min-width:48px; text-align:right; }
.ts-info { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.ts-info-item { display:flex; flex-direction:column; padding:8px 10px; background:#f8f9fa; border-radius:8px; }
.ts-label { font-size:0.78em; color:#999; margin-bottom:2px; }
.ts-value { font-weight:600; font-size:0.92em; }
.ts-charging { color:#2e7d32; }
.ts-complete { color:#1565c0; }
.ts-controls { display:flex; gap:8px; flex-wrap:wrap; }