/* === Dashboard Left Panel (Device List) === */
#dashboard-left-panel {
    transition: margin-left 0.3s ease-in-out;
    flex-shrink: 0; /* Ngăn panel bị co lại khi cửa sổ hẹp */
}
#dashboard-left-panel.collapsed {
    margin-left: -16rem; /* -w-64 */
}
#dashboard-panel-toggle {
    position: absolute;
    top: 50%;
    right: -1.25rem; /* -5 * 0.25rem */
    transform: translateY(-50%);
    z-index: 21;
}
#dashboard-panel-toggle svg {
    transition: transform 0.3s ease-in-out;
}
#dashboard-left-panel.collapsed #dashboard-panel-toggle svg {
    transform: rotate(180deg);
}

/* === Widget Toolbox Panel === */
#widget-toolbox {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    width: 250px;
    max-height: calc(100% - 3rem);
    z-index: 200; /* Must be above enhanced-header (100) */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform: translateX(0);
}
#widget-toolbox.collapsed {
    transform: translateX(calc(100% + 1.5rem));
}
#widget-toolbox-toggle {
    position: absolute;
    top: 50%;
    left: -1.25rem;
    transform: translateY(-50%);
    z-index: 21;
}

/* === Script Editor Panel === */
.script-mode-btn {
    transition: background-color 0.2s, color 0.2s;
}
.script-mode-btn.active {
    background-color: #3b82f6;
    color: white;
}
.script-mode-btn:not(.active) {
    background-color: transparent;
    color: #6b7280;
}
.dark .script-mode-btn:not(.active) {
    color: #9ca3af;
}
.script-editor-file-list li.selected {
    background-color: #dbeafe; /* blue-100 */
    font-weight: 600;
}
.dark .script-editor-file-list li.selected {
    background-color: #1e3a8a; /* blue-900 */
}

/* Syntax Toolbox */
#syntax-toolbox-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    z-index: 20;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
}
#syntax-toolbox-container.collapsed {
    transform: translateX(calc(100% + 1.5rem));
}
#syntax-toolbox-toggle {
    position: absolute;
    top: 50%;
    left: -1.25rem;
    transform: translateY(-50%);
    z-index: 21;
}
#syntax-toolbox-toggle svg {
    transition: transform 0.3s ease-in-out;
}
#syntax-toolbox-container.collapsed #syntax-toolbox-toggle svg {
    transform: rotate(180deg);
}
.syntax-item {
    position: relative;
}
.syntax-popover {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 105%;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.2s;
}
.dark .syntax-popover {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}
.syntax-item:hover .syntax-popover {
    visibility: visible;
    opacity: 1;
}

/* === Query Log Panel === */
/* Syntax Highlighting in Log Window */
.log-message-content .cm-keyword { color: #c792ea; font-weight: bold; }
.log-message-content .cm-atom { color: #f78c6c; }
.log-message-content .cm-number { color: #f78c6c; }
.log-message-content .cm-string { color: #c3e88d; }
.log-message-content .cm-comment { color: #546e7a; font-style: italic; }
.log-message-content .cm-operator { color: #89ddff; }
.log-message-content .cm-meta { color: #ffcb6b; }

/* === API Tester Panel === */
.api-param-row input {
    border: 1px solid #d1d5db; /* gray-300 */
}
.dark .api-param-row input {
    border-color: #4b5563; /* gray-600 */
}
#api-response-container .dataTables_wrapper {
    font-size: 0.8rem;
}
#api-response-container table.dataTable thead th {
    padding: 8px 10px;
}
#api-response-container table.dataTable tbody td {
    padding: 6px 10px;
}
/* API Autocomplete Popup */
#api-autocomplete-popup .autocomplete-item.active {
    background-color: #dbeafe; /* blue-100 */
}
.dark #api-autocomplete-popup .autocomplete-item.active {
    background-color: #1e3a8a; /* blue-900 */
}
/* API View Toggle Buttons */
.api-view-toggle .active {
    background-color: #3b82f6;
    color: white;
}
.dark .api-view-toggle .active {
    background-color: #2563eb;
}
.api-view-toggle button:not(.active) {
    background-color: transparent;
    color: #6b7280;
}
.dark .api-view-toggle button:not(.active) {
    color: #9ca3af;
}
#api-response-json-wrapper .CodeMirror {
    height: 100%;
}

/* === Device List (in Connection Modal) === */
.device-card .device-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Dynamic API Editor Scrollbar (Dashboard-like) === */
#dynamic-api-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

#dynamic-api-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#dynamic-api-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

#dynamic-api-list::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease-in-out;
}

#dynamic-api-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

#dynamic-api-list::-webkit-scrollbar-thumb:active {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Dark mode scrollbar for dynamic API list */
.dark #dynamic-api-list {
    scrollbar-color: rgba(75, 85, 99, 0.3) transparent;
}

.dark #dynamic-api-list::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.3);
}

.dark #dynamic-api-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.5);
}

.dark #dynamic-api-list::-webkit-scrollbar-thumb:active {
    background-color: rgba(75, 85, 99, 0.7);
}

/* === Dynamic API Item Highlight === */
.api-item.selected {
    background-color: rgb(219, 234, 254) !important;
    border-color: rgb(59, 130, 246) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark .api-item.selected {
    background-color: rgb(30, 58, 138) !important;
    border-color: rgb(96, 165, 250) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}