body {
    background: #f4f7fb;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.top-nav {
    background: #ffffff;
}

.sidebar {
    width: 250px;
    min-height: 100vh;
    transition: margin-left .2s ease;
}

.active-link {
    background: #0d6efd !important;
    color: #fff !important;
}

.stat-card {
    border: 0;
    border-radius: 14px;
    color: #fff;
}

.bg-stat-total { background: linear-gradient(135deg, #0d6efd, #4f86f7); }
.bg-stat-assigned { background: linear-gradient(135deg, #fd7e14, #ffac5d); }
.bg-stat-available { background: linear-gradient(135deg, #198754, #49b675); }
.bg-stat-repair { background: linear-gradient(135deg, #dc3545, #f4707c); }

.table thead th {
    font-size: .85rem;
    text-transform: uppercase;
    color: #6b7280;
}

.asset-image {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
}

@media (max-width: 767px) {
    .sidebar {
        margin-left: -250px;
        position: fixed;
        z-index: 1050;
    }

    .sidebar.show {
        margin-left: 0;
    }
}

body {
    color: #1f2937;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.auth-page {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, .08), rgba(25, 135, 84, .08)),
        #eef3f8;
}

.detail-label {
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.detail-value {
    color: #111827;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.system-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
}

.system-image-placeholder {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #e5e7eb;
    border: 1px dashed #9ca3af;
    border-radius: 8px;
    color: #6b7280;
    display: flex;
    justify-content: center;
}