/* QEMU Dev - Custom Styles */

body {
    padding-top: 56px;
    background-color: #f8f9fa;
}

/* Navbar active link */
.nav-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Dashboard cards */
.stat-card {
    border-left: 4px solid;
    transition: transform 0.15s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card.boards { border-left-color: #0d6efd; }
.stat-card.peripherals { border-left-color: #198754; }
.stat-card.processors { border-left-color: #6f42c1; }
.stat-card.projects { border-left-color: #fd7e14; }

/* Mesh browser */
.component-card {
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.component-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.arch-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e9ecef;
    color: #495057;
}

/* Memory map visualization */
.memory-map {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
}

.memory-map .addr {
    color: #569cd6;
}

.memory-map .label {
    color: #4ec9b0;
}

.memory-map .size {
    color: #ce9178;
}

/* Tables */
.table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

/* Filter buttons */
.filter-btn {
    border-radius: 20px;
    font-size: 0.85rem;
    padding: 4px 14px;
}

.filter-btn.active {
    font-weight: 600;
}

/* YAML display */
pre.yaml-view {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    font-size: 0.8rem;
    max-height: 500px;
    overflow-y: auto;
}

/* Alert container */
.alert-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
    max-width: 400px;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}