/*
© 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.
*/
/* ============================================ */
/* MODAL POPUP COMPONENT */
/* ============================================ */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1000;
    animation: modal-fade-in 0.2s ease-out;
}

.modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

@keyframes modal-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.modal-container {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    max-width: 1200px;
    width: 100%;
    min-height: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-slide-up 0.2s ease-out;
}

@keyframes modal-slide-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: -0.01em;
    font-family: 'Figtree', sans-serif;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.modal-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;
}

.modal-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;
}

.modal-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;
}

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

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
    transform: none;
}

.modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    color: var(--text-primary);
}

.modal-tabs {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 16px;
}

.modal-tab {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.modal-tab:hover {
    background: rgba(160, 136, 115, 0.08);
    color: var(--noc-cyan);
}

.modal-tab.active {
    background: var(--bg-card);
    color: var(--noc-cyan);
    border-bottom-color: var(--noc-cyan);
    box-shadow: none;
}

.modal-tab-content {
    padding: 24px;
    min-height: 360px;
}

.modal-body > .modal-tab-content {
    display: none;
}

.modal-body > .modal-tab-content.active {
    display: block;
    animation: fade-in-up 0.3s ease-out;
}

.modal-body > .modal-tabs + .modal-tab-content:last-child {
    display: block;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--border-subtle);
}

.detail-table thead {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.detail-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.detail-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.2s;
}

.detail-table tbody tr:hover {
    background-color: var(--bg-elevated);
}

.detail-table tbody tr:last-child {
    border-bottom: none;
}

.detail-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.detail-table tbody td code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--noc-cyan);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 16px 20px;
    margin-bottom: 24px;
}

.detail-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 140px;
    flex-shrink: 0;
}

.detail-value {
    font-size: 14px;
    color: var(--noc-charcoal);
    font-weight: 500;
    flex: 1;
}

.modal-tab-content .detail-section {
    margin-bottom: 24px;
}

.modal-tab-content .detail-section:last-child {
    margin-bottom: 0;
}

.modal-tab-content .detail-section h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-subtle);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fade-in-up 0.4s ease-out;
}

.device-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

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

.detail-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}

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

.detail-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.detail-value {
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    text-align: right;
}

.detail-value.status-online {
    color: var(--status-operational);
}

.detail-value.status-offline {
    color: var(--status-offline);
}

.detail-value.status-warning {
    color: var(--status-warning);
}

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

.perf-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 20px;
}

.perf-sub-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.perf-sub-tab:hover {
    color: var(--noc-cyan);
    background: rgba(160, 136, 115, 0.08);
}

.perf-sub-tab.active {
    color: var(--noc-cyan);
    border-bottom-color: var(--noc-cyan);
}

.perf-sub-pane {
    display: none;
}

.perf-sub-pane.active {
    display: block;
}

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

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

.performance-bar-fill.low {
    background: var(--status-operational);
}

.performance-bar-fill.medium {
    background: var(--status-warning);
}

.performance-bar-fill.high {
    background: var(--status-critical);
}

.modal-container.modal-small {
    max-width: 450px;
    min-height: auto;
}

.modal-container.modal-large {
    max-width: 700px;
    min-height: auto;
}

.modal-container.modal-form {
    min-height: auto;
    max-width: 550px;
}

.modal-body form {
    padding: 24px;
}

.modal-body > p {
    padding: 20px 24px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}