/*
© 2025 Sharon Aicler (saichler@gmail.com)

Layer 8 Ecosystem is licensed under the Apache License, Version 2.0.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* Probler Popup - Content Styles (Tabs, Details, Performance) */

/* ============================================ */
/* Extended Header with Status Badge */
/* ============================================ */

.probler-popup-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

.probler-popup-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    min-width: 80px;
}

.probler-popup-status-badge.status-online {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.2);
    box-shadow: none;
}

.probler-popup-status-badge.status-warning {
    background: rgba(217, 119, 6, 0.1);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.2);
    box-shadow: none;
}

.probler-popup-status-badge.status-offline {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* ============================================ */
/* Popup Tabs */
/* ============================================ */

.probler-popup-tabs {
    display: flex;
    background: var(--layer8d-bg-light);
    border-bottom: 1px solid var(--layer8d-border);
    padding: 0 16px;
    gap: 4px;
    flex-wrap: wrap;
}

.probler-popup-tab {
    padding: 14px 16px;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--layer8d-text-medium);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: 'Figtree', sans-serif !important;
}

.probler-popup-tab:hover {
    background: rgba(160, 136, 115, 0.08);
    color: var(--layer8d-primary);
}

.probler-popup-tab.active {
    background: var(--layer8d-bg-white);
    color: var(--layer8d-primary);
    border-bottom-color: var(--layer8d-primary);
    box-shadow: none;
}

.probler-popup-tab-content {
    padding: 24px;
    min-height: 320px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Tabs edge-to-edge within padded body */
.probler-popup-body .probler-popup-tabs {
    margin: -24px -24px 0 -24px;
    padding: 0;
}

.probler-popup-body .probler-popup-tab-content {
    margin: 0 -24px -24px -24px;
    padding: 24px;
}

.probler-popup-tab-pane {
    display: none;
    min-height: 100%;
}

.probler-popup-tab-pane.active {
    display: block;
}

/* ============================================ */
/* Detail Grid (for device details, etc.) */
/* ============================================ */

.probler-popup-body .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.probler-popup-body .detail-section {
    background: var(--layer8d-bg-card);
    border: 1px solid var(--layer8d-border);
    padding: 18px;
    border-left: 1px solid var(--layer8d-border);
    border-radius: 10px;
}

.probler-popup-body .detail-section-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--layer8d-text-dark);
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: -18px -18px 14px -18px;
    padding: 10px 18px;
    background: var(--layer8d-bg-light);
    border-bottom: 1px solid var(--layer8d-border);
    border-radius: 10px 10px 0 0;
    font-family: 'Figtree', sans-serif !important;
}

.probler-popup-body .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--layer8d-border);
    gap: 20px;
}

.probler-popup-body .detail-row:last-child {
    border-bottom: none;
}

.probler-popup-body .detail-label {
    font-size: 12px !important;
    color: var(--layer8d-text-dark) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
    font-family: 'Figtree', sans-serif !important;
    flex: 0 0 44%;
    line-height: 1.45 !important;
}

.probler-popup-body .detail-value {
    font-size: 14px !important;
    color: var(--layer8d-text-dark) !important;
    font-family: 'Figtree', sans-serif !important;
    font-weight: 600 !important;
    text-align: right !important;
    flex: 1 1 auto;
    line-height: 1.45 !important;
    word-break: break-word;
}

.probler-popup-body .detail-value.status-online {
    color: #00c853;
}

.probler-popup-body .detail-value.status-offline {
    color: #757575;
}

.probler-popup-body .detail-value.status-warning {
    color: #ffc107;
}

.probler-popup-body .detail-empty {
    color: var(--layer8d-text-light);
    font-style: italic;
}

.probler-popup-body .detail-full-width {
    grid-column: 1 / -1;
}

/* ============================================ */
/* Performance Bars */
/* ============================================ */

.probler-popup-body .performance-bar {
    width: 100%;
    height: 8px;
    background: var(--layer8d-border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.probler-popup-body .performance-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.probler-popup-body .performance-bar-fill.low {
    background: #00c853;
}

.probler-popup-body .performance-bar-fill.medium {
    background: #ffc107;
}

.probler-popup-body .performance-bar-fill.high {
    background: #ff3d00;
}

/* ============================================ */
/* Tree View Styles (for physical inventory) */
/* ============================================ */

.probler-popup-body .tree-view-container {
    background: var(--layer8d-bg-light);
    border: 1px solid var(--layer8d-border);
    border-radius: 8px;
    padding: 15px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    overflow: auto;
}

.probler-popup-body .tree-view-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.probler-popup-body .tree-view-container::-webkit-scrollbar-track {
    background: var(--layer8d-bg-light);
}

.probler-popup-body .tree-view-container::-webkit-scrollbar-thumb {
    background: var(--layer8d-text-light);
    border-radius: 4px;
}

.probler-popup-body .tree-view-container::-webkit-scrollbar-thumb:hover {
    background: var(--layer8d-primary);
}

/* Responsive for detail grid */
@media (max-width: 768px) {
    .probler-popup-body .detail-grid {
        grid-template-columns: 1fr;
    }
}