:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --text-value: #ffffff;
    --tosca: #00E5FF;
    --tosca-dim: rgba(0, 229, 255, 0.15);
    --border: #333;
    --success: #00E676;
    --danger: #FF1744;
}

body.tone1 {
    /* Tone 1: Industrial Amber */
    --bg-dark: #1b3240;
    --bg-card: #234354;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-value: #ffffff;
    --tosca: #f59b39;
    --tosca-dim: rgba(245, 155, 57, 0.15);
    --border: #3d6a85;
}

body.tone2 {
    /* Tone 2: Midnight Emerald */
    --bg-dark: #0d1117;
    --bg-card: #161b22;
    --text-main: #e6edf3;
    --text-muted: #8b949e;
    --text-value: #e6edf3;
    --tosca: #10b981;
    --tosca-dim: rgba(16, 185, 129, 0.15);
    --border: #30363d;
}

body.tone3 {
    /* Tone 3: Cobalt Precision */
    --bg-dark: #1a202c;
    --bg-card: #2d3748;
    --text-main: #ffffff;
    --text-muted: #cbd5e0;
    --text-value: #ffffff;
    --tosca: #63b3ed;
    --tosca-dim: rgba(99, 179, 237, 0.15);
    --border: #4a5568;
    --success: #38a169;
}

body.tone4 {
    /* Tone 4: Deep Amethyst */
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --text-value: #f3f4f6;
    --tosca: #a855f7;
    --tosca-dim: rgba(168, 85, 247, 0.15);
    --border: #374151;
    --danger: #ef4444;
}

body.tone5 {
    /* Tone 5: Cyberpunk Neon */
    --bg-dark: #00050a;
    --bg-card: #0a111a;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-value: #adff2f;
    --tosca: #ff00ff;
    --tosca-dim: rgba(255, 0, 255, 0.15);
    --border: #00f2ff;
}

body.tone6 {
    /* Tone 6: ISA-101 High-Performance HMI */
    --bg-dark: #d6d6d6;
    --bg-card: #e8e8e8;
    --text-main: #1a1a1a;
    --text-muted: #5c5c5c;
    --text-value: #1a1a1a;
    --tosca: #4a4a4a;
    --tosca-dim: rgba(74, 74, 74, 0.12);
    --border: #b0b0b0;
    --success: #2e7d32;
    --danger: #c62828;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    background: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100%;
}

/* AUTH OVERLAY */
/* AUTH OVERLAY */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.auth-box {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 45px 40px;
    border-radius: 16px;
    width: 420px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 
                0 0 40px -10px color-mix(in srgb, var(--tosca) 20%, transparent);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.auth-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--tosca) 50%, transparent 100%);
    border-radius: 16px 16px 0 0;
}

.auth-logo {
    width: 220px;
    height: auto;
    margin: 0 auto 24px auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.2));
}

.auth-box h2 {
    color: var(--text-main);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 12px color-mix(in srgb, var(--tosca) 40%, transparent);
}

.auth-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-form input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(10, 15, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.auth-form input:focus {
    border-color: var(--tosca);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tosca) 25%, transparent),
                inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background: rgba(10, 15, 30, 0.85);
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.auth-btn {
    width: 100%;
    padding: 14px;
    background: var(--tosca);
    color: #020617;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tosca) 35%, transparent);
}

.auth-btn:hover {
    background: #ffffff;
    color: #020617;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--tosca) 50%, transparent);
}

.auth-btn:active {
    transform: translateY(0);
}

/* SIDEBAR & NAV */
.sidebar {
    width: 250px;
    background: #0a0a0a;
    border-right: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.sidebar.minimized {
    width: 70px;
    padding: 20px 10px;
}

.minimize-btn {
    transition: transform 0.3s ease-in-out;
}

.sidebar.minimized .minimize-btn {
    transform: rotate(180deg);
}

.sidebar.minimized #app-logo-text {
    display: none;
}

.sidebar.minimized .nav-section-header span {
    display: none;
}

.sidebar.minimized .nav-section-header {
    justify-content: center;
}

.sidebar.minimized .nav-links li .nav-text {
    display: none;
}

.sidebar.minimized .nav-links li {
    justify-content: center;
    padding: 10px 0;
}

.sidebar.minimized .nav-links li i {
    margin: 0;
    width: 100%;
    text-align: center;
}

.sidebar.minimized .del-dash {
    display: none;
}

.logo {
    text-align: center;
    margin-bottom: 20px;
}

.tosca-text {
    color: var(--tosca);
    font-weight: bold;
}

.nav-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.btn-icon-small {
    background: none;
    border: none;
    color: var(--tosca);
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s;
}

.btn-icon-small:hover {
    transform: scale(1.2);
    color: #fff;
}

.nav-separator {
    height: 1px;
    background: #222;
    margin: 15px 0;
}

.nav-links {
    list-style: none;
    overflow-y: auto;
    max-height: 40vh;
}

.nav-links li {
    padding: 10px 12px;
    margin-bottom: 5px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: 0.3s;
    font-size: 0.95rem;
}

.nav-links li:hover,
.nav-links li.active,
.nav-links li.active-dash {
    background: var(--tosca-dim);
    color: var(--tosca);
}

.del-dash {
    margin-left: auto;
    opacity: 0;
    transition: 0.2s;
    color: var(--danger);
}

.nav-links li:hover .del-dash {
    opacity: 1;
}

.del-dash:hover {
    color: #ff5252;
}

/* === COMMUNICATION NAV HIERARCHY === */
.nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.nav-parent .nav-chevron {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: #555;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-parent.expanded .nav-chevron {
    transform: rotate(180deg);
    color: var(--tosca);
}

.nav-parent.expanded {
    background: var(--tosca-dim);
    color: var(--tosca);
}

.nav-children {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0;
    margin: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    margin-left: 18px;
}

.nav-children.expanded {
    max-height: 200px;
}

.nav-children li {
    padding: 8px 12px 8px 16px;
    font-size: 0.88rem;
}

/* Minimized sidebar: hide chevron and children */
.sidebar.minimized .nav-chevron {
    display: none;
}

.sidebar.minimized .nav-children {
    display: none;
}

.sidebar.minimized .nav-parent div .nav-text {
    display: none;
}

/* CONTENT */
.content {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    position: relative;
    transition: width 0.3s ease-in-out;
}

.page {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.active-page {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* TOGGLE SWITCH */
.header-right-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.edit-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1a1a;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #333;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--tosca);
}

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

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* === GRIDSTACK OVERRIDES (FIXED LAYOUT) === */
.grid-stack {
    background: transparent;
    min-height: 400px;
}

/* WIDGET DRAG & RESIZE PREVIEW */
.grid-stack-placeholder>.placeholder-content {
    background-color: rgba(0, 229, 255, 0.2) !important;
    /* Higher contrast background */
    border: 2px dashed var(--tosca) !important;
    /* Visible dashed border */
    opacity: 1 !important;
    /* Full opacity for the border/bg color */
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4) !important;
    /* Glow effect */
}

/* PENTING: Fix agar widget mengisi penuh grid */
.grid-stack-item-content {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    /* GridStack manages width/height/inset via inline styles for margins. Do not override with !important. */
    /* Ensure it acts as an absolute container filling the item based on GridStack's positioning */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.grid-stack.edit-mode .grid-stack-item-content {
    border: 1px dashed var(--tosca);
    background: rgba(30, 30, 30, 0.8);
}

/* Custom Resize Handles */
.ui-resizable-handle {
    opacity: 0;
    transition: 0.2s;
}

.grid-stack-item:hover .ui-resizable-handle {
    opacity: 1;
}

.ui-resizable-se {
    background: linear-gradient(135deg, transparent 50%, var(--tosca) 50%) !important;
    width: 15px !important;
    height: 15px !important;
    bottom: 2px !important;
    right: 2px !important;
}

.ui-resizable-sw {
    background: linear-gradient(225deg, transparent 50%, var(--tosca) 50%) !important;
    width: 15px !important;
    height: 15px !important;
    bottom: 2px !important;
    left: 2px !important;
}

.empty-message {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

/* CARD INTERNAL (Fix Height) */
.card {
    background: transparent;
    padding: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    /* Grow to fill */
    position: relative;
    min-height: 0;
    /* Critical for nested flex scrolling/sizing */
}

.card.equipment-card {
    padding: 10px;
}

.card h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
}

/* WIDGET INTERNALS */
/* Fix EChart Container to take available space */
.echart-container {
    width: 100%;
    flex: 1;
    /* Take all remaining height */
    min-height: 0;
    /* Allow shrinking */
    position: relative;
    display: block;
    height: 100%;
}

/* Fix Level Bar Layout (Anti Gepeng) */
.level-widget-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 150px;
    /* Minimal height agar tidak gepeng saat baru add */
}

.level-bar-track {
    width: 30%;
    /* Sedikit lebih lebar */
    height: 100%;
    /* Full height container */
    background: #0b1521;
    border: 1px solid #1b3a57;
    position: relative;
    overflow: hidden;
    max-width: 80px;
    border-radius: 4px;
}

.level-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: var(--tosca);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Equipment & Others */
.equipment-widget-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-top: 5px;
    text-align: center;
    flex: 1;
}

.eq-image-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
}

.eq-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
}

.webview-container {
    width: 100%;
    height: 100%;
    background: #fff;
    flex: 1;
    position: relative;
    /* Container harus relative agar iframe bisa absolute/fill */
}

.webview-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    /* Hilangkan space bawah */
}

/* Card khusus Webview: Full Screen, No Padding */
.card.webview-card {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

/* Header Overlay semi-transparan untuk Webview agar judul tetap terbaca tapi tidak makan space */
/* Header Overlay semi-transparan untuk Webview (Full View) */
.webview-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 10;
    display: none;
    /* Default Hidden, show if .webview-card */
}

/* Visibility Rules for Headers */
/* 1. Full View (Active Class): Show Overlay, Hide Standard H3 */
.card.webview-card .webview-header-overlay {
    display: block;
}

.card.webview-card h3 {
    display: none !important;
}

/* 2. Normal View (No Class): Hide Overlay, Show Standard H3 (Default behavior) */
/* .card h3 is displayed by default on line 348, so we just hide the overlay */
.card:not(.webview-card) .webview-header-overlay {
    display: none;
}

/* Widget Controls Overlay */
.widget-controls-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 50;
    display: none !important;
}

.edit-mode .widget-controls-overlay {
    display: flex !important;
}

.btn-dots {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
}

.widget-checkbox-container {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 50;
    display: none;
}

.inline-hist-picker {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid #444;
    color: #bbb;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    width: 220px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.inline-hist-picker:hover,
.inline-hist-picker:focus {
    border-color: var(--tosca);
    color: #fff;
    background: rgba(40, 40, 40, 0.8);
    outline: none;
}

.grid-stack.edit-mode .widget-checkbox-container {
    display: block;
}

.widget-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--tosca);
}

.widget-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 20px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    min-width: 130px;
    z-index: 1000;
}

.hist-picker-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.flatpickr-confirm-wrapper {
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.btn-flatpickr-ok {
    width: 100%;
    border-radius: 4px;
    padding: 8px;
    font-weight: bold;
    background: var(--tosca);
    color: #000;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s ease;
}

.btn-flatpickr-ok:hover {
    background: #00b3cc;
}

.widget-dropdown.show {
    display: block;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #ddd;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Standard UI Elements */
.level-value-text {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-value);
    line-height: 1;
}

.level-unit-text {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 400;
    text-transform: uppercase;
}

.level-label-text {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-top: 5px;
    text-transform: uppercase;
    font-weight: 500;
}

.eq-status-text {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-on {
    color: var(--success);
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.status-off {
    color: var(--danger);
    text-shadow: 0 0 10px rgba(255, 23, 68, 0.4);
}

.status-na {
    color: var(--text-muted);
}

.eq-name-text {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.eq-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-value);
}

.eq-unit {
    font-size: 1rem;
    color: var(--text-muted);
    margin-left: 5px;
}

/* Forms & Tables */
.form-card {
    max-width: 600px;
    margin: 0 auto;
}

.step {
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.col {
    display: flex;
    flex-direction: column;
}

input,
select {
    width: 100%;
    padding: 10px;
    background: #121212;
    border: 1px solid #444;
    color: white;
    border-radius: 4px;
    margin-top: 5px;
}

.widget-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.w-opt {
    flex: 1;
    min-width: 100px;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    color: #888;
    transition: 0.2s;
}

.w-opt:hover {
    background: #222;
}

.w-opt.selected {
    border-color: var(--tosca);
    background: var(--tosca-dim);
    color: var(--tosca);
}

.btn-tosca {
    background: var(--tosca);
    color: #000;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.btn-text {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    margin-right: 10px;
}

.btn-delete {
    color: var(--danger);
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1rem;
}

/* Disabled state for canvas toolbar buttons (Undo / Redo) */
.canvas-actions button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Edit Button */
.btn-edit {
    color: var(--tosca);
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    margin-right: 6px;
    transition: 0.2s;
}

.btn-edit:hover {
    color: #fff;
    transform: scale(1.15);
}

/* Role Badges */
.role-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.role-subscriber {
    background: rgba(0, 229, 255, 0.12);
    color: #00E5FF;
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.role-publisher {
    background: rgba(255, 152, 0, 0.12);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.full-width {
    width: 100%;
    margin-top: 20px;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #333;
}

/* Base class for Historian column alignment */
#mqtt-config-table th:nth-child(7),
#mqtt-config-table td:nth-child(7) {
    text-align: center;
    vertical-align: middle;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1100;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 8px;
    width: 400px;
    border: 1px solid var(--tosca);
}

.modal-footer {
    margin-top: 20px;
    text-align: right;
}

.color-picker-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker-group input {
    height: 40px;
    border: none;
    padding: 0;
}

/* Canvas Editor App Styles */
.canvas-editor-layout {
    width: 95vw;
    height: 90vh;
    background: #1e1e1e;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
}

.canvas-header {
    background: #252528;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.canvas-actions {
    display: flex;
    gap: 10px;
    margin-left: 25px;
}

.canvas-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.canvas-sidebar-left {
    width: 250px;
    background: #1a1a1a;
    border-right: 1px solid var(--border);
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.canvas-sidebar-right {
    width: 300px;
    background: #1a1a1a;
    border-left: 1px solid var(--border);
    padding: 15px;
    overflow-y: auto;
}

.canvas-workspace-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0a0a0a;
    overflow: hidden;
    height: 100%;
}

.canvas-workspace {
    width: 100%;
    height: 100%;
    position: relative;
    background: #111;
    overflow: hidden;
}

.canvas-workspace.portrait-mode {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 100%;
}

.svg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.svg-item {
    background: #2a2a2a;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    cursor: grab;
    transition: 0.2s;
}

.svg-item:hover {
    border-color: var(--tosca);
}

.svg-item img {
    max-width: 100%;
    max-height: 50px;
    pointer-events: none;
}

.canvas-container {
    margin: 0 auto;
}

.fabric-canvas-wrapper {
    width: 100%;
    height: 100%;
}

.canvas-wrapper {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.canvas-wrapper.portrait-mode {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 100%;
}

/* SCADA Canvas Property Panel - Boolean State Mapping */
.cp-state-row {
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.cp-state-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.cp-state-label small {
    font-weight: 400;
    opacity: 0.7;
}

.cp-state-off {
    color: #ff6b6b;
}

.cp-state-on {
    color: #51cf66;
}

.cp-color-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cp-color-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cp-color-item label {
    font-size: 0.75rem;
    color: #999;
    margin: 0;
}

.cp-color-item input[type="color"] {
    width: 100%;
    height: 32px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #444;
    border-radius: 4px;
    background: #1a1a1a;
}

.cp-color-item input[type="color"]:hover {
    border-color: var(--tosca);
}

.cp-transition-row {
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 10px;
}

.cp-transition-row input[type="number"] {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    font-size: 0.85rem;
}

.cp-transition-row input[type="number"]:focus {
    border-color: var(--tosca);
    outline: none;
}

.cp-transition-row select {
    height: 32px;
    font-size: 0.85rem;
}

/* Canvas sidebar right property panel inputs */
.canvas-sidebar-right select,
.canvas-sidebar-right input[type="text"],
.canvas-sidebar-right input[type="color"] {
    margin-bottom: 5px;
}

.canvas-sidebar-right label {
    font-size: 0.85rem;
    color: #bbb;
    display: block;
    margin-top: 5px;
}

.canvas-sidebar-right h4 {
    color: var(--tosca);
    margin-bottom: 10px;
}

/* Level Animation Panel */
.cp-level-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #333;
}

.cp-level-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-level-header input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--tosca);
    cursor: pointer;
}

.cp-level-header h4 {
    color: var(--tosca);
    font-weight: normal;
    font-size: 0.92rem;
    margin: 0;
}

.cp-level-tag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cp-level-tag-row input[type="text"] {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-lighter);
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
}

.cp-level-tag-row button {
    padding: 6px 10px;
    background: #333;
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: normal;
    white-space: nowrap;
}

.cp-level-tag-row button:hover {
    background: #444;
    color: #fff;
}

.cp-level-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-level-row label {
    font-size: 0.82rem;
    color: #bbb;
    font-weight: normal;
    flex-shrink: 0;
}

.cp-level-row input[type="number"] {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg-lighter);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
    text-align: right;
}

.cp-level-row input[type="color"] {
    width: 50px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-lighter);
    cursor: pointer;
}

.cp-level-clear-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: transparent;
    color: #888;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: normal;
}

.cp-level-clear-btn:hover {
    color: #f44;
    border-color: #f44;
}

/* Rotate Animation Panel */
.cp-rotate-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #333;
}

.cp-rotate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-rotate-header input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--tosca);
    cursor: pointer;
}

.cp-rotate-header h4 {
    color: var(--tosca);
    font-weight: normal;
    font-size: 0.92rem;
    margin: 0;
}

.cp-rotate-tag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cp-rotate-tag-row input[type="text"] {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-lighter);
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
}

.cp-rotate-tag-row button {
    padding: 6px 10px;
    background: #333;
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: normal;
    white-space: nowrap;
}

.cp-rotate-tag-row button:hover {
    background: #444;
    color: #fff;
}

.cp-rotate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-rotate-row label {
    font-size: 0.82rem;
    color: #bbb;
    font-weight: normal;
    flex-shrink: 0;
}

.cp-rotate-row input[type="number"],
.cp-rotate-row input[type="text"] {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg-lighter);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
    text-align: right;
}

.cp-rotate-row select {
    width: 130px;
    padding: 5px 8px;
    background: var(--bg-lighter);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
}

/* Pipe Flow Animation Section */
.cp-flow-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #333;
    display: none;
}

.cp-flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-flow-header input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--tosca);
    cursor: pointer;
}

.cp-flow-header h4 {
    color: var(--tosca);
    font-weight: normal;
    font-size: 0.92rem;
    margin: 0;
}

.cp-flow-tag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cp-flow-tag-row input[type="text"] {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-lighter);
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
}

.cp-flow-tag-row button {
    padding: 6px 10px;
    background: #333;
    color: #ccc;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: normal;
    white-space: nowrap;
}

.cp-flow-tag-row button:hover {
    background: #444;
    color: #fff;
}

.cp-flow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-flow-row label {
    font-size: 0.82rem;
    color: #bbb;
    font-weight: normal;
    flex-shrink: 0;
}

.cp-flow-row select {
    width: 130px;
    padding: 5px 8px;
    background: var(--bg-lighter);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: normal;
}

.cp-flow-row input[type="color"] {
    width: 60px;
    height: 30px;
    padding: 2px;
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

/* Historian Checkbox Styling */
.historian-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.historian-cb:checked::after {
    content: '\2714';
    font-size: 14px;
    color: var(--tosca);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.historian-cb:checked {
    background-color: rgba(0, 229, 255, 0.1);
    border-color: var(--tosca);
}

/* --- TITLE BAR WIDGET --- */
.title-bar-widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.tb-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.tb-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-subtitle {
    font-size: 0.9rem;
    margin-top: 4px;
    opacity: 0.8;
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tb-led-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.tb-led-text {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.tb-clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-logo {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

/* --- VALUE TEXT WIDGET --- */
.vt-container {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 15px 20px;
    background: var(--bg-card, #1e293b);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.vt-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.vt-ident {
    display: flex;
    flex-direction: column;
}

.vt-title {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.vt-desc {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 2px;
}

.vt-topic {
    font-size: 0.75rem;
    opacity: 0.5;
    text-align: right;
    position: absolute;
    top: 15px;
    right: 20px;
}

.vt-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.vt-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vt-val {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.vt-unit {
    font-size: 1.5rem;
    font-weight: 600;
    color: #cbd5e1;
}

/* Orientation Specifics */
.vt-vertical {
    flex-direction: column;
}

.vt-vertical .vt-value-wrapper {
    width: 80%;
    justify-content: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.vt-horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.vt-horizontal .vt-header {
    width: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.vt-horizontal .vt-body {
    justify-content: flex-end;
}

/* --- HISTORIAN TREND CALENDAR (Dark Themed) --- */
.hist-calendar {
    background: #2b2d3e !important;
    border: 1px solid #3d3f52 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    font-family: 'Segoe UI', sans-serif !important;
}

.hist-calendar .flatpickr-months {
    background: #2b2d3e;
    border-bottom: 1px solid #3d3f52;
    padding: 8px 0;
}

.hist-calendar .flatpickr-months .flatpickr-month {
    color: #e0e0e0;
    fill: #e0e0e0;
}

.hist-calendar .flatpickr-months .flatpickr-prev-month,
.hist-calendar .flatpickr-months .flatpickr-next-month {
    color: #aaa;
    fill: #aaa;
}

.hist-calendar .flatpickr-months .flatpickr-prev-month:hover,
.hist-calendar .flatpickr-months .flatpickr-next-month:hover {
    color: var(--tosca);
    fill: var(--tosca);
}

.hist-calendar .flatpickr-current-month {
    color: #e0e0e0;
}

.hist-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #2b2d3e;
    color: #e0e0e0;
    border: 1px solid #3d3f52;
}

.hist-calendar .flatpickr-current-month input.cur-year {
    color: #e0e0e0;
}

.hist-calendar .flatpickr-weekdays {
    background: #2b2d3e;
}

.hist-calendar span.flatpickr-weekday {
    color: #8a8ca8 !important;
    font-weight: 600;
    font-size: 0.85rem;
}

.hist-calendar .flatpickr-days {
    background: #2b2d3e;
    border: none;
}

.hist-calendar .dayContainer {
    background: #2b2d3e;
}

.hist-calendar .flatpickr-day {
    color: #c8c8d4;
    border-radius: 50%;
    border: none;
    max-width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 1px;
}

.hist-calendar .flatpickr-day:hover {
    background: rgba(108, 198, 181, 0.2);
    border: none;
}

.hist-calendar .flatpickr-day.today {
    border: 1px solid rgba(108, 198, 181, 0.5) !important;
}

.hist-calendar .flatpickr-day.selected,
.hist-calendar .flatpickr-day.selected:hover {
    background: #6cc6b5 !important;
    color: #1e1e2e !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(108, 198, 181, 0.4);
}

.hist-calendar .flatpickr-day.prevMonthDay,
.hist-calendar .flatpickr-day.nextMonthDay {
    color: #555670;
}

.hist-calendar .flatpickr-day.flatpickr-disabled,
.hist-calendar .flatpickr-day.flatpickr-disabled:hover {
    color: #3d3f52;
}

.hist-calendar .flatpickr-time {
    background: #252738;
    border-top: 1px solid #3d3f52;
    max-height: 44px;
}

.hist-calendar .flatpickr-time input {
    color: #e0e0e0 !important;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
}

.hist-calendar .flatpickr-time .flatpickr-time-separator {
    color: #8a8ca8;
    font-weight: 700;
}

.hist-calendar .flatpickr-time .flatpickr-am-pm {
    color: #e0e0e0;
    background: transparent;
}

.hist-calendar .flatpickr-time input:hover,
.hist-calendar .flatpickr-time input:focus {
    background: rgba(108, 198, 181, 0.1);
}

.hist-calendar .numInputWrapper:hover {
    background: rgba(108, 198, 181, 0.1);
}

.hist-calendar .numInputWrapper span {
    border-color: #3d3f52;
}

.hist-calendar .numInputWrapper span:hover {
    background: rgba(108, 198, 181, 0.2);
}

.hist-calendar .numInputWrapper span svg path {
    fill: #8a8ca8;
}

.hist-calendar .numInputWrapper span:hover svg path {
    fill: var(--tosca);
}

/* Edit Canvas Button - Only visible in Dashboard Edit Mode */
.dropdown-item.edit-canvas-item {
    display: none;
}

.grid-stack.edit-mode .dropdown-item.edit-canvas-item {
    display: flex;
}

/* Snap-to-Point Toggle Button */
#btn-snap-toggle {
    padding: 6px 12px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

#btn-snap-toggle.btn-snap-active {
    background: var(--tosca);
    color: #000;
}

.snap-radius-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 6px;
}

.snap-radius-group input[type="number"] {
    width: 42px;
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 0.8rem;
    text-align: center;
    padding: 2px;
    margin: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.snap-radius-group input[type="number"]::-webkit-outer-spin-button,
.snap-radius-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.snap-radius-group input[type="number"]:focus {
    outline: none;
    color: var(--tosca);
}

.snap-radius-unit {
    font-size: 0.7rem;
    color: #888;
    user-select: none;
}

#btn-snap-toggle.btn-snap-inactive {
    background: #444;
    color: #888;
    border: 1px solid #555;
}

#btn-snap-toggle.btn-snap-inactive:hover {
    background: #555;
    color: #aaa;
}

/* =========================================
   CANVAS GRID VIEW & SNAP-TO-GRID CONTROLS
   ========================================= */

.canvas-grid-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 18px;
}

/* Grid Toggle Button — Active */
#btn-grid-toggle {
    padding: 6px 12px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

#btn-grid-toggle.btn-grid-active {
    background: var(--tosca);
    color: #000;
}

#btn-grid-toggle.btn-grid-inactive {
    background: #444;
    color: #888;
    border: 1px solid #555;
}

#btn-grid-toggle.btn-grid-inactive:hover {
    background: #555;
    color: #aaa;
}

/* Grid Size Input Group */
.grid-size-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 6px;
}

.grid-size-group input[type="number"] {
    width: 42px;
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 0.8rem;
    text-align: center;
    padding: 2px;
    margin: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.grid-size-group input[type="number"]::-webkit-outer-spin-button,
.grid-size-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.grid-size-group input[type="number"]:focus {
    outline: none;
    color: var(--tosca);
}

.grid-size-unit {
    font-size: 0.7rem;
    color: #888;
    user-select: none;
}

.grid-size-nav-buttons {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
    margin-right: 2px;
    line-height: 1;
}

.grid-size-nav-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.55rem;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 9px;
    transition: color 0.15s ease;
}

.grid-size-nav-btn:hover {
    color: var(--tosca);
}

.grid-size-nav-btn:focus {
    outline: none;
}

/* Snap-to-Grid Toggle Button — Active */
#btn-grid-snap-toggle {
    padding: 6px 12px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

#btn-grid-snap-toggle.btn-grid-snap-active {
    background: var(--tosca);
    color: #000;
}

#btn-grid-snap-toggle.btn-grid-snap-inactive {
    background: #444;
    color: #888;
    border: 1px solid #555;
}

#btn-grid-snap-toggle.btn-grid-snap-inactive:hover {
    background: #555;
    color: #aaa;
}

/* LICENSE STATUS BANNERS */
.license-banner {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease;
}

.license-free {
    background: rgba(100, 100, 100, 0.08);
    border-color: #444;
    color: #888;
}

.license-free #license-status-dot {
    color: #666;
}

/* Student Version */
.license-plus {
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.5);
    color: #90caf9;
}

.license-plus #license-status-dot {
    color: #2196f3;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.7);
}

/* Pro Version */
.license-paidpertag {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.4);
    color: #80deea;
}

.license-paidpertag #license-status-dot {
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* Enterprise */
.license-enterprise {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
    color: #fff9c4;
}

.license-enterprise #license-status-dot {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* Tag count line inside banner */
#license-tag-count {
    font-size: 0.82rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.license-msg-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #fca5a5;
}

.license-msg-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #6ee7b7;
}

/* ============================
   TAG QUOTA — DISABLED BUTTONS & UPGRADE LINK
   ============================ */

/* Disabled state for Add Tag buttons when at quota limit */
.btn-tosca[disabled],
.btn-tosca.tag-limit-reached {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

.btn-text[disabled],
.btn-text.tag-limit-reached {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Upgrade to Pro link shown next to disabled buttons */
.tag-quota-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.82rem;
    color: #ff79c6;
    background: rgba(255, 121, 198, 0.08);
    border: 1px solid rgba(255, 121, 198, 0.3);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.tag-quota-upgrade-link:hover {
    color: #fff;
    background: rgba(255, 121, 198, 0.2);
    border-color: rgba(255, 121, 198, 0.6);
    box-shadow: 0 0 16px rgba(255, 121, 198, 0.2);
    text-decoration: none;
}

.tag-quota-upgrade-link i {
    font-size: 0.75rem;
}

/* Tag quota info bar shown in config headers */
.tag-quota-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #888;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
}

.tag-quota-info .tq-count {
    color: var(--tosca);
    font-weight: 700;
}

.tag-quota-info.at-limit {
    border-color: rgba(255, 121, 198, 0.3);
    background: rgba(255, 121, 198, 0.06);
}

.tag-quota-info.at-limit .tq-count {
    color: #ff79c6;
}

/* ============================
   REPORT CANVAS BUILDER
   ============================ */

.report-builder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
}

.report-builder-overlay.active {
    display: flex;
}

.report-builder-layout {
    width: 98vw;
    height: 96vh;
    background: #0d1117;
    border-radius: 12px;
    border: 1px solid #30363d;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* Toolbar */
.report-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.report-toolbar h3 {
    margin: 0;
    color: var(--tosca);
    font-size: 1rem;
    margin-right: 10px;
    white-space: nowrap;
}

.report-toolbar .toolbar-separator {
    width: 1px;
    height: 28px;
    background: #30363d;
    margin: 0 6px;
}

.report-toolbar .tb-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.report-toolbar .tb-group label {
    color: #8b949e;
    font-size: 0.8rem;
    white-space: nowrap;
}

.report-toolbar input[type="text"] {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 180px;
}

.report-toolbar select {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.report-toolbar .btn-rb {
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    cursor: pointer;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    white-space: nowrap;
}

.report-toolbar .btn-rb:hover {
    background: #30363d;
    color: #fff;
    border-color: #8b949e;
}

.report-toolbar .btn-rb.primary {
    background: var(--tosca);
    color: #000;
    border-color: var(--tosca);
    font-weight: 600;
}

.report-toolbar .btn-rb.primary:hover {
    filter: brightness(1.15);
}

.report-toolbar .btn-rb.danger {
    border-color: #f85149;
    color: #f85149;
}

.report-toolbar .btn-rb.danger:hover {
    background: rgba(248, 81, 73, 0.15);
}

/* Global Time Range in Toolbar */
.report-toolbar .tb-time-range {
    gap: 6px;
}

.report-toolbar .tb-time-range input[type="text"] {
    width: 140px;
    font-size: 0.8rem;
    padding: 5px 8px;
    cursor: pointer;
}

/* Body: Canvas + Sidebar */
.report-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* A4 Canvas Workspace */
.report-canvas-workspace {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    background: #0a0e14;
    background-image:
        radial-gradient(circle, #1c2028 1px, transparent 1px);
    background-size: 20px 20px;
}

.report-a4-wrapper {
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.report-a4-canvas {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    /* Dimensions set by JS based on orientation */
}

.report-a4-canvas.portrait {
    width: 595px;
    /* A4 portrait at 72 DPI */
    height: 842px;
}

.report-a4-canvas.landscape {
    width: 842px;
    height: 595px;
}

/* Header & Footer zones on A4 */
.report-page-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    z-index: 5;
    pointer-events: none;
}

.report-page-header .rh-logo {
    height: 36px;
    max-width: 120px;
    object-fit: contain;
}

.report-page-header .rh-info {
    text-align: right;
    font-size: 9px;
    color: #495057;
    line-height: 1.4;
}

.report-page-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 8px;
    color: #6c757d;
    z-index: 5;
    pointer-events: none;
}

/* Draggable Elements on A4 */
.report-element {
    position: absolute;
    border: 2px solid transparent;
    cursor: move;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    z-index: 10;
}

.report-element:hover {
    border-color: #4493f8;
    box-shadow: 0 0 0 1px rgba(68, 147, 248, 0.3);
}

.report-element.selected {
    border-color: #4493f8;
    box-shadow: 0 0 0 2px rgba(68, 147, 248, 0.4);
}

.report-element .re-title-bar {
    background: #e9ecef;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    border-bottom: 1px solid #dee2e6;
}

.report-element .re-title-bar .re-type-badge {
    background: #6c757d;
    color: #fff;
    font-size: 7px;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-element .re-body {
    width: 100%;
    height: calc(100% - 22px);
    position: relative;
    overflow: hidden;
}

.report-element .re-delete-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    line-height: 1;
}

.report-element.selected .re-delete-btn,
.report-element:hover .re-delete-btn {
    display: flex;
}

/* Resize handle */
.report-element .re-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #4493f8 50%);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 20;
}

.report-element.selected .re-resize,
.report-element:hover .re-resize {
    opacity: 1;
}

/* Report element placeholders */
.re-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 10px;
    text-align: center;
    gap: 4px;
}

.re-placeholder i {
    font-size: 20px;
    color: #ced4da;
}

/* Right Sidebar */
.report-sidebar {
    width: 280px;
    background: #161b22;
    border-left: 1px solid #30363d;
    overflow-y: auto;
    padding: 16px;
    flex-shrink: 0;
}

.report-sidebar h4 {
    color: var(--tosca);
    font-size: 0.85rem;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #21262d;
}

.report-sidebar .rs-empty {
    color: #484f58;
    font-size: 0.82rem;
    text-align: center;
    padding: 30px 10px;
}

.report-sidebar .rs-group {
    margin-bottom: 14px;
}

.report-sidebar .rs-group label {
    display: block;
    color: #8b949e;
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.report-sidebar .rs-group input,
.report-sidebar .rs-group select {
    width: 100%;
    padding: 6px 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 4px;
    font-size: 0.82rem;
}

.report-sidebar .rs-group select[multiple] {
    min-height: 80px;
}

.report-sidebar .rs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.report-sidebar .rs-row>div {
    flex: 1;
}

.report-sidebar .rs-divider {
    height: 1px;
    background: #21262d;
    margin: 14px 0;
}

.report-sidebar .btn-rs {
    width: 100%;
    padding: 7px;
    border-radius: 4px;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    cursor: pointer;
    font-size: 0.82rem;
    margin-top: 6px;
    transition: all 0.2s;
}

.report-sidebar .btn-rs:hover {
    background: #30363d;
    color: #fff;
}

.report-sidebar .btn-rs.danger {
    border-color: #f85149;
    color: #f85149;
}

.report-sidebar .btn-rs.danger:hover {
    background: rgba(248, 81, 73, 0.15);
}

.report-sidebar .btn-rs.accent {
    border-color: var(--tosca);
    color: var(--tosca);
    padding: 6px 10px;
    min-width: unset;
}

.report-sidebar .btn-rs.accent:hover {
    background: rgba(0, 229, 255, 0.12);
}

/* Tag Add Row */
.rp-tag-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.rp-tag-add-row select {
    flex: 1;
    background: #161b22;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}

/* Active Tags Chip List */
.rp-active-tags-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.rp-tag-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.78rem;
    color: #c9d1d9;
    transition: all 0.15s ease;
}

.rp-tag-chip:hover {
    border-color: #484f58;
    background: #1c2333;
}

.rp-tag-chip-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-tag-chip-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-tag-chip-remove {
    background: none;
    border: none;
    color: #f85149;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.rp-tag-chip-remove:hover {
    opacity: 1;
}

/* === Dashboard Report Widget === */
.report-widget-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 20px;
}

.report-widget-preview .report-widget-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tosca-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--tosca);
}

.report-widget-preview .report-widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    height: auto;
}

.report-widget-preview .report-widget-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.report-generate-btn {
    padding: 10px 24px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    gap: 8px;
    animation: reportBtnPulse 2s infinite;
}

@keyframes reportBtnPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(0, 229, 255, 0);
    }
}

/* === Print-Friendly Report (Off-screen render) === */
.report-print-area {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

.report-print-container {
    background: #ffffff;
    color: #1a1a1a;
    font-family: 'Segoe UI', Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.report-print-container .rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    border-bottom: 2px solid #333;
    background: #f8f9fa;
}

.report-print-container .rp-header img {
    height: 40px;
    max-width: 140px;
    object-fit: contain;
}

.report-print-container .rp-header .rp-info {
    text-align: right;
    font-size: 10px;
    color: #495057;
    line-height: 1.5;
}

.report-print-container .rp-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 25px;
    border-top: 1px solid #dee2e6;
    font-size: 9px;
    color: #6c757d;
    background: #f8f9fa;
}

.report-print-container .rp-element {
    position: absolute;
    overflow: hidden;
}

.report-print-container .rp-element-title {
    font-size: 10px;
    font-weight: 700;
    color: #333;
    padding: 4px 8px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
}

.report-print-container table.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

.report-print-container table.rp-table th {
    background: #2d3748;
    color: #fff;
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #4a5568;
}

.report-print-container table.rp-table td {
    padding: 4px 8px;
    border: 1px solid #dee2e6;
    color: #333;
}

.report-print-container table.rp-table tr:nth-child(even) td {
    background: #f8f9fa;
}

.report-print-container .rp-value-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 8px;
}

.report-print-container .rp-value-text .rp-vt-label {
    font-size: 10px;
    color: #6c757d;
    margin-bottom: 4px;
}

.report-print-container .rp-value-text .rp-vt-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

.report-print-container .rp-value-text .rp-vt-unit {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

.report-print-container .rp-value-text .rp-vt-calc {
    font-size: 8px;
    color: #adb5bd;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Loading overlay for report generation */
.report-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 17, 23, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: 16px;
    color: #e6edf3;
    font-size: 0.95rem;
}

.report-loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #30363d;
    border-top-color: var(--tosca);
    border-radius: 50%;
    animation: reportSpin 0.8s linear infinite;
}

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

/* Header/Footer config popover */
.report-hf-config {
    position: absolute;
    top: 45px;
    right: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 16px;
    z-index: 50;
    width: 300px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: none;
}

.report-hf-config.active {
    display: block;
}

.report-hf-config label {
    display: block;
    color: #8b949e;
    font-size: 0.78rem;
    margin-bottom: 4px;
    margin-top: 10px;
}

.report-hf-config label:first-child {
    margin-top: 0;
}

.report-hf-config input,
.report-hf-config select {
    width: 100%;
    padding: 6px 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 4px;
    font-size: 0.82rem;
}

.report-hf-config input[type="file"] {
    padding: 4px;
}

.report-hf-config input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}

/* =========================================
   AI CHATBOT ASSISTANT STYLES
   ========================================= */

/* FAB (Floating Action Button) */
.ai-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tosca), color-mix(in srgb, var(--tosca) 60%, #000));
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--tosca) 25%, transparent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.ai-fab:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--tosca) 35%, transparent);
}

.ai-fab.active {
    transform: rotate(90deg) scale(1.1);
}

.ai-fab-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--tosca);
    animation: aiFabPulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes aiFabPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.ai-fab.active .ai-fab-pulse {
    display: none;
}

/* Chat Panel */
.ai-chat-panel {
    position: fixed;
    bottom: 100px;
    right: 28px;
    width: 460px;
    height: 620px;
    max-height: calc(100vh - 130px);
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    z-index: 1500;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.ai-chat-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Chat Header */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.ai-chat-title {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ai-chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #8b949e;
}

.ai-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f44336;
    display: inline-block;
    transition: background 0.3s ease;
}

.ai-status-dot.online {
    background: #00E676;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.5);
}

.ai-chat-header-right {
    display: flex;
    gap: 6px;
}

.ai-header-btn {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #8b949e;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.ai-header-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Messages Area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 5px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Message Bubbles */
.ai-msg {
    display: flex;
    gap: 10px;
    max-width: 90%;
    animation: aiMsgIn 0.3s ease-out;
}

@keyframes aiMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-msg-bot {
    align-self: flex-start;
}

.ai-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-msg-bot .ai-msg-avatar {
    background: linear-gradient(135deg, var(--tosca), color-mix(in srgb, var(--tosca) 50%, #000));
    color: #fff;
}

.ai-msg-user .ai-msg-avatar {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tosca);
}

.ai-msg-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
}

.ai-msg-bot .ai-msg-bubble {
    background: rgba(255, 255, 255, 0.06);
    color: #e6edf3;
    border-top-left-radius: 4px;
}

.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, var(--tosca), color-mix(in srgb, var(--tosca) 70%, #000));
    color: #fff;
    border-top-right-radius: 4px;
}

.ai-msg-time {
    font-size: 0.68rem;
    color: #484f58;
    padding: 0 4px;
}

.ai-msg-user .ai-msg-time {
    text-align: right;
}

/* Markdown rendering inside bubbles */
.ai-msg-bubble strong {
    font-weight: 700;
}

.ai-msg-bubble em {
    font-style: italic;
}

.ai-msg-bubble code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-size: 0.82em;
}

.ai-msg-bubble pre {
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 0.8em;
}

.ai-msg-bubble pre code {
    background: none;
    padding: 0;
}

/* Markdown tables */
.ai-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.82em;
}

.ai-msg-bubble th,
.ai-msg-bubble td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 8px;
    text-align: left;
}

.ai-msg-bubble th {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: var(--tosca);
}

.ai-msg-bubble ul,
.ai-msg-bubble ol {
    padding-left: 18px;
    margin: 6px 0;
}

.ai-msg-bubble li {
    margin-bottom: 3px;
}

/* SQL Badge */
.ai-sql-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    color: #8b949e;
    margin-top: 6px;
    cursor: default;
}

.ai-sql-badge i {
    color: var(--tosca);
    font-size: 0.65rem;
}

/* Action Suggestion Buttons */
.ai-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ai-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--tosca);
    background: rgba(0, 229, 255, 0.08);
    color: var(--tosca);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ai-action-btn:hover {
    background: var(--tosca);
    color: #000;
}

.ai-action-btn i {
    font-size: 0.72rem;
}

/* =========================================
   AI EMAIL CONFIRMATION CARD
   ========================================= */
.ai-email-confirm {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.06), rgba(0, 151, 167, 0.03));
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    animation: aiEmailCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.3s ease;
}

@keyframes aiEmailCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-email-confirm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(0, 151, 167, 0.08));
    border-bottom: 1px solid rgba(0, 188, 212, 0.12);
    font-size: 0.88rem;
    font-weight: 700;
    color: #00E5FF;
}

.ai-email-confirm-header i {
    font-size: 1rem;
    color: #00E5FF;
}

.ai-email-confirm-details {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-email-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.ai-email-detail-label {
    color: #8b949e;
    min-width: 60px;
    flex-shrink: 0;
    font-weight: 500;
}

.ai-email-detail-value {
    color: #e6edf3;
    flex: 1;
    word-break: break-word;
}

.ai-email-tag-chip {
    display: inline-block;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: #00E5FF;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 600;
    margin: 1px 3px 1px 0;
    white-space: nowrap;
}

.ai-email-confirm-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 14px;
}

.ai-email-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #00BCD4, #0097A7);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0, 188, 212, 0.25);
}

.ai-email-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0, 188, 212, 0.4);
    background: linear-gradient(135deg, #00E5FF, #00BCD4);
}

.ai-email-send-btn:active {
    transform: translateY(0);
}

.ai-email-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #8b949e;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-email-cancel-btn:hover {
    background: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.3);
    color: #ff5252;
}

/* Sending State */
.ai-email-confirm.ai-email-sending {
    border-color: rgba(0, 188, 212, 0.35);
    animation: aiEmailPulse 2s ease-in-out infinite;
}

@keyframes aiEmailPulse {

    0%,
    100% {
        border-color: rgba(0, 188, 212, 0.2);
    }

    50% {
        border-color: rgba(0, 188, 212, 0.45);
        box-shadow: 0 0 20px rgba(0, 188, 212, 0.1);
    }
}

.ai-email-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #00E5FF;
    font-size: 0.82rem;
    font-weight: 500;
    width: 100%;
}

.ai-email-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(0, 229, 255, 0.15);
    border-top: 2.5px solid #00E5FF;
    border-radius: 50%;
    animation: aiEmailSpin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes aiEmailSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Success State */
.ai-email-confirm.ai-email-success {
    border-color: rgba(0, 230, 118, 0.3);
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.06), rgba(0, 200, 83, 0.03));
}

.ai-email-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    width: 100%;
    animation: aiEmailResultIn 0.3s ease-out;
}

@keyframes aiEmailResultIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-email-result i {
    margin-top: 2px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ai-email-result-success {
    color: #00E676;
}

.ai-email-result-success i {
    color: #00E676;
}

/* Error State */
.ai-email-confirm.ai-email-error {
    border-color: rgba(255, 82, 82, 0.3);
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.06), rgba(244, 67, 54, 0.03));
}

.ai-email-result-error {
    color: #ff5252;
}

.ai-email-result-error i {
    color: #ff5252;
}

/* Cancelled State */
.ai-email-confirm.ai-email-cancelled {
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

/* Typing Indicator */
.ai-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.ai-typing-dots {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    border-top-left-radius: 4px;
}

.ai-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tosca);
    opacity: 0.4;
    animation: aiTypingBounce 1.4s infinite ease-in-out;
}

.ai-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiTypingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Chat Input Bar */
.ai-chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ai-chat-input-bar input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.ai-chat-input-bar input::placeholder {
    color: #484f58;
}

.ai-chat-input-bar input:focus {
    border-color: var(--tosca);
}

.ai-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--tosca);
    color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tosca) 40%, transparent);
}

.ai-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* =========================================
   RESIZE HANDLE
   ========================================= */
.ai-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
    font-size: 0.65rem;
    z-index: 10;
    transition: color 0.2s ease;
    user-select: none;
}

.ai-resize-handle:hover {
    color: var(--tosca);
}

.ai-resize-handle:active {
    color: var(--tosca);
    cursor: ns-resize;
}

/* When resizing, prevent transitions on the panel */
.ai-chat-panel.resizing {
    transition: none !important;
}

/* =========================================
   MAXIMIZE STATE
   ========================================= */
.ai-chat-panel.maximized {
    width: calc(100vw - 300px) !important;
    height: calc(100vh - 50px) !important;
    bottom: 25px !important;
    right: 20px !important;
    border-radius: 12px;
    max-height: none !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-chat-panel.maximized .ai-resize-handle {
    display: none;
}

/* =========================================
   COOLDOWN BAR (Rate-Limit)
   ========================================= */
.ai-cooldown-bar {
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.08), rgba(255, 152, 0, 0.06));
    border-top: 1px solid rgba(255, 82, 82, 0.15);
    border-bottom: 1px solid rgba(255, 82, 82, 0.1);
    padding: 10px 16px;
    animation: aiCooldownPulse 2s ease-in-out infinite;
}

@keyframes aiCooldownPulse {

    0%,
    100% {
        background: linear-gradient(135deg, rgba(255, 82, 82, 0.08), rgba(255, 152, 0, 0.06));
    }

    50% {
        background: linear-gradient(135deg, rgba(255, 82, 82, 0.14), rgba(255, 152, 0, 0.10));
    }
}

.ai-cooldown-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-cooldown-icon {
    color: #ff8a65;
    font-size: 0.95rem;
    animation: aiHourglassSpin 2s ease-in-out infinite;
}

@keyframes aiHourglassSpin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ai-cooldown-text {
    color: #ffab91;
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1;
}

.ai-cooldown-track {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.ai-cooldown-progress {
    height: 100%;
    background: linear-gradient(90deg, #ff8a65, #ff5252);
    border-radius: 2px;
    transition: width 1s linear;
    width: 100%;
}

/* =========================================
   CACHED / OFFLINE MODE BAR
   ========================================= */
.ai-cached-mode-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.10), rgba(255, 193, 7, 0.06));
    border-bottom: 1px solid rgba(255, 152, 0, 0.2);
    color: #ffb74d;
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
    animation: aiCachedBarIn 0.3s ease-out;
}

@keyframes aiCachedBarIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-cached-mode-bar i {
    font-size: 0.85rem;
    opacity: 0.8;
}

.ai-cached-mode-bar span {
    flex: 1;
}

.ai-cached-exit-btn {
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--tosca);
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ai-cached-exit-btn:hover {
    background: var(--tosca);
    color: #000;
}

/* =========================================
   RATE-LIMIT MESSAGE STYLING
   ========================================= */
.ai-rate-limit-card {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.12), rgba(255, 152, 0, 0.08));
    border: 1px solid rgba(255, 82, 82, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 4px;
}

.ai-rate-limit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ff8a65;
}

.ai-rate-limit-header i {
    font-size: 1.1rem;
}

.ai-rate-limit-body {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #cfd8dc;
}

.ai-rate-limit-body strong {
    color: #ffab91;
}

.ai-rate-limit-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff8a65;
    margin: 8px 0;
    font-variant-numeric: tabular-nums;
}

.ai-rate-limit-countdown i {
    animation: aiHourglassSpin 2s ease-in-out infinite;
}

.ai-rate-limit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ai-cached-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #ff9800;
    background: rgba(255, 152, 0, 0.10);
    color: #ffb74d;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}

.ai-cached-mode-btn:hover {
    background: #ff9800;
    color: #000;
}

.ai-profile-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #8b949e;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-profile-link-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* =========================================
   SQL TEMPLATE BUTTONS (Cached Mode)
   ========================================= */
.ai-sql-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.ai-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255, 152, 0, 0.25);
    background: rgba(255, 152, 0, 0.06);
    color: #ffb74d;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ai-template-btn:hover {
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.4);
    transform: translateY(-1px);
}

.ai-template-btn i {
    font-size: 0.68rem;
    opacity: 0.7;
}

/* =========================================
   LOCAL QUERY RESULTS TABLE
   ========================================= */
.ai-local-result {
    margin-top: 6px;
}

.ai-local-result-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: #8b949e;
}

.ai-local-result-header i {
    color: #ffb74d;
}

.ai-local-result table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78em;
    margin-top: 4px;
}

.ai-local-result th {
    background: rgba(255, 152, 0, 0.1);
    color: #ffb74d;
    padding: 4px 7px;
    text-align: left;
    font-weight: 600;
    border: 1px solid rgba(255, 152, 0, 0.15);
    font-size: 0.78em;
}

.ai-local-result td {
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cfd8dc;
    font-size: 0.78em;
    font-family: 'Consolas', monospace;
}

.ai-local-result tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* Responsive: Mobile screens — AI Chat Panel */
@media (max-width: 768px) {
    .ai-chat-panel {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 10px !important;
        left: auto !important;
        bottom: 80px !important;
        height: calc(100vh - 110px) !important;
        border-radius: 12px;
    }

    .ai-fab {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .ai-chat-panel.maximized {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        height: calc(100vh - 20px) !important;
        bottom: 10px !important;
        right: 5px !important;
    }

    /* Ensure chat messages and bubbles stay within mobile viewport */
    .ai-chat-messages {
        padding: 12px !important;
    }

    .ai-msg {
        max-width: 95% !important;
    }

    .ai-msg-bubble {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    .ai-msg-content {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Prevent tables inside bubbles from overflowing */
    .ai-msg-bubble table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    .ai-msg-bubble pre {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Chat input bar adjustments */
    .ai-chat-input-bar {
        padding: 10px 12px !important;
    }
}

/* =========================================
   AI FORECASTING WIDGET STYLES
   ========================================= */

/* Forecast Widget Preview Card (on dashboard) */
.forecast-widget-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
    gap: 10px;
    position: relative;
}

.forecast-widget-icon {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--tosca), #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.3));
}

.forecast-widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.forecast-widget-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.forecast-widget-badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.forecast-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.forecast-badge-model {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.1));
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.forecast-badge-method {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
    color: var(--tosca);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.forecast-action-btn {
    margin-top: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--tosca), #7c3aed);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.forecast-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

/* Forecast Dialog Overlay */
.forecast-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: forecastFadeIn 0.3s ease;
}

@keyframes forecastFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.forecast-dialog {
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    background: linear-gradient(145deg, #12151e 0%, #1a1e2e 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: forecastSlideUp 0.4s ease;
}

@keyframes forecastSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.forecast-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.forecast-dialog-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.forecast-dialog-title i {
    color: #a78bfa;
    font-size: 1.2rem;
}

.forecast-model-badge {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.1));
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.35);
}

.forecast-dialog-actions {
    display: flex;
    gap: 8px;
}

.forecast-btn-download {
    padding: 7px 16px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.forecast-btn-download:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.forecast-btn-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.forecast-btn-close:hover {
    background: rgba(255, 50, 50, 0.15);
    color: #ff5555;
    border-color: rgba(255, 50, 50, 0.3);
}

.forecast-dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

/* Setup Panel */
.forecast-setup-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.forecast-setup-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
}

.forecast-setup-section h4 {
    color: var(--tosca);
    font-size: 0.95rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.forecast-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.forecast-form-col {
    flex: 1;
}

.forecast-form-col label {
    display: block;
    font-size: 0.82rem;
    color: #aaa;
    margin-bottom: 6px;
}

.forecast-form-col select,
.forecast-form-col input[type="number"],
.forecast-form-col input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88rem;
    transition: border-color 0.2s ease;
}

.forecast-form-col select:focus,
.forecast-form-col input:focus {
    outline: none;
    border-color: var(--tosca);
}

/* Forecast Target Tag & Reference Tag dropdown: dark option list for contrast */
#forecast-target-tag,
#forecast-ref-tag-dropdown {
    background-color: #000;
    color: #fff;
}

#forecast-target-tag option,
#forecast-ref-tag-dropdown option {
    background: #000;
    color: #fff;
    padding: 6px 10px;
}

#forecast-target-tag option:checked,
#forecast-ref-tag-dropdown option:checked {
    background: linear-gradient(0deg, #1a6fc4 0%, #1a6fc4 100%);
    color: #fff;
}

#forecast-target-tag option:hover,
#forecast-ref-tag-dropdown option:hover {
    background: #1a1a2e;
}

#forecast-target-tag optgroup,
#forecast-ref-tag-dropdown optgroup {
    background: #000;
    color: var(--tosca, #00E5FF);
    font-weight: 600;
    font-style: normal;
    padding-top: 6px;
}

.forecast-ref-tags-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forecast-ref-tag-selector {
    display: flex;
    gap: 8px;
}

.forecast-ref-tag-selector select {
    flex: 1;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88rem;
}

.forecast-btn-add-ref {
    width: 38px;
    height: 38px;
    border: 1px solid var(--tosca);
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--tosca);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.forecast-btn-add-ref:hover {
    background: rgba(0, 229, 255, 0.25);
}

.forecast-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.forecast-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    font-size: 0.78rem;
    color: #c4b5fd;
    animation: chipIn 0.2s ease;
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.forecast-chip-remove {
    cursor: pointer;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.forecast-chip-remove:hover {
    opacity: 1;
    color: #ff5555;
}

.forecast-run-btn {
    margin-top: 8px;
    padding: 12px;
    font-size: 0.95rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tosca), #7c3aed) !important;
    border: none;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
}

.forecast-run-btn:hover {
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

/* File Upload Dropzone */
.forecast-file-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.15);
}

.forecast-file-dropzone:hover,
.forecast-file-dropzone.drag-over {
    border-color: var(--tosca);
    background: rgba(0, 229, 255, 0.05);
}

.forecast-file-dropzone i {
    font-size: 2.5rem;
    color: var(--tosca);
    margin-bottom: 10px;
    display: block;
}

.forecast-file-dropzone p {
    color: #ccc;
    font-size: 0.95rem;
    margin: 0 0 4px 0;
}

.forecast-file-dropzone span {
    color: #777;
    font-size: 0.8rem;
}

.forecast-file-info {
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #10b981;
}

.forecast-column-mapper {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

/* Loading Overlay */
.forecast-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 15, 20, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 10;
    border-radius: 12px;
}

.forecast-loading-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(124, 58, 237, 0.15);
    border-top-color: #a78bfa;
    animation: forecastSpin 0.8s linear infinite;
}

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

.forecast-loading-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    animation: forecastPulse 2s ease-in-out infinite;
}

@keyframes forecastPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.forecast-loading-sub {
    font-size: 0.85rem;
    color: #888;
}

/* Results Panel */
.forecast-results-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.forecast-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.forecast-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.forecast-stat-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.forecast-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--tosca), #7c3aed);
}

.forecast-stat-label {
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.forecast-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.forecast-stat-value.good {
    color: #10b981;
}

.forecast-stat-value.warning {
    color: #f59e0b;
}

.forecast-stat-value.accent {
    color: var(--tosca);
}

/* Chart Container */
.forecast-chart-container {
    width: 100%;
    height: 420px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.forecast-btn-rerun {
    align-self: center;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.forecast-btn-rerun:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: var(--tosca);
}

/* Responsive */
@media (max-width: 768px) {
    .forecast-dialog {
        width: 98%;
        max-height: 95vh;
    }

    .forecast-form-row {
        flex-direction: column;
    }

    .forecast-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast-chart-container {
        height: 300px;
    }
}

/* =========================================
   DATA GROUP ENGINE STYLES
   ========================================= */

/* Tag Multi-Select Picker */
.dg-tag-picker {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-tag-picker label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.82rem;
    color: #ccc;
}

.dg-tag-picker label:hover {
    background: rgba(0, 229, 255, 0.08);
}

.dg-tag-picker input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tosca);
    cursor: pointer;
    flex-shrink: 0;
}

.dg-tag-picker .dg-tag-topic {
    font-family: 'Consolas', monospace;
    font-size: 0.72rem;
    color: #888;
    margin-left: auto;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 4px;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dg-section-header:first-child {
    margin-top: 0;
}

.dg-src-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dg-src-mqtt {
    background: rgba(130, 170, 255, 0.15);
    color: #82aaff;
}

.dg-src-modbus {
    background: rgba(199, 146, 234, 0.15);
    color: #c792ea;
}

.dg-src-sys {
    background: rgba(255, 203, 107, 0.15);
    color: #ffcb6b;
}

.dg-src-opcua {
    background: rgba(0, 230, 118, 0.15);
    color: #00E676;
}

/* Status Badge */
.dg-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dg-status-enabled {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dg-status-enabled:hover {
    background: rgba(16, 185, 129, 0.25);
}

.dg-status-disabled {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.dg-status-disabled:hover {
    background: rgba(239, 68, 68, 0.22);
}

/* Tag Count Chip */
.dg-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--tosca);
    font-weight: 500;
}

/* Null Value Indicator */
.dg-null-value {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Action buttons */
.dg-action-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.2s ease;
    margin: 0 2px;
}

.dg-action-btn:hover {
    border-color: var(--tosca);
    color: var(--tosca);
    background: rgba(0, 229, 255, 0.08);
}

.dg-action-btn.danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Log Table */
#dg-log-container .data-table {
    font-size: 0.78rem;
}

#dg-log-container .data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card, #1a1a2e);
}

#dg-log-container .data-table td {
    font-family: 'Consolas', 'Courier New', monospace;
    padding: 4px 8px;
}

/* View Logs button */
.dg-view-logs-btn {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--tosca);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dg-view-logs-btn:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: var(--tosca);
}

/* Interval display */
.dg-interval-text {
    font-family: 'Consolas', monospace;
    color: #a0a0a0;
    font-size: 0.82rem;
}

/* Animation for new rows */
@keyframes dgRowIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dg-table-body tr {
    animation: dgRowIn 0.3s ease;
}

/* Empty state */
.dg-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #555;
}

.dg-empty-state i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #444;
}

/* =========================================
   EVENT TRIGGER STYLES
   ========================================= */

/* Badge for event-triggered entries in tables */
.evt-trigger-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255, 183, 77, 0.12);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.25);
    margin-right: 4px;
    white-space: nowrap;
}

.evt-trigger-badge.edge {
    background: rgba(171, 71, 188, 0.12);
    color: #ce93d8;
    border-color: rgba(171, 71, 188, 0.3);
}

.evt-trigger-badge i {
    font-size: 0.65rem;
}

/* Edge direction radio pill toggle */
.evt-edge-toggle {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.evt-edge-pill {
    display: flex;
    cursor: pointer;
}

.evt-edge-pill input[type="radio"] {
    display: none;
}

.evt-edge-pill span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #999;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.evt-edge-pill span i {
    font-size: 0.72rem;
}

.evt-edge-pill input[type="radio"]:checked+span {
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--tosca);
    color: var(--tosca);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

.evt-edge-pill:hover span {
    border-color: rgba(255, 255, 255, 0.25);
    color: #ccc;
}

/* =========================================
   TABLE VIEW WIDGET STYLES
   ========================================= */

/* Widget body container */
.tv-widget-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tv-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.tv-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-header-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.tv-badge-historical {
    background: var(--tosca-dim);
    color: var(--tosca);
    border: 1px solid var(--tosca);
}

.tv-badge-snapshot {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Scrollable table wrapper */
.tv-container {
    flex: 1;
    overflow: auto;
    min-height: 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

/* Table core styles */
.tv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
    table-layout: auto;
}

.tv-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.tv-table th {
    background: var(--bg-lighter, #1a1a2e);
    color: var(--tosca);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--tosca);
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.tv-table td {
    padding: 5px 10px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.78rem;
    transition: background 0.2s ease;
}

/* Timestamp column */
.tv-table td.tv-ts-cell {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
}

/* Alternating rows */
.tv-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.tv-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* NULL value indicator */
.tv-null-value {
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
    font-family: 'Segoe UI', sans-serif;
}

/* Conditional formatting: alert cells */
.tv-cell-alert {
    font-weight: 700;
}

/* Snapshot mode: prominent timestamp header */
.tv-snapshot-header {
    background: var(--tosca-dim) !important;
    border-bottom: 2px solid var(--tosca) !important;
}

.tv-snapshot-header td {
    color: var(--tosca) !important;
    font-weight: 700 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px;
}

/* Snapshot mode: unit column */
.tv-table td.tv-unit-cell {
    color: var(--text-muted);
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
    min-width: 100px;
}

.tv-table td.tv-value-cell {
    font-size: 0.85rem;
    text-align: right;
    font-weight: 500;
}

/* Loading state */
.tv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-muted);
    font-size: 0.82rem;
    gap: 8px;
}

.tv-loading i {
    animation: tvSpin 1s linear infinite;
}

@keyframes tvSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Empty data state */
.tv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #555;
    font-size: 0.82rem;
    gap: 8px;
    text-align: center;
    padding: 20px;
}

.tv-empty i {
    font-size: 1.5rem;
    color: #444;
}

/* Conditional formatting rule rows in builder */
.tv-cond-rule-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-lighter, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.78rem;
}

.tv-cond-rule-row select,
.tv-cond-rule-row input[type="number"] {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.78rem;
}

.tv-cond-rule-row select {
    min-width: 100px;
}

.tv-cond-rule-row input[type="number"] {
    width: 65px;
}

.tv-cond-rule-row input[type="color"] {
    width: 28px;
    height: 24px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.tv-cond-rule-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px;
    flex-shrink: 0;
    transition: 0.2s;
}

.tv-cond-rule-remove:hover {
    color: #ff6b6b;
    transform: scale(1.2);
}

/* Unit configuration rows in Table View builder */
.tv-unit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--bg-lighter, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.tv-unit-tag-name {
    flex: 1;
    color: #ccc;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tv-unit-input {
    width: 90px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--tosca);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.tv-unit-input:focus {
    outline: none;
    border-color: var(--tosca);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.2);
}

.tv-unit-input::placeholder {
    color: #555;
    font-weight: 400;
}

/* =========================================
   ALARM MANAGEMENT WIDGET STYLES
   ========================================= */

.alarm-widget-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.alarm-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.alarm-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alarm-header-icon {
    color: #ef4444;
    font-size: 1rem;
}

.alarm-header-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.alarm-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    animation: alarmPulse 2s ease-in-out infinite;
}

.alarm-header-right {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Alarm buttons */
.alarm-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #ccc;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.alarm-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.alarm-btn-ack-all {
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.alarm-btn-ack-all:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.alarm-btn-mute {
    width: 28px;
    padding: 4px;
    text-align: center;
}

.alarm-btn-add {
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--tosca);
}

.alarm-btn-add:hover {
    background: rgba(0, 229, 255, 0.12);
}

.alarm-btn-export {
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.alarm-btn-export:hover {
    background: rgba(245, 158, 11, 0.12);
}

.alarm-btn-query {
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--tosca);
    padding: 4px 8px;
}

/* Active alarm panel */
.alarm-active-panel {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.alarm-history-panel {
    flex: 1;
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.alarm-history-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.alarm-hist-picker {
    width: 130px;
    padding: 5px 8px;
    background: var(--bg-lighter);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.78rem;
}

.alarm-history-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Alarm table */
.alarm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.alarm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card, #1a1a2e);
    padding: 6px 8px;
    text-align: left;
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.alarm-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #ddd;
}

.alarm-msg-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alarm-time-cell {
    font-family: 'Consolas', monospace;
    font-size: 0.72rem;
    color: #aaa;
}

.alarm-empty-row {
    text-align: center;
    padding: 30px 15px !important;
    color: #666;
    font-size: 0.85rem;
}

.alarm-empty-row i {
    margin-right: 6px;
}

/* Severity chips */
.alarm-severity-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.alarm-sev-hh,
.alarm-sev-hh .alarm-severity-chip {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.4);
}

.alarm-sev-h,
.alarm-sev-h .alarm-severity-chip {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.alarm-sev-l,
.alarm-sev-l .alarm-severity-chip {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.alarm-sev-ll,
.alarm-sev-ll .alarm-severity-chip {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.4);
}

.alarm-sev-bool,
.alarm-sev-bool .alarm-severity-chip {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.alarm-sev-spike,
.alarm-sev-spike .alarm-severity-chip {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.4);
}

.alarm-sev-disconnect,
.alarm-sev-disconnect .alarm-severity-chip {
    background: rgba(107, 114, 128, 0.25);
    color: #d1d5db;
    border: 1px solid rgba(107, 114, 128, 0.4);
}

.alarm-sev-timeout,
.alarm-sev-timeout .alarm-severity-chip {
    background: rgba(251, 191, 36, 0.2);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

/* Row states */
.alarm-row-unacked {
    animation: alarmRowFlash 2s ease-in-out infinite;
}

.alarm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ACK button */
.alarm-ack-btn {
    padding: 3px 10px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 5px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.alarm-ack-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10b981;
    transform: scale(1.05);
}

.alarm-acked-label {
    color: #4ade80;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Clear Alarm List button */
.alarm-btn-clear {
    border-color: rgba(239, 68, 68, 0.35);
    color: #ef4444;
}

.alarm-btn-clear:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
    color: #fca5a5;
}

/* Cleared alarm row — dimmed but visible */
.alarm-row-cleared {
    opacity: 0.45;
}

.alarm-row-cleared td {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.15);
}

/* Cleared tag badge */
.alarm-cleared-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(107, 114, 128, 0.25);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.35);
    margin-left: 4px;
    text-decoration: none !important;
}

/* Widget footer */
.alarm-widget-footer {
    display: flex;
    gap: 5px;
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* Animations */
@keyframes alarmPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
    }
}

@keyframes alarmRowFlash {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: rgba(239, 68, 68, 0.06);
    }
}

/* Alarm rule config overlay */
.alarm-rule-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: forecastFadeIn 0.2s ease;
}

.alarm-rule-dialog {
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: linear-gradient(145deg, #12151e, #1a1e2e);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: forecastSlideUp 0.3s ease;
}

.alarm-rule-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.alarm-rule-dialog-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.alarm-rule-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #aaa;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.2s;
}

.alarm-rule-close:hover {
    color: #ff5555;
    border-color: rgba(255, 50, 50, 0.3);
}

.alarm-rule-dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alarm-rule-dialog-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

.alarm-btn-add-rule {
    background: linear-gradient(135deg, var(--tosca), #3b82f6) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 18px;
    font-weight: 600;
    border-radius: 8px;
}

/* Rule card */
.alarm-rule-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.2s;
}

.alarm-rule-card:hover {
    border-color: rgba(0, 229, 255, 0.2);
}

.alarm-rule-disabled {
    opacity: 0.5;
}

.alarm-rule-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.alarm-rule-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.alarm-rule-type-badge {
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(0, 229, 255, 0.12);
    color: var(--tosca);
    border: 1px solid rgba(0, 229, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.alarm-rule-topic {
    font-family: 'Consolas', monospace;
    font-size: 0.78rem;
    color: #bbb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alarm-rule-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.alarm-rule-edit-btn,
.alarm-rule-del-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.72rem;
    transition: 0.2s;
}

.alarm-rule-edit-btn:hover {
    color: var(--tosca);
    border-color: var(--tosca);
}

.alarm-rule-del-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.alarm-rule-detail {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #999;
}

.alarm-sev-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-right: 4px;
}

/* Toggle switch */
.alarm-rule-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    cursor: pointer;
}

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

.alarm-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    transition: 0.3s;
}

.alarm-toggle-slider:before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #888;
    border-radius: 50%;
    transition: 0.3s;
}

.alarm-rule-toggle input:checked+.alarm-toggle-slider {
    background: rgba(16, 185, 129, 0.4);
}

.alarm-rule-toggle input:checked+.alarm-toggle-slider:before {
    transform: translateX(16px);
    background: #10b981;
}

/* Rule editor */
.alarm-rule-editor {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 20px 10px;
}

.alarm-rule-editor h4 {
    margin: 0 0 12px;
    color: var(--tosca);
    font-size: 0.95rem;
}

.alarm-editor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.alarm-editor-row label {
    width: 110px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #aaa;
}

.alarm-editor-row select,
.alarm-editor-row input[type="text"],
.alarm-editor-row input[type="number"] {
    flex: 1;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 0.82rem;
}

.alarm-editor-row input[type="color"] {
    width: 32px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.alarm-editor-section {
    margin: 8px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.alarm-sp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.alarm-sp-label {
    width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 2px 0;
}

.alarm-sp-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tosca);
}

.alarm-sp-row input[type="number"] {
    width: 80px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #fff;
    font-size: 0.8rem;
}

.alarm-sp-row input[type="text"] {
    flex: 1;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #fff;
    font-size: 0.8rem;
}

.alarm-sp-row input[type="color"] {
    width: 28px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.alarm-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

.alarm-btn-save {
    background: linear-gradient(135deg, var(--tosca), #3b82f6) !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 18px;
    font-weight: 600;
    border-radius: 7px;
}

.alarm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #aaa;
    padding: 7px 18px;
    border-radius: 7px;
}

.alarm-btn-cancel:hover {
    color: #fff;
}

/* =========================================
   SMTP TASK MANAGER STYLES
   ========================================= */

/* SMTP Form Inputs */
.smtp-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
    margin-top: 4px;
    box-sizing: border-box;
}

.smtp-input:focus {
    outline: none;
    border-color: var(--tosca);
}

.smtp-input::placeholder {
    color: #555;
}

textarea.smtp-input {
    font-family: inherit;
}

/* SMTP Tabs */
.smtp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
}

.smtp-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.smtp-tab:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
}

.smtp-tab.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(59, 130, 246, 0.15));
    color: var(--tosca);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

/* SMTP Sections */
.smtp-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.smtp-section h4 {
    color: var(--tosca);
    font-size: 0.85rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* SMTP Layout Rows */
.smtp-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    align-items: flex-end;
}

.smtp-col {
    flex: 1;
}

.smtp-col label {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 2px;
}

/* SMTP Badges */
.smtp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.smtp-badge-schedule {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.smtp-badge-alarm {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.smtp-badge-active {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.smtp-badge-paused {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.smtp-badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* SMTP Chips */
.smtp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.smtp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    font-size: 0.78rem;
    color: var(--tosca);
    animation: chipIn 0.2s ease;
}

.smtp-chip button {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0 0 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.smtp-chip button:hover {
    opacity: 1;
}

/* Action Button Styles for SMTP table */
.btn-sm {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.btn-sm:hover {
    border-color: var(--tosca);
    color: var(--tosca);
    background: rgba(0, 229, 255, 0.08);
}

.btn-sm-tosca {
    border-color: rgba(0, 229, 255, 0.2);
    color: var(--tosca);
}

.btn-sm-tosca:hover {
    background: rgba(0, 229, 255, 0.15);
}

.btn-sm-danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.btn-sm-default {
    color: #888;
}

/* SMTP Task Table Enhancements */
#smtp-task-table tbody tr {
    animation: dgRowIn 0.3s ease;
}

#smtp-task-table td {
    vertical-align: middle;
}

/* =========================================
   INTERACTIVE COMMAND WIDGETS — SCADA Canvas
   ========================================= */

/* --- Overlay Container (scales with canvas) --- */
.canvas-cmd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 10;
}

.canvas-cmd-overlay>* {
    pointer-events: auto;
}

/* --- Shared Command Widget Styles --- */
.cmd-widget {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
    box-sizing: border-box;
    user-select: none;
    transition: box-shadow 0.2s ease;
}

.cmd-widget:hover {
    z-index: 20;
}

.cmd-last-sent {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    letter-spacing: 0.3px;
}

.cmd-status-led {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s, box-shadow 0.3s;
    pointer-events: none;
}

.cmd-status-led.published {
    background: #00E676;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.7);
    animation: cmdPulse 0.6s ease;
}

.cmd-status-led.disconnected {
    background: #FF9800;
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
}

@keyframes cmdPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.8);
    }

    100% {
        transform: scale(1);
    }
}

/* --- Command Button --- */
.cmd-btn {
    width: 100%;
    height: 100%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    outline: none;
    text-transform: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cmd-btn:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cmd-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.cmd-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* --- Command Slider (shared) --- */
.cmd-slider-track {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
}

.cmd-slider-fill {
    position: absolute;
    border-radius: 100px;
    transition: none;
}

.cmd-slider-thumb {
    position: absolute;
    background: #3b4465;
    border: 2px solid #2c3352;
    border-radius: 6px;
    cursor: grab;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s;
}

.cmd-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.cmd-slider-thumb-lines {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.cmd-slider-thumb-lines span {
    display: block;
    width: 14px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
}

/* Horizontal Slider */
.cmd-slider-h .cmd-slider-track {
    width: 100%;
    height: 8px;
}

.cmd-slider-h .cmd-slider-fill {
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(59, 68, 101, 0.3);
}

.cmd-slider-h .cmd-slider-thumb {
    width: 28px;
    height: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.cmd-slider-h .cmd-slider-thumb-lines {
    flex-direction: column;
}

.cmd-slider-h .cmd-slider-thumb-lines span {
    width: 14px;
    height: 1.5px;
}

/* Vertical Slider */
.cmd-slider-v {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.cmd-slider-v .cmd-slider-track {
    width: 8px;
    height: 100%;
}

.cmd-slider-v .cmd-slider-fill {
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(59, 68, 101, 0.3);
}

.cmd-slider-v .cmd-slider-thumb {
    width: 22px;
    height: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.cmd-slider-v .cmd-slider-thumb-lines span {
    width: 14px;
    height: 1.5px;
}

.cmd-slider-v .cmd-slider-thumb-lines {
    flex-direction: column;
}

.cmd-slider-ticks {
    position: absolute;
    display: flex;
    pointer-events: none;
}

.cmd-slider-v .cmd-slider-ticks {
    flex-direction: column;
    justify-content: space-between;
    top: 0;
    bottom: 0;
    height: 100%;
}

.cmd-slider-h .cmd-slider-ticks {
    flex-direction: row;
    justify-content: space-between;
    left: 0;
    right: 0;
    width: 100%;
}

.cmd-slider-tick {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    white-space: nowrap;
}

/* --- Command Line Input --- */
.cmd-input-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.cmd-input {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px;
    color: #1a1a2e !important;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Segoe UI', monospace;
    padding: 4px 10px !important;
    box-sizing: border-box;
    outline: none;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin: 0 !important;
}

.cmd-input:focus {
    border-color: var(--tosca) !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cmd-input-label {
    position: absolute;
    left: 8px;
    top: -1px;
    font-size: 8px;
    color: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    font-weight: 600;
}

/* --- Command Toggle Switch --- */
.cmd-toggle-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.cmd-toggle-track {
    position: relative;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.25s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.cmd-toggle-track.off {
    background: #555;
}

.cmd-toggle-track.on {
    background: #00E676;
}

.cmd-toggle-knob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Command Selector/Dropdown --- */
.cmd-select {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px;
    color: #1a1a2e !important;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px !important;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s;
    margin: 0 !important;
}

.cmd-select:focus {
    border-color: var(--tosca) !important;
}

.cmd-select option {
    background: #2a2a3e;
    color: #fff;
}

/* --- Canvas Editor: Command Palette --- */
.cmd-palette {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #333;
}

.cmd-palette h4 {
    color: #FF9800;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmd-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cmd-palette-item {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    color: #bbb;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cmd-palette-item:hover {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.08);
    color: #FF9800;
}

.cmd-palette-item i {
    font-size: 1rem;
}

/* --- Canvas Editor: Command Properties Panel --- */
.cmd-prop-section {
    display: none;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #444;
}

.cmd-prop-section h4 {
    color: #FF9800;
    margin-bottom: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmd-prop-row {
    margin-bottom: 10px;
}

.cmd-prop-row label {
    font-size: 0.8rem;
    color: #aaa;
    display: block;
    margin-bottom: 3px;
}

.cmd-prop-row input,
.cmd-prop-row select,
.cmd-prop-row textarea {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-lighter, #1a1a1a);
    color: #fff;
    border: 1px solid var(--border, #444);
    border-radius: 4px;
    font-size: 0.82rem;
    margin: 0;
}

.cmd-prop-row input:focus,
.cmd-prop-row select:focus {
    border-color: #FF9800;
    outline: none;
}

.cmd-prop-row input[type="color"] {
    height: 30px;
    padding: 2px;
    cursor: pointer;
}

.cmd-prop-color-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cmd-prop-options-list {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    margin-top: 4px;
}

.cmd-prop-option-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    background: #222;
    border-radius: 3px;
    margin-bottom: 2px;
}

.cmd-prop-option-item input {
    flex: 1;
    padding: 3px 6px;
    font-size: 0.78rem;
}

.cmd-prop-option-item button {
    background: none;
    border: none;
    color: #f44;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
}

/* --- Command Widget Placeholder in Editor --- */
.cmd-placeholder-label {
    font-size: 10px;
    fill: #FF9800;
    font-weight: bold;
    text-transform: uppercase;
}

/* =========================================
   TOAST NOTIFICATION SYSTEM
   ========================================= */

#conviz-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.conviz-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #fff;
    pointer-events: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
    min-width: 260px;
    max-width: 420px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.conviz-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.conviz-toast.hide {
    animation: toastSlideOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes toastSlideOut {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.conviz-toast i {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.conviz-toast span {
    flex: 1;
    line-height: 1.35;
}

/* Success Toast */
.conviz-toast-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.88), rgba(5, 150, 105, 0.92));
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.conviz-toast-success i {
    color: #a7f3d0;
}

/* Error Toast */
.conviz-toast-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.88), rgba(220, 38, 38, 0.92));
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.conviz-toast-error i {
    color: #fecaca;
}

/* Info Toast */
.conviz-toast-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.88), rgba(37, 99, 235, 0.92));
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.conviz-toast-info i {
    color: #bfdbfe;
}

/* Warning Toast */
.conviz-toast-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.88), rgba(217, 119, 6, 0.92));
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.conviz-toast-warning i {
    color: #fef3c7;
}

/* ============================
   SYSTEM TAGS
   ============================ */

/* Type Badges */
.st-type-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
}

.st-type-number {
    background: rgba(0, 229, 255, 0.12);
    color: #00E5FF;
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.st-type-boolean {
    background: rgba(255, 152, 0, 0.12);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.st-type-string {
    background: rgba(171, 71, 188, 0.12);
    color: #CE93D8;
    border: 1px solid rgba(171, 71, 188, 0.25);
}

/* Inline Value Cell */
.st-value-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-value-display {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-value-display:hover {
    background: rgba(255, 255, 255, 0.08);
}

.st-value-input {
    width: 120px !important;
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    background: #111 !important;
    border: 1px solid var(--tosca) !important;
    border-radius: 4px !important;
}

.st-value-bool {
    font-weight: 700;
}

.st-value-bool.is-true {
    color: #4CAF50;
}

.st-value-bool.is-false {
    color: #EF5350;
}

/* Table styling */
#st-table th:nth-child(7),
#st-table td:nth-child(7) {
    text-align: center;
    vertical-align: middle;
}

#st-table th:nth-child(8),
#st-table td:nth-child(8) {
    text-align: center;
}

#st-table td {
    vertical-align: middle;
}

#st-table .st-name-cell {
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: 0.3px;
}

.st-desc-cell {
    color: #888;
    font-size: 0.82rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-ts-cell {
    color: #64748b;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* =========================================
   SCRIPTING ENGINE STYLES
   ========================================= */

/* Script Editor Modal — Full Screen */
.script-editor-container {
    width: 90vw;
    height: 90vh;
    max-width: 1100px;
    background: #1e1e2e;
    border-radius: 10px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}

.script-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #161625;
    border-bottom: 1px solid #2a2a3d;
}

.script-name-input {
    background: transparent;
    border: 1px solid transparent;
    color: #ffcb6b;
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    width: 200px;
    font-family: 'Consolas', 'Courier New', monospace;
    transition: border-color 0.2s;
}

.script-name-input:hover,
.script-name-input:focus {
    border-color: var(--tosca);
    outline: none;
    background: rgba(255, 255, 255, 0.03);
}

.script-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.script-editor-signature {
    padding: 6px 20px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.95rem;
    background: #1e1e2e;
    color: #89ddff;
    user-select: none;
    flex-shrink: 0;
}

.script-editor-cm-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 10px;
}

.script-editor-cm-wrap .CodeMirror {
    height: 100% !important;
    background: #1e1e2e !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.92rem;
    line-height: 1.6;
    border: none;
}

.script-editor-cm-wrap .CodeMirror-gutters {
    background: #1e1e2e !important;
    border-right: 1px solid #2a2a3d !important;
}

.script-editor-cm-wrap .CodeMirror-linenumber {
    color: #555 !important;
}

.script-editor-cm-wrap .CodeMirror-cursor {
    border-left: 2px solid var(--tosca) !important;
}

.script-editor-cm-wrap .CodeMirror-selected {
    background: rgba(0, 229, 255, 0.12) !important;
}

.script-editor-cm-wrap .CodeMirror-matchingbracket {
    color: #ffcb6b !important;
    text-decoration: underline;
}

/* CodeMirror Autocomplete Dropdown */
.CodeMirror-hints {
    background: #1a1a2e !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    font-family: 'Consolas', monospace !important;
    font-size: 0.85rem !important;
    max-height: 200px !important;
    padding: 4px 0 !important;
    z-index: 10000 !important;
}

.CodeMirror-hint {
    color: #ccc !important;
    padding: 4px 12px !important;
    border-radius: 0 !important;
}

.CodeMirror-hint-active {
    background: var(--tosca-dim) !important;
    color: var(--tosca) !important;
}

/* Script Tag Insertion Dropdown */
.script-tag-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    max-height: 320px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.script-tag-search-input {
    width: 100% !important;
    padding: 8px 12px !important;
    background: #121220 !important;
    border: none !important;
    border-bottom: 1px solid #2a2a3d !important;
    color: #ccc !important;
    font-size: 0.82rem !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.script-tag-search-input::placeholder {
    color: #555;
}

.script-tag-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px 0;
}

.script-tag-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #bbb;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-tag-item:hover {
    background: rgba(0, 229, 255, 0.08);
    color: var(--tosca);
}

.script-tag-item .tag-source {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    flex-shrink: 0;
}

.script-tag-item .tag-source.sys {
    background: rgba(255, 203, 107, 0.15);
    color: #ffcb6b;
}

.script-tag-item .tag-source.mqtt {
    background: rgba(130, 170, 255, 0.15);
    color: #82aaff;
}

.script-tag-item .tag-source.modbus {
    background: rgba(199, 146, 234, 0.15);
    color: #c792ea;
}

.script-tag-item .tag-source.opcua {
    background: rgba(0, 230, 118, 0.15);
    color: #00E676;
}

.script-editor-footer {
    border-top: 1px solid #2a2a3d;
    background: #161625;
    display: flex;
    flex-direction: column;
}

.script-editor-console {
    max-height: 150px;
    display: flex;
    flex-direction: column;
}

.script-editor-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    color: #888;
    font-size: 0.78rem;
    border-bottom: 1px solid #222;
}

.script-editor-console-body {
    flex: 1;
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
    padding: 8px 16px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    color: #0f0;
    background: #0a0a14;
}

.script-editor-console-body .log-line {
    margin-bottom: 2px;
    word-break: break-all;
}

.script-editor-console-body .log-line.error {
    color: #ff5555;
}

.script-editor-console-body .log-line .log-ts {
    color: #555;
    margin-right: 8px;
}

.script-editor-console-body .log-line .log-name {
    color: var(--tosca);
    margin-right: 6px;
}

.script-editor-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}

/* Script Table Styles */
#scripts-table .scr-name-cell {
    color: var(--tosca);
    font-weight: 600;
    font-family: 'Consolas', monospace;
}

#scripts-table .scr-sched-cell {
    color: #aaa;
    font-size: 0.85rem;
}

#scripts-table .scr-mode-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--tosca);
    border: 1px solid rgba(0, 229, 255, 0.2);
}

/* Schedule Modal — Day Toggle Buttons */
.sched-day-toggles {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sched-day-btn {
    padding: 6px 12px;
    border: 1px solid #444;
    background: transparent;
    color: #aaa;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    min-width: 44px;
    text-align: center;
}

.sched-day-btn:hover {
    border-color: var(--tosca);
    color: #fff;
}

.sched-day-btn.active {
    background: var(--tosca);
    color: #000;
    border-color: var(--tosca);
}

.sched-entry {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}

.sched-entry-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s;
}

.sched-entry-delete:hover {
    color: var(--danger);
}

.sched-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #333;
}

.sched-tab-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    position: relative;
}

.sched-tab-btn.active {
    color: var(--tosca);
}

.sched-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--tosca);
}

.sched-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.sched-time-input {
    width: 60px;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
}

.sched-time-sep {
    color: #888;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Script enabled toggle in table */
.scr-enable-switch {
    position: relative;
    width: 36px;
    height: 18px;
    display: inline-block;
}

.scr-enable-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.scr-enable-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #444;
    border-radius: 18px;
    transition: 0.3s;
}

.scr-enable-slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.scr-enable-switch input:checked+.scr-enable-slider {
    background: var(--tosca);
}

.scr-enable-switch input:checked+.scr-enable-slider::before {
    transform: translateX(18px);
}

/* === MODBUS TCP STYLES === */
.modbus-prefix-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.modbus-prefix-badge.mb-0x {
    background: rgba(0, 230, 118, 0.15);
    color: #00E676;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.modbus-prefix-badge.mb-1x {
    background: rgba(99, 179, 237, 0.15);
    color: #63b3ed;
    border: 1px solid rgba(99, 179, 237, 0.3);
}

.modbus-prefix-badge.mb-3x {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.modbus-prefix-badge.mb-4x {
    background: rgba(255, 152, 0, 0.15);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.action-locked {
    color: #666;
    font-size: 0.85rem;
    font-style: italic;
}

#modbus-config-table th:nth-child(10),
#modbus-config-table td:nth-child(10) {
    text-align: center;
    vertical-align: middle;
}

/* =========================================
   PROFILE PAGE — Form Width Optimization
   ========================================= */

#profile .profile-card {
    max-width: 100%;
    gap: 0;
}

#profile .profile-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.02);
}

#profile .profile-section:last-child {
    margin-bottom: 0;
}

#profile .profile-section>h4:first-child {
    margin-top: 0;
}

/* Constrain License form, Branding, and AI Settings input containers */
#profile #license-form,
#profile #ai-settings-section {
    max-width: 36%;
}

/* Inputs, selects, and buttons within profile — one-third width cap */
#profile .profile-card>div:not(.theme-options)>div>input[type="text"],
#profile .profile-card>div:not(.theme-options)>div>input[type="email"],
#profile .profile-card>div:not(.theme-options)>div>input[type="password"],
#profile .profile-card>div:not(.theme-options)>div>select,
#profile .profile-card>div:not(.theme-options)>input[type="text"],
#profile .profile-card>div:not(.theme-options)>input[type="email"] {
    max-width: 100%;
}

/* Organization Branding standalone input */
#profile #profile-app-name {
    max-width: 36% !important;
    width: 36% !important;
}

/* License section direct inputs */
#profile #license-email,
#profile #license-key,
#profile #license-hwid {
    max-width: 100% !important;
    width: 100% !important;
}

/* License/AI action buttons — constrain to match input width */
#profile #btn-activate-license {
    max-width: 36%;
    width: 36%;
}

#profile #btn-save-ai {
    max-width: 100%;
    width: 100%;
}

/* AI API key flex container */
#profile #ai-settings-section>div>div:has(#ai-api-key) {
    max-width: 100%;
}

#profile #ai-model-select {
    max-width: 100% !important;
    width: 100% !important;
}

/* AI connection banner */
#profile #ai-connection-banner {
    max-width: 100%;
}

/* License status banner */
#profile #license-status-banner {
    max-width: 36%;
}

/* Keep theme tone buttons unaffected */
#profile .theme-options {
    max-width: none !important;
    width: auto !important;
}

/* Responsive: full-width on smaller screens */
@media (max-width: 1024px) {

    #profile #license-form,
    #profile #ai-settings-section,
    #profile #profile-app-name,
    #profile #btn-activate-license,
    #profile #license-status-banner {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =============================================
   RESPONSIVE TYPOGRAPHY — AUTO-SCALING (Container Queries)
   Applied when "Enable Size Adjustment" is checked.
   Uses container-query width units with clamp() for
   smooth proportional scaling on resize and browser zoom.
   ============================================= */

/* Establish container context on the widget content box */
.widget-auto-scale {
    container-type: inline-size;
}

/* Overflow safety for all auto-scaled widget text */
.widget-auto-scale .card {
    overflow: hidden;
}

/* --- Level Bar Auto-Scale --- */
.widget-auto-scale .level-value-text {
    font-size: clamp(1rem, 12cqw, 4rem) !important;
}

.widget-auto-scale .level-unit-text {
    font-size: clamp(0.5rem, 4cqw, 1.5rem) !important;
}

.widget-auto-scale .level-label-text {
    font-size: clamp(0.5rem, 4cqw, 1.5rem) !important;
}

/* --- Equipment Status Auto-Scale --- */
.widget-auto-scale .eq-value {
    font-size: clamp(1rem, 10cqw, 3rem) !important;
}

.widget-auto-scale .eq-unit {
    font-size: clamp(0.5rem, 4cqw, 1.5rem) !important;
}

.widget-auto-scale .eq-name-text {
    font-size: clamp(0.5rem, 4.5cqw, 1.5rem) !important;
}

.widget-auto-scale .eq-status-text {
    font-size: clamp(0.5rem, 3.5cqw, 1.2rem) !important;
}

.widget-auto-scale .eq-value-group {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* --- Value Text Auto-Scale --- */
.widget-auto-scale .vt-val {
    font-size: clamp(1.2rem, 14cqw, 5rem) !important;
}

.widget-auto-scale .vt-unit {
    font-size: clamp(0.6rem, 6cqw, 2.5rem) !important;
}

.widget-auto-scale .vt-title {
    font-size: clamp(0.6rem, 5cqw, 2rem) !important;
}

.widget-auto-scale .vt-desc {
    font-size: clamp(0.4rem, 3cqw, 1.2rem) !important;
}

.widget-auto-scale .vt-topic {
    font-size: clamp(0.3rem, 2.5cqw, 1rem) !important;
}

/* --- Gauge Meter Title/Topic Auto-Scale (HTML portion) --- */
.widget-auto-scale .card h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.widget-auto-scale .card h3>span:first-child {
    font-size: clamp(0.5rem, 4.5cqw, 1.5rem) !important;
}

.widget-auto-scale .card h3>span:last-child {
    font-size: clamp(0.3rem, 2.5cqw, 0.9rem) !important;
}

/* ===== RBAC AUTH LEVEL BADGES ===== */
.auth-level-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: #aaa;
}

.auth-level-badge.level-9 {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--tosca);
    color: var(--tosca);
}

/* User Management Table in Profile */
#user-mgmt-table {
    margin-top: 5px;
}

#user-mgmt-table th {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   ODBC CONFIGURATION SUBSYSTEM
   ========================================= */

/* --- ODBC Method Card --- */
.odbc-method-card {
    background: #1a1e29;
    border: 1px solid #2a2e3d;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.odbc-method-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
}

.odbc-method-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    background: #161825;
    border-bottom: 1px solid #2a2e3d;
    transition: background 0.2s;
    user-select: none;
}

.odbc-method-card-header:hover {
    background: #1e2233;
}

.odbc-method-card-header .method-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.odbc-method-card-header .method-info .method-name {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.odbc-method-type-badge {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    display: inline-block;
}

.odbc-method-type-badge.select {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.odbc-method-type-badge.insert {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.odbc-method-card-header .method-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.odbc-method-card-header .method-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.odbc-method-card-header .method-actions .btn-delete-method {
    color: #f87171;
}

.odbc-method-card-header .method-actions .btn-delete-method:hover {
    background: rgba(248, 113, 113, 0.15);
}

.odbc-method-card-header .chevron-icon {
    color: #64748b;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.odbc-method-card-header.expanded .chevron-icon {
    transform: rotate(180deg);
}

.odbc-method-card-body {
    display: none;
    padding: 18px;
    animation: odbcSlideDown 0.25s ease;
}

.odbc-method-card-body.expanded {
    display: block;
}

@keyframes odbcSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ODBC Query Section --- */
.odbc-query-section {
    margin-bottom: 16px;
}

.odbc-query-input {
    width: 100%;
    padding: 12px 14px;
    background: #111318;
    border: 1px solid #333;
    border-radius: 6px;
    color: #a5d6ff;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 44px;
    transition: border-color 0.2s;
}

.odbc-query-input:focus {
    border-color: var(--tosca);
    outline: none;
}

.odbc-query-input::placeholder {
    color: #4a5568;
}

/* --- ODBC Result Table --- */
.odbc-result-table-wrap {
    max-height: 300px;
    overflow: auto;
    border: 1px solid #2a2e3d;
    border-radius: 6px;
    margin-top: 12px;
}

.odbc-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.odbc-result-table th {
    background: #161825;
    color: var(--tosca);
    padding: 8px 12px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #2a2e3d;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.odbc-result-table td {
    padding: 7px 12px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odbc-result-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.odbc-result-table tr:hover {
    background: rgba(0, 229, 255, 0.04);
}

/* --- ODBC Mapping Table --- */
.odbc-mapping-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.odbc-mapping-table th {
    background: #161825;
    color: #94a3b8;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #2a2e3d;
}

.odbc-mapping-table td {
    padding: 8px 14px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.odbc-mapping-table td:first-child {
    font-family: 'Consolas', monospace;
    color: #a5d6ff;
    font-weight: 600;
    font-size: 0.85rem;
}

.odbc-mapping-table td input {
    width: 100%;
    padding: 6px 10px;
    background: #111318;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.85rem;
    transition: border-color 0.2s;
}

.odbc-mapping-table td input:focus {
    border-color: var(--tosca);
    outline: none;
}

.odbc-mapping-table tr:hover {
    background: rgba(0, 229, 255, 0.03);
}

/* --- ODBC Schema Treeview --- */
.odbc-tree-view {
    background: #111318;
    border: 1px solid #2a2e3d;
    border-radius: 6px;
    padding: 10px 0;
    max-height: 320px;
    overflow: auto;
    font-size: 0.85rem;
}

.odbc-tree-node {
    padding: 0;
}

.odbc-tree-node-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    cursor: pointer;
    color: #cbd5e1;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.odbc-tree-node-label:hover {
    background: rgba(0, 229, 255, 0.06);
    color: #e2e8f0;
}

.odbc-tree-node-label.selected {
    background: rgba(0, 229, 255, 0.1);
    color: var(--tosca);
}

.odbc-tree-node-label i {
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.odbc-tree-node-label .tree-icon-db {
    color: #fbbf24;
}

.odbc-tree-node-label .tree-icon-table {
    color: #60a5fa;
}

.odbc-tree-node-label .tree-icon-folder {
    color: #a78bfa;
}

.odbc-tree-node-label .tree-icon-column {
    color: #94a3b8;
}

.odbc-tree-node-label .tree-icon-key {
    color: #f59e0b;
}

.odbc-tree-children {
    display: none;
    padding-left: 18px;
}

.odbc-tree-children.expanded {
    display: block;
}

.odbc-tree-toggle {
    font-size: 0.7rem;
    color: #64748b;
    width: 12px;
    text-align: center;
    transition: transform 0.2s;
}

.odbc-tree-toggle.expanded {
    transform: rotate(90deg);
}

/* --- ODBC Column View --- */
.odbc-column-view {
    background: #111318;
    border: 1px solid #2a2e3d;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 0.85rem;
    min-height: 120px;
}

.odbc-column-view .cv-title {
    color: var(--tosca);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.odbc-column-view .cv-table-name {
    color: #60a5fa;
    font-weight: 700;
    margin-bottom: 6px;
}

.odbc-column-view .cv-columns-label {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.odbc-column-view .cv-column-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    color: #cbd5e1;
    font-size: 0.82rem;
}

.odbc-column-view .cv-column-item .col-name {
    font-weight: 600;
    color: #e2e8f0;
    min-width: 120px;
}

.odbc-column-view .cv-column-item .col-type {
    color: #a78bfa;
    font-family: 'Consolas', monospace;
    font-size: 0.78rem;
}

.odbc-column-view .cv-column-item .col-key {
    color: #f59e0b;
    font-size: 0.72rem;
    font-weight: 700;
}

/* --- ODBC Status Badges --- */
.odbc-status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.odbc-status-badge.connected {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.odbc-status-badge.disconnected {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.odbc-status-badge.unknown {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.odbc-status-badge.testing {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* --- ODBC Scheduler Config Block --- */
.odbc-scheduler-config {
    background: #161825;
    border: 1px solid #2a2e3d;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
}

.odbc-scheduler-config .sched-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.odbc-scheduler-config .sched-header h4 {
    margin: 0;
    color: var(--tosca);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.odbc-scheduler-config .sched-header .sched-status {
    font-size: 0.75rem;
    color: #64748b;
}

.odbc-scheduler-config .sched-header .sched-status.active {
    color: #22c55e;
}

.odbc-scheduler-config select,
.odbc-scheduler-config input {
    width: 100%;
    padding: 7px 10px;
    background: #111318;
    border: 1px solid #333;
    border-radius: 4px;
    color: #e2e8f0;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.odbc-scheduler-config select:focus,
.odbc-scheduler-config input:focus {
    border-color: var(--tosca);
    outline: none;
}

.odbc-scheduler-config label {
    display: block;
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 3px;
}

/* --- ODBC Connection Info Row --- */
.odbc-conn-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.odbc-conn-info .conn-label {
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.odbc-conn-info .conn-value {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.88rem;
}

/* --- ODBC Section Headers --- */
.odbc-section-label {
    font-size: 0.82rem;
    color: var(--tosca);
    font-weight: 600;
    margin: 16px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}

.odbc-section-label i {
    font-size: 0.9rem;
}

/* --- ODBC Empty State --- */
.odbc-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #4a5568;
    font-size: 0.88rem;
}

.odbc-empty-state i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
    color: #333;
}

/* --- ODBC Separator --- */
.odbc-separator {
    height: 1px;
    background: #2a2e3d;
    margin: 16px 0;
}

/* =========================================
   MOBILE RESPONSIVE OVERHAUL
   ========================================= */

/* --- Mobile hamburger button & backdrop: hidden on desktop --- */
#mobile-menu-btn {
    display: none;
}

#mobile-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {

    /* ---- 1. SIDEBAR OVERLAY ---- */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 280px !important;
        height: 100vh !important;
        z-index: 10000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        padding: 20px !important;
        overflow-y: auto;
        box-shadow: none;
    }

    /* When minimized on mobile, keep it hidden off-screen (no icon strip) */
    .sidebar.minimized {
        width: 280px !important;
        padding: 20px !important;
        transform: translateX(-100%);
    }

    /* Override minimized hide rules so content is visible when opened */
    .sidebar.mobile-open.minimized {
        transform: translateX(0);
    }

    .sidebar.mobile-open #app-logo-text,
    .sidebar.mobile-open .nav-section-header span,
    .sidebar.mobile-open .nav-links li .nav-text,
    .sidebar.mobile-open .del-dash,
    .sidebar.mobile-open .nav-chevron,
    .sidebar.mobile-open .nav-parent div .nav-text {
        display: inline !important;
    }

    .sidebar.mobile-open .nav-links li {
        justify-content: flex-start !important;
        padding: 10px 15px !important;
    }

    .sidebar.mobile-open .nav-section-header {
        justify-content: space-between !important;
    }

    /* Slide in when mobile-open is active */
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }

    /* Backdrop overlay */
    #mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    #mobile-sidebar-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hamburger menu button */
    #mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 9998;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 8px;
        background: rgba(30, 30, 30, 0.9);
        color: var(--tosca);
        font-size: 1.2rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
    }

    /* Hide the desktop sidebar toggle chevron on mobile */
    .minimize-btn {
        display: none !important;
    }

    /* Main content takes full width, no sidebar push */
    .content {
        width: 100% !important;
        padding: 15px !important;
        padding-top: 60px !important;
        /* space for hamburger button */
    }

    /* ---- 2. MOBILE SINGLE-COLUMN WIDGET GRID ---- */
    /* These rules are ONLY active when JS adds .mobile-layout-active to #main-dashboard.
       This keeps the desktop GridStack layout completely untouched. */

    /* Main grid container: flex column, no fixed height */
    #main-dashboard.mobile-layout-active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: unset !important;
        position: relative !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* HIGH-SPECIFICITY overrides for GridStack injected CSS.
       GridStack injects: .gs-48 > .grid-stack-item[gs-x='N']:not(...):not(...)
       which has specificity (0,5,0). We use (#main-dashboard...) which has ID specificity (1,x,x)
       to guarantee our rules win. Combined with JS stripping inline styles, this ensures flush-left layout. */
    #main-dashboard.mobile-layout-active>.grid-stack-item.grid-stack-item[gs-x] {
        left: 0 !important;
    }

    #main-dashboard.mobile-layout-active>.grid-stack-item.grid-stack-item[gs-w] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Base layout for all grid items: full-width, 16:9, stacked vertically */
    #main-dashboard.mobile-layout-active>.grid-stack-item {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Override GridStack inline styles on item-content */
    #main-dashboard.mobile-layout-active>.grid-stack-item>.grid-stack-item-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
    }

    /* ---- 2b. TITLE BAR WIDGET — always first in mobile stack ---- */
    #main-dashboard.mobile-layout-active>.grid-stack-item.mobile-order-first {
        order: -1 !important;
        aspect-ratio: unset !important;
        height: auto !important;
        min-height: 60px;
    }

    /* ---- 3. WIDGET GROUP SUB-GRID (mobile) ---- */

    /* Group container expands to fit children */
    #main-dashboard.mobile-layout-active .group-container {
        height: auto !important;
        overflow: visible !important;
    }

    /* Group sub-grid: same flex column treatment */
    #main-dashboard.mobile-layout-active .group-container>.grid-stack {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: unset !important;
    }

    /* HIGH-SPECIFICITY overrides for sub-grid items */
    #main-dashboard.mobile-layout-active .group-container>.grid-stack.grid-stack>.grid-stack-item.grid-stack-item[gs-x] {
        left: 0 !important;
    }

    #main-dashboard.mobile-layout-active .group-container>.grid-stack.grid-stack>.grid-stack-item.grid-stack-item[gs-w] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Children inside a Widget Group: full-width, 16:9, stacked */
    #main-dashboard.mobile-layout-active .group-container>.grid-stack>.grid-stack-item {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        margin-bottom: 8px !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    #main-dashboard.mobile-layout-active .group-container>.grid-stack>.grid-stack-item>.grid-stack-item-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
    }

    /* Group parent widget: unset 16:9 so it grows with children */
    #main-dashboard.mobile-layout-active>.grid-stack-item:has(.group-container) {
        aspect-ratio: unset !important;
        height: auto !important;
    }

    /* ---- 4. AUTO-SCALING FONTS ---- */
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .top-bar h1 {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
    }

    .header-right-controls {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Widget card text scaling */
    .widget-card h3 {
        font-size: clamp(0.7rem, 3vw, 1rem) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .widget-card {
        font-size: clamp(0.65rem, 2.5vw, 0.9rem);
    }

    /* Value displays */
    .value-display,
    .value-unit {
        font-size: clamp(1.2rem, 6vw, 2rem) !important;
    }

    .status-tag {
        font-size: clamp(0.55rem, 2vw, 0.75rem) !important;
    }

    .live-status {
        font-size: clamp(0.65rem, 2vw, 0.85rem);
    }

    /* ---- 5. CANVAS WIDGET ASPECT RATIO ---- */

    /* The canvas wrapper must fill its parent (which is already 16:9 via aspect-ratio) */
    .canvas-wrapper {
        width: 100% !important;
        height: auto !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* Fabric.js generates a .canvas-container div with inline width/height.
       Override to fill the wrapper so ResizeObserver picks up the correct size. */
    .canvas-wrapper>.canvas-container {
        width: 100% !important;
        height: 100% !important;
    }

    /* ---- 6. MISC MOBILE ADJUSTMENTS ---- */

    /* Widget dropdown menus */
    .widget-dropdown {
        right: 0 !important;
        left: auto !important;
        min-width: 140px;
    }

    /* Chart containers — fill the 16:9 box */
    .chart-container {
        min-height: 150px;
        flex: 1;
    }

    /* Edit mode toggle */
    .edit-mode-toggle label {
        font-size: 0.75rem;
    }

    /* Alarm widget */
    .alarm-table th,
    .alarm-table td {
        font-size: 0.65rem !important;
        padding: 4px 6px !important;
    }

    /* Table widgets */
    .table-value-widget th,
    .table-value-widget td {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }
}

/* ====================================
   COPY / PASTE WIDGET — Context Menu & Toast
   ==================================== */
.paste-context-menu {
    display: none;
    position: absolute;
    z-index: 99999;
    min-width: 180px;
    background: rgba(20, 20, 35, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 229, 255, 0.1);
    padding: 6px 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
.paste-menu-item {
    padding: 10px 16px;
    color: #e0e0e0;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s, color 0.15s;
}
.paste-menu-item:hover {
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
}
.paste-menu-item i {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    color: #00e5ff;
    opacity: 0.8;
}

#conviz-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20, 20, 35, 0.92);
    backdrop-filter: blur(12px);
    color: #00e5ff;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.25);
    font-size: 0.85rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 500;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
#conviz-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   FLOATING WIDGET PLACEMENT OVERLAY
   ========================================= */
.widget-float-overlay {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    border: 2px dashed var(--tosca, #00E5FF);
    background: rgba(0, 229, 255, 0.07);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.18), inset 0 0 40px rgba(0, 229, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    transition: left 0.06s linear, top 0.06s linear;
    animation: floatPulse 2s ease-in-out infinite;
}
.widget-float-overlay .float-label {
    color: var(--tosca, #00E5FF);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
    pointer-events: none;
    user-select: none;
}
.widget-float-overlay .float-icon {
    font-size: 28px;
    color: var(--tosca, #00E5FF);
    opacity: 0.7;
    pointer-events: none;
}
.widget-float-overlay .float-hint {
    color: var(--text-muted, #a0a0a0);
    font-size: 11px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    pointer-events: none;
    user-select: none;
}
@keyframes floatPulse {
    0%, 100% { border-color: var(--tosca, #00E5FF); box-shadow: 0 0 24px rgba(0, 229, 255, 0.18); }
    50% { border-color: rgba(0, 229, 255, 0.45); box-shadow: 0 0 36px rgba(0, 229, 255, 0.30); }
}
/* Backdrop dim when floating placement is active */
.grid-stack.float-placing {
    cursor: crosshair;
    /* Ensure the grid fills the viewport during widget placement so mouse
       events register across the full area, even on an empty grid where
       GridStack sets inline min-height as low as 20px. */
    min-height: calc(100vh - 120px) !important;
}
.grid-stack.float-placing .grid-stack-item {
    opacity: 0.5;
    transition: opacity 0.3s;
}
/* Cancel bar at the bottom */
.widget-float-cancel-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: var(--bg-card, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
.widget-float-cancel-bar span {
    color: var(--text-muted, #a0a0a0);
    font-size: 13px;
}
.widget-float-cancel-bar button {
    background: var(--danger, #FF1744);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.widget-float-cancel-bar button:hover {
    background: #ff4569;
}